Damit wir eine aufs Smartphone optimierte Webseite erstellen können, brauchen wir ein Grundwissen zu HTML, der textbasierten Auszeichnungssprache, womit Websites aufgebaut sind.
Die Hauptidee von HTML ist es, normalen Text mit Formatierung-Befehlen anzureichern. Wir kennen das z.B. von der Wiki-Syntax: Wollen wir in einem Satz ein Wort Fett schreiben, so erreichen wir das durch Einfügen zweier Sterne vor und nach dem entsprechenden Wort:
Das Wort wird **fett** geschriebenDiese Wiki-Syntax wird vom Wiki (auch eine Webapp) in HTML-Code umgewandelt. Wir könnten auch direkt HTML-Code schreiben. Um in HTML ein Wort fett darzustellen brauchen wir das strong-Element.
Das Wort wird <strong>fett</strong> geschriebenDer Browser stellt den Code wie folgt dar:
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. Auch bei der Wiki-Syntax haben wir dies:
Die Webseite meiner Schule ist [[https://www.gymkirchenfeld.ch|hier]]Ergibt in HTML:
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><tag-name></tag-name>attribut="wert"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>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 -->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>Korrekte Lösung:
Die Webseite <strong>meiner</strong> <a href="https://www.gymkirchenfeld.ch"><strong>Schule</strong> ist hier</a>.html.