Listy


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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *