Die erste HTML-Datei erstellen und im Browser öffnen
Die erste HTML-Datei erstellen und im Browser öffnen
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Jetzt wird es konkret: Wir erstellen deine allererste HTML-Datei. Klicke in VS Code im linken Bereich auf das kleine Symbol "Neue Datei" (oder Rechtsklick auf den Ordnernamen > "Neue Datei") und nenne die Datei index.html.
Tipp: Der Name index.html ist keine Pflicht, aber eine sehr wichtige Gewohnheit: fast jeder Webserver zeigt automatisch die Datei mit dem Namen index.html an, wenn jemand eine Webseiten-Adresse ohne konkreten Dateinamen aufruft. Deshalb heißt die Startseite einer Webseite fast immer so.
Den ersten Inhalt schreiben
Schreibe jetzt genau diese eine Zeile in deine neue, leere Datei:
<h1>Hallo, ich bin Finn!</h1>Das ist bereits gültiges HTML! <h1> bedeutet "hier beginnt eine große Überschrift" und </h1> bedeutet "hier hört die Überschrift wieder auf". Speichere die Datei jetzt mit Strg+S (Windows/Linux) oder Cmd+S (Mac).
Die Datei im Browser öffnen
Jetzt kommt der spannende Moment: Öffne den Ordner meine-webseite auf deinem Computer (also nicht in VS Code, sondern im normalen Datei-Explorer bzw. Finder) und doppelklicke auf index.html. Dein Browser öffnet sich automatisch und zeigt deine allererste eigene Webseite: eine große Überschrift mit dem Text "Hallo, ich bin Finn!".
Tipp: Alternative in VS Code: Rechtsklick auf index.html im linken Bereich, dann "Im Standardbrowser öffnen" oder ähnlich (der genaue Text hängt vom Betriebssystem ab). Manche Leute installieren dafür auch die kostenlose VS-Code-Erweiterung "Live Server", die die Seite automatisch neu lädt, sobald du etwas speicherst - das ist praktisch, aber nicht nötig, um dieses Tutorial durchzuarbeiten.
Der Arbeitsablauf, den du jetzt immer wiederholst
Genau diese drei Schritte wirst du in diesem Tutorial ständig wiederholen:
- In VS Code Code schreiben oder ändern.
- Speichern mit
Strg+Sbzw.Cmd+S. - Im Browser die Seite neu laden (Taste
F5oder der Rundpfeil-Knopf), um die Änderung zu sehen.
Probiere es gleich aus: Ändere den Text in deiner Datei zu <h1>Willkommen auf meiner Webseite!</h1>, speichere, und lade die Seite im Browser neu. Der Text sollte sich sofort geändert haben.
Achtung: Wenn im Browser statt der Überschrift der reine Text <h1>Hallo</h1> mit spitzen Klammern erscheint, hast du die Datei wahrscheinlich nicht als index.html gespeichert, sondern zum Beispiel als index.html.txt. Prüfe in VS Code oben im Reiter, ob dort wirklich index.html steht.