Die allgemeine Dokumentenstruktur

Jedes HTML Grundgerüst besteht aus ineinander verschachtelten Elementen (den HTML Tags). Um dieses zu veranschaulichen erstellen wir, als erste praktische Übung, ein HTML Dokument. Um das zu tun benötigt man nichts weiter als den Betriebssystemeigenen Editor. Diesen erreichen Sie bei Windows XP und Windows Vista z.B. unter "start/programme/zubehör/editor".
Geben Sie anschließend folgenden Code in den Editor ein:

Speichern Sie dann das Dokument als testwebseite.html ab. Achten Sie bitte darauf, dass der Editor keine .txt Endung anhängt. Dazu müssen Sie beim Speichern als Dateityp "alle Dateien" auswählen.

Um das Ergebnis Ihrer Arbeit zu betrachten, müssen Sie nun das Dokument in Ihrem Browser öffnen. Dieses können Sie erreichen, indem Sie auf die Datei Doppelklicken, oder diese direkt im Browser über den Menüpunkt "datei/öffnen" aufrufen. Das Ergebnis sollte in etwa so aussehen:

Schauen wir uns nun den Code im Einzelnen an:

Dokumenttyp (Doctype)

Am Dokumentenanfang steht die Dokumenttypangabe, welche dem Browser Informationen über die verwendete Sprache (HTML oder XHTML) und Variante (Strict, Transitional oder Frameset) mitteilt. Der Browser benötigt diese Informationen für die korrekte Darstellung der Webseite. In unserem Fall haben wir uns für die Variante strict entschieden. Weitere Informationen über die verschiedenen Möglichkeiten und Auswirkungen der Dokumenttypangaben erläutern wir im nachfolgenden Kapitel.

Wurzelelement (html)

Direkt nach der Dokumenttypangabe folgt das HTML Wurzelelement, welches man sich als einen großen Container oder einen Rahmen vorstellen kann. Zwischen dem Start Tag und dem End Tag werden alle weiteren Elemente umschlossen.
Das HTML Wurzelement wird in zwei Hauptbereiche unterteilt: Den head (Kopf) und den body (Körper) Bereich.

Kopfelement (head)

Das head Element beinhaltet wichtige Informationen über das Dokument, welche durch den Browser und die Suchmaschinenrobots gelesen und abgearbeitet werden. Hier können z.B. ein Titel, die Beschreibung der Webseite, der Name des Autors, entsprechende Suchbegriffe (Keywords) etc. hinterlegt werden.
Weitere Informationen über die Angaben im Kopferbereich einer HTML Seite folgen im nachfolgenden Kapitel.

Der Seitentitel (title – Tag) einer Webseite ist sehr wichtig, da er sehr viel über den Inhalt der Webseite aussagt und damit auch für das Wiederfinden der Webseite in den Suchmaschinenergebnissen ausschlaggebend ist. Der Inhalt des Seitetitels (in unserem Fall Testwebseite) wird außerdem in der Titelleiste des Browserfensters angezeigt.
Darüber hinaus wird der Dokumententitel als Vorgabe verwendet, wenn der Benutzer die Webseite zu seinen Favoriten hinzufügt. In vielen Fällen wird der Seitentitel von den Suchmaschinen auch als anklickbarer Verweis gesetzt.
Wie Sie unschwer erkennen können, ist der Titel eines HTML Dokuments ein sehr wichtiges Element bei der Seitengestaltung. Auf jeden Fall sollten Sie solche Titel wie: "Undefined" oder "Neue Seite" vermeiden.

Seitenkörper (body)

Nach dem Seitenkopf (head) Element folgt der Seitenkörper (body). Hier finden Sie alle Inhalte (Texte, Bilder etc.), welche letztendlich im Browserfenster angezeigt werden.

Im nächsten Kapitel erfahren Sie mehr über die "versteckten" Angaben einer Webseite. Wir zeigen Ihnen nützliche Informationen und Möglichkeiten über den Einsatz des Dokumenttyps und der Metaangaben.