SVEUILITE / UNIVERZITET VITEZ TRAVNIK FAKULTET : POSLOVNE INFORMATIKE SMJER: INFORMACIJSKE TEHNOLOGIJE NIVO STUDIJA: PRVI CIKLUS

AJDIN LUPEVI HTML i DOM

SEMINARSKI RAD

Travnik, Septembar, 2013.god.

SVEUILITE/UNIVERZITET VITEZ TRAVNIK FAKULTET: POSLOVNE INFORMATIKE SMJER: INFORMACIONE TEHNOLOGIJE NIVO STUDIJA: PRVI CIKLUS

AJDIN LUPEVI

HTML i DOM

SEMINARSKI RAD
IZJAVA: Ja Ajdin Lupevi student Sveuilita/Univerziteta Vitez Vitez, Indeks broj: 019112/VIT odgovorno i uz moralnu i akademsku odgovornost izjavljujem da sam ovaj rad izradio potpuno samostalno uz koritenje citirane literature i pomo profesora.

STUDENT: Ajdin Lupevi PROFESOR: doc. dr. Muharem Kozi ASISTENT: Salim abi PREDMET: Osnove web tehnologija

SADRAJ
1. UVOD ................................................................................................................................. 3 1.1 Problem, predmet i objekti istraivanja.................................................................. 3 1.2 Radna hipoteza i pomone hipoteze ....................................................................... 3 1.3 Svrha i ciljevi istraivanja ...................................................................................... 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. ZALJUAK ................................................................................................................... 23 LITERATURA ....................................................................................................................... 24

1. UVOD
Historijat HTML-a zapoinje krajem prve polovice 20. stoljea kada je glavno pitanje bilo na koji nain sprermiti tekstualne i grafike informacije te kako povezati one koje su logiki iste. U ovom seminarskom radu ukratko je opisana izrada html dokumenta pri emu se koriste tagovi za poetak i kraj dokumenta, zaglavlje, tijelo, veliinu 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 nain da se to predoi priloeno je nekoliko primjera. 1.1 Problem, predmet i objekti istraivanja U ovome radu istraivanja 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 pomone hipoteze Iz sloenosti problema i predmeta istraivanja postavljena je sljedea radna hipoteza: Upotreba HTML-a kao opisnog jezika pri izradi web stranica te uloga DOM-a u HTML-u. 1.3 Svrha i ciljevi istraivanja 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 vie strunih-znanstvenih metoda kao to su; 1. Osnovna metoda koja e se koristiti u radu je deskripcija. 2. Metode analize i sinteze. Uz sintezu pojedinanih elemenata mogue je doi do ukupnih sintetikih zakljuaka. 1.5 Struktura rada U uvodu su navedeni problem istraivanja, znanstveni projektni zadatak i objekti istraivanja, znanstvena hipoteza i pomone hipoteze, svrha i ciljevi istraivanja, ocjena dosadanjih istraivanja i znanstvene metode te striktura rada. U drugom djelu rada su opisane je HTML struktuirani jezik te mogunosti HTML-a pri izradi web stranica.

Trei dio se odnosi na DOM-u (Document Object Modelu) te njegovoj primjeni u izradi HTML web stranica. Na kraju napisan zakljuak 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 slui za izvravanje programa na daljinu. Ovaj jezik predstavlja standard za Internet dokumente. Sa razvojem Interneta dolo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji sadri veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica u obliku datoteka, meusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se moe kliknuti. Za razliku od obinog teksta, koji se ita linearno (s lijeva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno na linearan nain. 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 odreenom direktorijumu servera vezanog na Internet, to ih ini dostupnim na web-u. Hipertekst je, tekst koji sadre veze ili linkove prema drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica, u obliku datoteka, meusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se moe kliknuti. Postoji vei broj jezika koji omoguavaju da se precizno opie izgled i sadraj jednog teksta. Od posebnog su znaaja: SGML (skr. od Standard General Markup Language), TeX i LaTeX (za matematike tekstove), PostScript (jezik laserskih tampaa), RTF (skr. od Rich Text Format), ...

Najznaajniji 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" izmeu pretjerane sloenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

HTML je jezik kojim je mogue formatirati izgled www stranice, koristi se od 1992. godine. Svaka www stranica koju potencijalni posjetilac alje pretraivau nije isti tekst ve sadri niz informacija u skladu s HTML jezikom koje govore pretraivau kako dokument treba prikazati. HTML predstavlja dogovor o zajednikom jeziku izmeu autora stranica i pretraivaa - komunikacija i razmjena informacija je mogua iskljuivo ako obadvije strane govore isti jezik. HTML jezik daje nam osnovni skup kodova koje moemo kombinovati na razne naine potujui neka osnovna pravila. Za izradu stranica potrebna je samo jo dovoljno mate da se osnovni kodovi poveu na razliite naine te kao rezultat moe proizii odreena www stranica visokog kvaliteta. Na Internetu povezano je vrlo mnogo razliitih raunara koji koriste razliite unutranje jezike za prikaz podataka. Takoe, www stranice moraju moi itati osim raunara i ljudi. Iz toga razloga je HTML jezik tekstualan. Kodovi HTML jezika su zapravo rijei (esto skraenice engleskog jezika) koje je mogue kombinovati na razne naine.Svaki HTML dokument mora biti otvoren sa ovim tagom <html> a zatvoren sa ovim tagom</html>. Za generisanje HTML stranice potreban je najobiniji tekst editor, na primer Notepad. 2.1 Osnovni elementi HTML-a Sada emo reci neto o tome kako moemo urediti tekst koji se nalazi na naoj internet stranici. Tekst moemo oblikovati i ureivati pomou osnovnih HTML elemenata i stilova, te njihovih atributa. HTML stilski elementi se koriste kada se eli promijeniti grafiki izgled sadranog teksta, a atributi nam slue kao pripomo nekim elementima, koji im pomau da rade potpuno ispravno. Sastoje se od imena i vrijednosti.Neki od elemenata su: 1. Paragraf (<p>) ili odlomak koji predstavlja odreenu logiku cjelinu sadraja. 2. Naslov (od <h1> pa do <h6>) kojeg koristimo kako bismo odvojili i predstavili razliite tematske cjeline dokumenta. h1 je najvia razina naslova a h6 najnia 3. Novi red (<br>) je element koji se koristi prilikom prelaska sadraja u novi red unutar odlomka.

4. Nemogunost 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 proitao. 5. Predformatirani tekst (<pre>) se razlikuje od obinog teksta po tome sto je svaki znak jednake irine. Najee se koristi kada se na internet stranici eli prezentirati dio raunalskog koda ili se ele zadrati 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 omoguuje odreivanje fonta teksta na naoj stranici, a njegovi atributi veliinu i boju tog fonta. Neki od stilova su: 1. Bold (<b>) nam slui kako bi podebljali tekst 2. Italic (<i>) nam slui kako bi ukosili tekst 3. Underline (<u>) nam slui kako bi podcrtali tekst 4. Strike (<s>) nam slui kako bi precrtali tekst 5. Subskript (<sub>) nam slui kako bi tekst stavili na mjesto indeksa 6. Superskript (<sup>) nam slui kako bi tekst stavili na mjesto eksponenta Neki od atributa: 1. Align je atribut nam slui za poravnavanje elemenata nae stranice (tekst, slika, tablica itd) u lijevo, desno ili sredinu, stoga su njegove vrijednosti: left, right, center. 2. Color je atribut nam slui za odreivanje boje naeg fonta. Postoje jo razne varijacije ovog atributa kao sto je npr. bgcolor koji nam slui za odreivanje boje pozadine. 3. Size je atribut koji nam koristi za mijenjanje veliine slova. HTML razlikuje 7 veliina slova koje nose vrijednosti od 1 do 7, ali isto tako veliinu slova moemo izraziti i u pikselima 4. Face je atribut koji nam koristi za odreivanje vrste fonta naeg teksta. .

Primjer 1.

Slika 1. Primjer naina ureivanja teksta Lista je takoer element HTML-a kojim se moe oblikovati tekst, tj. odreivati nain na koji ce on biti prikazan na naoj stranici. Liste smo izdvojili od ostalih elemenata, jer emo o njima reci neto vise nego o ostalim elementima. Lista je odlomak koji sadrava niz elemenata liste. Aktualne su tri vrste lista: brojane, simbolike i definicijske. Mogue ih je ugnjeivati pa su idealno sredstvo za definiranje logike strukture, npr. stablastog izbornika. Kod brojanih lista elementi su oznaeni rednim brojem ili slovima. Za definiranje brojane liste koristi se element <ol> (ordered list), a za definiranje pojedinih elemenata liste koristi se element <li> Elementi simbolike liste oznaeni su kruiima ili nekim drugim simbolima. Za definiranje brojane liste koristi se element <ul> (unordered list), dok se za definiranje pojedinih elemenata liste kao i kod brojane 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).

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 znai 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 moemo koristiti: src - obavezan atribut. Definie putanju do fajla slike. alt - definie tekst koji se prikazuje ako slika iz nekog razloga nije pronaena ili ne moe da se prikae. width - odreuje irinu slike u pikselima ili procentima. Ukoliko parametar nije naveden, slika se prikazuje u svojoj originalnoj irini. height - slino kao gornji atribut, odreuje se visina slike.

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 sadraj svake elije u redu. Za kreiranje tabela koristi se etiketa <TABLE> ... </TABLE> Atributi etikete TABLE zadavanje veliine ivice tabele - BORDER (broj) zadavanje boje ivice tabele - BORDERCOLOR (broj) poloaj tabele unutar prozora (poravnanje) - ALIGN (left, right, center) zadavanje irine tabele - WIDTH (broj piksela ili procenata u odnosu na prozor) podeavanje boje pozadine tabele - BGCOLOR (boja) podeavanje prostora izmeu zida elije i sadraja - CELLPADDING (broj) rastojanje izmeu 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 podeava 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, teinoj liniji zajednikoj za sve elije u redu prikaz sadraja elije bez prelamanja - NOWRAP (broj piksela ili procenata u odnosu na prozor)
9

