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