Grundlegende Gestaltungselemente in HTML

• Überschriften
• Absätze, Erzwungene Zeilenumbrüche
• Horizontale Linien

Überschriften

In HTML sind Überschrift für sechs Hierarchiestufen definiert, die durch die hX-Tags (X=1..6) setzen können. Überschriften sind stets eigene Absätze.

<hX> Text </hX>

definiert eine Überschrift "Text" der Stufe X.

Achten Sie bitte unbedingt darauf, dass der Endtag dieselbe Stufe benutzt, wie der Anfangstag, sonst liegt keine gültige HTML-Datei vor.

Bedenken Sie, dass jeder Browser Überschriften anders darstellt, d.h. Sie können keine Annahmen über Stil, Darstellungsgröße oder allgemeiner Zeichensatz machen.

Erweiterungen

Durch das Attribut align mit den Werten left, center und right können Sie die Ausrichtung der Überschrift vorschlagen. Weiter wird von moderneren Browsern justify ausgewertet, was etwas Blocksatzähnliches erzeugen soll. Ich rate von der Verwendung ab, da Blocksatz gerade auf kleineren Geräten oder gringere Auflösung zu größen Abständen zwischen der Worten führen kann.

Beispiele:

<h3>Stufe 3 (default)</h3>
<h4 align="left">Stufe 4 (links)</h4>
<h5 align="right">Stufe 5 (rechts)</h5>
<h4 align="center">Stufe 4 (zentriert)</h4>

liefert

Wenn die Überschriften nicht wie angegeben ausgerichtet sind, unterstützt Ihr Browser dies nicht.

Absätze, Erzwungene Zeilenumbrüche

Wie bereits bei Fließtext beschrieben, hätten wir obiges Beispiel auch schreiben können als:

<h3>Stufe 3 (default)</h3> <h4 align="left">Stufe 4 (links)</h4>
<h5 align="right">Stufe 5 (rechts)</h5>
<h6 align="center">Stufe 6 (zentriert)</h6>

Der Zeilenumbruch in der HTML-Datei fällt also nicht notwendig (bzw. i.a. sogar: nicht) mit dem Zeilenende der Ausgabe im Browser zusammen.

Beispiel:

Dies
         ist

     ein            Test

liefert

Wir sehen hier noch, dass mehrfache Leerzeichen und Leerzeichen am Beginn einer Zeile keine Wirkung haben. (Der Zeilenumbruch in der HTML-Datei wird dabei wie ein Leerzeichen betrachtet.)

Erzwungener Zeilenumbruch

Daher gibt es das br-Tag (break), mit dem Sie einen Zeilenumbruch erzwingen können.

Beispiel:

Dies<br>
         ist<br>

     ein            Test<br>

liefert

In den Beispielen sehen Sie auch, dass die Leerzeile zwischen "ist" und "ein" keine Wirkung hat. Man könnte genauso gut 100 Leerzeilen einstreuen, sie hätten ebenso keine Wirkung. Wir brauchen also die Möglichkeit einen Absatz zu definieren.

Absatz

Dies geschieht mit Hilfe des p-Tags (par, paragraph), der den Absatz kapselt:

Beispiel:

<p>Dies<br> ist </p><p>ein            Test</p>

liefert

Erweiterungen

Durch das Attribut align mit den Werten left, center und right können Sie die Ausrichtung des Absatzes vorschlagen. (In modernen Browsern wird mit justify auch Blocksatz unterstützt, von dessen Verwendung ich jedoch abrate.)

Beispiele:

<p>Test-Absatz (default)</p>
<p align="left">Test-Absatz (links)</p>
<p align="right">Test-Absatz (rechts)</p>
<p align="center">Test-Absatz (zentriert)</p>

Dieses Beispiel ist gleichbedeutend mit:

<p>Test-Absatz (default)</p>
<p align="left">Test-Absatz (links)</p>
<p align="right">Test-Absatz (rechts)</p>
<p align="center">Test-Absatz (zentriert)</p>
<p align="left">

