Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2023:hello-html [2023/02/01 11:26]
Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg1-2023:hello-html [2023/02/07 12:41] (current)
Ivo Blöchliger [Hello World in HTML, CSS, JavaScript]
@@ Line 1: / Line 1: @@
+{{backlinks>.}}
 ====== Hello World in HTML, CSS, JavaScript ======
+<WRAP center round tip 60%>
+Zu dieser Lerneinheit gibt es einen [[https://fginfo.ksbg.ch/~ivo/videos/informatik/ffprog23/01-hello-world-html-css-js.mp4|Screencast]], oder auch auf [[https://bldsg-my.sharepoint.com/:v:/g/personal/ivo_bloechliger_ksbg_ch/EeO_XhfTrUpEhnbQFzAP3rsBosErkXDGBoD4VJ65rD2vSg?e=c5jj7X|Sharepoint]].
+</WRAP>
 <WRAP todo>
@@ Line 20: / Line 26: @@
 </html>
 </code>
+  * Hinweis: Wenn Sie in Visual Studio Code in einer leeren .html-Datei ein ''!'' eingeben, wird eine komplette leere Seite angelegt.
   * Speichern Sie die Datei ''Ctrl-S''.
   * Wechseln Sie zur Kommandozeile zurück und geben Sie ''start hello.html'' ein, um die Seite im Browser zu öffnen.
@@ Line 27: / Line 34: @@
 Aber bitte mit Stil! Wir fügen eine CSS-Datei hinzu, die beschreibt, wie Dinge auf der Seite formatiert und dargestellt werden sollen:
 <WRAP todo>
-  * Im ''head'' der Seite, fügen Sie folgende Zeile hinzu:
+  * In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu:
 <code html>
 <link rel="stylesheet" href="hallo.css">
 </code>
-  * Durch Ctrl-Klick auf hallo.css legen Sie diese Datei neu an und legen darin fest, dass grosse Titel auf dieser Seite rot sein sollen:
+  * Durch Ctrl-Klick auf hallo.css legen Sie diese Datei neu an und legen darin fest, dass grosse Titel ''h1'' auf dieser Seite rot sein sollen:
 <code css>
 h1 {
@@ Line 41: / Line 48: @@
   * Gratuliere, Sie haben Ihre erste CSS-Datei geschrieben.
+</WRAP>
+Und jetzt noch JavaScript:
+<WRAP todo>
+  * In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu:
+<code html>
+<script src="hallo.js"></script>
+</code>
+  * Durch Ctrl-Klick auf hallo.js legen Sie diese Datei neu an und schreiben Sie folgenden JavaScript-Code:
+<code js>
+console.log("Hello world from JavaScript!");
+</code>
+  * Speichern Sie alle Dateien mit ''Ctrl-K S'' (d.h. ''Ctrl'' gedrückt halten und ''k'' drücken, alles loslassen und dann noch ''s'' drücken).
+  * Laden Sie Ihre Seite im Browser neu (z.B. mit ''Ctrl-Shift-R''). Geht erst mal auch ohne Shift, aber so wird sicher alles neu geladen und nicht noch alte Dinge aus dem Browsercache geladen.
+  * Das "Hello world from JavaScript!" ist nirgends zu sehen.\
+  * Öffnen Sie dazu die Developper-Tools mit F12 (Funktionstaste, oberste Reihe).
+  * Öffnen Sie dort den Tab «Console». Eventuell müssen Sie die Web-Seite im Browser neu laden.
+  * Tip top! Ihr erstes JavaScript Programm.
 </WRAP>