HTML: das Grundgerüst: Übungen – Informatik Klasse 9

A1

Richtig geschrieben?

AFB I

Nenne alle Zeilen, die korrekt geschriebenes HTML sind.

Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.

Ein Element beginnt mit dem Start-Tag und endet mit dem gleichnamigen End-Tag mit Schrägstrich: <p>…</p>. <h1>…</h2> passt nicht zusammen.

Ansatz: Vergleiche den Namen im Start-Tag mit dem im End-Tag.

Weiter: Der Schrägstrich steht im End-Tag direkt nach <.

A2

Stimmt's? — Kopf und Körper

AFB I

Fünf Behauptungen über das Grundgerüst. Gib jeweils an, ob sie stimmen.

5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.

Aussage 1 von 5

Kopf (head) = Angaben über die Seite, Körper (body) = sichtbarer Inhalt.

Ansatz: Was davon siehst du im Browserfenster selbst?

Weiter: Leere Elemente wie img und br haben keinen Inhalt.

A3

Tag und Bedeutung

AFB I

Ordne jedem Tag seine Bedeutung zu.

Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.

ul = unordered list, li = list item, a = anchor, p = paragraph, h2 = heading 2, img = image.

Ansatz: Viele Tags sind englische Abkürzungen.

Weiter: li steht immer innerhalb einer Liste.

A4

Das Gerüst in Worten

AFB II

Ergänze den Text über das Grundgerüst — zwei Wörter bleiben übrig.

Wort anklicken, dann Lücke anklicken (oder umgekehrt) — mit Tab und Enter geht es genauso. Ein Klick auf eine gefüllte Lücke legt das Wort zurück.

Nach <!DOCTYPE html> kommt das äußerste Element . Darin steht zuerst mit für den Zeichensatz und für den Browser-Tab, danach mit allem Sichtbaren.

header und main gibt es auch — sie gliedern aber den sichtbaren Inhalt innerhalb des body.

Ansatz: Der Kopf heißt auf Englisch head, der Körper body.

Weiter: Der Zeichensatz steht in <meta charset="UTF-8">.

A5

Fehlersuche: Obstliste

AFB II

Analysiere Emils Quelltext — drei Zeilen sind falsch.

Klicke genau die fehlerhaften Zeilen an — die richtigen musst du stehen lassen.

<img> ist richtig — als leeres Element braucht es kein End-Tag.

Ansatz: Prüfe bei jeder Zeile: passt das End-Tag zum Start-Tag?

Weiter: Was zuletzt geöffnet wurde, wird zuerst geschlossen.

A6

Grundgerüst ordnen

AFB II

Stelle das Grundgerüst einer Seite in der richtigen Reihenfolge dar.

Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.

1<!DOCTYPE html>

2<html lang="de">

3<head>

4<title>Rezepte</title>

5</head>

6<body>

7<h1>Rezepte</h1>

8</body>

9</html>

Außen html, darin nacheinander head und body. Jedes Element wird geschlossen, bevor das nächste auf gleicher Ebene beginnt.

Ansatz: Die DOCTYPE-Zeile steht immer ganz oben.

Weiter: Erst wird der Kopf komplett geschlossen, dann beginnt der Körper.

A7

Kopf oder Körper?

AFB II

Ordne jede Zeile dem Bereich zu, in den sie gehört.

Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).

1head

2body

meta und link sind Angaben über die Seite (Zeichensatz, Anzeige auf dem Handy, CSS-Datei). Alles, was man sieht oder anklickt, steht im body.

Ansatz: Frage dich: Sieht man es auf der Seite?

Weiter: link bindet eine Datei ein — man sieht es nicht direkt.

A8

Wie tief verschachtelt?

AFB III

Gegeben ist:

<html>
  <body>
    <ul>
      <li><a href="a.html">Neu: <b>Kurse</b></a></li>
    </ul>
  </body>
</html>

Das html-Element liegt auf Ebene 1, der body auf Ebene 2. Ermittle die Ebene des Elements b.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.

html (1) → body (2) → ul (3) → li (4) → a (5) → b (6). Jedes Element liegt eine Ebene tiefer als sein Elternelement.

Ansatz: Gehe von außen nach innen und zähle mit.

Weiter: Auch a ist ein Elternelement — es umschließt b.

A9

Kontaktseite reparieren

AFB III

Mias Seite soll einen Link zur Kontaktseite und einen Hinweis in kursiver Schrift zeigen. Überprüfe den Code und korrigiere die fehlerhaften Zeilen.

Klicke die fehlerhaften Zeilen an — dann klappt ein Feld auf, in das du die richtige Zeile schreibst. Geprüft werden Auswahl und Korrekturen (Leerzeichen sind egal).

Zeile 2: Das Anführungszeichen hinter dem Dateinamen fehlt — der Browser liest sonst den Rest der Zeile als Dateinamen. Zeile 3: kreuzweise geschlossen.

Ansatz: Achte auf Paare: Anführungszeichen und Tags.

Weiter: Das zuletzt geöffnete Tag wird zuerst geschlossen.

A10

Hallo Welt

AFB III Trick

Im Quelltext steht:

<p>Hallo       Welt
und    viel Platz</p>

Beurteile die Aussagen über die Darstellung im Browser.

Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.

HTML fasst jede Folge von Leerzeichen und Zeilenumbrüchen zu einem Leerzeichen zusammen. Zeilen und Abstände gestaltet man mit Elementen (p, br) und CSS.

Ansatz: Der Browser liest Leerraum anders als ein Textprogramm.

Weiter: Denke an die Regel für Einrückungen — sie gilt für jeden Leerraum.

HTML: das Grundgerüst

Übungsaufgaben