lehrkraefte:blc:informatik:glf22:web-tech:html [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 =====
<WRAP todo>
  * 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:
<code html 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>
</code>
  * Zwischen dem öffnenden und schliessenden ''body'' Tag (engl. sprich täg), fügen Sie folgenden HTML-Code ein:
<code html>
<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>
</code>
  * 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.
</WRAP>

Es wäre schön, die Seite würde automatisch neu geladen werden. Das ist möglich mit der «Live Server» Extension. 
<WRAP todo>
  * 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 <key>Windows</key>+<key>←</key> und das Browserfenster nach rechts mit <key>Windows</key>+<key>→</key>
  * Ändern Sie ihren HTML-Code nochmals und beobachten Sie, wie die Seite automatisch neu geladen wird, sobald Sie Ihre Änderungen speichern.
</WRAP>