<TH>...</TH> - elija u tabeli, samo centrirano i bold. Red u tabeli opisuje se etiketom <TR> ... </TR> Atributi BORDERCOLOR, BGCOLOR imaju isto znaenje kao kod elementa TABLE, samo se njihove vrednosti sada odnose na red tabele. Atributi ALIGN, VALIGN imaju znaenje 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 omoguava dvosmjernu komunikaciju te je vrlo jednostavno mogue izraditi komunikacijske sisteme koji su interaktivni te omoguavaju znatan upliv korisnika na tok pristupa podacima. www nije u tome iznimka. Jezik HTML raspolae irokim spektrom mogunosti kojim je mogue postii dvosmjernu komunikaciju s korisnikom, a jedan od najznaajnijih su HTML forme. Pomou HTML formi mogue je u prozoru pretraivaa prikazati formu . Korisnik moe popuniti razne informacije iz formulara te ga poslati natrag posluitelju na obradu. To otvara sasvim nove mogunosti primjene Interneta na stvari kao to su trgovina preko Interneta, pristup velikim bazama podataka i slino. Izrada formi je dosta sloen posao te obuhvaa znatno vie od pukog prikazivanja razliitih polja u HTML stranicama - taj dio posla nije nita sloeniji od primjerice izrade tablica te se obavlja pomou novih elemenata. Da bi se neto stvarno moglo i uiniti s podacima koje korisnik unese u formu, potrebno je izraditi program koji e na posluitelju prihvatiti podatke i obraditi ih te generirati odgovor, to moe biti dosta sloeno.Za to se koriste CGI skripte (CGI - skraenica od Common Gateway Interface) za koje pojednostavljeno moemo rei da su to programi koji se izvravaju na posluitelju (serveru), te su povezani s www stranicama korisnikim pretraivaem. Za izradu CGI skripti treba poznavati neki od programskih jezika koji dotini server prepoznaje kao to je to naprimjer Perl. Na sreu za sve one koji nepoznaju ni jedan programski jezik za izradu skripti gotovo svi hostovi nude i daju na raspolaganje svoje gotve
10

