programiranje grafičkih aplikacija

8/13/2019 Programiranje grafičkih aplikacija

1/224


2/224

Doc. dr Boško Nikolić

PROGRAMIRANJE GRAFIKIHAPLIKACIJA

- 2. dopunjeno izdanje -

Beograd, 2008.


3/224

PROGRAMIRANJE GRAFIKIH APLIKACIJA- 2. dopunjeno izdanje -

Autor:Doc. dr Boško Nikolić

Recenzenti:Prof. dr Milan MilosavljevićProf. dr Mladen Veinović

Izdava:UNIVERZITET SINGIDUNUM

Beograd, Danijelova 32

Za izdavaa:Prof. dr Milovan Stanišić

Tehnika obrada: Njeguš Novak

Dizajn korica:Aleksandar Mihajlović

Godina izdanja:2008.

Tiraž:150 primeraka

Štampa:Čugura print, Beogradwww.cugura.co.yu

ISBN:


4/224

III

Predgovor

Sadržinom i konceptom udžbenik Programiranje gračkih aplikacija prilagođen je nastavnom planu i programu istoimenog predmeta, koji se

izučava na IV godini Fakulteta za Informatiku i Menadžmenta, smera zaračunarsku graku i dizajn.

Drugi predmeti sa ovog smera predstavljaju studentima osnovekorišćenja multimedijalnih elemenata i principe dizajna softverskih modula.Zato je cilj ovog predmeta da se studenti upoznaju sa tehnikama programi-ranja koje će im omogućiti korišćenje dosadašnjeg znanja radi realizacijesavremene gračke aplikacije.

Gračke aplikacije imaju široku primenu, pa je odabrana oblast Inter-neta, kao trenutno najaktuelnija i najtraženija, za demonstriranje načina pro-gramiranja ovakve vrste aplikacija. Nakon položenog ispita studenti će biti umogućnosti da reše i najsloženije zahteve programiranja klijentskih stranamrežnih aplikacija.

U prvom delu udžbenika detaljno se razmatraju osnovne mogućnosti programskog jezika HTML, jezika koji predstavlja standard za realizaciju

Internet dokumenata. Na kraju ovog dela razmatraju se napredne i savremenetehnike HTML programiranja, kao što je CSS (Cascading Style Sheets).

Drugi deo udžbenika obuhvata programski jezik JavaScript, trenutnonajpopularniji i najkorišćeniji skript jezik klijentskog dela Internet aplikacija.Ovaj jezik omogućava realizaciju i dinamičkih HTML strana.

Pored teorijskih razmatranja navedenih programskih jezika udžbenik

sadrži i veliki broj praktičnih primera.U okviru drugog izdanja knjige ispravljene su uočene greške iz prvog

izdanja i dodat je novi Prilog sa karakterističnim ispitnim zadacima iz pre-thodnog perioda.

Autor


5/224

IV


6/224

V

SADRŽAJ

l. HTML - Uvod .......................................................................................... 1Primeri za rad u laboratoriji .............................................................. 9

2. FORMATIRANJE TEKSTA .................................................................. 11Primeri za rad u laboratoriji ............................................................ 19

3. LISTE ..................................................................................................... 23Primeri za rad u laboratoriji ............................................................ 28

4. BOJE I SLIKE........................................................................................ 33Primeri za rad u laboratoriji ............................................................ 42

5. LINKOVI ............................................................................................... 45Primeri za rad u laboratoriji .............................................................51

6. TABELE ................................................................................................ 55Primeri za rad u laboratoriji ............................................................ 66

7. FREJMOVI............................................................................................ 71Primeri za rad u laboratoriji .............................................................778. ZVUK I FILM......................................................................................... 859. FORME I ELEMINTI FORME ............................................................. 89

Primeri za rad u laboratoriji ...........................................................96Zadaci za samostalni rad ............................................................... 102

10. CSS (Cascading Style Sheets)............................................................ 105Primeri za rad u laboratoriji ...........................................................117

11. Java Script - UVOD........................................................................... 12512. OSNOVE JavaScript JEZIKA........................................................... 12913. OPERATORI....................................................................................... 13314. KONTROLE TOKA........................................................................... 14115. OBJEKTI Date i String........................................................................ 149

Primeri za rad u laboratoriji ......................................................... 15416. RAD SA UZORCIMA (Pattern Matching)..........................................16117. JavaScript I FORME........................................................................... 169

Primeri za rad u laboratoriji .......................................................... 18318. RAD SA VISE PROZORA................................................................. 18719. PISANJE I ČITANJE COOKIE-IJA.................................................. 194

Primeri za rad u laboratoriji ......................................................... 196

LITERATURA.................................................................................... 199PRILOG 1............................................................................................ 200PRILOG 2............................................................................................ 203PRILOG 3........................................................................................... 208PRILOG 4........................................................................................... 210PRILOG 5........................................................................................... 211


7/224

VI


8/224

HTML - uvod

1

1. HTML - UVOD

Kada se postavi pitanje kako definisati pojam Interneta i ljudi koji sunajzaslužniji za njegov razvoj daju razliite odgovore. Jedan od tihodgovora je da je to mreža svih mreža, koja povezuje univerzitetske,državne i privatne raunare zajedno, i predstavlja infrastrukturu zakorišenje elektronske pošte, fajl arhiva, hipertekst dokumenata, baza

podataka i ostalih resursa. Veliki skup raunarskih mreža koje postoje ideluju zajedno za prenos podataka i poruka na daljinu i raunare, koji mogu

biti u susednoj kancelariji ili na bilo kom mestu u svetu.Drugi odgovor je da je to najvea mreža na svetu koja koristi TCP/IP

protokole i paketnu razmenu i izvršava se pomou bilo koje komunikacione podloge.Bez obzira na definiciju koja se koristi može se zakljuiti da je Internet

promenio nain života, razmišljanja i poslovanja. O razvoju i mogunostimaInterneta mogu poslužiti i sledei podaci koji govore o rastu broja servera(host raunara) tokom godina:

1977: 111 host raunara 1981: 213 host raunara 1983: 562 host raunara 1984: 1,000 host raunara 1986: 5,000 host raunara 1987: 10,000 host raunara 1989: 100,000 host raunara 1992: 1,000,000 host raunara 2001: 150 – 175 miliona host raunara

2002: preko 200 miliona host raunara Do 2010, po procenama strunjaka preko 80% planete e biti

povezana preko InternetaU septembru 2002. god. Internet je premašio dve važne brojke: 200 milionahost raunara i 840 miliona korisnika.Ovakav nagli razvoj jedne tehnologije do sada nije zabeležen. Takavzakljuak namee i poreenje sa slinim tehnologijama koje se masovnoupotrebljavaju, kao što su radio i televizija. Tržište od 50 miliona korisnika

radio je dostigao posle 38 godina upotrebe, televiziji je trebalo 13 godina, aInternet je, od trenutka kada je postao javan servis, tu cifru dostigao za samo4 godine.


9/224

HTML - uvod

2

Masovnu popularnost Internet duguje mnogim prednostima izvršavanjaaplikacija preko ovakvog medijuma. Osnovne prednosti su jednostavnostkorišenja, globalan pristup, sve je dostupno na klik miša, aplikacije su

platformski neutralne i dobija se isti izgled za veinu korisnika, jednostavna je upotreba interaktivnosti sa korisnikom, kao i nadogradnja postojeih

verzija i jeftina distribucija.Takoe, Internet još uvek nije savršen i postoje odreeni nedostaci priizvršavanja aplikacija na ovaj nain, kao što su limit veza (posebno ako je u

pitanju modemski pristup), sporost mreža, HTML je primitivan jezik, jer jeu suštini jezik za opis stranica, interaktivnost je još uvek limitirana, posebnoako se uporedi sa drugim medijima, poput CD ili DVD medijuma, postoji

još uvek nerešen problem intelektualne svojine i copyright-a.Trenutno, podaci se putem Interneta prenose pomou TCP/IP protokola,

podeljeni u male pakete (chunks) veliine do 1.5K. Svaki paket ima svoju putanju, u zavisnosti od trenutnog saobraaja. Poruka se sastavlja u krajnjojtaki putanje, pri emu se eventualno izgubljeni paketi mogu ponovo tražitii ponovo poslati. Treba naglasiti da Internet i TCP/IP protokol nisu

projektovani sa multimedijalnim elementima kao zahtevima dizajna.Multimedijalni podaci se šalju u vidu kontinualnog niza i generišu velikisaobraaj. Takoe, multimedijalni podaci bi trebali da stignu u redosledukako su i poslati, a sam TCP/IP ne garantuje takav poredak. Rad samultimedijalnim podacima ne trpi ekanje na pakete koji nedostaju, pa jegubitak sinhronizacije kritian momenat (zvuk i slika do 80ms).Put do savremenog Interneta nije bio jednostavan i bilo je potrebno rešitimnoge izazove, kao što su: pronalazak digitalnih mreža, u današnjemobliku, razvoj infrastrukure za slanje i primanje elektronskih porukazadovoljavajuom brzinom i mogunosti razmenjivanja poruka izmeuraunara.

Pored TCP/IP protokola popularnosti Interneta je veoma doprineo i HTML(HyperText Markup Language), jednostavan jezik koji služi za izvršavanje programa na daljinu. Danas, ovaj jezik predstavlja standard za Internetdokumente. Njegove osnovne osobine su da je to platformski neutralan

jezik, pomou koga se specificira odreeni sadržaj, koristei logike oznake(markup), izvršava se i prikazuje pomou Web itaa.HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u odreenomdirektorijumu servera vezanog na ovu mrežu, što ih ini dostupnim putem

Interneta.


10/224

HTML - uvod

3

Sa razvojem Interneta došlo je do pojave nove vrste dokumenata -hiperteksta. To je tekst koji sadrži veze ili linkove ka drugim dokumentimaili na samog sebe. Preciznije, hipertekst je skup stranica u obliku datoteka,meusobno povezanih linkovima koje su umetnute u stranice. Na ovelinkove se može kliknuti. Za razliku od obinog teksta, koji se ita linearno

