HTML-Einführung für Webmaster

HTML - Terminologie

HTML bedeutet Hyper Text Markup Language und bezeichnet eine Programmiersprache, die für die Erzeugung von Seiten z.B. im Internet verwendet wird. Dabei bietet HTML eine Reihe von Funktionen, die für die Gestaltung von Webseiten notwendig sind.
Neben der grafischen Aufbereitung des Inhaltes sind besonders die Möglichkeit, Informationen für Suchmaschinen bereitzustellen, sowie die Fähigkeit, Verbindungen zu anderen Seiten oder Diensten im Internet herzustellen, wichtige Aufgaben von HTML.
Letztenendes stellen HTML-Dateien Anweisungen für den Browser, dem Programm zum Betrachten von Internetseiten, dar. Dieser interpretiert die Befehle der Reihe nach von oben nach unten.

HTML-Quellcode besteht aus ASCII-Text, also aus Klartext. Deshalb können HTML-Dateien mit einem normalen Texteditor geschrieben werden und müssen auch nicht kompiliert, d.h. in einen Maschinencode umgewandelt werden.
Neben Text, der auf der Seite sichtbar werden soll, enthalten HTML-Dateien spezielle HTML-Anweisungen, sogenannte Tags. Diese werden durch spitze Klammern markiert und stehen normalerweisen am Anfang und am Ende einer Anweisung. Der Text dazwischen wird dann, entsprechend der Anweisung des Tags, dargestellt.

Die Ausgabe dieser Anweisung sieht dann folgendermassen aus:

HTML - die Sprache des WWW

Sinngemäss wird also der Inhalt von Webseiten in HTML-Anweisungen verpackt: H bedeutet Headline, also Überschrift und die Zahl 4 bezeichnet die Grössenkategorie. Ein abschliessender Tag makiert den Gültigkeitsbereich der Anweisung und wird mit einem Schrägstrich "/" gekennzeichnet. Dabei spielt es keine Rolle, ob für die Tags Gross- oder Kleinbuchstaben verwendet werden.
Es gibt jedoch auch einige wenige Anweisungen, die keinen Befehl für den nachstehenden Text darstellen und deshalb auch keinen abschliessenden Tag benötigen:

HTML-Tags können auch verschachtelt werden. Dabei ist darauf zu achten, dass Tags, die innerhalb eines anderen Tags stehen, beendet werden, bevor der übergeordnete Tag geschlossen wird.

Ausgabe:

HTML - die Sprache des WWW

Einige Tags können oder müssen zusätzlich zu ihrer Bezeichnung auch eine oder mehrere Eigenschaften, sogenannte Attribute beinhalten. So gibt es beispielsweise den <FONT>-Tag, der aber keine Bedeutung hat, wenn man keine weiteren Angaben zur gewünschten Form der Font (Schrift) macht, also z.B. zu Grösse oder Farbe. Attribute werden nur im einleitenden Tag angegeben. Manche Attribute erfordern die Angabe eines Parameters:

Ausgabe:

Basteln mit HTML


Für die Schreibweise gibt es keine besonderen Vorschriften. Es können sowohl für Elemente als auch für Attribute Gross- oder Kleinbuchstaben verwendet werden. Parameter (Attributwerte) sollten unter einfache oder doppelte Hochkomma gestellt werden. Die Trennung von Elementen und Attributen erfolgt durch ein Leerzeichen, die Wertzuweisung des Attributes sollte aber ohne Leerzeichen erfolgen (--> size="4").
Nicht angegebene Eigenschaften werden durch die Standard-Vorgaben des Browsers ersetzt. Bei verschachtelten Tags hat der innere Tag höhere Priorität, als der äussere.
Im allgemeinen empfiehlt sich eine kompakte, aber übersichtliche Schreibweise.

 

Aufbau von HTML-Dateien

Die erste Zeile einer HTML Datei beschreibt die in der Webseite verwendete HTML-Version.

Danach folgt der eigentliche Inhalte der Webseite. Der Beginn wird durch einen <HTML>-Tag gekennzeichnet. Nach dem Verschachtelungsprinzip muss also der letzte Tag im Dokument ein </HTML> sein. Der Inhalt dieses Tags wird normalerweise in zwei Teile gegliedert: dem Header und dem Body.
Im Kopf <HEAD> einer HTML-Seite finden sich verschiedene Informationen, die nicht unmittelbar auf der Website ausgegeben werden, wie z.B. Name des Autors, Suchbegriffe für Suchmaschinen (sog. <META>-Tags), oder der Titel der aktuellen Seite, was dann in der Titelleiste des Browsers ausgegeben wird (<TITLE>). Ausserdem können sich im Header auch HTML-Zusatzfunktionen in Form von sog. Scripts (<SCRIPT>) befinden. Das sind mehr oder weniger kleine Programme, die in einer anderen Programmiersprache als HTML geschrieben sind, sich aber mit HTML verbinden lassen. Externe Dateien, die zum Betrieb der Seite benötigt werden, werden ebenfalls im Header aufgerufen.

