HTML liste (ol i ul)

Tagovi zaduženi za nabrajanja (uredjene i neuredjene liste) – <ol> i <ul>

U slučaju da unutar HTML dokumenta želite da postignete ispis teksta u vidu nabrajanja:

  • Prvi
  • Drugi
  • Treci
  • Cetvrti

Ili nabrajanja sa brojevima

  1. Prvi
  2. Drugi
  3. Treci
  4. Cetvrti

koristićete sledeće tagove: <ul> za liste bez nabrajanja i <ol> za liste gde se nabrajanje radi sa brojevima 1,2,3,4….

U oba tipa liste, pored tagova <ul> i <ol> imamo još jedan element koji treba objasniti pre nego napišemo primer html koda.

To je tag <li>. On se koristi i kod neuredjenih i uredjenih listi. <li> tag je namenjen odvajanju jedne stavke liste od druge. U našem slučaju, svaka od stavki (Prvi, Drugi, Treci i Cetvrti) imaće sopstveni <li> otvarajući i </li> zatvarajući tag. Pogledajmo primer koda prve navedene liste:

<!DOCTYPE html>

<html>

<head>

<title>Naslov dokumenta</title>

<meta charset=”UTF-8″>

</head>

<body>

<ul>

<li>Prvi</li>

<li>Drugi</li>

<li>Treci</li>

<li>Cetvrti</li>

</ul>

</body>

</html>

Obavezno uočite da na kraju, posle poslednjeg zatvarajućeg taga </li> dolazi i zatvarajući </ul> tag kako bi saopštili pretraživaču da se ovim lista završava. Izostavljanje može dovesti do nepredvidjenih problema u prikazivanju koda koji se može naći ispod toga. U pretraživaču kod napisan iznad izgleda ovako:

16-liste-html

Drugi primer je uredjena lista a razlika u kodu u odnosu na neuredjenu svodi se na to da se umesto otvarajućeg <ul> i zatvarajućeg </ul> taga, koriste <ol> i </ol>, respektivno. Primer koda kao i izgled u prozoru pretraživača dati su ispod.

<!DOCTYPE html>

<html>

<head>

<title>Naslov dokumenta</title>

<meta charset=”UTF-8″>

</head>

<body>

<ol>

<li>Prvi</li>

<li>Drugi</li>

<li>Treci</li>

<li>Cetvrti</li>

</ol>

</body>

</html>

Izgled koda u pretraživaču prikazan je na slici ispod:

17-liste-obicne-html

Sad je dobar trenutak da rekapituliramo ono što smo prethodno naučili kroz prikaz fleksibilnosti HTML jezika, tj. njegove sintakse i pokažemo kako se ista stvar može postići korišćenjem različite sintakse.

Primer na kome ćemo to pokazati je pri kreiranju listi. Videćemo da izgled uredjene liste možemo postići na tri načina.

I Način – podrazumeva korišćenje isključivo <pre> taga

<pre>

Lista:

  1. Stavka jedan
  2. Stavka dva
  3. Stavka tri
  4. Stavka cetiri
  5. Stavka pet

</pre>

II Način – korišćenjem p i br taga kao i specijalnog html znaka &nbsp;

<p>Lista:<br>

&nbsp;&nbsp;&nbsp;1. Stavka jedan<br>

&nbsp;&nbsp;&nbsp;1. Stavka dva<br>

&nbsp;&nbsp;&nbsp;1. Stavka tri<br>

&nbsp;&nbsp;&nbsp;1. Stavka cetiri<br>

&nbsp;&nbsp;&nbsp;1. Stavka pet<br>

</p>

Treći način je naravno, korišćenjem pomenutog <ol> taga.

<ol>

<li>Prvi</li>

<li>Drugi</li>

<li>Treci</li>

<li>Cetvrti</li>

</ol>

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn