SVEUČILIŠTE / UNIVERZITET VITEZ TRAVNIK

FAKULTET : POSLOVNE INFORMATIKE

SMJER: INFORMACIJSKE TEHNOLOGIJE

NIVO STUDIJA: PRVI CIKLUS

AJDIN LUPČEVIĆ

HTML i DOM

SEMINARSKI RAD

Travnik, Septembar, 2013.god.

SVEUČILIŠTE/UNIVERZITET „VITEZ“ TRAVNIK

FAKULTET: POSLOVNE INFORMATIKE

SMJER: INFORMACIONE TEHNOLOGIJE

NIVO STUDIJA: PRVI CIKLUS

AJDIN LUPČEVIĆ

HTML i DOM

SEMINARSKI RAD

IZJAVA:

Ja Ajdin Lupčević student Sveučilišta/Univerziteta „Vitez“ Vitez, Indeks broj: 0191-12/VIT odgovorno i uz moralnu i akademsku odgovornost izjavljujem da sam ovaj rad izradio potpuno samostalno uz korištenje citirane literature i pomoć profesora.

STUDENT: Ajdin LupčevićPROFESOR: doc. dr. Muharem KozićASISTENT: Salim ŠabićPREDMET: Osnove web tehnologija

1

SADRŽAJ

1. UVOD..................................................................................................................................3

1.1 Problem, predmet i objekti istraživanja..................................................................3

1.2 Radna hipoteza i pomoćne hipoteze.......................................................................3

1.3 Svrha i ciljevi istraživanja.......................................................................................3

1.4 Znanstvene metode.................................................................................................3

1.5 Struktura rada..........................................................................................................3

2. HTML..................................................................................................................................4

2.1 Osnovni elementi HTML-a.....................................................................................5

2.2 Grafika (slike) u HTML-u......................................................................................8

2.3 Tabele u HTML-u...................................................................................................9

2.4 Forme u HTML-u.................................................................................................10

2.5 Linkovi u HTML-u...............................................................................................12

3. DOM (Document Object Model) u HTML-u.................................................................15

3.1 Core DOM............................................................................................................16

3.2 HTML DOM.........................................................................................................16

3.3 XML DOM...........................................................................................................20

4. ZAКLJUČAK....................................................................................................................23

LITERATURA........................................................................................................................24

2

1. UVOD

Historijat HTML-a započinje krajem prve polovice 20. stoljeća kada je glavno pitanje bilo na

koji način sprermiti tekstualne i grafičke informacije te kako povezati one koje su logički iste.

U ovom seminarskom radu ukratko je opisana izrada html dokumenta pri čemu se koriste

tagovi za početak i kraj dokumenta, zaglavlje, tijelo, veličinu i font slova, prijelaz u novi

red,umetanje slike, tablice i drugo. Isto tako, opisana je podjela DOM-a te njegova uloga pri

radu s HTML dokumentima. Kao najbolji način da se to predoči priloženo je nekoliko

primjera.

1.1 Problem, predmet i objekti istraživanja

U ovome radu istraživanja se zasnivaju na analizi upotrebe HTML-a pri izradi web stranica te

uloga Documet Object Model (DOM) pri izradi i radu s HTML dokumentima.

1.2 Radna hipoteza i pomoćne hipoteze

Iz složenosti problema i predmeta istraživanja postavljena je sljedeća radna hipoteza:

Upotreba HTML-a kao opisnog jezika pri izradi web stranica te uloga DOM-a u

HTML-u.

1.3 Svrha i ciljevi istraživanja

Cilj rada je ukratko prikazati rad sa HTML opisnim jezikom kao i ulogu DOM-a u izradi web

stranica HTML-om.

1.4 Znanstvene metode

U ovom seminarskom radu koristit će se više stručnih-znanstvenih metoda kao što su;

1. Osnovna metoda koja će se koristiti u radu je deskripcija.

2. Metode analize i sinteze. Uz sintezu pojedinačnih elemenata moguće je doći do

ukupnih sintetičkih zaključaka.

1.5 Struktura rada

U uvodu su navedeni problem istraživanja, znanstveni projektni zadatak i objekti

istraživanja, znanstvena hipoteza i pomoćne hipoteze, svrha i ciljevi istraživanja, ocjena

dosadašnjih istraživanja i znanstvene metode te striktura rada.

U drugom djelu rada su opisane je HTML struktuirani jezik te mogučnosti HTML-a pri izradi

web stranica.

3

Treći dio se odnosi na DOM-u (Document Object Modelu) te njegovoj primjeni u izradi

HTML web stranica.

Na kraju napisan zaključak kojim je dokazana hipoteza i navedena literatura.

2. HTML

HTML (HyperText Markup Language) je veoma jednostavan strukturisani jezik koji se koristi

