lehrkraefte:snr:informatik:glf22:html-startseite

Vorbereitungen

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

Datei-Erweiterungen (= file extensions) anzeigen lassen
- Windows 11: Menüpunkt View/Ansicht, dort Show, dann Haken entsprechend setzen.
- Windows 10: unter Menüpunkt View/Ansicht entsprechenden Haken setzen:

Informatik-Verzeichnis samt Unterverzeichnissen erstellen: Gehe im Datei-Manager (via “Dieser PC”, “This PC”) ins Verzeichnis (= in den folder) C:\Users\Vorname.Nachname (oder C:\Benutzer\Vorname.Nachname oder ähnliches): Erstelle dort ein Verzeichnis mit dem Namen “informatik” und darin zwei Unterverzeichnisse mit den Namen “websites” und “python”.¹⁾

Installation von Visual Studio Code (oder kurz "VS Code" oder schlicht "Code") und von 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.

Installieren Sie vom Windows Apps Microsoft Store

Visual Studio Code (nicht Insider)
Python (neueste Version, nicht RC (release candidate))

Erstellen einer HTML-Seite

Öffne Visual Studio Code.

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

Wie man ein Verzeichnis/einen Folder/einen Ordner in VS Code öffnet (wir öffnen das zuvor erstellte Verzeichnis websites).
Wie man eine neue Datei anlegt (Namensvorschlag meine-startseite.html).
Falls VS Code die Installation von “extensions” (=Erweiterungen) wie “HTML CSS Support”, “Live Server”, etc. vorgeschlägt: zustimmen!
Extensions installieren: HTML and CSS support, Python, Live Server
Wie man das HTML-Grundgerüst bekommt (per !+Enter) - 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 (oder im Menü: File, Save oder Save as).
Anzeigen der Webseite in einem Browser:
- Falls Extension “Live Server” installiert: Starte den “Live Server” per Mausklick auf “Go Live” rechts unten im VS-Code-Fenster. Daraufhin sollte sich ein Webbrowser öffnen, der deine Seite anzeigt. Vorteil: Bei jedem Abspeichern des html-Dokuments (etwa per Ctrl+s) wird die Seite direkt im Browser aktualisiert.
- Alternativ kannst du aus dem Datei-Manager jede html-Datei durch Anklicken öffnen (eventuell rechte Maustaste, “Öffnen mit”/“Open with” und den gewünschten Browser auswählen).

Bonus: Ausklappboxen

Start- oder Home-Seite im Browser festlegen

Mache die gerade erstellte HTML-Seite zur Start- oder Home-Seite deines Browsers²⁾

Im Browser “Edge” geht das wie folgt:³⁾

Kopiere den Inhalt der Adress-Seite in die Zwischenablage (Clipboard); das ist die URL, die du im nächsten Schritt benötigst.
Öffne das Menü von Edge (die drei waagerechten Punkte rechts oben anklicken), klicke dann auf Settings (Zahnrad-Icon).
Klicke links auf “Start, home, new tabs”.
Die Startseite kann man nun unter “When Edge starts” ändern, die Home-Seite unter “Home button”.
- Um die richtige Adresse herauszufinden: Öffne deine HTML-Datei aus dem Datei-Manager (eventuell mit rechter Maustaste) mit einem Browser. Im Adressfeld steht dann die korrekte Adresse.

Wenn du einen anderen Browser (etwa Firefox, Chrome, …) verwendest: Suche im Internet, wie man die Start- bzw. Home-Seite ändert.

Beispiel-Startseite

“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>
            <a href="https://www.ksbg.ch/gymnasium">KSGB</a>
        </li>
        <li>
            Informatik: 
            <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf23">DokuWiki</a>
        </li>
        <li>
            Mathematik: 
            <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:mathematik:klasse-3:2023-24">DokuWiki 3. Jahr</a>,
            <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/lokalprognose/st-gallen/9000.html#forecast-tab=detail-view">Meteo-Schweiz, Vorhersage St. Gallen</a>
        </li>
        <li>
            Reisen:
            <a href="https://www.sbb.ch/de" target="_blank">SBB</a>
        </li>
    </ul>
 
    <details>
        <summary>Karten (bitte anklicken, Ausklappbox! Lösung der Bonusaufgabe)</summary>
        <ul>
            <li>
                <a href="https://www.openstreetmap.org/search?query=st.%20gallen#map=10/47.4241/9.3634">OSM = OpenStreetMap</a>
            </li>
            <li>
                <a href="https://map.schweizmobil.ch/?lang=de&photos=yes&bgLayer=pk&logo=yes&season=summer&resolution=20&E=2742809&N=1255125" target="_blank">Schweiz mobil</a>, <a href="https://schweizmobil.ch/de/legende">Legende dazu</a>
            </li>
            <li>
                <a href="https://map.geo.admin.ch/?lang=de">Swiss-Topo</a>
            </li>
        </ul>
    </details>
</body>
</html>

¹⁾

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.

³⁾