Html umetanje popisa : Online tečaj (html) : Bartol plus

Lekcija 2: Html oblikovanje teksta i html popisi

Html oblikovanje teksta [html] Html simbolički i numerički popis [html] Vježba 2.1: Html oblikovanje teksta Vježba 2.2: Html tekst Vježba 2.3: Html popisi

Simbolički popisi

Simbolički popisi prikazuju ispred teksta simbol, a po tome im dolazi i naziv. Oznaka elementa simboličkog popisa je <ul> (engl. unordered list).

css svojstvo: list-style-type

Pomoću css svojstva list-style-type možemo izabrati vrstu simbola. Ovom svojstvu možemo dodijeliti mnoštvo vrijednosti, neke od njih su: disc, circle, square ili none. Css nam također omogućava umetanje vlastitog simbola.

Pogledajte primjer!

Html simbolički popis

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Simbolički popis</title>
</head>
<body>
  <h1>Zdravo voće</h1>
  <ul style="list-style-type: circle;">
    <li>Kesten</li>
    <li>Smokva</li>
    <li>Jabuka</li>
  </ul>
</body>
</html>

Za svaki redak koristimo stavku popisa <li> (engl. list items). Stavke popisa umećemo između oznaka za početak i kraj simboličkog popisa.

Brojčani popisi

Brojčani (numerički) popis prikazuje ispred teksta brojku. Oznaka elementa numeričkog popisa je <ol> (engl. ordered list). Pomoću css-a svojstva list-style-type možemo odrediti numeričku oznaku: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha....

Primjer brojčanog popisa:

Html brojčani popis

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Brojčani popis</title>
</head>
<body>
  <h1>Začini i mirodije</h1>
  <ol style="list-style-type: upper-alpha;">
    <li>Metvica</li>
    <li>Žalfija</li>
    <li>Stolisnik</li>
  </ol>
</body>
</html>

Popisi definicija

Popis definicija je popis stavki s opisom ili definicijom svake stavke.

Popis definicija počinjemo i završavamo oznakom <dl> (engl. definition list). Za nazive pojedinih definicija koristimo element <dt> (engl. definition terms), a za opis definicije koristimo element <dd> (engl. definition description).

Web preglednik prikazuje popis definicija stavljajući nazive i opise definicije u odvojene retke, dok je opis definicije malo uvučen.

Pogledajte primjer popisa definicija:

Html popis definicija

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Popis definicija</title>
</head>
<body>
  <h1>Dijelovi dana</h1>
  <dl>
    <dt>Jutro</dt>
      <dd>Početak dana i zahvala za novi dan.</dd>
    <dt>Podne</dt>
      <dd>Ručak u obitelji i podnevni odmor.</dd>
    <dt>Večer</dt>
      <dd>Priprema za počinak.</dd>
  </dl>
</body>
</html>

Html ugnježđivanje

Često je potrebno umetnuti jedan ili više html elemenata unutar drugoga html elementa. Za unutarnje elemente kažemo da su ugniježđeni unutar vanjskih.

<div class="spremnik">
    <p>Ovo je <small>odlomak</small>.</p>
</div>

U ovom primjeru element odlomka <p> je ugniježden unutar <div> elementa, a element <small> je ugniježđen unutar <p> elementa.

Uočite kako se posljednji ugniježdeni elementi zatvaraju prvi. U gornjem primjeru posljednji ugniježdeni element je <small> element i on se prvi zatvara. Zatim se zatvara element odlomka <p> i na kraju <div> element koji je prvi otvoren.

Drugi način na koji možemo ovo promatrati, je predodžba s kutijama. Ako stavimo unutar prve kutije, drugu kutiju, i zatim u tu drugu kutiju, treću kutiju. Tada najprije morate zatvoriti posljednju (treću) kutiju koju smo umetnuli, zatim drugu i na kraju prvu kutiju.

html uvlaka

Dobra je praksa html kôd ugniježdenih elemenata uvući, radi preglednosti. Uvlaka nema nikakav učinak na način kako će web preglednik prikazati html dokument (web stranicu).

Dobra praksa uvlačenja html kôda odnosi se na blok elemente (u gornjem primjeru <p>), a ne i na linijske (u gornjem primjeru <small>).

Nepravilno ugnježđivanje

Primjer netočnog zatvaranja ugniježdenih html elemenata:

<a href="https://bartol.plus">
Klikni <strong>za otvaranje.</a>
</strong>

Zatvaranje je netočno zato što nismo prvo zatvorili posljednji otvoreni html element, a to je <strong> element.

Ugniježđeni popisi

Simboličke i numeričke popise možemo ugnijezditi jedan unutar drugoga. Želimo li pomoću css-a ostvariti sustav izbornika i podizbornika, ugniježđivanje popisa će nam to umnogome olakšati.

Primjer ugniježđenog popisa:

Html ugniježđeni popis

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Ugniježđeni popis</title>
</head>
<body>
  <h1>Županije i gradovi</h1>
  <ol style="list-style-type:lower-roman;">
    <li>Grad Zagreb</li>
    <li>Vukovarsko srijemska županija</li>
    <ul style="list-style-type:square;">
      <li>Vukovar</li>
      <li>Vinkovci</li>
      <li>Đakovo</li>
    </ul>
    <li>Splitsko dalmatinska županija</li>
  </ol>
</body>
</html>

Možda će vas zanimati?

Prethodi HTML oblikovanje teksta Slijedi Html umetanje slika

Vježba 2.3: Html popisi

HTML popisi

Za umetanje simboličkog popisa koristimo html element <ul> (engl. unordered list), a za umetanje numeričkog popisa koristimo html element <ol> (engl. ordered list).