(sleva na desno, odozgo naniže), hipertekst se ita pratei hiper-veze utekstu, dakle, ne nužno na linearan nain.Pored samog HTMLa, postoji vei broj jezika koji omoguavaju da se

precizno opiše izgled i sadržaj jednog teksta. Od posebnog su znaaja: SGML (skr. od Standard General Markup Language), TeX i LaTeX (za matematike tekstove), PostScript (jezik koji se koristi pri korišenju laserskih štampaa), RTF (skr. od Rich Text Format ), ...

Takoe, postoji i više jezika koji se bave samim opisom hiperteksta, Meunjima naznaajniji su:

SGML, XHTML (skr. od Expandable HTML) i XML (skr. od Extensible Markup Language, prelaz izmeu

preterane složenosti SGML-a i jednostavnosti HTML-a; njegova

standardizacija je u toku)

Za generisanje HTML stranice potreban je najobiniji tekst editor, na primer Notepad. Ovaj program se u okviru Windows operativnog sistema, nalazi uStart meniju pod Programs->Accessories. Osnovno korišenje ovog

programa je opisano u Prilogu 1.Za pisanje HTML programa mogu se koristiti i specijalni alati, na primerFront Page ili Dreamviewer. Stranica se može videti u okviru Web browser-

a, kao što su Netscape Navigator, Internet Explorer, Opera ili Mozilla.

TagHTML komande se pišu u vidu tagova. Jedan tag je u suštini komanda kojagovori itau kako i na koji nain da prikaže sadržaj opisane stranice.Tagovi se pišu unutar oznaka "" (bez znakova navoda) npr:

Ovaj tag se nalazi na poetku svakog HTML dokumenta


11/224

HTML - uvod

4

govori browseru da je fajl koji je upravo poeo da uitava HTMLdokument i da kao takvog treba i da ga prikaže. Veina tagova ima i poetnii završni tag. Završni tag se dobija dodavanjem znaka "/" i oznaava mestona kom prestaje dejstvo poetnog taga. Tako se na kraj HTML dokumenta

piše završni HTML tag: i ovaj tag govori browseru da je to kraj

HTML dokumenta.HTML tagovi su "case insensitive" tj. svejedno je da li se pišu malim ilivelikim slovima, pa je isto znaenje prethodnog taga, kao i sledeeg

U opštem sluaju tagove možemo podeliti u sledee grupe: prosti tagovi se koriste za opisivanje jednostavnih elemenata logike

strukture. Oblika su: složeni tagovi su zagrade oblika tekst kojima je opisan

izgled dela teksta tekst . atributi u okviru taga: tekst koji pružaju

dodatne informacije dela teksta tekst

Naredna tabela prezentuje listu svih tagova koji se mogu koristiti u okviru

HTML stranice. U okviru ovog teksta se objašnjavati sintaksa i primenaonih tagova koji se naješe koriste u praktinim realizacijama.

Ime taga Opis taga

A Link ACRONYM ADDRESS Informacija o autoru APPLET Java aplet

AREA Na klijentskoj strani prostor za sliku u obliku mapeB Boldovan tekstBASE Osnovni URI za dokumentBASEFONT Osnovni veliina fontaBIG Tekst stilBLOCKQUOTE

long quotation

BODY Telo dokumentaBR Nova linijaBUTTON Komandno dugmeCAPTION Naslov tabele


12/224

HTML - uvod

5

CENTER Centriran tekstCITE NavodCODE Fragment kodaCOL Kolona u tabeli

COLGROUP Grupa kolona utabeliDD Opis definicijeDEL Obrisan tekstDFN Definicija instanceDIR Lista direktorijumaDIV OdeljakDL Definiciona listaDT Definicioni pojam

EM EmfazaFIELDSET Grupa u okviru formeFONT Definicija fontaFORM FormaFRAME Pojedinani frejmFRAMESET Skup frejmovaH1 NaslovH2 Naslov

H3 NaslovH4 NaslovH5 NaslovH6 NaslovHEAD Zaglavlje straniceHR Razdvojna linijaHTML Osnovni tagI ItalikIFRAME Inline frejmIMG SlikaINPUT Element formeINS Insertovan tekstKBD Tekst koji se definiše od strane korisnikaLABEL LabelaLEGEND Opis fieldset-aLI Stavka listeLINK Link nezavisan od medijumaMAP Na klijentskoj strani slika u obliku mape


13/224

HTML - uvod

6

MENU Lista menijaMETA Osnovne meta informacijeNOFRAMES Definisanje ponašanja u sluaju da ita ne podržava forme

NOSCRIPTDefinisanje ponašanja u sluaju da ita ne podržava

script jezikeOBJECT ObjekatOL Numerisana listaOPTGROUP Grupa opcijaOPTION OPcija u okvisu SELECT elementaP ParagrafPARAM Osobina elementaPRE Preformatiran tekstQ Kratak citatS Precrtan tekstSAMP Primer izlaza programa, skriptovi, itd.SCRIPT Definicija script jezikaSELECT Selekcija opcijaSMALL Tekst stilSPAN Osnovni jezikSTRIKE Precrtan tekstSTRONG Tejkst stil

STYLE Informacije o stiluSUB SubscriptSUP SuperscriptTABLE TabelaTBODY Telo tabeleTD elija tabeleTEXTAREA Tekst proctorTFOOT Footer tabele

TH elija za header tabeleTHEAD Zaglavlje tabeleTITLE Naslov dokumentaTR Red u tabeliTT Tekst stilU Podvuen tekstUL Nenumerisana listaVAR Instanca promenljive ili argumenta


14/224

HTML - uvod

7

Struktura HTML straniceMinimalna struktura HTML-dokumenta obuhvata tagove:, - tagovi koji definišu HTML stranu;

, - tag zaglavlja, sadrži meta-definicije HTML-dokumenta i informacije koje ne pojavljuju eksplicitno u okviru dokumenta;, - tag za naziv HTML-dokumenta i, - tag koji definiše telo dokumenta.

Opšti izgled stranice je sledei:

ovde je naziv stranice

ovde se unosi sve ono sto se prikazuje u okviru stranice

U opštem sluaju HTML stranica se može podeliti na dva osnovna dela. Tosu zaglavlje stranice (engl. head) i telo stranice (engl. body). Zaglavlje seodvaja tagovima i a telo dokumenta tagovima: i.U okviru zaglavlju dokumenta definišu se osnovne informacije o stranici

kao što su korišeni alat za realizaciju stranice, korišeni kod za prikazicanjestranice u okviru itaa, stil stranice, itd.Sve ono što je napisano izmedju tagova i predstavlja telodokumenta i pojavie se kao sadržaj prezentacije u prozoru browsera.Posle svakog atributa se stavlja znak jednakosti koji služi za dodeluvrednosti datom atributu, a vrednost atributa se obavezno stavlja izmeuznakova navoda.


15/224

HTML - uvod

8

KomentarKao i veina programskih jezika, HTML omoguava i pisanje komentara uokviru stranice. Tag koji se koristi je za krajkomentara.

Na primer:

je komentarkoji se nece prikazati na stranici-->


16/224

HTML - uvod

9

Primeri za rad u laboratoriji

Primer 1. Prvi program u HTML-u.

Ovo je naslov

TEKST KOJI SE PRIKAZUJE


17/224

HTML - uvod

10


18/224

Programiranje grafikih aplikacija

11

2. FORMATIRANJE TEKSTA

U prethodnom poglavlju navedeni su razlozi nastanka i ciljevi ovog programskog jezika. Istaknuto je da je njegova prvobitna namena bila što brža i jednostavnija razmena i pregled dokumenata. Zato i HTML posedujeitav niz tagova koji omoguavaju željeno formatiranje odreenog teksta. Uokviru ovog poglavlja se opisuju najvažniji tagovi iz ove grupe sa

primerima korišenja.

NaslovUvek je u okviru nekog teksta potrebno istai naslove koje postoje. Takoe,

naslovi se mogu razlikovati po važnosti i nivou teksta kome preipadaju.Zato se u HTML-u naslovi (engl. headers) prikazuju prema relativnomnivou ciframa od 1 do 6. Opšti oblik taga za naslov je:

Tekst za naslov nivoa n gde n dobija vrednosti od 1 do 6.Primer:

Naslov H1 Naslov H2

Naslov H3

Navedeni kod se na HTML stranici prikazuje na sledei nain:

Naslov H1Naslov H2Naslov H3

TekstU uvodnom poglavlju je navedeno da HTML nije case sensitive jezik. Trebanaglasiti da postoji razlika izmeu naredbi, odnosno tagova, koji nisu casesensitive, i teksta koji se prikazuje u okviru stranice, koji jeste casesensitive. To znai da onako kako je napisan neki tekst, tako e se i prikazati(ako se ne koriste tagovi za formatiranje) na stranici. Takoe, ako sedrugaije ne naglasi tekst unutar HTML stranice je poravnat uz levu stranu.Centriranje teksta ili bilo kog drugog elementa stranice se dobija pomou

tagova i . Tako se dobija sledei rezultat:OVO JE CENTRIRAN TEKST


19/224

Formatiranje teksta

12

izvršavanjem sledeeg koda

OVO JE CENTRIRAN TEKST

Paragraf i odeljakTekst stranice se može podeliti na odreeni broj logikih celina. Osnovneceline u HTML jeziku su paragraf i odeljakPrelazak u novi paragraf se postiže

tagom. Ovaj tag odvoji tekst sarazmakom izmeu redova. Na kraju paragrafa se preporuuje da se umetne injegov završni tag, ali veina browsera ga ne zahteva, tako da se slobodnomože i izostaviti. Ukoliko u ravnom tekstu sledi paragraf za paragrafom, tag

