Appearance
Kapitel 3: Grundlegende Syntax
📝 Lernziel: Die Grundlagen der HTML-Syntax beherrschen - der erste Schritt zur Webentwicklung!
3.1 HTML-Dokumentstruktur
Jede HTML-Datei hat eine ** Standard-Struktur**:
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokumenttitel</title>
</head>
<body>
<!-- Inhalt der Webseite -->
</body>
</html>Erklärung der Struktur:
| Tag | Bedeutung | Pflicht? |
|---|---|---|
<!DOCTYPE html> | Dokumenttyp-Deklaration | ✅ Ja |
<html> | Wurzelelement | ✅ Ja |
<head> | Kopfbereich (Metadaten) | ✅ Ja |
<body> | Körperbereich (Inhalt) | ✅ Ja |
<title> | Seitentitel (Browser-Tab) | ✅ Ja |
<meta charset> | Zeichenkodierung | ✅ Ja |
Visualisierung:
┌─────────────────────────────────────┐
│ <!DOCTYPE html> (Deklaration) │
│ <html> │
│ ┌─ <head> ──────────────────┐ │
│ │ Metadaten, Titel, CSS │ │
│ └────────────────────────────┘ │
│ ┌─ <body> ──────────────────┐ │
│ │ Sichtbarer Inhalt │ │
│ │ (Text, Bilder, Links) │ │
│ └────────────────────────────┘ │
│ </html> │
└─────────────────────────────────────┘3.2 HTML-Tag-Regeln
HTML-Tags sind die Bausteine von HTML.
Tag-Typen:
1. Normaler Tag (Öffnungs-Tag + Schließungs-Tag)
html
<tagname>Inhalt</tagname>Beispiele:
html
<h1>Überschrift</h1>
<p>Absatz Text</p>
<div>Container</div>2. Selbstschließender Tag (Void-Tag)
html
<tagname>Beispiele:
html
<img src="bild.jpg" alt="Bild">
<br>
<hr>
<input type="text">Wichtige Regeln:
- Tags werden in Klammern geschrieben:
<tag> - Die meisten Tags kommen in Paaren:
<start></ende> - Tags sind nicht groß-/kleinschreibungsempfindlich, aber kleinschreibung ist Standard
- Tags können verschachtelt sein (müssen ordentlich geschlossen werden)
❌ Falsch:
html
<p><strong>Fetter Text</p></strong> <!-- Falsche Verschachtelung -->✅ Richtig:
html
<p><strong>Fetter Text</strong></p> <!-- Korrekte Verschachtelung -->3.3 HTML-Attribute
Attribute sind Zusatzinformationen für Tags.
Syntax:
html
<tagname attribut="wert">Inhalt</tagname>Wichtige Attribute:
| Attribut | Verwendung | Beispiel |
|---|---|---|
class | CSS-Klasse zuweisen | <div class="container"> |
id | Eindeutige ID | <p id="einleitung"> |
src | Quellpfad (Bilder, Skripte) | <img src="bild.jpg"> |
href | Linkziel | <a href="https://..."> |
style | Inline-CSS | <p style="color:rot;"> |
alt | Alternativtext (Bilder) | <img alt="Beschreibung"> |
Beispiel mit mehreren Attributen:
html
<a href="https://www.beispiel.de" target="_blank" class="link-button">
Besuche diese Seite
</a>3.4 HTML-Kommentare
Kommentare werden vom Browser nicht angezeigt - sie dienen nur der Dokumentation.
Syntax:
html
<!-- Das ist ein Kommentar -->Mehrzeiliger Kommentar:
html
<!--
Das ist ein mehrzeiliger Kommentar.
Hier kann man ausführliche Erklärungen schreiben.
-->Verwendungszwecke:
- Code dokumentieren
- Codeabschnitte vorübergehend deaktivieren
- Sich selbst oder anderen Entwicklern Hinweise geben
Beispiel:
html
<!-- Header-Bereich -->
<header>
<h1>Webseitentitel</h1>
</header>
<!-- TODO: Navigation später hinzufügen -->3.5 Code-Regeln und Namenskonventionen
1. Einrückung (Indentation):
html
<!-- Gut lesbar -->
<div>
<p>Text</p>
</div>
<!-- Schlecht lesbar -->
<div>
<p>Text</p>
</div>2. Namenskonventionen:
- Verwende kleinschreibung für Tag-Namen:
<div>nicht<DIV> - Verwende Beschreibende Klassennamen:
class="haupt-navigation"nichtclass="nav1" - Verwende Kebab-Case für Klassen:
class="meine-klasse" - Verwende camelCase für IDs:
id="meineId"
3. Anführungszeichen:
html
<!-- Empfohlen -->
<img src="bild.jpg" alt="Beschreibung">
<!-- Funktioniert, aber nicht empfohlen -->
<img src='bild.jpg' alt='Beschreibung'>
<!-- Schlecht -->
<img src=bild.jpg alt=Beschreibung>3.6 Übung: Erste einfache Webseite erstellen
Aufgabe: Erstelle eine Webseite mit:
- Einem Titel im Browser-Tab
- Einer Hauptüberschrift (h1)
- Zwei Absätzen Text (p)
- Einem Bild
Lösung:
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Übungsseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist der erste Absatz. Hier lerne ich HTML!</p>
<p>Dies ist der zweite Absatz. HTML ist toll!</p>
<img src="bild.jpg" alt="Ein schönes Bild">
</body>
</html>✅ Zusammenfassung
In diesem Kapitel hast du gelernt:
- ✅ Die Standard-HTML-Dokumentstruktur
- ✅ Tag-Regeln (Öffnungs-/Schließungs-Tags)
- ✅ Attribute und deren Verwendung
- ✅ Kommentare schreiben
- ✅ Code-Regeln und Namenskonventionen
🎯 Nächster Schritt: In Kapitel 4 lernst du Text-Tags - die Grundlage für Inhalte!
← Zurück zu Kapitel 2: EntwicklungsumgebungWeiter zu Kapitel 4: Text-Tags →