Horizontale Linien im HTML
HTML-Webseite und die Horizontale Linien
Die <hr />-Kennung, ohne abschließende Kennung und ohne zugehörigen Text, erzeugt eine horizontale Linie auf der Seite. Solche Linien eignen sich ausgezeichnet für die visuelle Abgrenzung von Abschnitten auf der Webseite - insbesondere vor Überschriften oder um den Haupttext von einer Liste abzugrenzen. Abbildung illustriert den effektiven Nutzen von solchen Linien.
Das <hr>-Tag verfügt über kein schließendes Tag. Um es in XHTML verwenden zu können, und um die Kompatibilität mit HTML-Browsern zu garantieren, fügen Sie eine Leerstelle und einen Schrägstrich (/) dem Ende des Tags hinzu. Achten Sie auch darauf, dass Sie die Tags in XHTML mit Kleinbuchstaben schreiben:
<hr />
Soll die horizontale Zeile Attribute enthalten, die auf diese Tags hinweisen, erscheint der Schrägstrich (/) weiterhin am Ende des Tag. Sehen Sie hierzu folgendes Beispiel:
<hr size="2" />
<hr width="75%" />
<hr align="center" size="4" width="200" />
Das folgende Beispiel zeigt eine horizontale Linie und eine Liste.
<hr />
<h2>
To Do on Friday
</h2>
<ul>
<li>Do laundry</li>
<li>Send FedEx with pictures</li>
<li>Have lunch with Mollie</li>
<li>Read Email</li>
<li>Set up Ethernet</li>
</ul>
<hr />
Attribute der <hr />-Kennung
In HTML 2.0 wird die <hr />-Kennung genauso, wie Sie sie sehen, verwendet, also ohne abschließende Kennung oder Attribute. Netscape führte einige Attribute für das <hr />-Tag ein, die von einigen anderen Browsern unterstützt werden. Sämtliche Attribute wurden zugunsten der Style Sheets in der HTML-Spezifikation verworfen.
Obwohl Präsentations-Attribute, wie size, width und align immer noch in HTML 4.0 unterstützt werden, ist das Arbeiten mit Style Sheets die Methode, die für die Kontrolle des Designs empfohlen wird.
Das size-Attribut zeigt die Dicke der horizontalen Trennlinie in Pixel an. 2 ist hierbei die Voreinstellung und gleichzeitig die geringste Dicke, die eine Trennlinie haben kann. Abbildung zeigt einige Beispiele wie die Trennliniendicke mit folgendem Code erzeugt wird.
<h2>
2 Pixels
</h2>
<hr size="2" />
<h2>
4 Pixels
</h2>
<hr size="4" />
<h2>
8 Pixels
</h2>
<hr size="8" />
<h2>
16 Pixels
</h2>
<hr size="16" />
Das width-Attribut bestimmt die horizontale Breite der Trennlinie. Sie können entweder die genaue Breite in Pixel angeben oder den Wert als Prozentsatz der Bildschirmbreite festlegen (zum Beispiel 30 oder 50 Prozent), sodass sich die dargestellte absolute Breite ändert, wenn Sie die Fensterbreite verändern. Abbildung zeigt einige Beispiele von Trennlinien-Breiten.
<h2>
100%
</h2>
<hr />
<h2>
75%
</h2>
<hr width="75%" />
<h2>
50%
</h2>
<hr width="50%" />
<h2>
25%
</h2>
<hr width="25%" />
<h2>
10%
</h2>
<hr width="10%" />
Wenn Sie eine Breite festlegen, die kleiner ist als die Breite des Bildschirms, dann können Sie die Ausrichtung der Trennlinie auch durch das align-Attribut festlegen, und zwar haben Sie die Wahl zwischen linksbündig (align="left"), rechtsbündig (align="right") oder zentriert (align="center"). Die Voreinstellung für Trennlinien ist »zentriert«.
Ein beliebter Trick von Web-Designern ist es mit verschiedenen kleineren Trennlinien Muster zu erzeugen, wie in Abbildung gezeigt wird.
<hr align="center" size="4" width="200" />
<hr align="center" size="4" width="300" />
<hr align="center" size="4" width="400" />
<h1 align="center">
NorthWestern Video
</h1>
<hr align="center" size="4" width="400" />
<hr align="center" size="4" width="300" />
<hr align="center" size="4" width="200" />
<h2 align="center">
Presents
</h2>
Schließlich können Sie das noshade-Attribut einsetzen, welches den Browser veranlasst, die Trennlinie als einfache schwarze Linie ohne dreidimensionale Schattierung zu zeichnen, wie es in Abbildung gezeigt wird.
In HTML 4.0 und früheren Versionen braucht man für noshade nicht unbedingt einen Attribut-Wert. Die Methode, die Sie für dieses Attribut verwenden sieht wie folgt aus:
<hr align="center" size="4" width="200" noshade />
In XHTML 1.0 jedoch, ist ein Wert obligatorisch. Folgendes Beispiel demonstriert, wie das noshade-Attribut auf das <hr />-Tag, entsprechend der vorgeschlagenen XHTML 1.0-Spezifikation, angewandt werden muss.
<hr align="center" size="4" width="200" noshade="noshade" />
<hr align="center" size="4" width="300" noshade="noshade" />
<hr align="center" size="4" width="400" noshade="noshade" />
<h1 align="center">
NorthWestern Video
</h1>
<hr align="center" size="4" width="400" noshade="noshade" />
<hr align="center" size="4" width="300" noshade="noshade" />
<hr align="center" size="4" width="200" noshade="noshade" />
<h2 align="center">
Presents
</h2>
