5. Unterrichtsblock

Aufgabe 1 – Block oder Inline?

Zeit: ca. 8 Minuten

Erst denken, dann prüfen: Speichere diesen Ausschnitt im body einer neuen Datei block-inline.html.

<h2>Wandertipp</h2>
<span>Start:</span> <strong>Parkplatz</strong> <a href="#">Karte</a>
<p>Gehzeit 3 Stunden</p>
<div>Höhe 1200 m</div>
<span>Schwierigkeit:</span> <em>mittel</em>

1. Sage voraus: In wie vielen Zeilen zeigt der Browser das an? Welche Teile stehen gemeinsam in einer Zeile? Prüfe es.
2. Ändere genau ein Tag so, dass „Gehzeit 3 Stunden“ in derselben Zeile wie „Karte“ erscheint.
3. Erkläre als HTML-Kommentar, woran du ein Block-Element erkennst.

Kontrolle: Erst 5 Zeilen, nach deiner Änderung 4.

Aufgabe 2 – Was wird gesendet?

Zeit: ca. 8 Minuten

Lege eine Datei formular-test.html an und schreibe dieses Formular in den body. Es schickt die Daten an sich selbst, du siehst sie nach dem Absenden in der Adresszeile.

<form action="formular-test.html" method="get">
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" value="Lina">

  <label for="ort">Ort:</label>
  <input type="text" id="ort" value="Bad Aibling">

  <input type="radio" id="k10a" name="klasse" value="10a" checked>
  <label for="k10a">10a</label>
  <input type="radio" id="k10b" name="klasse" value="10b">
  <label for="k10b">10b</label>

  <input type="checkbox" id="news" name="newsletter" value="ja">
  <label for="news">Newsletter</label>

  <input type="submit" value="Absenden">
</form>

1. Sage voraus, was nach dem Klick auf „Absenden“ hinter dem ? in der Adresszeile steht, wenn du nichts änderst. Prüfe es.
2. Ändere den Vornamen in „Lina Marie“, wähle 10b und setze den Haken bei „Newsletter“. Sage wieder voraus und prüfe.
3. Ein Feld wird nie mitgeschickt, egal was drinsteht. Welches und warum? Repariere es.

Kontrolle: Beim ersten Absenden stehen dort genau zwei Angaben.

Aufgabe 3 – Verschachtelung prüfen

Zeit: ca. 8 Minuten

Dieser Ausschnitt enthält drei Verschachtelungsfehler. Der Browser zeigt trotzdem etwas an, baut sich die Seite aber selbst zurecht.

<span>
  <p>Unsere nächste Tour führt auf den Wendelstein.</p>
</span>
<p>
  Treffpunkt:
  <div>Parkplatz Bayrischzell</div>
</p>
<p>Ausrüstung: <strong>feste Schuhe, <em>Regenjacke</strong></em></p>

1. Speichere den Ausschnitt in verschachtelung.html und öffne die Entwicklerwerkzeuge (F12, Reiter „Elemente“). Wie hat der Browser den zweiten Absatz umgebaut?
2. Finde alle drei Fehler und repariere sie. Regeln: Inline-Elemente gehören in Block-Elemente, nicht umgekehrt. Ein p darf keine Block-Elemente enthalten. Was zuletzt geöffnet wurde, wird zuerst geschlossen.
3. Schreibe zu jedem Fehler einen kurzen HTML-Kommentar.

Aufgabe 4 – Ein Kontaktformular für die Projektseite

Zeit: ca. 12 Minuten

Deine Projektseite aus Block 3 und 4 bekommt eine Kontaktseite.

1. Lege kontakt.html mit dem gleichen Grundgerüst, Kopf- und Fußbereich wie deine anderen Seiten an und verlinke sie in der Navigation aller Seiten.
2. Baue ein Formular mit Textfeldern für Vorname, Nachname und Betreff. Jedes Feld bekommt ein label, eine passende id und ein name-Attribut.
3. Ergänze die Frage „Antwort per“ mit zwei Radio-Buttons (E-Mail, Telefon), E-Mail ist vorausgewählt, und eine Checkbox „Ich habe die Datenschutzhinweise gelesen.“
4. Schicke das Formular an kontakt.html und prüfe in der Adresszeile, ob alle Angaben ankommen. Klicke auch auf die Beschriftungen: Springt der Cursor ins richtige Feld?

Tipp: Pack jedes Paar aus Beschriftung und Feld in ein eigenes p, dann steht jedes Feld in einer eigenen Zeile. Mit placeholder kannst du einen grauen Beispieltext ins Feld schreiben.