se može izostaviti. Tekst se, ako se ništa ne navede, poravnava uz levumarginu. Poravnanje na drugaiji nain se postiže align atributom u okviruovog taga. Align atribut može imati tri vrednosti: left, center i right i koristise na sledei nain:

Primer:levo

centrirano

desno

Kod koji prikazuje gornji primer je:

levo

centrirano

desno

Odeljak (engl. division) se dobija upotrebom tagova i . Tekstkoji predstavlja odeljak se od ostalog teksta odvaja novim redom bezrazmaka. Ovaj tag može imati atribut za pozicioniranje ALIGN sa istimvrednostima kao tag

.

Font

Ukoliko se posebno ne naglasi kojim fontom se želi da bude ispisan tekst nastranici, browser e koristiti default font, uobiajeno Times New Roman.HTML omoguava nekoliko promena vezanih za postojei font pomou taga. Ovaj tag može imati sledee atribute: face, size i color.


20/224


13

Atributom face se definiše tip fonta kojim se želi da tekst bude ispisan. Na jednoj stranici se može koristiti i više razliitih fontova. Mora se vodititirauna da korisnik koji uitava stranicu mora imati instaliran font koji jenaveden na svom racunaru. U suprotnom njegov browser e prikazati tekst udefault fontu. Zato ne treba koristiti neke egzotine fontove, ve treba

upotrebljavati samo široko rasprostranjene fontove.Ako se želi da stranica bude ispisana na primer "Comic Sans MS" fontomonda treba navesti sledei kod:

Ovde dodje vas tekst.

i dobija se rezultat

Ovde dodje vas tekst.

Mogue je navesti i nekoliko fontovau alternativi, jedan za drugim,odvojenih zarezom. Ako posetilac stranice na svom raunaru nemainstaliran prvi font sa liste, on e ga prikazati u sledeem sa liste, i takodalje.

Evo primera nekoliko popularnih fontova koji se mogu koristiti na svojimstranicama:

VerdanaArial

CourierBedrock

Times New RomanComic Sans MS

Kod za prethodni primer je sledei:

Verdana

Arial

Courier

Bedrock

Times NewRoman


21/224

Formatiranje teksta

14

Comic Sans MS

Pored naina ispisivanja teksta, u okviru stranice može se definisati iveliina slova. Za ove potrebe koristi se size atribut. HTML razlikuje 7

veliina slova koje nose vrednosti od 1 do 7. Podrazumevana veliina je 3.Razmera slova je data:

size 1, size 2, size 3, size 4, size 5, size 6, size 7Primer HTML stranice i koda prikazane stranice:

Poslednja osobina koja se može menjati je boja slova u okviru HTMLstranice. Za te potrebe koristi se atribut color. Korišenje boja u okviruHTML stranice se razmatra u posebnom poglavlju, pa i za ovaj atribut važeista pravila kao i kod definisanja boja tagom. Ako se želi dobitisledei tekst ispisan crvenom bojom:

Ovde ide vas tekst.

izvršava se sledei deo koda:

Ovde ide vas tekst.


22/224


15

Pored taga HTML poseduje još mogunosti za obradu teksta. UHTML dokumentima postoji mogunost pisanja podebljanim (bold ilistrong) slovima i kurzivom (italic), kao i mogunost podvlaenja (underline)i precrtavanja (strike) teksta. Sledea tabela prikazuje odgovarajue tagovekao i rezultate njihove primene:

Bold Bold

Strong Strong

Italic Italic

Underline Underline

Strike Strike

Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomou taga a eksponent pomou taga . Sledea tabela prikazuje primer njihove primene:

H2O H2O

23=8 23=8

Novi red

Napomenuto je da se kod HTML stranice može pisati u bilo kom teksteditoru. Tekst ispisan u editoru nee se uvek preslikati na HTML stranu nanain kako se pojavljuje u editoru. Primeri za ove specijalne sluajeve sunovi red, tab i blanko znaci. Znai, novi red (engl. break ) dobijen u teksteditoru nee se prikazati na HTML stranici, ve e tekst biti ispisan u

jednom redu. Ako se želi novi red mora se koristiti tag
. Ovo je prosttag, ne postoji kraj taga .

Tekst se u browseru automatski lomi na kraju reda. Da bi se postiglo da nekideo teksta bude u jednom redu koriste se tagovi i iumetanjem dela teksta koji se ne želi prelomiti izmeu ovih tagova.


23/224

Formatiranje teksta

16

Primer:

ovde je ispisan tekst koji se nece prelomiti na kraju reda

dobija se pomou sledeeg dela koda

ovde je ispisan tekst koji se nece prelomiti na kraju reda

Ukoliko je tekst prevelik da stane u jedan red u okviru ekrana, na dnu prozora e se pojaviti horizontalni "scrollbar" i korisnik e morati daskroluje da bi ga proitao. Zato treba biti obazriv sa korišenjem ovog taga.Ukoliko se želi da se red prelomi, ali na tano odreenom mestu, to se može

postii korišenjem taga. Ovaj tag ne zahteva završni tag. Za razlikuod
taga koji e obavezno prelomiti red, ovaj tag e prelomiti red samoako je to neophodno tj. ako je tekst pre njega predugaak da bi stao u jedanred. Ovaj tag takoe omoguava da se prelomi neka dugaka re na krajureda.

Specijalni znaci

U tekst editorima je mogue korisiti i simbole TAB (služi za prikazivanjeodredjenog broja praznih mesta) i blanko rezmake, ali se na HTML stranicinee videti njihov efekat. Ako se želi blanko razmak u HTML stranicikoristi se naredbe &nbsp. Pomou ove naredbe definiše se jedno blankomesto. Ako se želi 8 blanko razmaka jednostavno se napiše osam ovakvihnaredbi jedna za drugom odvojenih takom-zarezom:

Odgovarajui HTML kod izgleda ovako:

Primer:

xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx xxxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x xxxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xxxxxxxxx x x xxxxxxxxxxxx xxxxx.

se dobija pomou sledeeg koda:


24/224


17

xxxx xxxx xxxx xxxx xxxx xxxx xxxxxxxxx

xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxxxxxxxx

xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxxxxxxxxxxxxxxx xxx

xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

Pored ove naredbe mogu se koristiti i sledee (u tabeli prva kolona oznaavaHTML naredbu, a druga rezultat koji se dobija u okviru HTML strane):

< <> >

& &ö Öñ ñÈ È

Razdvojna linijaRazdvojna linija (engl. rule) se obeležava etiketom sa opcionim

atributom NOSHADEOvo je prosti tag: ne postoji kraj taga .Primer

SIZE – debljina linije

Ako se želi da se prelazak na neku novu celinu još više naglasi koristi sehorizontalna linija (engl. rule) pomou taga . Ovo je prosti tag: ne

postoji kraj taga .

Primer:

Dobija se sledei rezultat


25/224

Formatiranje teksta

18

Tag crta tanku sivu liniju preko cele stranice. I ovaj tag može sadržatiodgovarajue atribute kojima možete regulisati izgled linije. Ako se ne želida linija bude zasenena, ve potpuno crna potrebno je koristiti atributnoshade. Ako se želi promeniti dimenzije linije, koriste se sledea dvaatributa: size i width. Atributom size odredjuje se debljina linije u

pikselima, a atributom width odredjuje se dužina linije ili u pikselima ili u procentima širine stranice. Ovaj tag takoe može sadržati align atribut komese može dodeliti ista vrednosti kao i za pasus. Boja linije se može regulisati

pomou color atributa na ve opisani nain.

Na primer, ako se želi da se nacrta nezasenena crvena linija koja e biticentrirana i ija e debljina iznositi 6 piksela a protezae se preko 50%

širine stranice, potrebno je izvršiti sledei kod:

Tako e se dobiti sledea linija:

Treba naglasiti da Netscape Navigator ne podržava atribut color za

horizontalne linije, tako da e u Navigatoru ova linija biti siva.


26/224


19


Primer 1. Ispisivanje naslova razliitih veliina.

Naslovi

Naslov H1 Naslov H2 Naslov H3 Naslov H4 Naslov H5

Naslov H6

Primer 2. Primeri osnovnih tagova unutar HTML stranice.

Primeri osnovnih tagova

HTML

HTML (HyperText Markup Language) je

veoma jednostavan jezik cije osnove svako moze da se brzo savlada. Uokviru ovog kursa proucavaju se osnove HTML-a koje su dovoljne da senaprave jednostavne ali sasvim zadovoljavajuce prezentacije.

Svaki put kada krstareci internetom naletitena neku zanimljivu stranicu , a ne znate kako je napravljena, njen izvorniHTML kod mozete pogledati ako u liniji menija odaberete: View -> Source(ili View -> Page Source u Netscape Navigatoru).

HTML se koristi i u okviru
ASP stranica

JSP stranica,
Zajednosa JavaScriptom
ili PHP jezikom
ili nekim drugim script jezikom


27/224

Formatiranje teksta

20

HTMLjehiper-tekst-Markup jezik.

Kad savladate osnove HTML-a mozete preci na upoznavanjeJavaScripta

Primer 3. Primer paragrafa.

HTML Primer

HTML Uvod

Ovo je primer prvog paragrafa.

Koji se radi na prvom casu.

Drugi paragraf.

Ovo je centrirani paragraf

Primer 4. Rad sa fontovima.

Rad sa fontovima

The library


28/224


21

has an arrangement with thecafeteria to provide refreshments during the weeklycoffeehouse lectures.

Primer 5. Rad sa prelomom linije.

Rad sa prelomom linije

Come Scroll with me, away to the right, as I listout all of the long answers to themeaning of life accessible only to those that can scroll,scroll, scroll...


29/224

Liste

22


30/224


23

3. LISTE

esto je okviru teksta potrebno navesti nekoliko stavka po odreenomredosledu. HTML omoguava definisanje više vrsta lista, kojima se može

postii željeni efekat.U opštem sluaju liste možemo podeliti u tri grupe:

nenumerisane, numerisane i definicione liste.

