Übungsaufgaben zu den HTML-Grundlagen: Abfahrtsanzeige, Haltepunkte und Formulare

Übungsaufgaben zu den HTML-Grundlagen: Abfahrtsanzeige, Haltepunkte und Formulare

https://bildung.social/@oerinformatik/

https://oer-informatik.de/html-grundlagen-uebungsaufgaben

HTML, semantisches HTML, HTML-Element, Attribut, Tabelle, Formular, Barrierefreiheit, Validierung, Übungsaufgaben, Prüfungsvorbereitung

tl/dr; (ca. 53 min Lese- und Bearbeitungszeit): Übungen zu den HTML-Grundlagen rund um den Flurmonitor des Mitfahrlabors: Du benennst die Bestandteile von Elementen, findest Fehler im Grundgerüst, zeichnest ein Fahrtangebot semantisch aus, erstellst eine Tabelle der Haltepunkte und ein Formular zum Anbieten von Fahrten, prüfst eine Seite auf Barrierefreiheit und deutest Meldungen des Validators [AI-Assisted]. (Zuletzt geändert am 10.11.2026)

Disclaimer: Teile des Textes stammen von einer KI. Inhalte sind nicht automatisch zuverlässig; überprüfe Fakten und zitiere vertrauenswürdige Quellen.

Dieser Artikel ist Teil einer Artikelreihe über die Grundlagen der Webentwicklung: HTML / Übungsaufgaben zu HTML / CSS / Bootstrap

Diese Übungsaufgaben gehören zum Artikel HTML-Grundlagen: Webseiten Struktur und Bedeutung geben. Alle Aufgaben drehen sich um die Webseiten der Mitfahr-App „Mitfahrlabor“ und den Flurmonitor im DBH-Berufskolleg.

Hinweise zur Bearbeitung: Bis zur Teil-1-Prüfung der IT-Berufe solltest Du die Basiskompetenz beherrschen, also Aufgabe 1.1 und Aufgabe 1.2. Als FIA, FIDP oder FIDV musst Du zur Teil-2-Prüfung Aufgaben auf Kernkompetenz-Ebene lösen können, das sind Aufgabe 2.1, Aufgabe 2.2 und Aufgabe 2.3. Von FIA wird zusätzlich erwartet, dass ihnen Aufgaben auf Profilkompetenz-Ebene (Aufgabe 3.1 und Aufgabe 3.2) keine Probleme bereiten. Notiere Deine Antworten zuerst vollständig, bevor Du die Beispiellösung aufklappst. Den HTML-Code kannst Du im Browser und mit dem W3C-Validator ausprobieren; andere fachlich richtige Lösungen sind ebenso richtig.

Du möchtest eigene Aufgaben zum Üben von einem KI-Sprachmodell generieren lassen? Prompt ein-/ausblenden

Erstelle neue Übungsaufgaben zum Thema „HTML-Grundlagen:
Abfahrtsanzeige, Haltepunkte und Formulare“.

Bauplan: Halte Dich an Aufbau, Kompetenzstufen, Operatoren,
Anforderungsbereiche, Punkte und Zeitschätzung, die im Artikel
https://oer-informatik.de/aufgaben-aufbau beschrieben sind.

Fachliche Grundlage:
- https://oer-informatik.de/html-grundlagen
- https://oer-informatik.de/szenario-mitfahrlabor
- Stilbeispiel: https://oer-informatik.de/html-grundlagen-uebungsaufgaben

Die Aufgaben sollen Inhalte zu diesen Schlagwörtern abdecken:
- HTML
- semantisches HTML
- HTML-Element
- Attribut
- Tabelle
- Formular
- Barrierefreiheit
- Validierung

Kompetenzstufe: Kernkompetenz (alternativ: Basiskompetenz, Profilkompetenz, Expertise)
Anzahl: 1 Aufgabe mit Teilaufgaben
Bearbeitungszeit in Minuten ca.: <5 bis 30 min>
Szenario: eines der Szenarien aus dem Bauplan

Vorgehen:
1. Lies zuerst die verlinkten Artikel. Kannst Du keine Webseiten
   abrufen, sag mir das, statt zu raten.
