Kada kažemo liste, uglavnom mislimo na jednostavno, vizuelno odvajanje sadržaja u smislene celine. To je svakako tačno, ali liste u HTML-u mogu biti mnogo više. Lista može poslužiti da odvojimo određene celine, radi grupisanja više linkova u celinu, radi dodeljivanja prioriteta određenim elementima i tako dalje.
Same liste i ne moraju izgledati kao što ih možda zamišljamo, već mogu imati potpuno drugačiji izgled, pri čemu korisnik i ne primećuje da je sadržaj strukturiran pomoću liste. Na primer, veliki broj navigacija (osnovnih menija) na sajtovima danas je kreiran pomoću lista, koje su stilizovane poput dropdown menija i sl.
Prikaz tipične liste na jednoj od strana Wikipedije
Prikaz liste u nešto drugačijem obliku
U prvom primeru na slici vidimo jednu standardnu primenu liste, i to takozvaneneuređene liste, gde je pomoću bulleta strukturiran tekst u smislene celine, pojedinačne stavke. Takav prikaz nabrajanja je pregledniji od običnog paragrafa teksta.
U drugom primeru vidimo navigaciju sajta koja je takođe realizovana pomoću neuređene liste, ali koja je drastično izmenjena u vizuelnom smislu, korišćenjem CSS opisa. Same stavke su poređane horizontalno, jedna pored druge i lista sadrži i ugnježdene stavke koje se otvaraju vertikalno na prelazak mišem.
Ipak, obe liste, i u prvom i drugom primeru, imaju istovetnu strukturu u HTML jeziku, samo se razlikuje njihova stilizacija, vizuelni prikaz, za šta je zaslužan CSS. Dakle, možemo zaključiti da HTML liste koristimo za strukturiranje (uglavnom) tekstualnog sadržaja. Sama vizuelizacija, prikaz, može se razlikovati od onoga šta tradicionalno smatramo nabrajanjem (listom).
Dalje u toku ove lekcije upoznaćemo se detaljno sa strukturom listi.
Tipovi listi
Postoji tri tipa listi:
- Ordered (uređene) liste su liste čije se stavke označavaju nekim tipom rednih elemenata. Najčešće brojevima, rimskim brojevima, slovima alfabete i tako dalje.
- Unordered (neuređene) liste su liste čije se stavke označavaju raznim elementima – kvadrat, krug, crta i tako dalje. Za razliku od uređenih listi, ne potencira se značaj redosleda elemenata.
- Definition (definicione) liste su liste čije se stavke sastoje iz dva dela, teksta i definicije. Korisne su za kreiranje pitanja i odgovora, jer su uvek sastavljene iz parova. Danas se ovaj treći tip sve manje koristi.
Uređene liste
Za označavanje uređenih listi se koristi tag <ol>. Kao kod ranije pomenutih tagova, postavljamo početni i kranji ol tag, a zatim unutar njega, nove <li>tagove, od kojih je svaki nova stavka liste. Pogledajmo na primeru:
Primećujemo da na početku liste stoji početni <ol> tag, zatim slede pojedinačne stavke okružene tagom <li>, i na kraju se završava lista sa</ol>. Ovakvom strukturom je tag liste obuhvatio sve unete stavke i browser zna da su sve stavke povezane u jednu celinu. Po default vrednostima, u browseru ova lista izgleda ovako:
Prikaz uređene liste u browseru
Ono što je bitno i na šta treba obratiti pažnju je da nismo ručno u stavkama unosili redne brojeve, iako su oni prisutni u prikazu. Browseri prilikom prikaza uređenih listi sami dodaju redne brojeve ispred stavki.
Naravno, kao što ćemo videti kasnije tokom godine kada budemo upoznali CSS jezik, možemo i ukloniti te brojeve ako želimo, ili ih možemo promeniti u rimske brojeve, slova alfabete i slično.
Neuređene liste
Neuređene liste imaju veoma sličnu strukturu kao malopre pomenute uređene liste. Razlika je u tagu koji koristimo. U slučaju neuređenih listi to je tag <ul>. Imajući to u vidu primer može izgledati ovako:
Dok bi prikaz u browseru izgledao ovako:
Prikaz neuređene liste u browseru
Kao što možemo primetiti, više se ne prikazuju redni brojevi već jednostavno nabrajanje preko bulleta(tačaka). Nemaju svi browseri isti prikaz u pogledu veličine i pozicije bulleta, ali su prilično slični. Kao i kod uređenih listi, možemo kasnije promeniti ili ukloniti oznake (CSS jezikom).
Pošto su uređene i neuređene liste tako slične, možemo jednostavnom promenom taga liste u kôdu, promeniti tip liste iz uređene u neuređenu i obrnuto.
Ranije smo napomenuli, a sada ćemo ponoviti da je veoma važno kako pišemo kôd. Moramo voditi računa da sve tagove pravilno otvorimo i zatvorimo, ali i da ih ne ukrštamo. I jedan pogrešan karakter može načiniti haos na strani u prikazu.
Postoje takozvane ugnježdene liste, koje za razliku od prethodnih primera imaju više nivoa stavki. To najlakše možemo primetiti na sledećem primeru:
A evo kako to izgleda u browseru:
Prikaz ugnježdene liste u browseru
U primeru, ako posmatramo prikaz u browseru, možemo uočiti prvi nivo stavki, dok jedna stavka (fudbal) ima svoje ugnježdene stavke. Ako pažljivo pogledamo kôd, vidimo da je kompletna ugnježdena lista (obojena plavom bojom u kôdu) smeštena unutar jedne stavke sadržajuće liste.
Ovde je neuređena lista ugnježdena takođe u ul listu. Pored ovakvog primera, možemo ugnjezdiiti ol u ul listu i obrnuto.
Type atribut za ul i ol liste
Simbol koji se prikazuje ispred stavki liste može se definisati pomoću CSS opisa, ili kroz HTML atributtype. Time zaključujmo da listu možemo stilizovati bilo koristeći CSS pravila, bilo HTML tagove. Za sada ćemo se zadržati na HTML varijanti.
Atribut type za neuređene liste (ul) može imati sledeće vrednosti:
- circle – što odgovara krugu
- disc – što odgovara punom krugu
- square, što odgovara kvadratu
dok za uređene (ol) može biti:
- A – što odgovara velikim slovima
- a – što odgovara malim slovima
- I – što odgovara velikim rimskim brojevima
- i – što odgovara malim rimskim brojevima
I u kodu jedna neuređene lista može izgledati ovako:
Zbog atributa type sa vrednošću square zaključujemo da će ova lista imati stavke označene kvadratima.
