HTML popisi : HTML Lists

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 uvijek 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

Za simbolički popis postoji i drugi naziv: nenumerirani popis koji dolazi od engleske oznake elementa <ul> (engl. unordered list). Njega 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" />
  <title>HTML simbolički popis</title> 
</head>
<body>
  <h2>Obroci tijekom dana</h2>
  <ul>
    <li>Zajutrak</li>
    <li>Ručak</li>
    <li>Večera</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 popisa </ 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 ispred svake stavke umjesto simbola dolazi oznaka rednog broja stavke.

<!doctype html>
<html>
<head>
  <meta char="utf-8" />
  <title>HTML numerički popis</title> 
</head>
<body>
  <h2>Hodogram aktivnosti</h2>
  <ol>
    <li>Početak</li>
    <li>Djelovanje</li>
    <li>Završetak</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 popisa </ 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" />
  <title>HTML popis unutar popisa</title>  
</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.