Za sve tri grupe lista zajedniko je da se moraju definisati stavke liste inain prikazivanja pojedinanih stavki.

Numerisane i nenumerisane listeOsnovna razlika izmeu ove dve vrste listi je ta što se kod numerisanih listaispred pojedinanih stavki liste nalaze redni brojevi ili slova, a kodnenumerisanih lista pojavljuju se specijalni simboli.Za obe liste važi da se pojedine stavke liste definišu pomou taga (ovajtag ne zahteva završni tag). Numerisane liste koriste taga, anenumerisane liste taga.

Nenumerisane liste su liste sa kojima se nabrajaju stavke, bez navoenjarednog broja.Opšta struktura za ovu vrstu lista je (UL – unordered list):

prva stavka ... druga stavka ...

...

poslednja stavka ...

Na primer: jabuke banane limun

Kod za prethodni primer je:


31/224

Liste

24

jabuke banane limun

Simbol ispred stavke liste može se definisati i na drugi oblik. Koristi seatribut type koji može uzimati vrednosti:

circle - krug disc – pun krug square - kvadrat

Primer sa kvadratima: jabuke banane limun

a odgovarajui HTML kod je:

jabuke banane limun

Numerisane liste su liste sa kojima se nabrajaju stavke sa navoenjemrednog broja ili slova.Opšta struktura ove vrste liste je (OL - ordered list):

prva stavka ...

druga stavka ...... poslednja stavka ...

Primer numerisanih lista:

1. jabuke

2. banane3. limun


32/224


33/224

Liste

26

Opšta stuktura ove vrste liste je:

prvi pojam definicija prvog pojma drugi pojam definicija drugog pojma

. . . . . poslednji pojam definicija poslednjeg pojma

Primer za ovu vrstu listi je:

Prolece:traje od 21. marta do 21. juna.

Leto:traje od 21. juna do 21. septembra.

Jesen:traje od 21. septembra do 21. decembra.

Zima:traje od 21. decembra do 21. marta.

HTML kod za prethodni primer je:

Prolece: traje od 21. marta do 21. juna.Leto: traje od 21. juna do 21. septembra.Jesen:traje od 21. septembra do 21. decembra.Zima:traje od 21. decembra do 21. marta.

Još jedan primer:

-numerisane liste su liste sa kojima se nabrajaju stavke sa navoenjem

rednog broja ili slova.

-nenumerisane liste su liste sa kojima se nabrajaju stavke bez navoenja

rednog broja.


34/224


27

Rezultat koji se dobija izvršavanjem prethodnog primera:- numerisane liste

su liste sa kojima se nabrajaju stavke sa navoenjem rednog broja ili

slova.- nenumerisane liste

su liste sa kojima se nabrajaju stavke bez navoenja rednog broja.

Gneženje listaSvi primeri koji su do sada razmatrani su podrazumevali daje stvka listeobian tekst, što u opštem sluaju ne mora da bude. Stavka liste može da

bude bilokoji HTML element, pa i neka druga lista. Ako je to sluaj dolazi

do gneženja lista, t.j. u okviru jedne liste pojavljuje se druga nova lista. Usledeem primer definisana je nenumerisana lista, u okviru koje prva stavka

je neka nova nenumerisana lista, a druga stavka je numerisana liste:

Neke vrste voca su:

jabuke banane limun

Neke vrste povrca su:

sargarepa kupus

Rezultat prethodnog primera: Neke vrste voca su:

o jabukeo bananeo limun

Neke vrste povrca su:1. sargarepa2. kupus


35/224

Liste

28


Primer 1. Primer opisne liste

Opisne liste

piko- prefiks nekoj jedinici koji pokazuje milioniti deomilionitog dela te jedinice;

nano- prefiks nekoj jedinici koji pokazuje milijarditideo te jedinice;

mikro-prefiks nekoj jedinici koji pokazuje milioniti deote jedinice;

Primer 2. Primer opisne liste sa formatiranom odrednicom

Formatirane opisne liste

piko-

prefiks nekoj jedinici koji pokazuje milioniti deomilionitog dela te jedinice;

nano-

prefiks nekoj jedinici koji pokazuje milijarditideo te jedinice;

mikro-


36/224


29

prefiks nekoj jedinici koji pokazuje milioniti deote jedinice;

Primer 3. Primer numerisane liste

Numerisane liste

Neki predmeti na 1. godini FPIPoslovna informatikaSociologijaOsnovi ekonomijeOsnovi prava

Primer 4. Primer nenumerisane liste

Nenumerisane liste

Tokom zime imajabukalimunabanana.


37/224

Liste

30

Primer 5. Primer numerisane liste

Numerisane liste:

jabukelimunbananepomorandze

Obelezavanje slovima:


Obelezavanje malim slovima:


Obelezavanje rimskim brojevima:


Obelezavanje malim rimskim brojevima:


38/224


31


Primer 6. Primer nenumerisane liste

Obelezavanje pomocu diska:


Obelezavanje krugom:


Obelezavanje kvadratom:



39/224

Liste

32

Primer 7. Primer liste unutar liste

Lista unutar liste:

KafaCaj

Crni caj

Zeleni caj

Mleko

Primer 8. Primer definicione liste

Definiciona lista:

KafaCrno vruce piceMlekoBelo hladno pice


40/224


33

4. BOJE I SLIKE

Boje su sastavni deo svake dobro dizajnirane stranice. Zato HTML podržava brz i jednostavan rad sa paletom boja, pa je mogue promeniti boju

pozadine, slova, linkova, ... Svi elementi stranice rad sa bojama organizujuidentino, i to na dva naina ili preko prreredefinisanog engleskog naziva

boje (npr. "yellow" za žutu boju), ili preko heksadecimalne RGB vrednostiispred koje obavezno treba staviti simbol # (npr. #ffff00).Ako se koristiRGB paleta boja vrednost odreenog atributa za boje ima opšti oblik"#cczzpp" gde su cc, zz i pp heksadecimalne vrednosti za intenzitet crvene,zelene i plave boje. Svaka od ovih vrednosti može biti broj izmeu 0 i 255(u dekadnom brojnom sistemu) ili izmeu 0 i FF (u heksadecimalnom

brojnom sistemu). Boje se mogu odrediti navoenjem naziva boje naengleskom umesto kombinacijom heksadecimalnih cifara prema tabeli koju

je data od strane SGIR (Service Général Informatique et réseaux, UniversitéRené Descartes, Paris). U prilogu je data paleta boja, gde su tabelarno

prikazane najvažnije boje, njihov engleski naziv i RGB kod.

BODY tag

U prethodnim poglavljima bilo je rei o BODY tagu i reeno je da ovaj tagdefiniše samo telo stranice. Globalne promene boja elemenata stranice se

postižu upravo pomou ovog taga, pa se pozadina i tekst HTML stranicemogu pojaviti u itavom spektru boja.Boja pozadine se odreuje atributom bgcolor u okviru taga. Usluaju da se prilikom navoenja taga BODY izostave opisani atributi, itaim dodeljuje predefinisane vrednosti. Na primer, promena boje pozadine u

žutu dobija se na sledei nain:

ili:

Oba primera koda e dati isti rezultat.Pored pozadine, može se menjati i boja teksta, pomou atributa text . Na

primer, ako je potrebno na prethodnoj stranici definisati zelena slova trebanapisati sledei kod:


41/224

Boje i slike

34

ili

ili

ili

Na ovaj nain definiše se osnovna boja slova stranice, a ako se želi da samo jedan deo stranice sadrži slova u zelenoj boji mora se koristiti, ranijeobjašnjeni, atribut color taga .Pored promene boje pozadine ili slova stranice efektna promena se možedobiti i definisanjem odreene slike kao pozadine. Da bi se postigao ovaj

efekat, prvo treba odabrati sliku u nekom od podesnih elektronskih formata.Treba voditi rauna o veliini odabranog fajla, jer se radi o Internetaplikaciji ije ogranienje je pristup i izvršavanje na udaljenom raunaru.Kao najpodesniji formati smatraju se JPEG i GIF format, zbog stepenakompresije originalnog fajla. Pored veliine slike, sledea stva o kojoj trebavoditi rauna je lokacija fajla sa slikom u okviru aplikacije.

Najjednostavnije rešenje je da se nalazi u istom direktorijumu gde se nalazi iaplikacija. Druge mogunosti razmatrae se u narednim odeljcima kada se

bude diskutovalo o apsolutnoj i relativnoj putanji. Kao i promena boje, pozadina u obliku slike se definiše pomou odgovarajueg atributa u BODYtagu. Atribut je u ovom sluaju background .

Na primer, ako se želi da se kao pozadina stavi slika "pozadina1.jpg" tada eodgovarajui tag izgledati:

Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše ibgcolor atribut. Razlog tome je mogunost da korisnik u okviru svog Webitaa iskljui automatsko uitavanje slike. Tada se definisana slika nee

pojaviti u okviru stranice. Može se desiti i sluaj da slika predstavlja nekutamniju površinu, pa se i boja slova menja u neku svetliju, pa ak i belu. Utom sluaju kada se stranica uita bez definisane slike, dobijaju se bela slovana beloj pozadini, pa je tekst stranice za korisnika nevidljiv. Da bi se izbegli

ovakvi sluajevi BODY dozvoljava definisanje i background i bgcolor atributa u okviru istog taga. Naravno, upotreba oba atributa ne znai da e seu isto vreme prikazati i definisana slika i boja pozadine, ve atribut bgcolor


42/224


35

definiše boju pozadine u sluaju da se slika ne uita. Znai ita u ovakvimsluajevima BODY taga uvek prvo pokušava da prikaže sliku kao pozadinu,

pa tek kada ne uspe prikazuje pozadinu u traženoj boji.Prethodni primer sa primenjenom napomenom bi izgledao:

