Ključne stavke
- HTML liste su neizostavne za strukturiranje i prikazivanje podataka na veb stranici. Postoje tri osnovna tipa: uređene, neuređene i liste opisa.
- Uređene liste koriste brojeve ili druge simbole za numerisanje stavki. Atribut „type“ omogućava prilagođavanje, dok „start“ i „reversed“ atributi menjaju početnu poziciju i redosled.
- Neuređene liste grupišu srodne stavke bez određenog redosleda. Izgled markera se može definisati pomoću CSS-a.
HTML lista je fundamentalni element strukture za bilo koju grupu povezanih informacija na veb stranici. Bilo da pravite meni, organizujete proizvode na rasprodaji ili predstavljate složene informacije u čitljivijem formatu, ove liste će vam pomoći da to učinite efikasno.
Postoje tri glavne vrste HTML lista, svaka sa svojom specifičnom namenom u veb dizajnu.
1. Uređena lista
HTML uređena lista omogućava da grupišete niz srodnih stavki u tačnom redosledu. Za kreiranje nove uređene liste koristite oznaku <ol>. Oznaka <ol> grupira i sadrži <li> oznake. Svaki element liste (<li> oznaka) sadrži pojedinačnu stavku na listi.
<ol> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> </ol>
Ovaj kod generiše sledeći prikaz:
Treba imati na umu da je podrazumevani tip redosleda u uređenoj listi numerički, ali to se može promeniti pomoću atributa „type“. Atribut „type“ omogućava da odaberete način na koji će lista biti numerisana. Možete koristiti slova (velika ili mala), brojeve ili rimske brojeve (velike ili male).
<ol type="a"> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> </ol>
Dodavanjem atributa „type“ u <ol> oznaku, prikaz se menja na sledeći način:
Pored atributa „type“, postoje još dva atributa koji se mogu koristiti sa <ol> oznakom: „start“ i „reversed“.
Atribut „start“ omogućava da se redosled započne od bilo koje pozicije koristeći celobrojnu vrednost. Na primer, ako se doda start="3" u <ol> oznaku, bez navođenja tipa, lista će početi da se numeriše od broja tri. Ako se dodeli type="a" ili type="I", redosled će započeti od slova „c“, odnosno „III“.
<ol type="I" start="3"> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> </ol>
Gornji kod generiše sledeći prikaz:
Atribut „reversed“ omogućava da se redosled liste obrne. Prihvata logičku vrednost, a podrazumevana vrednost je „false“.
<ol reversed="true"> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> </ol>
Ovaj kod proizvodi sledeći izlaz u pregledaču:
2. Neuređena lista
Neuređena lista omogućava da grupišete povezane stavke čiji redosled nije bitan. Pregledač, po podrazumevanom podešavanju, koristi tačku za označavanje svake stavke.
Da biste kreirali novu neuređenu listu, koristite oznaku <ul> kao roditeljski element i oznaku <li> za svaku stavku liste:
<ul> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> </ul>
Ovaj kod generiše sledeći prikaz:
Podrazumevani stil markera za neuređenu listu je disk. Nekada je bilo moguće koristiti atribut „type“ za definisanje stila markera neuređene liste. Međutim, atribut „type“ neuređene liste je zastareo. Preporučena alternativa za stilizovanje neuređenih lista je CSS svojstvo „list-style-type“.
<style>
ul { list-style-type: square; }
</style>
Gornji kod menja prikaz u sledeći:
CSS svojstvo „list-style-type“ omogućava da koristite raznovrsne stilove za markere, uključujući krugove, prilagođene slike, ikone ili simbole. Zahvaljujući CSS-u koji menja izgled stavki liste, neuređene liste se mogu koristiti i za kreiranje navigacionih traka.
Ugnježđene liste
Ugnježđena lista je lista unutar druge liste. Možete kreirati ugnježđenu listu koristeći kombinaciju uređenih i/ili neuređenih elemenata liste. Ovakve strukture mogu predstavljati složenije hijerarhije.
<H3>Uputstva za pripremu pileće paste</H3>
<ol>
<li>Skuvati pastu.</li>
<li>
Začiniti pileća prsa.
<ul>
<li>so i biber</li>
<li>paprika</li>
<li>beli luk u prahu</li>
<li>italijanski začin</li>
</ul>
</li>
<li>Zagrejte maslinovo ulje u tiganju na srednje jakoj vatri.</li>
<li>Dodajte pileća prsa u tiganj i pržite 5 minuta.</li>
<li>Dodajte pavlaku i parmezan u prazan tiganj.</li>
<li>Dodajte pastu i iseckanu piletinu u kremasti sos.</li>
</ol>
Ovaj kod prikazuje sledeći rezultat:
3. Lista opisa
Element liste opisa omogućava da napravite listu termina i njihovih detaljnih objašnjenja. Oznaka <dl> omogućava kreiranje nove liste opisa, koja se koristi zajedno sa elementima <dt> (termin opisa) i <dd> (detalji opisa).
<h3>Popularni laptopovi</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Pruža do 22 sata trajanja baterije,
ima naprednu kameru i Magic tastaturu sa Touch ID-om.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
Moćan gejmerski laptop sa superbrzom grafikom i prilagodljivim tasterima.
</dd>
</dl>
Gornji kod proizvodi sledeći prikaz:
Organizujte svoj sadržaj pomoću odgovarajuće HTML liste
HTML lista koju odaberete za svoj veb projekat treba da zavisi od sadržaja koji želite da predstavite korisnicima. Na primer, ako želite da kreirate sekvencijalnu listu, poput koraka u receptu ili završavanja zadatka, onda je uređena lista najbolji izbor.
Međutim, ako želite da grupišete povezane informacije koje ne zahtevaju niz koraka (poput kontrolne liste), onda bi neuređena lista bila adekvatnija opcija. Štaviše, ako želite da kreirate rečnik termina ili listu najčešće postavljanih pitanja, lista opisa je bolji izbor.