{{backlinks>.}}
====== Hello World in HTML, CSS, JavaScript ======
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]].
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)
Hallo HTML Fenstertitel
Hallo HTML Seitentitel
Wie geht's?
* 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).
Aber bitte mit Stil! Wir fügen eine CSS-Datei hinzu, die beschreibt, wie Dinge auf der Seite formatiert und dargestellt werden sollen:
* In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu:
* 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:
h1 {
color:red;
}
* 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.
Und jetzt noch JavaScript:
* In der Datei ''hello.html'', im ''head'' der Seite, fügen Sie folgende Zeile hinzu:
* Durch Ctrl-Klick auf hallo.js legen Sie diese Datei neu an und schreiben Sie folgenden JavaScript-Code:
console.log("Hello world from JavaScript!");
* 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.
Hallo HTML Fenstertitel
Hallo HTML Seitentitel
Wie geht's?
h1 {
color:red;
}
console.log("Hello world from JavaScript!");