Sie sind hier: Grundlagen

Grundlagen

HTML - Grundlagen

1.1 Grundlagen

Das World Wide Web ist ein Teil des Internets und hat sich wegen seiner vielfältigen Möglichkeiten und der einfachen Bedienung zum wichtigsten Dienst im Internet entwickelt. Das WWW ist nicht nur leichter zu bedienen, jeder kann mit mehr oder weniger geringem Aufwand eigene Seiten im WWW veröffentlichen. Mit den entsprechenden Programmen ist die Gestaltung einer Webseite heute nicht schwerer als eine Textverarbeitung. Doch auch mit den besten grafischen Editoren steht jeder irgendwann einmal vor dem Problem, direkt am HTML-Code etwas zu erstellen. Der folgende Artikel soll nun die grundlegende Funktionsweise von HTML erläutern.

1.2. Was ist HTML ?

HTML ist eine Dokumentbeschreibungssprache und bedeutet HyperText Markup Language. Eine HTML Datei besteht aus reinem Text, besteht also aus Buchstaben, Zeichen und Zahlen. Ein HTML Dokument besteht aus Steuerzeichen, denn sogenannten Tags. Diese Tags bestimmen, wie Elemente wie Text, Überschriften, Tabellen, Listen, Bilder etc. auf der Webseite aussehen. Die Anzeige der HTML-Datei übernimmt letztendlich der Browser. Er liest den HTML-Rohtext ein und interpretiert die Tags, die darin enthalten sind. Anhand des folgenden Beispiels lässt sich der Aufbau eines HTML-Dokumentes gut erkennen:

<html>
<head>
<title>Eine Webseite</title>
</head>
<body>
Ein HTML-Beispiel
</body>
</html>

Hierbei handelt es sich um eine minimale HTML-Datei, die jeder Browser problemlos anzeigt. Die Seite enthält einen Seitentitel, und eine Zeile Text. Innerhalb einer HTML-Datei gibt es zwei Bereiche, den "Kopf" und den "Körper". Im Kopf stehen Angaben, für die ganze Webseite. Die Tags <title></title> umfassen den Text, der als Seitentitel in der Titelleiste eines Browsers erscheinen soll. Der Titel ist wichtig, wenn ein Surfer beispielsweise eine Internetseite in die Favoritenliste des Browsers übernehmen möchte. Denn die meisten Browser übernehmen als Listennamen hier den Titel der Webseite. Auch für viele Suchmaschinen ist der <titel>-Tag der Seite wichtig. Im Head-Bereich sind aber neben dem Seitentitel auch noch etliche andere HTML-Tags erlaubt. Hier befinden sich beispielsweise die META-Tags für die Suchmaschinen oder kleine Javascript-Programme. Der Körper (body) enthält dagegen alle Angaben, die der Browser als Webseite in einem Fenster darstellt. Die <body>-Tags begrenzen den sichtbaren Teil der Webseite. Steht hier einfach nur Text, so würde der Browser in der Standardschrift ohne weiteren Formatierungen den Text anzeigen.

1.3 Formatierungen

Der Browser kümmert sich nicht im geringsten um die Formatierung von Texten. Zeilenumbrüche setzt der Browser dort, wo sie entsprechend der Fenstergröße passen. Mehrere Leerzeichen hintereinander gelten nur als ein Leerzeichen, ein Return wird als Absatzzeichen einfach ignoriert. Damit der Browser nun erkennen kann, welche Zeichen zur Überschrift und welche zum Fließtext gehören, werden die Bereiche mit Tags markiert. HTML kann sechs verschiedene Überschriften, die mit den Tags

<h1></h1> bis <h6></h6>

gekennzeichnet sind. H1 entspricht dabei der Hauptüberschrift und die anderen sind kleinere Kapitelüberschriften. Wie eine Überschrift dargestellt wird entscheidet der Browser. Als HTML-Code könnte das ganze so aussehen

<h1>1. Überschrift</h1>
<h2>1.1 Überschrift 2</h2>

Vor und nach einer Überschrift macht der Browser automatisch einen Zeilenumbruch. Auch Fließtext gliedert sich in Absätze! In einer Webseite kennzeichnet man einen Absatz mit den Tags <p></p>. Vor und nach einem Absatz machen die meisten Browser einen Zeilenumbruch. Möchte man einen Zeilenumbruch erzwingen, so kann dies mit dem Tag <br> erreicht werden. Doch sollte man bedenken, dass mehrere <br>-Tags hintereinander nicht von allen Browsern mit mehreren Leerzeilen interpretiert werden.

1.4 Attribute

Praktisch jeder Tag darf innerhalb der spitzen Klammern durch zusätzliche Angaben ergänzt werden. Diese Angeben sind die Attribute. Die Ausrichtung von Text wird beispielsweise durch das Attribut align definiert. Erlaubt sind dabei folgende Werte:

align=left
align=center
align=left

Von oben nach unten bedeutet das linksbündig, zentriert und rechtsbündig. Linksbündig ist dabei die Standardeinstellung und muss nicht angegeben werden. Die Tags für Überschriften können beispielsweise so ergänzt werden:

<h1 align=center">Überschrift 1</h1>

Zugleich gibt es auch einen universellen Tag: <div></div>. Zunächst markiert dieser Tag nur einen bestimmten Bereich einer Webseite. Über die Attribute kann aber festgelegt werden, welche Formatierungen auf diesen Bereich angewandt werden.

1.5 Sonderzeichen

Ein Text kann auch eine Menge Sonderzeichen enthalten. Das Problem beginnt beispielsweise bei den deutschen Umlauten. Bei Betriebssystemen wie Apple Macintosh oder Unix/Linux erscheinen die deutschen Umlaute als irgendwelche Zeichen. Denn der Zeichensatz dieser Computer sind anders kodiert. Das Internet kann ohne besondere Vorkehrungen nur einen Basiszeichensatz von 127 Zeichen übertragen. Die Umlaute befinden sich aber im zweiten Teil des ASCII Zeichensatzes im Bereich 128 bis 255. Deshalb gibt es für Umlaute und andere Sonderzeichen eigene Tags. Diese beginnen mit einem kaufmännischen UND "&" und enden mit einem Strichpunkt ";". Für ein kleines "ä" steht im HTML-Text &auml;. Das große "Ä" bekommt ein &Auml;. Naturgemäß sind für Sonderzeichen Ersatzcodes erforderlich.

Ersatzcode Wirkung &auml; ä &Auml; Ä &ouml; ö &Ouml; Ö &uuml; ü &Uuml; Ü &lt; < &gt; > &szlig; ß &amp; & &quot; "

Ersatzcode Wirkung
&auml; ä
&Auml; Ä
&ouml; ö
&Ouml; Ö
&uuml; ü
&Uuml; Ü
&lt; <
&gt; >
&szlig; ß
&amp; &
&quot; "

1.6 Hyperlinks

Hyperlinks oder Verweise sind das entscheidende im Internet. Links sind der Kerngedanke des World Wide Web und machen erst die grenzenlose Verknüpfung möglich. Durch Anklicken einer bestimmten Textstelle oder einer Grafik springt man zu einer anderen Stelle. Mit den Hyperlinks kann eine Homepage elegant in mehrere überschaubare Bereiche aufgespaltet werden. Verantwortlich dafür ist der <a>-Tag mit einigen zusätzlichen Parametern:

<a href="test.htm">Test</a>

href= gibt an, zu welcher Datei oder Webseite verzweigt werden soll, der Name folgt in Anführungszeichen. Dabei handelt es sich um den Dateinamen, unter dem die Seite gespeichert wurde. Der Text "Test" wird hier zum Hyperlink und verweist beim Anklicken auf die Datei test.htm im selben Verzeichnis. Meistens ist der Text blau oder unterstrichen. Den Abschluss bildet </a>.Doch auch der Sprung zu anderen Seiten im Web ist möglich. Im HTML-Code ist der Unterschied minimal. Ergänze den kompletten Dateinamen einfach durch die Webadresse:

<a href="http://www.webmasternetz.de">WebTREND</a>

Dabei kann jede Web-Adresse angegeben werden, die sonst auch der Browser akzeptiert. Es ist auch möglich mit einem Link auf eine E-Mail Adresse zu verweisen:

<a href="mailto:webmaster@webmasternetz.de">Mail</a>

Bei einem Klick auf "Mail" öffnet sich das Standardmailprogramm um eine E-Mail zu versenden. Wer längere Dokumente hat, macht eine "Sprungleiste" Sinn. Die einzelnen Unterpunkte werden aufgelistet und mit einem Mausklick zeigt der Browser an die entsprechende Stelle. Dazu müssen natürlich zuerst die Zielpunkte gesetzt werden:

<a name="Ziel">Ziel 1</a>

Damit wurde das Wort "Hierher" als Ziel für einen Hyperlink definiert. Der Hyperlink für das Ziel muss nun so aussehen:

<a href="#Ziel">Ziel 1</a>

Befindet sich der Anker in einer anderen Datei, so muss die Seite mit angegeben werden:

<a href="seite.htm#Ziel">Ziel 1</a>

1.7 Bilder

