Zaiendo Wir sind die Community


Neueste Ankündigungen:
Zaiendo.de ist auf FaceBook und Youtube.

Witz des Tages:
Ein Jäger aus Kanada hat sich ein neues Gewehr gekauft. Er geht gleich damit in die Rocky Mountains auf Bärenjagd. Kaum angekommen, sieht er einen riesigen Grizzly. Er legt an, schießt, doch der Grizzly ist weg. Da klopft ihm jemand auf die Schulter. Er dreht sich um und sieht den Bären. Der sagt: "Entweder ziehe ich Dir mit meiner Pranke durchs Gesicht, oder du läßt die Hose runter und beugst dich nach vorne". Der Jäger beschließt, kein Held zu sein und läßt die Hose fallen. Nach dem alles vorüber ist, fährt er zurück in die Stadt, kauft sich einen Elefantentöter und geht wieder auf die Jagd. Er sieht den Bären, legt an und schießt. Als sich der Rauch verzogen hat, ist der Bär wieder weg. Stattdessen klopft er ihm auf die Schulter und sagt: "entweder ziehe ich Dir..."
Als wieder alles vorüber ist, fährt er wieder in die Stadt und kauft sich eine Kiste Dynamit. Er fährt zurück in die Rockys, sieht den Bären und zündet die Ladung. Als sich der Rauch verzogen hat, ist der Bär weg. Da klopft der Bär ihm wieder auf die Schulter und sagt grinsend: "Allmählich glaube ich, dass Du gar nicht wegen der Jagd hier bist..."

Teilen auf:
Twitter Facebook Stumble Upon Delicious Google

Themabewertung:
  • 2 Bewertung(en) - 4.5 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Homepagebau Anleitung für Beginner
» ein Grundkurs
#1
Anleitung zum Bau einer einfachen Homepage mit HTML

Dieses Tutorial soll die Grundzüge und Befehle von HTML vermitteln, so dass man am Ende des Tutorials selbst eine einfache Homepage zu erstellen.
Es richtet sich an Beginner, die HTML noch nicht kennen.

Tip: Ein weiterführendes CSS-Tutorial gibt es hier!

Lektion 1:
Homepages bauen ist einfach. Und man benötigt dazua uch keine kostenpflichtigen Tools.
Wir werden für den Anfang einfach mit dem Windows Editor arbeiten.
Ihr ruft ihn über Start -> Alle Programme -> Zubehör -> Editor auf.
Ihr solltet nun ein weißes Fenster sehen, in das ihr Text eingeben könnt, wie ihr es vielleicht von Word kennt.
Dort fangen wir nun an.
[Bild: zaiendosig.php]
Antworten
#2
Lektion 2:
HTML besteht aus sogenannten Tags, einer Art Befehlen.
Praktisch jeder HTML-Tag, der einmal begonnen wurde, muss auch wieder geschlossen werden.
Fangen wir mit einem grundlegenden Tag an, dem Tag, der dem Browser sagt, was er für eine Datei vor sich hat:
Code:
<html> </html>
Hieran kann man die Struktur eines HTML Codes / Tags erkennen.
Jeder Code befindet sich in den eckigen Klammern <>.
Wenn ein Code angefangen wurde, muss er bis auf wenige Ausnahmen auch immer wieder beendet werden, dazu dient </>.
Alles, was so vom Tag umschlossen wird, wird durch den Tag beeinflusst. Veranschaulichung:
Code:
<html> Wird beeinflusst </html>
[Bild: zaiendosig.php]
Antworten
#3
Lektion 3:
Nun wollen wir mal eine einfache HTML-Seite bauen. Wir benötigen dafür den Basis-Aufbau einer HTML-Seite:
Zuerst definieren wir, dass es eine HTML-Seite ist:
Code:
<html>
HTML-Seiten bestehen aus einem Kopf, Header genannt, und einem Körper, Body genannt.
Wir starten also einen Kopf-Tag:
Code:
<head>
Da wir noch nicht wissen, was wir in den Head Text schreiben könne, lassen wir ihn erstmal leer und beenden ihn nun wieder:
Code:
</head>
Nun kommen wir zum Body, dem Körper. Wir starten also wieder mit einem Tag:
Code:
<body>
In den Body kommt nun unser Text, zum Beispiel:
Code:
Hallo Welt!
Dann beenden wir den Tag wieder:
Code:
</body>
Ganz am Anfang haben wir ja einen HTML-Tag geöffnet, der sollte alles einklammern. Natürlich müssen wir ihn aber am Ende auch wieder schließen:
Code:
</html>
Komplett sieht unser Code nun so aus:
Code:
<html>

