brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Grundlegende Gestaltungselemente in HTML

HTML für Einsteiger - Kapitel 4-3

von Thomas Salvador.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

In Kapitel 4 beschäftigen uns mit den ersten "grundlegenden" Gestaltungselementen von HTML.

Teil 1

In diesem Teil mit:

Horizontale Linien

Horizontale Linien

Um Absätze (visuell) stärker voneinander zu trennen, kann mit dem <hr>-Tag (horizontal rule) eine horizontale Linie gezeichnet werden, die sich über die gesamte Fensterbreite erstreckt. Wie die Linie genau dargestellt wird, ist wieder Sache des Browsers, üblicherweise wird ein 3D-Effekt erzeugt, der leider nicht immer günstig aussieht.

Der IE 5.5 zeigt bspw. kein Shading mehr an.

Erweiterungen

Die meisten Browser kennen für die horizontale Linien zusätzliche Attribute und Schalter:

noshade schaltet den 3D-Effekt ab,
size regelt die Liniendicke, wobei sie auf X Pixel gesetzt wird. X=1 ist dabei durchaus in Ordnung,
width legt die Breite der Linie fest. Dabei kann die Abgabe absolut in Pixeln oder prozentual erfolgen. Bei letzterem bezieht sich die Angabe wie üblich auf die gerade verfügbare Gesamtbreite, also das Fenster, der Frame oder die Tabellenzelle, wo auch immer die Linie gerade erscheint,
align richtet die Linie aus, wobei die möglichen Werte left, center und right die übliche Bedeutung haben, wie bisher. Die Voreinstellung ist zentriert.

Schauen wir einmal, welche Attribute Ihr Browser auswertet:

Beispiele:

Linie - normal
<hr />
Linie - ohne Schatten (3D-Effekt)
<hr noshade="noshade" />
Linie - dicker
<hr size="5" />
Linie - dicker, ohne Schatten
<hr noshade="noshade" size="5" />
Linie - normal, Breite 50%
<hr width="50%" />
Linie - ohne Schatten, Breite 50 Pixel
<hr noshade="noshade" width="50" />
Linie - noch dicker, Breite 30% links
<hr size="10" align="left" width="30%" />
Linie - wieder d&uuml;nner, ohne Schatten, Breite 70% rechts
<hr size="3" align="right" width="70%" />
usw.

liefert

Ausgabe auf Ihrem Browser

Linie - normal

Linie - ohne Schatten (3D-Effekt)

Linie - dicker

Linie - dicker, ohne Schatten

Linie - normal, Breite 50%

Linie - ohne Schatten, Breite 50 Pixel

Linie - noch dicker, Breite 30% links

Linie - wieder dünner, ohne Schatten, Breite 70% rechts

usw.

Darüber hinaus kann man eine Farbe vorschlagen:

<hr color="#rrggbb">

was aber bei weitem nicht jeder Browser versteht.

Bei dünner müssen wir die Ersatzdarstellung für Umlaute verwenden. Dies ist in den Teil 1 (Grundlagen) begründet, dort sind auch die restlichen Ersatzdarstellungen für Teil 3 (Text) angegeben. (Stillschweigend wird die ganze Zeit in den Beispielen mit < und > gearbeitet, um die spitzen Klammern zu setzen. Wir werden in Teil 5 sehen, warum dieser "Zwang" weniger tragisch als vielmehr ziemlich klasse ist.)

Teil 2

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Grundlegende Gestaltungselemente in HTML

HTML für Einsteiger - Kapitel 4-3

Horizontale Linien

Erweiterungen

Verwandte Artikel und Seiten