# Textstrukturierung

Die intrinsisch motivierte Interaktion zwischen Mensch und Computer verifiziert die funktionalstrukturelle Hypothese, der zufolge sich die Evidenz der Realität als Reduktion zur Komplexität interpretieren lässt ... Mit anderen Worten: Der Mensch drückt ›RETURN‹, der Computer liefert ein falsches Ergebnis ...
– Niels Sedat, deutscher Systemprogrammierer

In diesem Kapitel werden Sie sich mit den allgemeinen Elementen zur Textstrukturierung und zu Element-Attributen befassen und die Regeln zu Texten und Zeichen in HTML-Dokumenten kennen lernen.

# Absätze

Bisher haben Sie Text, der im Anzeigebereich des Browsers ausgegeben werden soll, einfach im Gültigkeitsbereich des body-Elements geschrieben. In früheren HTML-Versionen war dies auch vollkommen in Ordnung. Seit der Version 4.0 (mit der wir uns in diesem Buch befassen) ist dies aber nicht mehr HTML-konform. Zwar stellen die gängigsten Browser einen solchen Text fehlerfrei dar, dies bedeutet aber nicht, dass es kein Fehler ist, da Browser in der Regel über eine sehr hohe Fehlertoleranz verfügen.

Anstatt den Text einfach im body-Element zu notieren, wird dafür das p-Element (p = engl. paragraph, dt. Absatz) verwendet. Dieses Element bietet auch sogleich einige Vorteile:

Nach einem p-Element ist ein deutlicher Absatz zum folgenden Element zu erkennen.
Mit einem speziellen Attribut lässt sich der Text wie in Textverarbeitungsprogrammen links, rechts, zentriert oder als Blocksatz ausrichten.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Beispiel für das p-Element //-->
<html>
  <head>
    <title>Listing 2.1</title>
  </head>
  <body>
    <p>Dieser Text steht in einem p-Element.</p>
    <p>Dies ist ein weiterer
       Text in einem
       zweiten Absatz.
    </p>
  </body>
</html>

Listing 2.1: Beispiel für das p-Element

Abbildung 2.1: Listing 2.1 im Internet Explorer 6.0 dargestellt

Wenn Sie das Listing 2.1 mit den Zeilenumbrüchen in Ihren Editor übertragen, werden Sie bei der Darstellung im Browser zwei Dinge erkennen: den deutlichen Abstand zwischen beiden Absätzen und – obwohl der Text im zweiten Absatz im HTML-Dokument in drei Zeilen steht – dass der Browser den Text in nur einer Zeile darstellt. Diesen Effekt werde ich Ihnen an späterer Stelle noch einmal genauer erklären.

# Textausrichtung

Standardmäßig wird der mit Elementen der Textstrukturierung ausgezeichnete Text linksbündig ausgerichtet. Das heißt, dass ein Text, der sich über mehrere Zeilen erstreckt, an einem imaginären Rand auf der linken Seite ausgerichtet ist und eine vertikale Linie bildet. Um dies zu beeinflussen, gibt es das Attribut align und vier Parameter, um den Text, wie in den meisten Textverarbeitungsprogrammen auch, linksbündig, rechtsbündig, zentriert oder als Blocksatz auszurichten. Die entsprechenden Parameter lauten:

Wert	Erklärung
left	Richtet den Absatz am linken Seitenrand aus.
right	Richtet den Absatz am rechten Seitenrand aus.
center	Zentriert den Absatz in der Seitenmitte.
justify	Richtet den Absatz als Blocksatz aus.

Tabelle 2.1: Mögliche Werte für das Attribut align

Nun können wir das bereits bekannte p-Element mit einer neuen Ausrichtung versehen. Ein Beispiel-Listing, das alle vier Absatzausrichtungen darstellt, finden Sie in Listing 2.2 und die entsprechende Darstellung im Internet Explorer 6.0 in Abbildung 2.2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Textausrichtung //-->
<html>
  <head>
    <title>Listing 2.2</title>
  </head>
  <body>
    <p align="left">Dieser Absatz ist am linken Seitenrand ausgerichet.</p>
    <p align="right">Dieser Absatz ist am rechten Seitenrand ausgerichet.</p>
    <p align="center">Dieser Absatz ist zentriert.</p>
    <p align="justify">Dieser Absatz ist wurde mit Hilfe des align-Attributes
      als Blocksatz ausgerichet und wurde mit Absicht mit einem l&auml;ngeren
      Text versehen und den Parameter justify auch beispielhaft darstellen zu
      k&ouml;nnen. Dieser Absatz ist wurde mit Hilfe des align-Attributes als
      Blocksatz ausgerichet und wurde mit Absicht mit einem l&auml;ngeren Text
      versehen und den Parameter justify auch beispielhaft darstellen zu
      k&ouml;nnen.</p>
  </body>
</html>

Listing 2.2: Textabsätze mit unterschiedlicher Ausrichtung

Bei der Verwendung des Parameters justify ist eine wichtige Tatsache zu berücksichtigen: Damit der Absatz auch wirklich als Blocksatz ausgerichtet wird, muss er sich mindestens über zwei Zeilen erstrecken. Ansonsten wäre zum Parameter left kein optischer Unterschied erkennbar. Berücksichtigen Sie dies, falls Sie der Meinung sind, dass der Absatz vom Browser nicht korrekt ausgerichtet dargestellt wird.

Abbildung 2.2: Textabsätze mit unterschiedlichen Ausrichtungen

# Zeilenumbrüche

In Listing 2.1 konnten Sie eine Besonderheit feststellen: Der Text, der im zweiten Absatz im HTML-Dokument über drei Zeilen verteilt war, wurde im Browser in einer Zeile dargestellt. Das liegt daran, dass HTML Zeilenumbrüche oder mehrere Leerzeichen hintereinander in einem p-Element ignoriert. Um trotzdem einen Zeilenumbruch erzwingen zu können, wird das br-Element (engl. line break, dt. Zeilenumbruch) verwendet.

