World Wide Web -WEB

Osnovni WEB – svjetska kompjutreska mreža
World Wide Web (Web) je svjetska mreža raćunara s izvorima (engl.
resources) digitalne informacije. S obzirom na raznolikost digitalne
informacije: tekst, slika, zvuk, video, program i dr.
govorimo općenito o izvoru informacije ili WEB dokumentu. WEB
programiranje se oslanja na tri mehanizma koja čine ove izvore
dostupnima najširoj javnosti:
- tagovi za uređivanje teksta,
- umetanje poveznica,
- tabele i okvira

1

Mreza racunara

2

WEB PROGRAMIRANJE WEB programiranje se oslanja na tri mehanizma: 1. Hipertekst (engl. Hypertext) za jednostavnu navigaciju između informacijskih izvora. kao što je na primjer HTML (hypertext markup language). Jedinstvena shema imena za traženje (lociranje) izvora na mreži.skup standardizirane informacije za prijenos digitalnog sadržaja preko mreže. 3. 2. HTTP protokol. kao što je npr. Protokoli za pristup informaciji preko WEB-a. 3 . Protokoli su .

Protokola pristupa izvoru (npr. URL se sastoji od tri dijela: 1. 3. path). slika.WEB Svaki izvor informacije na WEB-u (HTML ili XML dokument.ba). www. mailto i sl.) 2. ftp. program i sl.) ima jednoznačnu adresu koja se dekodira preko URI-a (Universal Resource Identifier). vido.mat. http. Punog imena izvora zadanog stazom (engl. Imena racunara na kojem se izvor informacije nalazi (npr. 4 .

html Primjer 5 .edu.edu.ba /iw/index.ba Web server se preusmjerava na glavnu stranicu Web sajta Dio za ime fajla može da sadrži putanju do direktorijuma.edu.htm Protokol Host Ime fajla: relativna putanja + ime samog fajla Dio za ime fajla može biti izostavljen: http:// matfk.URL http://matfk.edu. ali ne i samo ime fajla http:// matfk.ba/iw/iw.ba /iw/ Web server se preusmjerava na podrazumjevani fajl u tom direktorijumu http:// matfk.

Osnove HTML-a Osnovni tagovi za uređivanje teksta. tablica i okvira 6 . umetanje poveznica.

HTML ipak nije jezik (u smislu programskih jezika) HTML = Text + Hiperveze + Formatiranje (Formatirani tekst sa ubačenim hipervezama) 7 . Markup . Hyper Text -Dokument koji sadrži pokazivače (hiperveze) na druge dokumente.HTML HTML = Hyper Text Markup Language.Definiše način formatiranja (prikazivanja) teksta Language .

.......... npr.početak i kraj zaglavlja dokumenta sintaksa (opći oblik pisanja nekog taga je sljedeći): <ključna_riječ atribut1=“vrijednost1” atribut2=“vrijednost2” ...> Npr... <HEAD> . </HEAD> .. <table border=“0” width=“50” cellspacing=“1”> Ključna riječ atribut tag-a vrijednost tag-a atributa 8 .....HTML HyperText Markup Language (HTML) je opisni jezik za izradu web stranica HTML određuje način prikaza pojedinih dijelova dokumenta pomoću umetnutih oznaka (tag-ova) koje razumije web preglednik i prikazuje dokument korisniku Neka pravila HTML-a su: većina tag-ova ima početak i kraj djelovanja...

. </NAME> nije osjetljiv na velika i mala slova pretpostavlja neki definirani skup tag-ova (DTD – Document Type Definition) Standardi: HTML 1.2.. </HEAD> tijelo stranice:<BODY> .. nego samo služi za preglednost kreatoru stranice početak i kraj dokumenta mora imati tagove: <HTML>. 2. 4.... 9 ..0... 3....Neka pravila HTML-a umetanje praznih redova i mjesta bez posebne oznake ne vidi se u prikazu dokumenta..0.0..... ...0... 3. </BODY> dijelovi tijela stranice <NAME> ... </HTML> glavna struktura dokumenta: zaglavlje: <HEAD> .

sa pokazivacima na druge dokumente </ISINDEX> <LINK> pokazuje vezu između ovog dokumenta i nekog objekta na WEB-u </LINK> <META> daje informacije o stranici. </BASE> <ISINDEX> javlja browser-u da je dokument indeksni. uzorcima stilova </STYLE> </HEAD> <BODY> tijelo dokumenta s informacijom </BODY> </HTML> 10 . kao što su ključne riječi </META> <SCRIPT> sadrži Java ili VB skripte </SCRIPT> <STYLE> sadrži informaciju koja se koristi u CSS-u.Opšti oblik HTML dokumenta <HTML> <HEAD> zaglavlje koje može imati nekoliko podelemenata tipa: <TITLE> naslov dokumenta </TITLE> <BASE> osnovna adresa preko koje se rješava relativna. potrebna je ako se dokument ne nalazi na originalnoj lokaciji.

</BODY> </HTML> Primjer 11 .Primjer minimalnog HTML dokumenta <HTML> <HEAD> <TITLE>Ovdje je naslov stranice koji će se vidjeti u title bar-u preglednika</TITLE> </HEAD> <BODY>Ovdje se upisuje sadržaj stranice koji je vidljiv korisniku.

.. browser-a). </center> boja pozadine: <BODY BGCOLOR="#00000“> ili <BODY BGCOLOR=“black”> Primjer formatiranja teksta Skup imena boja podržana je od većine preglednika (engl. black. </U> za centriranje teksta u retku: <center> . red. purple. lime..Neki osnovni tagovi za uređivanje teksta prelom reda: <BR> i odjeljka: <P> . … <H6> font slova: <font size="2" face="Arial"> …. <H2>. teal. Samo 16 imena boja podržano je sa W3C HTML 4. kurziv: <I> ...0 standardom (aqua. olive. green.. Za heksadecimalne vrijednost boja pogledati pomoćni materijal: Primjer boja. and yellow).. 12 . blue. potrebno je koristiti vrijednost HEX boja polja. </I>. gray.. fuchsia. maroon. white. navy. podvučena: <U> . silver.</P> veličina slova: <H1>. Za sve ostale boje. </font> stil slova: podebljana: <B> … </B> ili <STRONG> … </STRONG> )..

<ol> 1.Tagovi za liste (nabrajanja) Naziv liste Primjer liste Rezultat prikaza Uredjene Moji prioriteti: Moji prioriteti: (numerisana) lista. fakultet <li>fakultet </ol> Neuredjene Moji prioriteti: Moji prioriteti: (nenumerisana) lista. unordered list <li>fakultet • društvo <li>društvo </ul> Primjer Lista 13 . <ul> • fakultet eng. prijatelji eng. ordered list <li>prijatelji 2.

novi paragraf: skok u novi red sa stanovitim razmakom. .Umetanje praznih mjesta U HTML-u svako prazno mjesto (osim razmaka između riječi) treba definisati na jedan od sljedećih načina: <BR> .jedno prazno mjesto U slučaju kada se koriste liste. 14 . &nbsp. automatski se svaki element liste označen s <li> smješta u novi red.skok u novi red <P> .

Umetanje slika u dokument <IMG SRC="slika1.jpg formatu.umeće sliku iz datoteke slika1. bolje je sliku prethodno obraditi u nekom od programa za obradu slika na željenu veličinu). .gif" WIDTH=90 HEIGHT=62 alt=“opis_slike”> .gif. te animirane slike i video materijal. U html dokument se mogu umetati slike u .gif prema specificiranoj širini i visini (ovakva dimenzija slike se ne preporućuje. Primjer Slika 15 .

16 .postavlja sliku kao pozadinu.Umetanje linija i ploha Umetanje vodoravne linije: <HR WIDTH=60% SIZE=3 ALIGN=LEFT NOSHADE> Umeće liniju koja će zauzimati 60% širine stranice. <CENTER><IMG SRC="tacka. debljine 3 tačke.gif”> . bez sjenčanja Umetanje okomite linije može se dobiti produžavanjem jedne tačke kroz više redova.gif" WIDTH=2 HEIGHT=200></CENTER> Umetanje plohe može se dobiti ponavljanjem slike u tagu za pozadinu: <body background=“slika1. poravnato lijevo.

anchor. 17 . tj.. sidro.Umetanje veza(linka) u HTML Za umetanje linkova koristi se tag: <A> . </A> A je kratica od eng. a označava veze između dva dijela istog dokumenta ili dva različita dokumenta...

</a> npr.Postavljanje sidra Ako želimo na dio dokumenta postaviti sidro.. npr. <a name=“vrh”> </a> Iz nekog drugog dijela dokumenta sada možemo postaviti poveznicu (“baciti sidro”) na prethodno definirano mjesto.. tada u tom drugom dijelu pišemo: <a href=“naziv_dokumenta. naziv dokumenta se može i izostaviti.. <a href=“#vrh”>Idi na vrh stranice</a> 18 .html#dio_dokumenta” > link na koji kliknemo</a> Ako se radi o istom dokumentu u kojem se nalazimo. tada taj dio treba nazvati nekim imenom s pomoću taga: <a name=“dio_dokumenta”> .

npr.html”> – na adresu nekog izvora na webu: <a href=“http://www.ba"> Posaljite e-mail poruku! </a> Primjer linka 19 .ba”> na e-mail pomocu atributa mailto <a href="mailto: ndukic@pmf.: <a href=“nova.unsa.html#dio1”> (prije toga taj dio stranice mora biti označen s: <a name=“dio1”>.Vrste linkova – na dio dokumenta..</a> – na dokument koji je na serveru <a href=“nova.unsa.pmf.

..x2............"> ..y1...x2........y1.......gif" USEMAP="#prvamapa"> <IMG SRC="....../slike/slika2..y2.html#mapa2"> Mapa se opisuje pomoću taga <MAP> .........gif" USEMAP="mapa..y2....... </MAP> OBLIK UPOTREBE: <MAP NAME="ime_mape_iz_USEMAP"> <AREA SHAPE="oblik podrucja 1" HREF="URL koji se poziva" COORDS="x1.Mapiranje slike Oblik upotrebe: <IMG SRC="URL slike" USEMAP="#ime mape"> . Atribut USEMAP taga IMG ukazuje da se radi o mapiranju na strani klijenta.. ..... <AREA SHAPE="oblik podrucja 2" NOHREF COORDS="x1......... a vrijednost koja se dodijeljuje atributu USEMAP određuje koja će se mapa koristiti za mapiranje Na primjer: <IMG SRC="slika...."> </MAP> Atribut NOHREF ukazuje da izbor tog područja neće prouzrokovati neku akciju 20 ... .

pravougaono područje na slici (kao COORDS vrijednosti se navode koordinate gornjeg lijevog i donjeg desnog ugla pravougaonika u pikselima) CIRCLE-kružnog područje na slici (kao COORDS vrijednosti se navode kordinate centra i poluprečnik u pikselima) POLY za područje mnogougaonog oblika (kao COORDS vrijednosti se koordinate tjemena poligonalne linije u pikselima.spisak koordinata koje se redom povezuju.Mapiranje slika Atribut oblika područja slike (SHAPE) može imati vrednosti: RECT. Paint). Koordinate zone se mogu odrediti pomocu nekog programa za obradu slike (npr. a poslednji par koordinata se povezuje sa prvim).podrazumijevano područje koje nema koordinate i koristi se samo jednom na slici za područje koje obuhvata koordinate koje ne pripadaju nijednom od već definisanih područja 21 . DEFAULT.

Svaki od njih treba imati svoj početak i kraj. širina i sl. kao što su veličina.(engl. pa red. 22 . s različitim atributima.Umetanje tablica Tablice se vrlo često koriste u web stranicama. a njihovi osnovni tagovi su: <TABLE> . <TR> . a ovi tagovi moraju slijediti hijerarhiju poretka (najprije se tablica. TableData) definiše pojedinačni blok ili ćeliju (engl. pa ćelije unutar reda). <TD> . okvir.glavni tag.(engl TableRow) definiše horizontalni red od <TD> ćelija. cell) u redu tablice. Tekst (odnosni podaci koji će se vidjeti na stranici) upisuju se samo u ćelije tablice.

nastavak Primjer tablice sa jednim redom i dvije kolone: <table> <tr> <td> ovdje tekst prve ćelije prve kolone</td> <td> ovdje tekst prve ćelije drugog stupca </td> </tr> </table> 23 .Umetanje tablica .

Atributi u tablicama Tagovi za tablice mogu imati atribute koji određuju izgled tablice.određuje okvir tablice debljine 1 tačku width = “100” height=“75” – određuje širinu i visinu tablice align=“center” – određuje horizontalno poravnavanje teksta koje može biti: center. bottom cellspacing=“1” – određuje razmak teksta ćelije od ruba cellpadding=“1” – određuje udaljenost između ćelija u tablici Rowspan=2 – povezuje više ćelija u redu u jednu ćeliju (broj označava koliko ćelija se spaja) Colspan=2 – povezuje više ćelija u stupcu u jednu 24 . npr. middle. right valign=“top” – određuje vertikalno poravnavanje teksta koje može biti: top. left. border=“1” .

Primjer tablice <table border=1 width=500 height=200 cellspacing=2 cellpadding=2> <tr> <td align="center" bgcolor="FFFFCC">Prva ćelija</td> <td align="center">Druga ćelija</td> </tr> <tr> <td align="center" valign=middle bgcolor="red">Treća ćelija</td> <td align=center>Četvrta ćelija</td> </tr> </table> Izgledat će ovako: Primjer za tablicu 25 .

a zatim povezivanje u jednu stranicu.50%"> <FRAME SRC="prvi. Primjer: <FRAMESET COLS="50%. dijelova. 26 .Upotreba okvira (frame-ova) Ukoliko cijelu stranicu želimo podijeliti na više stupaca ili redova ili dr.html"> <FRAME SRC="drugi. Okviri su pogodni kod odvajanja izbornika i zaglavlja od središnjeg dijela stranice. u prvom se prikazuje datoteka prvi.html"> </FRAMESET> će podijeliti stranicu na dva stupca jednake širine. a u drugom drugi.html. Okviri omogućuju odvojeno pohranjivanje pojedinih dijelova stranice.html. moguće je tablice proširiti upotrebom okvira (frame-ova).

npr.*"> <FRAME SRC="gore.html" NAME="vrh"> <FRAMESET COLS="160.Upotreba okvira .html" NAME="glavni"> </FRAMESET> </FRAMESET> Primjer Okvira Primjer1Okvira 27 . prva će biti širine 50 tačaka. zatim lijevi dio za izbornik i desni dio za središnji dio stranice.*"> će podijeliti stranicu .html" NAME="lijevi"> <FRAME SRC="desni. <FRAMESET COLS="50. a druga će zauzimati preostali dio zaslona (bez obzira na rezoluciju koja se koristi) Obično se koriste okviri na način da se posebno odvoji zaglavlje.nastavak Vrijednosti širine stupaca mogu se i relativno odrediti. Primjer: <FRAMESET ROWS="60.*"> <FRAME SRC="lijevo.

nego samo u jednoj (dio.pri promjeni nekog dijela stranice ne treba mijenjati taj dio u svakoj stranici.html) preglednost stranice Nedostaci: Otežan ispis stranice (svaki dio je posebna stranica). pa autor stranice treba posebno napraviti oblik pogodan za ispis i staviti link na njega 28 .Prednosti i nedostaci upotrebe okvira Prednosti: lakše ažuriranje stranica .