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.
web
an.web
ein weiteres Verzeichnis hello-html
an.hello-html
mit «VisualStudio Code». (Entweder auf der Kommandozeile im Verzeichnis hello-html
mit code .
, oder in VisualStudio Code File → Open Folder
.hallo.html
an.!
ein und bestätigen Sie mit EnterSie sollten jetzt folgenden HTML-Code haben:
<!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>
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>
start hello.html
Es wäre schön, die Seite würde automatisch neu geladen werden. Das ist möglich mit der «Live Server» Extension.