HTML liste - kreiranje i prilagodjavanje
Napisao: Leo "Leoniss" Bevanda © 2001 - 2002

Razne vrste lista se u web dizajnu koriste svakodnevno. Sigurno ste i vi do sada na vasem siteu napravili barem jednostavnu brojcanu ili neku drugu listu. Jeste li to napravili pravilno, jeste li znali da postoje brojcane (ordered) i nebrojcane (unordered) liste, znate li mijenjati izgled lista? Znate li napraviti da vasa lista pocinje od nekog odredjenog broja, znate li da se definicije u HTML-u pravilno unose na gotovo isti nacin kao i liste?

Ordered i unordered liste

Sve liste se kreiraju uz pomoc dvaju razlicitih tagova.Nemaju neki poseban naziv (ili ja nisam cuo za njega), pa cu u ovome clanku koristiti nazive primarni i sekundarni tagovi. Primarnim se tagom definira vrsta liste, dok sekundarni sluzi za odredjivanje pojedinih stavki neke liste.

Ordered (brojcane, poredane) liste se u HTML-u naznacuju tagom <OL>.

Unordered (nebrojcane, neporedane) liste se umecu tagom <UL>.

Sekundarni tag za obje vrste lista je isti i njime se oznacuju stavke u listi - to je tag <LI>. Uporaba zavrsnog taga </LI> nije nuzna.

Tako npr. ako zelite napraviti jednostavnu ordered listu sa nekoliko elemenata liste, tj. stavki, upotrijebit cete sljedeci kôd:

<OL> 
  <LI>Stavka 1
  <LI>Stavka 2
  <LI>Stavka 3
</OL>

1. Stavka 1
2. Stavka 2
3. Stavka 3

Isto se tako umecu i unordered liste, samo sto je primarni tag <UL>. Npr:

  <UL>
    <LI>Stavka 1
    <LI>Stavka 2
    <LI>Stavka 3
  </UL>

• Stavka 1
• Stavka 2
• Stavka 3

Prilagodjavanje listi

Karakteristicno za ordered i unordered liste je to da se daju prilagoditi, tj. mozemo mijenjati nacin na koji ce se prikazivati u browseru.

Ordered liste

Kod ordered listi mozemo mijenjati prikaz ispred pojedinih elemenata nase liste. Na raspolaganju su nam arapski brojevi, zatim rimski brojevi te slova.

Po defaultu se ispred elemenata liste prikazuju arapski brojevi. Ako to zelimo promijeniti, nuzna je uporaba argumenta TYPE. Ovaj se argument dodaje u primarni tag liste ciji izgled zelimo promijeniti. Vrijednosti dostupne za ovaj tag su:

1. I (veliki rimski brojevi)
2. i (mali rimski brojevi)
3. A (velika slova)
4. a (mala slova)

Dakle, ako zelimo promijeniti izgled liste iz prvog primjera, sve sto trebamo uraditi je u primarni kôd liste dodati argument TYPE="" i unutar navodnika unijeti neku od vrijednosti za ovaj tag, npr. TYPE="I" za listu s velikim rimskim brojevima. Nakon ovakvog editiranja cijeli ce kôd izgledati ovako:

<OL TYPE="I">
  <LI>Stavka 1
  <LI>Stavka 2
  <LI>Stavka 3
</OL>

1. Stavka 1
2. Stavka 2
3. Stavka 3

Unordered liste

Ispred stavki unordered liste po defaultu ce u browseru biti prikazani crni kruzici. Ako to zelite promijeniti, opet cete koristiti TYPE argument - ovaj put s vrijednostima DISC, CIRCLE i SQUARE. Koristit cete ih zasebno, ovisno o tome kako zelite da vasa unordered lista izgleda: DISK - defaultni crni kruzic, CIRCLE - obicni kruzic, SQUARE - kvadratic. Ove vrijednosti unosite malim slovima, jer je Internet Explorer case sensitive upravo u ovom primjeru, dok Netscape i Opera to nisu.

Unutar svakog pojedinog <LI> taga se takodjer na isti nacin moze koristiti TYPE argument. Primjer customizirane unordered liste izgledao bi ovako:

<UL>
  <LI TYPE=circle>Ovo je circle
  <LI TYPE=disc>Ovo je disc
  <LI TYPE=square>Ovo je square
</UL>

• Ovo je circle
• Ovo je disc
• Ovo je square

Promijenite pocetni broj liste

Ovaj trik vrijedi naravno samo za ordered liste jer su stavke kod takvih listi poredane po rednim brojevima ili slovima. Unutar primarnog taga liste (<OL>) unesite argument 'START=' i iza toga unesite broj od kojeg zelite da vasa lista pocinje. Npr:

<OL START=5>
  <LI>Ovo je stavka 5
  <LI>I tako dalje
</OL>

Definition liste

Definition liste (liste definicije) su liste pomocu kojih bi se u HTML trebale ukomponirati razne definicije, zajedno sa svojim znacenjem. Ovo ustvari i nije neka posebna osobina HTML-a jer se ustvari radi o jednostavnom formatiranju teksta slicno onome sa svojstvima indent i outdent.

Inace, primarni tag kod lista definicije je <DL>. Nakon njega slijedi tag <DT> koji oznacava pojam definicije, a onda tag <DD> iza kojeg slijedi sama definicija. Npr:

<DL>
  <DT>Mikrobiologija
  <DD>To je znanost koja proucava sitne i 
      oku nevidljive organizme (mikrobe)…..
</DL>

Postoje i neki drugi nacini za prikazivanje definicija u HTML dokumentima - npr. tag <DFN>.

Vlasnici Dreamweavera se ne moraju zamarati rucnim unosenjem bilo kakvih lista i argumenata, jer je sve moguce obaviti kombiniranjem dviju naredbi. Prva je Text -> List, gdje cete izabrati vrstu liste. Kada ste je izabrali i kreirali stavke, prilagodite je tako sto cete selektirati sve ili neke odredjene stavke i kliknuti na naredbu "List Item" koja se nalazi u donjem djelu properties prozora. Tu ce vam biti prikazane sve moguce opcije vezane za vasu listu.

O autoru:

Leo "Leoniss" Bevanda (leo.bevanda@tel.net.ba) - je 18-godisnjak koji voli dobru glazbu (hip-hop & rap) i brza racunala. U slobodno vrijeme bavi se web-masteringom i svime sto je povezano s njim. Obozavatelj je Macromedijinih web alata poput Dreamweaver-a i Flash-a, te Adobe-ovog Photoshopa - alata potrebnih za efektan web site...