Grundlagen HTML

This is an old revision of the document!

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.

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:

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

Grundlagen HTML

Erste Seite

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG