Die erste HTML-Datei

Das Ziel

Am Ende dieses Schritts hast du einen Projektordner, darin eine Datei index.html, und im Browser steht dein erster eigener Satz.

So könnte das aussehen

Das hier ist das Grundgerüst, mit dem jede HTML-Datei anfängt. Änder ruhig etwas daran – rechts siehst du sofort, was passiert.

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Amsterdam</title> </head> <body> <h1>Amsterdam</h1> <p>Eine Stadt aus Wasser, Rädern und Backstein.</p> </body> </html>

Wie es gemacht ist

Zeile	Wozu
`<!DOCTYPE html>`	„Das ist modernes HTML." Muss ganz oben stehen.
`<html lang="de">`	umschließt alles. `lang="de"` sagt Vorleseprogrammen, dass hier Deutsch steht.
`<head>`	Angaben über die Seite – nichts davon ist auf der Seite zu sehen.
`<meta charset="UTF-8">`	ohne diese Zeile werden aus Umlauten Kauderwelsch.
`<title>`	der Text im Browsertab.
`<body>`	der sichtbare Inhalt.

Der Dateiname index.html ist kein Zufall: Ruft jemand nur den Ordner auf, zeigt der Browser automatisch die Datei mit diesem Namen. Deine Startseite heißt deshalb immer so.

Ausführlicher steht das im Lernpfad unter Das Grundgerüst.

Deine Aufgabe

a) Leg einen Ordner für dein Projekt an. Nimm einen kurzen Namen ohne Leerzeichen und ohne Umlaute, zum Beispiel meine-seite.

b) Öffne den Ordner in deinem Editor: Datei → Ordner öffnen. Wichtig ist, dass du den Ordner öffnest, nicht die einzelne Datei – nur dann findet der Editor später deine anderen Dateien.

c) Leg darin die Datei index.html an und schreib das Grundgerüst hinein.

d) Ändere den <title> und die Überschrift auf dein Thema.

e) Starte die Vorschau (Rechtsklick auf die Datei → Show Preview) und ändere den Text. Die Vorschau aktualisiert sich beim Speichern.

Tipp 1: Der Editor tippt mit

Schreib in der leeren Datei nur ein Ausrufezeichen ! und drück dann die Tabulatortaste. VS Code füllt das ganze Grundgerüst für dich aus. Danach musst du nur noch lang="en" in lang="de" ändern.

Das ist kein Schummeln – so arbeiten alle. Wissen musst du trotzdem, was die Zeilen bedeuten.

Tipp 2: Die Vorschau bleibt leer

Drei Ursachen kommen infrage:

Die Datei ist nicht gespeichert. Mit Strg+S (macOS: Cmd+S) speichern.
Die Datei heißt nicht index.html, sondern zum Beispiel index.html.txt. In der Dateiliste des Editors nachsehen.
Der Text steht im <head> statt im <body>. Nur was im <body> steht, ist zu sehen.

Eine mögliche Umsetzung. Erfrage das Passwort bei deiner Lehrkraft oder sieh auf der Seite Lösungspasswörter nach.