Das brauchst du

Einen Windows-Computer, Internet zum Herunterladen und die Erlaubnis, ein Programm zu installieren. Du brauchst kein bezahltes Zusatzpaket für diese Übung.

Das nimmst du mit

Du hast eine Datei namens index.html in einem eigenen Ordner gespeichert und als Webseite im Browser geöffnet.

Schritt 01

Was Visual Studio Code ist

Visual Studio Code, kurz VS Code, ist ein Programm zum Schreiben von Programmtext. So ein Schreibprogramm heißt Code-Editor. Es ist etwas anderes als das größere Programm Visual Studio.

Wir benutzen VS Code nur als einfachen Editor. Du brauchst für diese Übung weder KI-Zusätze noch Erweiterungen. Falls du HTML noch nicht kennst, lies zuerst die Erklärung der ersten HTML-Zeilen.

Schritt 02

Das richtige Programm installieren

  1. Öffne die offizielle Visual-Studio-Code-Seite in deinem Internetprogramm.
  2. Wähle dort den Download für Windows. Herunterladen heißt: die Installationsdatei auf deinen Computer holen.
  3. Öffne den Datei-Explorer mit Windows-Taste + E. Klicke links auf Downloads.
  4. Öffne die gerade heruntergeladene VS-Code-Installationsdatei mit zwei schnellen Klicks der linken Maustaste und folge den angezeigten Installationsschritten. Lies dabei die Angaben, bevor du bestätigst.
  5. Starte VS Code. Falls du es nicht findest: Windows-Taste drücken, Visual Studio Code tippen und den passenden Eintrag wählen.
Wenn du hier nicht weiterkommst

Darfst du auf deinem Schul- oder Firmencomputer keine Programme installieren, frage die zuständige Betreuung. Umgehe die Sperre nicht.

Schritt 03

Eine eigene digitale Mappe anlegen

Ein Ordner ist eine digitale Mappe. Darin bewahrst du die Dateien deiner Webseite gemeinsam auf.

  1. Öffne den Datei-Explorer mit Windows-Taste + E.
  2. Öffne links Dokumente.
  3. Klicke mit der rechten Maustaste auf eine freie Stelle. Wähle Neu und dann Ordner.
  4. Tippe Meine-erste-Webseite als Namen ein und drücke Enter.
  5. Wechsle zu VS Code. Wähle oben File → Open Folder. Bei deutscher Oberfläche heißt das Datei → Ordner öffnen.
  6. Suche unter Dokumente deinen neuen Ordner, klicke ihn an und bestätige die Auswahl. Eine Vertrauensabfrage darfst du für diesen selbst angelegten, zunächst leeren Übungsordner bestätigen; für fremde Ordner prüfst du den Inhalt vorher.
So erkennst du, dass es klappt

Links in VS Code wird der Ordner Meine-erste-Webseite angezeigt. Er darf noch leer sein.

Schritt 04

Die erste HTML-Datei schreiben und speichern

  1. Wähle oben File → New Text File beziehungsweise Datei → Neue Textdatei.
  2. Tippe den folgenden Text in die leere Schreibfläche. Wenn du ihn kopierst, nimm den gesamten Kasten.
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Meine erste Seite</title>
</head>
<body>
  <h1>Hallo Welt</h1>
  <p>Das ist meine erste Webseite.</p>
</body>
</html>
  1. Drücke Strg + S: Strg gedrückt halten, S kurz drücken, beide loslassen.
  2. Wähle im Speicherfenster den Ordner Meine-erste-Webseite. Gib als Dateinamen genau index.html ein und klicke auf Speichern.

Die Endung .html gehört zum Namen. Schreibe nicht index.html.txt. Eine Textdatei mit .txt würde der Browser anders behandeln.

So erkennst du, dass es klappt

Links im geöffneten Projektordner erscheint index.html. In ihrem Inhalt stehen die HTML-Zeilen.

Schritt 05

Die fertige Datei ansehen und verändern

  1. Öffne im Datei-Explorer den Ordner Dokumente und darin Meine-erste-Webseite.
  2. Öffne index.html mit einem Doppelklick. Falls die Datei im Editor statt im Browser erscheint, klicke sie mit der rechten Maustaste an und wähle unter Öffnen mit deinen Browser, zum Beispiel Edge.
  3. Du solltest „Hallo Welt“ als Überschrift und darunter deinen Satz sehen.
  4. Wechsle zu VS Code. Ändere im Text Hallo Welt zu Hallo Lea. Speichere mit Strg + S.
  5. Wechsle zum Browser und drücke Strg + R. Das lädt die Datei erneut.
So erkennst du, dass es klappt

Im Browser steht jetzt Hallo Lea. Du hast selbst eine Datei geändert, gespeichert und neu anzeigen lassen.

Wenn du hier nicht weiterkommst

Es bleibt beim alten Text? Prüfe, ob du gespeichert hast und ob Browser und VS Code dieselbe index.html im selben Ordner benutzen. Die lokal geöffnete Datei ist noch keine öffentliche Internetseite.

Ein Schritt weiter. Die passenden nächsten Anleitungen findest du unten.

Quellen & Stand

Quellenrecherche und Bearbeitungsstand: 30.10.2026. Eigene Beispiele dienen dem Lernen. Menüs können sich je nach Softwareversion unterscheiden. Diese Anleitungen wurden anhand der genannten Dokumentation erstellt; ein Praxistest aller Programme auf deinem Gerät ist damit nicht verbunden.