Show pageOld revisionsBacklinksBack to top 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> lehrkraefte/blc/informatik/glf22/web-tech/html.txt Last modified: 2023/04/14 07:45by Ivo Blöchliger