gde se u sluaju da se ne uita u oviru stranice slika pozadina1.jpg pozadinastranice prikazuje u plavoj boji.U narednom poglavlju se razmatraju linkovi, odnosno hiperveze, kaonajbitni elementi HTML stranice. Linkovi u HTML stranici omoguavajuda se jednim klikom miša promeni navigacija i otvori neka druga stranica.Pri radu sa linkovima, postoje tri default boje koje definišu stanje linka, pa

se boje linkova mogu definisati pomou tri atributa: link , vlink i alink , gdelink definiše poetnu boju linka u okviru stranice, vlink definiše boju linka uokviru stranice koji je poseen, a alink definiše boju aktivnog linka u okvirustranice. Ako navedeni atributi nisu korišeni stranica prikazuje defaultvrednosti. U Internet Exploreru pozadina je po defaultu bela, tekst crn,linkovi plavi, poseeni linkovi maslinasto-zeleni, a aktivni linkovi crveni.

Na primer, definisanje boje linkova u plavo, poseenih linkova u ljubiasto,a aktivnih linkova u crveno se obavlja na sledei nain:

IMG TagPored pozadine slika se može u okviru HTML stranice prikazati na

proizvoljnom mestu. U JPEG formatu se uvaju kvalitetnije slike, jer ovajformat podržava 16 miliona boja, a fajlovi su efikasno komprimovani, tako

da se slike relativno brzo uitavaju. Sa druge strane GIF format ima samo256 boja, ali on ima tu prednost da mu se može zadati transparentnost i dase može animirati.U okviru HTML stranice slika se prikazuje pomou taga. Ovaj tagmora imati bar jedan atribut. To je src atribut koji definiše naziv, ieventualno lokaciju, grafikog fajla koji se želi prikazati u okviru stranice.Pri opisu lokacije dokumenta najjednostavniji sluaj je da se dokument slikenalazi u istom direktorijumu gde i HTML stranica. Tada je dovoljno da kao

vrednost src atributa postaviti samo naziv odgovarajueg dokumenta. Na primer da bi se prikazala slika sa imenom "osam.gif" na HTML stranicitada e odgovarajui tag glasiti:


43/224

Boje i slike

36

na stranici se prikazuje:

Tag IMG može imati razliite atribute koji omoguavaju da se preciznoopišu položaj, dimenzije i odnos slike prema drugim delovima stranice. Tiatributi su:

atribut za poravnavanje slike u odnosu na margine ALIGN ... možeimati vrednosti

o za vertikalno poravnavanje: TOP, MIDDLE, BOTTOMo za horizontalno poravnjavanje: LEFT, CENTER, RIGHT

atributi za dimenzionisanje slike su WIDTH ( širina) i HEIGHT(visina).

atributi koji opisuju položaj slike su HSPACE i VSPACE atribut koji opisuje širinu okvira slike BORDER atribut koji na mestu neuitane slike prikazuje komentar ALT

Ako se nijedan od atributa ne navede slike su poravnate sa tekstom na donjuivicu.ALIGN atributPoložaj slike u odnosu na tekst stranice se može definisati ubacivanjemalign atributa u tagu. Vrednosti ovog atributa i odgovarajue efektemogu se videti iz sledeih primera:

left - postavlja sliku uz levu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxxxxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxxxxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx

xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxxxxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxxxxxxxx x xxxxx xxxxxx x xxxxx


44/224


37

Odgovarajui tag glasi:

right - postavlja sliku uz desnu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx

xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxxxxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxxxxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx

xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxx x xxxxx


top - poravnava sliku sa vrhom slova u tekuoj liniji:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxxxxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx

xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxxxx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxxxxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxxxxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxxxxxxx xxxxxx x xxxxx xxxxxx x xxxxx


bottom - poravnava sliku sa donjom ivicom slova:


45/224

Boje i slike

38




middle - postavlja sliku tako je donja ivica slova na sredini slike:




absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxxxxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx

xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx

xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxxxxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx


46/224


39

xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxxxxxxx xxxxxx x xxxxx xxxxxx x xxxxx


CENTERDa bi se slika prikazala na sredini stranice potrebno je koristiti tag center.

Na primer:

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxxxxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx

xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxx

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxxxxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxxxxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xx xxxxxx xxxx xxxxx xxxx x

Gornji primer se postiže sledeim HTML kodom:

HEIGHT i WIDTH atributiDa bi se promenila originalna veliina slike, željena veliina se možedefinisati pomou dva atributa: height i width.Vrednost širine i visine stranice se može zadati ili u pikselima ili u

procentima. Da bi slika zauzimala 50% širine prozora i 30% visine prozoraHTML stranice, potrebno je napisati sledei kod:

Slika koja e se prikazati na stranici je:


47/224

Boje i slike

40

Ako se definiše samo height ili samo width atribut, druga dimenzija e bitiuveana srazmerno sa definisanom karakteristikom tako da e proporcijeslika ostati iste.

HSPACE i VSPACE atributiPrazan prostor izmeu slike i okolnog teksta, ili nekih drugih elemenatastranice, može se definisati pomou dva atributa: hspace i vspace. Vrednostova dva atributa se zadaje u pikselima.

Izgled dela stranice:

x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxxxxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx xxxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxxxxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx

xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxx x xxxxx

se može dobiti pomou koda


48/224


41

Na ovaj nain je širina margine oko slike 50 piksela.

BORDER atribut

U okviru stranice može se definisati i debljina granice pomou atributaborder ija se vrednost zadaje u pikselima.Da bi se definisala debljina okvira 5 piksela potrebno je napisati sledei tag:

ALTPostoji još jedan koristan atribut taga. To je alt atribut. Ovaj atribut

e u sluaju da ita korisnika stranice iz bilo kog razloga ne uita sliku, naonom mestu gde bi trebalo da bude slika prikazati tekst koji predstavljavrednost ovog atributa. Ovo može biti korisno naroito ako je slika

postavljena kao link, jer e onda i u sluaju neuitavanja slike korisnik znatigde vodi taj link.Primer korišenja ovog atributa je:

Ukoliko browser korisnika ne uita sliku osam.gif korisniku e se nadefinisanom mestu pojaviti tekst "Broj osam".


49/224

Boje i slike

42


Primer 1. Boje pozadine i slova

Boje pozadine i slova

Ovaj naslov je crven zbog atributa TEXT

a ovaj naslov je plav zbog etikete FONT

Primer 2. Boje atributa u tagu BODY

Atributi u etiketi BODY

Iz teksta na beloj pozadini sa crnim slovima

poziva se ovde tekst

iz prethodnog primera.

Boja za atribut LINK Boja za atribut VLINK Boja za atribut ALINK


50/224


43

Primer 3. Definisanje pozadine slikom.

Slika kao pozadina

Ovaj naslov je crven zbog atributa TEXT

a ovaj naslov je plav zbog etikete FONT

Primer 4. Primer upotrebe slike u okviru HTML stranice.

Slika u okviru HTMLa

Pronadjite sliku na vasem racunaru i njeno ime upisite u donji

tag


51/224

Linkovi

44


52/224


45

5. LINKOVI

HTML je potreban da bi se na jednostavniji nain realizovali kako samihiperdokumenti, tako i veze izmeu njih. Veze izmeu razliitih stranica se

nazivaju linkovi ili hiperveze. One omoguavaju jednostavan prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na sasvimnovoj stranici. U daljem tekstu e se koristiti termini polazna pozicija, zamesto odakle se prelazi, i krajnja pozicija, za mesto gde se dolazi.Linkovi koji se mogu definisati u okviru jedne HTML stranice mogu se

podeliti na tri grupe: krajnja pozicija se nalazi na stranici koja je u okviru iste aplikacije i

nalazi se na istom serveru gde i stranica sa polaznom pozicijom, krajnja pozicija se nalazi na stranici koja ne pripada istoj aplikaciji,

ve se nalazi na drugom serveru, krajnja pozicija pripada istoj stranici kao i polazna pozicija

Za sve tri vrtse linkova jedinstvena je definicija poetne pozicijekorišenjem taga . Opšti izgled ovog taga je:

... .

Sintaksa ovog taga podrazumeva da se u okviru polazne pozicije opišu: fizika pozicija polazne pozicije i fizika lokacija krajnje pozicije.

Polazna pozicija oznaava na stranici mesto sa koga se prelazi na neki drugideo stranicei definiše se pomou atributa href :

polazna pozicija sa koje se prelazi na

krajnju

ita obino prikazuje polaznu poziciju HTML stranice u obliku elementana koji se može kliknuti mišem, grafiki istaknut podvlaenjem i drugom

bojom slova od boje slova samog teksta unutar stranice.

KRAJNJA POZICIJA JE NA STRANICI U OKVIRU ISTE APLIKACIJE Najjednostavniji sluaj rada sa linkovima je prelazak na stranicu u okviruiste aplikacije. Ovaj sluaj se naješe koristi, jer je to upravo i svrha


53/224

Linkovi

46

upotrebe HTML jezika, na primer linkovi za kretanje napred i nazad krozaplikaciju.Aktiviranjem ove vrste linkova napušta se tekua stranica i dalje izvršavanjese nastavlja na nekoj drugoj stranici tekue aplikacije. Kod ove vrste linkovakoristi se taga sa atributom href i nazivom stranice do koje se želi da se

napravi veza. Na primer ako se želi da se napravi veza do stranice Prva.html trebanapisati:

Veza do stranice Prva.html

Kada se mišem klikne na tekst "Veza do stranice Prva.html" u itau e se prikazati stranica Prosla.html.

Prelazak se izvršava na vrh stranice ija se adresa nalazi u okviru href atributa. Ako se želi da se dalji rad nastavi od nekog odreenog mesta uokviru druge stranice tada treba kombinovati prvu i treu vrstu linkova, nanain koji e u kasnijem tekstu biti razmatran.Stranica sa krajnjom pozicijom osim što pripada istoj aplikaciji, odnosnoserveru, u opštem sluaju ne mora da se i fiziki nalazi u istomdirektorijumu gde i stranica sa polaznom pozicijom. Na primer želi se da seaplikacija podeli u više logikih celina i stranice svake celine da se nalaze urazliitim direktorijumima. Postoje dva rešenja ovog problema, a to je rad saapsolutnim i relativnim putanjama.Korišenje apsolutnih putanja podrazumeva u okviru href atributanavoenje pune putanje do stranice sa krajnjom pozicijom, na primerhref=”c:\Aplikacije\Poslovanje\Klijent\Prva.html). Ovaj nain nije podesan,

