Listy

Następnym elementem, z jakim możesz spotkać się przy tworzeniu stron WWW, są listy. Specyfikacja określa trzy rodzaje list. Są to: listy punktowane, numerowane oraz definicji. Można się jeszcze spotkać z podziałem na listy uporządkowane (numerowane) oraz nieuporządkowane (wypunktowane), ale to już kwestia interpretacji.

Lista wypunktowana
Do stworzenia listy wypunktowanej będziemy potrzebowali kombinacji dwóch znaczników: <ul></ul> oraz <li></li>. Znacznik <ul></ul> określa ramy listy, natomiast <li ></li> to każdy jej podpunkt. W praktyce wygląda to mniej więcej tak:

<ul>
<li>Pierwsza pozycja listy wypunktowanej</li>
<li>Druga pozycja listy wypunktowanej</li>
<li>Trzecia pozycja listy wypunktowanej</li>
</ul>

• Pierwsza pozycja listy wypunktowanej
• Druga pozycja listy wypunktowanej
• Trzecia pozycja listy wypunktowanej

Lista numerowana
Drugim typem listy jest lista numerowana, której konstrukcja składa się ze znaczników <ol></ol> oraz <li></li >. Zasada jest dokładnie taka sama, jak w przypadku list wypunktowanych.

<ol>
<li>Pierwsza pozycja listy numerowanej</li>
<li>Druga pozycja listy numerowanej</li>
<li>Trzecia pozycja listy numerowanej</l i>
</ol>

1. Pierwsza pozycja listy numerowanej
2. Druga pozycja listy numerowanej
3. Trzecia pozycja listy numerowanej

Lista definicji
Trzecim i ostatnim typem list jest lista definicji. Posiada ona bardzo podobną budowę do dwóch wcześniej omawianych. Na listę definicyjną składa się konstrukcja znaczników <dl></dl>, <dt></dt> oraz <dd></dd>.

<dl>
<dt>Słowo definiowane</dt>
<dd>opis słowa definiowanego</dd>
<dt>Kolejne słowo definiowane</dt>
<dd>opis kolejnego słowa definiowanego</dd>
<dt>Jeszcze jedno słowo definiowane</dt>
<dd>opis nowego słowa definiowanego</dd>
<dt>Ostatnie słowo definiowane</dt>
<dd>opis ostatniego słowa definiowanego</dd>
</dl>

Słowo definiowane

opis słowa definiowanego

Kolejne słowo definiowane

opis kolejnego słowa definiowanego

Jeszcze jedno słowo definiowane

opis nowego słowa definiowanego

Ostatnie słowo definiowane

opis ostatniego słowa definiowanego

Zagnieżdżanie list
Przeglądając strony dostępne w sieci, na pewno widziałeś listy, które stanowiły połączenie list numerowanych oraz wypunktowanych lub po prostu zawierały podpunkty. Nie jest to żaden nowy typ list, a jedynie połączenie opisanych już elementów. Połączenie takie jest w światku webmasterów nazywane zagnieżdżaniem.

Zagnieżdżanie nie jest niczym skomplikowanym, ale wymaga szczególnej dbałości o wpisywany kod. Nawet najdrobniejszy błąd może spowodować, że lista stanie się nieczytelna — „rozjedzie się”.

Podczas zagnieżdżania możemy łączyć różne typy list, np. numerowaną z wypunktowaną. Odpowiedni przykład zamieszczam poniżej, a efekt jego działania przedstawiamy poniżej.

<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3,2</li>
<li>jogurt malinowy</li>
<li>śmietanka do kawy</li>
</ul>
</li>
<li>0woce
<ul>
<li>jabłka</li>
<li>cytrusy <ul>
<li >pomarańcze</li >
<li>mandarynki</li>
</ul>
</li>
<li>brzoskwinie</li>
</ul>
</li>
<li>Pieczywo
<ul>
<li>chleb</li>
<li>bułki</li>
<li>rogaliki </li>
</ul>
</li >
</ol>

1. Produkty mleczne
   • mleko 3,2
   • jogurt malinowy
   • śmietanka do kawy
2. 0woce
   • jabłka
   • cytrusy
     • pomarańcze
     • mandarynki
   • brzoskwinie
3. Pieczywo
   • chleb
   • bułki
   • rogaliki