lehrkraefte:snr:informatik:glf23:html [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

Falls noch nicht geschehen: Erstelle in deinem Informatik-Ordner einen Unterordner namens html.
Lege in diesem Untordner html einen Unterordner namens meine-erste-html-seite an.

Wenn du später weitere Websites erstellst (etwa für dein Projekt), lege dafür jeweils einen neuen Unterordner im Ordner html an.

(teilweise Wiederholung der ersten Informatik-Lektion)

Öffne Visual Studio Code (und schliesse alle offenen Dateien).
Installiere die Extension/Erweiterung “HTML CSS Support” in Visual Studio Code wie folgt. Klicke (vgl. Screenshot) in der Symbolleiste links auf das Symbol “vier Quadrate” (Nummer 1 links unten im Screenshot). Dann im Suchfeld oben nach “html” suchen (2), auf die Extension “HTML CSS Support” klicken (3) und im Fenster rechts auf Install (4). In der Leiste links klicke auf das oberste Symbol (5) (Explorer).

Öffne den gerade erstellten Ordner meine-erste-html-seite, z. B. über das Menü per File → Open Folder:

Lege eine neue Datei namens index.html in diesem Folder an: (1) Mausposition wie im folgenden Screenshot, entsprechenden Icon anklicken, (2) index.html eintippen und Enter drücken.

Das Grundgerüst einer HTML-Datei bekommt man in VS Code am einfachsten wie folgt: Der Cursor muss im Fenster index.html sein (evtl. hineinklicken). Dort ! eingeben und direkt danach Enter. Nun sollte dein VS Code-Fenster etwa wie folgt aussehen.

In Zeile 2 der HTML-Datei: Ändere die Sprachangabe “en” (englisch) auf “de” oder “de-ch”.
In Zeile 7: Ändere den Titel der Webpage auf “Meine erste HTML-Seite”. Dieser Titel erscheint in der Titelleiste des Browsers bzw. in der Titelleiste des Tabs (= der Registerkarte) und ist etwa relevant für Suchmaschinen.

Die erste Zeile <!DOCTYPE html> sagt, dass es sich bei der Datei um eine HTML-Datei in der aktuellen Sprachversion handelt. Der eigentliche HTML-Code befindet sich zwischen den Zeilen 2 und 12 (= grosse rote Klammer von <html> bis </html> im Screenshot). Dort steht zuerst ein “Head(er)” (= die obere innere rote Klammer von <head> bis </head>) mit allgemeinen Daten (bspw. Titel der Webseite und gewisse “Meta-Daten”, etwa für die sinnvolle Anzeige der Seite auf einem Smartphone). Darunter im “Body” (= die untere innere rote Klammer von <body> bis </body>) folgt der eigentliche (bisher nicht vorhandene) Inhalt der Webseite.

Ergänze nun den “Body” der HTML-Datei wie aus dem folgenden Screenshot ersichtlich. Beachte: VS Code hilft durch Syntaxvervollständigung, du musst z. B. kein einziges der Zeichen < oder > eingeben; wenn du zum Beispiel “h1” oder “p” oder “a” eintippst, “erledigt” VS Code den Rest; die Einrückungen und Leerzeichen sind optional, verbessern aber die Lesbarkeit):

Speichere die Datei (etwa mit Ctrl+s).
Öffen deine HTML-Datei index.html mit einem Browser, z.B. so: Finde die Datei in deinem Datei-Manager und öffne sie durch Anklicken; falls das nicht klappt, Datei mit rechter Maustaste anklicken, dann “Öffnen mit”/“Open with” und den gewünschten Browser, etwa Edge oder Firefox, auswählen.

Eine HTML-Datei besteht aus vielen HTML-Elementen. Beispielsweise ist die Zeile 10 in unserer Datei ein HTML-Element mit Namen h1.

Der Name “h1” steht für “Heading of level 1” (Hauptüberschrift) und sagt dem Browser, dass es sich um eine Überschrift handelt.

