Wiki: Mathe und Info

Unterrichtsmaterialien für Mathematik und Informatik

Benutzer-Werkzeuge

Webseiten-Werkzeuge


info:sek-i:9:internet:l1-editor-vscode

Der HTML-Editor Visual Studio Code

Aufgabe 1: Visual Studio Code herunterladen & installieren.

Ladet euch von der Seite https://code.visualstudio.com/ den aktuellsten Installer herunter.

Klickt anschließend auf "Speichern". Startet danach den heruntergeladenen Installer und installiert so Visual Studio Code. Lasst alle Einstellungen so, wie sie vorgegeben sind.

Aufgabe 2: Ordnerstruktur & erste HTML-Datei erstellen

Zuerst müsst ihr einen Ordner auswählen, indem ihr alles erstellt:

  1. Hierzu klickt ihr auf dem Willkommens-Bildschirm auf Open Folder,
  2. navigiert zu euren eigenen Dateien,
  3. macht euch einen neuen Ordner, in dem ihr alle HTML-Sachen für Informatik speichern wollt
  4. und wählt diesen aus.
Anschließend macht ihr folgendes:
  1. Erstellt einen neuen Ordner mit dem Namen "Lektion1",
  2. klickt diesen an und erstellt darin einen neuen Ordner mit dem Namen "Aufgabe1",
  3. erstellt darin eine Datei "index.html"
  4. tippt den HTML-Code aus dem Video ab
  5. Drückt Strg+S zum speichern.
Aufgabe 3: Server-Plugin installieren & Website ausprobieren

Um eure gerade in Aufgabe 2 erstellte Datei auch ausprobieren zu können, müsst ihr noch ein Plugin installieren:

  1. Klickt auf den Plugin-Manager links.
  2. Sucht nach dem Plugin "Live Server".
  3. Klickt auf installieren.

Wenn ihr das gemacht habt, wechselt wieder zu eurer Datei "index.html".

  1. Unten rechts ist jetzt ein Knopf "Go Live" erschienen.
  2. Wenn ihr diesen drückt, wird automatisch euer Browser geöffnet, der euch die Datei anzeigt.
info/sek-i/9/internet/l1-editor-vscode.txt · Zuletzt geändert: 2022-10-25 13:59 von christian.weber