Dieses Element, wie auch viele weitere, die Sie kennen lernen werden, besitzt eine Besonderheit: Es gibt kein Ende-Tag zum br-Element, da es einen Text nicht direkt formatiert und keine weiteren Elemente enthalten darf – es gibt also keinen Gültigkeitsbereich.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Beispiel für Zeilenumbrüche im p-Element //-->
<html>
  <head>
    <title>Listing 2.3</title>
  </head>
  <body>
    <p>Dieser Absatz enth&auml;lt
    sehr viel Text<br> der im
    HTML-Dokument aber         ein vollkommen
    anderes       Erscheinungsbild<br>
    besitzt, als die Ausgabe     im Browser vermuten
    l&auml;sst.
    </p>
  </body>
</html>

Listing 2.3: Zeilenumbrüche

Abbildung 2.3: Darstellung des Listings 2.3 im Internet Explorer 6.0

# Vorformatierter Text

Gelegentlich ist es hilfreich, Text, der in einem HTML-Dokument notiert wurde, exakt so im Browser ausgeben zu lassen, z. B. bei Listings, Verzeichnislisten, der Darstellung von Messwerten und Ähnlichem. In einem solchen Fall sollten Sie das pre-Element (pre = engl. preformatted, dt. vorformatiert) verwenden. Text, der im Gültigkeitsbereich eines pre-Elements steht, wird außerdem mit einer nichtproportionalen Schrift dargestellt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Vorformatierter Text //-->
<html>
  <head>
    <title>Listing 2.4</title>
  </head>
  <body>
    <pre>Dieser Text ist vorformatiert.
    Alle Zeilenumbr&uuml;che      und Leerzeichen werden
        exakt so wie im      HTML-Dokument
eingegeben,      dargestellt.
    </pre>
  </body>
</html>

Listing 2.4: Vorformatierter Text

Die Ausrichtung vorformatierten Textes lässt sich nicht mit dem align-Attribut oder einer anderen Methode beeinflussen, wohl aber die optische Darstellung (Farbe, Größe, Schriftart) mittels des font-Elements (das Sie später noch kennen lernen werden) oder CSS.

Wenn Sie jedoch wollen, dass bei der Ausgabe des Textes alle Formatierungen mittels der Leerzeichen korrekt beibehalten werden, sollten Sie als Schriftart immer eine dicktengleiche Schrift wie Courier wählen und nicht etwa Arial oder Times New Roman.

Abbildung 2.4: Vorformatierter Text

# Überschriften

Für Überschriften gibt es in HTML sechs verschiedene Elemente, die sich in der Darstellung der Schrift unterscheiden. Die Bezeichnung der Elemente beginnt mit dem Buchstaben h (h = engl. Header, dt. Titel), gefolgt von einer Zahl zwischen 1 und 6. Dabei ist eine Überschrift mit dem h1-Element die größte und eine Überschrift mit dem h6-Element die kleinste.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Beispiel für Überschriften in HTML //-->
<html>
  <head>
    <title>Listing 2.5</title>
  </head>
  <body>
    <h1>&Uuml;berschrift 1. Ordnung</h1>
    <h2>&Uuml;berschrift 2. Ordnung</h2>
    <h3>&Uuml;berschrift 3. Ordnung</h3>
    <h4>&Uuml;berschrift 4. Ordnung</h4>
    <h5>&Uuml;berschrift 5. Ordnung</h5>
    <h6>&Uuml;berschrift 6. Ordnung</h6>
  </body>
</html>

Listing 2.5: Überschriften in HTML

Abbildung 2.5: Listing 2.5 im Internet Explorer 6.0

Standardmäßig werden Überschriften im Browser linksbündig dargestellt. Mittels des align-Attributs können Sie dies wie beim p-Element jedoch beeinflussen.

Auch eine Ausrichtung mit Hilfe des justify-Parameters ist möglich, wobei auch hier wieder gilt: Die Überschrift muss sich über mindestens zwei Zeilen erstrecken, um als Blocksatz ausgerichtet werden zu können.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Beispiel für Überschriften in HTML //-->
<html>
  <head>
    <title>Listing 2.6</title>
  </head>
  <body>
    <h1 align="center">Zentrierte &Uuml;berschrift 1. Ordnung</h1>
    <h2 align="left">Linksb&uuml;ndige &Uuml;berschrift 2. Ordnung</h2>
    <h3 align="right">Rechtsb&uuml;ndige &Uuml;berschrift 3. Ordnung</h3>
    <h4 align="justify">Blocksatz-&Uuml;berschrift 4. Ordnung</h4>
  </body>
</html>

Listing 2.6: Überschriften mit unterschiedlicher Ausrichtung

Damit Sie die Ausrichtung des h4-Elements in Listing 2.6 als Blocksatz erkennen können, sollten Sie das Browserfenster einfach von Hand verkleinern.

# Physische Textauszeichnung

Neben den verschiedenen Absatzformaten (Textabsätze, vorformatierte Absätze und Überschriften) gibt es spezielle Elemente, um Wörter, Sätze oder Absätze von anderen Texten hervorzuheben, z. B. fett, kursiv oder unterstrichen. Die Elemente zur Textauszeichnung werden als Inline-Elemente bezeichnet. Die Elemente für Absatzformate (p, h1–6 und pre) gehören zu den Blockelementen. Der Unterschied zwischen diesen beiden Elementgruppen ist, dass nach Blockelementen ein neuer Absatz eingeleitet wird. In den Abbildungen 8.1, 8.2 und 8.5 ist dies sehr gut zu erkennen. Inline-Elemente hingegen integrieren sich in den Textfluss und leiten keinen neuen Absatz ein.

Insgesamt stellt Ihnen HTML zehn verschiedene Inline-Elemente zur Textauszeichnung zur Verfügung:

b (engl. bold, dt. fett)
zeichnet einen Text fett aus.
i (engl. italic, dt. kursiv)
zeichnet einen Text kursiv aus.
u (engl. underlined, dt. unterstrichen)
zeichnet einen Text unterstrichen aus.
s oder strike (dt. durchgestrichen)
zeichnet einen Text durchgestrichen aus.
big (dt. groß)
zeichnet einen Text größer aus.
small (dt. klein)
zeichnet einen Text kleiner aus.
sup (engl. superior, dt. hochgestellt)
zeichnet einen Text hochgestellt aus.
sub (dt. tiefgestellt)
zeichnet einen Text tiefgestellt aus.
tt (engl. teletype, dt. Fernschreiber)
zeichnet einen Text mit nicht proportionaler Schrift aus (wie in einem Fernschreiben).

Um die Verwendung der Inline-Elemente zu veranschaulichen, sehen Sie sich Listing 2.7 und Abbildung 2.6 an.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Elemente für physische Textauszeichnung //-->
<html>
  <head>
    <title>Listing 2.7</title>
  </head>
  <body>
    <p>Mit verschiedenen Inline-Elementen ist es m&ouml;glich, Texte <b>fett</b>, <i>kursiv</i>, <u>unterstrichen</u>, <s>durchgestrichen</s>, <big>gr&ouml;&szlig;er</big>, <small>kleiner</small>, <sup>hochgestellt</sup>, <sub>tiefgestellt</sub> oder <tt>nicht-proportional</tt> dazustellen.</p>
    <p>Auch beliebige Kombinationen dieser Inline-Elemente sind m&ouml;glich, um Text <b><i>fettkursiv</i></b>oder <big><s>gr&ouml;&szlig;er und durchgestrichen</s></big> etc. darzustellen.</p>
  </body>
</html>

Listing 2.7: Verschiedene Inline-Elemente zur physischen Textauszeichnung

In Listing 2.7 ist auch schon darauf eingegangen worden, dass sich die Elemente für die physische Textauszeichnung beliebig kombinieren lassen, wobei es keinen Sinn machen würde, einen Text mit zwei verschachtelten b-Elementen oder strike-Elementen auszuzeichnen, weil der Text dadurch nicht doppelt fett oder doppelt durchgestrichen dargestellt werden würde. Einen Text als hoch- und tiefgestellt (durch die Verschachtelung von sup und sub) oder größer und kleiner (big und small) auszuzeichnen, macht genauso wenig Sinn.

Achten Sie bei der Sprachvariante strict darauf, dass die vorangestellten Elemente innerhalb eines Blockelements verwendet werden müssen und nicht einfach so im Gültigkeitsbereich des body-Elements, wie es in der Variante transitional erlaubt wäre.

Abbildung 2.6: Darstellung des Listings 2.7 im Internet Explorer 6.0

# Logische Textauszeichnung

Ähnlich der physischen Textauszeichnung ist es mit logischer Textauszeichnung möglich, Texte und Textbausteine hervorzuheben. Dabei ist die optische Darstellung nicht explizit festgelegt und kann von Browser zu Browser (selbst in den einzelnen Versionen) variieren. Auch für diesen Fall stellt Ihnen HTML zehn verschiedene Inline-Elemente zur Verfügung:

abbr
zeichnet einen Text als abgekürzte Schreibweise aus.
acronym
zeichnet einen Text als Abkürzung aus.
cite
zeichnet einen Text als Zitat aus.
code
zeichnet einen Text als Quelltext aus.
dfn
zeichnet einen Text als Definition aus.
em
(engl. emphasis; dt. Betonung) zeichnet einen Text hervorgehoben aus.
kbd
zeichnet einen Text als Tastatureingabe aus.
samp
zeichnet einen Text als Beispiel aus.
strong
zeichnet einen Text stärker betont aus.
var
zeichnet einen Text als Variable/variabel aus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Elemente für logische Textauszeichnung //-->
<html>
  <head>
    <title>Listing 2.8</title>
  </head>
  <body>
    <p>Es folgen Beispiele f&uuml;r logische Textauszeichnung: <abbr>abgek&uuml;rzte Schreibweise</abbr>, <acronym>Abk&uuml;rzung</acronym>, <cite>Zitat</cite>, <code>Quellcode</code>, <dfn>Definition</dfn>, <em>emphatisch</em>, <kbd>Tastatureingabe</kbd>, <samp>Beispiel</samp>, <strong>stark betont</strong> und <var>Variable/variabler Text</var>.</p>
    <p>Auch eine Kombination ist m&ouml;glich: <kbd><strong>stark betonte Tastatureingabe</strong></kbd>.</p>
  </body>
</html>

Listing 2.8: Beispiele für logische Textauszeichnungen

Abbildung 2.7: Darstellung des Listings 2.8 im Internet Explorer 6.0

Auch logische Textauszeichnungen dürfen miteinander verschachtelt werden. Dies macht in vielen Kombinationen aber keinen Sinn, und Sie sollten deshalb davon Abstand nehmen (auch wenn ich Ihnen diese Möglichkeit aufgezeigt habe). Die Regeln für die HTML-Varianten strict und transitional entsprechen denen der physischen Textauszeichnungen und sollten eingehalten werden, um eine korrekte Darstellung gewährleisten zu können.

Ebenfalls möglich ist eine Kombination der logischen und physischen Textauszeichnungen mit Überschriften. So ließe sich eine Überschrift 1. Ordnung (<h1>...</h1>) auch mit der Textauszeichnung kursiv (<i>...</i>) oder einer Tastatureingabe (<kbd>...</kbd>) kombinieren, um nur ein paar Beispiele zu nennen.

# Schriftformatierung

Die bereits bekannten Elemente h1–6, p und pre lassen sich auch mit einem weiteren Element nach Ihren Wünschen verändern und anpassen. Anstatt den Texten mittels physischer oder logischer Textauszeichnung ein bereits definiertes Aussehen zuzuweisen, können Sie mit Hilfe des font-Elements die Schriftgröße, die Schriftfarbe und die Schriftart individuell anpassen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Schriftformatierung //-->
<html>
  <head>
    <title>Listing 2.9</title>
  </head>
  <body>
    <h1><font face="sans-serif">Schriftformatierung</font></h1>
    <p><font size="4" color="blue" face="cursive">Umformatierter Absatz mit gr&ouml;&szlig;erer Schrift, blauer Farbe und einer Schreibschrift.</font></p>
  </body>