skripte koje moete koristiti za izradu anketa na vaim stranicam, knjige gostiju i slinih stvari. Za izradu mailing lista, foruma i slinih stvari ja se koristim uslugom koji imaju vrlo dobre, jednostavne i besplatne alate te ih od svega srca preporuam. Sve forme se odjeljuju od ostatka HTML stranice unutar form elementa. Unutar njega navodi se tekst forme te razliite kontrole kojima se korisniku omoguava unos podataka. Element form ima dva osnovna atributa kojima se odreuje kako e se podaci na posluitelju 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 oznaava nain kako e se podaci posluitelju poslati, te moe imati vrijednost <b>get</b> i <b>post </b>. Dovoljno je samo rei da se najee koristi metoda post koja omoguava slanje veih koliina podataka posluitelju. Forme se koriste tako da se korisniku prikae niz polja za unos podataka. Postoji vie tipova tih polja: polja za unos teksta, padajui izbornici, liste opcija, odgovori da/ne te gumbi kojima je formular mogue potvrditi ili ponititi. Unos podataka oznaava se pomou input elementa pomou kojeg je mogue na formi prikazati gotovo bilo koji tip polja za unos. Razliiti atributi tog elementa odreuju koje e se polje za unos teksta prikazati te kako element valja prikazati. Osnovni atribut je type koji odreuje tip polja za unos podataka te moe imati jednu od sljedeih vrijednosti: text - unos jedne linije teksta<br> password - unos linije teksta pri emu se znakovi prikazuju kao zvjezdice (obino se koristi za unos lozinke) checkbox - omoguava unos da/ne odgovora radio - omoguava izbor jedne od niza vrijednosti submit - gumb za poiljanje forme posluitelju reset - gumb za brisanje svih elemenata forme na poetnu vrijednost file - kontrola za poiljanje datoteke posluitelju hidden - skrivena kontrola image - kontrola koja prikazuje sliku button - gumb textarea - za unos teksta - komentara, odgovora i sl.

11

Svaka kontrola za unos podataka mora imati ime koje se moe postaviti pomou atributa name. To ime e biti proslijeeno posluitelju na obradu zajedno s podacima koje je korisnik unio u obrazac. Takoer, podrazumijevana, odnosno poetna vrijednost kontrole moe se postaviti pomou atributa value - prikazana vrijednost e jednostavno biti prikazana u kontroli odmah nakon pozivanja odgovarajue www stranice. Element input nema sadraja niti zavrne 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 mogunost da se itanje teksta iz vora 1 nastavi u voru 2. Ovakva hiper-veza se enkodira pomou posebnog taga anchor koji povezuje fragment teksta u voru 1 sa adresom vora 2. Opti izgled taga za anchor je oblika <A atribut> ... </A>. Sintaksa ovog taga podrazumeva da se u voru 1 opiu: fizika pozicija u tom voru sa koje se prelazi na tekst u voru 2 i fizika lokacija na kojoj se nalazi tekst u voru 2. Ove dve pozicije se nazivaju, redom, polazni i dolazni vor. Polazni vor oznaava u tekstu onu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomou atributa HREF: <A HREF= adresa vora 2> pozicija u voru 1 sa koje se prelazi na vor 2 </A> Navigator obino interpretira polazni vor u HTML-dokumentu kao fragment teksta na koji se moe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od boje slova samog teksta.

12

Dolazni vor je ili adresa neke datoteke ili tag koja obeleava deo teksta. Definie se pomou 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 poetak dokumenta u voru 2, a inae na naznaenu poziciju. Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform Resource Locator), koji omoguava da se precizno imenuje adresa vora 2, ma gde on bio fiziki lociran. U opisivanju adrese koja upuuje na vor 2 razlikujemo vie sluajeva 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 moe pristupiti nekom drugom djelu iste te stranice u kojoj se link i nalazi. Primer moe biti da se na kraju stranice napravi link koji korisnika koji ga aktivira vraa na vrh stranice: o u polaznom tekstu se navodi tag (polazni vor): <A HREF="#adresa"> tekst na koji se moe "kliknuti" </A> o u dolaznom tekstu se navodi tag (dolazni vor): <A NAME= "adresa"> dolazni tekst </A> Za definisanje svih ovih linkova zajedniko 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 preemo kad kliknemo na odgovarajui link. Oznaka se dobija stavljanjem atributa name u <a> tag. Primjer: <a name="kraj"></a> Izmedju poetnog <a name="kraj"> i zavrnog </a> taga moe stajati bilo koji element prezentacije (tekst, slika), a ne mora stajati nijedan element, kao to je sluaj u prethodnom primeru. Ovaj tag ne proizvodi nikakav vidljiv efekat u HTML dokumentu - on deluje u pozadini dokumenta i slui browseru da se lake orijentie.

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 miem 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 naputa se tekua stranica i dalje izvravanje se nastavlja na nekoj drugoj stranici tekue prezentacije. To se postie 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 miem 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 odreenog mesta u toj stranici onda bismo na to mesto prvo morali postaviti oznaku sa name atributom kao to je uraeno u prethodnom sluaju. 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). Znai ako je pozicija vora 2 u nekom dokumentu izvan onog dokumenta koji sadri vor 1, ali se obe nalaze na istom serveru, onda se adresiranje vri navoenjem relevantnog dela puta koji je potreban da bi se iz vora 1 definisao put do vora 2. Treu vrstu bi inili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja moe biti postavljena na raunaru koji se nalazi na nekom sasvim drugom serveru. Da bi se pristupilo toj prezentaciji potrebno je navesti cjelu web adresu te prezentacije.
14

