Sveu
č
ilište u Zagrebu
Fakultet elektrotehnike i ra
č
unarstva
Seminarski rad iz kolegija
Ergonomija ra
č
unalne i programske opreme
Uporaba dinami
č
kog HTML-a
pri izradi web su
č
elja
Zagreb, rujan 2004.
Autor: Josip Masla
ć
Uvod
Od po
č
etaka masovnijeg korištenja interneta za izradu internet stranica koristio se jezik za
ozna
č
avanje HTML (Hypertext Markup Language). Njegova osnovna zada
ć
a bila je da na
jednostavan i pregledan na
č
in prikaže tekst i slike. Kako je vrijeme prolazilo tako su i
zahtijevi za sadržajem sa više mogu
ć
nosti sve više rasli. Sukladno tome pojavljivale su se
nove tehnologije, jezici i protokoli te razna razmišljanja o tome što sve internet stranice
mogu i trebaju sadržavati. Pri tome se mnoge od tih tehnologija do danas nisu održale. U
ovom seminaru govoriti
ć
u o onim tehnologijama/jezicima koji se danas pretežno koriste
pri izradi preglednih i funkcionalnih internet stranica.
Dinami
č
ki HTML
Ve
ć
ina današnjih internet stranica su izra
đ
ene u ve
ć
oj ili manjoj mjeri korištenjem
dinami
č
kog HTML-a (u nastavku teksta - DHTML). Iako bi se po samom nazivu dalo
zaklju
č
iti da je rije
č
samo o novijoj tj. naprednijoj verziji jezika HTML, DHTML predstavlja
ipak nešto drugo. DHTML je samo oznaka da se pri izradi internet stranica koristi nekoliko
tehnologija. To je zapravo ideja o tome koje (ve
ć
postoje
ć
e) jezike i na koji na
č
in ih se
treba/može koristiti pri izradi stranica. Ti jezici su:
{
HTML
{
CSS
{
skriptni jezik: JavaScript,VBScript
Ovdje je važno napomenuti i Document object model (skra
ć
eno DOM). DOM ne predstavlja
neki konkretan jezik ve
ć
je to model po kojemu se u HTML-u stranica gradi od objekata. On
je bitan jer predstavlja poveznicu izme
đ
u HTML-a koji sadrži objekte i CSS-a i skriptnog
jezika koji tim objektima na neki na
č
in upravljaju tj. dodjeljuju ili mijenjanju objektima u
HTML-u neka svojstva.
Mogu
ć
nosti DHTML-a
Ispravnom uporabom i kombinacijom jezika koji sa
č
injavaju DHTML pružaju se velike
mogu
ć
nosti za manipuliranje stranicama. Spomenuti
ć
u par najvažnijih (u zagradi je
navedeno koji od jezika omogu
ć
ava pojedinu opciju):
{
interakcija s posjetiteljima stranice (JavaScript)
{
mogu
ć
nost prilagodbe stranica ljudima s posebnim potrebama (CSS)
{
mijenjanje izgleda stranice nakon u
č
itavanja - "živi" elementi (JavaScript)
{
lakše održavanje tj. izmjena izgleda stranica (CSS)
Sadržaj ovog seminara
Kao što je ve
ć
ukratko objašnjeno DHTML ne predstavlja konkretni jezik ve
ć
ozna
č
ava
uporabu više jezika za izradu internet stranica. Za svaki od tih jezika bi se mogao napisati
poseban seminar (a neki su i
napisani
) pa
ć
u zato u ovom seminaru dati samo kratki osvrt
na mogu
ć
nosti i ulogu tih jezika za kreiranje DHTML internet stranica. Ono što
ć
u u ovom
seminaru pokušati prezentirati su mogu
ć
nosti korištenja DHTML-a te na koji na
č
in
pravilno kombinirati gorespomenute jezike za dobijanje željenog rezultata - kvalitetnih
internet stranica.
{
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:
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.
