Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite

This is an old revision of the document!

Im Windows-Explorer (= Datei-Explorer = üblicher Datei-Manager unter Windows):

Datei-Erweiterungen (= file extensions) anzeigen lassen (unter Menüpunkt View/Ansicht entsprechenden Haken setzen):

Gehe ins Verzeichnis (= in den folder) C:\Users\Vorname.Nachname (oder C:\Benutzer\Vorname.Nachname oder ähnliches) (unter This PC/Dieser PC): Erstelle dort ein Verzeichnis mit dem Namen “informatik” und darin zwei Unterverzeichnisse mit den Namen “html” und “python”.¹⁾

Visual Studio Code ist ein weit verbreiteter und moderner Editor, der sich sehr gut zum Schreiben von Computer-Programmen (etwa in Python) und Webseiten (in HTML und CSS) eignet, vgl. https://de.wikipedia.org/wiki/Visual_Studio_Code.

Installiere diesen Editor auf eine der beiden folgenden Weisen:

über den Microsoft Store
per Download von https://code.visualstudio.com/Download

Öffne Visual Studio Code.

Wir erstellen gemeinsam eine HTML-Seite mit VS Code. Insbesondere erkläre ich:

Wie man ein Verzeichnis Folder in VS Code öffnet (wir öffnen das zuvor erstelle Verzeichnis html).
Wie man eine neue Datei anlegt (Namensvorschlag meine-startseite.html).
Wie man das HTML-Grundgerüst bekommt (per !+Return) - dafür muss die Datei die richtige Endung html haben (beachte Syntax-Highlighting).
Sprache setzen (per de oder de-CH)
Titel setzen (Meine Startseite)
h1-Überschrift (Meine Lieblingslinks) - erkläre VS Code-Unterstützung (Syntaxvervollständigung)
h2-Überschrift (Schule, später Freizeit etc.)
unordered list (per ul)
list items (per li), etwa Informatik, Mathematik, Englisch
Links (per a, dann a:link auswählen); Benennung nicht vergessen! z. B. auf DokuWiki-Seite oder Sharepoint
Dann “Freizeit”, etwa “Wetter”, “Reisen”, etc. (evtl. target=“_blank”)

Abspeichern mit Ctrl+s.

Anzeigen lassen: Im Explorer Datei suchen, dann anklicken (evtl. “Öffnen mit”/“Open with” und dann Edge auswählen).

Mache die gerade erstellte HTML-Seite zur Startseite²⁾ (bei mir klappt das nicht… Ich kann sie aber wenigstens zur Home-Seite machen):

Kopiere den Inhalt der Adress-Seite in die Zwischenablage (Clipboard); das ist die URL, die du im nächsten Schritt benötigst.
Folge der Anleitung https://support.microsoft.com/en-us/microsoft-edge/change-your-browser-home-page-a531e1b8-ed54-d057-0262-cc5983a065c6

“Lösungsvorschlag”

startseite.html

<!DOCTYPE html>
<html lang="de-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Startseite</title>
</head>
<body>
    <h1>Meine Lieblingslinks</h1>
 
    <h2>Schule</h2>
    <ul>
        <li>
            Informatik: 
            <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf22">DokuWiki</a>
        </li>
        <li>
            Mathematik: 
            <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:mathematik:klasse-2:2022-23">DokuWiki 2. Jahr</a>,
            <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:mathematik:klasse-1:2021-22">DokuWiki 1. Jahr</a>
        </li>  
        <li>
            Englisch: 
            <a href="">Sharepoint (Web-Adresse zu ergänzen)</a>
        </li>      
    </ul>
 
    <h2>Freizeit</h2>
    <ul>
        <li>
            Wetter:
            <a href="https://www.meteoschweiz.admin.ch/home.html?tab=overview">Meteo-Schweiz</a>
        </li>
        <li>
            Reisen:
            <a href="https://www.sbb.ch/de" target="_blank">SBB</a>,
            <a href="https://map.geo.admin.ch/?lang=de">Swiss-Topo</a>
        </li>
    </ul>
</body>
</html>

Zur Kursseite

¹⁾

Allgemeine Empfehlung: Verwende keine Leerzeichen und keine Sonderzeichen in den Namen von Dateien oder Verzeichnissen.

²⁾

Wenn du das nicht machen willst: Setze zumindest eine Bookmark auf die Informatik Seite lehrkraefte:snr:informatik:glf22. Ich habe keine Lust, am Anfang der Lektion 5 Minuten zu warten, bis alle die Seite gefunden haben.

Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite

Vorbereitungen

Installation von Visual Studio Code (oder kurz "VS Code" oder schlicht "Code")

Erstellen einer HTML-Seite (als Startseite mit Lieblingslinks)

Beispiel-Startseite

Link zur Kursseite

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG