02 – Seitenstruktur 🏗️

Das unsichtbare Gerüst – verstehen, bevor du baust

🎯 1. Einleitung & W3Schools

In Kapitel 02 hast du gelernt, dass jede Webseite ein Grundgerüst braucht – wie ein Haus ein Fundament braucht.

Lies, probiere aus, denke nach – auf W3Schools:

🧠 2. KI-Prompt-Training – verstehe, bevor du baust

Deine Aufgabe: Formuliere einen Prompt, der kein HTML liefert, sondern dir hilft, die vier Säulen des HTML5-Grundgerüsts zu verstehen.

❌ Vermeide: „Gib mir HTML für eine Seite über Traun.“ ✅ Fragen, die denken erzwingen:

„Warum ist <!DOCTYPE html> nötig, obwohl der Browser den Code auch ohne liest?“
„Was passiert, wenn der Viewport-Meta-Tag fehlt – und warum sieht die Seite auf dem Handy dann so komisch aus?“
„Warum muss man lang="de" angeben – und wer profitiert davon außer dem Browser?“

💡 Merke: Wenn die KI dir Code gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht repariere!

Ein Schüler hat folgendes HTML abgegeben – aber die Seite ist nicht barrierefrei, nicht mobilfreundlich und nicht valide:

<html>
<head>
  <title>Mein Ort</title>
</head>
<body>
  <h1>Traun</h1>
  <p>Eine Stadt in Oberösterreich.</p>
</body>
</html>

Schreibe (auf Papier oder in Textdatei):

Welche vier zwingenden Elemente fehlen im <head>?
Erkläre für jedes fehlende Element, was konkret passiert, wenn es fehlt:
(z. B. „Ohne charset werden Umlaute falsch dargestellt“)
Warum ist es problematisch, wenn <!DOCTYPE html> fehlt?

⚠️ Hinweis: Wer den Code einfach „korrigiert“, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🧱 Aufgabe 2: Baue bewusst – erst nach der Analyse!

Erstelle nun deine eigene Datei heimat.html – aber erst nachdem du Aufgabe 1 beantwortet hast!

Deine Seite muss diese sieben Elemente enthalten:

<!DOCTYPE html>
<html lang="de">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> mit sinnvollem Inhalt
<h1> im <body>
Einen informativen <p>-Absatz

💡 Teste selbst:
- Öffne die Seite auf dem Handy: Wird sie korrekt skaliert?
- Öffne sie in VS Code mit Live Server: Sind Umlaute sichtbar?
- Prüfe mit dem W3C Validator: Ist der Code valide?

📊 Beurteilungskriterien – Übung 02: Seitenstruktur

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis. Markiere selbst ehrlich, wo du stehst.

Kriterium	✅	➖	❌
Verständnis des Grundgerüsts: Kannst du im Gespräch erklären, warum jedes der sieben Pflichtelemente unverzichtbar ist – und was passiert, wenn es fehlt?
Mobile Kompatibilität: Weißt du, warum der Viewport-Tag nötig ist – und kannst du erklären, wie er das Layout auf Smartphones beeinflusst?
Barrierefreiheit & Zeichensatz: Kannst du begründen, warum `lang="de"` und `UTF-8` nicht optional, sondern Pflicht sind – und wer davon profitiert?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum ist der Viewport-Tag nötig?“ – nicht „Was steht in deiner HTML-Datei?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.