Opti 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 miem klikne na njega u browseru e se pojaviti poetna stranica prezentacije Fakulteta poslovne informatike. Pored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanje nove mail poruke pomou default programa za elektronsku potu - najvie korieni 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 poalje. Da bi se poslala poruka na mail adresu ime.prezime@unvi.edu.ba potrebno je u okviru stranice navesti sljedei tekst: <a href="mailto: ime.prezime@unvi.edu.ba "> Poaljite e-mail poruku! </a>

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

DOM, ili Document Object Model (objektni model dokumenta) je vieplatformskoaplikacijsko programsko suelje ili API za valjane HTML i XML dokumente, neovisno oprogramskom jeziku. DOM definira logiku strukturu dokumenta i nain na koji se dokumentupristupa i manipulira s njim. Uz pomo DOM-a, programeri mogu stvarati nove dokumente, kretati se kroz njih te dodavati,aurirati ili brisati sadraj dokumenta. DOM prua strukturirani prikaz dokumenta te omoguavapromjenu njegovog sadraja i vizualnog izgleda uz pomo nekog od jezika za skriptiranje (npr.Javascript). Ukratko reeno, svemu to se nalazi na HTML ili XML dokumentu, uz neke iznimke, moe 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 suelja 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 odreenom tipu dokumenta. On objanjava 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 neu govoriti o Core DOM-u nego u sevie bazirati na HTML i u manjem obimu na XML DOM

3.2 HTML DOM HTML DOM je programski API za HTML dokumente. To znai da on omoguava programski pristup i manipulaciju sadraja web stranice ili dokumenta. Uzmimo slijedei HTML kod kao primjer:

Slika 3. HTML primjer

Korijenski ili glavni vor u ovom primjeru je <html>. Svi ostali vorovi dokumenta su smjeteni unutar <html>. Takoer, <html> ima dva vora djeteta. To su <head> i <body>. Svaki od njih takoer 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 meusobno povezani na hijerarhijski nain. Postoji glavni vor koji je na vrhu, ispod njega se nalaze njegovi vorovi - djeca. Svako njegovo dijete moe imati jo djece te se na taj nain stvara hijerar hija. Na slici 4 je prikazana stablasta struktura HTML dokumenta iz slike 3 na nain kako nju vidi HTML DOM.

16

Slika 4. Stablo vora Neka od pravila stvaranja stabla vorova su slijedea: vor koji se nalazi na samom vrhu se naziva korijen (korijenski element) svaki vor (osim korijenskog) ima tono jednog roditelja svaki vor moe imati proizvoljan broj djece list je vor bez djece

U DOM- u, HTML dokument se sastoji od skupa objekata, tj. vorova. Kada kaemo da je DOM ustvari API (aplikacijsko programsko suelje) za HTML i XML ustvari mislimo na to da DOM, u sutini, spaja web stranice, odnosno objekte koji se na njima nalaze, sa skriptama ili programskim jezicima. Upravo radi toga se DO M najee koristi u kombinaciji sa JavaScriptom. To znai da je kod napisan u JavaScriptu ali koristi DOM kako bi pristupio web stranici i njenim elementima. Programsko suelje 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
17

A neke od metoda koje se najee korist e su: x.getElementById( id) dohvaa element sa od ree nim id- jem x.getElementsByTagName(name) dohvaa sve elemente sa odreenim tag- om

Iako je najee koriten ukombinaciji s JavaScriptom, DOM je dizajniran na nain da bude neovisan o nekom odreenom programskom jeziku. U ovom seminarskom radu u se fokusirati na koritenje DOM- a u kombinaciji s javascriptom, ali mogue su implementacije DOM- a i za mnoge druge programske jezike. Kako se koriste DOM svojstva i metode u praksi pokazuju slijedei primjeri.

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

