Rückblick

Dieses Kapitel hat die Blickrichtung umgedreht: Statt selbst zu schreiben, hast du fremde Quelltexte gelesen und beurteilt. Das ist die Fähigkeit, die am längsten hält – Elemente kann man nachschlagen, ein geschultes Auge nicht.

Das kann ich jetzt

Ich kann zu einem Quelltext den Baum zeichnen, den der Browser daraus baut. (3.1)
Ich kann die Begriffe Elternelement, Kind und Nachfahre an einem Baum zeigen. (3.1)
Ich kann erklären, warum sich Elemente sauber schachteln müssen. (3.1)
Ich kann vorhersagen, was der Browser aus fehlerhaftem HTML macht. (3.2)
Ich kann begründen, warum ein mehrdeutiger Quelltext auch dann fehlerhaft ist, wenn die Seite gut aussieht. (3.2)
Ich weiß, was ein Validator findet – und was er grundsätzlich nicht finden kann. (3.2)
Ich kann zwei Auszeichnungen desselben Inhalts vergleichen und begründet sagen, welche besser ist. (3.2)

Gemischte Aufgaben

Aufgabe 1: Vom Text zum Baum und zurück

<article>
  <h2>Regenwurm</h2>
  <p>Er lockert den <strong>Boden</strong> und frisst <em>totes Laub</em>.</p>
  <ul>
    <li>bis zu 30 cm lang</li>
    <li>lebt im Dunkeln</li>
  </ul>
</article>

a) Zeichne den Baum auf Papier. Textknoten darfst du weglassen.

b) Wie viele Kinder hat das article?

c) Nenne alle Nachfahren des p.

d) Du klickst im Browser auf das Wort Boden. In welchen Elementen hast du damit zugleich geklickt?

e) Am article gilt die Regel color: green. Welche Texte werden grün?

Tipp zu b) und c)

Kinder sind nur die Elemente eine Ebene tiefer. Nachfahren sind alle, die irgendwo darunter hängen – Kinder, deren Kinder und so weiter.

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Aufgabe 2: Was macht der Browser daraus?

<div>
  <p>Erster Absatz
  <ul>
    <li>Punkt eins</li>
    <li>Punkt zwei
  </ul>
</div>

a) Nenne die beiden Stellen, an denen ein Endtag fehlt.

b) Sag vorher voraus, wie der Baum aussieht, den der Browser baut.

c) Prüfe deine Vorhersage: Öffne die Entwicklerwerkzeuge, Reiter Elemente.

d) Diese Seite sieht am Ende richtig aus. Nenne trotzdem zwei Gründe, warum der Quelltext ein Problem ist.

<div> <p>Erster Absatz <ul> <li>Punkt eins</li> <li>Punkt zwei </ul> </div>

* { outline: 1px solid hsl(210 50% 70%); }

Tipp zu b)

Ein <p> darf keine Liste enthalten. Was bleibt dem Browser also übrig, wenn nach dem offenen Absatz ein <ul> kommt?

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Aufgabe 3: Was der Validator sagt – und was nicht

Eine Mitschülerin hat ihre Seite durch den Validator des W3C geschickt. Sie meldet: „Null Fehler, also ist meine Seite gut."

<div class="titel">Unsere Klassenfahrt</div>
<div>Wir fahren im <div class="fett">Mai</div> nach Hamburg.</div>
<div><img src="hafen.jpg" alt="Der Hamburger Hafen bei Sonnenuntergang"></div>
<div class="klein">Fotos: Amira</div>

a) Hat der Validator recht? Prüfe: Steckt in diesem Quelltext ein Verstoß gegen die HTML-Regeln?

b) Nenne trotzdem drei Schwächen dieser Seite.

c) Schreibe den Quelltext so um, dass er dieselbe Seite ergibt, aber die Bedeutung mitträgt.

d) Erkläre in einem Satz, warum ein Prüfprogramm die Schwächen aus b) grundsätzlich nicht finden kann.

Tipp zu b)

