Mittwoch, 28. Mai 2014

Aufzählungslisten in HTML

Für eine Aufzälhungsliste gibt es verschiedene Tags es kommt immer auf die Listenart an, die verwendet werden soll. Für die einzelnen Listeneinträge gibt es das Tag <li> (list item = Listeneintrag). Der Listeneintrag steht zwischen dem Start-Tag <li> und dem End-Tag </li> Nach dem End-Tag </li> wird automatisch eine neue Zeile angefangen.

Die unsortierte Liste
Bei einer unsortierten Liste, steht das Tag <li> und </li> zwischen Start-Tag <ul> (unordered list = unsortierte Liste) und End-Tag </ul>. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Listen in HTML </title>
  4.         </head
  5.         <body>
  6.                 <ul>
  7.                         <li>Erster Listeneintrag</li>
  8.                         <li>Zweiter Listeneintrag</li>
  9.                         <li>Dritter Listeneintrag</li>
  10.                 </ul>
  11.         </body>
  12. </html>

Bei einer unsortierten Liste wird automatisch ein Aufzählungszeichen den einzelnen Listeneinträgen hinzugefügt.



Die nummerierte Liste
Bei einer nummerierte Liste, steht das Tag <li> und </li> zwischen Start-Tag <ol> (ordered list = nummerierte Liste) und End-Tag </ol>. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Listen in HTML </title>
  4.         </head
  5.         <body>
  6.                 <ol>
  7.                         <li>Erster Listeneintrag</li>
  8.                         <li>Zweiter Listeneintrag</li>
  9.                         <li>Dritter Listeneintrag</li>
  10.                 </ol>
  11.         </body>
  12. </html>

Bei einer nummerischen Liste werden die Listeneinträge automatisch durchnummeriert.


Die Definitionsliste
Die Definitionsliste ist für Glossare gedacht. Das Start-Tag <dl> (defination list = Definitionsliste) und End-Tag </dl> steht für die Definitionsliste. Zwischen diesen Tags können das Start-Tag <dt> (defination term = Ausdruck der Liste) und End-Tag </dt> und das Start-Tag <dd> (defination defination = Defination der Liste) und End-Tag </dd> stehen. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Listen in HTML </title>
  4.         </head
  5.         <body>
  6.                 <dl>
  7.                         <dt>Eigenschaften von Mineralien</dt>
  8.                         <dd>Durchsichtigkeit</dd>
  9.                         <dd>Farbe</dd>
  10.                         <dd>Dichte</dd>
  11.                         <dd>Spaltbarkeit und Bruch</dd>
  12.                         <dd>Härte</dd>
  13.                         <dt>Entstehung und Vorkommen der Mineralien</dd>
  14.                         <dd>Eruptivgesteine</dd>
  15.                         <dd>Sedimentgesteine</dd>
  16.                         <dd>Metamorphe Gesteine</dd>
  17.                 </dl>
  18.         </body>
  19. </html>

Der Ausdruck der Definitionsliste ist ein Begriff der z.B. die Attribute der Liste beschreibt, wie hier im Beispiel in Zeile 7 und 13. Die Definition sind die aufzählbaren Attribute des Ausdrucks.


Verschachtelte Listen
Die drei Listenarten können auch beliebig verschachtelt werden. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Listen in HTML </title>
  4.         </head
  5.         <body>
  6.                 <dl>
  7.                         <dt>Eigenschaften von Mineralien</dt>
  8.                         <ul>
  9.                                 <li>Durchsichtigkeit</li>
  10.                                 <li>Farbe</li>
  11.                                 <li>Dichte</li>
  12.                                 <li>Spaltbarkeit und Bruch</li>
  13.                                 <li>Härte</li>
  14.                         </ul>
  15.                         <dt>Entstehung und Vorkommen der Mineralien</dt>
  16.                         <ol>
  17.                                 <li>Eruptivgesteine</li>
  18.                                 <li>Sedimentgesteine</li>
  19.                                 <li>Metamorphe Gesteine</li>
  20.                         </ol>
  21.                 </dl>
  22.         </body>
  23. </html>


Es ist auch möglich das Aussehen der Listen zu verändern, z.B ein anderes Aufzählungszeichen verwenden oder die Nummerierung ändern. Dafür sollte aber CSS verwendet werden und nicht mehr HTML, dies ist zwar auch noch möglich, aber CSS ist dafür um einiges besser geeignet.

Keine Kommentare:

Kommentar veröffentlichen