Differences

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

--- lehrkraefte:snr:informatik:glf23:html [2025/04/23 19:31] – [Aufgabe 1: HTML kennenlernen] Olaf Schnürer
+++ lehrkraefte:snr:informatik:glf23:html [2025/05/05 15:06] (current) – Olaf Schnürer
@@ Line 1: / Line 1: @@
 ~~NOTOC~~
+next time: explain style command that appears frequently on W3schools pages. content in css file.
 ===== 4.1 Einführung in HTML =====
@@ Line 17: / Line 19: @@
   * Öffne Visual Studio Code (und schliesse alle offenen Dateien).
   * Installiere die Extension/Erweiterung "HTML CSS Support" in Visual Studio Code wie folgt. Klicke (vgl. Screenshot) in der Symbolleiste links auf das Symbol "vier Quadrate" (Nummer 1 links unten im Screenshot). Dann im Suchfeld oben nach "html" suchen (2), auf die Extension "HTML CSS Support" klicken (3) und im Fenster rechts auf ''Install'' (4). In der Leiste links klicke auf das oberste Symbol (5) (Explorer).
-  * Installiere ausserdem die Extension "Live Server" (nicht im Screenshot erklärt).
 {{:lehrkraefte:snr:informatik:glf22:html-css:html-and-css-extension-mit-markierungen.png?nolink&800|}}
+  * Installiere die Extension "Live Server" in ähnlicher Weise.
   * Öffne den gerade erstellten Ordner ''meine-erste-html-seite'', z. B. über das Menü per ''File'' -> ''Open Folder'':
@@ Line 43: / Line 45: @@
 {{:lehrkraefte:snr:informatik:glf22:html-css:body.png?nolink&800|}}
-Einfacher: Installiere die Extension "Live Server" in VS Code. Starten des Live Servers per Mausklick rechts unten. Vorteil: Bei jedem Abspeichern wird die Seite direkt im Browser aktualisiert.
+  * Anzeigen der Webseite in einem Browser:
-<del>  * Speichere die Datei (etwa mit ''Ctrl+s'').
+    * Komfortabel: 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).
+<!--
+  * Speichere die Datei (etwa mit ''Ctrl+s'').
   * Öffen deine HTML-Datei ''index.html'' mit einem Browser, z.B. so: Finde die Datei in deinem Datei-Manager und öffne sie durch Anklicken; falls das nicht klappt, Datei mit rechter Maustaste anklicken, dann "Öffnen mit"/"Open with" und den gewünschten Browser, etwa Edge oder Firefox, auswählen.
-</del>
+-->
 </WRAP>
@@ Line 105: / Line 110: @@
 <WRAP center round todo>
-Hinweis: Wenn du deine HTML-Datei veränderst und dies im Browser sehen willst, musst du sie abspeichern (etwa per ''Ctrl+s'') und im Browser einen "reload" durchführen.
+Hinweis: Wenn du deine HTML-Datei veränderst und dies im Browser sehen willst, musst du sie abspeichern (etwa per ''Ctrl+s''); dank der Live-Server-Erweiterung wird die aktualisierte Datei sofort im Browser angezeigt (hat man die Datei aus dem Datei-Manager angezeigt, muss man einen "reload" durchführen).
   * Ergänze deine HTML-Datei um einen Link zu einer weiteren Webseite.