Stell dir die Seite ohne Bildschirm vor: Ein Vorleseprogramm liest sie vor. Woran erkennt es, was hier die Überschrift ist? Und was ist ein <div class="fett"> mitten in einem Satz für ein Ding?

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Selbsttest

1. Warum ergibt der Quelltext div span Text /div /span keinen Baum?

{r1{Weil div und span verschiedene Elemente sind.}}

{r1{!Weil sich die beiden Elemente überlappen – ein Baum kennt nur ganz drin oder ganz draußen.}}

{r1{Weil span kein Text enthalten darf.}}

{r1{Weil die Reihenfolge der Starttags falsch ist.}}

{h{Zeichne es auf: Steckt das span im div oder umgekehrt?}} {H{Richtig. Beide Deutungen sind ablesbar – und damit ist der Quelltext mehrdeutig.}}

2. Was ist ein Nachfahre eines Elements?

{r2{nur die Elemente direkt darunter}}

{r2{!jedes Element, das irgendwo darunter hängt}}

{r2{das umschließende Element}}

{r2{das nächste Element auf derselben Ebene}}

{h{Kinder sind eine Ebene tiefer – Nachfahren sind mehr.}} {H{Richtig. Kinder sind die direkten Nachfahren.}}

3. Der Browser findet fehlerhaftes HTML. Was tut er?

{r3{Er zeigt eine Fehlermeldung.}}

{r3{Er zeigt die Seite gar nicht an.}}

{r3{!Er repariert still und zeigt die Seite trotzdem an.}}

{r3{Er fragt beim Server nach einer korrigierten Fassung.}}

{h{Hast du beim Ausprobieren je eine HTML-Fehlermeldung gesehen?}} {H{Richtig – und genau deshalb fallen solche Fehler so lange nicht auf.}}

4. Welche Fehler findet der Validator des W3C? Wähle alle zutreffenden aus.

{c1{!ein fehlendes Endtag}}

{c1{!ein img ohne alt}}

{c1{!zwei Elemente mit derselben id}}

{c1{eine Seite, die nur aus div besteht}}

{c1{einen Text, der inhaltlich falsch ist}}

{h{Er kennt die Regeln der Sprache – aber nicht deine Absicht.}} {H{Richtig. Eine Seite aus lauter div ist gültiges HTML und trotzdem schlecht ausgezeichnet.}}

5. Eine Seite sieht richtig aus, der Quelltext ist aber mehrdeutig. Ist das ein Fehler?

{r4{Nein, entscheidend ist das Ergebnis.}}

{r4{!Ja, denn die Beschreibung lässt mehrere Bäume zu – dass einer davon gut aussieht, ist Zufall.}}

{r4{Nur wenn ein Vorleseprogramm benutzt wird.}}

{r4{Nur bei Tabellen.}}

{h{Dieselbe Forderung kennst du von Handlungsvorschriften: Sie müssen eindeutig sein.}} {H{Richtig.}}

6. In einem Absatz beginnt eine Liste, ohne dass der Absatz geschlossen wurde. Wo hängt die Liste im Baum?

{r5{im Absatz}}

{r5{!neben dem Absatz, als dessen Schwester}}

{r5{direkt unter dem html-Element}}

{r5{im ersten Listeneintrag}}

{h{Ein Absatz darf keine Liste enthalten – der Browser muss ihn also vorher schließen.}} {H{Richtig. Die Einrückung im Quelltext täuscht dann.}}

7. Eine Klasse heißt fett. Was spricht dagegen?

{r6{Klassennamen dürfen keine Adjektive sein.}}

{r6{!Der Name beschreibt das Aussehen; ändert sich die Gestaltung, passt er nicht mehr.}}

{r6{Der Browser versteht den Namen nicht.}}

{r6{Der Validator meldet das als Fehler.}}

{h{Was passiert mit dem Namen, wenn der Text später kursiv statt fett sein soll?}} {H{Richtig. Klassen benennt man nach der Bedeutung, nicht nach der Wirkung.}}