</html>

Listing 2.9: Schriftformatierungen

In Abbildung 2.8 können Sie deutlich die Auswirkung des font-Elements auf die anderen Elemente erkennen. Es sei jedoch gesagt, dass das font-Element als deprecated gekennzeichnet ist. Das W3C plant, solche Elemente in kommenden HTML-Version nicht mehr einzusetzen.

Abbildung 2.8: Darstellung des Listings 2.9 im Internet Explorer 6.0

# Vererbung

Das Besondere bei HTML und den Elementen ist die so genannte Vererbung. Bereits zu Beginn des ersten Kapitels sprach ich von Eltern- und Kindelementen. Ein Element, das im Gültigkeitsbereich eines anderen Elements notiert wurde, ist das Kindelement. Das Element, das das Kindelement enthält, ist das Elternelement.

Ähnlich wie bei der Beziehung zwischen Eltern und Kindern erben auch die Kindelemente in HTML die Eigenschaften ihrer Elternelemente – im bildlichen Sinne erben sie die Gene. Dabei erhalten sie alle Eigenschaften, die das Elternelement besitzt, und erweitern oder verändern diese Eigenschaften, z. B. durch eine andere Schriftdicke, Schriftgröße oder Schriftart.

Exakt so verhält es sich auch mit den Textauszeichnungen (physischen und logischen): Der Text im Gültigkeitsbereich eines Textabsatzes wird standardmäßig in der Schriftart Times New Roman (beim Internet Explorer) und einer absoluten Schriftgröße von 3 dargestellt. Zeichnen Sie einen bestimmten oder den gesamten Teil des Textes mit dem i-Element (kursiv) aus, behält der Text zwar seine Eigenschaften wie Schriftgröße und -art bei (Times New Roman, Größe 3), erhält aber zusätzlich die Eigenschaft kursiv.

<p><i>Textabsatz</i></p>
  <!-- Stellt Absatz kursiv dar //-->

Würden Sie den zuvor in kursiv geänderten Text anstelle dessen mit dem Element kbd (Tastatureingabe) auszeichnen, würden Sie keine neue Eigenschaft hinzufügen, sondern die vorhandene Eigenschaft Schriftart von Times New Roman in Courier New verändern.

<p><kbd>Textabsatz</kbd></p>
  <!-- Stellt Absatz mit Courier New dar //-->

Würden Sie nun innerhalb der Elemente i oder kbd weitere Elemente für die Textauszeichnung notieren, würden auch diese Elemente die Eigenschaften ihres Elternelements erben.

<p><kbd>Text<b>absatz</b></kbd></p>
  <!-- Stellt Absatz mit Courier New dar und das Teilwort absatz zusätzlich in fett //-->

Um nun die Schrift eines Elements anzupassen, kennt das font-Element drei verschiedene Attribute:

Attribut	Erklärung
face	Ändert das »Gesicht« bzw. die Schriftart des Textes.
size	Ändert die Schriftgröße des Textes.
color	Ändert die Farbe, in der der Text dargestellt wird.

Tabelle 2.2: Attribute des font-Elements

# Schriftart

Mit dem Attribut face können Sie die eingestellte Standard-Schriftart des Elements verändern. Sie können sowohl den Namen einer installierten Schriftart angeben (z. B. Times New Roman oder Arial) als auch einen Schrifttyp angeben: serif (Serifenschrift wie Times New Roman), sans-serif (serifenlose Schrift wie Arial), cursive (Schreibschrift wie Comic Sans), fantasy (Fantasieschrift) oder monospace (nichtproportionale Schrift wie Courier New).

Die Angabe eines Schrifttyps (also serif oder monospace) ist eindeutig sinnvoller, da nicht auf jedem Rechner die gleichen Schriftarten installiert sind. Dies ist vor allem abhängig vom Betriebssystem. Ist die von Ihnen gewünschte Schriftart nicht installiert, wird die Standard-Schriftart verwendet, was zu unschönen Ergebnissen führen kann. Geben Sie aber lediglich einen Schrifttyp an, kann der Browser eine passende Schriftart heraussuchen und diese verwenden.

Sie sollten nun aber nicht anfangen, Schriftarten auf Ihrer Homepage zum Download anzubieten, damit der Benutzer sie herunterladen und installieren kann. Zum einen kann das für Sie rechtliche Konsequenzen bedeuten (Schriftarten sind Copyright-geschützt), und zum anderen lässt sich nicht jede Schriftart auf jedem Betriebssystem installieren.

Ein Beispiel für die Angabe einer Schriftart könnte

<font face="Times New Roman">Angabe einer Schriftart</font>

lauten und für die Angabe eines Schrifttyps:

<font face="cursive">Angabe eines Schrifttyps</font>

# Schriftgröße

Bei der Wahl der Schriftgröße stehen Ihnen zwei Möglichkeiten zur Verfügung: absolut oder relativ. Möchten Sie die Schriftgröße absolut angeben, müssen Sie als Wert eine Zahl von 1 bis 7 mittels des Attributs size übergeben (wobei 7 am größten und 1 am kleinsten ist). Bei einer relativen Angabe beziehen Sie sich auf die Standard-Schriftgröße und erhöhen oder verringern diese durch das Voranstellen eines + (Plus) oder eines – (Minus) und der Zahl, um welche die Größe erhöht oder verringert werden soll.

Möchten Sie also die Schriftgröße eines Textes in die absolute Größe 5 umwandeln, müssen Sie das folgende Konstrukt verwenden:

<font size="5">Text wird in der Gr\&ouml;\&szlig;e 5 dargestellt</font>

Um die Schriftgröße um eine Stufe zu erhöhen, z. B. von 3 auf 4, würde die Notation folgendermaßen aussehen:

<font size="+1">Textgr\&ouml;\&szlig;e wird um 1 erh\&ouml;ht </font>

Und um den Text beispielsweise um zwei Stufen zu verkleinern, würden Sie Folgendes notieren:

<font size="-1">Textgr\&ouml;\&szlig;e wird um 2 verkleinert </font>

# Schriftfarbe

Mit dem color-Attribut können Sie die Farbe der Schrift verändern. Auch hier stehen Ihnen wieder zwei Möglichkeiten zur Verfügung: die Angabe eines der 16 Farbworte oder eines Hex-Tripel-Werts. Farbworte sind black, blue, red usw. Das Basiskonstrukt lautet:

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

Um einem Text die Farbe Grün (engl. green) mittels eines Farbwortes zuzuweisen, müssten Sie Folgendes notieren:

<font color="green">Textfarbe Gr\&uuml;n</font>

Äquivalent verhält sich dies mit allen anderen Farbworten, nur dass als Parameter das entsprechende Farbwort angegeben werden muss. Nachfolgend finden Sie eine Tabelle mit den 16 wichtigsten Farbworten. Die vollständige Liste ist im Anhang untergebracht.

HTML-Farbwort	Beschreibung
Black	Schwarz
Maroon	Kastanienbraun, dunkles Rot
Green	Grün
Olive	Olivgrün
Navy	Marineblau
Purple	Purpur
Teal	Dunkles Türkis
Gray	Grau
Silver	Silber
Red	Rot
Lime	Limone/Hellgrün
Yellow	Gelb
Blue	Blau
Fuchsia	Violett
Aqua	Hellblau
White	Weiß

Tabelle 2.3: Die wichtigsten HTML-Farbworte und ihre Beschreibung

<font color="red">Textfarbe Rot</font>
<font color="purple">Textfarbe Purpur</font>
<font color="aqua">Textfarbe Hellblau</font>

Die Angabe eines Hex-Tripel-Werts ist ein wenig komplizierter. Anstelle eines der Farbworte zu verwenden (und somit eine vordefinierte Farbe), wird die gewünschte Farbe zusammengemischt. Dabei wird das für Computer übliche RGB-System verwendet. Die Abkürzung RGB steht für die drei Grundfarben Rot, Grün und Blau. Die Farben werden additiv gemischt, und je höher der jeweilige Anteil der Farben ist, desto heller ist der daraus resultierende Farbton. Äquivalent dazu: Je geringer die einzelnen Farbanteile sind, desto dunkler ist das Resultat.

Der Wertebereich der roten, grünen und blauen Anteile liegt jeweils zwischen 0 und 255 (8 Bit). Da Sie für jede Grundfarbe einen Maximalwert von 255 einsetzen dürfen, stehen uns 16.581.375 Farben zur Verfügung (255 × 255 × 255), wesentlich mehr also, als die Angabe eines Farbworts ermöglicht.

Um nun eine Farbe zu mischen, müssen Sie den jeweiligen Farbanteil in hexadezimalen Zahlen angeben. Anders als beim dezimalen Zahlensystem mit der Basis 10 besitzt das hexadezimale Zahlensystem die Basis 16. Die zusätzlichen 6 Zahlen werden durch die Buchstaben von A bis F (entspricht dezimal den Zahlen 10 bis 15) repräsentiert. Die Zahlenreihe lautet also 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E und F. Für eine hexadezimale Angabe stehen Ihnen zwei Stellen zur Verfügung. Der Dezimalwert 0 würde in der entsprechenden Schreibweise 00 lauten, und der Dezimalwert 255 lautet FF. Dies mag am Anfang zwar etwas kompliziert klingen, es ist aber relativ einfach.

Achten Sie darauf, immer zwei Stellen pro Farbanteil zu notieren. Falls der gewünschte Farbanteil einmal nur eine Stelle besitzt, notieren Sie davor eine 0, um auf jeden Fall auf zwei Stellen zu kommen. Ansonsten wird der Text entweder überhaupt nicht farbig dargestellt oder in einer falschen Farbe.

Ich werde Ihnen nun ein paar Beispiele durchrechnen. Ich möchte die Dezimalzahl 163 in eine Hexadezimalzahl umrechnen. Ich weiß, dass Hexadezimalzahlen als Basis den Wert 16 verwenden. Teile ich also 163 durch 16, erhalte ich das Ergebnis 10,1875. Der ganzzahlige Anteil der Division lautet 10, und das wird in hexadezimaler Schreibweise durch A dargestellt. Dies ist die erste Stelle. Der Rest aus der Division (163/16) beträgt 3, die im hexadezimalen System genauso notiert wird. Dies ist die zweite Stelle. Die Umrechnung von 163 in eine hexadezimale Zahl lautet also A3.

So würde die Dezimalzahl 250 als Hexadezimalzahl z. B. FA lauten (250/16 = 15 Rest 10).

Andersherum lässt sich eine hexadezimale Zahl auch wieder in eine dezimale Zahl umrechnen. Nehmen Sie als Beispiel den hexadezimalen Wert BC. Zuerst wandeln Sie die erste Stelle (Zahl B) in eine für Sie verwendbare Zahl um und multiplizieren sie mit 16. Da B der dezimalen Zahl 11 entspricht, rechnen Sie also 11 × 16 und erhalten das Ergebnis 176. Dann wandeln Sie die zweite Stelle (Zahl C) in eine dezimale Zahl um und addieren sie zu der umgerechneten ersten Stelle. C steht für die dezimale Zahl 12. Das Ergebnis lautet also 188 (176+12).

Damit hexadezimale Zahlen von dezimalen zu unterscheiden sind, werden sie mit # (Doppelkreuz oder Raute) eingeleitet. Danach folgen in der Reihenfolge Rot, Grün und Blau die hexadezimalen Zahlen:

#RRGGBB

