Bosko Nikolic

PROGRAMIRANJE GRAFlKIH APLIKACIJA

Beog rad 2006

Sadrzaj

HTML-UVOD

lnternet i L

Struktura HTML stranice

FORMATIRANJE TEKSTA

Tekst

Paragraf i odeljak

Font

Novi red

Specijalni znaci

Razdvojna linija

LISTE

Numerisane i nenumerisane liste

Definicione liste

Gnezdenje lista

1 SLIKE

BODYtag

IMG Tag

LINKOVI

TABELE

FREJMOVI

FORME 1 ELEMENTI FORME

Komandno dugme

Tekst polja i polje za sifru

Polje za potvrdu

Radio dugmad

Opadajuca lista

Tekst polje

Skrivena promenljiva

PRILOG 1

PRILOG 2

PRILOG 3

1. HTML - UVOD

Internet i HTML

L (HyperText Markup Laguage) veoma jednostavan jezik koj i sluzi za izvrsavaje programa dalj iu. Ovaj jezik predstavlj a standard za Internet dokumente. Sa razvojem Itereta doslo do pojave nove vrste dokumenata - hiperteksta. tekst koj i sadrzi veze i l i likove ka drugim dokumentima i l i na samog sebe. Precizij e, hipertekst skup straica u oiku datoteka, medusobno povezanih l inkovima koje su umetnute u stranice. Na ove likove se moze klikuti. Za razliku od oicnog teksta, koj i se cita linearno (sleva deso, odozgo iz), hipertekst se cita prateci hiper-veze u tekstu, dakle, ne nuzno na l ieara i.

L straice imaju eksteziju .html i l i .htm, nalaze se u odredenom direktorijumu servera vezaog Iteret, sto ih Cii dostupim na web-u. ipertekst , tekst koj i sadrze veze i l i l inkove ka drugim dokumentima i li na samog sebe. Precizije, hipertekst skup stranica, u oiku datoteka, medusobno povezanih likovima koje su umetute u straice. Na ove l ikove se moze kliknuti. Za razliku od oicnog teksta, koj i se Cita liearo (sleva desno, odozgo nanize), hipertekst se cita prateci hiper-veze u tekstu, dakle, uz liearan nacin. Postoj i veCi broj jezika koj i omogucavaju da se precizno opi se izgled i sadrzaj j edog teksta. Od posebog su z :

SGL (skr. od Standard General Markup Language), i LaTeX (za matematicke tekstove), PostScript (jezik laserskih stampaca), RTF (skr. od Rich Text Format), .

Najzacajij i jezici za opis hiperteksta su : SGL, L (skr. od HyperText Markup Language), pojednostavlj ena verzija SGML-a, L (skr. od d/ L) i L (skr. od Extensi/e Markup Language, "kompromi s" izmedu preterane

slozeosti SGL-a i jedostavnosti L-; nj egova standardizacij a u toku)

Za geerisaje L straice potreban najoicnij i tekst editor, na primer Notepad. Nalazi se u Start meiju pod Programs->Accessories. Osnovno koriscenje ovog programa opisao u prilogu. Za pisaje L programa mogu se koristiti i specijalni alati, na primer Front Page. Stranica se moze videti u okviru Web browser-a, Netscape Navigator i l i Internet Explorer

L komade se pisu u vidu tzv. TAG-ova. Jedan tag ustvari komanda koja govori browseru sta i kako da uradi tj . koj i acin da prikaze sadrzaj vase stranice. L tagovi su "case isesitive" tj . svej edno da li ih pi sete malim ili vel ikim slovima. Tagovi se pisu uutar ozaka "" (bez znakova navoda) npr : . Ovaj tag se alazi pocetku svakog L dokumenta govori browseru da faj l koji upravo da ucitava HTML dokument i da kao takvog treba i da ga prikaze. Vecia tagova ima i pocetni i zavrsni tag. Zavrsni tag se doij a dodavajem zaka "/" i ozacava mesto na kom prestaje dej stvo pocetnog taga. Tako se na

kraj L dokumeta pise zavrsi L tag: i ovaj tag govori browseru da to kraj L dokumeta. Vrste tagova

prosti tagovi za opisivaje jedostavih elemeata logicke strukture. O!ika su : slozei tagovi su zagrade oika tekst kojima opisa izgled dela teksta

tekst.

atributi slozeih obelezja oika:

TEKST SE PRIKAZUJE

2. FORMATIRANJE TEKSTA

Na pocetku kj ige avedei su razlozi astaka i ciljevi ovog programskog jezika. Istakuto da jegova prvobita m bila sto brza i jedostavij a razmea i pregled dokumeata. Zato i HTML poseduje Citav iz tagova koji omogucavaju zeljeo formatiraje odredeog teksta. U okviru ovog poglavlja se opisuju ajvazij i tagovi iz ove grupe sa primerima korisceja. Naslov Uvek okviru ekog teksta potrebo istaci aslove koje postoje. Takode, aslovi se mogu razlikovati vazosti i ivou teksta kome preipadaju. Zato se HTML-u aslovi (egl . headers) prikazuju prema relativom ivou ciframa od 1 do 6. Opsti oik taga za aslov :

Tekst za aslov ivoa gde doija vredosti od 1 do 6. Primer:

Naslov Hl Naslov 2 Naslov

Navedei kod se L straici prikazuj e sledeCi i :

Tekst

Naslov Hl Naslov 2 Naslov

U uvodom poglavlju vd da L i case sesitive jezik. Treba aglasiti da postoj i razlika izmedu aredi, ds tagova, koj i isu case sesitive, i teksta koj i se prikazuje okviru straice, koj i jeste case sesitive. zaci da k kako i s eki tekst, tako se i prikazati (ako se koriste tagovi za formatiraj e) straici. Takode, ako se drugaCije aglasi tekst uutar L straice poravat uz Ievu strau. Cetriraj e teksta il i ilo kog drugog elemeta straice se doij a pomocu tagova i . Tako se doija sledeCi rezultat :

OVO CENTRIRAN TEKST izvrsavajem sledeceg koda

OVO CENTRIRAN TEKST

Paragraf i odelj ak Tekst straice se moze podeliti odredei broj Iogickih celia. sv celie L jeziku su paragraf i odeljak Prelazak ovi paragraf se postize tagom. Ovaj tag odvoji tekst sa razmakom izmedu redova. Na kraju paragrafa se preporucuje da se umete i j egov zavrsi tag, ali vecia browsera ga zahteva, tako da se slobodo moze i izostaviti. Ukoliko ravom tekstu sledi paragraf za paragrafom, tag se moze izostaviti. Tekst se, ako se ista avede, poravava uz Ievu margiu. rv drugacij i i se postize align atriutom okviru ovog taga. Align atribut moze imati tri vredosti : left, ceter i right i koristi se sledeci i:

Primer: levo

Kod koj i prikazuje gorji primer :

cetrirao

levo cetrirao deso

deso

Odelj ak (egl . di\Jision) se dobija upotrebom tagova i . Tekst koj i predstavlj a odeljak se od ostalog teksta odvaja ovim redom bez razmaka. Ovaj tag moze imati atriut za pozicioiraje ALIGN sa istim vredostima kao tag . Font

Ukoliko se s aglasi kojim fotom se zel i da bude ispi sa tekst straici, browser koristiti default fot, uobicajeo Times New Roma. L omogucava ekoliko promea vezaih za postojeCi fot pomocu taga. Ovaj tag moze imati sledece atriute: face, size i color. Atributom face se defiise tip fota koj im se zel i da tekst bude ispi sa. Na d straici se moze koristiti i vise razliCitih fotova. se vodititi racua da korisik koj i uCitava straicu mora imati istal ira fot koji vd svom racuaru. U suprotom j egov browser prikazati tekst default fotu. Zato treba koristiti k egzotice fotove, vec treba upotrejavati samo siroko rasprostrajee fotove. Ako se zeli da straica bude ispisaa primer "Comic Sas MS" fotom d treba avesti sledeCi kod :

Ovde dodje vas tekst. i doija se rezultat

Ovde dodje vas tekst. Moguce avesti i ekoliko fotovau alterativi, d za drugim, odvojeih zarezom. Ako posetilac straice svom racuaru m istal ira prvi fot sa l iste, ga prikazati sledecem sa liste, i tako dalje.

Evo primera ekoliko popularih fotova koj i se mogu koristiti svojim straicama:

Kod za prethodi primer sledeci :

Verdana Arial

Courier Bedrock

Times New Roma Comic Sans MS

Verdaa
Arial
Courier

Bedrock
Times New Roman
Comic Sans MS

Pored naCina ispisivanj a teksta, okviru stranice moze se definisati i vel iCina slova. Za ove potrebe koristi se size atriut. L razlikuj e 7 veliCina slova koje nose vrednosti od 1 do 7. Podrazumevana veliCina 3. Razmera slova data:

