Има различни видове списъци в HTML. Първо, имаме неподредени списъци. В този вид списък всяка отделна позиция в списъка е оборудвана с маркер, наречен буква "bullet".
Неподредените списъци започват с елемента ul. Всяка позиция в списъка е маркирана с елемента li.
<p>Текущи теми от форума</p> <ul> <li>CSS няма да бъде изпълнен повече</li> <li>Холивудски стил от 40-те години в шоурума</li> <li>Списък със спускане на CSS</li> <li>PHP свързване/разкачане</li> <li>Моят малък шоурум - Новакът моли за съвет!</li> </ul>
Ето как изглежда резултатът в браузъра:
Пред всяка публикация се добавя маркер. Външният вид на този маркер е определен от браузъра. Въпреки че съществуват атрибути, които могат да променят изгледа на списъците, те вече не бива да се използват. Вместо това трябва да се приложат свойства на CSS.
Неподредените списъци могат също да бъдат вложени. Първо, погледнете следната илюстрация:
Тук става ясно какво представлява такова влагане.
Синтаксисът изглежда по следния начин:
<ul>
<li>Уроци
<ul>
<li>2D</li>
<li>3D</li>
<li>Уеб</li>
</ul>
</li>
<li>Видео уроци
<ul>
<li>3D</li>
<li>Медийни дизайни</li>
<li>Уеб</li>
</ul>
</li>
<li>Съвети</li>
<li>Магазини</li>
</ul>
В рамките на един списъчен елемент може да има още един списък. Интересно е, че това не е задължително да бъде неподреден списък. Фактически се допускат и други видове списъци - които ще бъдат представени в този урок.
И, като става въпрос за HTML5, не е задължително да се използва затварящият таг </li>. Въпреки по-доброто четимост, аз винаги бих го затварял. Синтактично правилно би било и нещо подобно на следното:
<p>Текущите теми от форума</p> <ul> <li>CSS няма да бъде изпълнен <li>Холивудски стил от 40-те години в шоурума <li>Списък със спускане на CSS <li>PHP connect/disconnect <li>Моят малък шоурум - Новакът моли за съвет! </ul>
Номерирани списъци
Освен неподредени списъци, можем да дефинираме и номерирани списъци. Тук също първо един пример, който показва как изглеждат тези номерирани списъци.
Пред всяка позиция в списъка се добавят последователни числа. Номерираните списъци започват с елемента ol.
Следващият пример показва как може да се използва този елемент.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Подобно на неподредените списъци, всяка позиция се маркира с елемента li.
Теоретично, неподредените списъци могат също да бъдат влагани.
<ol>
<li>Уроци
<ol>
<li>2D</li>
<li>3D</li>
<li>Уеб</li>
</ol>
</li>
<li>Видео уроци
<ol>
<li>3D</li>
<li>Медийни дизайни</li>
<li>Уеб</li>
</ol>
</li>
<li>Съвети</li>
<li>Магазини</li>
</ol>Въпреки това резултатът в браузъра е разочароващ.
По този начин не се постига номерация по следния начин:
1. Уроци 2D
1.1 3D
1.2 Уеб
- Видео уроци 3D
2.1 Медийни дизайни
2.2 Уеб - Съвети
- Магазини
Това не е възможно само с чист HTML. Фактически трябва да се използва CSS, за да се нумерират съдържанията автоматично по подобна схема.
Списъци с дефиниции
Още един вид списъци са т.нар. списъци с дефиниции. Също първо един пример, показващ как изглежда списък с дефиниции в крайна сметка в браузъра:
Основната област на приложение за списъците с дефиниции са глосарите. Ето синтаксиса, който доведе до показаните тук резултати:
<dl>
<dt>AM</dt>
<dd>AM - Въздушна поща</dd>
<dd>AM - Въздушен маршал</dd>
<dd>AM - Амберг</dd>
<dd>AM - Америций</dd>
<dd>AM - Амщетен</dd>
<dt>AN</dt>
<dd>AN - гореопределени</dd>
<dd>AN - Достъпен възел</dd>
<dd>AN - Анкона</dd>
</dl>Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.
Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.
Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.
In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Ново...</button> <button type="button" onclick="fopen()">Отвори...</button> <button type="button" onclick="fsave()">Запази</button> <button type="button" onclick="fsaveas()">Запази като...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Копиране</button> <button type="button" onclick="ecut()">Изрязване</button> <button type="button" onclick="epaste()">Поставяне</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Помощ</a></li> <li><a href="about.html">За нас</a></li> </menu> </li> </menu>
Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.
Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.
Listen gestalten
Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.
Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.
<ol type="A">
Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.