za izradu Web stranica, odnosno služi za izvršavanje programa na daljinu. Ovaj jezik

predstavlja standard za Internet dokumente.

Sa razvojem Interneta došlo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji

sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je

skup stranica u obliku datoteka, međusobno povezanih linkovima koje su umetnute u stranice.

Na ove linkove se može kliknuti. Za razliku od običnog teksta, koji se čita linearno (s lijeva

na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na

linearan način.

HTML se sastoji od kodova, kojie nazivaju elemnti i koji se koriste za opisivanje strukture i

izgleda dokumenta. Čitač Weba (explorer, chrome, mozila, opera, i sl..) interpretira HTML

elemente i na osnovu njih pokazuje dokument na ekranu.

HTML stranice imaju ekstenziju .html ili .htm (index.htm), a nalaze se u određenom

direktorijumu servera vezanog na Internet, što ih čini dostupnim na web-u.

Hipertekst je, tekst koji sadrže veze ili linkove prema drugim dokumentima ili na samog sebe.

Preciznije, hipertekst je skup stranica, u obliku datoteka, međusobno povezanih linkovima

koje su umetnute u stranice. Na ove linkove se može kliknuti.

Postoji veći broj jezika koji omogućavaju da se precizno opiše izgled i sadržaj jednog teksta.

Od posebnog su značaja:

SGML (skr. od Standard General Markup Language),

TeX i LaTeX (za matematičke tekstove),

PostScript (jezik laserskih štampača),

RTF (skr. od Rich Text Format), ...

Najznačajniji jezici za opis hiperteksta su:

SGML,

HTML (skr. od HyperText Markup Language), pojednostavljena verzija SGML-a,

4

XHTML (skr. od Expandable HTML) i

XML (skr. od Extensible Markup Language, "kompromis" između pretjerane

složenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

HTML je jezik kojim je moguće formatirati izgled www stranice, koristi se od 1992. godine.

Svaka www stranica koju potencijalni posjetilac šalje pretraživaču nije čisti tekst već sadrži

niz informacija u skladu s HTML jezikom koje govore pretraživaču kako dokument treba

prikazati. HTML predstavlja dogovor o zajedničkom jeziku između autora stranica i

pretraživača - komunikacija i razmjena informacija je moguća isključivo ako obadvije strane

govore isti jezik. HTML jezik daje nam osnovni skup kodova koje možemo kombinovati na

razne načine poštujući neka osnovna pravila. Za izradu stranica potrebna je samo još dovoljno

mašte da se osnovni kodovi povežu na različite načine te kao rezultat može proizići određena

www stranica visokog kvaliteta.

Na Internetu povezano je vrlo mnogo različitih računara koji koriste različite unutrašnje jezike

za prikaz podataka. Takođe, www stranice moraju moći čitati osim računara i ljudi. Iz toga

razloga je HTML jezik tekstualan. Kodovi HTML jezika su zapravo riječi (često skraćenice

engleskog jezika) koje je moguće kombinovati na razne načine.Svaki HTML dokument mora

biti otvoren sa ovim tagom <html> a zatvoren sa ovim tagom</html>. Za generisanje HTML

stranice potreban je najobičniji tekst editor, na primer Notepad.

2.1 Osnovni elementi HTML-a

Sada ćemo reci nešto o tome kako možemo urediti tekst koji se nalazi na našoj internet

stranici. Tekst možemo oblikovati i uređivati pomoću osnovnih HTML elemenata i stilova, te

njihovih atributa. HTML stilski elementi se koriste kada se želi promijeniti grafički izgled

sadržanog teksta, a atributi nam služe kao pripomoć nekim elementima, koji im pomažu da

rade potpuno ispravno. Sastoje se od imena i vrijednosti.Neki od elemenata su:

1. Paragraf (<p>) ili odlomak koji predstavlja određenu logičku cjelinu sadržaja.

2. Naslov (od <h1> pa do <h6>) kojeg koristimo kako bismo odvojili i predstavili različite

tematske cjeline dokumenta. h1 je najviša razina naslova a h6 najniža

3. Novi red (<br>) je element koji se koristi prilikom prelaska sadržaja u novi red unutar

odlomka.

5

4. Nemogućnost prijeloma reda (<nobr>). Ukoliko je tekst prevelik da stane u jedan red na

monitoru, na dnu prozora će se pojaviti horizontalni "klizač" i korisnik će morati skrolati da bi

ga pročitao.

5. Predformatirani tekst (<pre>) se razlikuje od običnog teksta po tome sto je svaki znak

jednake širine. Najčešće se koristi kada se na internet stranici želi prezentirati dio računalskog

koda ili se žele zadržati razmaci i novi redovi, a da se pri tome ne koristi specijalni HTML

znak &nbsp; ili element <br/>

6. Font (<font>) je identifikator koji nam omogućuje određivanje fonta teksta na našoj

stranici, a njegovi atributi veličinu i boju tog fonta.

Neki od stilova su:

1. Bold (<b>) nam služi kako bi podebljali tekst

2. Italic (<i>) nam služi kako bi ukosili tekst

3. Underline (<u>) nam služi kako bi podcrtali tekst

4. Strike (<s>) nam služi kako bi precrtali tekst

5. Subskript (<sub>) nam služi kako bi tekst stavili na mjesto indeksa

6. Superskript (<sup>) nam služi kako bi tekst stavili na mjesto eksponenta

Neki od atributa:

1. Align je atribut nam služi za poravnavanje elemenata naše stranice (tekst, slika, tablica itd)

u lijevo, desno ili sredinu, stoga su njegove vrijednosti: left, right, center.

2. Color je atribut nam služi za određivanje boje našeg fonta. Postoje još razne varijacije ovog

atributa kao sto je npr. bgcolor koji nam služi za određivanje boje pozadine.

3. Size je atribut koji nam koristi za mijenjanje veličine slova. HTML razlikuje 7 veličina

slova koje nose vrijednosti od 1 do 7, ali isto tako veličinu slova možemo izraziti i u

pikselima .

4. Face je atribut koji nam koristi za određivanje vrste fonta našeg teksta.

6

Primjer 1.

Slika 1. Primjer načina uređivanja teksta

Lista je također element HTML-a kojim se može oblikovati tekst, tj. određivati način na koji

ce on biti prikazan na našoj stranici. Liste smo izdvojili od ostalih elemenata, jer ćemo o

njima reci nešto vise nego o ostalim elementima. Lista je odlomak koji sadržava niz

elemenata liste. Aktualne su tri vrste lista: brojčane, simboličke i definicijske. Moguće ih je

ugnježđivati pa su idealno sredstvo za definiranje logičke strukture, npr. stablastog izbornika.  

Kod brojčanih lista elementi su označeni rednim brojem ili slovima. Za definiranje brojčane

liste koristi se element <ol> (ordered list), a za definiranje pojedinih elemenata liste koristi se

element <li> Elementi simboličke liste označeni su kružićima ili nekim drugim simbolima. Za

definiranje brojčane liste koristi se element <ul> (unordered list), dok se za definiranje

pojedinih elemenata liste kao i kod brojčane liste koristi <li>Kod definicijskih listi svaki se

element liste sastoji od dva podelementa: definicijskog izraza <dt>(definition term) i same

definicije <dd> (definition description). Za definiranje definicijske liste koristi se

element <dl> (description list).

7

Primjer 2.

Slika 2. Primjer lista

2.2 Grafika (slike) u HTML-u

Unutar HTML fajla se mogu prikazivati slike. Slike su date kao zasebni fajlovi i pozivaju se

preko URL-a koji vodi do slike, što znači da prikazana slika čak i ne mora da bude na istom

sajtu.

Da bi se slika prikazala koristi se jednostruka <img> oznaka:

<img src="putanja do slike" alt="alternativni tekst" width="sirina slike" height="visina

slike" />

Kao što se vidi, ova oznaka ima nekoliko atributa koje možemo koristiti:

src - obavezan atribut. Definiše putanju do fajla slike.

alt - definiše tekst koji se prikazuje ako slika iz nekog razloga nije pronađena ili ne može da

se prikaže.

width - određuje širinu slike u pikselima ili procentima. Ukoliko parametar nije naveden,

slika se prikazuje u svojoj originalnoj širini.

height - slično kao gornji atribut, određuje se visina slike.

8

Primjer 3.

<img src="adorable.gif" alt="Mali meda" width="100" height="92" />

2.3 Tabele u HTML-u

Tabela se predstavlja tako što se opisuju redom njene vrste (redovi, engl. row) i sadržaj svake

ćelije u redu.

Za kreiranje tabela koristi se etiketa <TABLE> ... </TABLE>

Atributi etikete TABLE

- zadavanje veličine ivice tabele - BORDER (broj)

- zadavanje boje ivice tabele - BORDERCOLOR (broj)

- položaj tabele unutar prozora (poravnanje) - ALIGN (left, right, center)

- zadavanje širine tabele - WIDTH (broj piksela ili procenata u odnosu na prozor)

- podešavanje boje pozadine tabele - BGCOLOR (boja)

- podešavanje prostora između zida ćelije i sadržaja - CELLPADDING (broj)

- rastojanje između ćelija - CELLSPACING (broj)

Nadnaslov tabele zadaje se etiketom <CAPTION> ... </CAPTION>

Ako se zadaje ova etiketa, mora da se navede neposredno posle etikete TABLE.

Podrazumevano se naslov prikazuje iznad tabele centrirano. Poravnanje naslova podešava se

atributom ALIGN:

- za vertikalno poravnanje: TOP, BOTTOM

- za horizontalno poravnanje: LEFT, RIGHT

Ćelija u tabeli se opisuje etiketom <TD> ... </TD>

Atributi

- broj kolona preko kojih se prostire ćelija - COLSPAN (broj)

- broj redova preko kojih se prostire ćelija - ROWSPAN (broj)

- horizontalno poravnanje teksta u ćeliji - ALIGN (left, right, center, justify, char)

- vertikalno poravnanje teksta u ćeliji - VALIGN (top, middle, buttom, baseline) prema

vrhu ćelije, sredini ćelije, dnu, težišnoj liniji zajedničkoj za sve ćelije u redu

9

- prikaz sadržaja ćelije bez prelamanja - NOWRAP (broj piksela ili procenata u odnosu

na prozor)

<TH>...</TH> - ćelija u tabeli, samo centrirano i bold.

Red u tabeli opisuje se etiketom <TR> ... </TR>

Atributi BORDERCOLOR, BGCOLOR imaju isto značenje kao kod elementa TABLE, samo

se njihove vrednosti sada odnose na red tabele.

Atributi ALIGN, VALIGN imaju značenje kao kod elementa TD, samo se njihove vrednosti

odnose na red.

Primjer 4.

<table><tr> <td>ovo je tekst u prvom retku i prvom stupcu</td> <td>ovo je tekst u prvom retku i drugom stupcu</td></tr></table>

2.4 Forme u HTML-u

Internet omogućava dvosmjernu komunikaciju te je vrlo jednostavno moguće izraditi

komunikacijske sisteme koji su interaktivni te omogućavaju znatan upliv korisnika na tok

pristupa podacima. www nije u tome iznimka. Jezik HTML raspolaže širokim spektrom

mogućnosti kojim je moguće postići dvosmjernu komunikaciju s korisnikom, a jedan od

najznačajnijih su HTML forme. Pomoću HTML formi moguće je u prozoru pretraživača

prikazati formu . Korisnik može popuniti razne informacije iz formulara te ga poslati natrag

poslužitelju na obradu. To otvara sasvim nove mogućnosti primjene Interneta na stvari kao što

su trgovina preko Interneta, pristup velikim bazama podataka i slično. Izrada formi je dosta

složen posao te obuhvaća znatno više od pukog prikazivanja različitih polja u HTML

stranicama - taj dio posla nije ništa složeniji od primjerice izrade tablica te se obavlja pomoću

novih elemenata. Da bi se nešto stvarno moglo i učiniti s podacima koje korisnik unese u

formu, potrebno je izraditi program koji će na poslužitelju prihvatiti podatke i obraditi ih te

generirati odgovor, što može biti dosta složeno.Za to se koriste CGI skripte (CGI - skraćenica

od Common Gateway Interface) za koje pojednostavljeno možemo reći da su to programi koji

se izvršavaju na poslužitelju (serveru), te su povezani s www stranicama korisničkim

pretraživačem. Za izradu CGI skripti treba poznavati neki od programskih jezika koji dotični

10

server prepoznaje kao što je to naprimjer Perl. Na sreću za sve one koji nepoznaju ni jedan

programski jezik za izradu skripti gotovo svi hostovi nude i daju na raspolaganje svoje gotve

skripte koje možete koristiti za izradu anketa na vašim stranicam, knjige gostiju i sličnih

stvari. Za izradu mailing lista, foruma i sličnih stvari ja se koristim uslugom koji imaju vrlo

dobre, jednostavne i besplatne alate te ih od svega srca preporučam. Sve forme se odjeljuju od

ostatka HTML stranice unutar form elementa. Unutar njega navodi se tekst forme te različite

kontrole kojima se korisniku omogućava unos podataka. Element form ima dva osnovna

atributa kojima se određuje kako će se podaci na poslužitelju obraditi: <b>action</b>

i<b>method</b>. Vrijednost atributa action jest URL programa kojem će se podaci iz forme

poslati te koji će ih obraditi(npr.cgi-bin). Atribut method označava način kako će se podaci

poslužitelju poslati, te može imati vrijednost <b>get</b> i <b>post</b>. Dovoljno je samo

reći da se najčešće koristi metoda post koja omogućava slanje većih količina podataka

poslužitelju.

Forme se koriste tako da se korisniku prikaže niz polja za unos podataka. Postoji više tipova

tih polja: polja za unos teksta, padajući izbornici, liste opcija, odgovori da/ne te gumbi kojima

je formular moguće potvrditi ili poništiti. Unos podataka označava se pomoću input elementa

pomoću kojeg je moguće na formi prikazati gotovo bilo koji tip polja za unos. Različiti

atributi tog elementa određuju koje će se polje za unos teksta prikazati te kako element valja

prikazati. Osnovni atribut je type koji određuje tip polja za unos podataka te može imati jednu

od sljedećih vrijednosti:

text - unos jedne linije teksta<br>

password - unos linije teksta pri čemu se znakovi prikazuju kao zvjezdice (obično se koristi za

unos lozinke)

checkbox - omogućava unos da/ne odgovora

radio - omogućava izbor jedne od niza vrijednosti

submit - gumb za pošiljanje forme poslužitelju

reset - gumb za brisanje svih elemenata forme na početnu vrijednost

file - kontrola za pošiljanje datoteke poslužitelju

hidden - skrivena kontrola

image - kontrola koja prikazuje sliku

button - gumb

11

textarea - za unos teksta - komentara, odgovora i sl.

Svaka kontrola za unos podataka mora imati ime koje se može postaviti pomoću atributa

name. To ime će biti proslijeđeno poslužitelju na obradu zajedno s podacima koje je korisnik

unio u obrazac. Također, podrazumijevana, odnosno početna vrijednost kontrole može se

postaviti pomoću atributa value - prikazana vrijednost će jednostavno biti prikazana u kontroli

odmah nakon pozivanja odgovarajuće www stranice. Element input nema sadržaja niti

završne oznake.

Evo primjera koda za jednu formu:

<form>Ime : <input type="text" name="ime"><br>Prezime: <input type="text" name="prezime"></form>

2.5 Linkovi u HTML-u

Pojam linka je povezan sa pojmom hiper-veze.

Hiper-veza predstavlja mogućnost da se čitanje teksta iz čvora 1 nastavi u čvoru 2. Ovakva

hiper-veza se enkodira pomoću posebnog taga anchor koji povezuje fragment teksta u čvoru 1

sa adresom čvora 2. Opšti izgled taga za anchor je oblika

<A atribut> ... </A>.

Sintaksa ovog taga podrazumeva da se u čvoru 1 opišu:

• fizička pozicija u tom čvoru sa koje se prelazi na tekst u čvoru 2 i

• fizička lokacija na kojoj se nalazi tekst u čvoru 2.

Ove dve pozicije se nazivaju, redom, polazni i dolazni čvor. Polazni čvor označava u tekstu

onu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomoću atributa HREF:

<A HREF= adresa čvora 2> pozicija u čvoru 1 sa koje se prelazi na čvor 2 </A>

Navigator obično interpretira polazni čvor u HTML-dokumentu kao fragment teksta na koji se

može "kliknuti", grafički istaknut podvlačenjem i drugom bojom slova od boje slova samog

teksta.

12

Dolazni čvor je ili adresa neke datoteke ili tag koja obeležava deo teksta. Definiše se pomoću

atributa NAME:

<A NAME= pozicija u čvoru 2> tekst u čvoru 2 na koji se prelazi iz čvora 1 </A>

Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira na početak

dokumenta u čvoru 2, a inače na naznačenu poziciju.

Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform

Resource Locator), koji omogućava da se precizno imenuje adresa čvora 2, ma gde on bio

fizički lociran. U opisivanju adrese koja upućuje na čvor 2 razlikujemo više slučajeva u

zavisnosti od toga koliki je deo URL-a poznat u tom trenutku. Linkovi koji se mogu definisati

u okviru jednog HTML dokumenta mogu se podjeliti na tri vrste.

Prvu vrstu bi činili linkovi sa kojima se može pristupiti nekom drugom djelu iste te stranice u

kojoj se link i nalazi. Primer može biti da se na kraju stranice napravi link koji korisnika koji

ga aktivira vraća na vrh stranice:

o u polaznom tekstu se navodi tag (polazni čvor):

<A HREF="#adresa"> tekst na koji se može "kliknuti" </A>

o u dolaznom tekstu se navodi tag (dolazni čvor):

<A NAME= "adresa"> dolazni tekst </A>

Za definisanje svih ovih linkova zajedničko je da se dobijaju istim parom tagova: <a> i </a>.

Za prvu vrstu linkova moramo prvo da napravimo oznaku na nekom mestu u dokumentu na

koje želimo da pređemo kad kliknemo na odgovarajući link. Oznaka se dobija stavljanjem

atributa name u <a> tag. Primjer:

<a name="kraj"></a>

Izmedju početnog <a name="kraj"> i završnog </a> taga može stajati bilo koji element

prezentacije (tekst, slika), a ne mora stajati nijedan element, kao što je slučaj u prethodnom

primeru. Ovaj tag ne proizvodi nikakav vidljiv efekat u HTML dokumentu - on deluje u

pozadini dokumenta i služi browseru da se lakše orijentiše.

13

Da bi se definisalo mesto odakle se želi nastaviti sa pregledom mora se navesti atribut href u

<a> tagu. Neka se prethodni primer nalazi u okviru stranice PrimerLinka.html tada treba

navesti:

<a href="PrimerLinka.html#kraj"> Odavde se odlazi na kraj stranice </a>

Sada kada korisnik klikne mišem na link " Odavde se odlazi na kraj stranice" odlazi se na de

stranice koji je definisan imenom kraj.

Drugu vrstu bi činili linkovi do neke druge stranice u okviru iste te prezentacije. Primer mogu

biti linkovi za kretanje napred i nazad kroz prezentaciju.

Aktiviranjem druge vrste linkova napušta se tekuća stranica i dalje izvršavanje se nastavlja na

nekoj drugoj stranici tekuće prezentacije. To se postiže definisanjem taga <a> sa atributom

href i nazivom HTML fajla do kojeg se želi da se napravi veza.

Na priemr ako se želi da se napravi veza do Prosla.html treba napisati:

<a href="Prosla.html"> Veza do stranice Prosla.html </a>

Kada se mišem klikne na tekst "Veza do stranice Prosla.html" u browseru će se prikazati

stranica Prosla.html.

Link odvodi na vrh stranice čija se adresa nalazi u okviru href atributa. Ako bi smo želeli da

nas link odvede do nekog određenog mesta u toj stranici onda bismo na to mesto prvo morali

postaviti oznaku sa name atributom kao što je urađeno u prethodnom slučaju.

Ukoliko se fajl do kojeg vodi link nalazi u nekom drugom folderu, tada kao vrednost href

atributa mora se postaviti cjelokupna putanja koji vodi do tog fajla (npr.

c:\Prezentacija\Primjer\Prosla.html).

Znači ako je pozicija čvora 2 u nekom dokumentu izvan onog dokumenta koji sadrži čvor 1,

ali se obe nalaze na istom serveru, onda se adresiranje vrši navođenjem relevantnog dela puta

koji je potreban da bi se iz čvora 1 definisao put do čvora 2.

Treću vrstu bi činili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja može biti

postavljena na računaru koji se nalazi na nekom sasvim drugom serveru. Da bi se pristupilo

14

toj prezentaciji potrebno je navesti cjelu web adresu te prezentacije.

Opšti oblik adrese koja se pojavljuje kao vrednost HREF atributa je:

scheme://server.domen [:port]/putanja/ imeDokumenta

Na primer ako se u okviru prezentacije želi uspostaviti veza sa Fakultetom poslovne

informatike u Travniku u čija adresa je fpi.unvi.edu.ba, tada se navodi kod:

<a href="http://www.fpi.unvi.edu.ba/"> Fakultet poslovne informatike </a>

Na stranici će se prikazati tekst " Fakultet poslovne informatike " i ako se mišem klikne na

njega u browseru će se pojaviti početna stranica prezentacije Fakulteta poslovne informatike.

Pored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanje nove mail poruke

pomoću default programa za elektronsku poštu - najviše korišćeni su Outlook Express ili

Netscape Messenger. Pri generisanju nove poruke, već će biti upisana željena adresa, a

korisniku preostaje samo da otkuca tekst poruke i da je pošalje.

Da bi se poslala poruka na mail adresu ime.prezime@unvi.edu.ba potrebno je u okviru

stranice navesti sljedeći tekst:

<a href="mailto: ime.prezime@unvi.edu.ba "> Pošaljite e-mail poruku! </a>

3. DOM (Document Object Model) u HTML-u

„DOM, ili Document Object Model (objektni model dokumenta) je više-

platformskoaplikacijsko programsko sučelje ili API za valjane HTML i XML dokumente,

neovisno oprogramskom jeziku. DOM definira logičku strukturu dokumenta i način na koji se

dokumentupristupa i manipulira s njim. Uz pomoć DOM-a, programeri mogu stvarati nove

dokumente, kretati se kroz njih te dodavati,ažurirati ili brisati sadržaj dokumenta. DOM pruža

strukturirani prikaz dokumenta te omogućavapromjenu njegovog sadržaja i vizualnog izgleda

uz pomoć nekog od jezika za skriptiranje (npr.Javascript). Ukratko rečeno, svemu što se

nalazi na HTML ili XML dokumentu, uz neke iznimke, može se pristupiti uz pomoć DOM-a.

DOM je podijeljen na tri dijela:

1. Core DOM

2. XML DOM

3. HTML DOM

15

3.1 Core DOM

DOMCore DOM je jedna od sekcija DOM-a i ona definira skup objekata i sučelja za

pristupanje imanipulaciju dokumenata. Core DOM gleda dokument kao jedan objekt i,

jednako kao i HTML I XML DOM, definira metode i svojstva koja se nad tim dokumentom

mogu obavljati. Core DOM se ne bazira na određenom tipu dokumenta. On objašnjava

metode i svojstva kao i još mnogedruge stvari kao što su upravljanje memorijom, osnovni

tipovi podataka i sl. neovisno odokumentu za koji se oni odnose. U ovom seminaru neću

govoriti o Core DOM-u nego ću seviše bazirati na HTML i u manjem obimu na XML DOM

3.2 HTML DOM

HTML DOM je programski API za HTML dokumente. To znači da on omogućava

programski pristup i manipulaciju sadržaja web stranice ili dokumenta. Uzmimo slijedeći

HTML kod kao primjer:

Slika 3. HTML primjer

Korijenski ili glavni čvor u ovom primjeru je <html>. Svi ostali čvorovi dokumenta su

smješteni unutar <html>. Također, <html> ima dva čvora djeteta. To su <head> i <body>.

Svaki od njih također ima svoje čvorove – djecu, pa tako <head> čvor ima <title> a

<body> ima <h1> i <p>. HTML DOM ovakav raspored HTML elemenata vidi kao

stablastu strukturu. Takva struktura se još naziva i s tablo čvorova (node-tree). U stablu

čvorova, čvorovi su međusobno povezani na hijerarhijski način. Postoji glavni čvor koji je na

vrhu, ispod njega se nalaze njegovi čvorovi - djeca. Svako njegovo dijete može imati još djece

16

te se na taj način stvara hijerar hija. Na slici 4 je prikazana stablasta struktura HTML

dokumenta iz slike 3 na način kako nju vidi HTML DOM.

Slika 4. Stablo čvora

Neka od pravila stvaranja stabla čvorova su slijedeća:

- čvor koji se nalazi na samom vrhu se naziva korijen (korijenski element)

- svaki čvor (osim korijenskog) ima točno jednog roditelja

- svaki čvor može imati proizvoljan broj djece

- list je čvor bez djece

U DOM- u, HTML dokument se sastoji od skupa objekata, tj. čvorova. Kada kažemo da je

DOM ustvari API (aplikacijsko programsko sučelje) za HTML i XML ustvari mislimo na to

da DOM, u suštini, spaja web stranice, odnosno objekte koji se na njima nalaze, sa skriptama

ili programskim jezicima. Upravo radi toga se DO M najčešće koristi u kombinaciji sa

JavaScriptom. To znači da je kod napisan u JavaScriptu ali koristi DOM kako bi pristupio

17

web stranici i njenim elementima. Programsko sučelje DOM- a je definirano standardnim

svojstvima (properties) i metodama (methods). Neka od DOM svojstava su npr.

- x.innerHTML – prikazuje tekstualnu vrijednost varijable x

- x.nodeName – daje naziv varijable x

- x.nodeValue – daje vrijednost varijable x

- x.attributes – daje vrijednosti atributa čvora x

A neke od metoda koje se najčešće korist e su:

- x.getElementById( id) – dohvaća element sa od ređe nim id- jem

- x.getElementsByTagName(name) – dohvaća sve elemente sa određenim tag- om

Iako je najčešće korišten ukombinaciji s JavaScriptom, DOM je dizajniran na način da bude

neovisan o nekom određenom programskom jeziku. U ovom seminarskom radu ću se

fokusirati na korištenje DOM- a u kombinaciji s javascriptom, ali moguće su implementacije

DOM- a i za mnoge druge programske jezike.

Kako se koriste DOM svojstva i metode u praksi pokazuju slijedeći primjeri.

18

Slika 5. Kombinacija DOM-a i JavaScripta (1)

Slika 6. Rezultat koda sa slike 5

Modificirali smo početni HTML kod (slika 3) i dodali određene funkcionalnosti, npr.

paragrafu smo dodali atribut id i nazvali smo ga par. Zatim smo uz pomoć javaScripta i

DOM metode getElementById() pretražili HTML dokument kako bi pronašli onaj element u

kodu čiji id odgovara zadanome te njegov sadržaj, uz pomoć svojstva innerHTML, pripisali

varijabli txt. Nakon toga smo jednostavno ispisali vrijednost varijable txt na zaslon pomoću

metode write.

txt=document.getElementById("par").innerHTML;

document.write("Tekst koji se nalazi u paragrafu: " + txt);

U drugom primjeru se koristi metoda getElementsByTagName() koja dohvaća sve elemente

koji imaju određeni tag. Tako dohvaćeni elementi spremau se u polje, i svakom članu se može

pristupiti pomoću njegovog rednog broja (0 – n). Naposlijetku, u primjeru se ispisuje sav

tekst koji sadrže dohvaćeni tagovi.

19

Slika 7. Kombinacija DOM-a i JavaScripta (2)

Postoje četiri <p> taga. Korištenjem metode getElementsByTagName() oni se spremaju u

varijablu txt koja postaje niz od 4 elementa. Prolaskom kroz for petlju se ispisuje tekst

sadržan unutar svakog dohvaćenog elementa.

20

Slika 8. Ispis koda sa slike 7

3.3 XML DOM

Kao što je HTML DOM standardni objektni model i API za HTML dokumente, tako i XML

DOM definira objekte i svojstva svih XML elemenata kao i metode kojima se pristupa istima.

Drugim rječima :

„XML DOM je standard za pristupanje, mijenjanje, dodavanje ili brisanje XML elemenata.“

Prema DOM- u, sve što se nalazi u XML dokumentu je čvor. Pravila XML DOM- a su

slijedeća:

- cijeli XML dokument čini čvor dokument

- svaki XML element je čvor element

- tekst unutar XML elementa je tekstni čvor

- svaki atribut je atributni čvor

Na slijedećem primjeru se mogu vidjeti XML elementi i njihovi atributi:

21

Slika 9. XML kod

Korijenski čvor u XML- u sa slike 9 je <bookstore>. Svi ostali čvorovi se nalaze unutar njega.

Korijenski čvor sadrži 2 <book> čvora od kojih svaki sadrži još neke čvorove. Tako npr.

prvi <book> čvor sadrži čvorove <title>, <author>, <year> <i> i <price>. Svaki od tih

čvorova sa najniže razine sadrži tekstualni čvor.

XML datoteke se , kao i HTML, mogu prikazati uz pomoć DOM stabla čvorova. Za

prethodni primjer bi stablo izgledalo otprilike ovako (slika 10) :

22

Slika 10. XML stablo čvorova1

XML DOM, isto kao i HTML sadrži određene metode kojima pristupa elementima XML

dokumenta. Te metode su prilično s lične metodama HTML DOM- a, a neke od njih su:

- getElementsByTagName(name) – pronalazi sve elemente sa određenim tag- om

- appendChild(node ) – ubacuje dijete čvoru x

- removeChild(node) – uklanja dijete od čvora x

Također, postoje i svojstva (properties) elemenata XML DOM- a koji olakšavaju

modifikaciju i upravljanje sadržajem. Neka od nejčešće korištenih svojstava su:

- x.nodeName – daje ime čvora x

- x.nodeValue – daje vrijednost čvora x

- x.parentNode – daje roditeljski čvor od x

- x.attributes – daje popis atributa (atributnih čvorova) koje x sadrži

Korištenje XML doma ima velikih sličnosti sa HTML DOM- om, npr.

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

nam daje vrijednost sadržanu u prvom <title> tagu XML dokumenta koisteći standardnu

DOM metodu getElementsByTagName() kao i neka od DOM svojstava: childNodes i

nodeValue.

Još jedna bitna stvar koja se mora spomenuti kod XML- a je parsiranje. XML dokumenti

znaju biti jako nepregledni pa ih je potrebno pretvoriti u oblik koji će biti lakše razumjeti i

pročitati. Tu također uskače DOM. Parsiranje se odvija na način da XML parser čita XML

dokumet i pretvara ga u XML DOM objekt. Nakon što je stvoren XML DOM objekt sa svim

svojim čvorovima, koriste se metode (funkcije) kojima se prolazi kroz XML stabla, dodaju se

čvorovi, brišu se ili se pristupa već postojećima. Većina browsera ima već ugrađen XML

parser za čitanje i manipulaciju XML- om.

1 Preuzeto sa http://www.w3schools.com/htmldom/

23

4. ZAКLJUČAK

Zbog svoje jednostavnosti, upotreba HTML za kreiranje web stranica je sve veća i veća.

Potrebno je samo savladati neka bitna pravila, te uz pomoć mašte kreirati raznolike i

zanimljive web stranice.

Rad s HTML-om je jedan od primjera gdje se na zanimljiv način može naučiti nešto novo.

HTML DOM je jedan od tri dijela DOM standarda kojeg je razvio W3C konzorcij. On

predstavlja html dokumente kao hijerarhijsku stablastu strukturu, a omogućava pristup i

kontrolu svih html elemenata na web stranici te kreiranje dinamičkih web stranica.

Najveća prednost HTML DOM-a je pravo stablasta struktura koja omogućava lagan pristup

elementima te lakšu validaciju. No, poprilično velik nedostatak mu je što se ne može obraditi

u ovom modelu ako cijeli dokument nije učitan.

24

LITERATURA

Skripta:

1. Boško N.: HTML PROGRAMIRANJE, Beograd, 2004.

Ostali izvori:

1. http://en.wikipedia.org/wiki/Document_Object_Model (03.09.2013)

2. http://www.besplatniseminarskiradovi.com/INTERNET-WEB/HTML.htm

(03.09.2013)

3. http://woork.blogspot.com/2009/01/woork-handbook.html (04.09.2013)

4. http://www.darkopetrovic.com/eucenje_seminarski.php (05.09.2013)

25