| ||||||
| HTML I | Schnellkurs | Einführung | Grundgerüst | Text | Bilder | Links | Farben | Tabellen | |||||
| HTML II | Trennlinien , Listen | Hintergrundbilder | Frames | Formulare | Meta - Tags | |||||
| CSS | Einführung | Style Sheets definieren | einzelne Angaben | |||||
| PLUS | Hilfreiches / Tabellen | Software / Tools | Upload der Homepage | Hyperlinks | |||||
| FAQ / Goodies | Java | CGI / Perl | SSI | ||||||
| HTML II : Trennlinien , Listen || Trennlinien • Listen • ungeordnete Listen • geordnete Listen |
Horizontale Trennlinien werden mit dem <hr> - Tag eingebunden . (hr = horizontal rule)
Beispiel :<hr> ergibt : |
Die Gestalt der Trennlinie lässt sich durch folgende Attribute noch genauer festlegen :
Beispiel :<hr noshade width="70%"><hr size="4" color="#FF0000" width="250" align="left"> ergibt : |
Wie ihr seht , werden die Angaben zu Farbe und 'noshade' ignoriert . Das liegt daran , dass innerhalb dieses Kurses die Trennlinien mit Hilfe von CSS datei- bzw. projektweit definiert wurden . Um trotzdem zum gewünschten Ergebnis zu kommen , könnte man z.B. direkt eine CSS - Anweisung ins <hr> - Tag einfügen :
Beispiel :<hr size="4" style="color:red" width="250" align="left">ergibt : |
Falls ihr keine Style Sheets verwendet , braucht euch das natürlich nicht gross zu kümmern .
Grundsätzlich kann zwischen ungeordneten und geordneten Listen unterschieden werden:
| ungeordnete Liste | geordnete Liste |
|
|
| Q U E L L C O D E | |
|
<ul> <li> Dies ist eine...</li> <li> ... ungeordnete Liste.</li> </ul> |
<ol> <li> Dies ist eine geordnete Liste.</li> <li> Die einzelnen Listenpunkte...</li> <li> ... werden durchnumeriert.</li> </ol> |
Erläuterung :
Im Folgenden wird noch auf die Darstellung der Listenpunkte eingegangen:
Die Gestalt der Listenpunkte lässt sich durch geeignete Attribute noch verändern. Dabei spielt vor allem das Attribut type= eine Rolle. Bei ungeordneten Listen sind neben dem voreingestellten Wert disc noch circle und square zugelassen.
|
|
|
Das type- Attribut lässt sich auf beide Tags (<ul> und <li>) anwenden:
Beispiel:<ul type="circle"><li> Eine Liste...</li> <li> ...mit type="circle" im <ul>- Tag .</li> </ul> <ul> <li type="circle">Noch eine Liste .</li> <li type="disc">Diesmal mit individuelleren...</li> <li type="square">... Bullets.</li> </ul> ergibt:
|
Mit Hilfe des Sonderzeichens • können Bullets mit individueller Grösse und Farbe dargestellt werden:
• rot, Grösse 6.Dazu gleichwertig ist das Sonderzeichen •:
• rot, Grösse 6.Mit Hilfe von CSS ist noch einiges mehr möglich.
Auf geordnete Listen lässt sich ebenfalls das type - Attribut anwenden. Erlaubte Werte sind hier a, A , i und I.
a: Liste wird alphabetisch numeriert, mit Kleinbuchstaben.
A: Liste wird alphabetisch numeriert, mit Grossbuchstaben.
i & I: analog wie a und A, aber mit römischer Numerierung.
Beispiel:<ol type=i><li>Eine Liste mit römischer Numerierung.</li> <li> Zweiter Listenpunkt.</li> </ol> ergibt:
|
Mit dem Attribut start wird mit der Numerierung von einem bestimmten Punkt aus begonnen:
Beispiel :<ol type=I start=120><li>Erster Listenpunkt.</li> <li>Zweiter Listenpunkt.</li> </ol> ergibt :
|
| | Weiter zum nächsten Kapitel : Hintergrundbilder | | |
| ::: © 2000/01 Martin Fux ::: URL dieses Dokuments: http://www.flexdax.org/htmlkurs/tln-ltn.html | |