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 Verzeichnishello-html
an. - Öffnen Sie das Verzeichnis mit
hello-html
mit «VisualStudio Code». (Entweder auf der Kommandozeile im Verzeichnishello-html
mitcode .
, oder in VisualStudio CodeFile → 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:
- template.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
- Zwischen dem öffnenden und schliessenden
body
Tag (engl. sprich täg), fügen Sie folgenden HTML-Code ein:
<h1>Grundlegendes HTML</h1> Ein bisschen Text, gefolgt von einer «unnumbered List» (ul): <ul> <li>Das ist ein List Item (li)</li> <li>Das auch</li> </ul> Das ist ein <a href="https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf22:web-tech:html">Link auf die Unterrichtsunterlagen</a>. <div> <p>Ein Div (Division) ist eine Box, die bliebigen Inhalt aufnehmen kann.</p> <p>Mit p macht man einzelne Abschnitte</p> <p>Und hier noch ein Bild</p> <img src="https://fginfo.ksbg.ch/dokuwiki/lib/tpl/bootstrap3/images/logo.png" alt="Dokuwiki Logo"> </div>
- 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.
- 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.