02 – Seitenstruktur 🏗️

Das Gerüst jeder Webseite – unsichtbar, aber unverzichtbar

🧱 1. Das HTML5-Grundgerüst – Schritt für Schritt erklärt

Jede moderne Webseite beginnt mit dem gleichen Grundgerüst. Dieses Gerüst ist wie das Fundament eines Hauses: Unsichtbar für Besucher, aber unverzichtbar für Stabilität.

Es besteht aus sieben zentralen Teilen, die gemeinsam sicherstellen, dass der Browser die Seite korrekt anzeigt – auf allen Geräten und für alle Benutzer:

<!DOCTYPE html> – sagt dem Browser: „Das ist HTML5“.
<html lang="..."> – definiert die Sprache der Seite (wichtig für Barrierefreiheit und Suchmaschinen).
<head> – enthält unsichtbare Metadaten (Zeichensatz, Titel, CSS-Links).
<meta charset="UTF-8"> – ermöglicht Umlaute, Sonderzeichen und internationale Schriftzeichen.
<meta name="viewport" ...> – sorgt dafür, dass die Seite auf Smartphones korrekt skaliert wird.
<title> – bestimmt den Titel im Browser-Tab.
<body> – enthält den sichtbaren Inhalt der Webseite.

Ohne dieses Gerüst funktioniert kein modernes Web – weder responsives Design noch JavaScript noch Barrierefreiheit.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seitentitel</title>
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist der sichtbare Inhalt.</p>
</body>
</html>

Hallo Welt!

Das ist der sichtbare Inhalt.

🔍 2. Die Bestandteile im Detail

📜 `<!DOCTYPE html>`

Sagt dem Browser: „Diese Seite ist HTML5.“ Ohne diese Zeile könnte der Browser im „Quirks-Modus“ rendern – mit unvorhersehbarem Layout.

🌍 `<html lang="de">`

Das Wurzelelement der Seite. Das Attribut lang="de" hilft: - Screenreadern (Barrierefreiheit) - Suchmaschinen (SEO) - automatischer Rechtschreibprüfung

📚 Der `<head>`-Bereich

Enthält Metadaten – Informationen über die Seite, nicht auf der Seite. Hier gehören:

<meta charset="UTF-8"> → Zeichensatz (Umlaute funktionieren!)
<meta name="viewport" ...> → Für mobile Geräte (siehe unten)
<title> → Tab-Titel im Browser
<link rel="stylesheet"> → Verlinkung zu CSS

⚠️ Wichtig: Alles im <head> ist nicht sichtbar im Browserfenster!

📄 Der `<body>`-Bereich

Enthält den sichtbaren Inhalt der Seite – Überschriften, Texte, Bilder, etc. Dieser Teil wird später von JavaScript am häufigsten manipuliert (DOM-Zugriff).

📚 Vertiefung auf W3Schools – HTML Basic

W3Schools erklärt das HTML-Grundgerüst Schritt für Schritt mit interaktiven Beispielen. Ideal, um das Gelernte direkt auszuprobieren.

🔗 W3Schools: HTML Basic

📱 3. Der Viewport-Meta-Tag – Für mobile Geräte

⚠️ Kritischer Fehler: Ohne diesen Tag wird deine Seite auf Smartphones verkleinert dargestellt – wie auf einem Desktop!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bedeutung: - width=device-width → Breite = Bildschirmbreite des Geräts - initial-scale=1.0 → Kein automatischer Zoom

💡 Regel: Dieser Tag gehört in jede HTML-Seite – sonst ist sie nicht responsive!

🧠 4. Warum ist die Struktur wichtig für JavaScript?

JavaScript greift über den DOM (Document Object Model) auf die Seite zu. Der DOM spiegelt exakt die HTML-Struktur wider:

document.querySelector('body') → greift auf <body> zu
document.title → liest den Inhalt von <title>
Ohne korrektes Grundgerüst funktioniert der DOM nicht zuverlässig!

💡 Merke: Erst die Struktur – dann das Styling – dann das Verhalten.

📂 5. Ordnerstruktur & Pfade – Das Fundament eines Webprojekts

Sobald du mehr als eine HTML-Seite erstellst, brauchst du eine klare Ordnerstruktur. Ohne sie verlierst du schnell den Überblick – besonders bei Bildern, CSS und später JavaScript.

Warum braucht man eine Struktur?

- Der Browser lädt Ressourcen über Pfade. - Pfade müssen relativ zur aktuellen HTML-Datei sein. - Fehlerhafte Pfade = fehlende Bilder, kein CSS, kaputte Links.

Die Startseite: `index.html`

Jeder Webserver sucht standardmäßig nach einer Datei namens index.html. Das ist die Startseite deines Projekts – der Einstiegspunkt für alle Besucher.

Typische Projektstruktur

mein-projekt/
├── index.html              ← Startseite
├── kontakt.html
├── ueber-uns.html
├── css/
│   └── style.css           ← zentrale Styling-Datei
├── js/
│   └── main.js             ← zentrale JavaScript-Datei
└── assets/
    ├── images/
    │   ├── logo.png
    │   └── banner.jpg
    └── pdf/
        └── info.pdf

Wie funktionieren Pfade?

Im selben Ordner: kontakt.html
Unterordner: css/style.css
Eine Ebene höher: ../index.html
Zwei Ebenen höher: ../../bilder/logo.png

Beispiel: In kontakt.html (im Hauptordner) verlinkst du CSS so:

<link rel="stylesheet" href="css/style.css">

In einer hypothetischen Datei pages/projekt.html wäre der Pfad:

<link rel="stylesheet" href="../css/style.css">

⚠️ Tipp: Öffne deine HTML-Dateien nicht einzeln per Doppelklick – sondern immer über VS Code mit Live Server. Nur so funktionieren relative Pfade zuverlässig.

💬 6. KI als Lernpartner – guter Prompt

❌ Schlecht: „Gib mir HTML.“ ✅ Gut: „Kannst du mir das vollständige HTML5-Grundgerüst mit deutscher Sprache, UTF-8, Viewport und Titel ‚Mein Steckbrief‘ zeigen – und erklären, warum jedes Element wichtig ist?“