Aufgabe 5 – Die Umfrage

Zeit: ca. 10 Minuten

Auf einer neuen Seite umfrage.html sollen Besucher abstimmen.

1. Frage „Dein Lieblingsziel“ mit vier Radio-Buttons: Bergsee, Gipfel, Berghütte, Klamm. Gipfel ist vorausgewählt. Es darf immer nur eins gewählt sein.
2. Frage „Was nimmst du mit?“ mit drei Checkboxen: Brotzeit, Kamera, Regenjacke. Alle Checkboxen bekommen denselben name.
3. Sage voraus und prüfe: Was steht in der Adresszeile, wenn du Klamm, Brotzeit und Regenjacke wählst?
4. Gib einem Radio-Button testweise einen anderen name. Was passiert? Mache es danach rückgängig.

Kontrolle: ?ziel=klamm&mitnehmen=brotzeit&mitnehmen=jacke

Aufgabe 6 – Fehlersuche im Formular

Zeit: ca. 8 Minuten

Dieses Anmeldeformular hat fünf Fehler. Manche sieht man sofort, andere erst nach dem Absenden in der Adresszeile.

<form action="anmeldung.html" method="get">
  <label for="name">Name:</label>
  <input type="text" id="vorname" name="name">

  <label for="alter">Alter:</label>
  <input type="text" id="alter">

  <p>Tour:</p>
  <input type="radio" id="leicht" name="tour" value="leicht">
  <label for="leicht">leicht</label>
  <input type="radio" id="schwer" name="strecke" value="schwer">
  <label for="schwer">schwer</label>

  <input type="checkbox" id="foto" name="foto">
  <label for="foto">Fotos dürfen veröffentlicht werden</label>

  <input type="submit">Anmelden</input>
</form>

1. Speichere das Formular in fehlersuche.html. Teste jedes Feld: Klick auf die Beschriftung, Auswahl, Absenden.
2. Finde die fünf Fehler und repariere sie.
3. Schreibe zu jedem Fehler einen kurzen HTML-Kommentar.

Tipp: Ein Fehler steckt in der Checkbox. Was steht nach dem Absenden hinter foto=?

Aufgabe 7 – Anmeldung zur Wandertour

Zeit: ca. 10 Minuten

Der Wanderverein will Anmeldungen über seine Webseite annehmen. Diesmal planst du das Formular selbst. Anforderungen: Vorname und Nachname, Alter, eine von drei Touren (Bergsee, Gipfel, Klamm), freiwillige Extras (Leihstöcke, Lunchpaket) und eine Bestätigung „Ich bin schwindelfrei“.

1. Baue das Formular in anmeldung.html. Jedes Feld hat ein label, eine id und einen sinnvollen name, jede Auswahl einen value.
2. Teste mit dem Namen „Jürgen Groß“. Wie sieht der Name in der Adresszeile aus? Vergleiche mit der Tabelle aus Block 4.
3. Ordne das Formular so, dass jede Frage in einer eigenen Zeile beginnt. Welche Elemente brauchst du dafür, und welche nicht mehr?

Kontrolle: Jürgen erscheint als J%C3%BCrgen, Groß als Gro%C3%9F.

Bonusaufgabe 1 – Fachbegriffe im Fließtext

Inline-Elemente sind nicht nur span und a. Schreibe auf deiner Projektseite einen kurzen Absatz über das Wetter am Berg, in dem diese Inline-Elemente vorkommen:

1. Eine Hochzahl wie in m³ mit sup (m<sup>3</sup>) und eine chemische Formel wie H₂O mit sub (H<sub>2</sub>O).
2. Eine Abkürzung mit Erklärung beim Darüberfahren: <abbr title="Deutscher Wetterdienst">DWD</abbr>.
3. Ein wichtiges Wort mit strong und eine Betonung mit em.
4. Prüfe: Bleibt alles in einer Zeile? Begründe als Kommentar.

Bonusaufgabe 2 – Ein echtes Suchformular

Formulare können ihre Daten an fremde Seiten schicken. Die deutsche Wikipedia nimmt Suchbegriffe unter dem Namen search entgegen.

1. Baue ein Formular mit action="https://de.wikipedia.org/w/index.php", method="get", einem Textfeld mit name="search" und einem Absenden-Knopf „Auf Wikipedia suchen“.
2. Suche nach „Zugspitze“. Was steht in der Adresszeile?
3. Ändere den name des Textfelds in suche. Funktioniert die Suche noch? Erkläre als Kommentar.