jer u opštemsluaju u trenutku pisanja koda ne zna se tano mesto naserveru gde e se aplikacija nalaziti, pa samim tim i putanja do neke

stranice.Korišenje relativnih putanjaje mnogo podesnije, jer se zasniva na kretanjuu odnosu na direktorijum stranice sa polaznom pozicijom. Neka je datasledea struktura aplikacije koja se nalazi na serveruwww.singidunum.ac.yu. Takoe neka direktorijum X sadrži stranice 1 i 2, Ystranicu 3, a Z stranicu 4.


54/224


47

Ako se koriste apsolutne putanje, da bi se došlo do stranice c potrebno jenavesti adresu http://www.singidunum.ac.yu/X/Y/3.html. Apsolutna adresa

je odreena jednoznano pomou uniformnog lokatora resursa (skr. URL,od engl. Uniform Resource Locator) stranice 3.html.Korišenje relativne putanje je umnogome jednostavnije i razmotrie se

nekoliko sluajeva. Na primer:o Za stranicu 1,

relativna adresa stranice 2 je „2.html”; relativna adresa stranice 3 je „Y/3.html”; relativna adresa stranice 4 je „Y/Z/4.html”;

o Za stranicu 3, relativna adresa stranice 2 je „../2.html” (simbol .. oznaava

direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom);

relativna adresa stranice 4 je „Z/4.html”;o Za stranicu 4,

relativna adresa stranice 2 je „../../2.html”; relativna adresa stranice 3 je „../3.html”.

Datim primerima je ilustrovano kako se postupa, ako se stranica sa krajnjom pozicijom nalazi u direktorijumu ispod ili iznad direktorijuma sa stranicom

sa polaznom pozicijom.

KRAJNJA POZICIJA JE NA STRANICI IZVAN ISTE APLIKACIJEDruga vrstu su linkovi do stranice u nekoj sasvim drugoj prezentaciji kojamože biti postavljena na raunaru koji se nalazi na nekom sasvim drugomserveru. Da bi se pristupilo toj prezentaciji potrebno je navesti celu webadresu te prezentacije. Opšti oblik adrese koja se pojavljuje kao vrednosthref atributa je

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

Na primer ako se u okviru prezentacije želi uspostaviti veza saUniverzitetom Singidunum u Beogradu, ija adresa jewww.singidunum.ac.yu, tada href atribut izgleda:

Link ka UniverzitetuSingidunum


55/224

Linkovi

48

Na stranici e se prikazati tekst " Link ka Univerzitetu Singidunum " i akose mišem klikne na njega u itau e se pojaviti poetna stranica

prezentacije Univerziteta Singidunum.Ovakav nain adresiranje se temelji na pojmu URL, koji je omoguio da se

precizno navede adresa stranice sa krajnjom pozicijomi, ma gde on bio

fiziki lociran. U opisivanju ove adrese može se desiti više sluajeva uzavisnosti od toga koliki je deo URL-a poznat u tom trenutku.

KRAJNJA POZICIJA JE NA ISTOJ STRANICIU ovom sluaju je potrebno u okviru iste stranice tano definisati i krajnju

poziciju. Primer može biti da se na kraju stranice napravi link koji korisnikakoji ga aktivira vraa na vrh stranice Za ovu vrstu linkova prvo se napravioznaka na mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija

pomou atributa name u tagu:

tekst krajnje pozicije sa koje se prelaziiz polazne pozicije

Atribut NAME nije obavezan. Ukoliko se on izostavi, ita se pozicionirana poetak stranice sa krajnjom pozicijom, a inae na naznaenu poziciju.Znai da bi se definisala veza izmeu dva dela iste stranice potrebno jeuraditi sledee:

na polaznoj poziciji navodi se tag sa imenom krajnje pozicije:

tekst polazne pozicije

na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije:

tekst krajnje pozicije

Izmedju poetnog i završnog taga može stajati bilo koji element stranice (tekst, slika, ...), a ne mora stajatinijedan element, kao što je sluaj u prethodnom primeru. Ovaj tag ne

proizvodi nikakav vidljiv efekat u HTML stranici - on deluje u pozadinistranice i služi itau da se lakše orijentiše.Ako se želi da se uspostavi veza sa nekom drugom stranicom, ali ne sa

poetkom te stranice, ve nekim drguim delom, potrebno je koristiti i prvu idrugu vrstu linkova. Opet se definiše mesto odakle se želi nastaviti sa

pregledom pomou atribut href u tagu sa navoenjem imena stranice,


56/224


49

ali se dodaje deo #ime_krajnje_pozicije, da bi se pozicioniralo na krajnju poziciju. Neka se krajnja pozicija nalazi u okviru stranice PrimerLinka.html, tadatreba navesti:

tekst polazne pozicije

Sada kada korisnik klikne mišem na link "tekst polazne pozicije " odlazi sena novu stranicu PrimerLinka.html i to na njen deo oznaen sa stranice koji

je definisan imenom ime_krajnje_pozicije.

SLIKA KAO LINK

Slika u HTML dokumentu može predstavljati i polazni vor u hipervezi.Dolazna adresa se tada navodi kao kod hiperveze, a umesto teksta koji semože aktivirati navodi se tag IMG. Opšti oblik je:

"tag IMG za željenu sliku"

Primer:

Sada slika osam.gif predstavlja link ka stranici Primer.html. Kada se kliknemišem na sliku u itau se umesto trenutno stranice prikazuje stranicaPrimer.html.

Takoe ita automatski prikazuje okvir oko slike koja predstavlja link sa bojom koja je definisana pomou link i vlink atributa u okviru taga. Da bi se dobila slika bez takvog okvira treba definisati border="0" uokviru taga.

LINK ZA ELEKTRONSKU POŠTUPored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanjenove mail poruke pomou default programa za elektronsku poštu (u

korisnikim sistemima najviše korišeni su Outlook Express ili NetscapeMessenger). Pri generisanju nove poruke, ve e biti upisana željena adresa,a korisniku preostaje samo da otkuca tekst poruke i da je pošalje.


57/224

Linkovi

50

Da bi se poslala poruka na mail adresu [email protected] potrebno je uokviru stranice navesti sledei tekst:

Posaljite e-mail poruku!

Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke. Sledei kod

Posaljite e-mail poruku!

Definiše poruku koja ima naslov “Primer poruke” i u okviru tela poruke je postavljen tekst “Napisite vas komentar”.

Nakon aktiviranja linka “Posaljite e-mail poruku” dobija se sledei izgledekrana


58/224


51


Primer 1. Linkovi u okviru iste stranice

Link u okviru iste straniceProgramiranja

Web i jezik HTML ; Programski jezik Java Uvod u C

Web i jezik HTML

................
................

................
................

................
................

Programski jezik Java

................
................

................
................

................
................

Uvod u C

................
................

................
................

................
................


59/224

Linkovi

52

Primer 2. Veza ka stranici u okviru iste aplikacije

Dokument A

Ovo je stranica a.html iz koje se pozivaStranica b.html u istom direktorijumu.

Poziv stranice b.html

Dokument B

Ovo je stranica b.html iz koje se pozivaStranica a.html u istom direktorijumu.

Poziv stranice a.html

Primer 3. Veza ka stranici na drugom serveru. U ovom primeru, adresaservera je www.w3.org, a putanja do stranice Addressing.html jehypertext/WWW/Addressing/:

Veza ka stranici na drugom serveru


60/224


53

Neke stranice o HTML-adresiranju:

Adresiranje

Primer 4. Primer slike i linka.

Hvala!

Hvala!

Hvala sto ste poslali vas komentar! Mozete posetiti i stranicu.


61/224

Tabele

54


62/224


55

6. TABELE

Tabela je i u HTML-u dvodimenziona matrica iji se elementi nazivajuelije (engl. cell ). elija može sadržavati raznovrsne informacije: brojeve,

tekst, boje, liste, hiper-veze, slike, itd. Tabela se sastavlja tako što se opisujuredom njene vrste (redovi, engl. row) i sadržaj svake elije u redu.

Tabela se opisuje uz pomo složenog taga TABLE koji može sadržavati višeatributa:

BORDER koji opisuje širinu spoljašnjeg okvira tabele; CELLSPACING koji opisuje širinu linije koja razdvaja dve elije; CELLPADDING koji opisuje prostor oko sadržaja elije; WIDTH koji opisuje ukupnu širinu tabele.

Nadnaslov tabele se može zadati tagom CAPTION koja se ispisuje iznadtabele i može imati atribut ALIGN:

za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM

za horizontalno poravnavanje: LEFT, CENTER, RIGHTSvaki red u tabeli se opisuje izmeu tagova i (engl. table row).I tag TR može imati atribute:

za horizontalno poravnjavanje, atribut ALIGN sa vrednostima:LEFT, CENTER, RIGHT

za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP,

MIDDLE, BOTTOM

Pojedinana elija se opisuje izmeu tagova i . Tag TD, poredatributa ALIGN i VALIGN, može imati i atribute:

za horizontalno spajanje elija: ROWSPAN (spaja elije iste vrste) i za vertikalno spajanje elija: COLSPAN (spaja elije iste kolone)

Tag ima ista svojstva kao tag s tom razlikom što obezbeujeda sadržaj elije bude automatski centriran i boldovan.


63/224

Tabele

56

Tabela ne mora da sadrži tag, ali mora da sadrži bar jedan tag,u koji se smešta sadržaj tabele.Opšta struktura jedne tabele je sledea:

sadrzaj naslova tabele

sadržaj prve elija headera

