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:

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.

  • Installieren Sie in VSCode die «Live Server» Extension (links auf 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.