W trzeciej części kursu zajmiemy się prostymi elementami języka html czyli listami. Listy wykorzystywane są w dokumentach html w celu lepszej organizacji i prezentacji informacji. Niniejsza część kursu opisuje to w jasny i przejrzysty sposób.
Według specyfikacji wyróżniamy trzy rodzaje list:
- Listy wypunktowane
- Listy numerowane
- Listy definicji
Listy służą nam jak sama nazwa wskazuje do utworzenia listy, która będzie zwierała informację, wiadomości lub innego rodzaju dane wymienione jedna pozycja pod drugą.
Listy wypunktowane
Lista wypunktowana charakteryzuje się brakiem jednoznacznej numeracji. W celu rozpoczęcia listy wypunktowanej należy odtworzyć znacznik <ul>. Zakończenie listy wypunktowanej jest równie proste jak jest rozpoczęcie. W celu zakończenia listy należy zamknąć wcześniej otwarty znacznik </ul>. Między znacznikami <ul></ul> umieszczamy znaczniki podpunktów. Znaczniki podpunktów to <li></li>. Wewnątrz tych znaczników można umieścić jakiekolwiek dane.
Cała lista będzie wyglądała następująco:
<ul>
<li> Przykładowy tekst</li>
<li> Przykładowy tekst</li>
</ul>
Jak widać na powyższym przykładzie umieszczanie listy wypunktowanej w dokumencie html nie jest trudne. Jedną ważna rzeczą, na którą należy zwrócić uwagę to zamykanie wcześniej otwartych znaczników.
Listy numerowane
Drugim rodzajem list jakie występują w specyfikacji języka html to listy numerowane. W celu umieszczenia listy numerowanej w dokumencie html należy otworzyć znaczniki <ol></ol>. Wewnątrz tych znaczników umieszczamy tak samo jak w przypadku list wypunktowanych znacznik <li></li>. Między tymi znacznikami można umieścić jakiekolwiek dane.
Cała lista numerowana wygląda następująco:
<ol>
<li> Przykładowy tekst</li>
<li> Przykładowy tekst</li>
</ol>
W tym przypadku w dokumencie html zamiast punktów wyświetlą się cyfry, które będą rozpoczynały się od 1.
Listy definicji
Trzecim i ostatnim rodzajem listy jest lista definicji. W celu umieszczenia listy definicji w dokumencie html należy otworzyć znacznik <dl></dl>. Wewnątrz tego znacznika umieszczamy znacznik <dt></dt>, który służy do wyróżnienia słowa, które będzie definiowane. Po zamknięciu znacznika <dt></dt> umieszczamy znacznik <dd></dd>. Wewnątrz tego znacznika umieszczamy definicję wybranego zagadnienia. W praktyce wygląda to następująco:
<dl>
<dt> Definicja</dt>
<dd> Wyjaśnienie powyższego słowa.</dd>
</dl>
Zagnieżdżanie list
Jedną z przydatnych funkcjonalności list jest ich zagnieżdżanie. Polega to na umieszczaniu w listach wypunktowanych list numerowanych bądź odwrotnie. Generalnie można umieszczać listy w listach w dowolny sposób. Dzięki możliwości zagnieżdżania list można uzyskać oczekiwane efekty w postaci wielostopniowego podziału pewnych danych w dokumencie html.
Listy są jednym z bardzo przydatnych elementów wchodzących w skład języka html. Często spotykane na stronach internetowych pozwalają w jasny i czytelny sposób przedstawić opisywany problem. Zarówno znaczniki wykorzystywane w budowanie list nie są trudne do zapamiętania jak i sposób ich budowy umożliwiają szybką modyfikację wyświetlania danych w dokumencie html.