sadržaj poslednje elije headera

sadržaj prve elije prvog reda sadržaj poslednje elije prvog reda

sadržaj prve elije poslednjeg reda sadržaj poslednje elije poslednjeg reda

Treba naglasiti da ako se tekstu van tabele upotrebom taga dodelineki font razliit od default fonta, u Internet Exploreru e se ovaj tag

odnositi i na tekst u elijama tabele. U Netscape Navigatoru e tekst u tabeli biti prikazan u default fontu. Da bi i Netscape Navigator tekst u tabeli


64/224


57

prikazao u željenom fontu treba u svaku eliju posebno da se ubaci tag.Ako se u kodu tabele ne navede odreeni atribut tabele nemaju graninuliniju, border. Da bi se dodelila tabeli granina linija odgovarajue debljine,u tag se stavlja atribut border , a vrednost debljine linije se zadaje u

pikselima.Sledei primer pokazuje upotrebu atributa border :

Ime: Prezime: Zvanje:

Bosko Nikolic Predavac

Kod kojim se dobija prethodni primer :

Ime:Prezime:Zvanje:

BoskoNikolicPredavac

Osnovna razlika izmedju teksta koji se nalazi izmeu i tagova je

u tome što je tekst u prvom sluaju boldovan i centriran unutar elije, a udrugom sluaju tekst nije podebljan i poravnat je uz levu ivicu elije. Ivicatabele se priljubljuje uz sadržaj elija maksimalno koliko je mogue. Širinakolona je odreena prvom elijom u svakoj koloni.

Naravno, ovim se ne iscrpljuje mogucnost formatiranja tabela. U tu svrhu sekoriste razni atributi. Treba napomenuti da tabela uopste ne mora da budeuniformno formatirana, tj. da se svakoj eliji može dodeliti neko drugosvojstvo pomou atributa koji se defnišu unutar tagova.

Da bi tabela imala odgovarajue dimenzije koriste se atributi height i width.Vrednost ovih atributa se kao i kod taga može zadati ili u pikselima


65/224

Tabele

58

ili u procentima veliine prozora HTML browsera. Preporuuje se druginain definicije, jer onda izgled stranice ne zavisi od rezolucije ekrana.

Sledei primer predstavlja tabelu sa širinom od 80% i visinom od 30%:

Ime : Prezime : Zvanje :Bosko Nikolic Predavac

Odgovarajuci HTML kod je:

Ime :Prezime :Zvanje :


Da bi kolone bile jednake širine trebalo bi da u odgovarajue ili tagove ubaciti atribute width sa željenom širinom. U sluaju tabele iz

prethodnih primera to znai da treba u svaki tag definisati atribut widthsa vrednošu 33%. Tako, na primer, se može realizovati tabela koja e se

protezati preko cele širine stranice, a svaka kolona e zauzimati tanotreinu širine tabele:

Ime : Prezime : Zvanje : Bosko Nikolic Predavac

HTML kod za prethodni primer je:


66/224


59

Ime :Prezime

:Zvanje :


Dva atributa koja imaju veliku primenu su i cellpadding i cellspacing .

Pomou cellpadding atributa definiše se rastojanje izmeu sadržaja elije injene granine linije. Vrednost ovog atributa se zadaje u pikselima, ako sene navede nijedna vrednost podrazumeva se da 1. Pomou cellspacing atributa se može odrediti rastojanje izmeu pojedinih elija tabele, tj.debljina linije izmeu elija. Vrednost ovog atributa se zadaje, takoe, u

pikselima ako se ne navede nijedna vrednost podrazumeva se da 1. Ako se u prethodnoj tabeli definiše vrednost cellpadding atributa od 30 piksela, avrednost cellspacing atributa od 10 piksela dobija se sledea tabelu:

Ime : Prezime: Zvanje :

Bosko Nikolic Predavac

HTML kod ove tabele glasi:


67/224

Tabele

60

Ime :Prezime

:Zvanje :


HTML dopušta mogunost da se pojedine elije tabele protežu duž više

redova ili kolona tabele. Ovakav efekat se može postii pomou atributacolspan i rowspan, koji se ubacuju u ili tag one elije koja se želi

posebno da formatira. Vrednost ovih atributa se zadaje brojem kolona iliredova tabele duž kojih treba da se prostire data elija. U sledeem primeru

je prikazana upotreba ovih atributa:

Dani u nedelji :

ponedeljak utorak sreda cetvrtak petak

1. srpski istorija fizicko hemija srpski

2. matematika srpski fizicko hemija srpski

3. fizicko matematika istorija biologija engleski

4. fizicko matematika fizika informatika engleski

c

a

s

o

v

i 5. fizika razredni geografija informatika matematika


68/224


61

HTML kod tabele iz prethodne tebale je:

Dani u nedelji :

ponedeljakutoraksredacetvrtakpetak

c

a

s

o

v

i1.srpskiistorijafizickohemijasrpski

2.matematikasrpskifizicko

hemijasrpski

3.fizickomatematikaistorija

biologijaengleski


69/224

Tabele

62

4.fizickomatematikafizika

informatikaengleski

5.fizikarazrednigeografija

informatikamatematika

U prvu eliju tabele je postavljena slika tipa gif pod nazivom space.gif. Ovo je neophodno stoga što svaka elija tabele mora imati neki sadržaj, inace je browser nee prikazati.

HTML dozvoljava da cela tabela kao i svaka elija posebno može da imarazliitu boju pozadine od ostatka stranice. Ovakav efekat se postižeumetanjem atributa bgcolor u sledee tagove: , ili .Vrednost se zadaje heksadecimalnim kodom boje ili njenim imenom, istokao i kod boje pozadine stranice u tagu.


70/224


63

U sledeem primeru je demonstriran upotrebe ovih atributa:

Dani u nedelji :


1. srpski istorija fizicko hemija srpski2. matematika fizicko hemija srpski srpski



c

a

s

o

v

i

5. fizika razredni geografija informatika matematika

HTML kod ovog primera glasi:

Dani u nedelji :

ponedeljak

utoraksredacetvrtakpetak

c

a

s

o

v

i1.srpskiistorija


71/224

Tabele

64

fizickohemijasrpski

2.matematikasrpskifizickohemijasrpski

3.fizickomatematikaistorijabiologijaengleski

4.fizickomatematikafizikainformatikaengleski

5.fizikarazrednigeografijainformatikamatematika


72/224


65

U prethodnom primeru se može primetiti da atribut bgcolor koji je zadat u ili tagu e se prikazati umesto one boje koja se nalazi u tagu. U primeru je u tagu definisana bela boja pozadine koja se vidisamo na ivicama tabele (ako se koristi Internet Explorer), jer je u svakoj

pojedinanoj eliji definisana posebna boja pozadine bgcolor atributom.

Takoe boja okvira tabele se može promeniti pomou bordercolor atributa u tagu. U sledeem primeru je prethodnoj tabeli dfnisan crni okvir:

Dani u nedelji :


1. srpski istorija fizicko hemija srpski2. matematika fizicko hemija srpski srpski



c

a

s

o

v

i

5. fizika razredni geografija informatika matematika

HTML kod koji treba promeniti u prethodnoj tabeli je:


73/224

Tabele

66


Primer 1. Tabela kodova.

Tabela kodova

YU-karakteri u ISO-8859-2

Veiko slovokod 8859-2Malo slovo

kod 8859-2

200232

198230

208248


74/224


67

Š169š

185

Ž174ž190

Primer 2. Boje u tabeli.

Tabela boja


75/224

Tabele

68

Primer 3. Primer jedne HTML stranice sa tabelom.

HTML programiranje

Viša zeleynicka škola Beograd ©2004

HTML programiranje

H3 tag za naslov!

Boldovan tekst u paragraf tagu!
Ovako izgleda podvueno
Div-tag za podešavanje sadržaja (left, right,center)

Linkovi mogu biti:Tekst Viša

elektroethnika škola

Slike

Postoje tabele sa: Borderima-vidljivim ivicama

Tabela bez bordera

Ova

tabela ima


76/224


69

border(ivicu) 2 pixela

Ovatabela ima

3 reda i 3 kolone

Ovatabela jesirine 100% ekrana

Ovoje tabelabez bordera

Atributi

tabele sucellpading(rastojanje od ivica

celije)

Atributitabele sucellspacing(rastojanje izmedju

celija)

Atributtabela jesirine 700 pixela


77/224

Tabele

70


78/224


79/224

Frejmovi

72

Atributi taga BORDER : Vrednost atributa je debljina granice izmeu frejmova

izraena u pikselima. BORDERCOLOR : Definiše boju granice izmeu frejmova. Ovajatribut se primenjuje jedino pod uslovom da je atribut

FRAMEBORDER postavljen na aktivnu vrednost. FRAMEBORDER : Vrednost '1' ili 'yes' ovog atributa prikazuje

granicu izmeu dva frejma, dok vrednost '0' ili 'no' ne prikazuje. FRAMESPACING: Definiše razmak izmeu granica frejma i

njegovog sadržaja izraženog u pikselima.Primer korišenja navedenih atributa je:

Nova stranica sa frejmovima


80/224


73

U okviru vaseg citaca nije moguce prikazati ovu stranicu.

Atributi taga SRC: definiše adresu dokumenta koji e se uitati u okviru frejma. BORDERCOLOR : Definipe boju za ivicu frejma. FRAMEBORDER : Vrednost '1' ili 'yes' ovog atributa prikazuje

granicu frejma, dok vrednost '0' ili 'no' ne prikazuje. MARGINWIDTH: Definiše veliinu praznog prostor izmeu leve i

desne strane frejma i njegovog sadržaja izražen u pikselima. MARGINHEIGHT: Definiše veliinu praznog prostor izmeu vrha

i dna frejma i njegovog sadržaja izražen u pikselima. NAME: Specificira ime frejma koje se može koristiti u okviru

drugih programskih modula, kao što su JavaScript ili VBScipt. NORESIZE: Aktivnom vrednošu ovog atributa se spreava

