|  SELFHTML/Navigationshilfen  HTML/XHTML  Elemente zur Textstrukturierung | |
|  | Trennlinien | 
|   | 
 | 
|   | |







 Trennlinien definieren
 Trennlinien definierenTrennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.
 Anzeigebeispiel: So sieht's aus
 Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien definieren</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr>
<p>Und hier beginnt etwas Neues.</p>
</body>
</html>
<hr> fügt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes.
Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das hr-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <hr />. Weitere Informationen finden Sie im Kapitel  XHTML und HTML.
 XHTML und HTML.








 Trennlinien mit HTML gestalten
 Trennlinien mit HTML gestaltenMit Hilfe diverser HTML-Attribute im <hr>-Tag können Sie eine Trennlinie auffälliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen künftig aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS.
 Anzeigebeispiel: So sieht's aus
 Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Trennlinien mit HTML gestalten</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr noshade width="300" size="3" align="left">
<p>Hier beginnt etwas Neues.</p>
</body>
</html>
Durch das Attribut noshade erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht-schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das Attribut in der Form noshade="noshade" notieren, da XML-basierte Sprachen keine Attribute ohne Wertzuweisung erlauben.
Weitere Informationen dazu im Kapitel  XHTML und HTML.
 XHTML und HTML.
Durch das Attribut width (width = Breite) erreichen Sie, dass der Browser die Trennlinie so breit anzeigt wie angegeben. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, dass die Trennlinie so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen (%).
Durch das Attribut size (size = Größe) können Sie die Höhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung beträgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders dünne Trennlinie, mit Werten über 2 können Sie dickere als die normalen Trennlinien erzeugen.
Mit align="left" erreichen Sie, dass die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung, left = links). Mit align="right" wird die Trennlinie rechtsbündig ausgerichtet (right = rechts) und mit align="center" zentriert (Voreinstellung). Das Ausrichten von Trennlinien ist allerdings nur in Verbindung mit dem Attribut width sinnvoll, da die Trennlinie ansonsten stets über die gesamte verfügbare Breite geht.
Der Internet Explorer interpretiert darüber hinaus noch das Attribut color. Erlaubt ist dabei eine  Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard gehört.
 Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard gehört.







 Trennlinien mit CSS gestalten
 Trennlinien mit CSS gestaltenDas <hr>-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-Standard-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man  CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
 CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
 Ausrichtung und Absatzkontrolle
 Ausrichtung und Absatzkontrolle
 Außenrand und Abstand
 Außenrand und Abstand
 Rahmen
 Rahmen
 Positionierung und Anzeige von Elementen
 Positionierung und Anzeige von Elementen
 Anzeigebeispiel: So sieht's aus
 Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien mit CSS gestalten</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr style="width:300px; color:yellow; background-color:yellow; height:5px;
  margin-right:0; text-align:right; border:1px dashed blue;">
<p>Hier beginnt etwas Neues.</p>
</body>
</html>
Das hr-Element erhält im Beispiel eine Breite von 300 Pixeln, eine Höhe von 5 Pixeln, wird rechtsbündig ausgerichtet (mittels margin-right:0 und text-align:right für Browser, die ersteres nicht umsetzen), wird in gelber Farbe dargestellt (mittels color und background-color) und erhält noch einen gestrichelten blauen Rahmen drumherum.
Internet Explorer 5.0 stellt den Rahmen nicht dar.
In der  HTML-Referenz finden Sie genaue Angaben darüber, wo Trennlinien vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
 HTML-Referenz finden Sie genaue Angaben darüber, wo Trennlinien vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
 Element-Referenz für Trennlinien
 Element-Referenz für Trennlinien
 Attribut-Referenz für Trennlinien
 Attribut-Referenz für Trennlinien
|   | |
|  |  Ältere Elemente zur Schriftformatierung | 
|  |  Allgemeine Elemente für Textbereiche | 
|  SELFHTML/Navigationshilfen  HTML/XHTML  Elemente zur Textstrukturierung | |
© 2007  Impressum
 Impressum