====== Grundlagen HTML ====== Mit HTML soll beschrieben werden, **was** auf der Seite dargestellt werden soll, **aber nicht wie**. Die Formatierung (Farbe, Grösse, etc.) soll später in einer separaten Datei festgelegt werden. ===== Erste Seite ===== * Legen Sie an einem geeigneten Ort ein neues Verzeichnis ''web'' an. * Legen Sie im Verzeichnis ''web'' ein weiteres Verzeichnis ''hello-html'' an. * Öffnen Sie das Verzeichnis mit ''hello-html'' mit «VisualStudio Code». (Entweder auf der Kommandozeile im Verzeichnis ''hello-html'' mit ''code .'', oder in VisualStudio Code ''File -> Open Folder''. * In VisualStudio Code legen Sie eine neue Datei ''hallo.html'' an. * In der neuen Datei, geben Sie ein Ausrufezeichen ''!'' ein und bestätigen Sie mit Enter Sie sollten jetzt folgenden HTML-Code haben: Document * Zwischen dem öffnenden und schliessenden ''body'' Tag (engl. sprich täg), fügen Sie folgenden HTML-Code ein:

Grundlegendes HTML

Ein bisschen Text, gefolgt von einer «unnumbered List» (ul): Das ist ein Link auf die Unterrichtsunterlagen.

Ein Div (Division) ist eine Box, die bliebigen Inhalt aufnehmen kann.

Mit p macht man einzelne Abschnitte

Und hier noch ein Bild

Dokuwiki Logo
* Speichern Sie Ihre HTML-Datei und öffnen Sie diese mit einem Webbrowser: * Entweder auf der Kommandozeile mit ''start hello.html'' * Oder im Dateimanager durch Doppelklick. * Ändern Sie nun den HTML-Code und speichern Sie Ihre Änderungen. * Damit diese im Browser sichtbar werden, muss die Seite neu geladen werden. Es wäre schön, die Seite würde automatisch neu geladen werden. Das ist möglich mit der «Live Server» Extension. * Installieren Sie in VSCode die «Live Server» Extension (links auf {{:lehrkraefte:blc:informatik:glf22:web-tech:pasted:20230414-073610.png}} oder Ctrl+Shift+X, dann nach «Live Server» suchen und installieren. * In VSCode, links in den Dateien, Rechtsklick auf Ihre html-Datei -> «Open with Live Server». * Positionieren Sie VSCode nach links mit Windows+← und das Browserfenster nach rechts mit Windows+→ * Ändern Sie ihren HTML-Code nochmals und beobachten Sie, wie die Seite automatisch neu geladen wird, sobald Sie Ihre Änderungen speichern.