korisnik da menja zadatu veliinu frejma. Ovaj atribut se samo navodi bez ikakve vrednosti.

SCROLLING: Vrednosti ovog atributa su 'YES', 'NO' i 'AUTO'.Ako je vrednost 'YES' scroll bar e se pojaviti bez obzira da li je

potreban iline, 'NO' e spreiti njegovu pojavu, a sa 'AUTO' e se pojaviti samo kada je potreban

Kada stranica sadrži odreeni meni, uvek se upotrebljavaju frejmovi.Korišenjem frejmova i linkova može se omoguiti promena jednog delastranice, dok bi preostali deo stranice ostao nepromenjen. Da bi se postigaoovakav efekat pri definiciji frejma, iji se sadržaj želi menjati treba mudodeliti i ime. Na primer:

Na ovaj nain se definiše frejm sa imenom MenjaSe u koji e se uitatistranica Primer.html. Sledee što treba uraditi je da kod definicije linka (kojise nalazi na drugom frejmu) se navede atribut target sa vrednošu koja

predstavlja ime frejma iji se sadržaj menja. Znai ako se želi napraviti linkkoji e sadržaj prethodno definisanog frejma promeniti i u njega uitati

stranicu www.google.com tada treba definisati sledei kod


81/224

Frejmovi

74

Promena frejma

Kao primer mogu poslužiti sledee tri strane: Glavna.html, meni.html i

PocetniSadrzaj.html. Njihov kod je:Stranica Glavna.html

< frame src ="PocetniSadrzaj.html" name=”MenjaSe”>

Stranica meni.html

Yahoo

Singidunum Google

Stranica PocetniSadrzaj.html

Ovo je stranica ciji ce se sadrzaj promeniti ako se aktiviraju linkovi s desne

strane!


82/224


75

Nakon pokretanja stranice Glavna.html dobija se sledei izgled u itau:

Stranica Glavna.html je pomou frejmova vertikalno podeljena na dva dela,u prvom frejmu, koji zauzima 25% stranice prikazuje se stranica meni.html,

a u drugom, koji zauzima 75% stranice prikazuje se stranicaPocetniSadrzaj.html. drugi frejm je nazvan menja se.Kada se aktivira link na levoj strani Singidunum dobija se sledei izgled uokviru itaa:


83/224

Frejmovi

76

Ovakav rezultat je dobijen, tako što je u okviru linka definisano da se menjasadržaj frejma pod nazivom MenjaSe, i da se u njega uita sadržaj stranicewww.singidunum.ac.yu.Ako se aktivira link Google, tada se dobija sledei izgled stranice u okviru

itaa:


84/224


77


Primer 1. Rad sa frejmovima.




85/224

Frejmovi

78




86/224


79


Vas citac ne podrzava frejmove

pa se ne mogu prikazati.

Primer 7. Primer promene sadržaja frejma.

Kod stranice main.html

Kod stranice page1.html


87/224

Frejmovi

80

page2.html

Kod stranice menu.html

Frame 1 Frame 2Frame 3

Kod stranice page1a.html

Sub frame a

Kod stranice page1b.html


88/224


81

Sub frame b

Kod stranice page1c.html

Sub frame c

Kod stranice page2a.html

Link withoutAnchor
Section 1Section 2Section 3

Kod stranice page2b.html

Section 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusceinterdum, arcu quis gravida mollis, nunc lectus commodo enim, ac tristiquesem enim eget urna. Vestibulum adipiscing leo nec libero. Phasellusvestibulum egestas sem. Phasellus id odio in orci pellentesque consequat.Sed ac pede. Pellentesque tincidunt. Nullam at elit. Aenean nibh.Suspendisse potenti. Etiam non mi. Nulla commodo adipiscing leo. Quisquedignissim

Section 2


89/224

Frejmovi

82

Curabitur dui sem, ultricies id, cursus at, blandit eu, quam. Nam felis.Mauris condimentum consequat risus. Quisque a nibh sit amet magnasagittis posuere. Duis imperdiet. Fusce congue nisi eu nibh. Etiam sit ametturpis at arcu faucibus ultricies.
Section 3
Sed in sem a nisl varius convallis. Curabitur est. Vestibulum tempormassa sed lorem. Maecenas tortor. Cum sociis natoque penatibus et magnisdis parturient montes, nascetur ridiculus mus. Pellentesque erat. Etiamconsectetuer felis non leo. Vivamus

Section 4

Nunc ac nisi in sem elementum semper. Duis nec tortor ut orci facilisis

porttitor. Nunc faucibus vestibulum felis. Sed nibh. Phasellus ligula.Praesent nisl. Class aptent taciti sociosqu ad litora torquent per conubianostra, per inceptos hymenaeos. Nunc diam, sed consequat nibh mi id ligula.Aliquam blandit fermentum nulla. Morbi elementum, diam at fermentumelementum, massa magna tincidunt justo, quis pretium enim massa sit amet

felis

Nakon pokretanja stranice main.html dobij ase sledei izgled stranice uokviru itaa


90/224


83

A nakon aktiviranja linka Frame3 dobija seledei izgled stranice:


91/224

Frejmovi

84


92/224


85

8. ZVUK I FILM

U okviru HTML stranice je mogue izvršavati razliite multimedijalnedokumente. U okviru ovog poglavlja se razmatra dodavanje zvunih ifilmskih dokumenata.

Prikazivanje multimedijalnih objekata u okviru itaaSledea slika opisuje nain prikazivanja multimedijalnih objekata u okviruitaa.

Kada korisnik traži odreenu stranicu, ita na osnovu unete adresekontaktira server na kome se stranica nalazi. Server ispituje MIME tip iekstenziju traženog dokumenta. MIME tip prdstvalja standardan nain da seidentifikuje sadržaj nekog dokumenta. On je integrisan u okviru HTTP

protokola i sadrži informacije o tipu i podtipu sadržaja, na primer da je

dokument tipa text/plain ili text/html ili image/gif ili application/x-director.Pomou MIME tipa je omogueno itau da prepozna kako e prikazatidobijene podatke.


93/224

Zvuk i film

86

Kada definiše MIME tip i ekstenziju dokumenta, server šalje klijentudobijene podatke. ita na strani klijenta preoznaje MIME tip dokumenta iispituje da li se dobijeni tip može prikazati samostalno u okviru itaa ili je

potrebanpoziv pomone aplikacije ili ugraenog plug-in modula.Pomone aplikacije su spoljašnje aplikacije u odnosu na ita i služe za

prikaz odreene vrste podataka. One su odvojene od itaa. Njihova prednost je što sam ita može biti manji i time se brže izvršava, a mane sušto se ove aplikacije moraju odvojeno instalirati i podaci se prikazuju uodvojenom prozoru, pa je mala mogunost integracije sa itaem.Plug-in moduli omoguavaju prikaz podataka u okviru samog itaa.Prednost korišenja ovih modula je dobra integracija i povezanost saitaem, oni su obino besplatni, ali se s druge strane moraju podesiti odstrane korisnika. Poželjno je da se omogui automatska instalacija.

Dodavanje zvukaKoristi se tag. Ovaj tag podržava uobiajene formate kao što su.wav, .mid, .mp3, i .au. Osnovna struktura taga je sledea:

Mogui atributi u okviru ovog taga su SRC: njegova vrednost je URL (relativna ili apsolutna putanja) do

audio dokumenta. CONTROLS: mogue vrednosti ovog atributa su CONSOLE i

SMALLCONSOLE. Vrednost CONSOLE definiše 144 piksela zaširinu i 60 za visinu. Vrednost SMALLCONSOLE definiše 144 i 15

piksela respektivno.

HEIGHT and WIDTH: Za neke itae ovo su obavezni atributi taga. Na primer njihovo izostavljanje u NetscapeCommunicator itau prouzrokuje nepredvieb rad. Ako se za oveatribute definišu vee vrednosti od dimenzija konzole, sivi prostor sedodaje u dodatom prostoru.

LOOP: Default vrednost ovog atributa je FALSE, što prouzrokuje dase audio dokument izvršava samo jednom. Ako se vrednost postavina TRUE, dokument e se kontinuirano izvršavati. Takoe, mogue

je specificarati i odreeni broj koliko e se puta izvršiti dokument.


94/224


87

AUTOSTART: Postavljena vrednost TRUE ovog atributa doprineeda se audio dokument izvršava kada se stranica uita. VrednostFALSE oznaava da korisnik mora aktivirati odreeno dugme uokviru konzole da bi se dokument izvršio.

HIDDEN: Postavljena vrednost TRUE ovog atributa doprinee da se

sakrije konzola. Default vrednost je FALSE sa kojom je konzolavidljiva korisniku. Ako su vrednosti atributa HIDDEN iAUTOSTART postavljene na TRUE dobie se isti efekat kao ikorišenjem taga BGSOUND da datim audiom dokumentom.

VOLUME: Vrednost ovog atributa je broj izmeu 0 i 100. Manji broj definiše tiši zvuk.

ALIGN: Mogue vrednosti ovog atributa su LEFT i RIGHT.

HSPACE i VSPACE: Slino kao kod taga ovi atributi sekoriste da bi se definisao u pikselima horizontalni odnosno vertikalni prostor oko konzole.

Može se koristiti više tagova u okviru iste stranice, ali se preporuuje da nikada više od jednog ne bude u autoplay modu. Ne preporuuje se ni korišenje .wav ili .au dokumenata zbog njihove veliine.Video dokumenti se prikazuju na slian nain, takoe korišenjem

taga i njegovih opisanih atributa- Primer korišenja:

Kod video dokumenata ovaj tag ima i atribut CONTROLLER, sa moguimvrednostima TRUE i FALSE, i definisanjem prikaza ili ne kontrolera safunkcijama.


95/224

Zvuk i film

88


96/224


97/224

Forma i elementi forme

90

serveru navode se u ok

programiranje grafičkih aplikacija

Documents