Grundgerüst einer HTML-Seite - DOCTYPE-Definition

Wie haben bisher mit den 2 HTML-TAGs bereits Inhalte ausgezeichnet, damit im Browserfenster dieser Inhalt angezeigt wird.

Beispiel mit bisherigen HTML-TAGs

<h1>HTML-Tutorial</h1>

<p>der erster Absatz…</p>

Allerdings gibt es neben dem Inhalt, welchen man im Browserfenster sieht, weitere Informationen über jede Einzelseite. Zu diesen weiteren Informationen gehört beispielsweise der Titel der Einzelseite (der im Fensterkopf des Browsers angezeigt wird). Es gibt noch weitere Metainformationen, die wie in einem späteren Kapitel ansehen.

Dafür gibt es diesen Grundaufbau, der auf jeder Seite vorhanden sein sollte. Er besteht aus 3 Bereichen.

die Bereiche einer HTML-Seite – DOCTYPE, head, body

Im Bereich DOCTYPE wird dem Internet-Browser mitgeteilt, was er an Befehlen erwarten kann und an welchem Standard man sich bei der Erstellung der Seite gehalten hat.

Im Bereich HEAD stecken die Metainformationen über die Seite, also beispielsweise der Titel der Seite, der im Browserfensterkopf angezeigt wird.

Im Bereich BODY stecken der eigentliche Inhalt der Seite und die HTML-TAGs.

Eine HTML-Seite hat also einen Grundaufbau. Dieses hat in der Minimalversion folgenden Aufbau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <title>HTML-Tutorial von www.html-seminar.de</title>
</head>

<body>

</body>
</html>

DOCTYPE-Definition - erste Zeile jeder Website

Über die DOCTYPE-Definition teilen Sie dem Webbrowser mit, was er in der folgenden Datei erwarten kann und welche HTML-Befehle zulässig sind. Im Klartext, was ist zulässig und was wäre falsch. Wir benötigen diese Zeile, damit wir bald unsere erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen können um schnell aus den eigenen Fehler (und aus den Fehlern anderer) richtiges HTML lernen zu können. Für den Anfang ist es in Ordnung, wenn Sie diese Zeile exakt so übernehmen. Achten Sie beim Übernehmen auf Groß- und Kleinschreibung. Am besten einfach kopieren.

Anmerkung: In Wahrheit gibt es Varianten dieser ersten Zeile. Aber zum Lernen von HTML ist es ideal sich am aktuellsten Standard zu halten, der auch keine Kompromisse zulässt. Es gibt veraltete DOCTYPE-Varianten und auch „Kompromiss-„DOCTYPE-Varianten. Daher wird im HTML Kurs nur diese STRICT-Variante genutzt. Dadurch fallen alle Fehler sofort auf und man gewöhnt sich nichts falsche an.

Der HTML-TAG <html>

In der nachfolgenden Zeile der DOCTYPE-Definition kommt der Anfangs-TAG <html mit weiteren Angaben wie Beispielweise welche Sprache für den Inhalt der Seite verwendet wird. Diese Zeile einfach 1 zu 1 übernehmen (sofern Sie deutsche Texte schreiben).

Wenn man genau schaut, sieht man, dass der END-TAG </html> ganz am Ende der Seite auftaucht und alle Bereiche umfasst. Wir machen eine HTML-Seite und dazu gehören sowohl die Metaangaben, die sich im <head>-Bereich befinden, wie auch die Inhalte, die sich im <body>-Bereich befinden.

head-Bereich

Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht direkt sieht - mit Ausnahme von Inhalt des <title>-TAGs, der im Browserfensterkopf angezeigt wird. Die Angaben im Head-Bereich sind wichtig für die Technik und Suchmaschinen und es können noch diverse Informationen über Autor, Copyright und eine Kurzbeschreibung eingetragen werden.

