abc HTML5 i CSS TUTORIAL

Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ <OL style="list-style-type: Vrijednost>


Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

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

Oznake:
OL - Numerisana lista
LI - Elementa liste
Atribut: list-style-type

Legenda tipova numerisane liste:
lower-alpha - mala slova
upper-alpha - velika slova
lower-roman . rimski brojevi - mala slova
upper-roman - rimski brojevi - velika slova

Numerisana lista počinje sa TAG-om OL (ORDERED LIST) a ispred svakog elementa liste je <LI> (element liste /LIST ITEM/). Na kraju elementa lista je </LI> odnosno na kraju liste </OL>. >>


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

Primjer 1. Numerisana lista sa atributima /ATTRIBUTE VALUES/

Vrijednost

Opis

Primjer

 

DEFAULT. Decimalni brojevi /DECIMAL NUMBERS/ (1, 2, 3, 4)

 <OL>

lower-alpha

Alfabetski redoslijed, mala slova (a, b, c, d)

<OL style="list-style-type: lower-alpha;">

upper-alpha

Alfabetski redoslijed, velika slova /uppercase/ (A, B, C, D)

 <OL style="list-style-type: upper-alpha;">

lower-roman

Rimski brojevi mala slova /ROMAN NUMBERS/, LOWERCASE (i, ii, iii, iv)

 <OL style="list-style-type: lower-roman;">

upper-roman

Rimski brojevi velika slova /ROMAN NUMBERS/, UPPERCASE (I, II, III, IV)

 <OL style="list-style-type: upper-roman;">

Primjer 2. Alfabetski redoslijed - velika slova /UPPER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
</head>
<body>
<OL style="list-style-type: upper-alpha;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Primjer 3. Alfabetski redoslijed - mala slova /LOWER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
</head>
<body>
<OL style="list-style-type: lower-alpha;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

  1. jedan
  2. dva
  3. tri

Primjer 4. Redoslijed po rimskim brojevima - velika slova /UPPER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
</head>
<body>
<OL style="list-style-type: upper-roman;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Redoslijed po rimskim brojevima - mala slova /LOWER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
</head>
<body>
<OL style="list-style-type: lower-roman;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

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