MINT lernen

HTML: das Grundgerüst

Zwei Textaufgaben mit Hinweisen und Erwartungshorizont — eine Seite lesen und eine fehlerhafte Seite reparieren.

Dein Fortschritt:
0 / 0 Aufgaben
1

Die Seite der Schach-AG

AFB I–II

Lina hat für die Schach-AG diese Seite geschrieben:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Schach-AG</title>
  </head>
  <body>
    <h1>Schach-AG am Gymnasium</h1>
    <p>Treffen: <b>Dienstag</b>, 14 Uhr</p>
    <ul>
      <li>Anfänger</li>
      <li>Fortgeschrittene</li>
    </ul>
    <a href="anmeldung.html">Zur Anmeldung</a>
  </body>
</html>
  1. Gib an, welcher Text im Browser-Tab und welcher als große Überschrift erscheint.
  2. Beschreibe, wie die Seite im Browser aussieht (Reihenfolge, Hervorhebungen, klickbare Teile).
  3. Stelle den Aufbau des body als Baum dar (Elternelement oben, Kindelemente darunter).

Hinweise

Hinweis zu Aufgabe a)
Tab-Text steht im head, Überschrift im body.
Hinweis zu Aufgabe b)
Gehe den body von oben nach unten durch; b macht fett, a ist klickbar.
Hinweis zu Aufgabe c)
Jedes Element, das ein anderes umschließt, ist sein Elternelement.

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

Tab: „Schach-AG“ (aus title). Überschrift: „Schach-AG am Gymnasium“ (aus h1).

Erwartungshorizont zu Aufgabe b)

Oben die große Überschrift, darunter der Absatz „Treffen: Dienstag, 14 Uhr“ mit fett gedrucktem „Dienstag“, dann eine Aufzählung mit den Punkten „Anfänger“ und „Fortgeschrittene“, zuletzt der klickbare Link „Zur Anmeldung“, der zur Datei anmeldung.html führt.

Erwartungshorizont zu Aufgabe c)

body hat vier Kinder: h1, p, ul, a. p hat das Kind b, ul hat zwei Kinder li.

2

Tims Seite zeigt Unsinn

AFB II–III

Tim wundert sich: Auf seiner Seite ist fast alles fett, und im Tab steht nur „index.html“.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <title>Tims Fahrradseite</title>
    <h1>Mein Rad</h1>
    <p>Gewicht: <b>11 kg</p>
    <p>Farbe: rot</p>
  </body>
</html>
  1. Überprüfe den Code und nenne die beiden Fehler, die Tims Beobachtungen erklären.
  2. Erkläre, warum der Browser trotz der Fehler eine Seite anzeigt und keine Fehlermeldung ausgibt.
  3. Entwickle eine korrigierte Fassung und erweitere sie um eine Liste mit zwei Ausstattungsmerkmalen und einen Link auf touren.html.

Hinweise

Hinweis zu Aufgabe a)
Welches Element erzeugt den Tab-Text, und wo muss es stehen? Wo endet das fette b?
Hinweis zu Aufgabe b)
Browser sind absichtlich „fehlertolerant“.
Hinweis zu Aufgabe c)
Liste: ul mit li; Link: a mit href.

Erwartungshorizont

Erwartungshorizont zu Aufgabe a)

1) title steht im body statt im head — deshalb zeigt der Tab den Dateinamen. 2) <b> wird nie geschlossen (</b> fehlt vor </p>) — deshalb ist alles danach fett.

Erwartungshorizont zu Aufgabe b)

HTML-Browser versuchen, aus fehlerhaftem Code trotzdem etwas Sinnvolles zu machen: Sie ergänzen fehlende End-Tags an der Stelle, die sie für wahrscheinlich halten. Fehler zeigen sich deshalb nur an der falschen Darstellung, nicht als Meldung.

Erwartungshorizont zu Aufgabe c)

head enthält meta und <title>Tims Fahrradseite</title>; im body: h1, <p>Gewicht: <b>11 kg</b></p>, <p>Farbe: rot</p>, <ul><li>21 Gänge</li><li>Nabendynamo</li></ul> und <a href="touren.html">Meine Touren</a>. Andere sinnvolle Merkmale sind richtig.