Für die Farbe Gelb (Rot = 255, Grün = 255 und Blau = 0) würde die entsprechende hexadezimale HTML-Notation #FFFF00 lauten (255 = FF und 0 = 00). Die entsprechenden Hex-Tripel-Werte zu den HTML-Farbworten finden Sie in Tabelle 8.4.

HTML-Farbwort	Hex-Tripel-Wert
Black	#000000
Maroon	#7F0000
Green	#007F00
Olive	#7F7F00
Navy	#00007F
Purple	#7F007F
Teal	#007F7F
Gray	#7F7F7F
Silver	#BFBFBF
Red	#FF0000
Lime	#00FF00
Yellow	#FFFF00
Blue	#0000FF
Fuchsia	#FF00FF
Aqua	#00FFFF
White	#FFFFFF

Tabelle 2.4: HTML-Farbworte als Hex-Tripel-Werte

Graustufen bzw. Grautöne erzeugen Sie durch gleich hohe Farbanteile. Dadurch stehen Ihnen insgesamt 256 verschiedene Grautöne zur Verfügung. Ein dunkles Grau könnte durch #303030 erzeugt werden, ein mittleres Grau durch #868686 und ein helles Grau durch #CBCBCB. Um nun die Hex-Tripel-Werte zu verwenden, nehmen Sie die Konstrukte (inkl. #-Zeichen) anstelle eines Farbwortes als Parameter für das color-Attribut. Es folgen verschiedene Beispiele:

<font color="#303030">Dunkles Grau</font>
<font color="#868686">Mittleres Grau</font>
<font color="#CBCBCB">Helles Grau</font>
<font color="#00BB00">Gr\&uuml;n</font>
<font color="#003399">Gr\&uuml;nblau</font>

# Dateiweite Farben

Auch eine Hintergrundfarbe lässt sich für ein HTML-Dokument festlegen. Standardmäßig ist die Farbe auf Weiß oder Grau gesetzt bzw. richtet sich danach, wie der Benutzer die Einstellungen in seinem Browser angepasst hat. Und auch die Farbe der Hyperlinks in einem HTML-Dokument kann dateiweit an die eigenen Wünsche und Vorstellungen angeglichen werden, genauso wie die Textfarbe.

# Hintergrund und Textfarbe

Zum Anpassen des Hintergrunds wird das Attribut bgcolor (engl. background color, dt. Hintergrundfarbe) verwendet. Es wird im Start-Tag des body-Elements notiert und bekommt als Parameter die gewünschte Farbe übergeben. Dabei ist es egal, ob Sie die Farbangabe als Farbwort oder Hex-Tripel-Wert formulieren. HTML akzeptiert beides.

<body bgcolor="blue">
  <!-- blauer Hintergrund //-->
<body bgcolor="#00FF00">
  <!-- grüner Hintergrund //-->

Für die Textfarbe wird das Attribut text verwendet, das ebenfalls im body-Start-Tag notiert wird. Auch hier sind Farbangaben in Farbworten oder Hex-Tripel-Werten gültig.

<body text="red">
  <!-- rote Textfarbe //-->
<body text="#FFFF00">
  <!-- gelbe Textfarbe //-->

# Hyperlink-Farben

Ein Hyperlink kennt drei verschiedene Zustände: normal, bereits besucht oder momentan aktiv. Jeder dieser drei Zustände wird im Dokument durch eine andere Farbe dargestellt. Standardmäßig sind Hyperlinks blau, besuchte Links violett und aktive Links rot. Mittels verschiedener Attribute lassen sich auch diese Farben verändern:

Attribut	Übersetzung	Erklärung
link	Verknüpfung	Ändert die Farbe für normale Hyperlinks.
vlink	Besuchte Verknüpfung	Ändert die Farbe für bereits besuchte Hyperlinks.
alink	Aktive Verknüpfung	Ändert die Farbe eines Hyperlinks der gerade aktiven Seite.

Tabelle 2.5: Attribute zur farblichen Anpassung von Hyperlinks

Alle drei Attribute akzeptieren Farbangaben als Farbwort oder Hex-Tripel-Wert und werden im Start-Tag des body-Elements notiert.

<body link="green" vlink="blue" alink="#000000">
  <!-- Hyperlinks sind nun grün, besuchte Hyperlinks blau und   
       aktive Hyperlinks schwarz //-->

Natürlich müssen Sie nicht immer alle drei Attribute angeben. Es reicht die Angabe der Attribute aus, die Sie auch wirklich ändern möchten.

# Listen

Oftmals möchte man eine übersichtliche Dateiliste, die Eigenschaften eines Produkts auflisten, oder ein Inhaltsverzeichnis erstellen. Zwar ließe sich das auch mit einem Textabsatz und mehreren Zeilenumbrüchen realisieren, aber für genau diesen Fall bietet HTML verschiedene Elemente an. Damit ist es möglich, schnell und unkompliziert Aufzählungslisten, nummerierte Listen, Definitions- oder Menülisten zu erstellen.

# Nummerierte Listen

Typischerweise werden nummerierte Listen für Inhaltsverzeichnisse, Schritt-für-Schritt-Erklärungen oder Hierarchien verwendet. Das dafür zu verwendende Element ist ol (engl. ordered list, dt. sortierte Liste). Alle Einträge einer solchen Liste werden automatisch durchnummeriert. Ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Nummerierte Listen //-->
<html>
  <head>
    <title>Listing 2.10</title>
  </head>
  <body>
    <h1>Bundesligatabelle 2004/2005</h1>
    <ol>
      <li>Bayer Leverkusen</li>
      <li>VfB Stuttgart</li>
      <li>Werder Bremen</li>
      <li>VfL Wolfsburg</li>
      <li>VfL Bochum</li>
      <li>SC Freiburg</li>
      <li>1. FC N&uuml;rnberg</li>
      <li>Borussia Dortmund</li>
      <li>FSV Mainz 05</li>
      <li>Bayern M&uuml;nchen</li>
      <li>Hansa Rostock</li>
      <li>Hertha BSC Berlin</li>
      <li>Hamburger SV</li>
      <li>FC Schalke 04</li>
      <li>Borussia M&ouml;nchengladbach</li>
      <li>Hannover 96</li>
      <li>Arminia Bielefeld</li>
      <li>1. FC Kaiserslautern</li>
    </ol>
  </body>
