HTML Osnove

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.

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