lehrkraefte:snr:informatik:glf22:html-startseite

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
lehrkraefte:snr:informatik:glf22:html-startseite [2023/08/15 11:09] – [Erstellen einer HTML-Seite] Olaf Schnürerlehrkraefte:snr:informatik:glf22:html-startseite [2025/08/15 09:18] (current) – [Vorbereitungen] Olaf Schnürer
Line 1: Line 1:
 +~~NOTOC~~
 +
 +====== Vorbereitungen, Installation von Visual Studio Code und Python, 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|}}
 + 
 +  * Informatik-Verzeichnis samt Unterverzeichnissen erstellen: Gehe im Datei-Manager (via "Dieser PC", "This PC") ins Verzeichnis (= in den folder) ''C:\Users\Vorname.Nachname'' (oder ''C:\Benutzer\Vorname.Nachname'' oder ähnliches): Erstelle dort ein Verzeichnis mit dem Namen "informatik" und darin zwei Unterverzeichnisse mit den Namen "websites" 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") und von Python ===== 
 +
 +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.
 +
 +Installieren Sie vom Windows Apps Microsoft Store
 +  * Visual Studio Code (nicht Insider)
 +  * Python (neueste Version, nicht RC (release candidate))
 +
 +<!--  * 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 ''websites'').
 +  * Wie man eine neue Datei anlegt (Namensvorschlag ''meine-startseite.html''). 
 +  * Falls VS Code die Installation von "extensions" (=Erweiterungen) wie "HTML CSS Support", "Live Server", etc. vorgeschlägt: zustimmen!
 +  * Extensions installieren: HTML and CSS support, Python, Live Server
 +  * 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'' (oder im Menü: ''File'', ''Save'' oder ''Save as'').
 +  * Anzeigen der Webseite in einem Browser: 
 +    * Falls Extension "Live Server" installiert: Starte den "Live Server" per Mausklick auf "Go Live" rechts unten im VS-Code-Fenster. Daraufhin sollte sich ein Webbrowser öffnen, der deine Seite anzeigt. Vorteil: Bei jedem Abspeichern des html-Dokuments (etwa per ''Ctrl+s'') wird die Seite direkt im Browser aktualisiert.
 +    * Alternativ kannst du aus dem Datei-Manager jede html-Datei durch Anklicken öffnen (eventuell rechte Maustaste, "Öffnen mit"/"Open with" und den gewünschten Browser 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".
 +    * Um die richtige Adresse herauszufinden: Öffne deine HTML-Datei aus dem Datei-Manager (eventuell mit rechter Maustaste) mit einem Browser. Im Adressfeld steht dann die korrekte Adresse.
 +
 +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>
 +
 +