Često puta ćete na vašoj web stranici trebati nabrajati stvari tj. napisati nekakav popis (HTML List). Naredna lekcija će vam pokazati kako ćete to učiniti, a da popis bude čitljiv i pregledan.
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>
Primjer: vidi code » vidi stranicu
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
Primjer: vidi code » vidi stranicu
START određuje odakle će browser početi brojati. Ovo vrijedi samo kod arapskih brojeva tj. kod predefinirane vrijednosti.< ol start=4 >
Primjer: vidi code » vidi stranicu
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>
Primjer: vidi code » vidi stranicu
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 >
Primjer: vidi code » vidi stranicu
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.
Primjer: vidi code » vidi stranicu
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>
Primjer: vidi code » vidi stranicu
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.
Primjer: vidi code » vidi stranicu
U gornjem primjeru upotrebljen je nepobrojani popis no mogu se koristiti i svi ostali, dosad navedeni primjeri s pripadajućim atributima kao u narednom primjeru.Primjer: vidi code » vidi stranicu
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.
Primjer: vidi code » vidi stranicu
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. Kod nekih browsera ovo vam neće raditi no ništa zato.
Primjer: vidi code » vidi stranicu
6. Ostale vrste popisa (zastarjelo)
Spomenut ću samo dva: <DIR ...> i <MENU ...> .
Popis sa DIR se u principu ponaša kao nepobrojani popis.Primjer: vidi code » vidi stranicu
Na isti način se renderira (obrađuje) i MENU tag.Primjer: vidi code » vidi stranicu
Oba taga su zastarjela pa se ne preporuča njihovo korištenje. Umjesto njih koristite <ul> tag !