2. Steht bei einer Angabe noch ein Platzhalter in <…>, frag mich
   zuerst danach. Richte Punkte und Zahl der Teilaufgaben nach der
   Bearbeitungszeit (ca. 0,9 min je Punkt).
3. Gib je Aufgabe Titel mit Kompetenzstufe, Ausgangssituation und
   Teilaufgaben mit Operator und Punktzahl aus, dazu die geschätzte
   Bearbeitungszeit.
4. Gib die Beispiellösungen mit Punkteverteilung erst aus, wenn ich
   danach frage.

Aufgabe 1.1: Bestandteile eines Elements benennen (Basiskompetenz)

Im Formular, mit dem Fahrer*innen eine Fahrt anbieten, steht dieser Ausschnitt:

<label for="plaetze">Freie Plätze</label>
<input type="number" id="plaetze" name="plaetze" min="1" max="8">

Ergänze die Tabelle. (6 Punkte)

Aufgabe 1.2: Fehler im Grundgerüst finden (Basiskompetenz)

Ein Mitschüler hat eine erste Fassung der Abfahrtsanzeige geschrieben. Der Browser zeigt sie an, sie enthält aber mehrere Fehler und Mängel.

<html>
<head>
  <title>Mitfahrlabor</title>
  <h1>Abfahrten</h1>
</head>
<body>
  <p>Nächste Fahrt: <em><strong>07:10 Uhr</em></strong>
  <p>Treffpunkt: Kirchplatz in Werther</p>
  <img src="bilder/logo.svg">
</body>

Nenne sechs Fehler oder Mängel und gib jeweils an, wie sie behoben werden. (6 Punkte)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Mitfahrlabor</title>
</head>
<body>
  <h1>Abfahrten</h1>
  <p>Nächste Fahrt: <em><strong>07:10 Uhr</strong></em></p>
  <p>Treffpunkt: Kirchplatz in Werther</p>
  <img src="bilder/logo.svg" alt="Logo des Mitfahrlabors">
</body>
</html>

Aufgabe 2.1: Ein Fahrtangebot semantisch auszeichnen (Kernkompetenz)

Für eine Detailansicht eines Fahrtangebots liegt dieser Text vor:

Fahrt nach Hause am Dienstag, 17. November 2026

Abfahrt 15:45 Uhr am DBH-Berufskolleg, Parkplatz Nord. Ziel: Bad Salzuflen, Busbahnhof. Noch 2 freie Plätze.

Unterwegs ist auf Wunsch ein Halt möglich an: Ortsmitte Lockhausen, Kurpark Bad Salzuflen

Bitte sei pünktlich: Die Fahrt wartet höchstens 5 Minuten.

Zeichne den Text als HTML-Ausschnitt aus, der in den main-Bereich einer Seite eingefügt werden kann. Das Angebot soll als eigenständiger Inhalt erkennbar sein, eine Überschrift der zweiten Stufe haben, Datum und Uhrzeit maschinenlesbar enthalten, die möglichen Halte als Liste zeigen und den letzten Satz als besonders wichtig auszeichnen. (8 Punkte)

<article>
  <h2>Fahrt nach Hause am <time datetime="2026-11-17">Dienstag, 17. November 2026</time></h2>
  <p>Abfahrt <time datetime="2026-11-17T15:45">15:45 Uhr</time> am DBH-Berufskolleg, Parkplatz Nord.
     Ziel: Bad Salzuflen, Busbahnhof. Noch 2 freie Plätze.</p>
  <p>Unterwegs ist auf Wunsch ein Halt möglich an:</p>
  <ul>
    <li>Ortsmitte Lockhausen</li>
    <li>Kurpark Bad Salzuflen</li>
  </ul>
  <p><strong>Bitte sei pünktlich: Die Fahrt wartet höchstens 5 Minuten.</strong></p>
</article>

Aufgabe 2.2: Die Haltepunkte als Tabelle (Kernkompetenz)

Auf einer Infoseite sollen alle Haltepunkte des Mitfahrlabors mit ihrer Entfernung zur Schule erscheinen:

1. Notiere die HTML-Tabelle so, dass sie auch mit einem Screenreader gut verständlich ist. (6 Punkte)

2. Ein Teammitglied schlägt vor, die Zellen der Spalte „Ort“ als <th scope="row"> statt als <td> auszuzeichnen. Beurteile den Vorschlag. (2 Punkte)

