Allgemeines zu HTML

Um Internetseiten wie gewohnt im Browser darstellen zu können, wird in der Regel eine Auszeichnungssprache verwendet (Markup Language). Diese beschreibt, wie der Inhalt eines Dokumentes auf der Webseite dargestellt wird, beispielsweise in Fett- oder Kursivschrift, Hervorhebung von Überschriften mittels größerer Schriftart oder das Einfügen von Absätzen. Die Sprache wird im Falle der Internetseiten als Hypertext Markup Language, kurz HTML, bezeichnet.

HTML – Wie alles begann

Ursprünglich wurden im Druckhandwerk diese Formatierungsanweisungen für den Schriftsetzer in Handschrift auf dem Manuskript vermerkt. Um die Inhalte auf der Internetseite korrekt darzustellen, müssen sie im Dokument eindeutig zugeordnet und gekennzeichnet werden (Markup). Dazu werden sie mit Auszeichnungselementen, den Tags, versehen. Der Inhalt einer Webseite wird auch als Seitenquelltext bezeichnet. Dieser wird in der Regel in ASCII oder UTF-8 geschrieben, also in einem lesbaren, nicht verschlüsseltem Klartext. Hierzu wichtige Infos zum HTML Editor.

[maxbutton id=“5″]

Um von einer bestimmten Stelle der Internetseite an eine andere Stelle der Seite springen zu können, wird ein elektronischer Verweis verwendet. Dieser nennt sich Hyperlink und ist eine Verknüpfung, entweder zu einer Stelle auf der gleichen Seite oder zu einer anderen Internetseite. Es ist in jedem Fall eine eindeutige Adresse im weltweiten Internet, möglicherweise auch die Verknüpfung zu einer Datei, um sie herunterzuladen.

Die Hypertext Markup Language (HTML) ging 1989 aus einem Projekt am Kernforschungszentrum CERN in Genf hervor. Forscher wollten Ihre Ergebnisse europaweit verfügbar machen. Der Siegeszug begann. HTML ist die Auszeichnungssprache für Inhalte im World Wide Web geworden. Der Befehlssatz wächst und wird angepasst. Darüber wachen das internationale World Wide Web Consortium (W3C) und die Web Hypertext Application Technology Working Group (WHATWG).

Das HTML-Grundgerüst

Die Befehle, Tags genannt, sind einfach zu verstehen. Alle Quelltexte der Internetseiten basieren auf einem identischen Gerüst:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“utf-8″>
<title>Beschreibung der Seite</title>
</head>
<body>
<! Der Inhalt steht hier >
</body>
</html>

Das HTML-Grundgerüst ist von vielen spitzen Klammern gekennzeichnet. Dazwischen stehen die Anweisungen für den Browser. So bedeutet

<!DOCTYPE HTML>

für den Browser, dass dieses Dokument im HTML-Standard verfasst ist. Der eigentliche HTML-Bereich wird mit dem Tag <html> eingeleitet.

Dokumente mit HTML-Code bestehen grundsätzlich aus einem Kopf-Element <head> und einem Körper-Element, dem body-Element <body>. Im Kopf-Element sind hilfreiche Angaben für den Browser, um das Dokument korrekt auf dem Bildschirm darzustellen. Beispielsweise sagt der Befehl <meta charset=“utf-8″>, dass der Unizeichencode UTF-8 verwendet wird. Dies ist wichtig, um bei der Vielzahl an Sprachen weltweit den korrekten Zeichensatz anzuzeigen.

Anweisungen

Die Befehle und Elemente werden in der Regel mit einem öffnenden und einem schließenden „Tag“ gekennzeichnet. Zum Schließen wird das Tag lediglich mit einem vorangestellten Schrägstrich innerhalb der Klammern versehen.

<title>Testseite</title>

Dies ist ein vollständiger HTML-Befehl für den Browser. Jeder Befehl startet mit dem bereits bekannten Eröffnungs-Tag. Der Browser weiß durch <title>,dass nun der Titel der Webseite folgt. Dieser Titel wird in der Titelzeile und in den Karteireitern des Browsers angezeigt, in diesem Fall „Testseite“.

Der eigentlich darzustellende Inhalt der Webseite – alles, was auf dem Monitor sichtbar sein soll – wird im Körper-Element aufgeführt: Überschrift, Menü, Text und Fotos.

