HTML-osnove

LISTE

Slijedeća stvar koju možemo koristiti u web stranicama su brojevne i nebrojevne liste. Brojevne liste se ubacuju pomoću <ol> taga, a nebrojevne liste pomoću <ul> taga. Pojedine stavke liste se definiraju pomoću <li> taga (ovaj tag ne zahtijeva završni tag). Osnovna razlika između ove dvije vrste listi je ta što će u brojevnim  listama ispred pojedinih stavki liste stajati redni brojevi, a u nebrojevnoj listi će stajati dugmad.

Primjer brojevne liste:

Godišnja doba su:

  1. proljeće
  2. ljeto
  3. jesen
  4. zima
koja se dobiva slijedećim HTML kodom:

<p><font face="Arial">Godišnja doba su:</font>
<ol>
  <li><font face="Arial">proljeće</font>
  <li><font face="Arial">ljeto</font>
  <li><font face="Arial">jesen</font>
  <li><font face="Arial">zima</font></li>
</ol>

Kao što vidimo ne moramo sami unositi redne brojeve. Browser će ih sam staviti ispred svake stavke liste.
Ako nismo zadovoljni arapskim brojevima koje ovaj tag koristi po default-u, možemo upotrijebiti atribut type. Ovaj atribut može imati slijedeće vrijednosti:

A - velika slova
a - mala slova
I - rimski brojevi
i - mali rimski brojevi

Evo kako izgleda gornja lista sa velikim rimskim brojevima:

  1. proljeće
  2. ljeto
  3. jesen
  4. zima
a odgovarajući HTML kod:

<ol type="I">
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ol>

Evo sada primjera nebrojevne liste:

Godišnja doba su:
  • proljeće
  • ljeto
  • jesen
  • zima

koja se dobija HTML kodom:

<ul>
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ul>

Kao što vidimo browser je sada umjesto rednih brojeva ispred svake stavke liste stavio okruglo dugme.
Ako nismo zadovoljni sa okruglim dugmićima i to se može regulirati odgovarajućim atributom. Atribut je i ovaj put type samo što u ovom slučaju može uzimati vrijednosti:

circle - okruglo dugme
disc - ispunjeno okruglo dugme
square - kvadratno dugme

Evo iste liste i sa kvadratnim dugmićima:

  • proljeće
  • ljeto
  • jesen
  • zima

a odgovarajući HTML kod je:

<ul type="square">
<li>proljeće
<li>ljeto
<li>jesen
<li>zima
</ul>

Slijedeci oblik liste je tzv. "definicjska lista". Ovaj oblik liste dobijamo pomoću <dl> taga. Svaka stavka ovakve liste se sastoji iz dva dijela: termina kojeg želimo definirati i njegove definicije. Termini započinju <dt> tagom, a njihove definicije <dd> tagom. Termini se poravnavaju uz lijevu marginu, a njihove definicije se pojavljuju u novom redu i uvučene su za određen broj mjesta.

Evo primjera jedne definicijske liste:

Proljeće:
najljepše godišnje doba koje traje od 21. ožujka do 21. lipnja.
Ljeto:
najtoplije godišnje doba koje traje od 21. lipnja do 21. rujna.
Jesen:
najkišovitije godišnje doba koje traje od 21. rujna do 21. prosinca.
Zima:
najhladnije godišnje doba koje traje od 21. prosinca do 21. ožujka.
 
Njen HTML kod glasi:
<dl>
<dt>Proljeće:
<dd>najljepše godišnje doba koje traje od 21. ožujka do 21. lipnja.
<dt>Ljeto:
<dd>najtoplije godišnje doba koje traje od 21. lipnja do 21. rujna.
<dt>Jesen:
<dd>najtužnije godišnje doba koje traje od 21. rujna do 21. prosinca.
<dt>Zima:
<dd>najhladnije godišnje doba koje traje od 21. prosinca do 21. ožujka.
</dl>