Quelltext lesen und erklären
Man kann einen Quelltext lesen und sagen, wie die Seite aussieht und was jedes Element bedeutet.
Das lernst du heute
- Ich kann beschreiben, wie eine Seite aus ihrem Quelltext aussieht.
- Ich kann die Bedeutung der Elemente erklären.
- Ich kann einen eigenen kleinen Quelltext planen und schreiben.
Das brauchst du schon: Vielleicht hilft dir zuerst eine dieser Lektionen: Fehler im Quelltext finden, Links und Bilder einbinden
Wer Quelltext lesen kann, sieht die Seite vor sich. Gehe von oben nach unten vor. Frage bei jedem Element: Was ist das? Wie sieht es aus? Welche Bedeutung hat es? Beschreibe dann die Seite in Worten.
Beim Schreiben gehst du umgekehrt vor. Skizziere zuerst die Seite. Schreibe auf, welche Teile du brauchst: Überschrift, Absatz, Liste, Bild, Link. Wähle für jeden Teil das passende Element. Schreibe dann den Quelltext und prüfe ihn Zeile für Zeile. Denke an alt-Texte und eine sinnvolle Gliederung. So ist deine Seite auch für Menschen mit Screenreader gut nutzbar.
| Zeile | Quelltext |
|---|---|
| 1 | <h1>Unser Garten</h1> |
| 2 | <p>Im Garten wachsen:</p> |
| 3 | <ul> |
| 4 | <li>Tomaten</li> |
| 5 | <li><a href="salat.html">Salat</a></li> |
| 6 | </ul> |
| 7 | <h2>Bilder</h2> |
| 8 | <img src="bilder/beet.jpg" alt="Ein Beet mit jungen Pflanzen"> |
Die Seite beschreiben
- Zeile 1: h1, die Hauptüberschrift „Unser Garten“.
- Zeile 2: ein Absatz, der die Liste einleitet.
- Zeilen 3 bis 6: eine Aufzählung mit zwei Punkten. Der zweite Punkt ist ein Link zu salat.html.
- Zeilen 7 und 8: eine Zwischenüberschrift und ein Bild mit alt-Text.
Ich verstehe das noch nicht
Such dir aus, was dir hilft.
Noch einfacher erklärt
Lesen: von oben nach unten.
Schreiben: erst planen.
Dann prüfen.
Ein Beispiel
Beim Lesen eines Bauplans stellst du dir das Haus vor. Beim Quelltext stellst du dir die Seite vor.
Schritt für Schritt
Wir planen eine Seite „Mein Verein“ mit Überschrift, Absatz und Liste.
- Überschrift: h1 „Mein Verein“.
- Absatz: p mit einem Satz.
- Liste ohne Reihenfolge: ul mit zwei li.
- Zum Schluss alle End-Tags prüfen.
Mit einem Bild erklärt
| Teil der Seite | Element |
|---|---|
| Haupttitel | h1 |
| Abschnitt | h2 |
| Fließtext | p |
| Aufzählung | ul mit li |
| Bild | img mit alt |
| Verweis | a mit href |
Zur Grundlage zurück
- Fehler im Quelltext finden – Du kannst Fehler im Quelltext finden.
- Links und Bilder einbinden – Du kennst Links und Bilder.
Jetzt zusammen
Wir lösen die Aufgabe gemeinsam. Nutze die Hilfen, wenn du sie brauchst.
Wie viele Elemente hat der Quelltext der Seite „Unser Garten“ insgesamt?
Zeig mir den ersten Schritt
Zähle h1, p, ul, li, li, a, h2 und img.
Lösung ansehen
Lösung: 8
Es sind 8 Elemente.
Jetzt du
Jetzt probierst du es allein.
Zeig mir den ersten Schritt
Lies die Zeile mit dem Link.
Lösung ansehen
Lösung: Er ist ein Link zu salat.html mit dem Text „Salat“.
Tipp: Lies erst nur die Tags und dann den Inhalt. So erkennst du den Aufbau, bevor du auf Einzelheiten achtest.
Merksatz: Lesen: von oben nach unten, Element für Element. Schreiben: erst planen, dann Elemente wählen, dann prüfen.
Typischer Fehler: Viele schreiben sofort drauflos. Ein kurzer Plan spart Fehler.
Mini-Quiz
4 kurze Fragen, ohne Noten. Bei jeder Frage kannst du dir die Lösung ansehen.
Lösung ansehen
Lösung: den alt-Text „Ein Beet mit jungen Pflanzen“
Frage 2 Wie viele Listenpunkte hat die Aufzählung im Beispiel?
Zeig mir den ersten Schritt
Zähle die Zeilen mit li.
Lösung ansehen
Lösung: 2
Es sind Tomaten und Salat, also 2.
Lösung ansehen
Lösung: Stimmt nicht
Lösung ansehen
Lösung: Die Seite planen und die Teile festlegen
Geschafft
Man liest Quelltext von oben nach unten und beschreibt Aussehen und Bedeutung. Beim Schreiben plant man zuerst und prüft danach.
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