This is an old revision of the document!
Hello World in HTML, CSS, JavaScript
Zu dieser Lerneinheit gibt es einen Screencast, oder auch auf 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)
<html> <head> <meta charset="utf8"> <title>Hallo HTML Fenstertitel</title> </head> <body> <h1>Hallo HTML Seitentitel</h1> Wie geht's? </body> </html>
- 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
, imhead
der Seite, fügen Sie folgende Zeile hinzu:
<link rel="stylesheet" href="hallo.css">
- 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 undk
drücken, alles loslassen und dann nochs
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
, imhead
der Seite, fügen Sie folgende Zeile hinzu:
<script src="hallo.js"></script>
- 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 undk
drücken, alles loslassen und dann nochs
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.