Uporaba dinamičkog HTML-a pri izradi web sučelja
FerZpmErgonomija

HTML i DOM

HTML

Povijest HTML-a započinje već krajem prve polovice 20-og stoljeća kada se razmišljalo na koji način skladištiti tekstualne i grafičke informacije te na koji način iste logički povezati. Ta i slične ideje (a i rješenja) su se desetljećima pojavljivali kao odgovor na razne probleme. Jedan od češćih problema koji je dosta povezan sa idejom HTML-a bio je: na koji način označiti tj. formatirati tekst i slike - rješenje tog problema primjenu je najčešće našlo za članke u novinama i knjige.

S proširenjem interneta početkom 90-ih i pojavom prvih interpretera internet stranica (medju prvima Cello, Viola, MidasWWW) pojavio se i HTML. Od tada do danas HTML je doživio dosta promjena i verzija. U trenutku pisanja ovog seminara aktualna verzija je HTML 4.01 dok se polako proširuje i XHTML.

Glavna namjena HTML-a je određivanje(označavanje) koje informacije i na koji način će se one prikazati na internet stranicama. Treba napomenuti da HTML nije programski jezik već jednostavan jezik za označavanje. Sastoji se od jednostavnih označnih elemenata koji se nazivaju tag-ovi i unutar kojih se smještaju informacije. Način na koji će se pojedina infomacija, bilo tekstualna ili grafička, prikazati ovisi o tag-u unutar kojega je smještena. Sama sintaksa HTML-a je dosta jednostavna a detalji se mogu pogledati na jednoj od stranica koja se nalazi među linkovima. Također važno je napomenuti da je jedna od iznimno bitnih karakteristika HTML dokumenata mogućnost definiranja veze među stranicama.
Izgled pojednostavljenog HTML dokumenta dan je sljedećim primjerom:

<HTML>
<HEAD>
	<TITLE>Naslov dokumenta</TITLE>
</HEAD>
<BODY>
	<H1>Naslov</H1>
	<H2>Podnaslov</H2>
	<P>Text, text, text...</P>
	<a href="neka_stranica.html">slijedeca</a>
</BODY>
</HTML>

U počecima razvoja internet stranica HTML je služio sa ciljem, kako je navedeno, da se unutar njega smještaju informacije a ujedno i određuje na koji način će se te informacije prikazati. Danas se zbog razvoja ostalih (specifičnih) jezika teži da HTML ima malo drugačiju ulogu. Ideja je da HTML sadrži informacije no da pomoću raznih tag-ova pojedine elemente tih informacija (samo) označi, bez da se definira kako će se ti elementi prikazati. Način na koji će se ti elementi onda prikazati ili mijenjati pri interakciji sa posjetiteljem vrše se u drugim prije spomenutim jezicima: CSS-u i JavaScript-u. Ova ideja se pojavila kao rezultat težnji raslojavanja samih podataka i načina njihovog prikaza, i to ne samo za područje internet stranica već i klasičnih tekstualnih dokumenta, dokumenata namijenjenih za pregled mobilnim telefonima itd.

DOM (Document object model)

Kao što je rečeno u uvodu DOM predstavlja iznimno bitan faktor u DHTML-u. Na hrvatskom bi se DOM preveo kao objektni model dokumenta. Upravo se iz imena može vidjeti ćemu on služi. Kao prvo riječ je o modelu tj. definiranju strukture HTML dokumenta. Prilikom definiranja strukture HTML dokumenta postavljaju se sljedeća pitanja:

  • Koji sve tag-ovi postoje na stranici?
  • Koliko ih ima?
  • Na koji način su poredani?
  • Koja su svojstva tih tag-ova?
  • Na koji se način elementi tih tag-ova prikazuju na stranici?

DOM daje odgovor na ova pitanja. On izražava strukturu HTML dokumenta na univerzalan, sadržajno neovisan način.

Postoji više razina (level-a) DOM-a koji se međusobno razlikuju po objektima koje sadrže kao i mogućnostima mijenjanja svojstava i prikaza tih objekata. Primjer pojednostavljene sheme elemenata DOM-a dan je sljedećom slikom:
DOM

Označavanje objekata u HTML-u

U zadnjem odsječku rečeno je da se HTML sastoji od objekata. Da bi ostala dva jezika DHTML-a tj. CSS i JavaScript mogli identificirati objekte kojima žele manipulirati potrebno je te objekte označiti. U HTML-u objekti se označavaju tako da se za HTML element koji se želi označiti eksplicitno definira ID atribut na sljedeći način:

<P id="naslov">
....sadržaj paragrafa naslov...
</P>

Ovako označenom HTML objektu se preko vrijednosti ID atributa lako pristupa u CSS-u i JavaScript-u. Jedino ograničenje je da se ne smije dodijeliti ista vrijednost ID atributa dvoma različitim objektima.

Valid HTML 4.01!