Der wichtigste Eintrag ist der Seitentitel über den HTML-TAG <title>. Dort wird eingetragen, was später in der Internetbrowser-Kopfzeile angezeigt wird wenn der Besucher die Seite aufruft. Auch wird dieser Eintrag von Suchmaschinen verwendet. Dort wird genau diese Zeile als erste Zeile in den Suchmaschinenergebnisse zum Anklicken angezeigt. Tragen Sie dort in wenigen Worten ein, was auf der entsprechenden Einzelseite den Besucher erwartet! Investieren Sie hier Zeit (auch wenn es am Anfang für den Einsteiger die Tragweite dieser Zeile noch nicht komplett abschätzbar und nachvollziehbar sein wird.

Schauen wir uns die Auswirkungen in der Praxis an, da es sich hier um einen sehr wichtigen HTML-TAG handelt der gerne unterschätzt wird. Als Beispiel schauen wir uns den HTML-Code vom HTML-Seminar an. Dort steht als Inhalt im <title>HTML lernen und die eigene Homepage erstellen – HTML Kurs / Seminar</title>

Quellcode DOCTYPE mit head und title

Im Browser taucht dieser Inhalt des <title>-TAGs oben im Fensterkopf blau hinterlegt auf.

title-TAG im Fensterkopf vom Browser

Als Beispiel für die Auswirkung des <title>-Eintrags nun das Ergebnis, wenn man in einer Suchmaschine nach „HTML Kurs“ sucht.

title-TAG auch in den Ergebnissen der Suchmaschinen

Und wenn wir ein Lesezeichen in unserem Browser setzen wollen, taucht wieder der Inhalt des <title>-TAGs auf:

title-TAG für Lesezeichen für Browser

Noch eine weitere Anmerkung zum <title>-TAG, da dieser extrem wichtig ist. Für jede Einzelseite muss der <title>-TAG passend zum Inhalt der Einzelseite geschrieben werden. Denkbar wäre für ein HTML Tutorial z.B. dass immer im <title>HTML Tutorial</title> steht – was ja für jede Einzelseite stimmen würde. Aber dies ist extrem schlechter Stil und hat Nachteile bei Suchmaschinen und zeigt auch, dass der Ersteller der Seiten „zu faul“ war, einen individuellen Titel für jede Seite zu erstellen. Beispiel für unsere HTML Tutorial wäre dann für die Unterseite mit dem Inhalt über die Anwendung von Überschriften dann z.B. „Überschriften in HTML erstellen“. Also bitte darauf achten, dass die <title>-TAGs gesetzt sind und gut Lesbar für die Besucher sind. Sie haben um die 60 Zeichen - in der Kürze liegt die Würze.

Weiter steht im HEAD-Bereich noch der Verweis auf CSS, auf den dann im Kapitel zu CSS exakt darauf eingegangen wird. Schauen wir uns den folgenden BODY-Bereich an.

body-Bereich

Als erstes beschäftigen wir uns mit dem Body-Bereich. Alles was im BODY-Bereich eingetragen wird, zeigt der Browser an. Also zunächst machen wir alle Eintragungen zwischen dem ANFANGSTAG <body> und dem ENDTAG </body>

Alle folgenden Kapitel gehen davon aus, dass Sie das Grundgerüst haben und alle Eintragungen die im Browser angezeigt werden im Body-Bereich eintragen. Es wird aus Platzgründen dann nicht mehr das komplette Grundgerüst gezeigt!

Aufgabe: unsere bisheriges Beispiel erweitern

Erweitern Sie folgenden Quellcode um das entsprechende HTML-Grundgerüst.

<h1>HTML-Tutorial</h1>

<p>der erster Absatz…</p>

Setzen Sie auch den Titel der Seite auf „HTML Tutorial – meine erste HTML Seite“ und schauen Sie, wie es im Internetbrowser herauskommt – setzen Sie auch ein Lesezeichen auf diese erstellte Seite

vorheriges Kapitel: HTML-Editor P5

nächstes Kapitel: Aufgabenlösung Seitenaufbau

das eBook zum HTML-Seminar.de
komplette Website als 357 Seiten eBook
zum Downloaden und Ausdrucken

© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de