Grundlegende Kenntnisse in HTML gehören zum Handwerkszeug eines Journalisten. Und auch wenn der Blick in die Quellcodes verschiedener Internetseiten anderes vermuten lässt: Programmieren ist etwas, das jeder einfach lernen kann. Der Einstieg in HTML ist sogar ziemlich leicht.HTML verstehen
Die Abkürzung HTML bedeutet Hypertext Markup Language. Wikipedia definiert es „als textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten“. Jede einzelne Seite im Internet ist im Grunde ein HTML-Dokument, welches vorgibt, wie diese Seite dargestellt wird. Die HTML-Datei enthält dabei den Text, welchen Besucher der Seite sehen sowie eine Reihe von Befehlen, den so genannten Tags. Sie dienen der Textstrukturierung und Formatierung und beinhalten Informationen, wie Browser die Seite anzeigen sollen.
Ein Tag besteht in der Regel aus zwei Elementen – einem Start-Tag <html> und einem End-Tag </html>. Beide unterscheiden sich nur durch den Schrägstrich. Das Start-Tag gibt dabei vor, wo ein HTML-Befehl beginnt und das End-Tag zeigt an, bis wohin es seine Wirkung entfalten soll. Beispiel gefällig? Mit dem öffnenden <strong>-Tag gibt man an, ab wo ein Text fett dargestellt werden soll und das schließende</strong>-Tag beendet die Fettung.
Neben dieser großen Mehrheit der HTML-Tags gibt es auch solche, die die kein End-Tag haben. Und das macht sogar Sinn, da diese Befehle in sich abgeschlossen sind. Per Definition können diese Void-Elemete, wie sie genannt werden, keinen Inhalt zwischen Start- und End-Tag haben. So sorgt beispielsweise das <br />-Tag für einen Zeilenumbruch. Zur Vervollständigung hier eine komplette Auflistung aller Void-Tags: <area />, <base />, <br />, <col />, <command />, <embed />, <hr />, <img />, <input />, <keygen />, <link />, <meta />, <param />, <source />, <track />, <wbr />. Sie alle werden durch den beendenden Schrägstrich sowie die schließende eckige Klammer „/>“ in sich geschloßen.
Das schöne an HTML ist, das man zunächst mit sehr wenigen Befehlen auskommt. Mit ihnen lassen sich zum Beispiel die Informationsfenster von Markern in mit Mapbox selbstgezeichneten Karten formatieren.
Die wichtigsten HTML-Befehle und ihre Funktion:
- <a></a>. Das sogenannte Anker-Tag. Es ist sozusagen die Basis des Internets, sorgt es doch dafür, dass Internetseiten untereinander verlinkt werden können. Um einen einfachen Link zu setzen, ist folgender Befehl nötig: <a href=“http://www.meineinternetadresse.de/“>Linktext</a>. Ausgeschrieben bedeutet das: das öffnende <a signalisiert dem Browser, dass jetzt ein Anker folgt. href= gibt ihm zu verstehen, das ein elektronischer Verweis folgt. Die mit Anführungszeichen eingefasste Adresse „http://www.meineinternetadresse.de/“ gibt das Ziel des Verweises an und die spitze Klammer beendet das Starttag. Der folgende Linktext ist der sichtbare Teil des Befehls, also der Teil, den Besucher der Seite angezeigt bekommen. Mit </a> gibt man schließlich das Ende des Links an. Über das Anker-Tag lassen sich auch E-Mail-Adressen verlinken. Der dafür nötige Befehl lautet <a href=“mailto:ich@meineinternetadresse.de“>Linktext</a>. Er unterscheidet sich von dem Internetlink lediglich durch das mailto:, welches angibt, dass eine E-Mail-Adresse folgt. Klickt man auf einen solchen Link, öffnet sich automatisch das E-Mail-Programm auf dem Computer oder Smartphone.
- Das <img />-Tag. Mit ihm lassen sich Grafikdateien in HTML-Dokumente einbinden. Das Tag beschreibt, welches Bild angezeigt werden soll und wie groß es dargestellt werden soll. Dafür enthält das <img /> zusätzliche veränderliche Inhalte, die sogenannten Attribute. In seiner einfachsten Form enthält das <img />-Tag zwei Attribute, die zwingend vorgeschrieben sind: src=“linkzumbild.de/png“ (engl. source für Quelle) gibt an, wo das darzustellende Bild abgespeichert ist und alt=“Hier mein Alternativtext“ (engl. alternative) gibt den Alternativtext an, der angezeigt wird, wenn das Bild nicht geladen werden kann. Er ist zudem für die barrierefreie Nutzung der Seite elementar, da Menschen mit Sehschwächen diesen Text von Screenreadern vorgeslesen bekommen. Zusammengesetzt lautet der einfachste Bildverweis also <img src=“http://linkzumbild.de/Bilddateiname.png“ alt=“Hier mein Alternativtext“ />. Weitere wichtige Attribute des <img />-Tags sind width und height, mit denen man die Breite und Höhe des Bildes angeben kann.
- Mit <p> und </p> bestimmt man Beginn und Ende eines Absatzes
- mit <h1>Titel</h1>, <h2>Untertitel</h3>, <h3>Untertitel</h3>, <h4>Untertitel</h4>, <h5>Untertitel</h5> und <h6>Untertitel</h6> lassen sich Überschriften formatieren. Dabei sollte das <h1>-Tag im Sinne der Suchmaschinenoptimierung nur einmal vergeben werden.
- Mit <strong> und </strong> gibt man Beginn und Ende der Fettung eines Textes an.
- Mit <em> und </em> wird der zwischen beiden Tags als betont (engl. emphasized) bezeichnet und kursiv dargestellt.
Und damit endet meine Aufzählung der wichtigsten Befehle auch schon. Wer sie beherrscht, kann Internetseiten schon ganz ordentlich strukturieren.
Im zweiten Teil erfahrt ihr, wie man mit HTML drei verschiedene Listentypen anlegen könnt.