Actos Lab

HTML - Hypertext Markup Language

HTML ist die Abkürzung für Hypertext Markup Language. Die Sprache ermöglicht das Aussehen einer Webseite zu beschreiben. Sie gestattet vieles zu definieren. Unter anderem ermöglicht sie Texte und ihre Formatierungen, Bilder und ihre Platzierungen, Farben, z.B. dateiweite Hinter- und Vordergrundfarben, Schriftfarben und Hintergrundfarben für Tabellen, sowie Links zu definieren. Die Beschreibungen werden in Dateien gespeichert. Jene heißen HTML-Dateien und sind an den Dateiendungen html oder htm zu erkennen.

Darstellung durch den Browser

Die Darstellung einer HTML-Seite auf einem konkreten Rechner übernimmt der Webbrowser. Er fordert die HTML-Seite in Gestalt einer HTML-Datei vom Webserver an. Anschließend greift der Webbrowser die in HTML codierten Beschreibungen auf und setzt sie in ein exaktes Layout um. Der HTML-Code bietet Interpretationsspielräume, vor allem dann wenn der HTML-Code fehlerhaft oder nicht sauber ist. Jeder Webbrowser nutzt die Interpretationsspielräume auf seine Art. Die Folge: Verschiedene Webbrowser stellen eine Webseite oft unterschiedlich dar. Für Tester ist das Verhalten der Browser oft eine große Herausforderung. Sie müssen HTML-Seiten mit verschiedenen Browsern auf möglichst vielen unterschiedlichen Rechnern testen.

Geschichte & Entwicklung

Tim Berners-Lee hat HTML 1989/1990 entwickelt. Seither wurde die Seitenbeschreibungssprache ständig weiterentwickelt. Unterschiedliche Dialekte und Versionen entstanden. Heute ist HTML 4 die aktuelle Version. HTML 5 ist in Entwicklung. Die zukünftige Version wartet mit vielen neuen Funktionen auf. Unter anderem soll sie Videos, Musik und Spiele ohne zusätzliche Software im Browser darstellen können.

Aufbaue eines HTML-Dokuments

Eine HTML-Datei besteht aus einer Dokumenttyp (DOCTYP) -Deklaration und einem HTML-Wurzelelement. Die Dokumenttyp-Deklaration enthält Angaben zur verwendeten HTML-Version; z.B. HTML 4.01. Der übrige Teil einer HTML-Datei heißt Wurzel-Element. Im einfachsten Fall besteht das Wurzelelement aus einem Dateikopf, auch Header genannt und einem Inhaltsabschnitt, auch Body genannt.

HTML-Elemente

HTML-Elemente wie z.B. Dokumenttyp-Deklaration, HTML-Wurzelelement, Header oder Body werden durch ein einleitendes und - von Ausnahmen abgesehen - durch ein abschließendes Tag markiert. Ein Tag ist ein Zeichen oder eine Zeichenkette, die in spitze Klammern gefasst ist. Ein Beispiel für ein einleitendes Tag ist <html>. Es markiert den Beginn eines HTML-Wurzelelements. Ein Beispiel für ein abschließendes Tag ist </html>. Es markiert das Ende eines HTML-Wurzelelements.

Auch Header und Body beginnen mit einem einleitenden und abschließenden Tag. Die entsprechenden Tags heißen <head> bzw. <body> und </head> bzw. </body> . Ein zwingend vorgeschriebenes HTML-Element des Headers ist die Überschrift. Der Webbrowser zeigt sie in der Titelzeile des Anzeigefensters an. Auch die Überschrift ist durch Tags markiert. <title> lautet das einleitende und </title> das abschließende Tag. Die Kommandozeile <title> Weihnachtsgruss </title> sorgt zum Beispiel dafür, dass das Wort „Weihnachtsgruss“ in der Kommandozeile des Browsers dargestellt wird.

Konkretes Beispiel

Ausgaben im Anzeigefeld des Webbrowsers bewirkt der Inhaltsabschnitt. Zahlreiche HTML-Tags gestatten Texte zu formatieren, Bilder zu integrieren, Hintergrundfarben zu definieren, Links zu setzen und vieles mehr. An dieser Stelle sei anhand eines Beispiels das Prinzip erklärt. Soll im Anzeigefeld des Browsers der Schriftzug "Frohe Weihnachten!" ausgegeben werden, genügt es zwischen und "Frohe Weihnachten" zu schreiben. HTML gestattet den Text auf verschiedene Weise zu formatieren. Beispielsweise würde die Kommandozeile <b>Frohe Weihnachten!</b> bewirken, dass der Text "Frohe Weihnachten!" fett im Anzeigefeld des Browsers erscheint.

Eine HTML-Seite, die "Frohe Weihnachten" fett ausgibt, könnte folgendermaßen aussehen:

Ein HTML-Dokument mit Inhalt Frohe Weinachten!
Ein HTML-Dokument mit Inhalt "Frohe Weinachten!"

HTML-Editoren

HTML-Dateien sind Textdateien. Deshalb gestatten bereits einfache Editoren HTLM-Dateien zu erzeugen. Mehr Komfort bieten spezielle HTML-Editoren.
Es existieren zwei Klassen von HTML-Editoren: textbasierte Editoren und WYSIWYG-Editoren. Bei textbasierten Editoren gibt man den Quellcode ein. WYSIWYG-Editoren zeigen die Seite beim Bearbeiten so an, wie sie der Browser später darstellen sollte. Gute HTML-Editoren unterstützen das Syntax-Highlighting und das Autovervollständigen. Beim Syntax-Highlighting werden einzelne Elemente einer HTML-Seite, beispielsweise Tags, farblich markiert. Beim Autovervollständigen werden Codeteile, z.B. abschließende Tags, automatisch ergänzt.