Getrennt vom Kopfende durch eine Leerzeile erfolgt dann im <BODY> die Definition des Aussehens der Seite und ihres Inhaltes. Dabei können im <BODY>-Tag selbst schon verschiedene Angaben gemacht werden, die dann dateiweit Gültigkeit haben, wie z.B. die Angabe der Hintergrundgrafik.

Ein HTML-Grundgerüst könnte etwa so aussehen:

Alles, was innerhalb der HTML-Tags, aber ausserhalb eines anderen Tags steht, wird als Text interpretiert und auf der Seite ausgegeben. Damit es möglich wird, auch das Format für <TAGS> innerhalb eines Textes zu verwenden, lassen sich die dafür kennzeichnenden Klammern auch durch eine andere Schreibweise darstellen: &lt; bzw. &gt; - aber auch Umlaute, das scharfe S und Sonderzeichen müssen in HTML in sog. Entity-Abkürzungen geschrieben werden. Diese sind daran zu erkennen, dass der Code mit einem & beginnt und mit einem ; beendet wird.

wichtige Entity-Abkürzungen:
ä
Ä
ö
Ö
ü
Ü
ß
&auml;
&Auml;
&ouml;
&Ouml;
&uuml;
&Uuml;
&szlig;
&
<
>
"
erzwungenes Leerzeichen
&amp;
&lt;
&gt;
&quot;
&#160;

Um den HTML-Code mit einem Kommentar versehen zu können, gibt es einen speziellen Tag: mit <!-- wird ein Kommentar eingeleitet. Alles, was innerhalb des Tags steht, wird ignoriert - auch <TAGS> oder Umlaute können ohne weiteres notiert werden. Das Ende eines Kommentar-Tags sieht so aus: //-->. Allerdings gibt es auch Dialekte, grundsätzlich genügt ein Rufzeichen als erstes Zeichen nach der <, um den Browser zum Ignorieren sämtlicher Zeichen bis zur nächsten > zu veranlassen.

 

Möglichkeiten von HTML

HTML wurde (wird) vom W3C auf Basis der Definition der SGML (Standard Generalized Markup Language) für Seitenbeschreibungssprachen entwickelt. XML (eXtended Markup Language) ist ebenfalls eine Seitenbeschreibungssprache, die vom W3C entwickelt wird - dabei handelt es sich um einen möglichen Nachfolger für HTML. Allerdings ist XML komplizierter in der Handhabung: die sog. DTDs (documenttype definitions) können (müssen) im Ggs. zu HTML selbst definiert werden. Dadurch können Markups kreiert werden, die den logischen Aufbau des Seiteninhalts exakt beschreiben, was wiederum eine, vom Browser unabhängige Darstellung ermöglichen soll.

HTML glänzt durch seine unkomplizierte Handhabung und die hohe Fehlertoleranz - eine Eigenschaft, die bei anderen Programmiersprachen nicht üblich ist. Entsprechend bescheiden sind dann allerdings auch die Möglichkeiten von HTML. Eigentlich ist es vermessen, im Zusammenhang mit HTML von einer Programmiersprache zu sprechen. Merkmale, die allen wichtigen Programmiersprachen zugrunde liegen, existieren in HTML nicht: es gibt keine Variablen, keine mathematischen Funktionen, keine Kontrollstrukturen. Vielmehr liesse sich HTML als Textauszeichnungs- und Seitenbeschreibungssprache bezeichnen.

HTML bietet einfache Mittel zum Gestalten des Textes und des Fensterhintergrundes. Ausserdem können diverse Mediaformate eingebunden werden, z.B. Bilder, Musik, Animationen.
Mit HTML ist es möglich, das Fenster des Browsers in verschiedenen Teilen, sog. FRAMES und in verschiedenen Ebenen, sog. LAYERS zu organisieren. Ausserdem lässt sich der Inhalt der Webseite durch HTML-Tabellen, sog. TABLES einigermassen kontrolliert darstellen. Mithilfe von Style Sheet-Sprache (z.B. CSS) lässt sich die Gestaltung von Webseiten verfeinern. Ein wesentliches Problem bei der Verwendung von HTML für das Site-Design besteht darin, dass das Erscheinungsbild der Seite immer von Funktionen und Einstellungen des Browsers abhängig ist.

