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.
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>
<html>
<head>
<title>Beispiel HTML Grundgerüst </title>
<meta charset="UTF-8" />
<meta name="description" content="Kurzbeschreibung" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
Danke an den Befehl - charset="UTF-8
</br>
</br>
Umlaute werden nun auch dargestellt : Ü Ö Ä ü ö ä
</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. Achte beim Übernehmen auf Groß- und Kleinschreibung. Am besten einfach kopieren.
Der HTML-TAG <html>
Jetzt 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. Trage dort in wenigen Worten ein, was auf der entsprechenden Einzelseite den Besucher erwartet!
Als Beispiel schauen wir uns den folgenden HTML-Code an. Dort steht als Inhalt im <title>Hummel Hummel</title>
<!DOCTYPE html>
<html>
<head>
<title>Hummel Hummel</title>
</head>
<body>
</body>
</html>
Erstelle die Datei ./title1.htm und beobachte das Browserfenster.
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. Denn auch Suchmaschinen interessieren sich für den Titel. Du hast um die 60 Zeichen – in der Kürze liegt die Würze.
Weiter steht im HEAD-Bereich noch der Verweis auf die CSS Datei, die sich um das Design kümmert. Dazu aber später mehr.
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 du das Grundgerüst selbst erstellst (kopierst).
Alle Eintragungen die im Browser angezeigt werden sollen, werden im Body-Bereich eingetragen.
Es wird aus Platzgründen dann nicht mehr das komplette Grundgerüst gezeigt! Also ohne DOCTYPE und HEAD
Aufgabe: unsere bisherigen Beispiele erweitern
Erweitere deine bisherigen Beispiele um das entsprechende HTML-Grundgerüst. Pass auch den Titel an.
Du musst also die Dateien index.htm, absatz.htm, absatz2.htm, absatz3.htm, ueberschrift.htm und ueberschrift2.htm anpassen – Viel Erfolg!
Aufgabenlösung Seitenaufbau
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial - meine erste HTML Seite</title>
</head>
<body>
<h1>HTML-Tutorial</h1>
<p>der erster Absatz...</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Beispiel HTML Grundgerüst </title>
<meta charset="UTF-8" />
<meta name="description" content="Kurzbeschreibung" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
</body>
</html>
Schreibe einen Kommentar