lehrkraefte:sbt:informatik-glf2-23:eigenestartseite [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This is an old revision of the document!

Öffne das Windows Terminal (Command)
Lege in das Verzeichnis c:\informatik\Projekte\Startseite\ an
Wechsle in dieses Verzeichnis
Starte Visual Studio Code in diesem Verzeichnis. Durch den . als Argument teilst du Code mit, dass es das aktuelle Verzeichnis als Arbeitsverezichnis verwenden soll.
code .

Neue Datei am aktuellen Verzeichnis anlegen (Namensvorschlag home.html).
Das HTML-Grundgerüst kann per !+Enter erzeugen - dafür muss die Datei die 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).

Lerne mit Hilfe von https://www.w3schools.com/tags/tag_details.asp, wie man eine Ausklappbox definiert.

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”.

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

“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>

Im <head>…</head> Bereich einer html-Seite kann man Styles definieren. Z.B:

li {
  color: #ff3333;
}

“Lösungsvorschlag”

startseite.css

<style>
    * {
      color: #0e50a7;
      line-height: 1.4em;
    }
 
    a {
      text-decoration: none;
      border: solid;
      border-color: #efefef;
      background-color: #efefef;
      border-radius: 5px;
    }
 
    a:hover {
      border-color: #0e50a7;
    }
 
    details>summary {
      padding: 4px;
      width: 200px;
      background-color: #eeeeee;
      border: none;
      box-shadow: 1px 1px 2px #bbbbbb;
      cursor: pointer;
    }
 
    details>p {
      background-color: #eeeeee;
      padding: 4px;
      margin: 0;
      box-shadow: 1px 1px 2px #bbbbbb;
    }
  </style>

¹⁾

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.

²⁾

Ich konnte zuerst die Start-Seite nicht ändern: Nach “Menü”→“Settings”→“Reset Settings” klappte es dann.

Vorbereitung

Erstellen einer HTML-Seite

Bonus: Ausklappboxen

Start- oder Home-Seite im Browser festlegen

Beispiel-Startseite

Beispiel-Styles für die Startseite mit Ausklappboxen

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