Html obiteljsko stablo : Online tečaj (html) : Bartol plus

Lekcija 1: Uvod u html, html elementi i svojstva

Uvod u html, struktura html dokumenta [html] Html elementi [html] Html svojstva [html] Html komentari [html] Html obiteljsko stablo strukture [html] Vježba 1.1: Struktura html dokumenta Vježba 1.2: Html elementi i svojstva Vježba 1.3: Html blok i linijski elementi

Svaki html dokument možemo promatrati kao stablo. Elemente u stablu opisujemo pomoću odnosa unutar obiteljskog stabla. Postoje html elementi predci, potomci, roditelji, djeca, te braća i sestre.

Uporabit ćemo jednostavan html dokument kao primjer. <html> i <head> elementi su izbačeni zbog pojednostavljenja.

<body>
  <div id="sadrzaj">
    <h1>Glavni naslov</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor <em>sit</em> amet.</p>
    <hr />
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>

Sljedeći dijagram prikazuje ovaj html dokument u obliku stabla:

Predak (engl. ancestor)

Predak je element koji se nalazi u odnosu na elemente s kojim je povezan - u dijagramu - na višoj razini, bez obzira koliko je to razina više. Tako je u lijevoj grani <div> element predak elemenata <h1>, <p>, <p>, <hr /> i <em>.

U donjem dijagramu je označen <body>, element koji predak svih elemenata na web stranici:

Potomak (engl. descendant)

Potomci nekog elementa, su elementi koji su u odnosu na taj element - u dijagramu - na nižoj razini, bez obzira koliko razina niže. Možemo reći kako su potomci nekog elementa, svi elementi koji su ugniježđeni unutar tog elementa. Tako su u lijevoj grani elementi <h1>, <p>, <p>, <hr /> i <em> potomci elementa <div>.

U donjem dijagramu su u desnoj grani, ispod <div> elementa, označeni svi elementi koji su njegovi potomci.

Roditelj (engl. parent) i dijete (engl. child)

Roditelj nekog elementa je element koji se nalazi - u dijagramu - jednu razinu iznad tog elementa. Tako je desni <div> roditelj elementa <ul>. Desni <div> NIJE roditelj elementima <li> nego predak, jer se on nalazi dvije razine iznad elemenata <li>.

Djeca nekog elementa su elementi koji se nalaze - u dijagramu - jednu razinu ispod tog elementa. Tako je <ul> dijete elementa <div>. Elementi <li> NISU djeca elementa <div>, jer se nalaze dvije razine ispod elementa <div>. Oni su potomci elementa <div>.