ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum
HTML - Listen - 02.01.2011
In diesem Tutorial wird gezeigt, wie man in HTML verschiedene Aufzählungen und Listen verwenden kann.
ul - ohne Nummerierung
Eine unsortierte Liste kann zum Beispiel folgendermaßen aussehen:
<ul>
 <li>Ein Listeneintrag</li>
 <li>Und noch einer</li>
 <li>Noch Mehr...</li>
</ul>
Und das sieht dann so aus:
  • Ein Listeneintrag
  • Und noch einer
  • Noch Mehr...
Eine Unsortierte Liste wird von <ul>-Tags (ul = unordered list) umschlossen. Die einzelnen Listenpunkte werden in <li>-Tags (li = list item) gepackt.
ol - Nummeriert
Eine nummerierte Liste sieht ganz ähnlich aus:
<ol>
 <li>Ein Listeneintrag</li>
 <li>Und noch einer</li>
 <li>Noch Mehr...</li>
</ol>
Und das sieht dann so aus:
  1. Ein Listeneintrag
  2. Und noch einer
  3. Noch Mehr...
Nur das ul musste durch ein ol (ol = ordered list) ersetzt werden.
Definitionslisten
Definitionslisten sind für Glossare und Begriffserklärungen gedacht. Hier mal wieder ein Beispiel vorweg:
<dl>
 <dt>Ein Unverständlicher Begriff</dt>
 <dd>Die super-verständliche Antwort...</dd>
 <dt>Noch einer</dt>
 <dd>Die aller Beste Erklärung, die man sich nur vorstellen kann...</dd>
 <dt>Ein Begriff</dt>
 <dd>Die Tolle Erklärung...</dd>
</dl>
Und das sieht dann so aus:
Ein Unverständlicher Begriff
Die super-verständliche Antwort...
Noch einer
Die aller Beste Erklärung, die man sich nur vorstellen kann...
Ein Begriff
Die Tolle Erklärung...
Die Liste wird von <dl>-Tags (dl = definition list) umschlossen, die zu erklärenden Begriffe von <dt>-Tags (dt = definition (list) term) und die Erklärungen werden von <dd>-Tags (dd = definition (list) definition) umschlossen.
Listen verschachteln
Listen lassen sich auch verschachteln. Hier nur ein kurzes Beispiel:
<ol>
 <li>Der erste Listenpunkt</li>
 <li>Der zweite Listenpunkt hat Unterpunkt:
  <ul>
   <li>Unterpunkt 2.1</li>
   <li>Unterpunkt 2.2</li>
   <li>Noch mehr Verschachtelung:
    <ol>
     <li>Punkt 2.3.1</li>
     <li>Punkt 2.3.2</li>
    </ol>
   </ul>
  </li>
  <li>Der dritte Listenpunkt</li>
</ol>
Das sieht dann so aus:
  1. Der erste Listenpunkt
  2. Der zweite Listenpunkt hat Unterpunkt:
    • Unterpunkt 2.1
    • Unterpunkt 2.2
    • Noch mehr Verschachtelung:
      1. Punkt 2.3.1
      2. Punkt 2.3.2
  3. Der dritte Listenpunkt
Listen anpassen
Man kann bei Listen zum Beispiel die Art der Nummerierung (z.B mit Buchstaben oder römischen Ziffern) festlegen. Das wird in einem weiteren Turorial gezeigt.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.