<body>
<! Inhalte wie Überschrift, Menü, Text und Fotos stehen hier >
</body>

Das Ausrufezeichen steht für einen Kommentar, der nachfolgende Text wird nicht dargestellt.

Weitere HTML-Befehle

Um Webseiten abwechslungsreich zu gestalten, werden oftmals Fotos eingebunden. Dieses gelingt mit dem img-Tag.

<img src=“sonne.jpg“ width=“350″ height=“400″ border=“4″ alt=“Sonne“>

Es steht alleine und besitzt kein schließendes Tag: „img“ steht für das Bild (image) und src für die Quelle, wo es zu finden ist und wie der Name lautet (source). Diese Details werden dabei in Anführungszeichen gesetzt. Dies kann auch eine Webadresse sein, wie zum Beispiel:

<img src=“http://www.beispiel.de/fotos/Bild01.jpg“ alt=“Bild 1″>

Mittels der Attribute „width“, „height“ und „border“ lassen sich die Breite, die Höhe sowie ein eventueller Rahmen um das Foto definieren. In obigem Beispiel gibt die Zahl „4“ die Rahmendicke in Pixel wieder. Falls es beim Laden des Fotos zu einem Fehler kommt, wird der alternative Text alt=“Bild 1“ anstelle des Fotos im Browser angezeigt.

Was HTML ausmacht, sind die Querverweise auf den Internetseiten. Um einen solchen Verweis auf der Webseite zu setzen, nutzt HTML einen Anker (a = anchor). Zusätzlich ist das Attribut „href“ notwendig, um die Referenz für den Hyperlink zu definieren.

<a href=“http://www.google.de“>Google Suche</a> Suchmaschine<br>

Das Anker-Tag „Google Suche“ ist mit dem Link zu Google verknüpft. In den meisten Browsern wird „Google Suche“ – der Link – unterstrichen dargestellt. Der nachfolgende Text „Suchmaschine“ wird normal dargestellt. <br> erzeugt einen Zeilenumbruch.

Mehr Gestaltungsmöglichkeiten mit Style Sheets

Die Gestaltungsmöglichkeiten mit HTML sind jedoch begrenzt und aufwändig. Aus diesem Grund wurde CSS, die Cascading Style Sheets, eine Sprache zur Gestaltung der Inhalte definiert. Vorrangig sollten neue Möglichkeiten zur Gestaltung geschaffen und der Inhalt der Webseiten von den Formatierungsbefehlen getrennt werden. Das erleichtert das Programmieren großer Webprojekte. Die Formatierung und das Design der Elemente erfolgt zentral in einem Style Sheet und wirkt sich ebenso auf die Unterseiten der Webseite aus. Durch die Trennung von Inhalt und Design sind Änderungen oder Anpassungen für ein komplettes Webseiten-Layout an andere Systeme schnell möglich.

Style Sheets sind also eine Ergänzung zu HTML. Die Formatierungsoptionen sind deutlich filigraner zu handhaben und bieten eine größere Vielfalt als die ursprünglichen HTML-Elemente mit ihren Attributen. Sie ermöglichen ein exakteres Platzieren und Formatieren der HTML-Elemente an der gewünschten Stelle. Die Formatierungs- und Darstellungseigenschaften werden in der Regel in einem Style Sheet, einer extra Datei, gespeichert. Damit ist der HTML-Code gewinnt an Übersichtlichkeit und ist deutlich servicefreundlicher. Neben HTML und CSS gehört auch Javascript (kurz JS) zu den wesentlichen technischen Elementen von Webseiten. Diese Skriptsprache unterstützt unter anderem Interaktionen von Usern sowie das Nachladen von Elementen.

Die Zukunft heißt HTML 5

HTML wird permanent weiterentwickelt und die Spezifikation ergänzt. Die aktuelle Version 4.01 existiert seit 1999. Die Weiterentwicklung XHTML mit deutlich anderem Befehlssatz wurde zugunsten von HTML 5 mittlerweile eingestellt. Das bedeutet, HTML bleibt auch in der Zukunft abwärtskompatibel und bestehende Webseiten können auch mit neuen Browsern angezeigt werden. Seit 2009 beraten sich Experten über die Zukunft von HTML 5. Ende 2014 soll die finale Spezifikation erfolgen.

[maxbutton id=“2″]