Listen in HTML
Ein Referat von Patrick „Petto“ Seesko, Jan Hendrik „Nervkind“ Linkert, Mirco „Gaudin“ Zeitz
Verwendungszweck
Listen dienen zur sauberen Anordnung von div. Sachen wie:
-> Bedeutungen
-> Produkteigenschaften
-> Argumente
…
Allgemein
Listen dienen einfach nur zur Textstrukturierung, und haben keinen tieferen Sinn.
Es lassen sich verschiedene Typen von Listen erstellen
Allgemein
Die verschiedenen Punkte werden durch einen „Bullet“ eingeleitet, der Browserabhängig ist.
Aufzählungsliste Liste
Die Tags
<h1> XXX </h1>
<ul> xxx </ul>
Beschreibt eine ganz normale (Über)schrift
ul = unordered list = unsortierte Liste
Beschreibt die Einleitung einer Liste
Die Tags
<li> XXX </li>
Ein verschachteln ist ebenfalls möglich.
li = list item = Listeneintrag
Beschreibt den einen punkt in der Liste
Verschachtelte Listen
Verschachtelte Listen sind Listen in Listen. Somit kann man Texte noch weiter
strukturieren
Verschachtelte Listen
Verschachtelte Listen
Die Tags sind die selben wie bei normalen Aufzählungslisten
Nummerierte Liste
Nummerierte Listen sind Listen wo die „Bullets“ Zahlen sind und eine Reihenfolge signalisieren
Nummerierte Liste
Nummerierte Liste
<ol> </ol> ol = ordered list = nummerierte Liste
Leitet eine nummerierte Liste ein
Definitionsliste
Diese Listen sind für Glossare gedacht, wo Definitionen zu einem Ausdruck stehen
Definitionsliste
Tags
<dl> XXX </dl>
<dt> XXX </dt>
(dl = definition list = Definitionsliste)
Beschreibt eine Definitionsliste
(dt = definition (list) term = Ausdruck in der Definitionsliste)
Beschreibt den zu beschreibenden Ausdruck
Tags
<dd> XXX </dd> (dd = definition (list) definition = Definition in der Definitionsliste)
Beschreibt die Definition eines Ausdrucks
Verzeichnis- oder Menüliste
Diese sollen künftig aus dem HTML Standart entfallen, und werden auch von heutigen Browsern nicht mehr, oder als normale Listen dargestellt.
Verzeichnis- oder Menüliste
Tags
<dir> XXX </dir>
<menu> </menü>
(dir = directory = Verzeichnis)
Beschreibt eine Menüleiste
HTML Eigenschaften für Listen
Tags
<ul type="circle"> <ul type="square"> <ul type="disc">
rundes Bullet eckiges Bullet Dateisymbol als Bullet
(disc = Datenträger wie Disketten oder Festplatten).
Tags
<ol type="I">
<ol type="i">
<ol type="A">
Listeneinträge mit I., II., III., nummerieren
isteneinträge mit i., ii., iii., nummeriert
Listeneinträge mit A., B.,nummeriert.
Tags
<ol type="a">
start (innerhalb von „<ol>“) z.B „<ol start="7">“
value (innerhalb von <li> ) z.B: <li value="15">
Listeneinträge mit a., b., c.nummeriert.
Gibt einen bestimmten Startwert vor
Führt eine Nummerierung bei einer bestimmten Stelle fort
Listen formatieren mit CSS
Mit CSS kann man ganze Listen oder nur einzelne Teile einer Liste formatieren, also z.B. einfärben
Tags
<ul style="list-style-type:disc; color:red; font-weight:bold;">
Färbt eine ganze Liste in eine Einheitliche Farbe
Tags
<ol style="list-style-type:upper-roman; font-weight:bold;">
<li style="color:blue">bei TEST TEST</li>
Beschreibt das in einer Liste eine Farbe verwendet wird
Gibt dem Text die Farbe „Blau“
Tags
<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
Verkleinert die Schriftgröße auf „0,7“
Ende
Quelle: SelfHTML