Polaris Sytems Tutorial

Entstehung und Zweck von HTML

Das Internet

Es gäbe kein HTML ohne das Internet. Letzteres ging aus dem, Ende der sechziger Jahre entstandenen, Arpanet (Advanced Research Projects Agency Network) hervor.
Arpanet wurde im Auftrag der US-Luftwaffe von einer kleinen Forschergruppe unter der Leitung des MIT (Massachusetts Institute of Technology) entwickelt, mit dem Ziel ein dezentrales Netzwerk zwischen verschiedenen US-Universitäten zu erschaffen. Dezentral bedeutet hier, dass die einzelnen Komponenten des Netzwerks (die Rechner der Universitäten) nicht voneinander abhängig waren. Selbst, wenn ein oder mehrere Computer des Verbundes ausfielen, war das Netzwerk dennoch funktionsfähig. Dieses Merkmal bildet noch heute die Grundlage des Internets.

Im Jahr 1990 wurde beschlossen, das Internet der Öffentlichkeit zugänglich zu machen und für kommerzielle Zwecke zu nutzen. Allerdings erhielt das Medium Internet erst ab dem Jahr 1993 einen rasanten Wachstumsschub, nachdem der erste grafikfähige Webbrowser (Mosaic - entwickelt an der Universität Illinois) veröffentlicht und zum kostenlosen Download angeboten wurde.

Die Hypertext Markup Language (HTML)

Mit der stetig steigenden Popularität des Internets wuchs natürlich auch die Anzahl der veröffentlichten Informationen. Sehr schnell wurde klar, dass man dafür allgemeingültige Regeln benötigt. Regeln um die Dokumente und Daten so aufzubereiten, dass sie unabhängig von der eingesetzten Hard- und Software auf die gleiche Art und Weise dargestellt werden. Die Hypertext Markup Language (dt. Hypertext Auszeichnungssprache) oder kurz HTML wurde geboren.

HTML steht für eine plattformunabhängige Dokumentauszeichnungssprache, wobei sich der Name (Hypertext) auf die Verweise (Hyperlinks) zwischen den Dokumenten im Internet bezieht.
Die erste HTML-Version wurde 1989 von Tim Berners-Lee am CERN (Europäische Organisation für Kernforschung) in Genf entwickelt. Sie war zur Strukturierung und Darstellung von wissenschaftlichen Informationen im Internet gedacht.
Fortan wurde die Sprache kontinuierlich überarbeitet und an die neuen Anforderungen und Technologien angepasst. Aktuell trägt HTML die Versionsnummer 4.01. HTML 5 befindet sich bereits seit geraumer Zeit in der Entwicklung durch das World Wide Web Consortium (W3C).

Mit HTML lassen sich typische Dokumentenelemente, wie z.B. Überschriften, Kapitel, Textabsätze, Tabellen oder Grafiken bezeichnen und strukturieren, um Inhalte in Browsern (so werden Programme genannt, die die Dokumente des Internets lesen und auf dem Bildschirm anzeigen) aufbereitet darzustellen zu können. Die Sprache fungiert somit zur vereinheitlichten Strukturierung, der im World Wide Web grundlegenden dargestellten Dokumente, da Sie von allen Webbrowsern, plattformunabhängig und weltweit verstanden wird.

Wichtig ist, dass HTML nur für die Strukturierung von Inhalten zweckmäßig ist. Für die Formatierung von Inhalten wird CSS (Cascading Style Sheets) genutzt. CSS definiert, wie ein Bereich oder Inhalt dargestellt wird und dient somit der Gestaltung von Webseiten.

Aufbau der HTML Befehle

HTML basiert auf Befehlen, den sogenannten Tags. Die darzustellenden Inhalte werden von solchen Tags immer umschlossen, also zwischen einem öffnenden Tag und einem schließenden Tag platziert.

