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 Arbeitsverzeichnis verwenden soll.
code .
Erstellen einer HTML-Seite
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).
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
Verwendet für eure Startseite im <body>
-Tag Listen:
<ul>
<li>
Ksbg
</li>
<li>
SBB
</li>
</ul>
und Anchor <a>
-Tags:
<ul>
<li>
Schule: <a href="https://www.ksbg.ch/gymnasium">KSGB</a>
</li>
<li>
Reise: <a href="https://www.sbb.ch/de" target="_blank">SBB</a>
</li>
</ul>
- 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>
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>
Bonus: Ausklappboxen
Beispiel für die Startseite mit Ausklappboxen
- startseite.html
<!DOCTYPE html>
<html>
<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">
<base target="_blank">
<title>Paul</title>
<style></style>
</head>
<body>
<h1>Pauls Startseite</h1>
<details>
<summary>
KSBG
</summary>
<p>
<ul>
<li>
<a href="https://www.ksbg.ch/">KBSG</a>
</li>
<li>
<a href="https://www.ksbg.ch/interner-bereich/informationen/aktuelle-mitteilungen/">i-KBSG</a>
</li>
<li>
<a href="https://www.ksbg.ch/infopoint/dokumentedownloads/#c494">Dokumente/Downloads
KBSG</a>
</li>
<li>
<a href="https://ksbg.nesa-sg.ch/">Nesa KSBG</a>
</li>
<li>
<a href="https://bldsg.sharepoint.com/sites/cl03-ksbg/SitePages/Home.aspx?wa=wsignin1.0">sp.KBSG</a>
</li>
<li>
<a href="https://bldsg.sharepoint.com/_layouts/15/sharepoint.aspx?">SharePoint</a>
</li>
<li>
<a href="https://owa.ksbg.ch/owa">E-Mail - Max.Muster@ksbg.ch</a>
</li>
<li>
<a
href="https://www.ksbg.ch/fileadmin/kundendaten/Infopoint/Dokumente_und_Downloads/Stundenplaene/2021-22/Fachkuerzel.pdf">Fachkuerzel.pdf</a>
</li>
<li>
<a
href="https://www.sg.ch/bildung-sport/mittelschule/lehrplaene-und-stundentafeln/gymnasium/_jcr_content/Par/sgch_accordion_list/AccordionListPar/sgch_accordion/AccordionPar/sgch_downloadlist/DownloadListPar/sgch_download_1653591290.ocFile/ER18-080%20Lehrplan%20Informatik_Beilage.pdf">Lehrplan
WMS/WMI Kanton St.Gallen - ER18-080 Lehrplan Informatik_Beilage.pdf</a>
</li>
</ul>
</p>
</details>
<details>
<summary>
Schulprojekte
</summary>
<ul>
<li>
<a href="https://www.lokalhelden.ch/artenvielfalt">Ost-Schweizer Artenvielfalt schützen und
fördern - ein Schülerprojekt - Lokalhelden.ch - Crowdfunding Plattform von Raiffeisen
Schweiz</a>
</li>
<li>
<a href="https://www.st-galler-nachrichten.ch/st-gallen/detail/article/nachhaltige-tragtaschen-seifen-und-trinkhalme-00210022/">St.Galler
Nachrichten - Nachhaltige Tragtaschen, Seifen und Trinkhalme</a>
</li>
<li>
<a href="https://sg.easylearn.ch/home">easylearn - Kanton St. Gallen</a>
</li>
<li>
<a href="https://tech-lab.ch/dokuwiki/doku.php?id=techlab:formi-kurs-iot-co2anzeige">techlab:iot-co2anzeige</a>
</li>
<li>
<a href="https://github.com/techlabksbg/schulzimmer-wetterstation/tree/master/wetterstation-lora-wan">schulzimmer-wetterstation
· GitHub</a>
</li>
<li>
<a href="https://kantilive.ch/">Gebed eu d'Kanti</a>
</li>
</ul>
</details>
</body>
</html>
Beispiel-Styles für die Startseite mit Ausklappboxen
Im <head>…</head>
Bereich einer html-Seite kann man Styles definieren. Z.B:
li {
color: #ff3333;
}
- 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>