Wie eine Webseite aufgebaut ist
Eine Webseite ist ein Text in der Sprache HTML. Der Browser liest ihn und zeigt daraus die Seite.
Das lernst du heute
- Ich kann erklären, was der Quelltext einer Webseite ist.
- Ich kenne den Kopf (head) und den Körper (body) einer Seite.
- Ich kann sagen, was ein Browser mit dem Quelltext macht.
Jede Webseite besteht aus Text. Diesen Text nennt man Quelltext. Er ist in der Sprache HTML geschrieben. HTML beschreibt, was auf einer Seite steht: Überschriften, Absätze, Bilder und Links. HTML rechnet nichts aus. Deshalb nennt man HTML eine Dokumentenbeschreibungssprache.
Der Browser liest den Quelltext von oben nach unten. Aus ihm baut er die Seite auf. Jede Seite hat zwei große Teile. Im Kopf (head) stehen Angaben über die Seite, zum Beispiel der Titel im Browser-Tab. Im Körper (body) steht alles, was man auf der Seite sieht.
| Zeile | Quelltext |
|---|---|
| 1 | <!DOCTYPE html> |
| 2 | <html lang="de"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>Mein Hobby</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | <h1>Mein Hobby</h1> |
| 9 | <p>Ich fotografiere gern.</p> |
| 10 | </body> |
| 11 | </html> |
Den Quelltext lesen
- Zeile 1 sagt dem Browser: Das ist ein HTML-Dokument.
- Zeilen 3 bis 6 sind der Kopf. Hier steht der Titel „Mein Hobby“ für den Tab.
- Zeilen 7 bis 10 sind der Körper. Hier stehen eine Überschrift und ein Absatz.
- Auf der Seite sieht man nur die Überschrift und den Absatz.
Ich verstehe das noch nicht
Such dir aus, was dir hilft.
Noch einfacher erklärt
HTML ist ein Text.
Der Browser liest ihn.
Daraus entsteht die Seite.
Ein Beispiel
Ein Bauplan beschreibt ein Haus. Der Quelltext beschreibt eine Seite. Der Browser baut nach dem Plan.
Schritt für Schritt
Wir ordnen zu, was wohin gehört.
- Titel im Tab: gehört in den head.
- Überschrift auf der Seite: gehört in den body.
- Absatz auf der Seite: gehört in den body.
- Alles, was man sieht, steht im body.
Mit einem Bild erklärt
| Teil | Inhalt im Beispiel | Sichtbar auf der Seite? |
|---|---|---|
| head | Titel „Mein Hobby“ | nur im Tab |
| body | Überschrift und Absatz | ja |
Jetzt zusammen
Wir lösen die Aufgabe gemeinsam. Nutze die Hilfen, wenn du sie brauchst.
Zeig mir den ersten Schritt
Der Körper einer Seite ist der Teil, den man sieht.
Lösung ansehen
Lösung: im body
Jetzt du
Jetzt probierst du es allein.
Zeig mir den ersten Schritt
Suche im Beispiel die Zeile mit title.
Lösung ansehen
Lösung: im head
Tipp: In vielen Browsern kannst du den Quelltext einer Seite ansehen. Du kannst ihn nur lesen. Die Seite im Netz änderst du damit nicht.
Merksatz: HTML beschreibt, was auf einer Seite steht. Im head stehen Angaben über die Seite. Im body steht der sichtbare Inhalt.
Typischer Fehler: Viele denken, der Titel aus dem head stehe auch auf der Seite. Er erscheint im Tab, nicht im sichtbaren Teil.
Mini-Quiz
4 kurze Fragen, ohne Noten. Bei jeder Frage kannst du dir die Lösung ansehen.
Lösung ansehen
Lösung: Stimmt
Lösung ansehen
Lösung: Er liest ihn und stellt die Seite dar.
Frage 3 Wie viele Zeilen stehen im Beispiel zwischen <body> und </body>?
Zeig mir den ersten Schritt
Zähle die Zeilen zwischen den beiden Markierungen.
Lösung ansehen
Lösung: 2
Es sind die Überschrift und der Absatz, also 2 Zeilen.
Lösung ansehen
Lösung: Weil es beschreibt, wie ein Dokument aufgebaut ist
Geschafft
Eine Webseite ist ein Quelltext in HTML. Der Browser liest ihn und stellt die Seite dar. Der head enthält Angaben, der body den sichtbaren Inhalt.
Kannst du das schon?
Hake ab, was du schon kannst. Was noch fehlt, schaust du dir einfach noch einmal an.
Übungsheft Webseiten mit HTML
Kurz erklärt, 44 Aufgaben in drei Stufen und alle Lösungen. Kostenlos.
Das Heft ist für alle kostenlos – auch wenn gerade kein Geld dafür da ist. Wer es einrichten kann, unterstützt DYS+ Campus mit einem selbst gewählten Betrag. Freiwillig unterstützen