lehrkraefte:sbt:informatik-glf2-23:eigenestartseite

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:sbt:informatik-glf2-23:eigenestartseite [2023/09/01 07:45] – [Beispiel-Styles für die Startseite] Karlheinz Schubertlehrkraefte:sbt:informatik-glf2-23:eigenestartseite [2023/09/01 13:39] (current) – [Beispiel-Startseite] Karlheinz Schubert
Line 1: Line 1:
 +~~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 ''<body>''-Tag Listen:
 +<code html>
 +   <ul>
 +        <li>
 +            Ksbg            
 +        </li>   
 +        <li>
 +            SBB            
 +        </li>     
 +    </ul>
 +</code>
 +
 +und Anchor ''<a>''-Tags:
 +<code html>
 +   <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>
 +</code>
 +
 +<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>
 +            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>
 +
 +
 +==== 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 ===
 +
 +<hidden "Lösungsvorschlag">
 +<code html startseite.html>
 +<!DOCTYPE html>
 +<html>
 +
 +<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">
 +  <base target="_blank">
 +  <title>Paul</title>
 +  <style></style>
 +</head>
 +
 +<body>
 +  <h1>Pauls Startseite</h1>
 +  <details>
 +    <summary>
 +      KSBG
 +    </summary>
 +    <p>
 +
 +    <ul>
 +      <li>
 +        <a href="https://www.ksbg.ch/">KBSG</a>
 +      </li>
 +      <li>
 +        <a href="https://www.ksbg.ch/interner-bereich/informationen/aktuelle-mitteilungen/">i-KBSG</a>
 +      </li>
 +      <li>
 +        <a href="https://www.ksbg.ch/infopoint/dokumentedownloads/#c494">Dokumente/Downloads
 +          KBSG</a>
 +      </li>
 +      <li>
 +        <a href="https://ksbg.nesa-sg.ch/">Nesa KSBG</a>
 +      </li>
 +      <li>
 +        <a href="https://bldsg.sharepoint.com/sites/cl03-ksbg/SitePages/Home.aspx?wa=wsignin1.0">sp.KBSG</a>
 +      </li>
 +      <li>
 +        <a href="https://bldsg.sharepoint.com/_layouts/15/sharepoint.aspx?">SharePoint</a>
 +      </li>
 +      <li>
 +        <a href="https://owa.ksbg.ch/owa">E-Mail - Max.Muster@ksbg.ch</a>
 +      </li>
 +      <li>
 +        <a
 +          href="https://www.ksbg.ch/fileadmin/kundendaten/Infopoint/Dokumente_und_Downloads/Stundenplaene/2021-22/Fachkuerzel.pdf">Fachkuerzel.pdf</a>
 +      </li>
 +      <li>
 +        <a
 +          href="https://www.sg.ch/bildung-sport/mittelschule/lehrplaene-und-stundentafeln/gymnasium/_jcr_content/Par/sgch_accordion_list/AccordionListPar/sgch_accordion/AccordionPar/sgch_downloadlist/DownloadListPar/sgch_download_1653591290.ocFile/ER18-080%20Lehrplan%20Informatik_Beilage.pdf">Lehrplan
 +          WMS/WMI Kanton St.Gallen - ER18-080 Lehrplan Informatik_Beilage.pdf</a>
 +      </li>
 +    </ul>
 +    </p>
 +  </details>
 +
 +  <details>
 +    <summary>
 +      Schulprojekte
 +    </summary>
 +    <ul>
 +      <li>
 +        <a href="https://www.lokalhelden.ch/artenvielfalt">Ost-Schweizer Artenvielfalt schützen und
 +          fördern - ein Schülerprojekt - Lokalhelden.ch - Crowdfunding Plattform von Raiffeisen
 +          Schweiz</a>
 +      </li>
 +      <li>
 +        <a href="https://www.st-galler-nachrichten.ch/st-gallen/detail/article/nachhaltige-tragtaschen-seifen-und-trinkhalme-00210022/">St.Galler
 +          Nachrichten - Nachhaltige Tragtaschen, Seifen und Trinkhalme</a>
 +      </li>
 +      <li>
 +        <a href="https://sg.easylearn.ch/home">easylearn - Kanton St. Gallen</a>
 +      </li>
 +      <li>
 +        <a href="https://tech-lab.ch/dokuwiki/doku.php?id=techlab:formi-kurs-iot-co2anzeige">techlab:iot-co2anzeige</a>
 +      </li>
 +      <li>
 +        <a href="https://github.com/techlabksbg/schulzimmer-wetterstation/tree/master/wetterstation-lora-wan">schulzimmer-wetterstation
 +          · GitHub</a>
 +      </li>
 +      <li>
 +        <a href="https://kantilive.ch/">Gebed eu d&#39;Kanti</a>
 +      </li>
 +    </ul>
 +  </details>
 +</body>
 +
 +</html>
 +</code>
 +</hidden>
 +
 +=== Beispiel-Styles für die Startseite mit Ausklappboxen ===
 +
 +Im ''<head>...</head>'' Bereich einer html-Seite kann man Styles definieren. Z.B:
 +<code css>
 +li {
 +  color: #ff3333;
 +}
 + </code>
 +
 +<hidden "Lösungsvorschlag">
 +<code css startseite.css>
 +<style>
 +    * {
 +      color: #0e50a7;
 +      line-height: 1.4em;
 +    }
 +
 +    a {
 +      text-decoration: none;
 +      border: solid;
 +      border-color: #efefef;
 +      background-color: #efefef;
 +      border-radius: 5px;
 +    }
 +
 +    a:hover {
 +      border-color: #0e50a7;
 +    }
 +
 +    details>summary {
 +      padding: 4px;
 +      width: 200px;
 +      background-color: #eeeeee;
 +      border: none;
 +      box-shadow: 1px 1px 2px #bbbbbb;
 +      cursor: pointer;
 +    }
 +
 +    details>p {
 +      background-color: #eeeeee;
 +      padding: 4px;
 +      margin: 0;
 +      box-shadow: 1px 1px 2px #bbbbbb;
 +    }
 +  </style>
 +</code>
 +</hidden>