Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite
Vorbereitungen
Im Windows-Explorer (= Datei-Explorer = üblicher Datei-Manager unter Windows):
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”.
1)
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:
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
Start- oder Home-Seite im Browser festlegen
Mache die gerade erstellte HTML-Seite zur Start- oder Home-Seite deines Browsers2)
Im Browser “Edge” geht das wie folgt:3)
Kopiere den Inhalt der Adress-Seite in die Zwischenablage (Clipboard); das ist die
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
- 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>