Listy
Przyszedł czas na omówienie list, które są dosyć często używane przy pisaniu stron.Dzielą się one na trzy rodzaje: uporządkowane, nieuporządkowane oraz definicji.
Listy nieuporządkowane
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 kodzie wygląda to tak:
<ul> - początek listy nieuporządkowanej <li> Mandarynki </li> - poszczególne elementy listy <li> Pomarańcze </li> <li> Brzoskwinie </li> </ul> - koniec listy nieuporządkowanej
A tak wyglądałaby nasza lista na stronie:
- Mandarynki
- Pomarańcze
- Brzoskwinie
Listy uporządkowane
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 nieuporządkowanych
Widok w kodzie:
<ol> - początek listy uporządkowanej <li> Mandarynki </li> - poszczególne elementy listy <li> Pomarańcze </li> <li> Brzoskwinie </li> </ol> - koniec listy uporządkowanej
A tak wyglądałaby nasza lista na stronie:
- Mandarynki
- Pomarańcze
- Brzoskwinie
Listy 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>.
Widok w kodzie:
<dl> <dt> Mandarynka </dt> - znacznik pojęcia <dd> Owoc przypominający małą pomarańczę. </dd> - znacznik definicji <dt> Jabłko</dt> <dd> Tym owocem wąż kusił ludzi w raju. </dd> </dl>
Przykład:
- Mandarynka
- Owoc przypominający małą pomarańczę.
- Jabłko
- Tym owocem wąż kusił ludzi w raju.
To już niby wszystkie rodzaje list, ale co jeżeli chcielibyśmy zrobić listę zawierającą w sobie podpunkty.Jest to tak zwana lista zagnieżdzona.Spokojnie zagnieżdżanie nie jest niczym skomplikowanym, ale wymaga szczególnej dbałości o wpisany kod.
Lista zagnieżdżona
Wygląda ona tak:
- 1
- 1.1
- 1.2
- 2
- 3
- 3.1
- 3.2
- 3.3
Tak będzie wyglądał jej kod:
<ul>
<li> 1 - znacznik otwierający pierwszy element listy głównej
<ul> - znacznik otwierający listę podporządkowaną
<li> 1.1 </li> - element listy podporządkowanej
<li> 1.2 </li> - element listy podporządkowanej
<ul> - znacznik zamykający listę podporządkowaną
</li> - znacznik zamykający pierwszy element listy głównej
<li> 2 </li>
<li> 3
<ul>
<li> 3.1 </li>
<li> 3.2 </li>
<li> 3.3 </li>
</ul>
</li>
</ul>