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

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


verwandte Artikel und Seiten

Listen und Glossare in HTML

HTML für Einsteiger - Kapitel 6

von Thomas Salvador.

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

In HTML werden einige Listentypen zur Strukturierung angeboten, die wichtigsten sind

die sich freilich auch kombinieren (verschachteln) lassen.

Darüber hinaus werden von einigen Browser zusätzliche Attribute ausgewertet.

Listen sind grundsätzlich eigene Absätze, so dass sie zur Klasse der blockorientierten Gestaltungselemente gehören.

Nummerierte Liste

Bei der nummerierten Liste wird jedem Listeneintrag aufsteigend und fortlaufend eine Nummer vorangestellt. Die gesamte Liste wird durch den ol-Tag (ordered list) gekapselt, jeder Listeneintrag durch den li-Tag (list item).

Syntax und Beispiel:

<ol>
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

Ausgabe auf Ihrem Browser
  1. Eintrag
  2. Eintrag
  3. Eintrag

Für jedes Element kann ein beliebiger HTML-Block, insbesondere also wiederum Listen, eingesetzt werden.

Erweiterung:

Manche Browser werten das Attribut type aus:

<ol type="a">
Alphabetische Nummerierung kleingeschrieben: a., b., c., d., ...
<ol type="A">
Alphabetische Nummerierung großgeschrieben: A., B., C., D., ...
<ol type="i">
Römische Nummerierung kleingeschrieben: i., ii., iii., iv., ...
<ol type="I">
Römische Nummerierung großgeschrieben: I., II., III., IV., ...

Beispiel: (Source wie oben, zusätzlich das jeweilige type-Attribut)

type="a" type="A"
  1. Eintrag
  2. Eintrag
  3. Eintrag
  1. Eintrag
  2. Eintrag
  3. Eintrag
type="i" type="I"
  1. Eintrag
  2. Eintrag
  3. Eintrag
  1. Eintrag
  2. Eintrag
  3. Eintrag

Mit dem Attribut start kann die Nummerierung bei einer bestimmten Zahl begonnen werden, z.B. ab 3 mit <ol start=3>. Mit dem Attribut value kann die Nummerierung innerhalb einer Liste beeinflusst werden. Dabei wirkt <li value="42"> so, dass die Nummerierung beginnend bei diesem Element mit 42 fortgesetzt wird.

Beispiel:

<ol start="3">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li value="42"> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

Ausgabe auf Ihrem Browser
  1. Eintrag
  2. Eintrag
  3. Eintrag
  4. Eintrag

Schließlich kann man mit dem Flag compact vorschlagen, dass eine kompaktere Darstellung verwendet werden soll.

Unnummerierte Liste

Bei der unnummerierten Liste wird jedem Listeneintrag ein Aufzählungssymbol vorangestellt. Die gesamte Liste wird durch den ul-Tag (unordered list) gekapselt, jeder Listeneintrag durch den li-Tag (list item).

Syntax und Beispiel:

<ul>
  <li> erster Eintrag </li>
  <li> zweiter Eintrag </li>
  <li> letzter Eintrag </li>
</ul>

liefert

Ausgabe auf Ihrem Browser
  • erster Eintrag
  • zweiter Eintrag
  • letzter Eintrag

Für jedes Element kann ein beliebiger HTML-Block, insbesondere also wiederum Listen, eingesetzt werden.

Erweiterung:

Manche Browser werten das Attribut type aus:

<ul type="circle">
Aufzählungszeichen ist ein kleiner Kreis. Oft Default für die zweite Ebene.
<ul type="square">
Aufzählungszeichen ist ein kleines Quadrat. Oft Default für die dritte Ebene.
<ul type="disc">
Aufzählungszeichen ist ein kleiner ausgefüllter Kreis (Bullet). Meist Default für die erste Ebene.

Beispiel: (Source wie oben, zusätzlich das jeweilige type-Attribut)

type="circle" type="square" type="disc"
  • erster Eintrag
  • zweiter Eintrag
  • letzter Eintrag
  • erster Eintrag
  • zweiter Eintrag
  • letzter Eintrag
  • erster Eintrag
  • zweiter Eintrag
  • letzter Eintrag

Schließlich kann man mit dem Attribut compact vorschlagen, dass eine kompaktere Darstellung verwendet werden soll.

Glossar

Ein Glossar (oder allgemeiner eine deskriptive Liste) wird durch den dl-Tag (definition list) gekapselt. Jeder Eintrag besteht aus zwei Teilen, einem durch den dt-Tag gekapselten Titel des Eintrag (definition term) und dem durch den dd-Tag gekapselten Eintrag (definition) selbst. D.h. es kann ein (beliebiges) HTML-Element als (Aufzählungs-)Symbol verwendet, auch wenn dies i.a. Text sein wird. Insbesondere kann der Text stilistisch aufbereitet werden (s. Beispiel bei Kombination).

Syntax und Beispiel:

<dl>
  <dt>Titel-1</dt>
  <dd>Definition-1</dd>

  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>

  <dt>WWW</dt>
  <dd>World Wide Web.</dd>
</dl>

liefert

Ausgabe auf Ihrem Browser
Titel-1
Definition-1
HTML
HyperText Markup Language.
WWW
World Wide Web.

Kombination

Wie bereits erwähnt können die Listen beliebig geschachtelt werden. Dabei sollte allerdings die Verschachtelungstiefe nicht allzu hoch sein.

Beispiel:

<dl>
  <dt><b>binaural</b></dt>
  <dd>auch: biaural
    <ul>
      <li>Trennung: bin-aural</li>
      <li>Bedeutung:
        <ol>
          <li>beide Ohren betreffend</li>
          <li>zweikanalig
        </ol>
      </li>
      <li>Gegensatz: monaural</li>
      <li>vgl: stereophon, quadrophonisch</li>
    </ul>
  </dd>
  <dt><i>WWW</i></dt>
  <dd>World Wide Web.</dd>
</dl>

liefert

Ausgabe auf Ihrem Browser
binaural
auch: biaural
  • Trennung: bin-aural
  • Bedeutung:
    1. beide Ohren betreffend
    2. zweikanalig
  • Gegensatz: monaural
  • vgl: stereophon, quadrophonisch
WWW
World Wide Web.

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


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 6. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/32.html .