Kapitel 1: Was ist HTML?

🎯 Lernziel: Verstehen, was HTML ist, was es kann und warum es die Grundlage des Webens ist.

1.1 Definition von HTML: Das "Skelett" der Webseite

Einfache Erklärung: HTML (HyperText Markup Language) ist wie das Skelett eines Menschen - es bildet die grundlegende Struktur einer Webseite.

Mensch: Skelett → Muskeln → Haut
Webseite: HTML → CSS → JavaScript

• HTML = Struktur (Knochen)
• CSS = Aussehen (Haut/Kleidung)
• JavaScript = Verhalten (Muskeln/Bewegungen)

Was ist HTML genau?

• Eine Auszeichnungssprache (keine Programmiersprache!)
• Wird verwendet, um Webseiten zu strukturieren
• Besteht aus Tags (Markierungen), die dem Browser sagen, was angezeigt werden soll

Einfaches Beispiel:

<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz Text.</p>
<img src="bild.jpg" alt="Beschreibung">

---

1.2 Was kann HTML?

HTML kann:

Funktion	Beschreibung	Beispiel
Struktur aufbauen	Überschriften, Absätze, Listen erstellen	Blogartikel, News-Seiten
Text und Bilder anzeigen	Inhalte im Browser darstellen	Produktbilder, Artikeltext
Formulare erstellen	Benutzereingaben ermöglichen	Login-Formulare, Registrierung
Links erstellen	Zwischen Seiten navigieren	Menüleisten, Verlinkungen
Medien einbinden	Videos, Audio, Bilder	Video-Tutorials, Musikplayer
Mehrgeräte-Anpassung	Responsives Design unterstützen	Mobile Webseiten

---

1.3 Die Beziehung zwischen HTML, CSS und JavaScript

┌─────────────────────────────────────┐
│         Webseite erstellen          │
├─────────────────────────────────────┤
│  HTML: Struktur (Skelett) 💀       │
│    ↓                                │
│  CSS: Aussehen (Haut) 🎨          │
│    ↓                                │
│  JavaScript: Interaktion (Seele) ⚡ │
└─────────────────────────────────────┘

Beispiel:

<!-- HTML: Struktur -->
<button id="meinButton">Klick mich</button>

/* CSS: Aussehen */
#meinButton {
  background-color: blau;
  padding: 10px 20px;
}

// JavaScript: Verhalten
document.getElementById('meinButton').onclick = function() {
  alert('Button wurde geklickt!');
}

Warum zuerst HTML lernen?

1. HTML ist die Basis aller Webtechnologien
2. HTML ist einfacher als CSS und JavaScript
3. Ohne HTML funktionieren CSS und JavaScript nicht

---

1.4 Vorteile von HTML

✅ Einfach zu lernen

• Logische Tag-Struktur
• Keine komplexe Programmierlogik
• Sofortige Ergebnisse im Browser sichtbar

✅ Plattformunabhängig

• Funktioniert auf allen Betriebssystemen (Windows, Mac, Linux)
• Alle Browser verstehen HTML

✅ Starke Kompatibilität

• Rückwärtskompatibel
• HTML5 wird von allen modernen Browsern unterstützt

✅ Große Community

• Viele Lernressourcen
• Hilfe leicht verfügbar

---

1.5 Unverzichtbare Tools für Anfänger

1️⃣ Code-Editor: VS Code (Empfohlen)

• Kostenlos
• Auto-Vervollständigung
• Viele nützliche Erweiterungen

Wichtige Erweiterungen:

• Live Server (Vorschau in Echtzeit)
• HTML CSS Support
• Auto Rename Tag

2️⃣ Browser: Google Chrome / Firefox

• Entwicklertools (F12)
• Vorschau von HTML-Dateien
• Debugging-Funktionen

3️⃣ Online-Editoren (Alternative)

• CodePen
• JSFiddle
• OnlineGDB

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was HTML ist (Skelett der Webseite)
• ✅ Was HTML kann (Struktur, Inhalte, Formulare)
• ✅ Die Beziehung zwischen HTML, CSS und JavaScript
• ✅ Warum HTML als erste Sprache gelernt werden sollte
• ✅ Welche Tools du benötigst

🎯 Nächster Schritt: In Kapitel 2 wirst du deine Entwicklungsumgebung einrichten und deine erste HTML-Datei erstellen!

---

Weiter zu Kapitel 2: Entwicklungsumgebung einrichten →