Liste u HTML-u

Postoje tri vrste lista u HTML-u:

1. numerisane liste
2. nenumerisane liste
3. liste definicije

Numerisane liste
Ove liste su u tagovima <ol> </ol> a svaka stavka liste je unutar taga
<li> </li>.

<ol>
<li> </li>
<li> </li>
</ol>

Tekst unutar stavka liste se numeriše arapskim brojevima.

Prilagođavanje uređene liste

Uređena lista se može prilagoditi tako da njene stavke budu prikazane
malim ili velikim slovima latinice ili malim ili velikim rimskim
brojevima.
To se radi na sledeći način pomoću CSS svojstva list-style-type i
atributa type.

<ol style="list-style-type: lower-alpha;">

<li> </li>
<li> </li>
<li> </li>
 </ol>

Vrednost za CSS Opis

decimal Arapski brojevi : 1,2,3,...
lower-alpha Mala slova latinice: a,b,c,...
upper-alpha Velika slova latinice: A,B,C,...
lower-roman Mali rimski brojevi: i,ii,iii,...
upper-roman Veliki rimski brojevi: I,II,III,...

decimal je podrazumevana vrednost i ona ne mora da se piše.

Pomoću atributa style može se odrediti broj kojim počinje stavka u listi.
Ovo se radi korišćenjem reči start na sledeći način
<ol style="list-style-type: decimal;" start="3">

<li> </li>
<li> </li>
<li> </li>

</ol>
Stavke u listi pocinju numeraciju od broja 3.
<ol style="list-style-type: lower-alpha;" start="3">

<li> </li>
<li> </li>
<li> </li>

</ol>
Stavke u listi pocinju numeracije od slova c.
Takođe se mogu numerisati stavke liste pomoću vrednosti value.
Unutar taga <li> dodaje se atribut value.
<ol>
<li> </li>
<li> </li>
<li> </li>
<li value="7"> </li>
<li> </li>
<li> </li>

</ol>
Prve tri stavke u listi se numerišu brpjevima 1, 2 i 3 četvrta stavke se
numeriše brojem 7, peta brojem 8 a šesta brojem 9.

Nenumerisane liste
Ove liste su u tagovima <ul> </ul> a svaka stavka liste je unutar taga
<li> </li>.

<ul>
<li> </li>
<li> </li>
</ul>
Svaki element liste ima istu oznaku.

Prilagođavanje nenumerisanih listi

I nenumerisane liste se mogu prilagoditi pomoću CSS svojstva list-style-
type i atributa type.
Vrednost za CSS Opis
disc Kružić ili tačka (ovaj tip se
podrazumeva)
square kvadratić
circle Prazan kružić

<ol style="list-style-type: square;">

<li> </li>
<li> </li>
<li> </li>

</ol>

Ako stavka liste se proteže u više redove redovi posle prvog su

usklađeni sa početkom tekstom prvog reda. Može se uskladiti da tekst u
redovima posle prvog počne ispod znaka za nabrajanje koristi se
svojstvo list-style-position.

Vrednosti za list-style-position su inside i outside (podrazumevana

vrednost)
<ol style="list-style-position: inside;">

<li> </li>
<li> </li>
<li> </li>

</ol>
Ako želimo da izmenimo listu možemo to uraditi na sledeći način tako
što napišemo list-style iza koje nabrajemo vrednosti kao što su circle
inside.

<ol style="list-style: circle inside">

<li> </li>
<li> </li>
<li> </li>

</ol>

Liste definicije
Ove liste imaj dva dela termin i definiciju. Ove liste imaju dva taga <dt>
</dt> za tremin definicije i <dd> </dd> za opis definicije. Ovi tagovi
obično idu u parovima. Liste definicije se označavaju tagovima <dl>
</dl>.

<dl>
<dt> Termin definicije </dt>
<dd> Opis definicije </dd>
<dt> Termin definicije </dt>
<dd> Opis definicije </dd>
</dl>
Ugnježđivanje lista
Liste možemo staviti jednu unutar druge. Ugnježđena lista postaje prvi
elemenat druge liste i ona je uvućena od ostatka liste. Dakle unutar taga
<li> </li> se stavlja nova lista.

<ol>
<li> </li>
<li> </li>

<li>
<ul>
<li> </li>
<li> </li>
</ul>
</li>

<li> </li>
<li> </li>
</ol>