Das HTML-Element h1 beginnt mit dem “start tag” <h1> und endet mit dem “end tag” </h1> (beide Male der Name des HTML-Elements in spitzen Klammern, jedoch beim “end tag” zusätzlich ein Slash / nach der öffnenden spitzen Klammer).

Der eigentliche Inhalt “Schule” steht zwischen start und end tag.

Etwas komplizierter ist das HTML-Element a für einen Link aufgebaut; die Bezeichnung “a” steht für “anchor” (und ist nicht besonders glücklich gewählt).

Im “start tag” steht hier zusätzlich noch eine “hyper reference” als Attribut (= Zusatzeigenschaft). Der Name dieses Attributs ist href, danach folgt ein Gleichheitszeichen und der Wert des Attributs in Anführungszeichen (hier ist es die Web-Adresse der KSBG; es könnte hier aber auch eine pdf-Datei oder ein Bild o. ä. stehen).

Auf der Webseite angezeigt wird der Inhalt, beim Anklicken versucht der Browser, die “hyper reference” zu öffnen.

In unserer HTML-Datei finden sich neben den gerade erklärten HTML-Elementen “h1” und “a” noch einige weitere:

p für Paragraph (Text-Abschnitt)
h2 und h3 für Unterüberschriften (es gibt auch h4, h5 und h6 für noch weniger wichtige Überschriften)
title in Zeile 7
body; der Inhalt dieses HTML-Elements ist der eigentliche Inhalt der Webseite und steht bei uns in den Zeilen 10 bis 22
head; der Inhalt ist der Header der HTML-Datei
html mit dem Sprach-Attribut lang=“de-ch”; start tag in Zeile 2, end tag in Zeile 24
meta (dieses Element hat nur Attribute und keinen Inhalt, weswegen der “end tag” weggelassen wird)

Jede Information in einer HTML-Datei sollte “alleine” in einem HTML-Element enthalten sein: Beispielsweise wäre es schlechter Stil, den Text in Zeile 12 ohne start tag <p> in Zeile 11 und end tag </p> in Zeile 13 anzugeben (denn dann wäre dieser Text zusammen mit dem h1-Element und anderen HTML-Elementen in dem HTML-Element body).

Alle HTML-Elemente unseres Dokuments sind ineinander verschachtelt. Dies ist im folgenden Screenshot links durch Klammern angedeutet (jede Klammer beginnt oben beim “start tag” und endet unten beim zugehörigen “end tag”). Beachte, dass die verschiedenen Klammern sich nicht schneiden: Liegt ein HTML-Element in einem anderen, so muss es vor diesem beendet werden (korrekte Klammerung).

Rechts ist dieselbe Struktur “baumartig” dargestellt (und man nennt so etwas in der Informatik wirklich einen Baum): Das HTML-Element “html” enthält die Elemente “head” und “body”. Das Element “head” enthält drei “meta”-Elemente und ein “title”-Element. Das Element “body” enthält diverse “h”-Elemente und zwei “p”-Elemente, wobei ein “p”-Element noch einen Link (= ein “a”-Element) enthält.¹⁾ Dieser Baum heisst übrigens DOM (= document object model).

Hinweis: Wenn du deine HTML-Datei veränderst und dies im Browser sehen willst, musst du sie abspeichern (etwa per Ctrl+s) und im Browser einen “reload” durchführen.

Ergänze deine HTML-Datei um einen Link zu einer weiteren Webseite.
Finde heraus, wie man einen Link erzeugt, der in einem neuen Tab geöffnet wird. Hinweis: Abschnitt “Example”, “How to open a link in a new browser window” auf https://www.w3schools.com/tags/tag_a.asp.
Ergänze in deiner HTML-Datei die Liste deiner Lieblingsfächer! Hinweis: Suche im Internet nach “html list w3schools”!
Falls du dich fragst, wofür die Abkürzungen “ul” bzw. “ol” bzw. “li” stehen: “unordered list”, “ordered list”, “list item”.
Speichere ein Foto im Verzeichnis meine-erste-html-seite und finde heraus, wie du dieses Foto auf deiner Webseite anzeigen kannst. Hinweis: Wie oben im Internat nach “html image w3schools” suchen oder nach image im HTML-Tutorial HTML tutorial von W3 schools suchen.
Präsentiere dein Foto als Abbildung mit Bildunterschrift (etwa Inhalt und Quelle des Bildes, copyright-Angaben etc.). Hinweis: https://www.w3schools.com/tags/tag_figure.asp
Gelingt es dir, ein “anklickbares” Foto auf deiner Webseite anzubringen? Etwa ein Foto eines Zuges, das zur SBB führt? Hinweis: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
Erzeuge einen Link zu einer pdf-Datei (die in deinem Verzeichnis oder sonstwo im Internet liegt).
Ein nettes HTML-Element, um deine Webseite etwas interaktiv zu machen, ist das HTML-Element “summary” (für Ausklappboxen). Suche danach auf W3Schools oder anderswo und baue es in deine Datei ein!