<head>
</head>

<body>

Hallo Welt!

</body>

</html>
Nun wollen wir aber nicht nur die Codeansammlung haben, sondern die Seite angucken!
Wir speichern die Seite mit dem Code wie folgt:
Datei -> Speichern unter -> Einen beliebigen Ordner auswählen -> die Datei index.html nennen und ganz wichtig: Unter Dateityp "Alle Dateien" auswählen!
Sonst wird das nämlich als index.html.txt gespeichert und das soll es nicht.
Nun gehen wir in den Ordner, in dem wir die Datei gespeichert haben und öffnen sie mit unserem Browser, ich empfehle Mozilla Firefox, Internet Explorer oder jeder andere Browser sollten aber auch funktionieren.
Wunder über Wunder - Unser Text wird angezeigt!
Weiter geht es mit:
[Bild: zaiendosig.php]
Antworten
#4
Lektion 4:
Nun können wir also bereits Text in unsere Homepage einfügen, als nächstes kümmern wir uns um Formatierungsmöglichkeiten.
Wenn wir Text fett machen wollen, benötigen wir den Code
Code:
<b>
.
Wir versuchen das mal mit unserer Homepage (Falls ihr sie geschlossen habt öffnet ihr sie einfach wieder mit dem Editor, zum Beispiel über Rechtsklick -> Öffnen mit -> Auswahl aus Liste -> Editor):
Code:
<b>Hallo Welt!</b>
Auch hier müssen wir den Tag wieder beenden mit dem Schrägstrich /.
Damit es sich auch lohnt schreiben wir gleich weiter, einen unterstrichenen Satz:
Code:
<u>Unterstrichener Text</u>
Nun speichern wir wieder und rufen nochmal unsere Seite auf, es müsste nun etwa so aussehen:
Hallo Welt! Unterstrichener Text
Das klappt doch schon ganz gut! Nun noch spaßhalber den Tag für kursiven Text:
Code:
<i>Kursiver Text</i>
Unsere ganze Seite sieht nun so aus:
Code:
<html>

<head>
</head>

<body>

<b>Hallo Welt!</b>
<u>Unterstrichener Text</u>
<i>Kursiver Text</i>

</body>

</html>
Aber obwohl ich die Texte untereinander geschrieben habe, sind sie bei der Ausgabe alle nebeneinander!
[Bild: zaiendosig.php]
Antworten
#5
Lektion 5:
Das liegt daran, dass HTML nicht automatisch erkennt, wann ein Zeilenumbruch vorliegt.
Also benötigen wir auch dafür wieder einen Code:
Code:
<br>
Dieser Code/Tag ist eine Ausnahme. Er muss nämlich nicht beendet werden!
In unserem Beispiel wollen wir nun alle Texte untereinander haben:
Code:
<html>

<head>
</head>

<body>

<b>Hallo Welt!</b><br>
<u>Unterstrichener Text</u><br>
<i>Kursiver Text</i><br>

</body>

