Lektion 2: HTML-Grundlagen: Syntax-Übung

Konzepterklärung

Diese Lektion ist ein gezieltes Syntax-Training. Das Ziel ist nicht, eine vollständige Seite zu erstellen, sondern sich mit dem Schreiben gültiger HTML-Elemente, deren korrekter Verschachtelung und dem frühzeitigen Erkennen kleiner Fehler vertraut zu machen. Sie üben gängige Tags, achten auf schließende Tags und Einrückungen und bestätigen, dass die Ausgabe der von Ihnen beabsichtigten Struktur entspricht. Eine solide HTML-Syntax wird viel einfacher, wenn Sie aufhören, zufällige Tags auswendig zu lernen, und stattdessen Muster erkennen, wie Elemente geöffnet werden, Inhalte enthalten und geschlossen werden.

Wo der Code hingehört

1. Beginnen Sie mit Variablen und Eingaben. Platzieren Sie Markup in semantischen Abschnitten mit klarer Struktur.
2. Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
3. Schließen Sie mit Ausgabe und schneller Validierung ab.

Befehlsreferenz

• Geben Sie das Beispiel ohne Kopieren und Einfügen ein und prüfen Sie, ob die Liste korrekt gerendert wird.
• Fügen Sie einen weiteren Listenpunkt hinzu und halten Sie die Einrückung konsistent.
• Verifizieren Sie, dass Blockelemente in einer logischen Reihenfolge innerhalb des `section`-Elements verschachtelt sind.
• Beschreiben Sie einen Syntaxfehler, der dieses Markup unterbrechen oder verwirren würde.

Schritt-für-Schritt-Anleitung

1. Geben Sie das Beispiel genau einmal ein, um das Tag-Muster von Hand zu üben.
2. Öffnen Sie die Seite und bestätigen Sie, dass die Überschrift, der Absatz und die Aufzählungsliste in der erwarteten Reihenfolge erscheinen.
3. Fügen Sie eine gezielte Änderung hinzu, z. B. einen vierten Listenpunkt oder einen zweiten Absatz.
4. Überprüfen Sie die Verschachtelung sorgfältig: Listenpunkte sollten innerhalb von `ul` bleiben, und alle Inhalte sollten innerhalb von `section` verbleiben.
5. Überprüfen Sie das finale Markup auf Abstände, Einrückungen und fehlende schließende Tags.

Übungsaufgaben

• Erstellen Sie einen neuen Abschnitt für ein Rezept, eine Aufgabenliste oder eine Leseliste mit derselben Struktur.
• Schreiben Sie eine kleine Karte mit einer Überschrift, einer Beschreibung und einer ungeordneten Liste von Merkmalen.
• Erstellen Sie dasselbe Beispiel erneut, aber ändern Sie Thema und Text vollständig.

Coding-Challenges

• Schreiben Sie zwei ähnliche Abschnitte auf derselben Seite, ohne die Verschachtelung zu verwechseln.
• Erstellen Sie zwei Versionen des Markups, eine sauber formatiert und eine flach, und vergleichen Sie dann Lesbarkeit und Wartbarkeit.

Kleine Übungsaufgaben

• Fügen Sie einen zusätzlichen Listenpunkt hinzu.
• Schreiben Sie eine einzeilige Beschreibung dessen, was dieser Abschnitt darstellt.
• Überprüfen Sie, ob jedes Element dort verschachtelt ist, wo es hingehört.