HTML steht für Hypertext Markup Language. Wer HTML lernen will, kann zunächst beruhigt sein - es handelt sich hierbei nicht um eine Programmiersprache, sondern um eine Auszeichnungssprache. Ursprünglich war HTML hauptsächlich dafür gedacht, Texte auf elektronischem Weg mit anderen (Wissenschaftlern) zu teilen und die Dokumente über sogenannte Hyperlinks miteinander zu verknüpfen. Aus diesem zunächst rein textbasierten Medium hat sich erst im Lauf der Zeit das visuell geprägte, multimediale World Wide Web, das Internet wie wir es heute kennen, entwickelt.
Um in HTML ausgezeichnete Texte anzeigen zu können, verwenden wir einen Webbrowser. Welche Website der Browser anzeigen soll, wird über eine eindeutige Webadresse, die URL (Uniform Resource Locator) festgelegt, die in dessen Adresszeile eingeben wird (z.B. www.h-ab.de). Bei Eingabe einer solchen URL wird über ein System von Nameservern die Anfrage des Browsers, auch Client genannt, an die zu dieser URL gehörende IP-Adresse weitergeleitet. Diese IP-Adresse ist wie eine Telefonnummer unter der ein Webserver (Host) auf die Anfrage des Clients antwortet. Die Serversoftware (z.B. Apache für Linux) reagiert auf die Anfrage, indem sie die zur Webadresse gehörigen HTML-Dateien, Bilder, Scripts etc. an den Browser des Nutzers zurückschickt. Der Browser lädt die vom Server über das Internet Protokoll übertragenen Teile der Website, interpretiert sie und setzt die einzelnen Bestandteile zu einer Website zusammen. Immer wenn eine neue Unterseite geladen werden soll, wiederholt sich dieser Vorgang.
Neben diesem üblichen Weg, der ja einen Server und eine Webadresse voraussetzt, gibt es noch einen einfacheren Weg, um eine HTML-Seite in den Browser zu laden: der Browser kann auch lokal auf einem Rechner gespeicherte HTML-Dateien öffnen. Normaler Weise reicht dafür ein Doppelklick auf eine mit der Endung ".html" abgespeicherte Textdatei, um diese im Standardbrowser zu öffnen. Damit hat man einen schnellen und unaufwendigen Weg zur Verfügung, um eigenen HTML-Dateien lokal zu erstellen und zu testen.
Neben dem Browser braucht man für die Erstellung von HTML-Dateien nur noch einen Texteditor. Theoretisch würde das mit Windows ausgelieferte Notepad ausreichen, allerdings bieten speziell für Programmierung ausgelegte Editoren einige Vorteile, die man schnell nicht mehr missen möchte: Generell unterstützen sie einen dabei, schneller und mit weniger Fehlern zu arbeiten. Wir verwenden im Rahmen dieser Veranstaltung den Open-Source-Editor Brackets, der für alle Plattformen kostenlos erhältlich ist und selbst in JavaScript programmiert wurde.
Nach dem Start von Brackets sehen wir zunächst nur ein paar einführende Beispiel-Dateien. Wir wollen nun aber selbst (nur einmal!) ganz am Anfang beginnen mit dem Aufbau einer grundlegenden HTML-Struktur.
Los geht's: Öffnen Sie das Menü [Datei] und klicken dann auf [Neu]. Noch schneller geht es mit der Tastenkombination [Strg]+[N]. Sie erhalten nun ein leeres Textdokument, in das wir sofort schreiben könnten. Allerdings sollten wir die Textdatei zunächst erst als HTML-Dokument abspeichern: Das Speichern erfolgt wie gewohnt über [Datei] -> [Speichern unter ...]. Wählen Sie einen für Sie beschreibbaren Ordner aus, geben Sie als Dateinamen z.B. "index.html" ein und bestätigen mit Klick auf [Speichern].
Sie haben hiermit ihr erstes HTML-Dokument erstellt. Nun sollten Sie allerdings noch zwei weitere Einstellungen vornehmen: Am unteren Rand des Brackets-Fensters gibt es ein Dropdown-Menü, das aktuell auf "HTML" stehen müsste. Etwas weiter links in der Statusleiste befindet sich ein weiteres Dropdown, hier sollten Sie statt dem etwas eingeschränkten westeuropäischen Zeichensatz, den eher gebräuchlichen Zeichensatz "UTF-8" sehen. Dieser Zeichensatz umfasst neben deutschen Umlauten auch vielen andere Sprachen, z.B. auch Russisch und Chinesisch.
Nun sollten wir schnell etwas gegen die leere Seite tun. Wir beginnen am besten mit dem sogenannten DOCTYPE. Dieser teilt dem Browser genauer mit, mit welcher Version von HTML wir hier arbeiten. Der DOCTYPE von HTML5 wurde gegenüber früheren Versionen deutlich vereinfacht und heißt nun nur noch "html". Allerdings müssen wir dies in die nötige Schreibweise bringen, an die wir uns nun bei HTML gewöhnen müssen. Die sogenannten Tags, die für die Auszeichnung von Texten in HTML verwendet werden, werden jeweils von einem Kleiner-Zeichen eröffnet und einem Größer-Zeichen beendet:
<!DOCTYPE html>
Der DOCTYPE ist im Gegensatz zu den meisten anderen Tags, die einen Text oder weitere Elemente paarig umschließen, ein einzelstehender Tag.
Nun ist der erste Tag geschrieben und der Einstieg geschafft. Wenn wir die HTML-Datei allerdings mit Doppelklick im Browser öffnen, bleibt das Fenster erwartungsgemäß leer. Im nächsten Abschnitt werden wir uns daher daran machen, das HTML-Grundgerüst zu vervollständigen. So erhalten wir die Basis für die ersten Texte, die im Browser angezeigt werden sollen.
> Weiter zu: das HTML-Grundgerüst