Das Grundgerüst einer HTML-Seite
Hier sehen wir das Grundgerüst einer HTML-Seite:
Ruft man diese Seite im Browser auf, so sieht man noch nicht besonders viel:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Woran man HTML-Code schnell erkennen kann, sind die typischen spitzen Klammern. Mit diesen Klammern kennzeichnet man sogenannte Tags.
Die allermeisten Tags müssen geöffnet und wieder geschlossen werden - so wie Klammern in der Mathematik. Alles was innerhalb eines Tags steht wird dann durch dieses Tag beeinflusst.
Schauen wir uns einmal Schritt für Schritt dieses erste Beispiel an:
- Das erste Tag
<!DOCTYPE html>
stellt direkt eine Ausnahme von der Regel dar. Es wird nicht geschlossen, sondern muss nur einmal ganz am Anfang stehen. Es teilt dem Browser mit, dass in diesem Dokument HTML-Code steht. - Die Tags
<html>
und</html>
öffnen und schließen unser HTML-Dokument. - Mit
<head> </head>
markiert man den sogenannten Kopf des Dokuments. Hier kann man Informationen angeben, die nicht unmittelbar in der eigentlichen Seite erscheinen. Hier wurden folgende Informationen angegeben: - Durch
<meta charset="utf-8">
wird festgelegt, welcher Zeichensatz verwendet werden soll. Kurz gesagt, sorgen wir hier dafür, dass auch Umlaute ohne Probleme angezeigt werden. Dieses Tag ist auch eines der wenigen Tags, die nicht geschlossen werden müssen.
Wichtig: Du musst im Texteditor immer denselben Zeichensatz verwenden wie im HTML-Dokument angegeben! Du findest diese Einstellung meist unter Kodierung oder einem ähnlichen Menüpunkt. - Mit
<title> </title>
markieren wir den Titel des Dokuments. Dieser erscheint oben im Tab des Browsers (da, wo jetzt gerade Einführung HTML 5 - Lektion 01 angezeigt wird). <body> </body>
kennzeichnet den Körper, d.h., den Bereich in dem der eigentliche Inhalt zu finden ist. Man könnte sagen, ab dort geht es endlich richtig los.