Eine andere wichtige Fähigkeit von HTML stellt die Möglichkeit zur Verknüpfung mit jedem anderen (öffentlichen) Dokument im WWW dar, egal, ob auf lokaler oder auf globaler Ebene. Text oder Grafik, der bzw. die zu einem anderen, adressierbaren Internetdokument führen, bezeichnet man als LINK oder Verweis. Dabei ist es auch möglich, den Internetdienst zu wechseln, also z.B. E-Mails zu verschicken, Newsserver zu durchsuchen oder FTP-Dienste zu verwenden. Der entsprechende HTML-Tag lautet <A>, wobei die Angabe der Adresse als Parameter des Attributes href (Hypertext-Referenz) erfolgt:

Die Art des zu verwendenden Protokolls wird, getrennt durch einen Doppelpunkt, vor die entsprechende Adresse geschrieben. Sollte keine Protokollangabe erfolgen, wird automatisch HTTP gewählt. Mithilfe des (Pseudo-) Protokolls file: kann der Zugriff auf das Verzeichnissystem des Servers erfolgen (z.B. Downloads). Wird ein Dateiname, z.B. preisliste.txt oder program.exe ohne Protokollangabe als Hypertext-Refernz angegeben, wird die entsprechende Datei ebensfalls zum Download angeboten. Das Versenden der Datei erfolgt im Normalfall mittels HTTP und des entsprechenden Ports.

Es ist auch möglich, auf bestimmte Teile einer Website Verweise zu machen. Voraussetzung dafür ist, dass innerhalb des Dokuments ein sog. Anker definiert wird. Dazu wird im <A>-Tag das Attribut name verwendet. Der Anker ist dann unter dem angegebenen Namen mit vorangesetztem #-Zeichen als href erreichbar:

Anker können ebenfalls www-weit angesprungen werden.

Eine wichtige Eigenschaft des <A>-Tags ist das Attribut target. Damit kann definiert werden, in welcher Form die neue Seite dargestellt werden soll. Die wichtigsten Parameter sind "_top" für die Darstellung der Seite im gleichen Browserfenster und "_blank" für die Darstellung in einem neuen Fenster.

Links werden auf der Webseite besonders dargestellt. Für die verschiedenen Erscheinungsbilder eines Links (z.B. besucht, nicht besucht, aktiv oder für den Fall, das sich der Mousecursor über dem Link befindet) gibt es sowohl browserseitige Konfigurationsmöglichkeiten, als auch die Möglichkeit, im HTML-Dokument entsprechende Angaben zu machen. Da diese meist zumindest dateiweite Bedeutung haben, erfolgen diese Angaben, genauso wie Hintergrundfarbe oder Schriftart der Seite, im <BODY>-Tag. Diese Angaben können bei Bedarf auch durch andere kurzfristig deaktiviert werden.

Mittels Links lässt sich eine Website strukturieren. Inhalte können zueinander verlinkt werden und Verbindungen zur 'Aussenwelt' und verschiedenen Services können geschaffen werden.

Mithilfe von HTML lässt sich aber auch der Inhalt der einzelnen Seiten strukturieren. Dazu dienen sog. <TABLES>, also Tabellen, in deren einzelne Felder die verschiedenen HTML-Elemente positioniert werden. Dadurch können diese Elemente exakter bzw. vielseitiger placiert werden. Ausserdem gibt es innerhalb von Tabellen mehr Möglichkeiten zur Gestaltung der Inhalte, als dies ausserhalb der Fall ist.

<LAYER> bieten die Möglichkeit, einzelne Bereiche der Webseite in mehrere Ebenen zu unterteilen, wobei die Ebenen unabhängig voneinander angezeigt werden können.

Wenn das Browserfenster in mehrere Teile, sog. <FRAME>s unterteilt wird, lassen sich darin verschiedene Seiten gleichzeitig darstellen. Das kann z.B. dazu benutzt werden, eine Menüführung unabhängig von der gerade angezeigten Seite im Browserfenster darzustellen. Zur Verwaltung der Frames wird ein sog. <FRAMESET> verwendet.

 

Der Weisheit letzter Schluss...

Das W3C empfiehlt, Design und Inhalt einer Webseite getrennt voneinander zu gestalten. Tatsächlich sollte aus Gründen der Flexibilität, der Organisation, der einfacheren Wartung und der besseren Portierbarkeit, Performance und Wiederverwertbarkeit wenn möglich eine strikte Trennung der einzelnen Webseitenbereiche vorgenommen werden. HTML dient im Optimalfall nur dazu, die Ausgabe der einzelnen Seite durchzuführen. Auf dynamische Erstellung der Inhalte sollte Wert gelegt werden.

 
zum Seitenbeginn...weiter geht's mit HTML-Formularen...
Optimiert für MS Internet Explorer. © 2000 by Daniel Weiss/bfi Wien. Bug-Reports bitte an den Autor.
last modified: Montag 11/19/2001 7:51 PM (CEST)