Post on 31-Dec-2015
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 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