Eine Homepage besteht natürlich nicht nur aus Text, sondern auch aus Bildern. Da eine HTML-Datei eine reine Textdatei ist, sind die Bilder separat in einzelnen Bilddateien gespeichert. Eine Webseite besteht also in der Regel aus mehreren Dateien. Beim Dateiformat der Bilder haben sich zwei Formate etabliert: JPEG-Bilder oder GIF-Bilder. JPEG eignet sich allgemein eher für große Bilder mit vielen Farben und GIF für kleinere Bilder mit bis zu 256 Farben. Sobald ein Bild fertiggestellt wurde und in das Verzeichnis mit der HTML-Datei kopiert wurde, kann es folgendermaßen eingebunden werden:

<img src="bildname" alt="Beschreibung">

Ersetze Bildname mit dem Namen eines Bildes, das im gleichen Verzeichnis wie die HTML-Datei liegt. Das Bild muss im GIF- oder JPG-Format sein. Es kann aber auch eine Internetadresse eines Bilde eingeben werden, z.B.:

<img src="http://www.domain.de/bild.jpg">

Beschreibung wird mit einer kurzen Information über das Bild ersetzt. Diese erscheint dann, wenn das Bild gerade geladen wird oder wenn man mit der Maus über das Bild fährt.
Mit Hife von folgenden Attributen kann die Höhe eines Bildes bestimmt werden:

<img src="bildname" height="X" width="X">

height bestimmt die Höhe, width die Breite. Ersetze X mit der gewünschten Höhe bzw. Breite des Bildes in der Einheit Pixel.
Wird nur die Höhe oder nur die Breite angegeben, wird die andere Größe so angepasst, dass das Bild proportional bleibt. Durch die Angabe von sowohl Größe als auch Breite könnten das Bild quetschen oder dehnen. Normalerweise sollte immer dir Originalgröße angegeben werden, damit der Browser Platz für die Bilder lässt und schon mal den Text aufbaut. Genauso wie Text können auch Bilder als Hyperlink eingesetzt werden. Das funktioniert dann genauso wie beim Text:

<a href="test.htm"><img src="test.htm" height="15" width="15"></a>

Damit der Leser der Homepage auch erkennen kann, dass es sich um einen Hyperlink handelt, wird das Bild normalerweise eingerahmt. Mit dem Attribut border="0" im <img> Tag kann dies aber unterbunden werden.

1.8 Der Hintergrund

Mit dem <body>-Tag kann ein Hintergrundbild eingefügt werden. Dieses Bild wiederholt sich vertikal und horizontal unendlich oft, so dass es denn gesamten Homepagehintergrund füllt Der erweiterte Body-Tag lautet:

<body background="hintergrundbild">

"hintergrundbild" wird durch den Namen des Bildes ersetzt, das sich im gleichen Ordner wie die HTML-Datei befinden muss. Es muss sich außerdem um ein JPG- oder GIF-Bild handeln oder um eine Internetadresse, welche auf ein Bild verweist, beispielsweise:

<body background="http://www.domain.de/bg.gif">

Der <body>-Tag besitzt zwei weitere Erweiterungen womit Hintergrundfarbe und Textfarbe bestimmt werden können:

<body bgcolor="farbe" text="farbe">

Anstatt "farbe" muss die englische Bezeichnung der gwünschen Farbe eingegeben werden. Die 9 wichtigsten Farbkennzeichnungen sind:

Schwarz=black
Grün=green
Blau=blue
Kastanienbraun=maroon
Rot=red
Gelb=yellow
Silber=silver
Orange=orange
Weiß=white

Da man natürlich noch mehr als diese 9 Farben anzeigen kann, werden andere Farben in Hexcode angegeben. Beispielsweise wäre #000000 schwarz und #FFFFFF weiß. Für die Angabe dieses Codes gibt es aber entspechende Tools und ein guter HTML-Editor hat so eine Funktion ebenfalls integriert.

1.9 Die Schriften

Desweiteren kann auch die Schriftgröße wie folgt festgelegt werden:

<font size="X">Text</font>

Anstatt von X kann eine Zahl zwischen 1 und 7 eingesetzt werden, Die Standardschriftgröße ist 3. Ihre Besucher werden allerdings nicht in allen Browsern den Text gleich groß sehen. Denn Faktoren wie Bildschirmgröße, Bildschirmauflösung und Voreinstellung im Browser können Schriftgrößen beeinflussen.
Die Schriftfarbe eines beliebigen Textes wird wie folgt bestimmt:

<font color="farbe">Text</font>

Anstatt Farbe muss der englische Name der gewünschten Farbe oder der entsprechende Hex-Code eingegeben werden. Natürlich können Schriftgröße und Schriftfarbe kombiniert werden, in dem man die Attribute in einen Tag übernimmt:

<font color="farbe" size="X">Text</font>

Die Schriftart kann ebenfalls bestimmt werden:

<font face="Schriftart">Text</font>