</html>

Listing 2.10: Beispiel für eine nummerierte Liste

Das Listing 2.10 zeigt ein Beispiel für eine nummerierte Liste (als Grundlage wurde der letzte Tabellenstand der Fußballsaison 2004/2005 verwendet). Wenn Sie sich das Listing im Browser ansehen, können Sie feststellen, dass die einzelnen Einträge von oben nach unten mit der Nummer 1 beginnend durchnummeriert wurden.

Zuerst wurde die Liste mit dem Start-Tag des ol-Elements eingeleitet. Die einzelnen Einträge der Liste werden mit Hilfe des Elements li (engl. list item, dt. Listeneintrag) definiert. Auch hier wird im Gültigkeitsbereich des Elements der darzustellende Text notiert. Die Nummerierung erfolgt automatisch, sodass im li-Element lediglich die Bezeichnung des Listeneintrags steht. Zum Schluss wird die Listendefinition mit </ol> beendet.

Abbildung 2.9: Listing 2.10 im Internet Explorer 6.0

Zusätzlich zum Text im Gültigkeitsbereich eines Listeneintrags wäre es durchaus möglich, eine weitere Liste zu definieren. Gerade bei Inhaltsverzeichnissen würde dies Sinn machen. Leider wird in HTML aber nicht konsequent nummeriert, sodass bei einer verschachtelten Liste keine – wie man eigentlich erwarten könnte – Nummerierungsfolge wie 1, 1.1, 1.1.1 möglich ist. Die Nummerierung beginnt für die untergeordnete Liste dann einfach wieder bei 1.

Um eine solche verschachtelte Liste zu definieren, müssen Sie zusätzlich zum Text eines li-Elements einfach eine weitere Liste notieren.

<ol>
  <li>Grundlagen  
    <ol>
      <li>Am Anfang war HTML...</li>
      <li>HTML-Versionen</li>
    </ol>
  </li>
</ol>

Die Ausgabe dieses kurzen Beispiels könnte folgendermaßen aussehen:

Grundlagen Am Anfang war HTML... HTML-Versionen

# Aufzählungslisten

Im Gegensatz zu einer nummerierten Liste wird bei einer Aufzählungsliste nicht automatisch durchnummeriert, sondern ein Aufzählungszeichen (engl. bullet) vor jedem Eintrag im Browser dargestellt. Diese Listen finden besonders dann Anwendung, wenn Produkteigenschaften oder Ähnliches aufgelistet werden sollen, die nicht zwingend nummeriert sein müssen. Das Element für Aufzählungslisten ist ul (engl. unordered list, dt. unsortierte Liste).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Aufzählungslisten //-->
<html>
  <head>
    <title>Listing 2.11</title>
  </head>
  <body>
    <h1>Einkaufsliste</h1>
    <ul>
      <li>Essen
        <ul>
          <li>Brot</li>
          <li>K&auml;se</li>
          <li>Aufschnitt</li>
          <li>Senf</li>
        </ul>
      </li>
      <li>Getr&auml;nke
        <ul>
          <li>Cola</li>
          <li>Limonade</li>
          <li>Saft</li>
        </ul>
      </li>
      <li>Weiterer Eintrag...</li>
      <li>Weiterer Eintrag...</li>
      <li>Weiterer Eintrag...</li>
    </ul>
  </body>
</html>

Listing 2.11: Einkaufsliste mit einer Aufzählungsliste

Die Art und Darstellung des Aufzählungszeichens ist bei den einzelnen Browsern unterschiedlich. Wie bei einer nummerierten Liste wird auch bei einer Aufzählungsliste ein Listeneintrag mit dem li-Element definiert, und auch die Verschachtelung ist möglich. Doch wird das Bullet einer Unterliste anders dargestellt als das der Hauptliste.

Abbildung 2.10: Darstellung des Listings 2.11 im Internet Explorer 6.0

Auch die einzelnen Bullets einer verschachtelten Aufzählungsliste hängen vom Browser ab und sind nicht festgeschrieben.

# Definitionslisten

Obwohl Definitionslisten für das Erstellen von Glossaren (Erklärung verschiedener Abkürzungen, Fachbegriffe und Fremdwörter) verwendet werden sollen, lassen sie sich für unterschiedliche Dinge verwenden, z. B. für Menülisten mit zusätzlichen Erklärungen oder als Vokabelliste für Fremdsprachen. Anders als bei den vorherigen Listen (nummerierte Listen und Aufzählungslisten) werden drei verschiedene Elemente zur Definition verwendet:

dl
(engl. definition list, dt. Definitionsliste) ist das Hauptelement einer Definitionsliste und enthält die Elemente dt und dd.
dt
(engl. definition list term, dt. Definitionsbegriff) enthält den zu erklärenden Begriff.
dd
(engl. definition list definition, dt. Definition) enthält die Definition des zuvor angeführten Begriffs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Definitionslisten //-->
<html>
  <head>
    <title>Listing 2.12</title>
  </head>
  <body>
    <h1>Abk&uuml;rzungen in diesem Buch</h1>
    <dl>
      <dt>IE</dt>
      <dd>Microsoft Internet Explorer 1 - 6</dd>
      <dt>NN</dt>
      <dd>Netscape Navigator 1 - 5</dd>
      <dt>N6</dt>
      <dd>Netscape 6</dd>
      <dt>OP</dt>
      <dd>Opera 1 - 6</dd>
      <dt>MZ</dt>
      <dd>Mozilla 1</dd>
    </dl>
  </body>
</html>

Listing 2.12: Beispiel für eine Definitionsliste

Abbildung 2.11: Darstellung des Listings 2.12 im Internet Explorer 6.0

