Das Wort wird fett geschrieben
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, normalen Text mit Formatierung-Befehlen anzureichern. Etwas Ähnliches haben wir auch bei 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:
Beispiel
Das Wort wird **fett** geschrieben
1
Diese 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> geschrieben
1
Der Browser stellt den Code wie folgt dar:
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:
Beispiel
Die Webseite meiner Schule ist [[https://www.gymkirchenfeld.ch|hier]]
1
Ergibt in HTML:
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 (opens new window)
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
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
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 (opens new window)
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
- 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 F5 jeweils im Browser, damit deine Änderungen sichtbar werden.