Bonus:

Ähnlich wie Bilder kannst du Videos oder Audio-Dateien einbetten. Hinweise: Die dazu nötigen HTML-Elemente heissen video bzw. audio.
Wer eine Tabelle erstellen möchte, gehe auf https://www.w3schools.com/html/html_tables.asp.

Was ist Hypertext?

Nun können wir die Wörter in HTML = hypertext markup language erlären.

language ist klar, es handelt sich um eine Sprache zur Beschreibung von Webseiten
markup language = Auszeichnungssprache: Die Inhalte werden mit Auszeichnungen versehen: Das HTML-Element “h1” zeichnet seinen Inhalt (meist einen Text) als Überschrift aus, “ul” gibt an, dass es sich um eine ungeordnete Liste handelt etc.
hypertext ist eine Sammlung von Text, anderen Dokumenten und Verbindungen zu anderen Dokumenten:
- Hypertext kann neben Text auch Links enthalten. Im Gegensatz zu klassischen Texten (etwa Zeitungen oder Romanen, die man normalerweise von vorne bis hinten “linear” durchliest) kann man mit Hilfe von Links zu anderen Dokumenten springen; man geht beim Lesen oft assoziativ vor und folgt nur den Links, für die man sich interssiert.
- In diesem Sinne ist Hypertext nicht-linear.
- Hypertext kann neben Text und Links auch Bilder, Videos und Klänge enthalten.

Ein gutes Beispiel für Hypertext ist Wikipedia. Ihre klassischen linearen Vorgänger sind alphabetisch geordnete Lexika.²⁾

Der Begriff Hypertext wurde übrigens (meines Wissens) 1965 erstmalig von Ted Nelson verwendet:

Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper.

Erstelle in deinem Ordner meine-erste-html-seite eine weitere HTML-Datei namens unterseite.html.

Fülle diese HTML-Datei mit dem HTML-Grundgerüst. Hinweis: Bitte nicht abtippen, sondern !+Enter verwenden.
Erstelle einen Link “zurück zur Hauptseite” von dieser Seite zur Seite index.html und einen sinnvoll beschrifteten Link von der Seite index.html zur neuen Webseite unterseite.html: Solche Links erstellt man mit dem HTML-Element a. Als href gibt man einfach den Namen der HTML-Datei an (falls diese sich im selben Verzeichnis befindet).

Die Hauptseite eines Webauftritts (= einer Website) heisst standardmässig index.html. Dies ist der Grund, dass du deine erste HTML-Seite in Aufgabe 1 so genannt hast.

Diesen Dateinamen solltest du auch für die Hauptseite deines Projektes verwenden.

Kommentare in HTML-Dateien werden mit :

Prüfe mit Hilfe der folgenden Webpage, ob deine HTML-Datei “grammatikalisch korrekt” ist. Beachte dabei die “Hinweise” auf dem Screenshot.

Solange Fehler vorliegen, korrigiere deine Datei!

https://validator.w3.org/

¹⁾

Mit Hilfe weiterer HTML-Elemente wie article oder section könnte man eine bessere Verschachtelung erreichen, so dass klar wird, zu welchem h1-Element das h2-Element gehört.

²⁾

auch dort mag man von Eintrag zu Eintrag springen, aber dies ist deutlich weniger komfortabel