Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf22:web-tech:html [2023/04/13 06:04] – created Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf22:web-tech:html [2023/04/14 05:45] (current) – [Erste Seite] Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== 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>