Slika 6. Rezultat koda sa slike 5

Modificirali smo poetni HTML kod (slika

3) i dodali odreene funkcionalnosti, npr.

paragrafu smo dodali atribut id i nazvali smo ga par. Zatim smo uz pomo javaScripta i DOM metode getElementById() pretraili HTML dokument kako bi pronali onaj element u
18

kodu iji id odgovara zadanome te njegov sadraj, uz pomo svojstva innerHTML, pripisali varijabli txt. Nakon toga smo jednostavno ispisali vrijednost varijable txt na zaslon pomou metode write. txt=document.getElementById("par").innerHTML; document.write("Tekst koji se nalazi u paragrafu: " + txt); U drugom primjeru se koristi metoda getElementsByTagName() koja dohvaa sve element e koji imaju odreeni tag. Tako dohvaeni elementi spremau se u polje, i svakom lanu se moe pristupiti pomou njegovog rednog broja (0 tekst koji sadre dohvaeni tagovi. n). Naposlijetku, u primjeru se ispisuje sav

Slika 7. Kombinacija DOM-a i JavaScripta (2) Postoje etiri <p> taga. Koritenjem metode getElementsByTagName() oni se spremaju u varijablu txt koja postaje niz od 4 elementa. Prolaskom kroz for petlju se ispisuje tekst sadran unutar svakog dohvaenog elementa.

19

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 rjeima : 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 slijedea: 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 slijedeem primjeru se mogu vidjeti XML elementi i njihovi atributi:

20

Slika 9. XML kod Korijenski vor u XML- u sa slike 9 je <bookstore>. Svi ostali vorovi se nalaze unutar njega. Korijenski vor sadri 2 <book> vora od kojih svaki sadri jo neke vorove. Tako npr. prvi <book> vor sadri vorove <title>, <author>, <year> <i> i <price>. Svaki od tih vorova sa najnie razine sadri tekstualni vor. XML datoteke se , kao i HTML, mogu prikazati uz pomo DOM stabla prethodni primjer bi stablo izgledalo otprilike ovako (slika 10) : vorova. Za

21

Slika 10. XML stablo vorova1 XML DOM, isto kao i HTML sadri odreene metode kojima pristupa elementima XML dokumenta. Te metode su prilino s line metodama HTML DOM- a, a neke od njih su: getElementsByTagName(name) pronalazi sve elemente sa odreenim tag- om appendChild(node ) ubacuje dijete voru x removeChild(node) uklanja dijete od vora x elemenata XML DOM- a koji olakavaju

Takoer, postoje i svojstva (properties)

modifikaciju i upravljanje sadrajem. Neka od nejee koritenih 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 sadri

Koritenje XML doma ima velikih slinosti sa HTML DOM- om, npr. txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; nam daje vrijednost sadranu u prvom <title> tagu XML dokumenta koistei standardnu DOM metodu getElementsByTagName() kao i neka od DOM svojstava: childNodes 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 lake razumjeti i proitati. Tu takoer uskae DOM. Parsiranje se odvija na nain 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, briu se ili se pristupa ve postojeima. Veina browsera ima ve ugraen XML parser za itanje i manipulaciju XML- om. i

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

22

4. ZALJUAK
Zbog svoje jednostavnosti, upotreba HTML za kreiranje web stranica je sve vea i vea. Potrebno je samo savladati neka bitna pravila, te uz pomo mate kreirati raznolike i zanimljive web stranice. Rad s HTML-om je jedan od primjera gdje se na zanimljiv nain moe nauiti neto novo. HTML DOM je jedan od tri dijela DOM standarda kojeg je razvio W3C konzorcij. On predstavlja html dokumente kao hijerarhijsku stablastu strukturu, a omoguava pristup i kontrolu svih html elemenata na web stranici te kreiranje dinamikih web stranica. Najvea prednost HTML DOM-a je pravo stablasta struktura koja omoguava lagan pristup elementima te laku validaciju. No, poprilino velik nedostatak mu je to se ne moe obraditi u ovom modelu ako cijeli dokument nije uitan.

23

LITERATURA
Skripta: 1. Boko 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)

24