Beispiel 1
<p>Ein beliebiger Absatz [...]</p>
Hier wird ein Absatz definiert. Das HTML Tag p steht für Paragraph (Absatz).

Dabei ist zu beachten, dass der schließende Tag durch einen Slash (Schrägstrich) gekennzeichnet ist. Um die HTML Tags von dem übrigen Inhalt eines Dokumentes zu unterscheiden, werden sie immer durch die Zeichen < (kleiner als) und > (größer als) umschlossen (z.B.: <p>).
Neben Elementen mit Start- und Schlusstag gibt es in HTML auch wenige Elemente, die keinen abschließenden Befehl besitzen. Dazu zählt z.B. der Zeilenumbruch: <br />. In einem solchen Fall wird der Slash vor das abschließende > platziert.

Beispiel 2
Eine Zeile des Textes<br />Eine neue Zeile
Hier wird ein Zeilenumbruch zwischen zwei Sätzen eingefügt. Das HTML Tag br steht für Break (Zeilenumbruch).
Das Ergebnis im Browser
Eine Zeile des Textes
Eine neue Zeile

Einige der HTML Befehle beinhalten noch zusätzliche Informationen die sog. Attribute. Die Attribute werden immer nur in dem öffnenden Tag angegeben und zwar nach folgendem Muster: <tag attribut="wert">. Möglich sind auch mehrere Attribut-Wert Paare, die dann durch Leerzeichen voneinander getrennt werden: <tag attribut1="wert1" attribut1="wert2">.

Beispiel 3
<a href="http://www.polaris-systems.de">Das ist ein Link</a>
Hier wird ein Hyperlink (Verweis oder auch Anker) definiert. Das HTML Tag a steht für Anchor (Anker).

Wichtig ist, dass in standardkonformen HTML die Attribute immer einen Wert besitzen und die Werte durch Anführungsstriche umschlossen sind.
Die meisten Browser können auch Angaben wie <a href=http://www.polaris-systems.de> korrekt interpretieren, doch darauf sollte man sich nicht verlassen, denn es entspricht nicht der Norm.

Einige der HTML Tags lassen sich verschachteln. Genaueres dazu erfahren Sie jedoch erst im weiteren Verlauf des Tutorials.

Beispiel 4
<div>
<p>Ein beliebiger Text [...]</p>
</div>
Verschachtelte HTML Tags

Groß- und Kleinschreibung spielt in HTML keine Rolle. Die Befehle:

<html>
<HTML>
<Html>

sind identisch. Es hat sich jedoch eingebürgert sowohl die HTML Befehle, als auch deren Attribute klein zu schreiben. Dieser Konvention werden wir auch folgen.

Ein passendes Werkzeug

In den folgenden Kapiteln möchten wir Ihnen sowohl die Grundstruktur des Aufbaus einer HTML Seite (Quelltext), als auch die wichtigsten Befehle (Tags) etwas näher erläutern.
Bevor wir jedoch mit dem Aufbau unserer ersten HTML Seite beginnen, benötigen wir noch einen Editor, dh. ein Programm mit dem wir das Dokument erstellen.

Gewiss haben Sie schon mal von Programmen wie Adobe Dreamweaver oder Microsoft Frontpage gehört. Diese Programme sind für das Erlernen von HTML nicht nur wenig nützlich, sondern teilweise sogar hinderlich, da Sie Änderungen am Quelltext vornehmen, was ein saubereres Arbeiten verhindert.

Viel besser sind da ganz normale Texteditoren (wie z.B. Windows Wordpad, das standardmäßig in jeder Windowsinstallation vorhanden ist), oder spezielle Programme wie z.B. der NVU Composer, Weboctons Sciptly oder Meybohms HTML Editor Phase, die mit ihren Merkmalen, wie z.B. der Hervorhebung von Tags und Elementen (sog. syntax highlighting), das Arbeiten mit HTML beschleunigen und erleichtern.

Zuletzt aktualisiert am 03.05.2013 von Polaris Systems.

Zurück