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.
Um in HTML ein Wort z.B. fett-gedruckt darzustellen, brauchen wir das strong-Element.
Das Wort wird <strong>fett</strong> geschriebenDer 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.
Die Webseite meiner Schule ist <a href="https://www.gymkirchenfeld.ch">hier</a>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>- 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 html-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>Auf der ersten Zeile wird die verwendete HTML-Version angegeben. (im Beispiel: HTML 5)
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 -->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 überlappen sich):
Die Webseite <strong>meiner <a href="https://www.gymkirchenfeld.ch">Schule</strong> ist hier</a>Korrekte Lösung:
Die Webseite <strong>meiner</strong> <a href="https://www.gymkirchenfeld.ch"><strong>Schule</strong> ist hier</a>Aufgabe
- Erstelle einen neuen Ordner und darin eine neue leere Textdatei (z.B. mit dem Programm Notepad++)
- Kopiere die HTML-Grundstruktur von dieser Seite in die leere Textdatei und speichere diese mit der Endung
.html. - Öffne die HTML-Datei im Browser (z.B. mit einem Doppelklick)
- 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 im Browser (F5 oder +R), damit deine Änderungen sichtbar werden.