~~NOTOC~~ ====== Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite ====== ===== Vorbereitungen ===== Im Windows-Explorer (= Datei-Explorer = üblicher Datei-Manager unter Windows): * Datei-Erweiterungen (= file extensions) anzeigen lassen * Windows 11: Menüpunkt ''View''/''Ansicht'', dort ''Show'', dann Haken entsprechend setzen. * Windows 10: unter Menüpunkt ''View''/''Ansicht'' entsprechenden Haken setzen: {{:lehrkraefte:snr:informatik:glf22:explorer-file-extensions.png?600|}} * Gehe ins Verzeichnis (= in den folder) ''C:\Users\Vorname.Nachname'' (oder ''C:\Benutzer\Vorname.Nachname'' oder ähnliches) (unter ''This PC''/''Dieser PC''): Erstelle dort ein Verzeichnis mit dem Namen "informatik" und darin zwei Unterverzeichnisse mit den Namen "html" und "python".((Allgemeine Empfehlung: Verwende keine Leerzeichen und keine Sonderzeichen in den Namen von Dateien oder Verzeichnissen.)) ===== Installation von Visual Studio Code (oder kurz "VS Code" oder schlicht "Code") ===== Visual Studio Code ist ein weit verbreiteter und moderner Editor, der sich sehr gut zum Schreiben von Computer-Programmen (etwa in Python) und Webseiten (in HTML und CSS) eignet, vgl. https://de.wikipedia.org/wiki/Visual_Studio_Code. Installiere diesen Editor auf eine der beiden folgenden Weisen: * über den Microsoft Store * per Download von https://code.visualstudio.com/Download ===== Erstellen einer HTML-Seite ===== Öffne Visual Studio Code. Wir erstellen gemeinsam eine HTML-Seite mit VS Code. Insbesondere erkläre ich: * Wie man ein Verzeichnis/einen Folder/einen Ordner in VS Code öffnet (wir öffnen das zuvor erstellte Verzeichnis ''html''). * Wie man eine neue Datei anlegt (Namensvorschlag ''meine-startseite.html''). * Wie man das HTML-Grundgerüst bekommt (per ''!''+''Enter'') - dafür muss die Datei die richtige 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). ==== 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 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 ==== Meine Startseite

Meine Lieblingslinks

Schule

Freizeit

Karten (bitte anklicken, Ausklappbox! Lösung der Bonusaufgabe)
===== Link zur Kursseite ===== [[lehrkraefte:snr:informatik:glf22|Zur Kursseite]]