Bau dir was

Die Rezeptseite aus der Abschlussaufgabe hat sich der Kurs ausgedacht. Das eigentliche Ziel sind aber Seiten, die du selbst brauchst, für deinen Verein, eine Einladung, eine Sammlung, die dich interessiert. Was auf deinem Rechner entsteht, kann ich von hier aus nicht prüfen, und ich tue auch nicht so, deshalb hat diese Lektion keine Aufgabe. Sie sammelt Ideen, die mit dem Kurs schon gehen, und zeigt, wie man so eine Seite angeht.

01 / 04Wie man eine eigene Seite angeht

Am Anfang steht kein Markup, sondern der Inhalt als reiner Text, so wie in der Abschlussaufgabe. Was soll auf der Seite stehen, und in welcher Reihenfolge? Wer das in ein paar Zeilen aufschreiben kann, hat den schwierigsten Teil hinter sich.

Dann kommt die Gliederung, von außen nach innen. Zuerst die Bereiche, Kopf, Hauptinhalt und Fuß, dann die Überschriften, dann Listen, Tabellen, Bilder und Formulare. Bei jedem Stück hilft die Frage aus dem Abschnitt über Semantik, ob es ein Element gibt, das sagt, was dieser Teil ist.

Die Datei liegt dabei auf deinem Rechner, so wie in der Lektion „Deine erste eigene Datei“, mit kleinen Dateinamen ohne Umlaute und Leerzeichen.

Am Ende prüfe ich jede Seite auf dieselbe Art. Der Validator meldet, was am Markup nicht stimmt. Die Tab-Taste zeigt, ob jedes Bedienelement erreichbar ist. Und die Überschriften der Seite, nur die, von oben nach unten gelesen, müssen ein sinnvolles Inhaltsverzeichnis ergeben.

02 / 04Eine Einladung mit Zusage

<h1>Kochabend in der Nordstadt</h1>
<p>Am <time datetime="2026-11-21T18:30">21. November um halb sieben</time> wird gekocht, und alle essen mit.</p>

<dl>
  <dt>Wo</dt>
  <dd>Musterstraße 1, dritter Stock</dd>
  <dt>Mitbringen</dt>
  <dd>Hunger und eine Schürze</dd>
</dl>

<details>
  <summary>Muss ich kochen können?</summary>
  <p>Nein. Wer nicht schnippeln mag, deckt den Tisch.</p>
</details>

<form action="/zusage" method="post">
  <fieldset>
    <legend>Kommst du?</legend>
    <input type="radio" id="ja" name="zusage" value="ja">
    <label for="ja">Ja</label>
    <input type="radio" id="nein" name="zusage" value="nein">
    <label for="nein">Leider nicht</label>
  </fieldset>

  <label for="essen">Was isst du nicht?</label>
  <textarea id="essen" name="essen" rows="3"></textarea>

  <button type="submit">Antwort schicken</button>
</form>

Ein Kochabend, ein Geburtstag, ein Vereinsfest. Gebraucht werden ein time für den Termin, eine Beschreibungsliste für Ort und Mitbringsel, ein details für die Frage, die sonst jeder stellt, und ein kleines Formular für die Antwort. Wohin das Formular schickt, entscheidet am Ende der, der die Antworten sammelt. Solange es dafür keinen Server gibt, ist ein mailto:-Link mit der Bitte um Antwort die ehrlichere Lösung.

03 / 04Trainingszeiten für den Verein

<header>
  <p>Turnverein Nordstadt</p>
  <nav>
    <ul>
      <li><a href="#zeiten">Trainingszeiten</a></li>
      <li><a href="#kontakt">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Kinderturnen</h1>
  <table id="zeiten">
    <caption>Trainingszeiten in der Halle an der Grundschule</caption>
    <thead>
      <tr>
        <th scope="col">Tag</th>
        <th scope="col">Uhrzeit</th>
        <th scope="col">Alter</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Montag</th>
        <td>16 bis 17 Uhr</td>
        <td>4 bis 6 Jahre</td>
      </tr>
      <tr>
        <th scope="row">Mittwoch</th>
        <td>16 bis 17:30 Uhr</td>
        <td>7 bis 10 Jahre</td>
      </tr>
    </tbody>
  </table>
</main>

<footer id="kontakt">
  <address>
    Turnverein Nordstadt<br>
    <a href="mailto:kinderturnen@example.org">kinderturnen@example.org</a>
  </address>
</footer>

Eine Seite für den Sportverein, die Musikschule oder den Chor. Die Zeiten sind zweidimensional, jeder Wert hat einen Tag und eine Bedeutung, also eine Tabelle mit Kopfzellen oben und links. Die Navigation springt mit Sprungmarken zu Tabelle und Kontakt, und der Kontakt steht als address im Fuß. Ausbauen lässt sich das mit einer zweiten Seite für eine andere Gruppe, dann im Ordner gruppen/ und mit Pfaden, die von dort zurückfinden.

04 / 04Weitere Ideen

Eine Linksammlung zu einem Thema, das dich interessiert, mit einem Satz zu jedem Link und Linktexten, die auch allein verständlich sind. Ein Rezeptbuch aus mehreren Seiten, jede mit Zutaten als ungeordneter und Zubereitung als geordneter Liste, dazu eine Startseite mit Navigation. Ein Lebenslauf mit Beschreibungslisten statt einer Tabelle, wo keine nötig ist.

Gut aussehen wird keine dieser Seiten, denn Aussehen ist Sache von CSS. Wer das als Nächstes angehen will, findet hier auf der Plattform den Kurs dazu, und eine sauber gegliederte Seite ist genau das, womit er anfängt.

Danach kommt noch der Test zu diesem Abschnitt, und dann hast du HTML durch.