und liefert

Wenn der Text nicht wie angegeben ausgerichtet sind, unterstützt Ihr Browser dies nicht. (Üblicherweise werden die Browser, die Überschriften ausrichten können, auch Absätze ausrichten können, da - wie erwähnt – Überschriften Absätze in einem speziellen, vom Browser und den Wünschen seiner Benutzer abhängenden Textstil sind.)

Sie können nochmal sehen, wie Container/Nicht-Container funktionieren. Container schließen Text ein. Bei Ihrem Ende verlieren Sie ihre Wirkung und es gelten die Zustände wie vor Ihrer Initiierung. Nicht-Container gelten solange, bis Ihre Wirkung aufgehoben wird. Daher musste die Ausrichtung noch auf left zurückgestellt werden.

Weiter erkennen die meisten Browser den center-Tag, mit dem auch mehrere (beliebige) HTML-Elemente, insbesondere als Absätze, aber auch Grafiken usw. zentriert werden können. Dabei wird die zu zentrierenden Elemente durch center gekapselt.

Beispiel:

<center>Dies ist<br> ein klitzekleiner<br> Test</center>

liefert

Kennt der Browser diesen Tag, so stellen die zentrierten Elemente einen Absatz dar.

center ist dabei ein spezieller Fall. Allgemeiner richtet man mit divaus, dessen Attribut align die Werte left, center und right annehmen kann. Obiges Beispiel zur Absatzausrichtung könnte man damit (standard-gerecht) auch wie folgt schreiben:

<div align="left">Test-Absatz (links)</div>
<div align="right">Test-Absatz (rechts)</div>
<div align="center">Test-Absatz (zentriert)</div>

Wie bei center kann div mehrere Elemente umfassen.

Der Autor empfiehlt div, anstelle von center zu verwenden.

Horizontale Linien

Um Absätze (visuell) stärker voneinander zu trennen, kann mit dem hr-Tag (horizontal rule) eine horizontale Linie gezeichnet werden, die sich über die gesamte Fensterbreite erstreckt. Wie die Linie genau dargestellt wird, ist wieder Sache des Browsers, üblicherweise wird ein 3D-Effekt erzeugt, der leider nicht immer günstig aussieht.

Der IE 5.5 zeigt bspw. kein Shading mehr an.

Erweiterungen

Die meisten Browser kennen für die horizontale Linien zusätzliche Attribute und Schalter:

• noshade schaltet den 3D-Effekt ab,
• size regelt die Liniendicke, wobei sie auf X Pixel gesetzt wird. X=1 ist dabei durchaus in Ordnung,
• width legt die Breite der Linie fest. Dabei kann die Abgabe absolut in Pixeln oder prozentual erfolgen. Bei letzterem bezieht sich die Angabe wie üblich auf die gerade verfügbare Gesamtbreite, also das Fenster, der Frame oder die Tabellenzelle, wo auch immer die Linie gerade erscheint,
• align richtet die Linie aus, wobei die möglichen Werte left, center und right die übliche Bedeutung haben, wie bisher. Die Voreinstellung ist zentriert.

Schauen wir einmal, welche Attribute Ihr Browser auswertet:

Linie - normal
<hr />
Linie - ohne Schatten (3D-Effekt)
<hr noshade="noshade" />
Linie - dicker
<hr size="5" />
Linie - dicker, ohne Schatten
<hr noshade="noshade" size="5" />
Linie - normal, Breite 50%
<hr width="50%" />
Linie - ohne Schatten, Breite 50 Pixel
<hr noshade="noshade" width="50" />
Linie - noch dicker, Breite 30% links
<hr size="10" align="left" width="30%" />
Linie - wieder d&uuml;nner, ohne Schatten, Breite 70% rechts
<hr size="3" align="right" width="70%" />
usw.

liefert

Darüber hinaus kann man eine Farbe vorschlagen:

<hr color="#rrggbb">

was aber nicht jeder Browser versteht.