</html>
Wie ihr seht, wird der Code bereits etwas unübersichtlicher, daher empfehle ich euch generell, alle neuen Befehle/Tags in eine neue Zeile zu schreiben.
Unser Ziel ist aber erreicht, der Text ist untereinander:
Hallo Welt!
Unterstrichener Text
Kursiver Text
[Bild: zaiendosig.php]
Antworten
Registriere dich (kostenlos) um diese Werbung zu verbergen.
#6
Lektion 6:
Als nächstes vereinfachen wir unsere Seite wieder etwas um mehr Übersichtlichkeit zu erhalten:
Code:
<html>

<head>
</head>

<body>

Hallo Welt!<br>
Link<br>

</body>

</html>
So sieht mein neuer Code aus und man kann schon erkennen, was wir als Nächstes üben wollen: Links.
Mit Links auf andere Seiten wird das Internet erst richtig funktionsfähig, denn 90% der Dinge, die wir anklicken, sind Links.
Mit Links bewegt man sich von HTML-Seite zu HTML-Seite.
Verwandeln wir also unseren Text "Link" in einen Link, zum Beispiel zu https://www.zaiendo.de
Code:
<a href="https://www.zaiendo.de">Link</a>
oO, der Tag sieht aber kompliziert aus Confused
Ist er aber eigentlich gar nicht Smile
Wir haben wieder die Klammerstellung um unseren Text, wie vorhin bei dem fettgedruckten Text:
Code:
<a>Link</a>
Nur fügen wir dem Tag <a> nun noch ein weiteres Attribut hinzu, nämlich die Seite, auf die wir verlinken wollen.
Code:
<a href="https://www.zaiendo.de">
href ist unser Ziel, unser Ziel ist gleich = Zaiendo.de.
Das setzen wir in Anführungszeichen, damit klar ist, wo das Atribut anfängt und wo es aufhört.
Gesamt sieht unser Code nun so aus:
Code:
<html>

<head>
</head>

<body>

Hallo Welt!<br>
<a href="https://www.zaiendo.de">Link</a><br>

</body>

</html>
Immer noch einfach hmm? Cool
Nun speichern wir und überprüfen das Ergebnis, es sollte so aussehen:
Hallo Welt!
Link
Wenn wir nun auf den Link klicken, kommen wir tatsächlich zu Zaiendo.de!
[Bild: zaiendosig.php]
Antworten
#7
Lektion 7:
Der Link wird farbig dargestellt, der Rest der Seite aber noch nicht.
Daher möchte ich nun die Seite etwas besser gestalten, fangen wir mit der Hintergrundfarbe an. Der Hintergrund gehört ja zum Körper unserer HTML-Seite, also müssen wir ihn im Body-Tag näher definieren:
Code:
<body bgcolor="blue">
Wir weisen einfach, wie wir es schon beim Link gesehen haben, dem Body-Tag ein Attribut zu, bgcolor. Die Background-Color, also Hintergrundfarbe, ist gleich = blue, also blau.
Man kann so direkt Farben angeben, oder man nutzt HTML-Farbcodes.
Der HTML-Code für schwarz sieht zum Beispiel so aus:
Code:
#000000
Eine große Übersicht über die Webfarben findet ihr hier auf Wikipedia.
Unser Body-Tag mit einem HTML-Farbcode für Blau würde zum Beispiel so aussehen:
Code:
<body bgcolor="#0000FF">
Übrigens: Egal wieviele Attribute wir einem Tag beim Öffnen zuweisen, wenn wir ihn mit / wieder beenden, müssen wir diese Attribute nicht nochmal aufschreiben sondern nur den Tag:
Code:
</body>
Unser Code sieht nun so aus:
Code:
<html>

<head>
</head>

<body bgcolor="#0000FF">

Hallo Welt!<br>
<a href="https://www.zaiendo.de">Link</a><br>

</body>

