HTML simbolički i numerički popisi : Lists

Uvod u popise : Lists Introduction

Premda se čini kako popise koristimo uglavnom za navođenje pojedinih stavki sa simbolom ili brojem ispred stavke nije tome tako. Vidjet ćemo kod CSS-a kako se popisi zajedno s poveznicama (engl. links) koriste za kreiranje izbornika (engl. menu). No o tome da drugom mjestu.

Web dizajn i popisi

Simbolički popis : Unordered List

Simbolički popis, drugi naziv za njega nenumeriran popis a dolazi od engleske oznake elementa <ul> (engl. unordered list) koristimo za nabrajanje stavki ispred koje će se nalaziti simbol. Pomoću CSS-a možemo simbol izostaviti ili staviti vlastitu ikonu već prema potrebi.

<!doctype html>
<html>
<head>
  <meta char="utf-8" />
</head>
<body>
  <h2>Kreposti ili vrline</h2>
  <ul>
    <li>Strpljivost</li>
    <li>Dosljednost</li>
    <li>Dosljednost</li>
  </ul>
</body>
</html>

U ovom primjeru možemo vidjeti kako smo stavke popisa <li> (kratica od engl. list items) ugnijezdili jednu iza druge unutar oznaka za početak simboličkog popisa <ul> i oznake za kraj </ul>

Numerički popis : Ordered List

Numerički popis se razlikuje od simboličkog po početnoj i završnoj oznaci html elementa koje okružuju stavke popisa. Oznaka elementa za numerički popis je <ol> od engleskih riječi Ordered List. Kod numeričkog popisa umjesto simbola dolazi oznaka rednog broja stavke.

<!doctype html>
<html>
<head>
  <meta char="utf-8" />
</head>
<body>
  <h2>Obroci tijekom dana</h2>
  <ol>
    <li>Zajutrak</li>
    <li>Ručak</li>
    <li>Večera</li>
  </ol>
</body>
</html>

U ovom primjeru možemo vidjeti kako smo stavke popisa <li> (kratica od engl. list items) ugnijezdili jednu iza druge unutar oznaka za početak numeričkog popisa <ol> i oznake za kraj </ol>

Popis unutar popisa : One List in other List

Ponekad je potrebno unutar jednog popisa staviti drugi. I to je dopušteno. Ne samo dopušteno nego i veoma korisno. Na taj način se kreiraju u CSS-u izbornici i podizbornici. Za sada samo primjer u html-u.

<!doctype html>
<html>
<head>
  <meta char="utf-8" />
</head>
<body>
  <h2>Jelovnik</h2>
  <ol>
    <li>Doručak</li>
    <li>Ručak</li>
    <ul>
        <li>Goveđi gulaš</li>
        <li>Njoki</li>
        <li>Zelena salata</li>
    </ul>        
    <li>Večera</li>
  </ol>
</body>
</html>

Prije nego što smo naveli novu stavku numeričkog popisa Večera otvorili smo novi simbolički popis sa stavkama jelovnika.