This is an old revision of the document!
Vorbereitung
- Ö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 .
Erstellen einer HTML-Seite
- Neue Datei am aktuellen Verzeichnis anlegen (Namensvorschlag
home.html).
}}
* Das HTML-Grundgerüst kann per !+Entererzeugen - dafür muss die Datei die richtige Endunghtmlhaben (beachte Syntax-Highlighting). * Sprache setzen (perdeoderde-CH) * Titel setzen (Meine Startseite) *h1-Überschrift (Meine Lieblingslinks) - erkläre VS Code-Unterstützung (Syntaxvervollständigung) *h2-Überschrift (Schule, späterFreizeitetc.) * unordered list (perul) * list items (perli), etwa Informatik, Mathematik, Englisch * Links (pera, danna:linkauswählen); Benennung nicht vergessen! z. B. auf DokuWiki-Seite oder Sharepoint * Dann “Freizeit”, etwa “Wetter”, “Reisen”, etc. (evtl.target=“_blank”) Abspeichern mitCtrl+s. Anzeigen lassen: Im Explorer Datei suchen, dann anklicken (evtl. “Öffnen mit”/“Open with” und dann Edge auswählen). ==== Bonus: Ausklappboxen ==== Lerne mit Hilfe von https://www.w3schools.com/tags/tag_details.asp, wie man eine Ausklappbox definiert. ===== Start- oder Home-Seite im Browser festlegen ===== Mache die gerade erstellte HTML-Seite zur Start- oder Home-Seite deines Browsers1) Im Browser “Edge” geht das wie folgt:2) * 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. ==== Beispiel-Startseite ==== <hidden “Lösungsvorschlag”> <code html 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> </code> </hidden> ===== Link zur Kursseite ===== Zur Kursseite
1)
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.
2)
Ich konnte zuerst die Start-Seite nicht ändern: Nach “Menü”→“Settings”→“Reset Settings” klappte es dann.