HTML Osnove - Popis (list : ul , ol tag)

Često puta ćete na vašoj web stranici trebati nabrajati stvari tj. staviti nekakav popis (HTML list). Naredna lekcija će vam pokazati kako ćete to učiniti, a da popis bude čitljiv i pregledan.

7.1. Pobrojani popis (Ordered list)

Kod pobrojanog popisa (engl. ordered list) važan je redoslijed stavki unutar popisa. Uočite kako nije potrebno napisati brojeve unutar HTML koda nego browser automatski dodjeljuje broj svakoj stavki. To ćemo učiniti pomoću <ol> i <li> taga. Prvi označava da se radi o pobrojanom popisu, a drugi definira stavke.
<ol>
      <li> stavka 1 </li>
      <li> stavka 2 </li>
</ol>
vidi stranicu     vidi code

Gornji primjer je napravljen tako da tag OL nema nikakvih atributa. Međutim kod OL taga mogu se naći 2 atributa: TYPE i START.

TYPE određuje tip oznake ispred stavke i može biti :
< ol type=1 > --> arapski brojevi i to je predefinirana postavka browsera
< ol type=A > --> velika slova
< ol type=a > --> mala slova
< ol type=I > --> rimski brojevi - veliki
< ol type=i > --> rimski brojevi - mali
vidi stranicu vidi code

START određuje odakle će browser početi brojati. Ovo vrijedi samo kod arapskih brojeva tj. kod predefinirane vrijednosti.
< ol start=4 >
vidi stranicu vidi code

7.2. Nepobrojani popis (Unordered list)

Kod nepobrojanog popisa (engl. unordered list) nije važan redoslijed stavki. Zato se ispred stavki ne nalaze znakovi koji određuju brojanje. Takav popis ostvaruje se <ul> tagom. Bez ikakvih atributa će poprimiti predefinirane vrijednosti browsera i izgledat će ovako :
<ul>
      <li> stavka 2 </li>
      <li> stavka 1 </li>
</ul>
vidi stranicu     vidi code

Atribut koji ovdje možemo upotrijebiti jest TYPE i određuje oblik oznake ispred svake stavke.
< ul type=disc >
< ul type=circle >
< ul type=square >
vidi stranicu vidi code

7.3. Atributi < li > taga

Također i LI tag ima svoje atribute koji se doduše nešto rjeđe koriste no nije zgorega da ih spomenemo. To su TYPE i VALUE.

Atribut TYPE određuje oblik oznake ispred stavke i može biti :
TYPE = DISC | CIRCLE | SQUARE | 1 | A | a | I | i
DISC, CIRCLE i SQUARE rade samo pod UL tagom dok ostali rade pod OL tagom.
vidi stranicu vidi code

Atribut VALUE kad se koristi u pobrojanom popisu izaziva preskakanje browsera na određeni broj odakle nastavlja s brojanjem.
<ol>
      <li> stavka 1 </li>
      <li> stavka 2 </li>
      <li value=5> stavka 5 </li>
      <li> stavka 6 </li>
</ol>
vidi stranicu     vidi code

7.4. Ugnježđeni popis (nested list)

Često ćete trebati napraviti popis unutar popisa tzv. ugnježđeni popis (engl. nested list). To možete napraviti ovako:
<ul>
   <li> stavka 1 </li>
    <ul>
      <li> podstavka 1 </li>
      <li> podstavka 2 </li>
    </ul>
   <li> stavka 2 </li>
</ul>
Ugnježđeni popis označen je zeleno.
vidi stranicu     vidi code

U gornjem primjeru upotrebljen je nepobrojani popis no mogu se koristiti i svi ostali, dosad navedeni primjeri s pripadajućim atributima. Primjer jednog složenijeg popisa možete vidjeti ovdje . A code ovdje .

7.5. Definicijski popis

Definicijski popis nije popis stavki kao u prethodna dva slučaja. To je popis kod kojeg definiramo termin i njegovo objašnjenje (definiciju). Npr. kako ćemo objasniti što je to svjetlomična udruždba. Evo rješenja.
<dl>
<dt> svjetlomična udruždba </dt>
<dd> To je naprava koja služi za praćenje TV programa putem krugovalnih valova. Manji broj ljudi za to koristi arhaičnu riječ televizor. </dd>
</dl>

Unutar DT tagova nalazi se termin, a njegovo objašnjenje smještamo između DD tagova.
vidi stranicu vidi code

Ponekad možemo upotrijebiti atibut COMPACT.
< dl compact >
On govori browseru da pri renderiranju zauzme što je moguće manje mjesta. To postiže na način da vrlo kratke termine smješta u isti red gdje je i definicija.
vidi stranicu vidi code
Kod nekih browsera ovo vam neće raditi no ništa zato.

7.6. Ostale vrste popisa

Oba taga su zastarjela pa se ne preporuča njihovo korištenje. Umjesto njih koristite <ul> tag !