<table>
  <caption>Haltepunkte des Mitfahrlabors</caption>
  <thead>
    <tr>
      <th scope="col">Ort</th>
      <th scope="col">Treffpunkt</th>
      <th scope="col">Entfernung zur Schule (km)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Gütersloh</th><td>Hauptbahnhof, ZOB Steig 3</td><td>18,6</td></tr>
    <tr><th scope="row">Herford</th><td>Park &amp; Ride am Bahnhof</td><td>17,9</td></tr>
    <tr><th scope="row">Halle (Westf.)</th><td>Marktplatz</td><td>15,2</td></tr>
    <tr><th scope="row">Bad Salzuflen</th><td>Busbahnhof</td><td>19,4</td></tr>
    <tr><th scope="row">Werther (Westf.)</th><td>Kirchplatz</td><td>13,1</td></tr>
  </tbody>
</table>

Aufgabe 2.3: Ein Formular zum Anbieten von Fahrten (Kernkompetenz)

Fahrer*innen sollen im Browser eine neue Fahrt anbieten können. Das Formular schickt die Daten an die Adresse /angebote/neu. Für die Eingaben gelten diese Anforderungen:

• Haltepunkt: Auswahl aus „Gütersloh, Hauptbahnhof, ZOB Steig 3“ (Wert 1), „Herford, Park & Ride am Bahnhof“ (2) und „Halle (Westf.), Marktplatz“ (3), Pflichtfeld

• Richtung: genau eine von „zur Schule“ (Wert zur-schule) oder „nach Hause“ (nach-hause), vorausgewählt „zur Schule“

• Datum und Abfahrtszeit: Pflichtfelder, frühestens am 16.11.2026

• freie Plätze: ganze Zahl von 1 bis 8

• Kostenbeitrag in Euro: nicht negativ, auf den Cent genau

• eine Schaltfläche „Fahrt anbieten“

1. Notiere das Formular. Jedes Feld soll eine Beschriftung haben, die mit ihm verbunden ist. (8 Punkte)

2. Begründe, welchen Wert Du für das Attribut method gewählt hast. (2 Punkte)

3. Für den Kostenbeitrag gilt im Mitfahrlabor eine Obergrenze von 0,10 Euro je Kilometer Entfernung des Haltepunkts. Erkläre, warum diese Regel nicht allein im Formular geprüft werden kann. (2 Punkte)

<form action="/angebote/neu" method="post">
  <p>
    <label for="haltepunkt">Haltepunkt</label><br>
    <select id="haltepunkt" name="haltepunkt" required>
      <option value="">bitte wählen</option>
      <option value="1">Gütersloh, Hauptbahnhof, ZOB Steig 3</option>
      <option value="2">Herford, Park &amp; Ride am Bahnhof</option>
      <option value="3">Halle (Westf.), Marktplatz</option>
    </select>
  </p>
  <fieldset>
    <legend>Richtung</legend>
    <input type="radio" id="zur-schule" name="richtung" value="zur-schule" checked>
    <label for="zur-schule">zur Schule</label>
    <input type="radio" id="nach-hause" name="richtung" value="nach-hause">
    <label for="nach-hause">nach Hause</label>
  </fieldset>
  <p>
    <label for="datum">Datum</label><br>
    <input type="date" id="datum" name="datum" min="2026-11-16" required>
  </p>
  <p>
    <label for="uhrzeit">Abfahrtszeit</label><br>
    <input type="time" id="uhrzeit" name="uhrzeit" required>
  </p>
  <p>
    <label for="plaetze">Freie Plätze</label><br>
    <input type="number" id="plaetze" name="plaetze" min="1" max="8" value="1" required>
  </p>
  <p>
    <label for="kostenbeitrag">Kostenbeitrag in Euro</label><br>
    <input type="number" id="kostenbeitrag" name="kostenbeitrag" min="0" step="0.01" required>
  </p>
  <p>
    <button type="submit">Fahrt anbieten</button>
  </p>
</form>

Aufgabe 3.1: Eine Seite auf Barrierefreiheit prüfen (Profilkompetenz)

