Hello World in HTML, CSS, JavaScript

Lektion 0: Setup und Einrichten

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>

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:

<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 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:

<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 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.

Dateien vom Video

hello.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title>Hallo HTML Fenstertitel</title>
        <link rel="stylesheet" href="hallo.css">
        <script src="hallo.js"></script>
    </head>
    <body>
        <h1>Hallo HTML Seitentitel</h1>
        Wie geht's?
    </body>
</html>

hello.css

h1 {
    color:red;
}

hello.js

console.log("Hello world from JavaScript!");