size 1, size 2, size 3, size 4, size 5, size 6 / 5 i z 7 Primer L stranice i koda prikazane stranice:

Ollllll!I!llEID[_I-D [Glx ]

,_.E_ile_E. _dit...,...':Li_ ew ...... ._o....,...Io_m_m_un_ ica_to_r _.t:!._e_IP __ 1 'i'='='='=="="=""' ;,;,,;;" "=

lstrike 1 strike Osim toga mogu se pisati i slova indeksu i l i eksponentu. Indeks se dodaje pomocu taga eksponent pomocu taga . Sledeca tabela prikazuj e primer nj ihove primene:

H2O

22=4

Novi red Napomenuto da se kod L stranice moze pisati ilo kom tekst editoru. Tekst ispisan editoru nece se uvek preslikati na HTML stranu na naCin kako se pojavljuje editoru. Primeri za ove specij alne slucaj eve su novi red, tab i anko znaci . ZnaCi, novi red (engl . break) doij en tekst editoru nece se prikazati na HTML stranici, vec tekst iti i spi san j ednom redu. Ako se zeli novi red mora se koristiti tag
. Ovo prost tag, ne postoj i kraj taga . Tekst se browseru automatski lomi na kraju reda. Da i se postiglo da neki deo teksta bude j ednom redu koriste se tagovi i i umetanj em dela teksta koj i se ne zel i prelomiti izmedu ovih tagova. Primer:

ovde i spi san tekst koj i se nece prelomiti na kraju reda doij a se pomocu sledeceg dela koda

ovde ispisan tekst koj i se nece prelomiti na kraju reda Ukoliko tekst prevelik da stane j edan red okviru ekrana, na dnu prozora se pojaviti horizontalni "scrollar" i korisnik morati da skroluje da i ga proCitao. Zato treba iti obazriv sa koriscenjem ovog taga. Ukoliko se zeli da se red prelomi, ali na tacno odredenom mestu, to se moze postiCi koriscenjem taga. Ovaj tag ne zahteva zavrsni tag. Za razliku od
taga koj i obavezno prelomiti red, ovaj tag prelomiti red samo ako to neophodno tj . ako tekst pre njega predugacak da i stao jedan red. Ovaj tag takode omogucava da se prelomi neka dugacka na kraju reda. Specijalni znaci

U tekst editorima moguce korisiti i simbole (sluzi za prikazivanj e odredjenog broja praznih mesta) i anko rezmake, ali se na HTML stranici nece videti nj ihov efekat. Ako se .Zeli anko razmak L stranici koristi se naredbe &nbsp . Pomocu ove naredbe definise se jedno anko mesto. Ako se zeli 8 anko razmaka jednostavno se napise osam ovakvih naredi j edna za drugom odvojenih tackom-zarezom: &nbsp ;&nbsp ;&nbsp ;&nbsp ;&nbsp ;&nbsp ;&nbsp ; OdgovarajuCi L kod izgleda ovako: Primer:

.

se doij a pomocu sledeceg koda: &nbsp ;&nbsp ;&nbsp ;

.

Pored ove naredbe mogu se koristiti i sledece (u tabeli prva kolona oznacava L naredbu, druga rezultat koj i se doij a okviru L strane) : < < > > & & :

Razdvoj na linij a Razdvojna linij a (engl . rule) se obelezava etiketom sa opcionim atriutom NOSHADE Ovo prosti tag: ne postoj i kraj taga . Primer SIZE - dej ina l inij e Ako se zeli da se prelazak na neku novu celinu jos vise naglasi koristi se horizontalna linij a (engl . rule) pomocu taga . Ovo prosti tag: ne postoj i kraj taga . Primer:

Doija se sledeCi rezultat

Tag crta tanku sivu l iniju preko cele stranice. I ovaj tag moze sadZati odgovarajuce atriute koj ima mozete regulisati izgled linije . Ako se ne zeli da l inija bude zasencena, vec potpuno crna potrebno koristiti atriut noshade. Ako se zeli promeniti dimenzij e l inije, koriste se sledeca dva atriuta: size i width. Atriutom size odredjuj e se dej ina linij e pikselima, atriutom width odredjuj e se duzina l inij e i l i pikselima i l i procentima sirine stranice. Ovaj tag takode moze sadZati align atriut kome se moze dodeliti i sta vrednosti kao i za pasus. linij e se moze regulisati pomocu color atriuta na vec opisani naCin. Na primer, ako se zeli da se nacrta nezasencena crvena l inija koja iti centrirana i Cij a dej ina iznositi 6 piksela protezace se preko 50% sirine stranice, potrebno izvrsiti sledeCi kod : Tako se doiti sledeca linija :

Treba naglasiti da Netscape Navigator ne podZava atriut color za horizontalne l inije, tako da Navigatoru ova linij a iti siva.

Primeri za rad u laboratoriji

Primer 2. Ispisivanje naslova razlicitih velicina.

Naslovi Naslov Hl Naslov 2 Naslov Naslov 4 Naslov HS Naslov

Primer 3. Primeri osnovnih tagova unutar L stranice.

Primeri osnovnih tagova L HTL (HyperText Markup Language) veoma jednostavan

jezik cije osnove svako moze da se brzo savlada. U okviru ovog kursa proucavaju se osnove L- koje su dovoljne da se naprave jednostavne ali sasvim zadovoljavajuce prezentacij e.

Svaki put kada krstareci internetom naletite na neku zanimlj ivu

stranicu , ne znate kako napravljena, nj en izvorni HTML kod mozete pogledati ako u linij i menija odaberete: View -> Source (il i View -> Page Source u Netscape Navigatoru) .

HTL se koristi i u okviru
ASP stranica
JSP stranica,
Zajedno sa JavaScriptom
i l i jezikom
ili nekim drugim script jezikom

HTLje hi per- tekst- Markup jezik. Kad savladate osnove L- mozete preci na upoznavanje JavaScripta

Primer 4. Primer paragrafa.

L Primer HTL Uvod

Ovo primer prvog paragrafa.

Koj i se radi prvom casu.

Drugi paragraf.

Ovo cetrirai paragraf

Primer 1. Rad sa fotovima.

Rad sa fotovima The l ibrary has arragemet with the cafeteria to provide refreshmets durig the weekly coffee house lectures.

Primer 2. Rad sa prelomom liije .

Rad sa prelomom liije

Come Scroll with , away to the right, as 1 l i st out all of the log aswers to the meaig of life accessie l to those that scroll, scroll, scroll".

3. LISTE

Cesto okviru teksta potrebno navesti nekoliko stavka odredenom redosledu. HTML omogucava definisanje vise vrsta lista, koj ima se moze postiCi zeljeni efekat. U opstem slucaju li ste mozemo podeliti tri grupe:

nenumesane, numesane 1 definicione liste.

Za sve tri grupe lista zajednicko da se moraju definisati stavke liste i naCin prikazivanj a pojedinacnih stavki .

Numerisane i nenumerisane liste Osnovna razlika izmedu ove dve vrste l isti ta sto se kod numeri sanih l ista ispred pojedinacnih stavki l iste nalaze redni brojevi i l i slova, kod nenumerisanih l ista pojavljuju se specijalni simbol i . Za liste vazi da se pojedine stavke l i ste definisu pomocu taga ( ovaj tag ne zahteva zavrsni tag) . Numerisane li ste koriste taga, nenumerisane liste taga. Nenumeri sane liste su liste sa koj ima se nabraj aju stavke, bez navodenja rednog broja. Opsta struktura za ovu vrstu li sta (UL - unordered list) :

prva stavka . druga stavka . . .

poslednja stavka .

Na primer: jabuke banane l imun

Kod za prethodni primer :

jabuke banane limun

Simbol ispred stavke l iste moze se definisati i na drugi oik. Koristi se atriut type koj i moze uzimati vrednosti :

circle - krug disc - pun krug square - kvadrat

Primer sa kvadratima: jabuke banane l imun

odgovarajuCi HTML kod :

jabuke banane limun

Numerisane li ste su liste sa kojima se nabrajaju stavke sa navodenj em rednog broja ili slova. Opsta struktura ove vrste l iste (OL - ordered l i st) :

prva stavka . druga stavka .

poslednja stavka .

Primer numerisanih l ista:

1. jabuke 2. banane 3. l imun

koja se doija sledeCim HTML kodom:

jabuke banane limun

1 ovom slucaju se mogu promeniti default arapski brojevi koj i se pojavljuju ispred stavki l iste. Opet se koristi atribut type i ovom slucaju moze imati sledece vrednosti :

- vel ika slova - mala slova 1 - rimski brojevi i - mali rimski brojevi

Prethodni primer sa vel ikim rimskim brojevima:

1. jabuke 11. banane

. l imun

odgovarajuci HTML kod :

jabuke banane limun

Definicione liste Ova vrsta listi ima donekle drugacij i izgled od prethodnih. Sada se pored same stavke liste moze definisati i pojam koj i se navodi i spred stavke. Ime definicione l iste ( engl. definition list) dobijeno se svaki clan liste sastoj i iz dva dela: pojma koj i se definise i nj egove definicije . Pojmovi se poravnavaju uz levu marginu, nj ihove definicij e se pojavljuju u novom redu i uvucene su za odreden broj mesta. Za formiranje ove vrste li sta koristi se tag , dok se unutar clana l iste pojmovi definisu pomocu taga, nj ihove definicije tagom. Opsta stuktura ove vrste li ste :

prvi pojam definicij a prvog pojma drugi pojam definicij a drugog pojma

poslednji pojam definicij a poslednj eg pojma

Primer za ovu vrstu listi :

Prolece : traje od 2 1. marta do 2 1. juna.

Leto : traje od 2 1. juna do 2 1. septembra.

Jesen: traje od 2 1. septembra do 2 1. decembra.

Zima: traje od 2 1. decembra do 2 1. marta.

L kod za prethodni primer :

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

Jos jedan primer :

-numerisane li ste su li ste sa kojima se nabraj aju stavke sa navodenjem rednog broja ili

slova. -nenumeri sane liste

su li ste sa kojima se nabraj aju stavke bez navodenja rednog broja.

Rezultat koj i se dobija izvrsavanjem prethodnog primera: - numerisane liste

su li ste sa koj ima se nabrajaju stavke sa navoc!enjem rednog broja il i slova. - nenumerisane li ste

su li ste sa koj ima se nabrajaju stavke bez navoc!enja rednog broja.

GneZdenj e lista Svi primeri koj i su do sada razmatrani su podrazumevali daje stvka liste oican tekst, sto opstem slucaju ne mora da bude. Stavka l i ste moze da bude i lokoj i HTML element, i neka druga lista. Ako to slucaj dolazi do gnezaenj a li sta, t.j . okviru jedne liste pojavljuje se druga nova lista. U sledecem primer defini sana nenumerisana lista, okviru koje prva stavka neka nova nenumerisana li sta, druga stavka numerisana liste:

Neke vrste voca su :

jabuke banane limun

Neke vrste povrca su :

sargarepa kupus

Rezultat prethodnog primera:

Neke vrste voca su : jabuke banane l imun

Neke vrste povrca su : 1 . sargarepa 2. kupus

Primeri za rad u laboratoriji

Primer 1. Primer opisne l iste

Opisne liste

piko- prefiks nekoj jedinici koji pokazuje mi lioniti deo mil ionitog dela te jedinice;

nano- prefiks nekoj jedinici koji pokazuje mil ij ard iti deo te jedinice;

mikro-prefiks nekoj jedinici koj i pokazuj e mil ioniti deo te jedinice;

Primer 2. Primer opisne l iste sa formatiranom odrednicom

Formatirane opi sne liste

piko-

prefiks nekoj jedinici koj i pokazuje mil ioniti deo mil ionitog dela te jedinice;

nano- prefiks nekoj jedinici koj i pokazuje milijarditi deo te jedinice;

mikro- prefiks nekoj jedinici koj i pokazuje mil ioniti deo te jedinice;

Primer 3. Primer numerisane l iste

Numerisane l iste Neki predmeti 1. godini FPI

Poslovna informatika Sociologija Osnovi ekonomije Osnovi prava

Primer 4. Primer nenumerisane l iste

Nenumerisane liste

Tokom zime ima jabuka limuna banana.

Primer 5. Primer numerisane l iste

Numbered list : Apples Bananas Lemons Oranges

Letters list : Apples Bananas Lemons Oranges

Lowercase letters list : Apples Bananas Lemons Oranges

Roman numbers l ist : Apples Bananas Lemons Oranges

Lowercase Roman numbers l ist : Apples Bananas Lemons Oranges

Primer 6. Primer nenumerisane l iste

Disc bullets list : Apples Bananas Lemons Oranges

Circle bullets list : Apples Bananas Lemons Oranges

Square bullets list : Apples Bananas Lemons Oranges

Primer 7. Primer liste unutar liste

A nested List : Coffee Tea Black tea Green tea

Milk

Primer 8. Primer neuredene liste

A Definition List : Coffee Black hot drink Milk White cold drink

4. 1 SLIKE su sastavi deo svake dobro dizajirae straice. Zato L podZava brz i j edostava rad sa paletom , moguce promeiti boju pozadie, slova, likova, . . . Svi elemeti straice rad sa bojama orgaizuju idetico, i to dva i i l i preko prreredefiisaog egleskog aziva (r. "yel low" za zutu boju), i l i preko heksadecimale RGB vredosti ispred koje obavezo treba staviti simbol # (r. #ffffOO).Ako se koristi RGB paleta vredost odredeog atributa za ima opsti oik "#cczzpp" gde su , zz i heksadecimale vredosti za itezitet crvee, zelee i plave . Svaka od ovih vredosti moze iti broj izmedu i 255 (u dekadom brojom sistemu) ili izmedu i FF (u heksadecimalom brojom sistemu). se mogu odrediti avodej em aziva egleskom umesto komiacijom heksadecimalih cifara prema tabeli koju data od strae SGIR (Service Geeral Iformatique et reseaux, Uiversite R Descartes, Pari s). U prilogu data paleta , gde su tabelaro prikazae ajvazij e , j ihov egleski aziv i RGB kod. BODY tag U prethodim poglavlj ima i lo reci BODY tagu i r da ovaj tag defiise samo telo straice. Globale promee elemeata straice se postizu upravo pomocu ovog taga, se pozadia i tekst L straice mogu pojaviti citavom spektru . pozadie se odreduje atributom bgcolor okviru taga. U slucaju da se prilikom vd taga BODY izostave opisai atriuti, citac im dodeljuje predefiisae vredosti . Na primer, promea pozadie zutu doija se sledeci i :

i l i :

primera koda dati isti rezultat. Pored pozadie, moze se mejati i teksta, pomocu atributa text. Na primer, ako potrebo prethodoj straici defiisati zelea slova treba apisati sledeci kod :

i l i i l i i l i

Na ovaj i defiise se sv slova straice, ako se zeli da samo d deo straice sadrzi slova zeleoj boji mora se kori stiti, raij e si, atribut color taga . Pored promee pozadie i l i slova straice efekta promea se moze doiti i defiisajem odredee slike kao pozadie. Da i se postigao ovaj efekat, prvo treba odabrati sliku ekom od podesih elektroskih formata. Treba voditi racua vel icii odabraog faj la, se radi Iteret aplikacij i Cije ograiceje pri stup i izvrsavaje udaljeom racuaru . ajpodesij i formati smatraju se JPEG i GIF format, zbog stepea kompresij e origialog faj la. Pored veliCie sl ike, sledeca stva kojoj treba voditi racua lokacija faj la sa slikom okviru aplikacije. Najjedostavije reseje da se alazi istom di rektorijumu gde se alazi i aplikacija. Druge mogucosti razmatrace se aredim odelj cima kada se bude di skutovalo apsolutoj i relativoj putaj i. i promea , pozadia oiku slike se defiise pomocu odgovarajuceg atributa BODY tagu. Atribut ovom slucaju background.

Na primer, ako se zeli da se kao pozadina stavi sl ika "pozadinal .jpg" tada odgovarajuci tag izgledat i :

Pri definisanju pozadine oiku slike, dobra praksa da se definise i bgcolor atriut. Razlog tome mogucnost da korisnik okviru svog Web citaca i skljuCi automatsko uCitavanje slike. Tada se definisana sl ika nece pojaviti okviru stranice. Moze se desiti i slucaj da slika predstavlja neku tamniju povrsinu, se i slova menja neku svetliju, cak i belu. U tom slucaju kada se stranica ucita bez defini sane sl ike, dobijaju se bela slova na beloj pozadini, tekst stranice za korisnika nevidlj iv. Da i se izbegli ovakvi slucajevi BODY dozvoljava definisanje i background i bgcolor atributa okviru istog taga. Naravno, upotreba atributa ne znaci da se i sto vreme prikazati i defini sana slika i pozadine, vec atribut bgcolor definise boju pozadine slucaju da se slika ne uCita. ZnaCi Citac ovakvim slucajevima BODY taga uvek prvo pokusava da prikaze sliku kao pozadinu, tek kada ne uspe prikazuje pozadinu trazenoj boj i. Prethodni primer sa primenjenom napomenom i izgledao :

right - postavlj a sliku uz desnu marginu :

OdgovarajuCi tag glasi :

top - poravnava sliku sa vrhom slova tekucoj l inij i :

OdgovarajuCi tag glasi :

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

OdgovarajuCi tag glasi :

OdgovarajuCi tag glasi :

EIGHT i WIDTH atriuti Da i se promenila originalna veliCina slike, zeljena veliCina se moze definisati pomocu dva atriuta: height i width. Vrednost sirine i visine stranice se moze zadati i l i pikselima i l i procentima. Da i slika zauzimala 50% sirine prozora i 30% visine prozora L stranice, potrebno napisati sledeCi kod :

Ako se definise samo height i l i samo width atriut, druga dimenzij a iti uvecana srazmerno sa definisanom karakteristikom tako da proporcij e slika ostati i ste.

HSP i VSP atriuti Prazan prostor izmedu slike i okolnog teksta, i l i nekih drugih elemenata stranice, moze se definisati pomocu dva atriuta: hspace i vspace. Vrednost ova dva atriuta se zadaje pikselima.

Izgled dela stranice:

se moze doiti pomocu koda

Slika kao link

Slika L dokumetu moze predstavlj ati i polazi cvor hipervezi . Dolaza adresa se tada avodi kao kod hiperveze, umesto teksta koj i se moze aktivirati avodi se tag IMG. Opsti olik :

"tag IMG za zelj eu sliku"

Primer:

Atributi etiketi BODY Iz teksta beloj pozadii sa crim slovima

poziva se ovde tekst
iz prethodog primera.

za atribut LIN za atriut VLIN za atribut ALINK

Primer 3. Defiisaje pozadie sl ikom.

Slika kao pozadia

5. LINKOVI

L potreba da bi se jedostaviji i real izovali kako sami hiperdokumeti, tako i veze izmedu jih. Veze izmedu razlicitih straica se azivaju l ikovi il i hiperveze. omogucavaju jedostava prelazak sa jedog mesta straici drugo mesto uutar same straice il i sasvim v straici. U dalj em tekstu se koristiti termii polaza pozicija, za mesto odakle se prelazi, i krajja pozicij a, za mesto gde se dolazi. Likovi koji se mogu defiisati okviru d L straice mogu se podeliti tri grupe:

krajja pozicija se alazi straici koj a okviru iste aplikacije i alazi se istom serveru gde i straica sa polazom pozicijom,

krajja pozicija se alazi straici koja pripada istoj apl ikaciji , vec se alazi drugom serveru,

krajja pozicija pripada istoj straici kao i polaza pozicija Za sve tri vrtse l ikova jedistvea defiicij a t pozicije koriscejem taga . Opsti izgled ovog taga :

" . .

Sitaksa ovog taga podrazumeva da se okviru polaze pozicije opisu : fizicka pozicija polaze pozicije i fizicka lokacija krajje pozicije.

Polaza pozicija ozacava straici mesto sa koga se prelazi eki drugi deo straicei defiise se pomocu atributa href

polaza pozicij a sa koje se prelazi krajju

Citac i prikazuje polazu poziciju HTML straice oiku elemeta koji se moze klikuti misem, graficki istakut podvlacejem i drugom bojom slova od slova samog teksta uutar straice.

RAJNJA POZICIJA NA STRANICI U OKVIRU ISTE APLIKACIJE Najjedostaviji slucaj rada sa l ikovima prelazak straicu okviru iste apl ikacije. Ovaj slucaj se s koristi, to upravo i svrha upotrebe L jezika, primer likovi za kretaje apred i azad kroz aplikaciju. Aktivirajem ove vrste likova apusta se tekuca straica i dalje izvrsavaje se astavlja k drugoj straici tekuce aplikacije. Kod ove vrste likova koristi se taga sa atriutom hrefi azivom straice do koje se zeli da se apravi veza. Na primer ako se zeli da se apravi veza do straice Prva.html treba apisat i :

Veza do straice Prva.html

Kada se misem klike tekst "Veza do straice Prva.html" citacu se prikazati straica Prosla.html . Prelazak se izvrsava vrh straice cija se adresa alazi okviru href atriuta. Ako se zeli da se dalji rad astavi od ekog odredeog mesta okviru druge straice tada treba komiovati prvu i trecu vrstu likova, i koji kasij em tekstu iti razmatra. Straica sa krajjom pozicijom osim sto pripada istoj apl ikaciji, ds serveru, opstem slucaju mora da se i fizicki alazi istom direktorijumu gde i straica sa polazom pozicijom. Na primer zeli se da se apl ikacij a podeli vise logickih celia i straice svake

celine da se nalaze azliCitim diektoijumima. Postoje dva esenj a ovog m, to d sa apsolutnim i elativnim putanjama. Koiscenje apsolutnih putanja podazumeva okviru href atiuta navodenje pune putanje do stanice sa kajnjom pozicijom, na im hef=" c:\Apl ikacije\Poslovanje\lijent\Prva.html) . Ovaj naCin nije podesan, opstemslucaju tenutku pisanja koda ne zna se tacno mesto na serveru gde se aplikacija nalaziti, samim tim i putanja do neke stanice. Koiscenje elativnih putanjaje mnogo podesnije, se zasniva na ketanju odnosu na diektoijum stanice sa polaznom pozicijom. Neka data sledeca struktura aplikacije koja se nalazi na severu www . singidunum.ac.yu . Takode neka diektoijum sadr.Zi stanice 1 i 2, stanicu 3, Z stanicu 4.

-:- 1 : .... o z

Ako se koiste apsolutne putanje, da i se doslo do stanice potebno navesti adesu http ://www . singidunum.ac.yu/X/Y/3 .html. Apsolutna adesa odedena jednoznacno pomocu unifomnog lokatoa esursa (sk. URL, od engl. Unifom Resource Locato) stanice 3 . html . Koiscenje elativne putanje umnogome jednostavnije i azmotice se nekoliko slucajeva. Na im: Za stanicu 1 ,

elativna adesa stanice 2 "2 .html" ; elativna adesa stanice 3 "Y/3 .html" ; elativna adesa stanice 4 "Y/Z/4 .html"; Za stanicu 3, elativna adesa stanice 2 " . .12 .html" (simbol . . oznacava diektoijum iznad diektoijuma gde se nalazi stanica sa polaznom pozicijom); elativna adesa stanice 4 "Z/4. html"; Za stanicu 4, elativna adesa stanice 2 " . ./. .12.html"; elativna adesa stanice 3 " . .13 .html". Datim pimeima ilustrovano kako se postupa, ako se stanica sa kajnjom pozicijom nalazi

diektoijumu i spod ili iznad diektoijuma sa stanicom sa polaznom pozicijom.

RAJNJA POZICIJA NA STRANICI IZV AN ISTE APLIKACIJE Druga vstu su linkovi do stanice nekoj sasvim drugoj pezentaciji koja moze iti postavlj ena na acunaru koj i se nalazi na nekom sasvim drugom severu. Da i se pistupilo toj pezentaciji potebno navesti celu web adesu te pezentacije. Opsti oik adese koja se pojavljuje kao vednost href atiuta

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

Na im ako se okviru pezentacije zeli uspostaviti veza sa Univezitetom Singidunum Beogadu, Cija adesa www . singidunum.ac.yu, tada href atiut izgleda:

Link ka Univezitetu Singidunum

Na stanici se pikazati tekst 11 Link ka Univezitetu Singidunum 11 i ako se misem klikne na njega Citacu se pojaviti pocetna stanica pezentacije Univeziteta Singidunum.

Ovakav i adresiraje se temelji pojmu URL, koji omogucio da se precizo avede adresa straice sa krajjom pozicijomi, ma gde bio fizicki locira. U opisivaju ove adrese moze se desiti vise slucajeva u zavi sosti od toga koliki deo URL-a pozat u tom treutku.

RAJNJA POZICIJA NA ISTOJ STRANICI U ovom slucaju potrebo u okviru iste straice t defiisati i krajju poziciju. Primer moze iti da se kraju straice apravi l ik koj i korisika koji ga aktivira vraca vrh straice Za ovu vrstu likova prvo se apravi ozaka mestu straici gde se alazi krajja pozicijia. Ozaka se doija pomocu atributa u tagu :

tekst krajj e pozicije sa koje se prelazi iz polaze pozicije

Atribut N i obaveza. Ukoliko se izostavi, citac se pozicioira pocetak straice sa krajjom pozicijom, i zu poziciju. ZaCi da i se defiisala veza izmedu dva dela iste straice potrebo uraditi sledece :

polazoj poziciji avodi se tag sa imeom krajje pozicije:

tekst polaze pozicije

krajjoj poziciji se avodi tag koj i defiise ime krajje pozicije:

tekst krajj e pozicije

Izmedju pocetog i zavrsog taga moze stajati ilo koji elemet straice (tekst, slika, " .), mora stajati id elemet, kao sto slucaj u prethodom primeru. Ovaj tag proizvodi i kakav vidljiv efekat u L straici - deluje u pozadii straice i sluzi citacu da se lakse orij etise. Ako se zeli da se uspostavi veza sa ekom drugom straicom, ali sa pocetkom te straice, vec ekim drguim delom, potrebo koristiti i prvu i drugu vrstu likova. Opet se defiise mesto odakle se zeli astaviti sa pregledom pomocu atribut href u tagu sa avodejem imea straice, ali se dodaje deo #ime _ krajnje _pozicije, da i se pozicioiralo krajju pOZICIJU. Neka se krajja pozicija alazi u okviru straice PrimerLika.html, tada treba avesti :

tekst polaze pozicije

Sada kada korisik klike misem lik "tekst polaze pozicije " odlazi se ovu straicu PrimerLika.html i to deo z sa straice koji defii sa imeom ime _ krajje _pozicije.

LIN ZA ELEKTRONSKU POSTU Pored odlaska eku drugu straicu likovi se mogu iskoristiti i za pi saje v mail poruke pomocu default programa za elektrosku postu (u korisickim sistemima ajvise koriscei su Outlook Express il i Netscape Messeger). Pri geerisaju v poruke, vec iti upi saa zeljea adresa, korisiku preostaje samo da otkuca tekst poruke i da posalje. Da i se poslala poruka mail adresu bosko@etf.bg.ac.yu potrebo u okviru straice avesti sledeci tekst :

Posalj ite e-mai l poruku !

Primeri za rad u laboratoriji

Primer 1. Referi sanje unutar jedne datoteke

Link okviru iste stranice Programiranja

Web i jezik L ; Programski jezik Java Uvod

Web i jezik L

.. " " " " " " "
" " "

" . " " " " " "
" " " "

" . " " " " " "
" " "

Programski jezik Java

. . " " " " " " "
............ . ...

.. " " " " " " "
. . . . . . . . . . . . . . . . " . " " " " " "

" " " Uvod

.. " " " " " " "
. . . . . . . . ........ " . " " " " " "
" " " " " " " .

.. " " " " " " "

" " " "

Primer 2. Veza ka stranici okviru iste apl ikacij e

Dokument A

Ovo stranica a.html iz koje se poziva Stranica b .html istom direktorijumu. < ! --- poziva se stranica istom direktorij mu --->

Poziv straice b.html

Dokumet B

Ovo straica b.html iz koje se poziva Straica a.html istom direktorijumu. < ! --- poziva se straica istom direktorijmu --->

Poziv straice a.html

Primer 3. Veza ka straici drugom serveru. U ovom primeru, adresa servera www . w .org, putaja do straice Addressig. html hypertext/WWW / Addressig/:

Veza ka straici drugom serveru

Neke straice HTL-adresiraju :

Adresiraje

Primer 4. Primer slike i l ika.

Hvala ! Hvala !

Hvala sto ste poslali vas kometarl Mozete posetiti i straicu .

6 . TABELE

Tabela i HTL-u dvodimenziona matrica cij i se elementi nazivaju celije (engl. cell). Celija moze sadrzavati raznovrsne informacij e : brojeve, tekst, , li ste, hiper-veze, slike, itd. Tabela se sastavlja tako sto se opisuju redom nj ene vrste (redovi, engl. row) i sadZaj svake celije redu.

Tabela se opisuje uz pomoc slozenog taga L koji moze sadrzavati vise atriuta:

BORDER koji opisuje sirinu spolj asnj eg okvira tabele; CELLSPACING koji opisuje sirinu l inije koja razdvaja dve celije; CELLP ADDING koji opisuje prostor oko sadrzaja celije; WIDTH koji opisuje ukupnu sirinu tabele.

Nadnaslov tabele se moze zadati tagom CAPION koja se ispisuje iznad tabele i moze imati atribut ALIGN :

za vertikalno poravnavanje : , MIDDLE, za horizontalno poravnavanje : LEFT, CENTER, RIGHT

Svaki red tabeli se opi suje izmedu tagova i (engl. t row) . 1 tag TR moze imati atribute :

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

za vertikalno poravnavanje, atribut V ALIGN sa vrednostima: , MIDDLE,

Pojedinacna cel ija se opisuje izmedu tagova i . Tag TD, pored atriuta ALIGN i V ALIGN, moze imati i atribute:

za horizontalno spajanje celija: ROWSP AN (spaja celije iste vrste) i za vertikalno spajanje celija: COLSP AN (spaja celije iste kolone) .

Tag ima ista svojstva kao tag s tom razlikom sto obezbeduje da sadZaj celije bude automatski centriran i boldovan. Tabela mora da sadrzi tag, ali mora da sadrzi bar jedan tag, koji se smesta sadrzaj tabele. Opsta struktura jedne tabele sledeca:

< ! -- pocetak definicije tabele -->

sadrzaj naslova tabele < ! -- definicija naslova-->

< ! -- start definicije headera -->

sadrzaj prve cel ija headera

sadZaj poslednj e celije headera < ! -- kraj definicij e headera -->

< ! -- start prvog reda -->

sadZaj prve celije prvog reda sadZaj poslednje celije prvog reda

< ! -- kraj prvog reda -->

< ! -- start poslednjeg reda -->

sadZaj prve celije poslednjeg reda sadZaj poslednje celije poslednjeg reda

< ! -- kraj poslednjeg reda -->

< ! -- kraj definicije tabele-->

Treba naglasiti da ako se tekstu van tabele upotrebom taga dodeli neki font razliCit od default fonta, Internet Exploreru se ovaj tag odnositi i na tekst celijama tabele. U Netscape Navigatoru tekst tabeli iti prikazan default fontu. Da i i Netscape Navigator tekst tabeli prikazao zeljenom fontu treba svaku celiju posebno da se ubaci tag. Ako se kodu tabele ne navede odredeni atriut tabele nemaju granicnu liniju, border. Da i se dodelila tabeli granicna l inija odgovarajuce dejine, tag se stavlja atriut border, vrednost dejine linije se zadaje piksel ima. SledeCi primer pokazuje upotrebu atriuta border:

l 1me: IPrezi me: 1 Zvanje: losko IN i ko l ic IPedavac

Kod kojim se doija prethodni primer :

Ime: Prezime: Zvanje:

Bosko Nikol ic Predavac

Osnovna razlika izmedju teksta koji se nalazi izmedu i tagova tome sto tekst prvom slucaju boldovan i centriran unutar celije, drugom slucaju tekst nije podejan i poravnat uz levu ivicu celije. Ivica tabele se priljujuje uz sadr.Zaj celija maksimalno koliko moguce. Sirina kolona odredena prvom celijom svakoj koloni . Naravno, ovim se ne i scrpljuje mogucnost formatiraj a tabela. U tu svrhu se koriste razni atriuti . Treba napomenuti da tabela uopste ne mora da bude uniformno formatirana, tj . da se svakoj celiji moze dodeliti neko drugo svojstvo pomocu atriuta koji se defnisu unutar tagova. Da i tabela imala odgovarajuce dimenzije koriste se atriuti height i width. Vrednost ovih atriuta se kao i kod taga moze zadati i l i pikselima i l i procentima veliCine prozora L browsera. Preporucuje se drugi nacin definicije, onda izgled stranice ne zavisi od rezolucije ekrana.

SledeCi primer predstavlja tabelu sa sirinom od 80% i visinom od 30%:

Ime : Prezime : losko IN i ko l ic

Odgovarajuci L kod :

Zvanje : IPedavac

Ime : Prezime : Zvaje :

Bosko Nikol ic Predavac

Da i kolone ile jednake sirine trebalo i da odgovarajuce i l i tagove ubaciti atriute width sa zeljenom sirinom. u slucaju tabele iz prethodnih primera to znaCi da treba svaki tag definisati atriut width sa vrednoscu 33%. Tako, na primer, se moze realizovati tabela koja se protezati preko cele sirine stranice, svaka kolona zauzimati tacno treCinu sirine tabele:

Ime : losko IN i ko l ic

L kod za prethodni primer :

Prezime : IPedavac

Ime :

Zvanje :

Prezime : Zvanje :

Bosko Nikol ic Predavac

Dva atriuta koja imaju veliku primenu su i cellpadding i cellspacing. Pomocu cellpadding atriuta definise se rastojanje izmedu sadr.Zaja celije i jene granicne l inije. Vrednost ovog atriuta se zadaje pikselima, ako se ne navede nijedna vrednost podrazumeva se da 1 . Pomocu cellspacing atriuta se moze odrediti rastojanje izmedu pojedinih celija tabele, tj. dejina l inije izmedu celija. Vrednost ovog atriuta se zadaje, takode, pikselima ako se ne navede nijedna vrednost podrazumeva se da 1 . Ako se prethodnoj tabeli definise vrednost cellpadding atriuta od 30 piksela, vrednost cellspacing atriuta od 1 piksela doija se sledeca tabelu :

Ime : Prezime :

Bosko Nikolic

L kod ove tabele glasi :

Zvanje :

Predavac

Ime : Prezime : Zvanje :

Bosko Nikol ic Predavac

L dopusta mogucnost da se pojedine celije tabele protezu duz vise redova i l i kolona tabele. Ovakav efekat se moze postiCi pomocu atriuta colspan i rowspan, koji se ubacuju il i tag celije koja se zeli posebno da formatira. Vrednost ovih atriuta se zadaje brojem kolona i l i redova tabele duz kojih treba da se prostire data celija. u sledecem primeru prikazana upotreba ovih atriuta:

1 Dani u nedelj i : 1 ponedeljak 1 utorak

c r-Llsrpski listorij a ["2. lmatemati ka lsrpski

["3. lfiz icko lmatemati ka s [4:" lfiz icko lmatemati ka

v 5 . fi zi ka razred n i

i

L kod tabele iz prethodne tebale :

1 sreda 1 cetvrtak lfi z icko lhemija lfi z icko lhemija li storij a lo log ij a lfi zi ka li nfo rmati ka

geog rafija i nformati ka

matematika i storij iologija engl eski

4. fizicko matematika fizika infOrmatika engl eski

5 . fizika razredni geografija infOrmatika matematika

U prvu celiju tabele postavljena slika tipa gif pod nazivom space.gif. Ovo neophodno stoga sto svaka celija tabele mora imati neki sadr.Zaj, inace browser nece prikazati .

L dozvoljava da cela tabela kao i svaka celija posebno moze da ima razlicitu boju pozadine od ostatka stranice. Ovakav efekat se postize umetanjem atriuta bgcolor sledece tagove: , i l i . Vrednost se zadaje heksadecimalnim kodom i l i njenim imenom, isto kao i kod pozadine stranice tagu.

U sledecem primeru demonstriran upotrebe ovih atriuta:

Dani u nedelj i : utorak sreda cetvrtak

sto rjj_a fi z icko hemjj_a 2. matemati ka fi z icko [hemija tsrpski

3 . fi z icko matemati ka [i stori tolog ij a

s 4. fi z icko matemati ka fi zi ka i nformati ka

razred n i geog rafija i nformati ka matemati ka

L kod ovog primera glasi :

razredni geografi informatika matematika

U prethodnom primeru se moze primetiti da atriut bgcolor koji zadat i l i tagu se prikazati umesto koja se nalazi tagu. U primeru tagu definisana bela pozadine koja se vidi samo na ivicama tabele (ako se koristi Internet Explorer), svakoj pojedinacnoj celiji definisana posebna pozadine bgcolor atriutom.

Takode okvira tabele se moze promeniti pomocu bordercolor atriuta tagu. U sledecem primeru prethodnoj tabeli dfnisan crni okvir:

Dani u nedelj i : 1 1 ponedeljak l l utorak 1 [!Jlsrpski l li storija

1 1 sreda l lfi z i cko

1 lmatemati ka l lfi zi cko l lhemija 1 @Jlfizi cko l lmatemati ka l li storij a 1 s [Jlfizi cko

v 5. fi z i ka

i

l lmatemati ka l lfi zi ka

razredn i geog rafija

L kod koji treba promeniti prethodnoj tabeli :

1 1 cetvrtak l lhemija l lsrpski l lo log ija l li nformati ka

i nfo rmati ka

1 1 petak l lsrpski l lsrpski l leng leski l leng leski

matemati ka

Primeri za rad u laboratoriji

Primer 1. Tabela kodova.

Tabela kodova

YU-karakteri u IS0-8859-2

Veiko slovo kod 8859-2 Malo slovo kod 8859-2

C 200 c 232

C 1 98 c 230

D 208 d 248

S 1 69 s 1 85

Z l 74 z 1 90

Primer 2. u tabeli.

Tabela boja

< ! --- COLSP AN spaja tri kolone jednu ---->

Primer 3. Primer jedne L stranice sa tabelom.

< ! -- Ovako se pise komentar. --> HTML programiranje Visa zeleynicka skola Beograd 2004
L programiranje

H tag za naslov !

Boldovan tekst paragraf tagu l
Ovako izgleda podvuceno

Div-tag za podesavanj e sadrzaj a (left, right, center)

Linkovi mogu biti : Tekst Visa elektroethnicka

skola
Slike Postoje tabele sa : Borderima-vidlj ivim ivicama Tabela bez bordera Ova

tabela ima border(ivicu) 2 pixela

src="etf gif'

Ova tabela ima 3 reda i 3 kolone Ova tabela je sirine 100% ekrana Ovoje tabelabez bordera

7 . FREJMOVI

Frejmovi omogucavaju da se formira dokument koji se sastojati od adresa bar dva razliCita dokumenta. Browser, ukoliko sposoban za to, interpretira frejmove kao podelu tekuceg prozora na vise nezavisnih podprozora od koji svaki sadr.Zi adresirani dokumenat. Osnovni tag slozeni tag . Ovaj tag zamenjuje tag BODY HTL-dokumentu. Tekst dokumenta koji se rastavlja na frejmove sadr.Zi i skljuCivo informacije namenjene browseru: browser poziva adresirana dokumenta i postavlja ih odgovarajuce frejmove. Tag ima atriute:

COLS za vertikalnu podelu prozora i ROWS za horizontalnu podelu prozora navigatora.

Adresa dokumenta se navodi okviru taga FRAE Ciji su atriuti SRC, preko koje se zadaje adresa dokumenta koji iti prikazan zoni tog taga i MARGINWIDTH i MARGINEIGHT

Tag NOFRAEs sadr.Zi poruku za browser koji nije stanju da interpretira frejmove. Opsta struktura L stranice sa frejmovima :

Primer L koda stranice koja koristi frejmove i njen izgled dat na sledecoj slici :

Eile .E_dit l{iew _(,]_ .C:ommunicator !::!elp

< 1 D 11!L PU L I C " - // / /DD 11!L 3 . 2 Fi11al//EN">

FrEIIIle d< /TITLE>

< FRANE SET ROJS = " 5 0 % , 5 0 % ">

< FRANE SRC = " top . h tm.l ">

< / f r am. e s e t>

Text f o r b r ows e r s that

do11 ' t supp o r t f r ffilles

< /NO FRANES>

i < /11!L> A i

Primer 1. Rad sa frejmovima.

Primer 2. Rad sa frejmovima.

Primer 3. Rad sa frej movima.

Primer 4. Rad sa frejmovima.

Primer 5. Rad sa frejmovima.

Primer 6. Rad sa frej movima.

Some older browsers don't support iframes.

If they don't, the iframe will not visie.

8 . FORME 1 ELEMENTI FORME Tagovi koji su do sada razmatrani omogucavaju samo da se oformi hipertekstualni dokument koji se prikazati okviru Citaca na strani klijenta. Pored jednostavnog prikaza HTML omogucava i prenos podataka ka serveru odakle stranica i uCitana. Doijeni podaci se mogu prihvatiti, zapamtiti i l i editovati . Tehnologije koje se mogu primeniti na serverskoj strani aplikacije, kao sto su ASP (Active Server Pages), , JSP (Java Server Pages) i servleti, . . . nisu tema ovog teksta, se nece dalje obradivati . Podaci se na klijentskoj strani unose pomocu koncepta formi (engl . form). Forma dopusta da se uspostavi komunikacija izmedu korisnika i servera: korisnik popunjava formu i salje ka serveru. omogucava da se okviru servera pozove odrezeni programski modul, koji nakon osnovne obrade generisati novu HTML klijentsku stranicu. Forme se mogu koristiti sirokom spektru veom arazliCitih aplikacija kao sto su :

upiti nad bazama podataka il i na pretrazivaCima; identifikacija pristupa odredenom servisu servera; elektronska trgovina (prijem narud.Zine i regulisanje naCina placanja) ; obavestavanje promenljivim podacima (npr. vreme polaska aviona odredenog

datuma, i sl .), . . .

Za implementaciju formi koristi se osnovni tag . Opsti oik ovog taga :

Najvaznija dva atriuta taga su :

atriut r N koji sadZi adresu (uRL) programa na serveru; atriut METHOD kojim opisana metoda prenosa argumenata programa. Ovaj atriut

moze imati vrednosti GET i l i s . Koriscenjem metoda GET vrednosti parametara koje se salju ka serveru navode se okviru adrese programa koji se poziva. Na primer http://server. com/ServerskiProgramskiModul?parametarl =88 gde ServerskiProgramski Modul modul koji se poziva na serveru i kome se salje vrednost promenljive parametar l kao 88 . Metoda GET ima ogranicen broj parametara: mora vaziti da duiina URL + duiina parametara < lKB. Metod POST vrednosti elemenata forme salje okviru zaglavlja poruke koju salje na server, tako da nisu vidljivi korisniku i nema pgranicenja koliCini podataka. Programski modul na serveru trebalo i da zna kojim metodom prima podatke od strane klijenta. U praksi cesce se koristi metod POST, posebno za podatke koji ne i trebalo da budu javni, kao sto su kori snicko ime i sifra, maticni broj , broj kreditne kartice, . . .

Primer L koda pomocu koga se definise rma :

Kada se izvrse akcija sa forme iz prethodnog primera na serveru se pozvati stranica Primer. html, i to parametri forme proslediti svoj e vrednosti pomocu POST metoda.

U okviru same forme definisu se razliciti elementi forme. Oni obuhvataju tekstualna polja za unos podataka, tekst prostore za komentare, polj a za potvrdu, opadajuce l iste, razli Cite vrste dugmadi. Treba napomenuti da se jedino u okviru jedne forme ne moze defini sati druga forma. napomenuto da elementi forme sluze za prenos podataka na serversku stranu. Zato potrebno da svaki element forme, pored tipa, ima i defini sane dve karakteristike. ime elementa forme i njegova vrednost. Ove dve karakteristike se definisu pomocu atriuta i 1/, koji su zajednicki za skoro sve tagove koji definisu elemente forme. U okviru forme moguce definisati :

komandna dugmad tekst polja tekst prostore polja za potvrdu radio dugmad opadajucu l istu skrivene promenljive

Komandno dugme U okviru forme moguce definisati vise vrste dugmadi za razlicitim funkcijama. Sve vrste imaju zajednicki tag , u okviru koga se pomocu atributa type definise funkcija. Najcesce koriscene vrednosti atributa type su button, reset i submit. Funkcije i upotrebe ovih vrednosti su opi sane u daljem tekstu :

button - definise dugme opsteg tipa. Priti skom na dugme koje definisano pomocu ove vrednosti korisnik izvrsava akciju koja se mora defini sati u okviru samog taga. Najcesce to Java Script funkcij a koja izvrsava odredene provere pre samog slanja podataka na server. Primer koda za ovu vrstu dugmeta

Na formi se pojavljuje dugme koje ima ispisan naziv "Proveri" i kada korisnik klikne na ovo dugme izvrsava se Java Script funkcij a funkcijaZaProveru() koja mora iti definisana u okviru iste L stranice.

submit - definise dugme pomocu koga se podaci salju na server. Podaci se salju pomocu metoda koji definisan u okviru taga

Sada nije potrebno definisati nijednu funkciju koja se izvrsiti priti skom na dugme, se podrazumevana akcija poziv serverskog programskog modula.

reset - definise dugme koje postavlj a sve vrednosti elemenata forme na predefinisane vrednosti

I ovom slucaju nije potrebno definisati novu funkciju, podrazumevana akcija ponistavanje novounetih vrednosti okviru forme

Tekst polj a i polj e za sifru Ovo jedan od osnovnih i najcesce koriscenih elemenata forme. Pomocu njega korisnik unosi tekstualne informacije koje se kasnije salju na server, kao sto su ime, prezime, mesto stanovanja, . . . Takode se koristi pomocu taga , s tim sto se za razliku od komandnih dugmadi koristi njegov atriut type sa definisanom vrednosscu text. Osnovni oik ovog elementa :

U primeru su pored atriuta type korisceni i atriuti value i size. Pomocu atriuta value definise se pocetni tekst koji se pojaviti tekst polju, pomocu atriuta size se zadaje maksimalan broj karaktera koji se mogu uneti okviru ovog elementa od strane korisnika. Vrednost atriuta definise samo ime elementa pomocu koga drugi elementi apl ikacije (JavaScript, serverski deo aplikacije) mogu Citati ili menjati unetu vrednost okviru tekst polja. Treba naglasiti da su sva tri navedena atriuta opciona i da se mogu i izostaviti . Ako se zeli da se zamaskira tekst koji korisnik unosi tekst polje umesto vrednosti text, treba koristiti vrednost password. Izgled polja iti i sti kao kod oicnog tekst polja, ali svaki uneti znak iti prikazan oiku * . Sam Citac pamti unete karaktere i ostatku aplikacije se predaje tekst koji korisnik uneo ne niz simbola * .

Polje za potvrdu Ovaj element se koristi kada potrebno da korisnik potvrdi odredeno tvrdenje. Graficki prikaz predstavlja kvadrat koji korisnik pomocu misa ili tastature potvrduje i l i skida potvrdu. Polje za potvrdu se definise koriscenjem taga i njegovog atriuta type sa vrednoscu checkbox. Primer koriscenja ovog elementa :

prograske jezike pozajete?

Paskal

Java

Kod primera :

programske jezike poznajete?

&nbsp ; Paskal &nbsp ; Java

U primeru koriscen i atriut zbog pristupa ostalih delova aplikacije ovom elementu, provere, odnosno, definisanja da li polje za potvrdu potvrdeno i l i ne. Ako postoji grupisano vise polja za potvrdu, nijedan, jedan i l i vise polja mogu istom trenutku iti potvrdeni.

Radio dugmad Ponekad potrebno da se korisniku ponudi vise opcija za potvrdu, da on ima mogucnost da potvrdi nijednu i l i samo jednu mogucnost od ponudenih. Ovakav element jezika se naziva

radio dugmad i graficki su predstavljeni krugom koji korisnik moze da potvrdi i l i skine potvrdu pomocu misa ili tastature. Radio dugmad se definisu koriscejem taga i nj egovog atriuta type sa vrednoscu radio. Primer koriscenja ovog elementa :

Imate li vlastiti racunar?

Kod primera :

r DA r NE

Imate li vlastiti racunar?

Da Ne

U primeru koriscen i atriut zbog pristupa ostalih delova aplikacije ovom elementu, provere, odnosno, definisanja koje radio dugme potvrdeno. Moze se specificirati potvrda odredenog radio dugmeta pomocu atriuta checked.

Opadaj uca lista Opadajuca l ista HTML element koji korisniku omogucava izbor jedneod vise mogucnosti . U jednom trenutku prikazana samo izabrana mogucnost, ali klikom misa na strelicu koja okviru ovog elementa, korisnik doija li stu svih mogucnosti . Opadajuca l ista se definise pomocu taga i opcija . Polje opisuje izbor izmedu moguCih vrednosti navedenih okviru taga . Tag sa atriutom SELECTED se uzima kao izabrana vrednost. Tag se realizuje kao padjuci meni sa vrednostima zadatim okviru taga . Atriuti uz tag su :

size kojim opi san broj elementa opcija koje iti prikazane, multiple kojim se omogucava izbor vise opcija istom trenutku.

Primer za opisani tag : omiljeni predmet 1. godini :

1 Analiza 1 :::

Kod primera

Moj omiljeni predmet na 1 . godini :

Analiza 1 Analiza 2 OR T

Tekst polj e Pored maksimalno jedne linije teksta koju korisnik moze da unese tekst polje, potrebno i da postoji mogucnost da korisnik upise vise l inija svog teksta, na primer svoje komentare. Tag prikazuje tekst odvojenom tekst prozoru sa scrollarovima. Dimenzije

prozora su odredee atributima rows (broj redova teksta) i co/s (broj koloa). Atriut dodeljuje simbolicko ime podrucju kome se alazi tekst. Opsti oik ovog taga

" . eki tekst " .

Skrivena promenljiva Cesto potrebo okviru straice zapamtiti odredee vredosti koje i trebalo prikazivati korisiku, primer vredost koja se proverava serverskoj strai radi zastite aplikacije. Ova mogucost se izvrsava pomocu taga i jegovog atriuta type sa vredoscu hidde. Na primer:

Ovako defiisaoj promeljivoj ostatak ap l ikacij e pri lazi pomocu imea kao i ilo kom drugom elemetu forme.

Primeri za rad u laboratoriji

Primer 1. Primer sv upotrebe formi kod L jezika.

Name d Age Uesite svoje ime: Uesite svoje prezime:

Primer 2. Primer d L straice sa osovim elemetima forme.

Forma za kometare

Posaljite svoje kometare

Ime i prezime:

Email adresa :

Komentar:

Primer 3. Primer L stranice sa formom za narudzine

Restoran italijanske hrane

Restoran italijanske hrane

Pice

Koliko pica zelite?

Velika
Srednja
Mala

Dodaci

Ljuta paprika
Kobasice
Pecurke
Kecap
Jaje
Masline

Ime:

Broj telefona :

Adresa :

Broj kreditne kartice :

Primer 4. Primer jedne L stranice sa slozenij om formom.

Primer upotrebe formi

Primer upotrebe formi Licne informacij e :

Ime : Prezime : Ulica i broj: Grad : Drzava : Srija i Crna Gora Turska Egipat Hrvtaska Tunis Slovenija

Postanski broj :

Pol : Muski &nbsp ; &nbsp ;

Zenski

Interesovanj :

Sport Muzika

type="checkbox" name="sport"

Putovanja

Lozinka:

type="checkbox"

Komentar :

name="putovanja"

Ovde i spi sati komentar

Nakon pokretanja napisanog prograna, doija se prozor koji predstavlja izgled L stranice Internet Exploreru ( slika 1 ).

n_:

Pott.n1li3 ln Pat ..& (' ;t...,i. "

POllRDI 1 S 1

'h jsr i Cm1 Gor13

Slika 1 . Izgled L stranice Internet Exploreru

Zadatak 1. U Notepad-u napisati L kod koji opisuje stranicu kao sto na slici 2 .

..:..1

- O.tl 1 HflWL - t.lln1nlt !nti!'rnt ['lorer

OVA FORl\IL>\ SALJE lVIA NA ADRESU: "'eb@vets.e11t1.y Ko1is11icko i:

Lozika:

Naci !:

N11111: CD [

111t:

Slika 2. Izgled stranice za prvi zadatak za samostalan rad

Napomena: akcija koju izvodi L forma mailto :web@vzs. edu.yu

Zadatak 2. U Notepad-u napisati L kod koji opisuje stranicu kao sto na slici 3 .

.Eile dit iew F,E.,..or1te:s: lool:s: !:felp +- Bck "t @] &'! 1 Search !1 F""'rile' A.Q:lress 1 C.\WINDOWSl.De:si:.top\pier1 .hml i pnzime:

Da li .ste poloz kolokvij1t111e iz p1'erb11eta P1ogmmskijezik Jrwa? r Da r Ne

irpite J_Jl'ijmiljujete zrijr.m.fki Yok'?

P1og1:nil'aje 1 Objekto 01ijetis 1g1i

P1og1:nil':je 2 Osovi p1og1ail'aja

Done r

Slika 3. Izgled stranice za drugi zadatak za samostalan rad

Computer

-

..::

PRILOG 1

Pisanje programa pomocu tekst editora Notepad Prvo potrebno startovati Notepad program. U okviru Windows operativnog si stema, na statusnoj l iniji treba pronaCi dugme Start i pritisnuti ga. Od ponudenih opcija treba pronaCi opciju Run i treba aktivirati ovu opciju. Na prozoru koji se pojavio postoji tekst polje. U nj ega treba upi sati notepad (slika 1 ) .

R un 6

the name of program, folder, document, l nternet resource, and 'Windows will open it for you.

Qpen: 1 notepad

Cancel ftrowse . . .

Slika 1 Aktivirana opcija Run

Nakon aktiviranja dugmeta , doija se prozor tekst editora Notepad (slika 2).

Eile .E_cit S_earch .tielp

Slika 2 Aktiviran prozor tekst editora Notepad

Na beloj povrsini pise se kod za L stranicu. Stranica se svakom trenutku moze snimiti aktiviranjem na meniju opcija File, opcije Save. Sacuvati stranicu pod nazivom proba.htm Kod snimanja stranice treba obratiti paznju da dokumenat koji ovom slucaju treba da predstavlja L stranicu mora imati ekstenziju html i l i htm.

Testiranje HTML stranice u Internet browseru

Prvo potrebno startovati Internet Explorer program. U okviru Windows operativnog si stema, na statusnoj liniji treba pronaCi dugme Start i pritisnuti ga. Od ponudenih opcija treba pronaCi opciju Programs> > Internet Explorer i treba aktivirati ovu opciju. U meniju izabrati opciju File>>Open pri cemu se otvara dijalog prozor kao na slici 3 . i pritiskom na dugme Browse pronaCi html stranicu proba.htm .

the lntenet addess of document folde, and 1 ntenet xplorer will open it you.

O pen: @: s1Administator\D e+top\J ava\vezba1 \poba.htm ... O pen as Web Folder

Cancel Bowse . . .

Slika . Dijalog prozor

Nakon aktiviranja dugmeta , dobija se prozor koji predstavlja izgled L stranice Internet Exploreru.

PRILOG 2

Tabela slaganj a kodova i

rezutat 1 kodiranje recj u leksadecimalno kodiranje rezultat lwhite IFFFFFF lghostwhite IF8F8FF lwhitesmoke IF5F5F5 lsnow IFFF AF lazure IFOFFFF lhoneydew IFOFFFO lmintcream IFSFFF IIightyellow IFFFFEO lfloralwhite IFFF AFO livory IFFFFFO II inen IF AFOE6 loldlace IFDF5E6 lseashell IFFFSEE IIavenderush IFFFOF5 IIavender IE6E6F lgainsboro IDCDCDC II ightgrey IDDD lsilver lcococo

r= lctarkgray IA9A9A9 II ightslategray 1778899 lslategray 1708090 lgray 1808080 lctimgray 1696969

-k 1000000 -Iisque IFFE4C4 lwheat IFSDEB lmoccasin IFFE4B5 lpeachpuff IFFDA9 lmistyrose IFFE4El lpink IFFCOCB

-- ll ightpink IFFB6C 1 lrosybrown IBC8F8F lcoral IFF7F50 ltomato IFF6347

lorangered IFFOO lred IFFOOOO lcrimson IDC 143C lindianred lcD5C5C lfirebrick l22222 lctarkred lsoooo lmaroon lsooooo lrown IA52A2A /saddlebrown lsB45 1 3 /sienna IA0522D lchocolate ID269 1 lctarkorange IFF8COO lorange IFF 500

,__ llightsalmon IFF 7 lctarksalmon IE9967 lsalmon IF 8072 lsandybrown IF4A460 lnavajowhite IFFDEAD Ianchedalmond IFFEBCD lpapayawhip IFFEFD5 lantiquewhite IF AEBD7 leige IF5F5DC lcornsilk IFFF8DC lpalegoldenrod IEEE8AA lkhaki IFOE68C lyellow IFFFFOO lgold IFFD700 lctarkgoldenrod lssOB lperu lcD853F lgoldenrod IDAA520 ltan ID2B48C lurlywood IDEB887 lctarkkhaki lDB76B lchartreuse l7FFFOO lgreenyel low IADFF2F IIawngreen l7CFCOO

-llime looFFOO ' ls-pr-in_g_g-re-en

IO-OF_F_7_F

lpalegreen 198FB98 lmediumspringgreen looF 9 II imegreen l2CD32 lmediumseagreen l7 1 lyellowgreen 19ACD32 laliceue 19ACD32 lmediumaquamarine lD lctarkseagreen lsFBC8F lforestgreen l22s22 lgreen loosooo lseagreen l2E8B57 lolive lsosooo lolivedrab 16823 lctarkgreen 1006400 lctarkslategray l2F4F4F lctarkolivegreen lssB2F laquamarine l7FFFD4 laqua looFFFF lcyan looFFFF lpaleturquoise IAFEEEE lturquoise l40EODO lmediumturquoise l48D 1 lctarkturquoise looCED 1 II ightseagreen l22 lcadetue lsF9EAO lteal loososo lctarkcyan looss lsteelue l4682B4 lcteepskylue looBFFF II ightskylue ls7CEF

..----- IIightsteelue loC4DE lpowderue l

-- lskylue ls7CEEB lcornflowerue 16495ED lctodgerue IIE90FF lmediumslateue l7B68EE lslateue 16A5ACD lroyalue l4 1 69El

u looooFF lmediumue loooocD lctarkslateue l483D8B

-lnavy looooso --jdarkue s --lmidnightue 11 9 1 970 -

lindigo l4B0082 -Iueviolet lsA2BE2 1 jdarkorchid 9932 jdarkviolet 9400D lmediumpurple 19370DB lorchid IDA70D lmediumorchid IBA55D3 jfuchsia jFFOOFF jmagenta jFFOOFF lhotpink IFF69B4 lviolet IEE82EE lthistle ID8BFD8 lplum IDDAODD lpalevioletred IDB7093 lcteeppink IFF 1 493 lmediumvioletred lc11 sss jpurple jsoooso jdarkmagenta lsoos

PRILOG 3

TABELA NAJCESCE KORISCENIH ARAKTERA

10ML llOpis karaktera !&; llcopyright symbol registered trademark symbol 1 53 ; l&nbsp ; l< l> l& l"

lltrademark symbol llnonbreaking space 11 Iess-than symbol llgreater-than symbol llampersand llquotation mark

IEJ 11 1

<

>

& 11

Naslovna stranaSadraj1. HTML - UVOD Internet i HTMLStruktura HTML stranice2. FORMATIRANJE TEKSTA TekstParagraf i odeljakFontNovi redSpecijalni znaciRazdvojna linija3. LISTE Numerisane i nenumerisane listeDefinicione listeGnedenje lista4. BOJE l SLIKE BODY tagIMG Tag5. LINKOVI LIN ZA ELEKTRONSKU POTU6. TABELE 7. FREJMOVI 8. FORME l ELEMENTI FORME Komandno dugmeTekst polja i polje za ifruPolje za potvrduRadio dugmadOpadajua listaTekst poljeSkrivena promenljivaPRILOG 1 PRILOG 2 PRILOG 3