Für die Fahrtsuche des Mitfahrlabors liegt dieser Entwurf vor:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fahrt suchen</title>
</head>
<body>
  <img src="logo.svg">
  <h1>Fahrt suchen</h1>
  <h4>Suche</h4>
  <input type="date" name="datum" placeholder="Datum">
  <div class="knopf" onclick="suchen()">Suchen</div>
  <h4>Ergebnis</h4>
  <table>
    <tr><td><b>Abfahrt</b></td><td><b>Ort</b></td></tr>
    <tr><td>06:50</td><td>Gütersloh</td></tr>
  </table>
  <p>Alle Haltepunkte findest Du <a href="haltepunkte.html">hier</a>.</p>
</body>
</html>

Benenne fünf Mängel der Barrierefreiheit. Gib jeweils an, wer davon betroffen ist, und wie der Mangel behoben wird. (10 Punkte)

<img src="logo.svg" alt="Logo des Mitfahrlabors">
<h2>Suche</h2>
<form action="fahrten.html" method="get">
  <label for="datum">Datum</label>
  <input type="date" id="datum" name="datum">
  <button type="submit">Suchen</button>
</form>
<h2>Ergebnis</h2>
<table>
  <caption>Gefundene Fahrten</caption>
  <tr><th scope="col">Abfahrt</th><th scope="col">Ort</th></tr>
  <tr><td>06:50</td><td>Gütersloh</td></tr>
</table>
<p>Hier findest Du die <a href="haltepunkte.html">Übersicht aller Haltepunkte</a>.</p>

Aufgabe 3.2: Meldungen des Validators deuten (Profilkompetenz)

Der W3C-Validator liefert für die folgende Seite die darunter stehenden Meldungen. Die Zeilennummern stehen links neben dem Code.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Fahrten suchen</title>
</head>
<body>
  <main>
    <h1>Fahrten suchen</h1>
    <ul>
      <li><a href="#heute">Heute</a>
      <li><a href="#morgen">Morgen</a></li>
    </ul>
    <section id="heute">
      <h2>Heute</h2>
      <img src="karte-guetersloh.png">
      <p>Abfahrt <b>06:50 Uhr</p></b>
    </section>
    <section id="heute">
      <h2>Morgen</h2>
      <table>
        <td>07:05</td><td>Herford</td>
      </table>
    </section>
  </main>
</body>
</html>

16: error: An “img” element must have an “alt” attribute, except under certain conditions.
17: error: End tag “p” seen, but there were open elements.
17: error: Unclosed element “b”.
17: error: No “b” element in scope but a “b” end tag seen.
19: error: Duplicate ID “heute”.
21: error: “td” start tag in table body.

1. Erkläre für die Zeilen 16, 17, 19 und 21 die Ursache der Meldungen und gib die korrigierte Zeile an. (8 Punkte)

2. In Zeile 11 fehlt das End-Tag </li>. Erkläre, warum der Validator dazu keine Meldung ausgibt. (2 Punkte)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Fahrten suchen</title>
</head>
<body>
  <main>
    <h1>Fahrten suchen</h1>
    <ul>
      <li><a href="#heute">Heute</a>
      <li><a href="#morgen">Morgen</a></li>
    </ul>
    <section id="heute">
      <h2>Heute</h2>
      <img src="karte-guetersloh.png" alt="Kartenausschnitt mit dem Treffpunkt am Hauptbahnhof Gütersloh">
      <p>Abfahrt <b>06:50 Uhr</b></p>
    </section>
    <section id="morgen">
      <h2>Morgen</h2>
      <table>
        <tr><td>07:05</td><td>Herford</td></tr>
      </table>
    </section>
  </main>
</body>
</html>

Links und weitere Informationen

• zum Nachlesen: HTML-Grundlagen: Webseiten Struktur und Bedeutung geben

• zum Prüfen: W3C: Nu Html Checker (Validator)

• als Nachschlagewerk: MDN Web Docs: HTML-Elementreferenz

Hinweis zur Nachnutzung als Open Educational Resource (OER)

Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Übungsaufgaben zu den HTML-Grundlagen: Abfahrtsanzeige, Haltepunkte und Formulare” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/html-grundlagen-uebungsaufgaben veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/programmierung/web-grundlagen. Erstellt mit KI-Assistenz; von mir umfassend redaktionell überarbeitet, geprüft und freigegeben. Stand: 10.11.2026.

[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]