0 3772

Wie macht man HTML Listen

Eine HTML Liste könnte folgendermaßen aussehen:

  • HTML
    • HTML Tutorial 1
    • HTML Tutorial 2
  • XHTML
  • CSS
  • Javascript
  • PHP

Es gibt sortierte Listen (ordered lists), unsortierte Listen (unordered lists) und Definitionslisten. Wir werden alle drei Listenarten besprechen.

Die erste Listenart ist die unordered list:

Wir benötigen ein öffnendes und ein schließendes ul Tag. Jede einzelne Position wird mit einem li-Element umschlossen:

Beispielcode HTML:


<pre><html>
 <body>
  <ul>
   <li>Element 1</li>
   <li>Element 2</li>
   <li>Element 3</li>
   <li>Element 4</li>
  </ul>
 </body>
</html></pre>

Wenn Sie diese HTML erstellt und getestet haben, sehen Sie schwarze runde Punkte vor den einzelnen Positionen. Diese Listenpunkte können wir ändern:

Beispielcode HTML:


<pre><html>
 <body>
  <ul type="square">
   <li>Element 1</li>
   <li>Element 2</li>
   <li>Element 3</li>
   <li>Element 4</li>
  </ul>
 </body>
</html></pre>

Square steht für Quadrat. Genau das müssten Sie nun als Listenpunkt vor jeder einzelnen Position sehen können: Ein schwarzes Quadrat.

Sie können als Werte square (ausgefülltes Quadrat), circle (leerer Kreis) und disc (ausgefüllter Kreis) anwenden.

Als nächstes gibt es noch die ordered lists. Hier können Sie die Punkte oder Quadrate mit buchstaben (alphabteisch sortiert), römischen Zahlen oder arabischen Ziffern ersetzen.

So könnte es aussehen:

  1. Position
  2. Position
  3. Position
  1. Position
  2. Position
  3. Position
  1. Position
  2. Position
  3. Position

Um dies hinzubekommen setzen wir nun die ordered list ein:

Um die Liste durchzunummerieren:

Beispielcode HTML:


<pre><html>
 <body>
  <ol type="1">
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
  </ol>
 </body>
</html></pre>

Um die Liste mit römischen Ziffern durchzunummerieren:

Beispielcode HTML:


<pre><html>
 <body>
  <ol type="I">
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
  </ol>
 </body>
</html></pre>

Für eine alphabetische Liste mit kleinen Buchstaben:

Beispielcode HTML:


<pre><html>
 <body>
  <ol type="a">
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
  </ol>
 </body>
</html></pre>

und für eine alphabetische Liste mit großen Buchstaben:

Beispielcode HTML:


<pre><html>
 <body>
  <ol type="A">
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
  </ol>
 </body>
</html></pre>

Es gibt die Möglichkeit die Listen ineinander zu verschachteln. Ich habe zu Beginn des Artikels ein solches Beispiel gezeigt.

Um Listen ineinander zu verschachteln fügt man einfach an der gewünschten Stelle eine weitere Liste ein:

Beispiel:

Beispielcode HTML:


<pre><html>
 <body>
  <ol type="1">
   <li>Paragraph</li>
 <ol type="a">
     <li>Absatz</li>
     <li>Absatz</li>
     <li>Absatz</li>
     <li>Absatz</li>
    </ol>
   <li>Paragraph</li>
   <li>Paragraph</li>
   <li>Paragraph</li>
  </ol>
 </body>
</html></pre>

So kann man eine ordentliche Auflistung erstellen. Selbstverständlich kann man die Listenpunkte auch verlinken.

Zuletzt gibt es noch die Definitionslisten:

Eine Definitionsliste kann beispielsweise verwendet werden um Abkürzungen zu erklären:

z.B.
zum Beispiel
a.A.
auf Anfrage
bspw.
beispielsweise

Wir erstellen nun obige Definitionsliste:

Beispielcode HTML:


<pre><html>
 <body>
  <dl>
   <dt>z.B.</dt>
   <dd>zum Beispiel</dd>
   <dt>a.A.</dt>
   <dd>auf Anfrage</dd>
   <dt>bspw.</dt>
   <dd>beispielseise</dd>
  </dl>
 </body>
</html></pre>

Nun kennen Sie alle Listenmöglichkeiten, die HTML bietet.

Listen werden standardmäßig zur Menüführung in Kombination mit CSS verwendet. Die meisten Menüs, die Sie auf Internet Seiten sehen, basieren auf HTML-Listen. Hierbei ist es völlig egal, ob das Menü vertikal oder horizontal ist. In späteren Tutorials werde ich Ihnen zeigen, wie Sie aus diesn Listen graphische Menüs machen können.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter