Lekcja Listy: uporządkowane, nieuporządkowane, definicji oraz zagnieżdżone

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na to, w jaki sposób definiuje się określone listy. Listy definiuje się za pomocą znacznika podstawowego, innego dla każdego rodzaju listy (DL - dla list definicji, OL - dla list uporządkowanych(1,2,3,4,5...) i UL - dla list nieuporządkowanych), oraz znacznika dodatkowego opisującego rodzaj wpisywanego elementu (DT - termin, DD - definicja - opis terminu, LI - element listy).

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego zastosowanie kolejno:

1) list uporządkowanych,
2) list nieuporządkowanych,
3) list definicji,
4) list zagnieżdżonych.

Lista uporządkowana

Ten typ list nadaje się najbardziej do przedstawienia spisu treści lub tworzenia instrukcji krok po kroku. Lista ta może być wstawiana w dowolnym miejscu sekcji BODY dokumentu HTML.

<h1>Zapisywanie zdjęć na dysk</h1>
Nagłówek listy od H1 do H6

<ol> Znacznik <OL> rozpoczyna listę uporządkowaną (1,2,3,4,5,6,7,......)

Znacznik <li> rozpoczyna element listy

<li> W menu plik wybierz polecenie zapisz jako
<li> Podaj nazwę pliku
<li> Podaj typ pliku (jpg, bmp,gif, tiff,..)
<li> Miejsce docelowe.
<li> Kliknij przycisk OK.
<//ol>Znacznik <OL> kończy listę uporządkowaną

Lista nieuporządkowana

<h1>ZESPOŁY ROCKOWE</h1>
<ul> Znacznik <UL> rozpoczyna listę nieuporządkowaną

<li>RAINBOW
<li>DEF LEPPARD
<li>URIAH HEEP
<li>QUEEN
<li>ASIA
</ul>; Znacznik </UL> kończy listę nieuporządkowaną.

Lista definicji

<h1>OPIS WIELKOŚCI FIZYCZNYCH</h1>

Znacznik <dl> rozpoczyna listę definicji

<dt> Natężenie prądu. Znacznik <DT> rozpoczyna termin, który niżej będzie omawiany

<dd>Wielkość określająca ilość ładunku przepływającego w jednostce czasu. Jednostką tej wielkości jest Amper

Znacznik <dd> rozpoczyna opis terminu wyżej wykazanego

<dt> Siła elektrodynamiczna
<dd> Wielkość fizyczna, która pojawia się gdy przewodnik w którym płynie prąd umieścimy w polu magnetycznym nierównolegle do linii sił pola magnetycznego. Jednostką tej wielkości jest Newton
<dt> Prąd indukcyjny

<dd> Prąd, który powstaje w przewodniku na wskutek zmiany pola magnetycznego obejmowanego przez ten przewodnik. Np grając w tenisa ziemnego metalową rakietą w jej główce wzbudza się prąd indukcyjny.
<dt> Moc

<dd> Wielkość fizyczna równa ilorazowi pracy wykonanej w jednostce czasu. Jednostką mocy jest Wat
Znacznik </DL> kończy listę definicji

Lista zagnieżdżona

Bardzo często w celu uzyskania większej czytelności przekazywanych danych stosuje się listy zagnieżdżone to znaczy listę buduje się z większej liczby list często różnych typów.

<h1>Pierwszy przykład Listy zagnieżdżonej</h1>
<ul>
<li>pierwszy element listy
<ul>
<li>pierwszy podelement pierwszego elementu listy
<ul>
<li>pierwszy podelement pierwszego podelementu pierwszego elementu listy
</ul></ul>
<li>drugi element listy
<ul>
<li>pierwszy podelement drugiego elementu listy
<li>drugi podelement drugiego elementu listy
<ul>
<li>pierwszy podelement drugiego podelementu
drugiego elementu listy
</ul></ul></ul>

<h1>Drugi przykład Listy zagnieżdżonej</h1>
<ul>
<li>Pierwszy główny element listy
<ul>
<li>Pierwszy podelement pierwszego głównego elementu
<ol>
<li>Pierwszy podelement pierwszego podelementu
pierwszego elementu głównego
<li>Drugi podelement pierwszego podelementu
pierwszego elementu głównego
<li>Trzeci podelement pierwszego podelementu
pierwszego elementu głównego
<ol type=a start=1>
<li>Pierwszy podelement trzeciego podelementu
pierwszego podelementu pierwszego elementu głównego
</ol></ol></ul>
<li>Drugi główny element
</ul>

</body>
</html>

Powyżej kolorem czerwonym opisane zostały funkcje niektórych znaczników, ale teksty te nie są częścią składową kodu HTML.

Dotyczy list uporządkowanych (numerowanych):
Wartości atrybutu TYPE znacznika OL określają sposób wyliczania listy. Tak więc: A - duże litery, a - małe litery, I - cyfry rzymskie duże, i - cyfry rzymskie małe oraz 1 - cyfry arabskie (ustawienie domyślne).
Wartość atrybutu START określa, od którego znaku z kolei ma rozpocząć się znakowanie listy. Jest to wartość liczbowa automatycznie zamieniana na właściwy znak zgodnie z ustawieniem atrybutu TYPE.

Dotyczy list nieuporządkowanych (punktowanych):
Tu też może występować atrybut TYPE i może przyjmować wartości: DISC - wypełnione koło (domyślnie dla pierwszego poziomu zagnieżdżenia), ROUND - niewypełnione koło (domyślnie dla drugiego poziomu zagnieżdżenia) lub SQUARE - kwadrat (domyślnie dla trzeciego poziomu).

Rady:

Należy starać się, by treść elementu listy była krótka. Jeśli byłaby długa, to może rozsądniej byłoby użyć znaków formatujących HTML.

Listy można zagnieżdżać to znaczy można tworzyć listę będącą elementem innej listy.

Tworząc listy, w celu uzyskania większej czytelności kodu źródłowego stosuj wcięcia, zachowując odpowiednią hierarchię listy.

Ogólnie przyjęto następującą kolejność wyliczania w listach zagnieżdżonych: I, A, 1, a, i.

Aby zmienić kolejność oznaczeń domyślnych, stosuj atrybut TYPE.