0 3936

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 konzentriert sich seit zwei Jahrzehnten 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