Differences

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

--- lehrkraefte:snr:informatik:glf22:html-startseite [2022/08/16 11:03]
Olaf Schnürer [Erstellen einer HTML-Seite (als Startseite mit Lieblingslinks)]
+++ lehrkraefte:snr:informatik:glf22:html-startseite [2023/08/15 13:40] (current)
Olaf Schnürer [Vorbereitungen]
@@ Line 7: / Line 7: @@
 Im Windows-Explorer (= Datei-Explorer = üblicher Datei-Manager unter Windows):
-  * Datei-Erweiterungen (= file extensions) anzeigen lassen (unter Menüpunkt ''View''/''Ansicht'' entsprechenden Haken setzen): {{:lehrkraefte:snr:informatik:glf22:explorer-file-extensions.png?600|}}
+  * 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.))
-  * Gehe ins Verzeichnis (= in den folder) ''C:\Users\Olaf.Schnuerer'' (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") =====
@@ Line 20: / Line 23: @@
-===== Erstellen einer HTML-Seite (als Startseite mit Lieblingslinks) =====
+===== 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 Folder in VS Code öffnet (wir öffnen das zuvor erstelle Verzeichnis ''html'').
+  * 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 ''!''+''Return'') - dafür muss die Datei die richtige Endung ''html'' haben (beachte Syntax-Highlighting).
+  * 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'')
@@ Line 41: / Line 44: @@
 Anzeigen lassen: Im Explorer Datei suchen, dann anklicken (evtl. "Öffnen mit"/"Open with" und dann Edge auswählen).
-Mache die gerade erstellte HTML-Seite zur Startseite((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.)) (bei mir klappt das nicht... Ich kann sie aber wenigstens zur Home-Seite machen):
+==== 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.
-  * Folge der Anleitung https://support.microsoft.com/en-us/microsoft-edge/change-your-browser-home-page-a531e1b8-ed54-d057-0262-cc5983a065c6
+  * Ö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 ====
@@ Line 62: / Line 78: @@
     <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:glf22">DokuWiki</a>
+            <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>
@@ Line 81: / Line 101: @@
         <li>
             Wetter:
-            <a href="https://www.meteoschweiz.admin.ch/home.html?tab=overview">Meteo-Schweiz</a>
+            <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>,
+            <a href="https://www.sbb.ch/de" target="_blank">SBB</a>
-            <a href="https://map.geo.admin.ch/?lang=de">Swiss-Topo</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>