Schriftart wird durch die entsprechende Schriftart ersetzt, beispielsweise Arial. Allerdings sehen andere Internetsurfer den text nur dann in der ausgewähltem Schriftart, wenn diese ebenfalls die Schriftart installiert haben. Ansonsten wird der Text in der Standardschriftart, also "Times New Roman" angezeigt. Bedenke, dass ausgefallene Schriftarten schwer zu lesen sind. Beliebt dagegen sind seriflose Schriften wie "Arial" oder "Verdana".

1.10 Die Trennlinie

Um Abschnitte zu trennen, bietet sich die Trennlinie an. Dabei handelt es sich um horizontale Leisten. Der HTML-Tag ist einfach:
<hr> (hr wie engl. horizontal rule = horzizontale Leiste)

Um den Reliefeindruck der Leiste aufzuheben, fügst Du das Attribut noshade (deutsch: kein Schatten) hinzu:

<hr noshade>

Mit size="X" kann die Dicke und mit width="X%" die Weite in Prozent, aber auch in Pixel angegeben werden.

1.11 Die Listen

Auch für Aufzählungslisten gibt es Tags. Diese bewirken, dass die Liste mit Aufzählungspunkten ausgestattet wird:

<ul>
<li>Punkt1
<li>Punkt2
</ul>

Schreibe einfach hinter <li> (li für engl. list ) auflisten) den gewünschten Text. Text zwischen <ul>-Tags (ul für engl. unumbered list = unnumerierte Liste) wird eingerückt.

1.12 Kommentare

In einem HTML-Quelltext können Kommentare eingefügt werden, die nicht vom Browser angezeigt werden. So können Layoutinformationen oder andere relevante Informationen im Quelltext eingegeben werden:

<!-- Kommentar -->

Es können aber auch ganze HTML-Tags unwirksam gemacht werden:

<!-- <img src="ich.gif" alt="Bild von mir"> -->

1.13 XHTML, der neue Standard

Zum Jahresende will das W3C einen Nachfolger von HTML 4.0 vorstellen: XHZML 1.0. Die Idee dahinter ist zukunftsträchtig: XHTML definiert den aktuellen Standard HTML 4.0 so um, dass er kompatibel zu XML wird. Die praktischen Änderungen haben für Web-Autoren allerdings keine großen Auswirkungen. XHMTL ist aber ein großer Schritt vorwärts, denn die Orientierung an XML erleichtert die Erweiterung um zusätzliche Tags. Wenn der XHTML-Standard verabschiedet ist, will das W3C XHTML-Module definieren. Damit lässt sich die Sprache dann nach belieben erweitern. Die Änderungen zielen vor allem auf den Wildwuchs im HTML-Code, denn die Browser oft tolerieren. Nachzulesen sind die Änderungen unter www.w3.org/TR/xhtml1.

1.14 Weiterführende Links

Mit den HTML-Tags, welche bis jetzt besprochen wurden, kannst Du schon sehr vieles verwirklichen. Das heißt den "Grundwortschatz" kennst Du nun. Natürlich ist das Thema noch lange nicht abgedeckt. HTML bietet noch viel mehr Möglichkeiten zur Webseiten-Gestaltung. Mit DHTML lassen sich Dinge auf der Webseite animieren und Javascript stellt eine komplexe Script-Sprache zur Verfügung. Wer tiefer in die Welt von HTML, DHTML, Javascript, CGI, CSS einsteigen möchte sollte sich Selfhtml von Stefan Münz anschauen. In mühsamer Kleinarbeit hat der Autor eine umfangreiche und präzise Dokumentation von HTML verfasst. Diese Dokumentation hat mittlerweile Kultstatus und ist auch als Buch verfügbar:

Wie schreibe ich ein HTML-Dokument ?
Eine sehr einfache Beschreibung von Grundelementen und dem Umgang mit diesen. Von schwierigeren HTML-Elementen wie Tabellen oder Frames wird hier nichts geschrieben.
(DEUTSCH / Für Anfänger)

HTML-Code Tutorial
Optisch sehr ansprechende Referenz über die Benutzung von HTML und Erstellung von HTML-Seiten in Englisch.
(Englisch / SEHR GUT)

HTML-Dateien selbst erstellen
Das "Kompedium für HTML-Entwickler beschäftigt sich umfangreich mit allen möglichen Themen rund um HTML und das Internet. beinhaltet auch Kurzbeschreibungen von Java, VRML, DHTML und CGI. Die neuste Version kann online gelesen, downgeloaded oder als Buch bestellt werden.
(DEUTSCH / SEHR GUT)

W3-Konsortium
Gruppe von den führenden HTML-Autoren weltweit. Diese bestimmen die neuen Standards von HTML und haben sich vor ca. 4 Jahren auf den ersten Standard von HTML aus vielen kleinen spezifischen Programiersprachen geeinigt. Auf dieser Webseite können englische Anleitungen angeschaut werden.
(DEUTSCH / GUT, Nur für Profis)