~~NOTOC~~ ===== 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'').{{ :lehrkraefte:sbt:informatik-glf2-23:screenshot_2023-09-01_090758.png?300 |}} * 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 Browsers((Wenn du das nicht machen willst: Setze zumindest eine Bookmark auf die Informatik Seite [[lehrkraefte:snr:informatik:glf22:|lehrkraefte:snr:informatik:glf22]]. Ich habe keine Lust, am Anfang der Lektion 5 Minuten zu warten, bis alle die Seite gefunden haben.)) Im Browser "Edge" geht das wie folgt:((Ich konnte zuerst die Start-Seite nicht ändern: Nach "Menü"->"Settings"->"Reset Settings" klappte es dann.)) * Kopiere den Inhalt der Adress-Seite in die Zwischenablage (Clipboard); das ist die [[https://de.wikipedia.org/wiki/Uniform_Resource_Locator|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 ''''-Tag Listen: und Anchor ''''-Tags: Meine Startseite

Meine Lieblingslinks

Schule

Freizeit

Karten (bitte anklicken, Ausklappbox! Lösung der Bonusaufgabe)
==== 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 === Paul

Pauls Startseite

KSBG

Schulprojekte
=== Beispiel-Styles für die Startseite mit Ausklappboxen === Im ''...'' Bereich einer html-Seite kann man Styles definieren. Z.B: li { color: #ff3333; }