HTML / Tekst
Wykaz <UL, OL, LI>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
(lista wyliczeniowa)
wyświetlanie: w bloku
Wypunktowanie (podstawowy) - lista nieuporządkowana
<ul> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul>
Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać tylko wewnątrz znaczników punktów wykazu, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:
<ul> Wykaz... <li>Punkt pierwszy</li> <br> <li>Punkt drugi</li> <br> </ul>
Przykład:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany (podstawowy) - lista uporządkowana
<ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Przykład:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany - różne typy
<ol type="rodzaj numeracji"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
- "1" (domyślny) - numeracja według liczb arabskich
- "I" - według dużych liczb rzymskich
- "i" - według małych liczb rzymskich
- "a" - według małych liter
- "A" - według dużych liter
Przykład:
<ol type="1"> (domyślny)
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="I">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="i">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="A">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="a">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany z podaniem początkowego numeru
<ol start="n"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!
Przykład:
Zmiana numerowania "w trakcie"
<ol> <li>Punkt pierwszy</li> <li value="n">Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Wartość atrybutu VALUE zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!
Przykład:
Edytory HTML posiadają często specjalny generator wykazów, który może ułatwić pracę.
Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu:
<ul style="color: red"> <li><span style="color: black">Punkt pierwszy</span></li> <li><span style="color: black">Punkt drugi</span></li> <li><span style="color: black">Punkt trzeci</span></li> </ul>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Dotyczy to wszystkich typów wykazu:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Możliwe jest również określenie innego koloru dla każdego punktu wykazu:
<ul> <li style="color: red"><span style="color: black">Punkt pierwszy</span></li> <li style="color: green"><span style="color: black">Punkt drugi</span></li> <li style="color: blue"><span style="color: black">Punkt trzeci</span></li> </ul>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz akapitu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Akapit nie jest zwykłym elementem blokowym, ponieważ nie może zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego elementu blokowego, nawet przed znacznikiem zamykającym </p>
. W języku HTML nie jest to błąd, natomiast w XHTML już tak.
Przykład:
Po wpisaniu:
<p style="text-align: center"> Tu rozpoczyna się akapit... <ul> <li>Punkt pierwszy wykazu</li> <li>Punkt drugi wykazu...</li> </ul> ...tu powinien skończyć się akapit. </p>
otrzymamy:
Tu rozpoczyna się akapit...
- Punkt pierwszy wykazu
- Punkt drugi wykazu...
...tu powinien skończyć się akapit.
Jak widać akapit zakończył się przed wykazem, ponieważ ostatnia linijka nie została ustawiona na środku (tak jak pierwsza). Aby to zmienić, należy rozpocząć nowy akapit tuż za wykazem i określić dla niego odpowiednie atrybuty lub ewentualnie zamiast akapitu użyć bloku.