Differences

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

--- lehrkraefte:snr:informatik:glf23:html [2025/04/23 19:16] – [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 20: / Line 22: @@
 {{: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 28: / Line 31: @@
 {{:lehrkraefte:snr:informatik:glf22:html-css:erste-html-seite-new-file-mit-markierungen.png?nolink&400|}}
-  * Das Grundgerüst einer HTML-Datei bekommt man in VS Code am einfachsten wie folgt: Der Cursor muss im Fenster ''index.html'' sein (evtl. hineinklicken). Dort ''!'' eingeben und direkt danach ''Enter''. Nun sollte dein VS Code-Fenster etwa wie folgt aussehen.
+  * Das Grundgerüst einer HTML-Datei bekommt man in VS Code am einfachsten wie folgt: Der Cursor muss im Fenster ''index.html'' sein (evtl. hineinklicken). Dort ''!'' eingeben und direkt danach ''Enter''. Nun sollte dein VS Code-Fenster etwa wie folgt aussehen. (Mittlerweile fehlt die Zeile zwischen "charset" und "name".)
 {{:lehrkraefte:snr:informatik:glf22:html-css:html-geruest-mit-markierungen.png?nolink&800|}}
@@ Line 43: / Line 45: @@
 {{:lehrkraefte:snr:informatik:glf22:html-css:body.png?nolink&800|}}
+  * Anzeigen der Webseite in einem Browser:
+    * 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.
+-->
 </WRAP>
@@ Line 84: / Line 91: @@
 <WRAP center round important>
-Jede Information in einer HTML-Datei sollte "alleine" in einem HTML-Element enthalten sein: Beispielsweise wäre es schlechter Stil, den Text in Zeile 12 ohne start tag ''<p>'' in Zeile 11 und end tag ''</p>'' in Zeile 13 anzugeben (denn dann wäre dieser Text zusammen mit dem ''h1''-Element und anderen HTML-Elementen in dem HTML-Element ''body'').
+Jede Teil-Information in einer HTML-Datei sollte separat in einem HTML-Element enthalten sein: Beispielsweise wäre es schlechter Stil, den Text in Zeile 12 ohne start tag ''<p>'' in Zeile 11 und end tag ''</p>'' in Zeile 13 anzugeben (denn dann wäre dieser Text zusammen mit dem ''h1''-Element und anderen HTML-Elementen in dem HTML-Element ''body'').
 </WRAP>
 </WRAP>
@@ Line 103: / 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.
@@ Line 139: / Line 146: @@
 Der Begriff Hypertext wurde übrigens (meines Wissens) 1965 erstmalig von Ted Nelson verwendet:
-<WRAP center round box 80%>
+<WRAP center round box 100%>
 Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in
 such a complex way that it could not conveniently be presented or represented on paper.
@@ Line 159: / Line 166: @@
 Die Hauptseite eines Webauftritts (= einer Website) heisst standardmässig ''index.html''. Dies ist der Grund, dass du deine erste HTML-Seite in Aufgabe 1 so genannt hast.
-**Diesen Dateinamen solltest du auch für die Hauptseite deines Projektes verwenden.**
+**Diesen Dateinamen musst du auch für die Hauptseite deines Projektes verwenden.**
 </WRAP>