Stosując listy możemy znacznie uprościć sobie pracę. Nie musimy sami wpisywać kolejnych numerów czy punktów. Wpisując odpowiedni kod zostanie to zrobione za nas.
Poniżej poznamy dwa rodzaje list. Listy wypunktowane korzystające ze znaczników <ul> oraz listy numerowane o znacznikach <ol>. Za pomocą tych dwóch list będzie można stworzyć listę zagnieżdżoną. A więc do roboty.
Zacznijmy od znacznika <UL>
| <ul type=”rodzaj”> <li> pierwszy element <li> drugi element <li> trzeci element </ul> |
Po wpisaniu tego kodu otrzymamy:
- pierwszy element
- drugi element
- trzeci element
Jako „rodzaj” mamy do wyboru trzy możliwości:
„circle” – oznacza okrąg
„square” – oznacza wypełniony kwadrat
„disc” – oznacza wypełnione koło (domyślnie)
Atrybut type jest przestarzały i zaleca sie stosowanie CSS (Cascading Style Sheet). Natomiast nie zdefiniowanie jego spowoduje wyświetlenie wypełnionego koła (disc). Znaczniki „li” w HTML’u nie wymagają zamykania. Pamiętać jednak trzeba, że już w XHTML’u zamykanie tych znaczników jest wymagane.
A teraz znacznik <OL>
| <ol type=”rodzaj”> <li> pierwszy element <li> drugi element <li> trzeci element </ol> |
Po wpisaniu tego kodu otrzymamy:
- pierwszy element
- drugi element
- trzeci element
W tym przypadku w miejsce „rodzaj” możemy wpisać:
„I” – numeracja za pomocą dużych liczb rzymskich
„i” – numeracja za pomocą małych liczb rzymskich
„A” – numeracja za pomocą dużych liter
„a” – numeracja za pomocą małych liter
„1” – numeracja za pomocą liczb arabskich (domyślnie)
Znając już dwa sposoby stosowania list możemy pokusić się o zrobienie listy zagnieżdżonej. Aby lista ta nie była bezużytecznym przykładem posłużę się w niej menu z restauracji. Zawarte w niej potrawy są przypadkowe i nie świadczą o moim zamiłowaniu do nich.
- Zupy
- Rosół
- Grochówka
- Pomidorowa
- Drugie danie
- Spaghetti
- Pierogi ruskie
- Gołąbki w sosie grzybowym
- Napoje
A oto kod powyższej listy:
| <ol> <li>Zupy <ul> <li>Rosół <li>Grochówka <li>Pomidorowa </ul> <li>Drugie danie <ul> <li>Spaghetti <li>Pierogi ruskie <li>Gołąbki w sosie grzybowym </ul> <li>Napoje </ol> |
Widzimy, że zagnieżdżanie list jest niczym innym jak umieszczeniem jednej listy w drugiej. Nie powinno to sprawić nikomu kłopotu. Aby kod był czytelniejszy starajmy się robić wcięcia.
