SELFHTML: HTML / Absatztypen und Textgestaltung / Trennlinien

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

	Trennlinien
	Trennlinien definieren Nicht-Schattierung von Trennlinien erzwingen Breite und Höhe von Trennlinien kontrollieren Trennlinien ausrichten Farbige Trennlinien Weitere Möglichkeiten

Trennlinien definieren

Anzeigebeispiel: So sieht's aus

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.

Beispiel:

Hier ist ein Abschnitt zu Ende.
<hr>
Hier beginnt etwas Neues.

Erläuterung:

<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.

Nicht-Schattierung von Trennlinien erzwingen

Anzeigebeispiel: So sieht's aus

Grafische WWW-Browser zeigen Trennlinien normalerweise in 3D-Form, d.h. schattiert, an. Sie können jedoch erzwingen, daß der Browser die Trennlinie massiv und durchgezogen darstellt.

Beispiel:

Hier ist ein Abschnitt zu Ende.
<hr noshade>
Hier beginnt etwas Neues.

Erläuterung:

Durch das Attribut noshade erreichen Sie, daß der Browser die Trennlinie massiv und durchgezogen, also nicht-schattiert anzeigt (noshade = unschattiert).

Breite und Höhe von Trennlinien kontrollieren

Anzeigebeispiel: So sieht's aus

WWW-Browser stellen Trennlinien normalerweise über die gesamte Breite des Anzeigefensters dar. Sie können erzwingen, daß die Trennlinie nur einen Teil der Anzeigebreite einnimmt. Ferner können Sie die Dicke der Linie verändern.

Beispiel:

Hier ist ein Abschnitt zu Ende.
<hr width=60%>
Hier beginnt etwas Anderes.  
<hr width=260 size=4>
Hier beginnt noch etwas Anderes.

Erläuterung:

Durch das Attribut width= (width = Breite) erreichen Sie, daß 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, daß die Trennline so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, daß 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.

Beachten Sie:

Beide Attribute sind auch in Kombination mit nicht-schattierten Trennlinien (noshade) erlaubt.

Trennlinien ausrichten

Anzeigebeispiel: So sieht's aus

Das Ausrichten von Trennlinien ist nur in Verbindung mit der Angabe width= (Trennlinie verkürzen) sinnvoll, da die Trennlinie ansonsten stets über die gesamte Breite des Anzeigefensters geht.

WWW-Browser richten Trennlinien per Voreinstellung zentriert aus. Sie können die Trennlinie auch links oder rechts ausrichten.

Beispiel:

Hier ist ein Abschnitt zu Ende.
<hr width=60% align=left>
Hier beginnt etwas Anderes.  
<hr noshade width=260 size=4 align=right>
Hier beginnt noch etwas Anderes.

Erläuterung:

Durch das Attribut align=left erreichen Sie, daß die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung, left = links). Mit align=right wird die Trennlinie rechtsbündig ausgerichtet (right = rechts).

Beachten Sie:

Alle Angaben zur Ausrichtung sind auch in Kombination mit nicht-schattierten Trennlinien (noshade) erlaubt.

Farbige Trennlinien

Anzeigebeispiel: So sieht's aus

Der Microsoft Internet Explorer erlaubt ab Version 3.0 auch die Anzeige farbiger Trennlinien. Bislang gehört diese Möglichkeit jedoch nicht zum HTML-Sprachstandard.

Beispiel:

Hier ist ein Abschnitt zu Ende.
<hr noshade color=#FF0000>
Hier beginnt etwas Anderes.

Erläuterung:

Mit dem Attribut color= können Sie eine Farbe für die Trennlinie bestimmen. Zur Farbauswahl siehe Farben definieren in HTML.

Weitere Möglichkeiten

Das <hr>-Tag kann Universalattribute enthalten.

Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Denn damit können Sie auch Trennlinien zusätzlich formatieren. Dazu müssen Sie zunächst wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Auf das <p>-Tag können Sie beispielsweise folgende Style-Sheet-Angaben anwenden:
Abstände, Ränder, Ausrichtung
Rahmen und Innenabstände
Hintergrundfarben und -bilder


weiter:	Mehrspaltiger Textfluß
zurück:	Bereiche mit mehreren Elementen

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung