Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2023:hello-html [2023/02/01 11:14]
Ivo Blöchliger created
+++ 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>
+Führen Sie folgende Dinge auf der Kommandozeile (git-bash) aus:
+  * Im Ihrem Freifach-Programmieren Vezeichnis, legen Sie einen Ordner ''hello'' an.
+  * Wechseln Sie in den Ordner ''hello''
+  * Starten Sie ''code .'' um den aktuellen Ordner zu öffnen.
+In Visual Code
+  * Legen Sie eine neue Datei ''hello.html'' an. Geben Sie dazu möglich effizient, ohne Copy-Paste, folgenden Code ein (siehe auch das Video dazu)
+<code html>
+<html>
+    <head>
+        <meta charset="utf8">
+        <title>Hallo HTML Fenstertitel</title>
+    </head>
+    <body>
+        <h1>Hallo HTML Seitentitel</h1>
+        Wie geht's?
+    </body>
+</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.
+  * Gratuliere, Ihre erste HTML-Seite (oder das war alles schon bekannt).
+</WRAP>
+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>
+  * 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 ''h1'' auf dieser Seite rot sein sollen:
+<code css>
+h1 {
+    color:red;
+}
+</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.
+  * 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>
 <hidden Dateien vom Video>