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 [2025/08/14 06:42] – [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~~ ~~NOTOC~~
  
-====== Vorbereitungen, Installation von Visual Studio Code, Erstellen einer HTML-Startseite ======+====== Vorbereitungen, Installation von Visual Studio Code und Python, Erstellen einer HTML-Startseite ======
  
 ===== Vorbereitungen ===== ===== Vorbereitungen =====
Line 11: Line 11:
     * Windows 10: unter Menüpunkt ''View''/''Ansicht'' entsprechenden Haken setzen: {{:lehrkraefte:snr:informatik:glf22:explorer-file-extensions.png?600|}}     * 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. 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 --> <!--  * 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: 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'').    * 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!   * 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).   * 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'')   * Sprache setzen (per ''de'' oder ''de-CH'')
Line 60: Line 63:
   * Klicke links auf "Start, home, new tabs".   * Klicke links auf "Start, home, new tabs".
   * Die Startseite kann man nun unter "When Edge starts" ändern, die Home-Seite unter "Home button".   * 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. Wenn du einen anderen Browser (etwa Firefox, Chrome, ...) verwendest: Suche im Internet, wie man die Start- bzw. Home-Seite ändert.
  • lehrkraefte/snr/informatik/glf22/html-startseite.1755153729.txt.gz
  • Last modified: 2025/08/14 06:42
  • by Olaf Schnürer