Differences

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

--- lehrkraefte:snr:informatik:glf22:html-startseite [2025/08/14 06:35] – [Link zur Kursseite] Olaf Schnürer
+++ lehrkraefte: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, Erstellen einer HTML-Startseite ======
+====== Vorbereitungen, Installation von Visual Studio Code und Python, Erstellen einer HTML-Startseite ======
 ===== Vorbereitungen =====
@@ Line 11: / Line 11: @@
     * 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 "websites" und "python".((Allgemeine Empfehlung: Verwende keine Leerzeichen und keine Sonderzeichen in den Namen von Dateien oder Verzeichnissen.))
+  * 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") =====
+===== 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.
-Installiere diesen Editor <!--auf eine der beiden folgenden Weisen:-->
+Installieren Sie vom Windows Apps Microsoft Store
-  * über den Microsoft Store.
+  * Visual Studio Code (nicht Insider)
+  * Python (neueste Version, nicht RC (release candidate))
 <!--  * per Download von https://code.visualstudio.com/Download -->
@@ Line 28: / Line 30: @@
 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 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'')
@@ Line 39: / Line 43: @@
   * 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).
-Abspeichern mit ''Ctrl+s''.
-Anzeigen lassen: Im Explorer Datei suchen, dann anklicken (evtl. "Öffnen mit"/"Open with" und dann Edge auswählen).
@@ Line 58: / Line 63: @@
   * 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.