EF Informatik 2023
🔸

Damit wir eine aufs Smartphone optimierte Webseite erstellen können, brauchen wir ein Grundwissen zu HTML, der textbasierten Auszeichnungssprache, womit Websites aufgebaut sind.

Element, Tag und Attribut

Die Hauptidee von HTML ist es, ein Dokument durch Elemente zu strukturieren.

Beispiel

Um in HTML ein Wort fett darzustellen brauchen wir das strong-Element.

Das Wort wird <strong>fett</strong> geschrieben
1

Der Browser rendert den Code wie folgt:

Das Wort wird fett geschrieben

Ein HTML-Element wird immer durch HTML-Tags begrenzt. Das <strong>-Element im obigen Beispiel besteht aus einem öffnenden strong-Tag (<strong>) dem Inhalt des Elementes (fett) und dem schliessenden Tag (</strong>).

Gewisse HTML-Elemente benötigen weitere Angaben, damit sie funktionieren. Einem Link z.B. sieht man meist nicht an wohin er führt.

Beispiel

Die Webseite meiner Schule ist <a href="https://www.gymkirchenfeld.ch">hier</a>
1

und wird im Browser wie folgt dargestellt:

Die Webseite meiner Schule ist hier

Der Inhalt des anchor-Elementes wird klickbar gemacht. Die URL die beim Klick geöffnet wird, muss dazu allerdings in einem zusätzlichen Attribut festgelegt werden. Dieses Attribut heisst href und erhält im Beispiel als Wert die URL unserer Gymer-Webseite (https://www.gymkirchenfeld.ch).

Im Allgemeinen hat ein HTML-Element einen tag-Namen, Attribute und Attribute-Werte und einen Inhalt:

<tag-name attribut-1="wert-1" attribut-2="wert-2" ...>
   element-inhalt
</tag-name>
1
2
3
HTML-Element
Durch Tags eingegrenztes Element der Webseite
öffnendes Tag
markiert den Beginn eines HTML-Elementes
<tag-name>
schliessendes Tag
markiert das Ende eines HTML-Elementes
</tag-name>
wird bei HTML-Elementen ohne Inhalt weggelassen
Attribut
Zusätzliche Angaben zum HTML-Element
Wird im öffnenden HTML-Tag eingefügt
hat die Form attribut="wert"

Grundstruktur einer HTML-Datei

Jede HTML-Datei besteht aus einem body-Element welches seinerseits ein head- und ein body-Element beinhaltet. Im head-Element sind Zusatzangaben für den Browser zu finden und das body-Element beinhaltet den eigentlichen Inhalt der Webseite.

<!DOCTYPE html>
<html>
   <head>
      <!-- Inhalt Kopf -->
   </head>
   <body>
      <!-- Inhalt Körper -->
   </body>
</html>
1
2
3
4
5
6
7
8
9

Kommentare

Wie alle Programmiersprachen, bietet auch HTML die Möglichkeit, Kommentare im Quellcode einzubauen. Diese werden vom Browser beim Darstellen der Seite ignoriert. In HTML fügt man Kommentare mit <!-- ein. Der Kommentar erstreckt sich (auch über mehrere Zeilen) bis zum Kommentar-Ende, markiert durch -->.

<!-- ich bin ein Kommentar -->
1

Hierarchie einer HTML-Datei

Die Elemente eines HTML-Dokumentes sind streng hierarchisch geordnet. Es darf keine «Überlappungen» der Elemente geben. Wenn in einem Element A ein öffnendes Tag eines Elementes B steht, dann muss dieses Element B auch wieder geschlossen werden, bevor das Element A geschlossen werden kann. A muss also B komplett enthalten.

Wir möchten einen Link und einen Text fett hervorheben, so dass wir dieses Ergebnis erreichen:

Die Webseite meiner Schule ist hier

Falsche Lösung (das strong und das anchor-Tag überlappend sich):

Die Webseite <strong>meiner <a href="https://www.gymkirchenfeld.ch">Schule</strong> ist hier</a>
1

Korrekte Lösung:

Die Webseite <strong>meiner</strong> <a href="https://www.gymkirchenfeld.ch"><strong>Schule</strong> ist hier</a>
1

Aufgabe

  1. Erstelle einen neuen Ordner und darin eine neue leere Textdatei (z.B. mit dem Programm Notepad++)
  2. Kopiere die HTML-Grundstruktur von dieser Seite in die leere Textdatei und speichere diese mit der Endung .html.
  3. Öffne die html-Datei im Browser (z.B. mit einem Doppelklick)
  4. Gehe die Html-Elemente des nächsten Kapitel durch und füge entsprechenden Html-Code ins Body-Element deiner html-Datei. Passe den Inhalt an und aktualisiere die Seite F5 jeweils im Browser, damit deine Änderungen sichtbar werden.