Das HTML-Dokument
Aufbau eines HTML-Dokuments
Der Aufbau des einfachsten möglichen Word-Dokuments ist simpel: Sie erstellen ein neues leeres Dokument - das war's. Bei HTML braucht es ein paar wenige zusätzliche Dinge, damit wir von einem gültigen HTML-Dokument sprechen können. Nämlich folgendes:
<!DOCTYPE html>
<html>
</html>
Die erste Zeile ist der sogenannte Doctype: In jedem HTML-Dokument müssen wir genau diese Zeile (<!DOCTYPE html>) als oberste Zeile hinschreiben. Der Browser braucht diese Information, damit er weiss, dass sich hierbei um ein HTML-Dokument handelt.
Die Struktur der Zeilen 2 und 3 kommen Ihnen vermutlich aus dem 👉 vorherigen Kapitel bekannt vor: auf der Zeile 2 haben wir ein Start-Tag und auf der Zeile 3 ein End-Tag. Allerdings handelt es sich hier noch nicht um etwas wie eine Überschrift (<h1></h1>), sondern um das HTML Root-Element. Jedes HTML-Dokument muss genau ein solches Element haben, und der gesamte Inhalt des Dokuments muss in diesem Element drin sein. Was das bedeutet, sehen Sie in diesem nächsten Schritt:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Hier ist nun etwas Spannendes passiert: wir haben ein neues HTML-Element <body></body> innerhalb des Root-Elements <html></html> platziert. Dem sagen wir Verschachtelung. Wir können HTML-Elemente ineinander verschachteln. Anders gesagt: Der Inhalt eines HTML-Elements kann aus weiteren HTML-Elementen bestehen.
Und was hat es nun mit dem <body></body> auf sich? Das ist der Body (Körper) unseres Dokuments. Hier drin steht der gesamte sichtbare Inhalt - also der ganze Text, mit all seinen Überschriften, Bildern, etc. Nebst dem Body gibt es auch noch den Head für bestimmte Zusatzinformationen, den schauen wir uns aber später an. Wichtig ist hier: der Body im Root-Element drin.
Jetzt wird es Zeit, dass wir unserem Dokument etwas Text beifügen. Diesen können wir einfach in den Body hineinschreiben - also zwischen dem <body> Start-Tag und dem </body> End-Tag. So sieht das aus:
<!DOCTYPE html>
<html>
<body>
Hallo, Welt!
</body>
</html>
Bei Python ist es wichtig, dass wir unseren Code korrekt einrücken. Die Einrückungen haben dort nämlich eine entscheidende Bedeutung. In HTML ist das anders. Hier verwenden wir Einrückungen nur aus optischen Gründen: der Code bleibt so viel leserlicher.
Damit haben wir bereits ein erstes brauchbares HTML-Dokument erstellt. Wenn wir diese Datei nun im Browser öffnen, sieht sie wie folgt aus:
Im nächsten Abschnitt lernen Sie, wie Sie selbst ein solches HTML-Dokument erstellen und anzeigen.