abc HTML5 i CSS TUTORIAL

Numerisana lista /ORDERED LIST - OL & LI/


Slika 1. Tip numerisane liste /OREDERD LIST/

NUMERISANA LISTA /ORDERED LIST - OL & LI/

Sintaksa:      ORDERED LIST OL (<OL type=" | lower-alpha | upper-alpha | lower-roman | upper-roman "> <OL><LI>tekst</OL>)

Oznake:
ol - početak numerisne liste
/ol - kraj numerisne liste
li - elementa numerisne liste

Numerisana lista počinje sa TAG-om OL (ORDERED LIST) a ispred svakog elementa liste je <LI> (List item - element liste). Na kraju elementa lista je </LI> odnosno na kraju liste </OL>.
Numerisana lista se često koristi u tekstu. Vrijednosti atributa numerisane liste /ATTRIBUTE VALUES/ (.CSS) >>


Slika 2. Numearisana lista - /ORDERED LIST - OL & LI/

Primjeri

<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>

Tekst ispred liste

1. jedan
2. dva
3. tri

Primjer 1. Numerisana lista se često koristi u tekstu

<!DOCTYPE html>
<html>
<head> <title>Numerisana lista</title>
</head>
<body>
<p>Tekst ispred liste</p>
<OL>
  <LI>violina</LI>
  <LI>viola</LI>
  <LI>bas</LI>
</OL>
</body> </html>

Tekst ispred liste

  1. violina
  2. viola
  3. bas

Primjer 2. Numerisana lista start od određene vrijednosti. <OL> <LI VALUE="početna_vrijednost">tekst </li>

<!DOCTYPE html>
<html>
<head>
<title>Numerisana lista - start</title>
</head>
<body>
<p>Tekst ispred liste</p>
<OL>
  <LI VALUE="50">jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body> </html>

Tekst ispred liste


  1. jedan
  2. dva
  3. tri

Primjer 3. Numerisana lista sa promjenom veličine fonta:

<!DOCTYPE html>
<html>
<head> <title>Numerisana lista</title> </head>
<body>
<p>Tekst ispred liste</p>
<OL><FONT SIZE="1">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</p>
</body> </html>

Tekst ispred liste


  1. jedan
  2. dva
  3. tri

Primjer 4. Numerisana lista - promjena boje fonta i veličine ( <OL><li>tekst</OL>)

<!DOCTYPE html>
<html>
<head> <title>Numerisana lista</title> </head>
<body>
<p>Tekst ispred liste</p>
<OL><FONT COLOR="ff0000" SIZE="5">
  <LI><font face="Arial">jedan</font></LI>
  <LI><font face="Arial">dva</font></LI>
  <LI><font face="Arial">tri</font></LI>
</font>
</OL>
</body> </html>

II verzija
<!DOCTYPE html>
<html>
<head> <title>Numerisana lista</title> </head>
<body>
<p>Tekst ispred liste</p>
<OL><FONT face="Arial" COLOR="ff0000" SIZE="5">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</font>
</OL>
</body> </html>

Tekst ispred liste


  1. jedan
  2. dva
  3. tri
    4.

Daljnji rad: Napisati html kod za slijedeće primjere:

  1. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst
    1. Glava 3
      1. Hard disk
      2. Monitor
      3. Disketna jedinica
      4. Tastatura
      5. Miš
    2. Glava 4

  2. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst 
    1. Glava 2
    2. Glava 3
      1. Hard disk
      2. Monitor
      3. Disketna jedinica
      4. Tastatura
      5. Miš
    3. Glava 4

  3. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst
    1. Meni 1
      supa
      jelo
      dezert
    2. Meni 2

Spisak .css fajlova /CSS FILES LIST/

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index