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
- Das HTML-Grundgerüst kann per
!
+Enter
erzeugen - dafür muss die Datei die Endunghtml
haben (beachte Syntax-Highlighting). - Sprache setzen (per
de
oderde-CH
) - Titel setzen (
Meine Startseite
) h1
-Überschrift (Meine Lieblingslinks
) - erkläre VS Code-Unterstützung (Syntaxvervollständigung)h2
-Überschrift (Schule
, späterFreizeit
etc.)- unordered list (per
ul
) - list items (per
li
), etwa Informatik, Mathematik, Englisch - Links (per
a
, danna: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>
Bonus: Ausklappboxen
Lerne mit Hilfe von https://www.w3schools.com/tags/tag_details.asp, wie man eine Ausklappbox definiert.
Beispiel für die Startseite mit Ausklappboxen
Beispiel-Styles für die Startseite mit Ausklappboxen
Im <head>…</head>
Bereich einer html-Seite kann man Styles definieren. Z.B:
li { color: #ff3333; }
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.