Rückblick
Fünf Lektionen lang ging es um dieselbe Frage: Was ist dieser Inhalt? Nicht, wie er aussieht – das kommt in Kapitel 4. Hier prüfst du, ob du die Frage inzwischen sicher beantwortest.
Das kann ich jetzt
- Ich kann das Grundgerüst einer HTML-Datei aus dem Kopf aufschreiben. (2.1)
- Ich kann erklären, was in den
headgehört und was in denbody. (2.1) - Ich benutze Überschriftenstufen der Reihe nach und weiß, warum das nicht egal ist. (2.2)
- Ich zeichne Betonungen mit
<strong>und<em>aus statt mit Formatierungen. (2.2) - Ich kann Listen aufbauen und zwischen
<ul>und<ol>begründet wählen. (2.3) - Ich kann eine Tabelle mit
<caption>, Kopfzellen und Datenzellen schreiben. (2.3) - Ich kann Links setzen und den Unterschied zwischen relativer und absoluter Adresse erklären. (2.4)
- Ich schreibe zu jedem Bild einen Alternativtext, der das Bild ersetzt statt es anzukündigen. (2.4)
- Ich gliedere eine Seite mit
header,nav,main,footerund greife nur dann zu<div>, wenn es kein passendes Element gibt. (2.5)
Gemischte Aufgaben
Aufgabe 1: Welches Element?
Nenne für jeden Inhalt das passende Element und begründe kurz.
a) Die Zutatenliste eines Rezepts – die Reihenfolge ist egal.
b) Die Arbeitsschritte desselben Rezepts.
c) Der Hinweis „Achtung: Der Ofen wird sehr heiß."
d) Die Öffnungszeiten der Mensa, nach Wochentagen aufgeschlüsselt.
e) Die Links „Startseite – Rezepte – Kontakt" ganz oben auf jeder Seite.
f) Der Urheberrechtshinweis ganz unten auf jeder Seite.
g) Ein einzelnes Wort mitten im Satz, das rot werden soll – es hat keine besondere Bedeutung.
Aufgabe 2: Sechs Fehler
In diesem Quelltext stecken sechs Schwächen. Arbeite auf Papier: Schreibe jede auf, sage, warum sie ein Problem ist, und schreibe die verbesserte Zeile daneben.
<h1>Schulgarten-AG</h1>
<h3>Was wir machen</h3>
<p>Wir pflegen die Beete hinter der Turnhalle.
<p>Neue Mitglieder sind willkommen.</p>
<ul>
<li>Beete anlegen</li>
<li>Kräuter ernten
<li>Insektenhotel bauen</li>
</ul>
<img src="beet.jpg">
<table>
<tr>
<td>Wochentag</td>
<td>Uhrzeit</td>
</tr>
<tr>
<td>Dienstag</td>
<td>14:00 Uhr</td>
</tr>
</table>
<p>Bitte <strong>pünktlich<em> sein</strong>.</em></p>Zwei der sechs merkt der Browser gar nicht – er zeigt die Seite an, als sei alles in Ordnung. Welche sind das, und warum sind sie trotzdem Fehler?
Tipp 1: Wonach suche ich?
Geh die fünf Lektionen der Reihe nach durch und frag dich jedes Mal: Kommt das hier vor?
Grundgerüst → Überschriften → Listen → Tabellen → Bilder.
Tipp 2: Die zwei unsichtbaren
Ein Fehler betrifft eine Reihenfolge, die niemand sieht, aber jedes Vorleseprogramm hört.
Der andere betrifft eine Tabelle, in der alle Zellen gleich behandelt werden, obwohl eine Reihe davon etwas anderes ist als die übrigen.
Aufgabe 3: Eine Seite von Grund auf
Die Schulgarten-AG braucht eine Seite. Schreibe sie im Übungsbereich vollständig neu – vom <!DOCTYPE html> bis zum letzten Endtag.
Verlangt ist:
a) ein vollständiges Grundgerüst mit Sprachangabe, Zeichencodierung und Seitentitel
b) ein header mit dem Namen der AG als <h1> und einer Navigation aus drei Links
c) ein main mit zwei Abschnitten: „Was wir machen" mit zwei Absätzen und „Termine" mit einer Tabelle aus Wochentag und Uhrzeit
d) ein Bild mit ordentlichem Alternativtext – benutze /images/willkommen-banner.jpg
e) ein footer mit einem Hinweis, wem die Seite gehört
Kein CSS. Es geht allein darum, dass der Inhalt richtig ausgezeichnet ist.
Tipp 1: Womit anfangen?
Schreib zuerst nur das Gerüst und die vier Bereiche, jeweils leer:
<body>
<header></header>
<main></main>
<footer></footer>
</body>Erst wenn das steht, füllst du von oben nach unten. So verlierst du nie den Überblick, welches Endtag noch fehlt.
Tipp 2: Die Navigation
Eine Navigation ist inhaltlich eine Liste von Links. Also <nav>, darin <ul>, darin je ein <li> mit einem <a>.
Weil es die Zielseiten noch nicht gibt, darfst du href="#" schreiben.
Tipp 3: Die Tabelle
<table>
<caption>Unsere Termine</caption>
<thead>
<tr><th>Wochentag</th><th>Uhrzeit</th></tr>
</thead>
<tbody>
<tr><td>Dienstag</td><td>14:00 Uhr</td></tr>
</tbody>
</table>