</html>
[Bild: zaiendosig.php]
Antworten
#8
Lektion 8:
Nun habe ich aber das Problem, dass man meinen schwarzen Text auf dem blauen Hintergrund nur sehr schwer lesen kann.
Also färbe ich jetzt den Text ein:
Code:
<font color="white">Hallo Welt!</font>
Der Font-Befehl mit dem Attribut Color ist so einfach wie alle anderen aufgebaut Smile
Auch hier kann man absolute Farben wie "white" verwenden, oder die Webfarbcodes.
Weitere Maßnahme um unseren Text besser darzustellen:
Wir machen ihn größer:
Code:
<font color="white" size="7">Hallo Welt!</font>
Nun hat der Font-Befehl mehrere Attribute, eines für die Farbe und eines für die Größe (Size). Größen gibt es sovon 1-7, normal ist 3, 7 am Größten.
Sieht doch gut aus Cool
Nun möchte ich das ganze nur noch in die Mitte verschieben:
Code:
<center>Hallo Welt!</center>
Beide Codes zusammen sehen nun so aus:
Code:
<font color="white" size="7"><center>Hallo Welt!</center></font>
Ganz schön verschachtelt aber immer noch logisch oder? Smile
Gesamt sieht unser Code momentan so aus:
Code:
<html>

<head>
</head>

<body bgcolor="#0000FF">

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

</body>

</html>
Wenn wir nach dem </center> noch weiteren Text einfügen, ist der zwar nicht mehr in der Mitte, aber noch weiß, weil ja der <font>-Befehl noch nicht beendet wurde.
Die Klammerstellung ist also weiterhin wichtig.
[Bild: zaiendosig.php]
Antworten
#9
Lektion 9:
Alles ganz schön und gut aber ich möchte auch ein Bild auf meine Homepage stellen!
Dafür gibt es wieder einen Tag/Code, der NICHT beendet werden muss, er sieht so aus:
Code:
<img src="https://www.zaiendo.de/board/images/be/logo.png">
Mit "img" definieren wir dass es sich hier um ein Bild handelt und mit "src" (steht für Source, also Quelle) geben wir als Attribute die Adresse an, unter der das Bild zu finden ist.
Manche Browser machen um unser Bild einen hässlichen blauen Rahmen herum.
Daher sollten wir ein weiteres Attribut hinzufügen:
Code:
<img src="https://www.zaiendo.de/board/images/be/logo.png" border="0">
0 heißt in der Computerwelt Nein, 1 bedeutet Ja.
Da wir border gleich = 0 setzen, verneinen wir einen Rahmen um unser Bild.
Meine HTML Seite sieht nun so aus:
Code:
<html>

<head>
</head>

<body bgcolor="#0000FF">

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
<a href="https://www.zaiendo.de">Link</a><br>

<img src="https://www.zaiendo.de/board/images/be/logo.png" border="0">

</body>

</html>
[Bild: zaiendosig.php]
Antworten
#10
Lektion 10:
Bislang haben wir uns ja immer nur im Body, also im Körper unserer Homepage bewegt.
Aber auch in den Kopf, den head unserer Seite, können wir Informationen packen.
Die wohl wichtigste Information, die sich im Head der Seite befindet, ist der Titel der Seite.
Er wird nicht nur oben Im Browser angezeigt, sondern erscheint auch in der Liste der bereits besuchten Seiten, beim hinzufügen eines Lesezeichens und bei der Eintragung bei Suchmaschinen.
Code:
<title>Titel der Homepage</title>
Der Beginn unserer Seite sieht also jetzt so aus:
Code:
<html>

<head>
<title>Titel der Homepage</title>
</head>

<body bgcolor="#0000FF">

<font color="white" size="7">
<center>Hallo Welt!</center>
</font><br>
und so weiter.
[Bild: zaiendosig.php]
Antworten
Werbeagentur gesucht? PRinguin, die Digitalagentur. Für Web Entwicklung und Online Marketing.
Registriere dich (kostenlos) um diese Werbung zu verbergen.


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  [Tutorial] CSS Anleitung für Beginner gamer94 4 4.871 09.07.2010, 20:49
Letzter Beitrag: gamer94

Verlinke dieses Thema:

Teile es auf:
Twitter Facebook Stumble Upon Delicious Google GMail LinkedIn



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste