Konzepterklärung
Diese Lektion führt die Grundlagen von HTML in einer kleinen Aufgabe zum Seitenaufbau zusammen. Anstatt isolierte Tags hinzuzufügen, strukturieren Sie einen kompletten Abschnitt so, wie es ein reales Projekt tun würde: klare Überschriften, gruppierte Inhalte und Markup, das auch vor dem Hinzufügen von CSS noch sinnvoll ist. Ziel ist es, die Projektintegration in den HTML-Grundlagen zu üben, indem Sie Elemente zuerst nach ihrer Bedeutung auswählen und dann überprüfen, ob das Ergebnis leicht lesbar, wartbar und erweiterbar bleibt.
Wo der Code hingehört
- Beginnen Sie mit Variablen und Eingaben. Platzieren Sie Markup in semantischen Abschnitten mit klarer Struktur.
- Fügen Sie die Verarbeitungslogik im mittleren Abschnitt hinzu.
- Schließen Sie mit Ausgabe und schneller Validierung ab.
Befehlsreferenz
- Erstellen Sie zuerst die Seitenstruktur, dann prüfen Sie, ob jedes Element auch ohne CSS noch sinnvoll ist.
- Ersetzen Sie, wo möglich, jeden generischen Wrapper durch ein bedeutungsvolleres Element.
- Überprüfen Sie einen normalen Lesepfad und einen Nur-Tastatur-Lesepfad.
- Erklären Sie, warum Sie die Überschriftenebene, den Listentyp und das Aktionselement gewählt haben.
Schritt-für-Schritt-Anleitung
- Lesen Sie das Seitenziel und listen Sie die Inhaltselemente auf, bevor Sie Tags schreiben.
- Erstellen Sie die erste Version mit Überschriften, Text, einer Liste und einer klaren Aktion.
- Überprüfen Sie die Struktur und ersetzen Sie mindestens eine schwache Elementwahl durch eine semantische.
- Überprüfen Sie die Seite in der Quellreihenfolge, um zu bestätigen, dass sie natürlich von oben nach unten lesbar ist.
- Schließen Sie mit einer kurzen Checkliste für Struktur, Klarheit und Barrierefreiheit ab.
Übungsaufgaben
- Erstellen Sie eine zweite Karte für einen anderen Kursplan unter Verwendung desselben Strukturmusters.
- Verwandeln Sie den Abschnitt in einen kleinen Preis- oder Funktionsblock, ohne die semantische Logik zu ändern.
- Fügen Sie eine kurze Notiz hinzu, die erklärt, welche Teile Inhalt und welcher Teil die Hauptaktion ist.
Coding-Challenges
- Erstellen Sie einen kleinen Landingpage-Abschnitt, der eine Überschrift, eine Zusammenfassung, eine Funktionsliste und einen Call-to-Action nur mit semantischem HTML enthält.
- Refaktorieren Sie eine Version, die zu viele generische Container verwendet, zu einem saubereren, bedeutungsvolleren Markup.
Kleine Übungsaufgaben
- Schreiben Sie eine einzeilige Zusammenfassung dessen, was dieser Abschnitt bietet.
- Benennen oder ordnen Sie einen Teil des Markups neu, um den Lesefluss zu verbessern.
- Überprüfen Sie, ob jeder sichtbare Text zu einem geeigneten HTML-Element gehört.
Häufiger Fehler
Skipping input validation or mixing logic/output in one unstructured block.
Mini-Challenge aus der Praxis
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.