Konzepterklärung
Diese Lektion führt in die grundlegende Struktur eines HTML-Dokuments ein und erklärt, warum die Struktur vor dem Styling oder Scripting wichtig ist. Sie erstellen eine kleine Seite mit einer Überschrift, einem kurzen Absatz und einer klaren Dokumentgliederung. Anschließend prüfen Sie, ob das Markup leicht lesbar ist und im Browser Sinn ergibt. Ziel ist es zu verstehen, wofür HTML zuständig ist: Inhalte beschreiben, nicht dekorieren. Am Ende sollten Sie in der Lage sein, eine einfache Seite zu lesen und von Grund auf neu zu schreiben, ohne zu raten, wohin Tags gehören.
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
- Öffnen Sie die Seite in einem Browser und identifizieren Sie, welcher Teil den Dokumenttitel, die Hauptüberschrift und den Fließtext darstellt.
- Fügen Sie ein weiteres Inhaltselement hinzu, z. B. einen zweiten Absatz oder eine kurze Liste, ohne die Struktur zu zerstören.
- Stellen Sie sicher, dass jeder öffnende Tag einen passenden schließenden Tag hat, wo nötig.
- Erklären Sie in einem Satz, warum es bei HTML um Struktur und Bedeutung geht, nicht um visuelles Styling.
Schritt-für-Schritt-Anleitung
- Lesen Sie das Dokument von oben nach unten und benennen Sie den Zweck von `html`, `head`, `title`, `body` und `main`.
- Führen Sie den Startcode aus und bestätigen Sie, dass Überschrift und Absatz im Browser erscheinen.
- Fügen Sie eine kleine Inhaltsänderung hinzu, z. B. die Aktualisierung des Überschriftentextes oder das Hinzufügen eines zweiten Absatzes.
- Überprüfen Sie das Markup auf Einrückung und klare Verschachtelung, damit die Struktur leicht nachvollziehbar ist.
- Schließen Sie mit einem kurzen Check ab: Hat die Seite einen Titel, sichtbaren Inhalt und eine logische Reihenfolge?
Übungsaufgaben
- Erstellen Sie eine einfache persönliche Intro-Seite mit einer Überschrift, zwei Absätzen und einem Seitentitel.
- Ersetzen Sie den Beispieltext durch Inhalte für eine Kurs-Landingpage oder einen Portfolio-Willkommensbereich.
- Erstellen Sie dieselbe Seite erneut aus dem Gedächtnis, ohne das Beispiel zu kopieren.
Coding-Challenges
- Erstellen Sie eine etwas größere Seite mit `header`, `main` und `footer`, wobei die Struktur ordentlich bleibt.
- Vergleichen Sie eine unordentliche und eine sauber eingerückte Version desselben HTML und erklären Sie dann, welche einfacher zu warten ist und warum.
Kleine Übungsaufgaben
- Schreiben Sie einen Satz, der beschreibt, was der `title`-Tag bewirkt.
- Fügen Sie ein neues Element innerhalb von `main` hinzu und laden Sie die Seite neu.
- Überprüfen Sie das Dokument auf saubere Einrückung und passende Tags.
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.