Appearance
Kapitel 2: Entwicklungsumgebung einrichten
⚙️ Lernziel: In nur 5 Minuten deine HTML-Entwicklungsumgebung aufsetzen - ganz ohne komplizierte Konfiguration!
2.1 Browser verwenden: HTML-Rendering-Effekt ansehen
Warum ein Browser?
- HTML-Dateien müssen im Browser geöffnet werden, um sie anzuzeigen
- Jeder Computer hat bereits einen Browser installiert
Wichtige Browser:
| Browser | Bedeutung für Entwickler |
|---|---|
| Chrome | ⭐⭐⭐⭐⭐ (Empfohlen) |
| Firefox | ⭐⭐⭐⭐⭐ |
| Edge | ⭐⭐⭐⭐ |
F12 Entwicklertools verwenden (Grundlagen):
- Öffne eine Webseite im Browser
- Drücke F12 oder Rechtsklick → Untersuchen
- Du siehst den HTML-Quellcode der Seite
┌─────────────────────────────────────┐
│ Browser-Fenster │
│ ┌─────────────────────────────┐ │
│ │ Elemente Konsole ... │ │
│ ├─────────────────────────────┤ │
│ │ <html> │ │
│ │ <head>...</head> │ │
│ │ <body> │ │
│ │ <h1>Hallo</h1> │ │
│ │ </body> │ │
│ │ </html> │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘Praxis-Tipp: Die Entwicklertools sind dein bester Freund zum Lernen - schau dir die Struktur echter Webseiten an!
2.2 VS Code Installation + HTML-Konfiguration
Schritt 1: VS Code herunterladen und installieren
- Besuche: https://code.visualstudio.com/
- Lade die Windows-Version herunter
- Installiere mit den Standardeinstellungen
Schritt 2: Wichtige Erweiterungen installieren
Öffne VS Code und klicke auf das Erweiterungs-Symbol (viereckiges Symbol links):
| Erweiterung | Funktion |
|---|---|
| Live Server | Vorschau in Echtzeit, auto-refresh |
| HTML CSS Support | Auto-Vervollständigung |
| Auto Rename Tag | Tag-Namen automatisch ändern |
| Prettier | Code-Formatierung |
Live Server installieren (Wichtig!):
- Suche nach "Live Server"
- Klicke auf "Installieren"
- Nach der Installation: Rechtsklick auf HTML-Datei → "Open with Live Server"
2.3 Erste HTML-Datei (Schritt für Schritt)
Schritt 1: Neue Datei erstellen
- Öffne VS Code
- Datei → Neue Datei
- Speichern als:
index.html
Schritt 2: Code schreiben
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist meine erste HTML-Webseite.</p>
</body>
</html>Schritt 3: Im Browser anzeigen
- Methode 1: Doppelklicke auf die HTML-Datei
- Methode 2: Rechtsklick in VS Code → "Open with Live Server"
Ergebnis:
┌─────────────────────────┐
│ Meine erste Webseite │
├─────────────────────────┤
│ │
│ Hallo Welt! │
│ │
│ Das ist meine erste │
│ HTML-Webseite. │
│ │
└─────────────────────────┘🎉 Herzlichen Glückwunsch! Du hast deine erste Webseite erstellt!
2.4 HTML-Code ausführen und debuggen
Häufige Fehler und Lösungen
| Fehler | Ursache | Lösung |
|---|---|---|
| Seite bleibt leer | Datei nicht gespeichert | Strg + S drücken |
| Änderungen sichtbar | Browser-Cache | Strg + F5 (Hard Refresh) |
| Tags werden angezeigt | Tag falsch geschlossen | Prüfe auf </tag> |
| Umlaute falsch | Zeichenkodierung fehlt | <meta charset="UTF-8"> hinzufügen |
Debugging mit F12
- Öffne die Seite im Browser
- Drücke F12
- Schau unter "Konsole" für Fehlermeldungen
- Schau unter "Elemente" für HTML-Struktur
Tipp für Anfänger:
- Speichere deine Datei alle 2-3 Minuten (
Strg + S) - Aktualisiere den Browser nach jeder Änderung
- Mach keine komplizierten Änderungen auf einmal
✅ Zusammenfassung
In diesem Kapitel hast du gelernt:
- ✅ Wie man den Browser zum Anzeigen von HTML verwendet
- ✅ Wie man F12 Entwicklertools nutzt
- ✅ Wie man VS Code installiert und konfiguriert
- ✅ Wie man deine erste HTML-Datei erstellt
- ✅ Wie man häufige Fehler behebt
🎯 Nächster Schritt: In Kapitel 3 lernst du die grundlegende HTML-Syntax!
← Zurück zu Kapitel 1: Was ist HTML?Weiter zu Kapitel 3: Grundlegende Syntax →