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:
<html>
<body>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
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:
<html>
<body>
<ul type="square">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
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:
- Position
- Position
- Position
- Position
- Position
- Position
- Position
- Position
- Position
Um dies hinzubekommen setzen wir nun die ordered list ein:
Um die Liste durchzunummerieren:
Beispielcode HTML:
<html>
<body>
<ol type="1">
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ol>
</body>
</html>
Um die Liste mit römischen Ziffern durchzunummerieren:
Beispielcode HTML:
<html>
<body>
<ol type="I">
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ol>
</body>
</html>
Für eine alphabetische Liste mit kleinen Buchstaben:
Beispielcode HTML:
<html>
<body>
<ol type="a">
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ol>
</body>
</html>
und für eine alphabetische Liste mit großen Buchstaben:
Beispielcode HTML:
<html>
<body>
<ol type="A">
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ol>
</body>
</html>
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:
<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>
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:
<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>
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.
Related posts:
- Formulare in HTML Teil 2 Es gibt eine weitere Möglichkeit dem Besucher eine Auswahl zu...
- Wie man in HTML Tabellen nur den tbody scrollt ...Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen:...
- Formulare in HTML Teil 1 Manchmal ist es zwingend notwendig mit seinen Besuchern Rücksprache zu...
- Zeilenumbruch verhindern in HTML Schlimm ist es, wenn beispielsweise ein Geldbetrag vom Währungszeichen per...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
