home Horizontale Linien


home up down Einfache horizontale Linien


Beim Erstellen des ersten HTML-Dokuments haben Sie bereits die wichtigsten Befehle kennengelernt, um Zeilenumbrüche und neue Absätze einzuleiten. Damit lassen sich einfache Texte erstellen und optisch strukturieren. In vielen HTML-Dokumenten stoßen Sie aber auf horizontale Linien, mit denen sich Textabschnitte optisch untergliedern lassen. Um uns das Verhalten dieser horizontalen Linie anzusehen, sollten Sie das erste Beispiel (Datei /beispiel/doc2_01.htm) erneut in den Editor laden und um die Anweisung:

<HR>

zwischen dem ersten und zweiten Absatz ergänzen. Das komplette Dokument enthält dann die folgenden HTML-Anweisungen:

<HTML>

<HEAD>
<TITLE>
Unser zweites Beispiel mit einer Linie
</TITLE>
</HEAD>

<BODY>
<P>Dies ist unser erstes HTML-Dokument. Dieses Dokument wurde
mit einem einfachen Texteditor erstellt.

<HR><! Hier ist die Anweisung für die horizontale Linie >

<P>Das Dokument basiert auf der Vorlage VORLAGE0.HTM<BR>
und besteht aus zwei Abschnitten. Im zweiten Abschnitt<BR>
wird hinter einer Zeile ein manueller Zeilenwechsel <BR>
eingeleitet.<BR>
</BODY>
</HTML>

Das Dokument doc2_02.htm

Die <HR>-Anweisung steht dabei für Horizontal Ruler und weist den Browser an, eine horizontale Linie zu zeichnen.

Sobald Sie die obige Erweiterung per Editor eingetragen haben, speichern Sie das HTML-Dokument in einer neuen Datei. Ich habe diese Datei zum Beispiel doc2_02.htm genannt und auf der CD-ROM im Verzeichnis /beispiel abgelegt.

Zur Anzeige laden Sie die Datei in den Browser. (Wie dies geht, habe ich im vorhergehenden Abschnitt beim ersten Beispiel beschrieben). Sofern Sie auf den Verweis Beispiel mit Linie klicken, wird die Beispieldatei doc2_02.htm von der CD-ROM geladen und angezeigt. Die folgende Abbildung zeigt das Ergebnis im Netscape Navigator.

Anzeige des Beispiels doc2_02.htm im Netscape Browser

Gegenüber dem ersten Beispiel hat sich das Dokument kaum geändert. Lediglich eine horizontale Linie trennt die beiden Absätze. Dies ist die Folge des <HR>-Tags zwischen den beiden Absätzen.


Tipp: Wenn Sie sich die obige Abbildung genauer ansehen, bemerken Sie vielleicht den vergrößerten Abstand zwischen der horizontalen Linie und der ersten Zeile des zweiten Absatzes. Eine Kontrolle der HTML-Anweisungen zeigt, daß hinter dem <HR>-Tag noch der <P>-Tag für den Absatzwechsel folgt. Da der <HR>-Tag aber bereits die Abschnitte zwangsweise trennt, können Sie in der Regel auf einen zusätzlichen <P>-Tag verzichten. Vielleicht laden Sie versuchsweise das Beispiel erneut im Editor und entfernen den <P>-Tag vor dem zweiten Absatz. Damit sollten die Absätze den gleichen Abstand von der Linie aufweisen. In XHTML ist der <HR>-Tag übrigens als <hr/>-Tag zu schreiben.


home up down Weitere Optionen für horizontale Linien

An den horizontalen Linien scheiden sich die Geister, sprich jeder Browser stellt diese Linien etwas anders dar. Die folgende Abbildung zeigt die Darstellung des einfachen <HR>-Tags bei drei verschiedenen Browsern auf der gleichen Plattform.

Horizontale Linien

Darstellung einer horizontalen Linie

Neben diesen Browser-spezifischen Abweichungen gibt es offenbar jedoch einen gesteigerten Bedarf an zusätzlichen Varianten und Optionen. Netscape erweiterte diesen Tag um weitere Attribute, mit denen sich die Größe und Form der Linie beeinflussen läßt. Die meisten Browser (z.B. Mosaic, Internet Explorer) unterstützen diese Erweiterungen und die Attribute ALIGN, SIZE und WIDTH wurden in der HTML 3.2-Spezifikation mit aufgenommen.

Mit dem ALIGN-Attribut legen Sie fest, wie die horizontale Linie innerhalb der Seite ausgerichtet wird. Das Attribut besitzt die Form:

<HR ALIGN="left">

und darf als Werte left, right und center für die Ausrichtung enthalten. Zusätzlich läßt sich bei den meisten Browsern die Größe der Linie festlegen. Der Wert wird dabei entweder in Pixel oder in Prozent der Fensterbreite vorgegeben:

<HR WIDTH="40%">
<HR WIDTH="140">

Die zweite Zeile legt eine Linie mit 130 Pixel Breite fest. Die nachfolgende Anweisung zeigt, wie sich die Dicke der Linie einstellen läßt:

<HR SIZE="4" WIDTH="80%">

Hier ist die Linie 4 Pixel dick und umfaßt 80% der Fensterbreite. Netscape stellt die horizontalen Linien standardmäßig mit einer Schattierung dar. Dadurch ergibt sich eine Art 3D-Effekt. Dieser Effekt läßt sich aber über ein Attribut abschalten (<HR NOSHADE> ). Nachfolgend finden Sie noch einige Beispiele für die Gestaltung von Linien:

<HR ALIGN=left SIZE="8" WIDTH="140">
<HR SIZE="4" WIDTH="40%">
<HR NOSHADE>

In Ihrem Browser werden die Anweisungen folgendermaßen dargestellt:






home Dokumentanfang  up Zurück    (by Günter Born)