HTML-Trennlinien

Der Befehl <HR> kann alleine oder mit verschiedenen Attributen verwendet werden. Ein Abschluß-Tag wird nicht gebraucht. Es wird übrigens immer ein automatischer Zeilenumbruch erzeugt. Die Anweisung ist nur für waagrechte Trennungen vorgesehen.

Es folgen einige Beispiele zur Darstellung von Trennlinien.

Der Befehl <HR> erzeugt die folgende Trennlinie mit sogenanntem Schatten:


Die Stärke der Linie ist auf 2 Pixel voreingestellt. Mit <HR SIZE=1> wird eine etwas dünnere Linie erzeugt:


Es kann jede beliebige Pixelzahl eingesetzt werden. <HR SIZE=10> ergibt z.B.:


Nach <HR NOSHADE> sehen wir eine Trennlinie ohne Schatten, also eigentlich eine durchgezogene Linie in der voreingestellten Pixelstärke 2:


Aber auch hier kann das Attribut SIZE mit den gewünschten Größenangaben eingesetzt werden. <HR NOSHADE SIZE=1> ergibt:


Und <HR NOSHADE SIZE=10>


An dieser Stelle muß leider auf die unterschiedliche Browser-Darstellung eingegangen werden. So kann Opera überhaupt nichts mit dem Attribut NOSHADE anfangen und tut so, als gäbe es dies überhaupt nicht. Netscape dagegen zeigt uns vor allem dickere Linien etwas länger als eine Linie mit Schatten. Da tauchen dann auf einmal aberundete Ecken auf.

Mit dem Zusatz WIDTH= und einem Zahlenwert in Pixel oder in Prozent kann auf die Länge der Trennlinie Einfluß genommen werden.

Der Befehl <HR WIDTH=50%> erzeugt die folgende zentrierte Trennlinie ohne Schatten mit einer entsprechend der Prozentangabe verkürzten Länge:


Und zum Vergleich zeigt <HR WIDTH=50> eine Linie mit einer Länge von 50 Pixel:


Wie man sieht, ist die Voreinstellung bei diesem Tag ausnahmsweise mal zentriert. Der Befehl <HR ALIGN=LEFT WIDTH=50%> erzeugt also die folgende linksbündige Trennlinie (mit Schatten) mit einer entsprechend der Prozentangabe verkürzten Länge:


Für die andere Seite funktioniert das entsprechend mit <HR ALIGN=RIGHT WIDTH=50%>:


Wie Sie sich denken können, sind jetzt alle möglichen Kombinationen möglich. Der Befehl <HR NOSHADE ALIGN=LEFT WIDTH=30% SIZE=6> erzeugt z.B. die folgende zentrierte Trennlinie ohne Schatten mit einer entsprechend der Prozentangabe verkürzten Länge und mit einer in Pixel angegebenen Dicke:


Und der Befehl <HR WIDTH=15 SIZE=15> erzeugt die folgende zentrierte Trennlinie (sieht zwar überhaupt nicht mehr wie eine Trennlinie aus, ist aber eine) mit einer in Pixel angegebenen Länge und Dicke:


Mit dem Internet Explorer sind auch farbige Linien möglich. Nur mit diesem Browser ist also nach <HR COLOR=#FF00FF> eine violette Trennlinie mit Schatten zu sehen:


Da Netscape und Opera leider keine farbigen Trennlinien kennen, greift man alternativ dazu gerne auf entsprechende Grafiken zurück.

Mit <HR COLOR=blue WIDTH=40 SIZE=40> wird folgender Effekt erzeugt. Wobei nochmals auf die unterschiedliche Darstellung hingewiesen werden muß. Mit dem IE sollte ein blaues Quadrat zu sehen sein, mit Netscape und Opera ein Quadrat in der Hintergrundfarbe. Farbe oder sogar Grafik scheinen sozusagen durch.


Wird jetzt das Attribut „ohne Schatten“ hinzugefügt, ändert das in der Darstellung des Internet Explorers überhaupt nichts,


während Netscape ein dunkelgraues Gebilde mit abgerundeten Ecken zeigt. Hier zusätzlich als Grafik zum Bewundern für Nicht-Netscape-Nutzer eingefügt: Netscape Trennlinie

Opera bleibt bei seinem Quadrat mit Schatten (hier als Grafik): Opera Trennlinie

Hinweis Vertikale Trennlinien sind in HTML nicht vorgesehen. Sie sind als Grafiken oder etwas komplizierter mit der Tabellenprogrammierung realisierbar.