This article has been localized into German by the community.
Deine erste Webseite
Hier ein Beispiel der einfachsten Webseite die man erstellen kann. Sie beginnt mit der Festlegung des DocType als HTML5, gefolgt von einem Seiten Titel und ein wenig Inhalt, in diesem Fall ein einzelner Absatz.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Um sich einmal vorstellen zu können wie diese Webseite aussieht - Der Titel des Dokuments "Your first HTML5 Document" und der Text "Okay, now we're going somewhere!" werden in die obere linke Ecke der Seite geschrieben.
Die Deklaration von DOCTYPE sagt jedem, der das Dokument liest, das als nächstes HTML als Inhalt folgen muss.
<!DOCTYPE html>Wenn man schon mal in das Markup von älteren HTML Dokumenten geschaut hat, ist einem eine DOCTYPE Deklaration wie die folgende bestimmt schon einmal begegnet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Auch professionelle Webdesigner haben den langen String zur DOCTYPE Deklaration immer von einem Dokument in das nächste kopiert - die neue Deklaration ist nun einfacher zu merken, da keine Version mehr angegeben werden muss und alle kommenden Features werden automatisch verfügbar gemacht.
Wofür ist der DOCTYPE?
Aber zuerst, warum gibt es überhaupt einen DOCTYPE? Alle Browser haben zwei Wege ein Dokument zu lesen - den Standard Modus und den "Sonderbaren" quirks - Modus. Wenn man ihnen nicht explizit mitteilt was für eine Art von Dokument sie grade behandeln, werden sie den quirks-Modus verwenden. Das ist die alte Art ein Dokument zu lesen -da mag es einige Fehler geben und man konnte sicher sien, dass nicht jeder Browser das Dokument gleich behandelt hat. Die Deklaration des DOCTYPE zwingt die Browser den Standard Modus zu benutzen, also den neuen weg Dokumente zu lesen. Im Standard-Modus werden die meisten Browser das Dokument auf die gleiche Weise behandeln und sie verstehen was der Webdesigner mit dem geschriebenen ausdrücken möchte.
Um das HTML5 Dokument für sich selbst einfacher lesbar zu machen sollte man zwei Gliederungselemente, nämlich <head> und <body> benutzen. Mit dieser Unterteilung kann man die Informationen die man vermitteln möchte klar gliedern, nämlich in den Titel (head) und den eigentlichen Inhalt (body). Wenn man diese Unterteilung nutzt, sieht die Webseite nun so aus:
<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>Was war nun die Absicht davon mag man sich fragen? Ob man die Unterteilung nun nutzt oder nicht obliegt einem selbst, aber es zeigt klar die Struktur der Webseite und macht es beim drüberschauen sehr viel einfacher.
Als letztes sollte man noch das <html> Element hinzufügen, das unmittelbar nach der DOCTYPE Deklaration eingefügt wird. Dieses umschließt den kompletten HTML Block, markiert also Beginn und Ende des HTML Codes.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>Herzlichen Glückwunsch, die erste HTML5 Webseite ist somit erfolgreich erstellt worden. Ist Ihnen das <p> Element aufgefallen, dass innerhalb des <body> Elementes angeordnet ist? Das nennt man einbetten und es ist ein sehr wichtiger Teil der gesamten HTML Struktur. Für jetzt belassen wir es dabei, die eingebetteten Elemente sollten nur schon einmal erwähnt werden.
Was Sie hier gelernt haben
- Immer den DOCTYPE deklarieren - <!DOCTYPE html>
- Das Element <head> nutzen um Informationen über die Webseite zu zeigen
- Nutzung des Elements <body> um den eigentlichen Inhalt der Webseite darzustellen
- Die Nutzung von <html>, <head>, und <body> obliegt einem selbst, hilft aber die Struktur der Webseite für einen selbst zu verdeutlichen.
- Die Strukturierung des Markup Codes macht es viel einfacher und verständlicher
- Man kann Elemente in andere Elemente einbetten, diese also verschachteln.
