[Tutorial] Homepagebau Anleitung für Beginner

[Lennart]

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.

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

HTML-Seiten bestehen aus einem Kopf, Header genannt, und einem Körper, Body genannt.
Wir starten also einen Kopf-Tag:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Nun kommen wir zum Body, dem Körper. Wir starten also wieder mit einem Tag:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

In den Body kommt nun unser Text, zum Beispiel:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

Dann beenden wir den Tag wieder:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Komplett sieht unser Code nun so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

.
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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Unsere ganze Seite sieht nun so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

Aber obwohl ich die Texte untereinander geschrieben habe, sind sie bei der Ausgabe alle nebeneinander!

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Dieser Code/Tag ist eine Ausnahme. Er muss nämlich nicht beendet werden!
In unserem Beispiel wollen wir nun alle Texte untereinander haben:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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

[Lennart]

Lektion 6:
Als nächstes vereinfachen wir unsere Seite wieder etwas um mehr Übersichtlichkeit zu erhalten:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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 http://www.zaiendo.de

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

oO, der Tag sieht aber kompliziert aus
Ist er aber eigentlich gar nicht
Wir haben wieder die Klammerstellung um unseren Text, wie vorhin bei dem fettgedruckten Text:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

Nur fügen wir dem Tag <a> nun noch ein weiteres Attribut hinzu, nämlich die Seite, auf die wir verlinken wollen.

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Immer noch einfach hmm?
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!

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Ü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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Unser Code sieht nun so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Der Font-Befehl mit dem Attribut Color ist so einfach wie alle anderen aufgebaut
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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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
Nun möchte ich das ganze nur noch in die Mitte verschieben:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

Beide Codes zusammen sehen nun so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

Ganz schön verschachtelt aber immer noch logisch oder?
Gesamt sieht unser Code momentan so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

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.

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

[Lennart]

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:

Bitte einloggen oder registrieren um diesen Code anzusehen

Der Beginn unserer Seite sieht also jetzt so aus:

Code:

Bitte einloggen oder registrieren um diesen Code anzusehen

und so weiter.