Zuerst wird die Definitionsliste mit dem dl-Element eingeleitet. Das bereits bekannte Element li wird bei Definitionslisten nicht verwendet, sondern die Elemente dt für den zu definierenden Begriff und dd für die entsprechende Erklärung.

Die Reihenfolge und die Anzahl dieser Elemente sind innerhalb einer Definitionsliste (dl) nicht fest vorgeschrieben. Sie können also mehrere Begriffe oder Definitionen hintereinander notieren, wenn es zu einem Begriff beispielsweise zwei oder mehr Definitionen gibt. Durch die Verschachtelung von Definitionslisten ist es außerdem möglich, eine Baumstruktur aufzubauen.

<dl>
  <dt>IE</dt>
    <dd>Microsoft Internet Explorer 4</dd>
    <dd>Microsoft Internet Explorer 5.x</dd>
    <dd>Microsoft Internet Explorer 6</dd>
  <dt>NN</dt>
    <dd>Netscape Navigator 3</dd>
    <dd>Netscape Navigator 4.x</dd>
  <dt>N6</dt>
    <dd>Netscape 6</dd>
    <dd>Netscape 7</dd>
</dl>

Im Browser könnte dies dann folgendermaßen aussehen:

IE Microsoft Internet Explorer 4 Microsoft Internet Explorer 5.x Microsoft Internet Explorer 6 NN Netscape Navigator 3 Netscape Navigator 4.x N6 Netscape 6 Netscape 7

# Listenattribute

Speziell für Listen stellt HTML einige Attribute zur Verfügung, um die Darstellung der Listen beeinflussen zu können. So ist es beispielsweise möglich, das Aufzählungszeichen einer Liste zu ändern, die Nummerierung ab einem bestimmten Wert zu starten oder die Art der Nummerierung festzulegen.

Die Attribute sind jedoch als deprecated (dt. abgelehnt) eingestuft und sollten daher durch CSS ersetzt werden. Der Vollständigkeit halber werden sie an dieser Stelle trotzdem noch einmal aufgeführt.

Das Bullet einer Aufzählungsliste wird mit dem Attribut type im Start-Tag der Liste (<ul>) verändert. Dabei stehen Ihnen drei Typen zur Verfügung:

Parameter	Erklärung
circle	Die Bullets der Aufzählungsliste werden rund.
disc	Die Bullets der Aufzählungsliste werden in Form eines Datenträgers dargestellt.
square	Die Bullets der Aufzählungsliste werden eckig dargestellt.

Tabelle 2.6: Mögliche Parameter für das Attribut type

<ul type="square">
  <!-- eckiges Bullet //-->
<ul type="disc">
  <!-- Bullet in Form e. Datenträgers, häufig eine CD //-->

Bei verschachtelten Listen wird für untergeordnete Listen das neu angegebene Bullet jedoch nicht übernommen. Sie müssen also für jede Liste das Bullet explizit angeben.

Die Art der Nummerierung einer nummerierten Liste wird ebenfalls mit dem Attribut type bestimmt. Die verschiedenen Parameter finden Sie in Tabelle 8.7:

Parameter	Erklärung
I	Große römische Nummerierung, z. B. I, II, III, IV
i	Kleine römische Nummerierung, z. B. i, ii, iii, iv
A	Alphanumerische Nummerierung in Großbuchstaben, z. B. A, B, C, D
a	Alphanumerische Nummerierung in Kleinbuchstaben, z. B. a, b, c, d

Tabelle 2.7: Mögliche Parameter für das Attribut type

<ol type="I">
  <!-- große römische Nummerierung //-->
<ol type="a">
  <!-- kleine alphanumerische Nummerierung //-->

Auch hier gilt wieder bei verschachtelten Strukturen, dass die Art der Aufzählung für untergeordnete Listen nicht übernommen wird.

Um die Nummerierung einer Liste mit einem bestimmten Wert zu beginnen, müssen Sie im Start-Tag des ol-Elements das Attribut start setzen und als Parameter den gewünschten Startwert angeben. Für eine Nummerierung mit dem Startwert 3 lautet die Angabe:

<ol start="2">

Um die Nummerierung innerhalb einer Liste zu verändern, müssen Sie im Start-Tag des li-Elements das Attribut value mit dem Startwert als Parameter angeben. Für einen Startwert von 6 lautet die Angabe:

<li value="6">

# Zusammenfassung

Für einfache Textabsätze wird in HTML das Element p verwendet. Zum Darstellen von Listings, Verzeichnislisten oder Messwerten wird das Element pre verwendet.
Überschriften werden mit den Elementen h1-h6 dargestellt.
Die Schriftart, Schriftfarbe und Schriftgröße von Textelementen lassen sich mit dem font-Element und den Attributen face, color und size verändern.
Die Ausrichtung eines Textabsatzes oder einer Überschrift wird mit dem align-Attribut und den vier Parametern left, right, center und justify verändert.
Für Listen stehen in HTML die Varianten nummerierte Liste (ol), Aufzählungsliste (ul) und Definitionsliste zur Verfügung (dl).

# Fragen und Übungen

Wie viele verschiedene Überschriftenelemente gibt es, und worin unterscheiden sich diese?
Welche Besonderheit zeichnet das p-Element bezüglich der Zeilenumbrüche im HTML-Dokument aus?
Welche Besonderheit zeichnet das pre-Element bezüglich der Zeilenumbrüche im HTML-Dokument aus?
Erstellen Sie ein HTML-Dokument mit einer Überschrift der 1. Ordnung und dem Text »Grüzi und Herzlich Willkommen!«. Weisen Sie der Überschrift eine Schreibschrift zu, und ändern Sie die Schriftfarbe in Grün.
Erweitern Sie das HTML-Dokument aus Frage/Übung 9 um einen zentrierten Absatz mit einem Text Ihrer Wahl, und verringern Sie die Schriftgröße um 2.
Fügen Sie dem HTML-Dokument einen vorformatierten Absatz mit einem Auszug aus einem HTML-Listing hinzu.

← HTML – Die Sprache des Internets Tabellen →