2. osnove html-a i css-a -...

VViisokasoka šškola kola strukovnihstrukovnih studijastudija za za informacione i komunikacione tehnologijeinformacione i komunikacione tehnologije

BeogradBeograd

WEB DIZAJNWEB DIZAJN

OsnoveOsnove HTMLHTML--aa

OsnoveOsnove HTMLHTML--aaHyperText Markup LanguageHyperText Markup LanguageHTML predstavlja jezik za oznaHTML predstavlja jezik za označčavanje hipertekstaavanje hiperteksta i i hipermedijahipermedija ((teksta, slike, zvuka, teksta, slike, zvuka, videavidea i drugih i drugih međusobno povezanih objekatameđusobno povezanih objekata pomopomoćću linkovau linkova) ) HTML HTML predstavljapredstavlja tekstualnutekstualnu datotekudatotekuBiloBilo kojikoji teksttekst editor editor jeje prihvatljivprihvatljiv zaza izraduizradu HTML HTML dokumenatadokumenataEvolucijom tehnologija HTML seEvolucijom tehnologija HTML se razvijao i prorazvijao i prošširivao irivao do verzije koja se trenutno koristi (HTML v4.01)do verzije koja se trenutno koristi (HTML v4.01)Razvojem dinamiRazvojem dinamiččkog HTMLkog HTML--a (DHTMLa (DHTML--a), postaje a), postaje nezamislivo kreiranje stranica koje ne sadrnezamislivo kreiranje stranica koje ne sadržže e dinamidinamiččki sadrki sadržžaj i napredne komponente kao aj i napredne komponente kao ššto su to su naredbe skript jezikanaredbe skript jezikaUU njnjeemmuu se se implementirajuimplementiraju skoro svi script jezici, skoro svi script jezici, kkaao i Po i PHHP i ASPP i ASP

OsnoveOsnove HTMLHTML--aaHTML HTML dokumentdokument jeje sastavljensastavljen odod tagovatagova•• otvarajuotvarajućći tag: <i tag: <IME_ELEMENTAIME_ELEMENTA>>•• zatvarajuzatvarajućći tag: <i tag: </IME_ELEMENTA/IME_ELEMENTA>>

Osim imena HTML elementa, tag Osim imena HTML elementa, tag ččini i određeni ini i određeni broj atributa, broj atributa, ččije su vrednosti uokvirene ije su vrednosti uokvirene navodnicimanavodnicimaElement govori browserElement govori browser--u u šštata da uradi, a atribut da uradi, a atribut kakokako da to uradi da to uradiRazlika između malih i velikih slova ne postoji Razlika između malih i velikih slova ne postoji ((titletitle = = TitleTitle = = tiTLetiTLe))Pri prikazivanju stranica browserPri prikazivanju stranica browser--i se oslanjaju na i se oslanjaju na informacije date u tagovimainformacije date u tagovimaHHtmltml kod se realizuje redokod se realizuje redossledom kojim je i pisanledom kojim je i pisan

Kako sve ovo radi ?Kako sve ovo radi ?

HTML je univerzHTML je univerzaalan klan kôôd za sve d za sve ččitaitaččee

Web Web ččitaitačč prevodi HTML i kreira korisniprevodi HTML i kreira korisniččku web ku web stranicu sa tekstostranicu sa tekstomm, slikom, video i audio , slikom, video i audio sadrsadržžajima u zavisnosti od html kajima u zavisnosti od html kôôdada

Da bi web Da bi web ččitaitačč dobio html kdobio html kôôd mora da ga d mora da ga zatrazatražži od web lokacijei od web lokacije

Web lokacija se smeWeb lokacija se smeššta na web serverta na web server

Web serveri i web browserWeb serveri i web browser--i komuniciraju i komuniciraju pomopomoćću HTTP protokola (u HTTP protokola (HiperText Transport HiperText Transport ProtocolProtocol))

Kako sve ovo radi ?Kako sve ovo radi ?Nakon upisa URL adrese u web Nakon upisa URL adrese u web ččitaitačč, , ččitaitačč putem putem HTTP protokola zahteva datoteku od web serveraHTTP protokola zahteva datoteku od web servera

Server Server ššalje datoteku i alje datoteku i ččitaitačč je analizira. Ako u je analizira. Ako u datoteci postoji bilo koji objekat osim teksta, datoteci postoji bilo koji objekat osim teksta, ččitaitačč se za svaki od njih pojedinase za svaki od njih pojedinaččno obrano obraćća a serveruserveru

Dobijanjem datoteka web Dobijanjem datoteka web ččitaitačč popunjava popunjava stranicu onako kako je u stranicu onako kako je u HHTML kTML kôôdu definisana du definisana njena strukturanjena struktura

Komunikacija sa web serveromKomunikacija sa web serverom

U prvom trenutku traU prvom trenutku tražži se i se HHTML za stranicu TML za stranicu koja je ukucana u koja je ukucana u ččitaitačč, dok nakon toga , dok nakon toga naizmeninaizmeniččno idu zahtno idu zahteevi i odgovori za svaki odvi i odgovori za svaki odelemenata strane. elemenata strane.

SadrSadržžaj na serveru je uvek isti ali sadraj na serveru je uvek isti ali sadržžaj koji se aj koji se vidi na ekranu zavisi od tipa i verzije vidi na ekranu zavisi od tipa i verzije ččitaitačča.a.

ŠŠta prvo uraditita prvo uraditiPotrebno je kreirati stranicu koja Potrebno je kreirati stranicu koja ćće biti home stranica e biti home stranica sajta. Njeno ime treba da bude index.htmlsajta. Njeno ime treba da bude index.html

Ako postoji ova stranica, i ako je ona fiziAko postoji ova stranica, i ako je ona fiziččki smeki smešštena tena na web server, na lokaciji na web server, na lokaciji www.nesto.comwww.nesto.com, tada se , tada se ona automatski uona automatski uččitava, kada se u browseritava, kada se u browser--u ukuca u ukuca www.nesto.comwww.nesto.com

Ona se moOna se možže trae tražžiti i sa punim imenom stranice iti i sa punim imenom stranice www.nesto.com/index.htmlwww.nesto.com/index.html

Svaka druga stranica mora se adresirati pojedinaSvaka druga stranica mora se adresirati pojedinaččno no kao kao www.nesto.comwww.nesto.com/neka_druga.html/neka_druga.html

Index.htmlIndex.htmlOva stranica sadrOva stranica sadržži sve ono i sve ono ššto je vidljiv ali i to je vidljiv ali i nevidljiv deo za korisnikanevidljiv deo za korisnikaDeo koji ne vidi korisnik vidi web server i Deo koji ne vidi korisnik vidi web server i pretrapretražživaivaččiiDeo kojim treba da poDeo kojim treba da poččne stranica jene stranica je

<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN" //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd"> transitional.dtd">

<html <html xmlnsxmlns="http://www.w3.org/1999/xhtml">="http://www.w3.org/1999/xhtml">

Nakon ovog dela koda poNakon ovog dela koda poččinje korisniinje korisniččki sadrki sadržžaj aj pisan u HTML kodu (uz dodatak skriptpisan u HTML kodu (uz dodatak skript--a)a)

HTMLHTML

OznakeOznakeUparene oznake su narUparene oznake su nareedbe kojdbe kojiima se u stranu ma se u stranu postavlja tekst ili neki drugi objekatpostavlja tekst ili neki drugi objekatUpareni tagovi imaju poUpareni tagovi imaju poččetak i i krajetak i i krajOve oznake moraju da imaju simbol kojim se nOve oznake moraju da imaju simbol kojim se neeka ka naredba ponaredba poččinje i simbol kojim se zavrinje i simbol kojim se završšavaava((<tag></tag>)<tag></tag>)

Ceo tekst ili skup narCeo tekst ili skup nareedbi unutar ove dve oznake se dbi unutar ove dve oznake se prevodi samo u svojstvu tipa tih oznakaprevodi samo u svojstvu tipa tih oznaka

UpareneUparene oznakeoznake susu uvedeneuvedene radiradi laklakššeg praeg praććenja i enja i ččitanja kodaitanja koda

OznakeOznake mogumogu bitibiti i i neupareneneuparene, , kadakada se tag se tag samosamootvaraotvara iliili samosamo zatvarazatvara(<(<brbr> > iliili <<brbr/>)/>)

TagoviTagoviTagovi koji opisuju osnovnu strukturu HTMLTagovi koji opisuju osnovnu strukturu HTML

dokumenta:dokumenta:•• HTMLHTML•• HEADHEAD•• BODYBODY

••Tag Tag <HTML><HTML> je okvir u komje okvir u komee se nalaze svi ostali tagovi; HTML dokument se nalaze svi ostali tagovi; HTML dokument uvek pouvek poččinje tagom inje tagom <HTML><HTML>, a zavr, a završšava se tagom ava se tagom </HTML></HTML>••Tag Tag <HEAD><HEAD> uuokviruje zaglavlje u komokviruje zaglavlje u komee se nalaze informacije o samom se nalaze informacije o samom dokumentu (naslov, opis, kljudokumentu (naslov, opis, ključčne rene rečči, ime autora, itd.); opcion jei, ime autora, itd.); opcion je••Sve ono Sve ono ššto vidimo u prozoru browserto vidimo u prozoru browser--a, tj. sadra, tj. sadržžina stranice, nalazi se u telu ina stranice, nalazi se u telu dokumenta koje uokviruje element dokumenta koje uokviruje element <BODY><BODY>; u dokumentu sme da postoji ; u dokumentu sme da postoji samo jedan par tagova samo jedan par tagova <BODY><BODY> </BODY></BODY>

PoPoččetak i kraj etak i kraj HTML HTML odeljkaodeljka<html> <html> OvdeOvde jeje celacela stranastrana </html></html>

PoPoččetak i kraj etak i kraj zaglavljazaglavlja ((odmahodmah izaiza hhtmltml--a)a)<head> <head> OvdeOvde jeje zaglavljezaglavlje (ne vidi)(ne vidi) </head></head>

PoPoččetak i kraj etak i kraj telatela stranicestranice<body> <body> OvdeOvde jeje telotelo stranicestranice </body></body>

PoPoččetak i kraj etak i kraj naslovanaslova stranestrane<title> <title> OvdeOvde jeje teksttekst naslovanaslova (vrh)(vrh) </title></title>

Primer Primer

<HTML> <HTML> <HEAD> <HEAD>

<TITLE> <TITLE> Moja prva Web stranicaMoja prva Web stranica</TITLE></TITLE></HEAD></HEAD>

<BODY> <BODY> Dobar dan!Dobar dan!

</BODY></BODY></HTML></HTML>

PrimerPrimer

<<BRBR>>PraPrazne (ne uparene) oznake nzne (ne uparene) oznake neemmaaju svoj kraj ju svoj kraj

NajNajččeeššććekoriekoriššććene su ene su <<brbr>> i i <<hrhr>>

Oznaka Oznaka <<brbr>> prevodi se kao prevodi se kao ““skoskoččii”” na sledena sledećći i red (u grafired (u grafiččkom okrukom okružženju)enju)

Ova naredba je u nekim sluOva naredba je u nekim sluččajevima isto ajevima isto ššto i to i EnterEnter

PostavljanjePostavljanje horizontalnihhorizontalnih linijalinija

HorizontalneHorizontalne linijelinije zaza razdvajanjerazdvajanje definidefiniššu se u se simbolom simbolom <hr><hr>

DuDužžina linije je procenat duina linije je procenat dužžine celog ekranaine celog ekrana

PrimerPrimer<hr width=<hr width=““75%75%””>><hr width=<hr width=““25%25%””>>

AtributiAtributi horizontalnihhorizontalnih linijalinijaAlignAlign –– poravnanje linije uz levu ili desnu stranuporavnanje linije uz levu ili desnu stranuNoshadeNoshade –– puna linija (bez senpuna linija (bez senččenja)enja)SizeSize –– debljina linijedebljina linijeWidth Width –– dudužžina linijeina linije

PrimerPrimer<hr align=<hr align=““leftleft”” noshadenoshade size=size=““55”” width=width=““2525””>>

DefinisanjeDefinisanje adreseadrese u headeru header--uu<html><html>

<head><head><title><title>OvoOvo jeje stranastrana o o adresamaadresama</title></title>

<ADDRESS> <ADDRESS> KojicKojic NenadNenad<BR><BR>[email protected]@yahoo.com <BR><BR>Visa ICT Visa ICT skolaskola<BR><BR>ZdravkaZdravka CelaraCelara 19<BR>19<BR>

</ADDRESS> </ADDRESS> </head><body></head><body>

<hr width=<hr width=““75%75%””>><<brbr>>NekiNeki teksttekst<hr width=<hr width=““100%100%””>>

</body></body></html></html>

BojaBojaBoja se definiBoja se definišše kao atribut color, ili bgcolore kao atribut color, ili bgcolorMoMožže biti definisana kao engleska ree biti definisana kao engleska rečč (blue, (blue, yeyellow, green, red)llow, green, red)Preciznija definicija je brojPreciznija definicija je brojnna vrednost a vrednost (heksadecimalna predstava boje)(heksadecimalna predstava boje)

FormatiFormati zaza teksttekst

FormatiFormati tekstateksta zaza Bold, Italic i UnderlineBold, Italic i Underline<b><b> teksttekst </b></b><i><i> teksttekst </i></i><u><u> teksttekst </u></u>

PoPoččetak i kraj pasusaetak i kraj pasusa<p> <p> OvdeOvde jeje teksttekst pasusapasusa </p></p>

Delovanje formataDelovanje formata tekstateksta i atributai atributa,, na vena većći deo i deo tekstateksta,, istovremenoistovremeno,, postipostižže se uparenom e se uparenom oznakom oznakom <div> </div><div> </div> uz dopunu CSSuz dopunu CSS--om om

AtributiAtributi zaza fontovefontove

<font color=<font color=““bojaboja””> > <font size=<font size=““veliveliččinaina””>><font face=<font face=““imeime fontafonta””>>

BojaBoja momožže biti ili engleska ree biti ili engleska rečč za boju ili heksadecimalni kod za boju ili heksadecimalni kod neke boje npr. neke boje npr. ggreen, blue, #008000, #FFFF00 ...reen, blue, #008000, #FFFF00 ...

VeliVeliččina moina možže biti broj od e biti broj od --7 do 77 do 7

Ime fonta je neki od definisanih fontova Times New Roman, Ime fonta je neki od definisanih fontova Times New Roman, AriAriaal, Helvetica...l, Helvetica...

<html><html><head><head>

<title><title>OvoOvo jeje trecitreci HTML HTML dokumentdokument</title></title></head></head><body <body BGCOLORBGCOLOR="#FFFFAA" >="#FFFFAA" >

<FONT <FONT face="Bookman Old Style" color=#000000 size=5face="Bookman Old Style" color=#000000 size=5>>OvoOvo jeje teksttekst..

<<//FONT> FONT> </body></body>

</html></html>

PrimerPrimer


<title><title>KarakteristikeKarakteristike tekstateksta</title></title></head></head><body><body>

<p><p>SledeciSledeci teksttekst cece prikazatiprikazati upotrebuupotrebu atributaatributa zaza menjanjemenjanjekarakteristikakarakteristika tekstateksta:</p>:</p><p><b><p><b>OvoOvo jeje podebljanpodebljan teksttekst.</b></p>.</b></p><p><i><p><i>OvoOvo jeje iskoseniskosen teksttekst.</i></p>.</i></p><p><u><p><u>OvoOvo jeje podvucenpodvucen teksttekst.</u></p>.</u></p><p><<p><basefontbasefont size="5">size="5">OvoOvo jeje font font velicinevelicine 5.</5.</basefontbasefont></p>></p><p><p>OvoOvo susu slovaslova uobicajeneuobicajene velicinevelicine, <big>a , <big>a ovoovo susu slovaslova zazajedanjedan vecaveca odod uobicajenihuobicajenih.</big></p>.</big></p><p><p>OvoOvo susu slovaslova uobicajeneuobicajene velicinevelicine, <small>a , <small>a ovoovo susu slovaslova zazajedanjedan manjamanja odod uobicajenihuobicajenih.</small></p>.</small></p><p><font <p><font colorcolor="red" size="10">="red" size="10">OvoOvo jeje teksttekst crvenecrvene bojeboje, , slovaslovasusu velicinevelicine 10.</font></p>10.</font></p></body></body>

</html></html>

PrimerPrimer

PrimerPrimer

ObradaObrada tekstatekstaNaslovi se mogu istaNaslovi se mogu istaćći korii koriššććenjem elemenata enjem elemenata H1, H2, H3, H4, H5 i H6H1, H2, H3, H4, H5 i H6Element Element H1H1 daje najvedaje najvećću veliu veliččinu slova, a inu slova, a H6H6najmanjunajmanjuSvaki od ovih elemenata poSvaki od ovih elemenata poččinje u novom redu, a inje u novom redu, a browserbrowser--i dodaju joi dodaju jošš malo praznog mesta pre malo praznog mesta pre zaglavljazaglavlja

U okviru zaglavlja se moU okviru zaglavlja se možže navesti atribut e navesti atribut ALIGNALIGN, , koji određuje horizontalno poravnanje zaglavljakoji određuje horizontalno poravnanje zaglavlja; ; vrednost ovog atributa movrednost ovog atributa možže biti jedna od e biti jedna od sledesledeććih: ih: LEFT, CENTER, RIGHTLEFT, CENTER, RIGHT

<html><html><head><head><title><title>VelicinaVelicina slovaslova</title></title></head></head><body><body><h1><h1>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H1<H1<//h1>h1><h2><h2>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H2</h2>H2</h2><h3><h3>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H3</h3>H3</h3><h4><h4>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H4</h4>H4</h4><h5><h5>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H5</h5>H5</h5><h6><h6>OvoOvo jeje velicinavelicina slovaslova u u zaglavljuzaglavlju H6</h6>H6</h6></body></body>

</html></html>

PrimerPrimer

ObradaObrada tekstatekstaU okviru poU okviru poččetnog taga etnog taga <P><P> momožže se navesti atribut e se navesti atribut ALIGN, kojiALIGN, koji određuje horizontalno poravnanje određuje horizontalno poravnanje paragrafa; vrednost ovog atributa moparagrafa; vrednost ovog atributa možže biti jedna od e biti jedna od sledesledeććih: LEFT, CENTER, RIGHTih: LEFT, CENTER, RIGHT

Ukoliko se navede samo poUkoliko se navede samo poččetni tag <P>, podrazumeva etni tag <P>, podrazumeva se da je sledese da je sledećći element u novom redui element u novom redu

Za grubo razdvajanje teksta koristi se prazan tag Za grubo razdvajanje teksta koristi se prazan tag <HR><HR>

On dodaje jednu horizontalnu liniju visine 1 do 2 mm, On dodaje jednu horizontalnu liniju visine 1 do 2 mm, ispred i iza koje postoji prazan redispred i iza koje postoji prazan red

MoguMogućće je podesiti visinu korie je podesiti visinu koriššććenjem atributa enjem atributa SIZE=SIZE=""nn""(n je broj piksela), (n je broj piksela), šširinu pomoirinu pomoćću atributa u atributa WIDTH=WIDTH=""nn"" i i poravnanje pomoporavnanje pomoćću atributa ALIGN (moguu atributa ALIGN (mogućće vrednosti e vrednosti su LEFT, RIGHT i CENTER)su LEFT, RIGHT i CENTER)


<title><title>PasusiPasusi</title></title></head></head><body><body>

<p><p>OvoOvo jeje prviprvi pasuspasus.</p>.</p><p><p>OvoOvo jeje drugidrugi pasuspasus.</p>.</p><<brbr>><p><p>OvoOvo jeje trecitreci pasuspasus ispredispred kojegkojeg jeje bio bio jedanjedan prazanprazanred.</p>red.</p><<brbr>>

<p align="right"><p align="right">OvoOvo jeje pasuspasus kojikoji jeje desnodesno poravnatporavnat.</p>.</p><p align="<p align="centercenter">">OvoOvo jeje pasuspasus kojikoji jeje centrirancentriran.</p>.</p>


PrimerPrimer

PrimerPrimer

ObradaObrada tekstatekstaElement BLOCKQUOTE uvlaElement BLOCKQUOTE uvlačči blok teksta u i blok teksta u odnosu na ostatak i koristi se za duodnosu na ostatak i koristi se za dužže tekstovee tekstove

Element CITE se koristi za citate i ispisuje tekst Element CITE se koristi za citate i ispisuje tekst italikomitalikom


<title><title>NaslovNaslov</title></title></head></head><body><body>

<p><p>OvoOvo jeje teksttekst kojikoji jeje levolevo poravnatporavnat.</p>.</p>

<<blockquoteblockquote>>OvoOvo jeje deodeo tekstateksta kojikoji cece bitibiti uvucenuvucen u u odnosuodnosu nana prethodniprethodni pasuspasus.</.</blockquoteblockquote>><<brbr>><p><p>OvoOvo jeje trecitreci pasuspasus ispredispred kogkog jeje bio bio jedanjedan prazanprazanred, a red, a izaiza kogakoga cece bitibiti navedennaveden citatcitat.</p>.</p><<brbr>><cite><cite>OvoOvo cemocemo posmatratiposmatrati kaokao citatcitat.</cite>.</cite></body></body>

</html></html>

PrimerPrimer

FormatiranjeFormatiranje tekstatekstaUkolikoUkoliko se se izmeizmeđu simbola kuca veliki tekst bez đu simbola kuca veliki tekst bez posebnog formatiranja (upotrebom simbola za posebnog formatiranja (upotrebom simbola za kraj rekraj reččenice enice brbr, ili pasusa , ili pasusa pp) u zavisnosti od ) u zavisnosti od šširine irine ččitaitačča tekst a tekst ćće se razlie se različčito lomiti.ito lomiti.

Ukoliko su neke reUkoliko su neke rečči bitne da ostanu u grupi i bitne da ostanu u grupi koristi se simbol koristi se simbol

&nbsp ;između tih reizmeđu tih reččii

Npr: Npr: <p> <p> ……………… KojicKojic NenadNenad ……..</p>..</p>

TakoTakođe se koristi i kao đe se koristi i kao SpaceSpace

Specijalni znaci (entiteti)Specijalni znaci (entiteti)

spacespace &&nbspnbsp;;< < &&ltlt;;> > &&gtgt;;€€ €€©© ©©®® &&regreg;;& & & & " " &&quotquot;;' ' &&aposapos;;

SimboliSimboli zaza teksttekst

<cite></cite><cite></cite> IstaknutiIstaknuti citaticitati

<del></del><del></del> PrecrtaniPrecrtani teksttekst

<q></q><q></q> ZnaciZnaci navodanavoda

<sub></sub><sub></sub> OznakeOznake indeksaindeksa

<sup></sup><sup></sup> OznakeOznake eksponentaeksponenta

<<emem></></emem>> SlovaSlova u u kurzivukurzivu

<strong></strong><strong></strong> PolucrniPolucrni kurzivkurziv okooko slovaslova

ZaZa specijalnespecijalne simbolesimbole koristekoriste se se podacipodaci iziz ASCII ASCII kodkod tabeletabele. . NprNpr. . SimbolSimbol zaza copyright copyright jeje &#169&#169

<<blockquoteblockquote></></blockquoteblockquote>> CitatiCitati

KomentariKomentariKomentari su delovi web prezentacije koji se ne Komentari su delovi web prezentacije koji se ne prevode, a samim tim i ne prikazuju korisniku.prevode, a samim tim i ne prikazuju korisniku.

Uloga komentara je lakUloga komentara je lakšše snalae snalažženje i navođenje enje i navođenje unutar prezentacijeunutar prezentacije

Kometari su skoro obavezni kada viKometari su skoro obavezni kada višše ljudi e ljudi uređuje sajtuređuje sajt, ili kada se koristi PHP pristup, ili kada se koristi PHP pristup

Oznaka komentara jeOznaka komentara je

<! <! ---- teksttekst komentarakomentara ----> >

ReferenciranjeReferenciranje objekataobjekataProstorProstor nana web web serveruserveru podeljenpodeljen jeje kaokao i hard i hard disk u disk u direktorijumedirektorijume i i folderefoldere. . DaDa bi se bi se zadzadrržžala ala organizacija web strane napravljenorganizacija web strane napravljenee na na personalnom rapersonalnom raččunaru svi objekti se moraju unaru svi objekti se moraju definisati relativnim ili apsolutnim putanjama.definisati relativnim ili apsolutnim putanjama.

Atribut Atribut srcsrc definidefinišše tip putanjee tip putanje ((sourcesource))

Primer za sliku Primer za sliku –– pera.jpg, koja je u folderu A, pera.jpg, koja je u folderu A, unutar direktorijuma Bunutar direktorijuma B gdegde jeje i i kôdkôd stranicestranice kojakojase se kreirakreira, a , a svesve ovoovo jeje nana C C diskudisku

ReferenciranjeReferenciranje objekataobjekataRelatiRelativvnana putanjaputanja ((fajl koji poziva je u istoj ravni gde i fajl koji poziva je u istoj ravni gde i folder Bfolder B))

<<imgimg srcsrc==““B/B/pera.jpgpera.jpg””>>

ApsolutnaApsolutna putanjaputanja (fajl koji poziva je bilo gde, pa se daje (fajl koji poziva je bilo gde, pa se daje puna putanja puna putanja -- izbegavati)izbegavati)

<<imgimg srcsrc==““C:A/B/C:A/B/pera.jpgpera.jpg””>><<imgimg srcsrc==““www.sajt.com/slike/pera.jpgwww.sajt.com/slike/pera.jpg””>>

U U slusluččaju da je struktura foldera kompleksnija za apsolutnu aju da je struktura foldera kompleksnija za apsolutnu putanju mora dputanju mora daa se pise pišše svaki delie svaki delićć putanjputanjee, dok se , dok se relativna ne menjarelativna ne menja

Problem promene lokacije i uređenja sajtaProblem promene lokacije i uređenja sajta

DodavanjeDodavanje slikeslikePrimer:Primer:

<<imgimg srcsrc==““pera.jpgpera.jpg”” width=width=““400400”” height=height=““200200””>>

SlikaSlika nene moramora dada imaima dimenzijedimenzije, , aliali tadatada se se skidaskidaistovremenoistovremeno sasa tekstomtekstom ššto mnogo usporava radto mnogo usporava radSa dimenzijama, tekst se ceo uSa dimenzijama, tekst se ceo uččitava odmah, a slika itava odmah, a slika naknadno jer je definisan prostor za slikunaknadno jer je definisan prostor za slikuOkvirne linije se stavljaju na sliku ako slika predstavlja linkOkvirne linije se stavljaju na sliku ako slika predstavlja link

<<imgimg srcsrc==““pera.jpgpera.jpg”” width=width=““400400”” height=height=““200200”” borderborder==““11””>>

PozicioniranjePozicioniranje slikeslikePoPozicija slike u odnosu na stranu definizicija slike u odnosu na stranu definišše se e se uparenim simbolima neposredno pre i posle uparenim simbolima neposredno pre i posle oznaka za sliku (najbolje stil u tagu div)oznaka za sliku (najbolje stil u tagu div)Po pravilu, ako se ne naglasi slika se postavlja Po pravilu, ako se ne naglasi slika se postavlja skroz levoskroz levoPrimer za centriranjePrimer za centriranje

<center><<center><imgimg srcsrc==““pera.jpgpera.jpg”” altalt==““perapera sasadruzinomdruzinom””></center>></center>

AtributAtribut alt alt definidefinišše ime koje e ime koje ćće se pojaviti umesto e se pojaviti umesto slike koja ne moslike koja ne možže da se ue da se uččita, i to je opis kojim ita, i to je opis kojim ćće search mae search maššina videti sliku.ina videti sliku.


<title><title>OvoOvo jeje trecitreci HTML HTML dokumentdokument</title></title></head></head><body BGCOLOR="#FFFFAA" ><body BGCOLOR="#FFFFAA" >

<FONT face="Bookman Old Style" color=#000000 size=5><FONT face="Bookman Old Style" color=#000000 size=5>OvoOvo jeje teksttekst..

<<imgimg srcsrc="="pera.jpgpera.jpg" width="100" height="175">" width="100" height="175"><<imgimg srcsrc="="pera.jpgpera.jpg" width="400" height="200" " width="400" height="200" border="1">border="1"><center><<center><imgimg srcsrc="="pera.jpgpera.jpg"></center>"></center>


PrimerPrimer

PrimerPrimer

Postavljanje slike kao pozadinePostavljanje slike kao pozadineDefinisanjem direktno u HTML koduDefinisanjem direktno u HTML kodu<body background=<body background=““slikaslika.gif"> .gif">

Definisanjem direktno u HTML kodu sa alternativom bojeDefinisanjem direktno u HTML kodu sa alternativom boje<body background=" <body background=" slikaslika.gif.gif““ bgcolorbgcolor="#333333"> ="#333333">

Definisanje u stilu (poDefinisanje u stilu (požželjno)eljno)body { body { backgroundbackground--image: image: url("httpurl("http://://nekisajtnekisajt.com/images/ .com/images/ slikaslika.gif"); .gif"); backgroundbackground--position: 50% 50%; position: 50% 50%; backgroundbackground--repeat: norepeat: no--repeat; } repeat; }

HipervezeHipervezeSimboliSimboli zaza hipervezehiperveze susu <a></a><a></a>AtributAtribut stranestrane kojakoja trebatreba dada se use uččita je ita je hrefhref

Primer 1: Primer 1: UnutarUnutar isteiste web web lokacijelokacije<a <a hrefhref==““home.htmhome.htm””>>OvdeOvde pritisnutipritisnuti dada bi bi videlivideli

nanaššu home u home stranustranu..</a></a>

Primer 2: Primer 2: UnutarUnutar drugedruge web web lokacijelokacije<a <a hrefhref==““http://http://nesto.com/index.htmnesto.com/index.htm””>>OvdeOvde

pritisnutipritisnuti dada bi bi videlivideli sajtsajt nesto.comnesto.com ..</a></a>

HipervezeHipervezePrimer 3: Link ka Primer 3: Link ka nekomnekom fajlufajlu

<a <a hrefhref==““http://http://www.nesto.com/web/mika.zipwww.nesto.com/web/mika.zip””> > OvdeOvde pritisnutipritisnuti dada bi bi skinuliskinuli mika.zipmika.zip sasa sajtasajtawww.nesto.comwww.nesto.com </a></a>

FormatiranjeFormatiranje tekstateksta linkalinka

<html><head>

<title>Ovo je strana o linkovima</title></head>

<body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red" VLINK="green" ALINK="red"><a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi skinulimika.zip sa sajta www.nesto.com </a><br>Neki tekst

</body></html>

Boja linka nakon aktiviranjaVlink

Boja linka u trenutku aktiviranjaAlink

Boja linka pre nego što se aktiviraLink

OpisAtribut


<title><title>OvoOvo jeje stranastrana o o linkovimalinkovima</title></title></head></head>

<hr width=<hr width=““75%75%””>><body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red" <body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red" VLINK="green" ALINK="red">VLINK="green" ALINK="red"><a <a hrefhref==““http://http://www.nesto.com/web/mika.zipwww.nesto.com/web/mika.zip””> > OvdeOvde pritisnutipritisnuti dadabi bi skinuliskinuli mika.zipmika.zip sasa sajtasajta www.nesto.comwww.nesto.com </a></a><hr align=<hr align=““leftleft”” noshadenoshade size=size=““55”” width=width=““2525””>><<brbr>>NekiNeki teksttekst<hr width=<hr width=““100%100%””>>


PrimerPrimer

Link Link zaza mailmailPravljenjePravljenje linkalinka kojimkojim se se automatskiautomatski otvaraotvara Outlook Outlook ExpressExpress jeje istogistog formataformata kaokao i i klasiklasiččan link, ali je an link, ali je adresa primaoca definisana sa adresa primaoca definisana sa

mailto:mailto:[email protected]@bbb.ccc<a href="mailto:[email protected]">Kontakt</a><a href="mailto:[email protected]">Kontakt</a>

Pored Pored osnovneosnovne adreseadrese mogumogu se se dodatidodati i i ostaliostali atributiatributi. . OdvajajuOdvajaju se se znakomznakom ??, i nose , i nose fiksna imenafiksna imenapromenljivihpromenljivih<a href="mailto:[email protected]<a href="mailto:[email protected]?subject=?subject=Mail sa sajtaMail sa sajta

">Kontakt</a>">Kontakt</a>

DodavanjeDodavanje slikeslike pored pored URL URL adreseadrese

<head><head><link <link relrel="shortcut icon" ="shortcut icon" hrefhref="="ime.icoime.ico">"></head></head>

ListeListeSimbolSimbol zaza definisanjedefinisanje listeliste jeje <<olol></></olol>>, , dokdok susunabrajanjanabrajanja u u listilisti <<lili></></lili>>. . NesortiraneNesortirane listeliste mogumogu se se difinisatidifinisati oznakomoznakom dirdir

NabrajanjaNabrajanja susu popo pravilupravilu arapskiarapski brojevibrojevi, a , a zaza prompromeenunutrebatreba koristitikoristiti simbolsimbol <<olol typetype””aa””>>, , <<olol typetype””AA””>>,, <<ololtypetype””ii””>>,, <<olol typetype””II””>>, , zaza malamala i i velikavelika slovaslova kaokao i i malamala i i velikavelika rimskarimska slovaslova

ZaZa popoččinjanje liste drugim brojem od 1 treba injanje liste drugim brojem od 1 treba <<ololtypetype””aa”” startstart==““55””>, >,

Simboli listiSimboli listiZaZa oznaoznaččavanje elemenata liste simbolima treba avanje elemenata liste simbolima treba koristiti simbol koristiti simbol <<ulul>>

Primer:Primer:<<ulul type=type=““discdisc””> > zaza crnucrnu tataččkuku<<ulul type=type=““squaresquare””>> crni kvadratcrni kvadrat<<ulul type=type=““circlecircle””>> crna krucrna kružžnicanica

UgneUgnežždene liste se definidene liste se definiššu na isti nau na isti naččin kao i in kao i liste, ali unutar njihliste, ali unutar njih

SimboliSimboli listilisti 22

TagTag--ovi (DL, DT i DD) sluovi (DL, DT i DD) služže u e u definicijskim listama za nabrajdefinicijskim listama za nabrajaanje s nje s uvlakama:uvlakama:PHP jezikPHP jezik

SliSliččanan C C jezikujeziku a a namenjennamenjenWEBWEB--u u ovajovaj programskiprogramski jezikjezikpostaopostao jeje izuzetnoizuzetno popularanpopularan..

<DL><DL><DT>PHP <DT>PHP jezikjezik<DD><DD>SliSliččanan C C jezikujeziku a a namenjennamenjen WEBWEB--

uuovajovaj programskiprogramski jezikjezik postaopostao jeje izuzetnoizuzetnopopularanpopularan..</DL></DL>

Tag <OL> Tag <OL> sluslužžii zaza uređenouređenonabrajnabrajaanjenje u u listilisti ((ordederdordederd list):list):1.1.JavaScriptJavaScript2.2.VB ScriptVB Script3.3.JavaJava4.4.PHPPHP5.5.C#C#

<OL><OL><LI>JavaScript<LI>JavaScript<LI>VB Script<LI>VB Script<LI>Java<LI>Java<LI>PHP<LI>PHP<LI>C#<LI>C#

</OL></OL>

Tag <UL> Tag <UL> sluslužžii zaza neuređenoneuređenonabrajnabrajaanjenje u u listilisti ((unordederdunordederd list):list):••XMLXML••HTMLHTML••DTDDTD••CSSCSS••XSLXSL

<UL><UL><LI>XML<LI>XML<LI>HTML<LI>HTML<LI>DTD<LI>DTD<LI>CSS<LI>CSS<LI>XSL<LI>XSL

</UL></UL>


<title><title>ListeListe</title></title></head></head><body><body>

<p><p>OvoOvo jeje primer primer listeliste:</p>:</p><dir><dir>

<<lili>Voce:>Voce:<dir><dir>

<<lili>>jabukajabuka</</lili>>

<<lili>>kruskakruska</</lili>>

<<lili>>jagodajagoda</</lili>></dir></dir>

</</lili>>

<<lili>>PovrcePovrce::<dir><dir><<lili>paprika</>paprika</lili>><<lili>>kupuskupus</</lili>><<lili>>paradajzparadajz</</lili>>

</dir></dir></</lili>>

</dir></dir></body></body></html></html>

PrimerPrimer


<title><title>UreUredjdjenaena listalista</title></title></head></head><body><body>

<p><p>OvoOvo jeje primer primer uredjeneuredjenelisteliste:</p>:</p><<olol start="1">start="1">

<<lili>Voce:>Voce:<dir><dir>

<<lili>>jabukajabuka</</lili>><<lili>>kruskakruska</</lili>><<lili>>jagodajagoda</</lili>>

</dir></dir></</lili>>

<<lili>>PovrcePovrce::<dir><dir>

<<lili>paprika</>paprika</lili>><<lili>>kupuskupus</</lili>><<lili>>paradajzparadajz</</lili>>

</dir></dir></</lili>></</olol>>


PrimerPrimer


<title><title>UredjenaUredjena listalista(2)</title>(2)</title>

</head></head><body><body>

<p><p>OvoOvo jeje, , takodjetakodje, , primer primer uredjeneuredjenelisteliste:</p>:</p><<olol start="1">start="1">

<<lili>Voce:>Voce:<<olol>>

<<lili>>jabukajabuka</</lili>>

<<lili>>kruskakruska</</lili>>

<<lili>>jagodajagoda</</lili>></</olol>>

</</lili>>

<<lili>>PovrcePovrce::<<olol start="4">start="4">

<<lili>paprika</>paprika</lili>><<lili>>kupuskupus</</lili>><<lili>>paradajzparadajz</</lili>>

</</olol>></</lili>></</olol>>


PrimerPrimer

DefinicioneDefinicione listelisteOveOve listeliste se se koristekoriste kodkod posebneposebne vrstevrste prikazaprikazatekstatekstaDefiniDefiniššu se pomou se pomoćću tagova u tagova <dl>, <<dl>, <dtdt> i <> i <dddd>>Tag <dl></dl> se Tag <dl></dl> se koristikoristi zaza otvaranjeotvaranje i i zatvaranjezatvaranje definicionedefinicione listelisteTag <Tag <dtdt></></dtdt> se > se koristikoristi zaza kreiranjekreiranje naslovanaslovastavkistavki kojekoje se se navodenavode u u listilistiTag <Tag <dddd></></dddd> se > se koristikoristi zaza definisanjedefinisanje sadrsadržžajaajasvake od navedenih stavkisvake od navedenih stavkiOveOve listeliste mogumogu dada se se kreirajukreiraju i i akoako se se tagovitagovi<<dtdt> i <> i <dddd> > nene upareupare

Sa Sa uparenimuparenim tagovimatagovima<DL><DL>

<DT> <DT> Prvi trimestarPrvi trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx</DD></DD>

</DT></DT>

<DT> <DT> Drugi trimestarDrugi trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx </DD></DD>

</DT></DT>

<DT> <DT> TreTrećći trimestari trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx </DD></DD>

</DT></DT>

</DL></DL>

BezBez uparivanjauparivanja<DL><DL>

<DT> <DT> Prvi trimestarPrvi trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx

<DT> <DT> Drugi trimestarDrugi trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx

<DT> <DT> TreTrećći trimestari trimestar<DD><DD> Traje od xxx do xxxTraje od xxx do xxx

</DL></DL>

Pozadinski zvukPozadinski zvuk<<bgsoundbgsound srcsrc==””imeaudiofajla.formatimeaudiofajla.format”” loop=loop=””brojbroj””>>

Audio Audio fajlfajl se se moramora nalazitinalaziti u u istomistom direktorijumudirektorijumu kaokao i i kodkod, , inainačče se e se moramora zadatizadati putanjaputanja pre pre imenaimena fajlafajla..

OvajOvaj fajlfajl se se kaokao i i slikaslika zapisujezapisuje kaokao imeime i format.i format.

FormatiFormati kojkoji sui su podrpodržžaniani u u HTMLHTML--uu susu Wav, AU, MP3 i Wav, AU, MP3 i MIDIMIDI

BrojBroj kojikoji se dse deefinifinišše u atributu LOOP određuje koliko e u atributu LOOP određuje koliko puta se sekvenca ponavlja. Upisivanjem broja puta se sekvenca ponavlja. Upisivanjem broja 22, ide , ide dva puta i slidva puta i sliččno, dok stavljanjem no, dok stavljanjem --11 ili ili infiniteinfiniteponavlja se dok korisnik posmatra stranicu.ponavlja se dok korisnik posmatra stranicu.

ZvukZvukKoristiKoristi se <EMBED> tag.se <EMBED> tag.OvajOvaj tag tag podrpodržžavaava uobiuobiččajeneajene formateformate kaokao šštoto susu.wav, .mid, .mp3, i .au..wav, .mid, .mp3, i .au.

Primer:Primer:<<embed embed srcsrc="="filename.extfilename.ext" width="x" height="x" " width="x" height="x"

autoplayautoplay="x" hidden="x" loop="x" volume="x"="x" hidden="x" loop="x" volume="x">></</embedembed>>

ZvukZvukSRCSRC: URL (: URL (relativnarelativna iliili apsolutnaapsolutna putanjaputanja) do audio ) do audio fajlafajla

CONTROLSCONTROLS: CONSOLE : CONSOLE tjtj. SMALLCONSOLE.. SMALLCONSOLE.CONSOLE CONSOLE definidefiniššee 144 144 pikselapiksela zaza šširinuirinu i 60 i 60 zaza visinuvisinu. . SMALLCONSOLE SMALLCONSOLE definidefiniššee 144 144 pikselapiksela zaza šširinuirinu i 15 i 15 zaza visinuvisinu..

HEIGHT HEIGHT i i WIDTHWIDTH: : DefiniDefiniššu u veliveliččinuinu prostoraprostora zaza objekatobjekat embed embed tagataga. . KodKod nekihnekih browserabrowsera jeje obavezanobavezan

LOOPLOOP: : DefiniDefinišše e kolikokoliko putaputa se se sekvencasekvenca ponavljaponavlja. . AkoAko se se niniššta ne ta ne definidefinišše, izvre, izvrššava se samo jednomava se samo jednom

AUTOSTARTAUTOSTART: : Ako je True tada se zvuk aktivira po uAko je True tada se zvuk aktivira po uččitavanju itavanju stranice, dok se za False vrednost mora postaviti taster kojim stranice, dok se za False vrednost mora postaviti taster kojim korisnik upravljakorisnik upravlja

ZvukZvukHIDDENHIDDEN: : VrednostVrednost TRUE TRUE sakrisakrivava konzolkonzolu, dok je False prikazujeu, dok je False prikazuje..

UpotrebaUpotreba HIDDEN i AUTOSTART HIDDEN i AUTOSTART kaokao TRUE TRUE postipostižže se efekat isti kao i e se efekat isti kao i primenomprimenom BGSOUND.BGSOUND.

VOLUMEVOLUME: : VrednostVrednost izmeđuizmeđu 0 i 1000 i 100 za definisanje nivoa zvuka.za definisanje nivoa zvuka.

ALIGNALIGN: LEFT i RIGHT.: LEFT i RIGHT.

HSPACE HSPACE i i VSPACEVSPACE: : horizontalnihorizontalni odnosnoodnosno vertikalnivertikalni prostorprostor okookokonzolekonzole u pikselimau pikselima..

FlashFlashFlash Flash objekatobjekat se mose možže ukljue uključčiti u HTML kod koriiti u HTML kod koriššććenjem taga enjem taga embedembed

Kao i kod drugih objekata treba definisati putanju do objekta Kao i kod drugih objekata treba definisati putanju do objekta (sa src) dimenzije (width i heigth)(sa src) dimenzije (width i heigth)

PoPožželjno je postaviti kvalitet koji se oeljno je postaviti kvalitet koji se oččekuje (quality), tip ekuje (quality), tip (type) i putanju za plagin(type) i putanju za plagin--ove (ove (pluginspagepluginspage))

Primer:Primer:

<embed <embed srcsrc="http://pera.com/folder/1.swf" quality="high" ="http://pera.com/folder/1.swf" quality="high" pluginspagepluginspage="http://="http://www.macromedia.comwww.macromedia.com/go//go/

getflashplayergetflashplayer" " type="application/xtype="application/x--shockwaveshockwave--flash" flash" width="568" height="32">width="568" height="32">

</embed></embed>

Toliko za sada !!!Toliko za sada !!!


BeogradBeograd


Organizacija sajtaOrganizacija sajta

Organizacija sajtaOrganizacija sajtaDa bi sadrDa bi sadržžaj prikazan u stranici lakaj prikazan u stranici lakšše e organizovao, ali i prikazivao isto u razliorganizovao, ali i prikazivao isto u različčitim itim pretrapretražživaivaččim, potrebno je da se organizujeim, potrebno je da se organizujeOrganizacija podrazumeva pravljanje strukture Organizacija podrazumeva pravljanje strukture sajta i definisanje koje deo stranice ja namenjen sajta i definisanje koje deo stranice ja namenjen za prikaz konkretnog sadrza prikaz konkretnog sadržžaja (slike, teksta,...)aja (slike, teksta,...)Ovo treba da bude prva faza u kreiranju sajtaOvo treba da bude prva faza u kreiranju sajta

Na primer, Na primer, ššema ema jedne strane jedne strane izgleda ovakoizgleda ovako

Organizacija web straneOrganizacija web straneOrganizacija je moOrganizacija je možže uraditi na tri nae uraditi na tri naččina:ina:•• PomoPomoćću frameu frame--ova (starija tehnika)ova (starija tehnika)•• PomoPomoćću tabela (Neki prerau tabela (Neki preražživaivačči ne vole)i ne vole)•• PomoPomoćću stilova tj. CSSu stilova tj. CSS--om (preporuom (preporuččljivo)ljivo)

Upotreba frameUpotreba frame--ova omoguova omoguććava da se viava da se višše razlie različčitih html stranica itih html stranica nađe u jednojnađe u jednoj. Ovo mo. Ovo možže da bude loe da bude lošše kod rangiranja u e kod rangiranja u pretrapretražživaivaččima, jer je nejasno koja stanica nosi glavnu informaciju, ima, jer je nejasno koja stanica nosi glavnu informaciju, i sta i sta ćće biti sadre biti sadržžaji ostalih delova koji se naknadno uaji ostalih delova koji se naknadno uččitavaju u itavaju u popoččetnu stranu. Dobra strane je etnu stranu. Dobra strane je ššto su delovi stranice fizito su delovi stranice fiziččki ki odvojeni i struktura stranice je vrlo stablna, ali ne uvek i estodvojeni i struktura stranice je vrlo stablna, ali ne uvek i estetski etski efikasna.efikasna.

FRAME FRAME --oviovi

Navigacioni meniNavigacioni meni -- frejmovifrejmoviKoristiKoristi se se za nezavisni prikaz viza nezavisni prikaz višše stranica e stranica istovremenoistovremeno

Najprostiji primer je meni i deo za sadrNajprostiji primer je meni i deo za sadržžajajPrimer:Primer:

<frameset <frameset colcolss==““100,400,*100,400,*””>><frame <frame srcsrc==““meni.htmlmeni.html”” name=name=““leftleft””>>

<frame <frame srcsrc==““telo.htmltelo.html”” name=name=““rightright””>></frameset></frameset>

OvimOvim se se nana prvihprvih 100 100 pikselapiksela sasa leveleve stranestraneuuččitava meni.html, a u narednih 400 telo.html. itava meni.html, a u narednih 400 telo.html. Ime se definiIme se definišše da bi se delovi raspoznavalie da bi se delovi raspoznavali, , alialise se nigdenigde nene vidividi vrednostvrednost ovogovog atributaatributa..

Atributi frejmovaAtributi frejmovaSRCSRC: : definidefiniššee adresuadresu dokumentadokumenta kojikoji ććee se se uuččitatiitati u u okviruokviru frejmafrejma..BORDERCOLORBORDERCOLOR: : DefiniDefiniššee bojuboju zaza ivicuivicu frejmafrejma..FRAMEBORDERFRAMEBORDER: : VrednostVrednost '1' '1' iliili 'yes' 'yes' ovogovog atributaatributa prikazujeprikazuje granicugranicufrejmafrejma, , dokdok vrednostvrednost '0' '0' iliili 'no' 'no' nene prikazujeprikazuje..MARGINWIDTHMARGINWIDTH: : DefiniDefiniššee veliveliččinuinu praznogpraznog prostorprostor izmeđuizmeđu leveleve i i desnedesnestranestrane frejmafrejma i i njegovognjegovog sadrsadržžajaaja izraizražženen u u pikselimapikselima..MARGINHEIGHTMARGINHEIGHT: : DefiniDefiniššee veliveliččinuinu praznogpraznog prostorprostor izmeđuizmeđu vrhavrha i i dnadnafrejmafrejma i i njegovognjegovog sadrsadržžajaaja izraizražženen u u pikselimapikselima..NAMENAME: : SpecificiraSpecificira imeime frejmafrejma kojekoje se se momožžee koristitikoristiti u u okviruokviru drugihdrugihprogramskihprogramskih modulamodula, , kaokao šštoto susu JavaScript JavaScript iliili VBSciptVBScipt..NORESIZENORESIZE: : AktivnomAktivnom vrednovrednoššććuu ovogovog atributaatributa se se sprespreččavaava korisnikkorisnik dadamenjamenja zadatuzadatu veliveliččinuinu frejmafrejma. . OvajOvaj atributatribut se se samosamo navodinavodi bezbez ikakveikakvevrednostivrednosti..SCROLLINGSCROLLING: : VrednostiVrednosti ovogovog atributaatributa susu 'YES', 'NO' i 'AUTO'. 'YES', 'NO' i 'AUTO'. AkoAko jejevrednostvrednost 'YES' scroll bar 'YES' scroll bar ććee se se pojavitipojaviti bezbez obziraobzira dada lili jeje potrebanpotreban ilineiline,,'NO' 'NO' ććee sprespreččitiiti njegovunjegovu pojavupojavu, a , a sasa 'AUTO' 'AUTO' ččee se se pojavitipojaviti samosamo kadakada jejepotrebanpotreban

Linkovi navigacionog menLinkovi navigacionog meniijajaKada se koriste navigacioni meniji treba voditi Kada se koriste navigacioni meniji treba voditi raraččuna kod koriuna kod koriššććenja linkova i definisanja u kom enja linkova i definisanja u kom delu treba da se udelu treba da se uččita stranaita strana

Primer:Primer:<a <a hrefhref==““Kontakt.htmlKontakt.html”” targettarget==““rightright””> Pi> Piššiteite

namnam</a></a>

OvimOvim se se klikomklikom nana link link PisitePisite namnam, , otvaraotvara stranastranaKontakt.htmlKontakt.html, u , u deludelu kojikoji se se zovezove rightright


<title><title>NaslovNaslov</title></title><frameset cols="25%,75%"><frameset cols="25%,75%">

<frame <frame srcsrc="page1.html">="page1.html"><frame <frame srcsrc="page2.html">="page2.html">

</frameset></frameset></head></head>

</html></html>

PrimerPrimer

MargineMargine zaza frejmovefrejmove<html><html><head><head><title><title>NaslovNaslov</title></title><meta http<meta http--equiv="Contentequiv="Content--Type" content="text/html; Type" content="text/html; charsetcharset=iso=iso--

88598859--1">1"><style type="text/<style type="text/csscss">"><!></style></head></style></head>

<body><body><<imgimg srcsrc="="LOGO.gifLOGO.gif" width="296" height="110">" width="296" height="110"></body></body></html></html>

TABELETABELE

Organizacija stane kroz tabeluOrganizacija stane kroz tabeluTabela se vrlo Tabela se vrlo ččesto koristi kao alat da se stranica esto koristi kao alat da se stranica organizujeorganizujeOvo je nasleđe koje dolazi iz ne poznavanja CSSOvo je nasleđe koje dolazi iz ne poznavanja CSS--a, ali i sa a, ali i sa analogije sa svim ostalim programima koji su u analogije sa svim ostalim programima koji su u šširokoj irokoj upotrebi (Word, Excel, ...)upotrebi (Word, Excel, ...)Organizacija sajta tabelom podrazumeva da je cela strana Organizacija sajta tabelom podrazumeva da je cela strana jedna tabela, kojoj su ivice nevidljivejedna tabela, kojoj su ivice nevidljiveU svakoj od U svakoj od ććelija tabele nalaze se neki sadrelija tabele nalaze se neki sadržžaji sajta aji sajta (baneri, navigacija, tekstovi, slike ...), ali i cele manje (baneri, navigacija, tekstovi, slike ...), ali i cele manje tabele da bi stuktura bila tabele da bi stuktura bila ““ččvrvrššććaa”” i laki lakšša za rada za radZa velike sajtove, ova struktura je vrlo komplikovana jer Za velike sajtove, ova struktura je vrlo komplikovana jer postoji veliki broj ugnjepostoji veliki broj ugnježždenih tabela, pa se ne preporudenih tabela, pa se ne preporuččujeujeTakođe se pokazuje kao loTakođe se pokazuje kao lošša za rangiranje u pretraa za rangiranje u pretražžvavaččimaima

Primer organizacije kroz tabeluPrimer organizacije kroz tabelu

HTML HTML tabeletabeleTabeleTabele se se sastojesastoje odod vrstavrsta i i kolonakolonaU HTMLU HTML--u u tabelatabela se se sastojisastoji odod redovaredova kojikoji susu podeljenipodeljeninana poljapolja, a , a prvaprva poljapolja svihsvih redovaredova ččineine prvuprvu kolonukolonu, , drugadruga poljapolja drugudrugu kolonukolonu, , itditd..

UpotrebaUpotreba tabelatabela jeje istovremenoistovremeno zaza prikazprikaz tabelarnihtabelarnihpodatakapodataka i i zaza generalnogeneralno ureuređenje web straneđenje web strane

ZaZa kreiranjekreiranje tabeletabele potrebnapotrebna susu tri tri elementaelementa::•• TABLETABLE -- zaza tabelutabelu,,•• TRTR -- zaza red,red,•• TDTD -- zaza poljepolje..

THTH zaza zaglavljazaglavlja vrstavrsta iliili kolonakolona

HTMLHTML oznakeoznake tabeltabelaa<table> </table><table> </table> OznakaOznaka zaza prostorprostor tabeletabele<<trtr> </> </trtr>> PodaciPodaci izmeizmeđu su zasebni redovi đu su zasebni redovi ttaabelebele<td> </td><td> </td> PodaciPodaci izizmmееđu pripadaju koloni đu pripadaju koloni tabeletabelePrimer:Primer:

<table><table><<trtr><td>A</td>><td>A</td>

<td>B</td></<td>B</td></trtr>><<trtr><td>1</td>><td>1</td>

<td>2</td></<td>2</td></trtr>></table></table>

2211BBAA

IviceIvice, , zaglavljazaglavlja i i naslovinaslovi tabelatabelaAtributiAtributi zaza tabeletabele::

BorderBorder –– definidefinišše e šširinu linije u pixirinu linije u pix<caption></caption><caption></caption> TekstTekst izmeizmeđu je đu je ispisanispisanizdvojenizdvojen kao naslovkao naslov<<thth></></thth>> TekstTekst izmeizmeđu je zaglavljeđu je zaglavljecellspancellspan –– zaza spajanjespajanje ććelija u kolonielija u kolonirowspanrowspan -- zaza spajanjespajanje ććelija u reduelija u reduAtributAtribut CELLSPACINGCELLSPACING definidefiniššee rastojanjerastojanje izmeđuizmeđuććelijaelija u u tabelitabeli

AtributAtribut CELLPADDINGCELLPADDING definidefiniššee rastojanjerastojanje odod iviceivicedo do sadrsadržžajaaja ććelijeelije

<table border<table border””11””>><caption> <caption> ImeIme tabeletabele</caption></caption>

<<trtr><><thth>>PrviPrvi</</thth>><<thth>>DrugiDrugi</</thth></></trtr>>

<<trtr><td>A</td>><td>A</td><td>B</td></<td>B</td></trtr>>

</table></table>

Ime tabele

BA

DrugiPrvi

PrimerPrimer

BojaBoja ivicaivica i i ććelijaelijaBojenjeBojenje ivicaivica::<table <table bordercolorbordercolor==““#00CC00#00CC00””>>

OvakavOvakav zapiszapis odnosiodnosi se se nana celucelu tabelutabeluZaZa bojenjebojenje vrstevrste, , kolonekolone iliili ććelije treba oznaku elije treba oznaku staviti između naznaka za vrstustaviti između naznaka za vrstu, kolonu ili , kolonu ili ććeleliijujuZa cZa crrtanje u dve boje koriste se tanje u dve boje koriste se

BordercolorlightBordercolorlight –– gornja i leva ivicagornja i leva ivicaBordercolordarkBordercolordark –– gogorrnja i desna ivicanja i desna ivica

Za pojedinaZa pojedinaččna bojenja ivica je atributna bojenja ivica je atribut

<s<stiletile==““borderborder--toptop--color:#00CC30; color:#00CC30; ostaleostale””>>

BojaBoja pozadinepozadine tabeletabelePopunaPopuna tabeletabele bojombojom

<table <table bgcolorbgcolor==““#000FF0#000FF0””>>

PopunaPopuna tabeletabele slikomslikom<table <table backgroundbackground==““adresaadresa foldera/pera.jpgfoldera/pera.jpg””>>

AkoAko se se bojiboji vrtsa, kolona ili vrtsa, kolona ili ććelija sve ostaje isto elija sve ostaje isto samo se ispred dodaje konkretan tag. Na primer za samo se ispred dodaje konkretan tag. Na primer za bojenje pozadine kolone li popunu slikombojenje pozadine kolone li popunu slikom

<<td td bgcolorbgcolor==““#000FF0#000FF0””>><<td backgroundtd background ==““adresaadresa foldera/pera.jpgfoldera/pera.jpg””>>


<title><title>TabelaTabela</title></title></head></head><body> <body> <TABLE BORDER CELLPADDING="8" <TABLE BORDER CELLPADDING="8"

CELLSPACING="4" BGCOLOR=yellow> CELLSPACING="4" BGCOLOR=yellow> <TR><TR>

<TH> English </TH><TH> English </TH><TH> Spanish </TH><TH> Spanish </TH><TH> German </TH><TH> German </TH>

</TR> </TR> <TR><TR>

<TD> one </TD><TD> <TD> one </TD><TD> unouno </TD> <TD> </TD> <TD> einein </TD></TD></TR> </TR> <TR><TR>

<TD> two </TD><TD> dos </TD><TD> <TD> two </TD><TD> dos </TD><TD> zweizwei </TD></TD></TR> </TR> <TR><TR>

<TD> three </TD> <TD> <TD> three </TD> <TD> trestres </TD> <TD> </TD> <TD> dreidrei </TD></TD></TR></TR><CAPTION ALIGN="BOTTOM"> <B><CAPTION ALIGN="BOTTOM"> <B>TabelaTabela 1</B>: 1</B>: BrojanjeBrojanje nana

raznimraznim jezicimajezicima</CAPTION></TABLE></CAPTION></TABLE></body></body>

</html></html>

PrimerPrimer

Razmak između ivice i sadrRazmak između ivice i sadržžajaajaRazmakRazmak jeje definisandefinisan u u pix!pix!

AtributiAtributi susu cellspacingcellspacing i i cellpaddingcellpadding

PrimerPrimerRazmak između Razmak između ććelija u tabelielija u tabeli

<table border=<table border=““11”” cellspacingcellspacing==““33””>>PrimerPrimer

Razmak između ivice Razmak između ivice ććelije i sadrelije i sadržžajaaja

<table border=<table border=““11”” cellpaddingcellpadding==““77””>>

DimenzijeDimenzije tabeletabele i i ććelijaelijaAtributiAtributi widthwidth i i heightheight

RelativneRelativne veliveliččineine –– u odnosu na u odnosu na dimenzijudimenziju web web ččitaitaččaa

<table width=<table width=““90%90%”” height=height=““30%30%””>> //za tabeluza tabelu<td width=<td width=““90%90%”” height=height=““3030””> > //zaza ććelijueliju

Apsolutne veliApsolutne veliččine ine –– nezavisne od velinezavisne od veliččine web ine web ččitaitaččaa

<table width=<table width=““750750”” height=height=““250250””> > //za tabeluza tabelu<t<tdd width=width=““5050”” height=height=““2020””> > //zaza ććelijueliju

<table width="60%" border="3"><table width="60%" border="3"><tr><tr>

<td <td rowspan=3rowspan=3 >A</td>>A</td><td>1</td><td>1</td>

</tr></tr>

<tr><tr><td>2</td><td>2</td>

</tr></tr><tr><tr>

<td>3</td><td>3</td></tr></tr>

</table> </table>

PrimerPrimer

<table width="60%" border="3"><table width="60%" border="3"><tr ><tr >

<td <td colspan=2colspan=2>Spojene 2 kolone </td>>Spojene 2 kolone </td></tr></tr>

<tr><tr><td>b</td><td>b</td><td>2</td><td>2</td>

</tr></tr><tr><tr>

<td>c</td><td>c</td><td>3</td><td>3</td>

</tr></tr></table></table>

PrimerPrimer

<TABLE BORDER=3> <TABLE BORDER=3> <TR><TR>

<TD ROWSPAN=2><TD ROWSPAN=2>PeraPera</TD></TD><TD COLSPAN=2>Mika</TD><TD COLSPAN=2>Mika</TD>

</TR> </TR> <TR><TR>

<TD><TD>LazaLaza</TD></TD><TD><TD>ĐokaĐoka</TD></TD>

</TR> </TR>

</TABLE></TABLE>

PrimerPrimer

Poravnanje sadrPoravnanje sadržžaja aja ććelijaelijaAtributi: Atributi: left, right, center za horizontalnoleft, right, center za horizontalno: : *align**align*Atributi:Atributi: top, middle, baseline, bottom za vertikalnotop, middle, baseline, bottom za vertikalno: : **valignvalign**

PrimerPrimer<table border=<table border=““22”” width=width=““90%90%”” height=height=““100%100%””>>

<<trtr><td width=><td width=““20%20%”” align=align=““centercenter””> > CentralniCentralniteksttekst</td></</td></trtr>>

<<trtr><td width=><td width=““25%25%”” valignvalign==““toptop””> > GornjiGornjiteksttekst</td></</td></trtr>>

</table></table>

OdnosOdnos tabeletabele i web i web stranestranePoravnavanjePoravnavanje celecele tabeletabele u u odnosuodnosu nana web web ččitaitaččje u atributu je u atributu divdiv pre tabelepre tabele,, jer se odnosi na celu jer se odnosi na celu tabelutabelu

PrimerPrimer<div align=<div align=““rightright””>>

<table<table……..>..>

</table></table></div></div>

DeljenjeDeljenje slikeslike u u tabeltabeliiVelikeVelike slikeslike se se prikazujuprikazuju tektek kadakada se se celecele uuččitajuitaju

Da bi se transfer slika smanjio, slika se seDa bi se transfer slika smanjio, slika se sečče u e u manje delove (simetrimanje delove (simetriččno)no)

Deljenjem u manje delova i spajanjem u tabeli Deljenjem u manje delova i spajanjem u tabeli momožže se postie se postićći da konai da konaččna velina veliččina slike bude ina slike bude manja i do 30%manja i do 30%

Ova uOva uššteda je poteda je poslsledica kompredica kompresijeesije po broju boja po broju boja u slici, pa postoji verovatnou slici, pa postoji verovatnoćća da deo slike ima a da deo slike ima manje boja i da se momanje boja i da se možže vie višše sabitie sabiti..

Toliko Toliko o o tabelamatabelama !!!!!!


BeogradBeograd


CSS CSS stilovistilovi

Sajt kreiran CSSSajt kreiran CSS--omom

Sajt kreiran CSSSajt kreiran CSS--om, ali bez njegaom, ali bez njega

CSS CSS stilovistiloviCascading Style SheetsCascading Style Sheets

-- NamenaNamena: : razdvojitirazdvojiti sadrsadržžaj HTML dokumenta od aj HTML dokumenta od strukture (definistrukture (definissati na jednom mestu parametre ati na jednom mestu parametre za elemente stranice: font, horizontalne linije i sl.)za elemente stranice: font, horizontalne linije i sl.)

-- CSS omoguCSS omoguććava da se ava da se unapred odredi stilunapred odredi stil

-- IIzbegzbegavaava sese ponavljanje istih parametaraponavljanje istih parametara

-- CSS u zaglavlju HTML dokumenta u obliku CSS u zaglavlju HTML dokumenta u obliku komentarakomentara

-- CSS file moCSS file možžemo povezati sa svim delovima emo povezati sa svim delovima stranice i na taj nastranice i na taj naččin kontroliin kontrolissati sadrati sadržžaj cele aj cele

stranicestranice

DefinisanjeDefinisanje CSSCSS--aaCSSCSS se se definidefiniššee u zaglavlju HTML dokumenta u u zaglavlju HTML dokumenta u obliku komentaraobliku komentara

<style type=<style type=““text/csstext/css””>>

ELEMENTELEMENT

</style></style>

StyleStyle tag se stavlja unutar taga tag se stavlja unutar taga HeadHead

<head><style type="text/css">h1 {color:blue; font-size:20px ; font-family: verdana} </style>

</head><body>

<h1>pera</h1></body>

CSS CSS terminterminoologijalogijaUnutarUnutar deladela zaza definisanjedefinisanje csscss--a a prvoprvo se se definidefinišše e ime stila koji ime stila koji ćće se kasnije pozivati. Npr. prvi.e se kasnije pozivati. Npr. prvi.Svi atributi stila piSvi atributi stila piššu se u vitiu se u vitiččastoj zagradiastoj zagradiAtributi su boja slovaAtributi su boja slova--colorcolor, boja pozadine slova, boja pozadine slova--backgroundbackground, veli, veliččinaina-- fontfont--sizesize, font, font-- fontfont--familyfamily, , uvlauvlaččenjeenje-- texttext--indent indent ......Posle svakog od atributa dolaze dve taPosle svakog od atributa dolaze dve taččke iza kojih ke iza kojih ide vrednost tog atributaide vrednost tog atributa

prvi {color: blue; fontprvi {color: blue; font--size: 20px ; fontsize: 20px ; font--family: verdana}family: verdana}

IzmIzmeeđu dva atributa stavlja se tađu dva atributa stavlja se taččkaka--zarez da bi se zarez da bi se odvojili.odvojili.Svaki stil se poziva svojim imenom i zavrSvaki stil se poziva svojim imenom i završšava istimava istim

CSS u liniji tagaCSS u liniji taga<html><html><head><head><meta http<meta http--equiequi="content="content--stylestyle--type" content="text/type" content="text/csscss">"></head></head><body><body>KreiranjeKreiranje CSS CSS stilovastilova u u linijiliniji..<P style="font<P style="font--size: 20pt">size: 20pt">KreiranjeKreiranje CSS CSS stilovastilova u u linijiliniji.</p>.</p><P style="font<P style="font--size: 30pt; size: 30pt; color:greencolor:green">">KreiranjeKreiranje CSS CSS stilovastilova

u u linijiliniji. </p>. </p><P style="font<P style="font--size: 40pt; size: 40pt; color:redcolor:red; background; background--color: color:

#FFFF00"> #FFFF00"> KreiranjeKreiranje CSSCSSstilovastilova u u linijiliniji. </p>. </p></body></body></html></html>

Interni CSS Interni CSS -- Atributi tekstaAtributi teksta<html><html>

<head><head><style type="text/<style type="text/csscss">">b {fontb {font--family:arialfamily:arial; ;

fontfont--size:14px; size:14px; color:redcolor:red}}</style></style></head></head>

<body><body><b><b>OvoOvo jeje recenicarecenica sasa atributimaatributima

dodeljenimdodeljenim u u stilovimastilovima tagutagu BB</b></b>


Eksterni CSS Eksterni CSS -- Atributi tekstaAtributi teksta<html><html><head><head><link <link relrel="="stylesheetstylesheet" type="text/" type="text/csscss" " hrefhref="="pozadina.csspozadina.css">"></head></head>

<body> <body> DodelaDodela zutezute bojeboje pozadinipozadini i i plaveplave bojeboje tekstutekstu !</body>!</body></html></html>

KodKod ““pozadina.csspozadina.css””

bodybody { font{ font--family: Verdana;family: Verdana;color: blue; backgroundcolor: blue; background--color: yellow}color: yellow}

CSS atributi za pozadineCSS atributi za pozadinebackgroundbackground--colorcolor

primerprimer { background{ background--color: yellow; }color: yellow; }

backgroundbackground--imageimage

primerprimer { background{ background--image: url(image: url(slikaslika..jpgjpg); }); }

backgroundbackground--repeatrepeat ((horizontalno ponavljanje (repeathorizontalno ponavljanje (repeat--x), x), vertikalno (repeatvertikalno (repeat--y), u oba pravca (repeat), ili bez y), u oba pravca (repeat), ili bez ponavljanja (noponavljanja (no--repeat)repeat)))

perapera { { backgroundbackground--image: url(image: url(slikaslika..jpgjpg); ); backgroundbackground--repeat: repeatrepeat: repeat--xx; ;

}}

Atributi za linijeAtributi za linijelineline--heightheight ((normal, broj (1 vrednost singlenormal, broj (1 vrednost single--spaced, 2 spaced, 2 doubledouble--spaced, i 1.5spaced, i 1.5 je vrednost između prve dve je vrednost između prve dve), mer), mere sue su(px ili pt), ili procenat(px ili pt), ili procenat))

Primer Primer { line{ line--height: 2; }height: 2; }

borderborder--colorcolor ((borderborder--toptop--color, bordercolor, border--rightright--color, bordercolor, border--bottombottom--color i bordercolor i border--leftleft--colorcolor))

PrimerPrimer { border{ border--color: color: blueblue; }; }

borderborder--stylestyle ((borderborder--toptop--style, borderstyle, border--rightright--style, borderstyle, border--bottombottom--style style ii borderborder--leftleft--stylestyle))

Primer Primer { border{ border--style: ridge; }style: ridge; }

borderborder--widthwidth((borderborder--toptop--width, borderwidth, border--rightright--width, borderwidth, border--bottombottom--widthwidth i i borderborder--leftleft--widthwidth))

PrimerPrimer { border{ border--width: 3px; }width: 3px; }

Atributi za tekstAtributi za tekstfontfont--familyfamily

PrimerPrimer {{fontfont--family: Arial, Helvetica, sansfamily: Arial, Helvetica, sans--serif;serif;}}

fontfont--sizesize ((xxxx--small, xsmall, x--small, small, medium, large, xsmall, small, medium, large, x--large, xxlarge, xx--largelarge, , largerlarger,, smallersmaller,, pikseli (px), tapikseli (px), taččkkee (pt), (pt), procenat od veliprocenat od veliččine slova (%)ine slova (%)

Primer Primer { font{ font--size: 8px; }size: 8px; }

fontfont--stylestyle ((normalnormal, , italic)italic)PrimerPrimer { font{ font--style: italic }style: italic }

fontfont--weightweight ((bold, bolder, lighter, normal, 100, 200, bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900300, 400, 500, 600, 700, 800, 900))

PrimerPrimer { font{ font--weight: bold; }weight: bold; }

Atributi za tekstAtributi za tekstletterletter--spacingspacing ((pt ili px)pt ili px)

PrimerPrimer { letter{ letter--spacing: 2.0 px }spacing: 2.0 px }

linklinkA:link { color: A:link { color: greengreen; }; } A:visited { color: #FF0A:visited { color: #FF0000000; }; }

texttext--alignalign((left, right, center)left, right, center)PrimerPrimer { text{ text--align: right; }align: right; }

texttext--decorationdecoration (underline(underline, , overlineoverline, , lineline--through ili none)through ili none)A:link { textA:link { text--decoration: overline; }decoration: overline; }

texttext--transformtransformH1 { textH1 { text--transform: capitalize; }transform: capitalize; }

texttext--indentindent : pozotivna vrednost uvla: pozotivna vrednost uvlačči prvi red, a negativna uvlai prvi red, a negativna uvlačči i ostatak teksta u odnosu na prvi red, vrednosti su px, pt i %ostatak teksta u odnosu na prvi red, vrednosti su px, pt i %

PrimerPrimer { text{ text--indent: 30 px; }indent: 30 px; }

AtributiAtributilistlist--stylestyle--typetype

PrimerPrimer { list{ list--stylestyle--type: square; }type: square; }

listlist--stylestyle--imageimagePrimerPrimer { list{ list--stylestyle--image: url(image: url(slikaslika..jpgjpg); }); }

verticalvertical--alignalign((bottombottom, , top,top, baseline, middle, sub, baseline, middle, sub, super, textsuper, text--bottom, ili textbottom, ili text--toptop))

PrimerPrimer { vertical{ vertical--align: super; textalign: super; text--size: smaller }size: smaller }

<html><html><head><head><style type="text/<style type="text/csscss">">prviprvi {color: blue; font{color: blue; font--size: 20px ; fontsize: 20px ; font--family: family: verdanaverdana} } drugidrugi {color: white; {color: white; background:greenbackground:green ; font; font--family: family: helveticahelvetica; text; text--indent:2cm} indent:2cm} </style></style></head></head>

<body><body><<prviprvi >>OvoOvo jeje primer primer zaza CSS</CSS</prviprvi><><brbr>><<drugidrugi>>OvoOvo jeje primer primer zaza CSS</CSS</drugidrugi>></body></body></html></html>

PrimerPrimer

<html><html><head><head><title> CSS <title> CSS stilovistilovi</title> </title> <style type="text/<style type="text/csscss">"><!></style></style></head></head>

<body><body><font> <font> DobarDobar dandan! </font>! </font></body></body></html></html>

PrimerPrimer

<head><head> <style type="text/css"><style type="text/css"><!></style></style></head></head>

PrimerPrimer

<head><head><style type="text/css"><style type="text/css"><! </style>> </style> </head></head>

<body><body><a href=<a href=““slika1.jpg" >dobar dan </a> slika1.jpg" >dobar dan </a> <p></p><p></p><a href=<a href=““slika2.jpg"> dobar dan 2 </a>slika2.jpg"> dobar dan 2 </a><p></p><p></p></body></body>

PrimerPrimer

CSS CSS -- divdivSvi primeri do sada bili su tzv. Preefinisani tagoviSvi primeri do sada bili su tzv. Preefinisani tagoviTo znaTo značči da su imena stilova bila imena tagova i sva i da su imena stilova bila imena tagova i sva pravila koja smo definisali su se odnosila na postojepravila koja smo definisali su se odnosila na postojećće e tagovetagove

Ovo je vlo ograniOvo je vlo ograniččavajuavajućće, jer je broj tagova limitirane, jer je broj tagova limitiranDa bi se to izbeglo koristi se tag div ili spamDa bi se to izbeglo koristi se tag div ili spam

Tag div sluTag div služži da odredi deo prostora na koji i da odredi deo prostora na koji ćće se e se primeniti neka pravila (prostor u proizvoljnom broju primeniti neka pravila (prostor u proizvoljnom broju redova)redova)Tag spam radi isto ali samo za jednoredne zapiseTag spam radi isto ali samo za jednoredne zapise

CSS CSS -- divdivSam tag div nema nikakvu grafiSam tag div nema nikakvu grafiččku ulogu, i moku ulogu, i možže e se smatrati kao zagrada u matematici )odvajanje se smatrati kao zagrada u matematici )odvajanje nekih celina)nekih celina)

Celina koja je dodeljena jednom divCelina koja je dodeljena jednom div--u se mou se možže e opisati nekim pravilima u CSSopisati nekim pravilima u CSS--uu

Za to postoje dva naZa to postoje dva naččina:ina:•• Direktno u kodu posmatranog divDirektno u kodu posmatranog div--aa•• Kao ime klase stila u delu gde je CSSKao ime klase stila u delu gde je CSS--uu

CSS CSS -- divdivAko je organizacija sajta takva da pozicionira tag div i Ako je organizacija sajta takva da pozicionira tag div i njegov sadrnjegov sadržžaj, tada je CSS zaduaj, tada je CSS zadužžen samo za estetiku en samo za estetiku (boju, font, veli(boju, font, veliččinu, margin, ...)inu, margin, ...)Primer za kod u liniji divPrimer za kod u liniji div--aa<div style="display:block;font<div style="display:block;font--size:18px; size:18px; color:red;fontcolor:red;font--family: Arial;">family: Arial;">TekstTekst nana kojikoji se se primenjujeprimenjuje pravilopravilo divdiv--aa</div></div>

Primer za klasu stilaPrimer za klasu stila<div class=<div class=““imeime””> > TekstTekst nana kojikoji se se primenjujeprimenjuje pravilopravilo divdiv--aa</</div>div>U tagu U tagu <stile> se <stile> se definidefinišše klasa imee klasa ime.ime{.ime{display:block;fontdisplay:block;font--size:18px; size:18px; color:red;fontcolor:red;font--family: family: ArialArial; }; }

Div za organizacijuDiv za organizacijuAko se div tag nije nekom drugom tehnikom pozicioniran na Ako se div tag nije nekom drugom tehnikom pozicioniran na strani (tabele), tada se u njemu definistrani (tabele), tada se u njemu definiššu atributi za u atributi za pozicioniranjepozicioniranjeU tom sluU tom sluččaju dobro je koristiti viaju dobro je koristiti višše div tagovae div tagovaMatiMatiččni da definini da definišše oblast delovanja, dok ugnjee oblast delovanja, dok ugnježždeni da deni da definidefiniššu estetiku za sadru estetiku za sadržžajeaje

<div style="<div style="display:blockdisplay:block; float:; float:rightright; ; clear:bothclear:both; ; width:width:550%;">0%;">

<div style="display:block;font<div style="display:block;font--size:18px; size:18px; color:red;fontcolor:red;font--family: family: Arial;">Arial;">TekstTekst nana kojikoji se se primenjujeprimenjuje pravilopravilo divdiv--aa</div></div>

</</div>div>

KlaseKlaseKlase se koriste kada se pravi veliki broj stilova, koji Klase se koriste kada se pravi veliki broj stilova, koji su na neki nasu na neki naččin povezaniin povezani (vi(višše vrednosti za isti e vrednosti za isti atributatribut)), a, ali imaju neke razlike koje se primenjuju na li imaju neke razlike koje se primenjuju na određene delove tekstaodređene delove teksta, tabele ...., tabele ....Klasa se definiKlasa se definišše tako e tako ššto se iza to se iza imenimenaa stilastila doda doda tataččka pa ka pa ime klaseime klase u formatuu formatu

<head><style type="tekst/css">h1.imeklase {color:blue; font-size:20px ; font-family: verdana} </style>

Ako je prethodno definisan stil, dovoljno je u definisanju klase pisati .ime_klase

PozPoziivanje klasevanje klaseKlasa se poziva na deo teksta na koji se dati Klasa se poziva na deo teksta na koji se dati skup pravila skup pravila žželi primenitieli primenitiKada se poziva prvo se poziva ime stila, pa tek Kada se poziva prvo se poziva ime stila, pa tek onda ime klase, pri onda ime klase, pri ččemu se ime klase definiemu se ime klase definišše e ispod znaka navodaispod znaka navodaKadaKada se se zavrzavrššava, zavrava, završšava se samo imenom ava se samo imenom stila, a ne i klasestila, a ne i klase

Primer:Primer:<h1 class="<h1 class="imeklaseimeklase">"> TekstTekst nana kojikoji se se primenjujeprimenjuje

datidati skupskup pravilapravila</h1></h1>

Div Div -- class / idclass / idCSS sa taom div moCSS sa taom div možže da komunicia preko dva e da komunicia preko dva njegova atributa: class i idnjegova atributa: class i idAko se koristi atribut class tada vaAko se koristi atribut class tada važže do sada e do sada prikazana pravilaprikazana pravilaAko se koristi atribut id tada se u imenu stila Ako se koristi atribut id tada se u imenu stila nalazi oznaka #nalazi oznaka #

##centralni_tekstcentralni_tekst {color: green} {color: green}

Primer Primer klasaklasaprimerprimer.css.css

pasuspasus..desnodesno{{texttext--align: right;align: right;fontfont--sizesize: small: small}}

pasuspasus..sredinasredina{{texttext--align: center;align: center;fontfont--style: style: boldbold}}

..levolevo{{texttext--align: left;align: left;letterletter--spacing: spacing: 22pxpx} }

primer.htmlprimer.html

<html><html><head><head><link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css" href="primer3.css" /> href="primer3.css" /> </head></head><body><body><p<pasusasus class=class=““rightright ">">TekstTekst ispisanispisan sasa desnimdesnim poravnjanjemporavnjanjem..</p</pasusasus>><p<pasusasus class="center">class="center">PasusPasus kojikoji jeje centrirancentriran..</p</pasusasus >><h<h22 class="class="leftleft">">SadrzajSadrzaj unutarunutar H2 H2 kojikoji jeje poravnatporavnat levolevo</h</h22>></body></body></html></html>

CSS CSS zaza skrivanjeskrivanje<html><html><head><head><style type="text/<style type="text/csscss">">..skrivanjeskrivanje{{

visibility:hiddenvisibility:hidden;;}}

</style></style></head></head><body><body>

nestonesto<div class="<div class="skrivanjeskrivanje">"><table border="1" ><table border="1" ><<trtr>>dddddd</</trtr>></table ></table ></div></div>


Bez CSS-a

Sa CSS-om

Imena klasaImena klasaAko se ime klase poklapa saimenom taga, tada u Ako se ime klase poklapa saimenom taga, tada u sintaksi nema .sintaksi nema .Ako je ime klase nikatko onda se piAko je ime klase nikatko onda se pišše . ispred imena e . ispred imena kalsekalse

<style type=<style type=““text/text/csscss””>>p {marginp {margin--left: 20px} left: 20px} body {backgroundbody {background--image:url("imagesimage:url("images//slikaslika.gif")} .gif")} ..novinovi{{fontfont--family: Arial;family: Arial;}}..centralni_deocentralni_deo{{fontfont--family: Arial;family: Arial;}}

</style></style>

OrganizacijaOrganizacija web web stranestraneSadrSadržžaj na web stranici se generalno moaj na web stranici se generalno možže urediti e urediti pomopomoćću frejmova i tabela, ali su ovi nau frejmova i tabela, ali su ovi naččini ini nepopularni i nepopularni i ““neprijateljskineprijateljski”” orjentisani od strane orjentisani od strane GooglaGoogla

Mnogo bolji naMnogo bolji naččin za struktuiranje sadrin za struktuiranje sadržžaja aja stranice je upotreba taga divstranice je upotreba taga div

Pojedine celine na stranici treba dodeljivati div Pojedine celine na stranici treba dodeljivati div tagovima(koji su najnitagovima(koji su najnižži u hijerarhiji ugnjei u hijerarhiji ugnježždenih denih tagova), a njihov polotagova), a njihov položžaj i karakteristike aj i karakteristike definisati u CSSdefinisati u CSS--uu

divovi.cssdivovi.css#osnova {width: 300px; font: 12px arial, sans#osnova {width: 300px; font: 12px arial, sans--serif; margin: serif; margin:

auto;}auto;}.kolona { width: 150px; height: 140px; padding: 5px; border: .kolona { width: 150px; height: 140px; padding: 5px; border:

1px solid #000000; float: left;}1px solid #000000; float: left;}.kolona p { font: 12px arial, sans.kolona p { font: 12px arial, sans--serif;}serif;}.kolona h1 { width: 350px; font: bold 14px arial, sans.kolona h1 { width: 350px; font: bold 14px arial, sans--serif; serif;

color: blue; bordercolor: blue; border--bottom: 1px solid yellow}bottom: 1px solid yellow}

<html><html><head><link rel="stylesheet" type="text/css" href="divovi.css"><<head><link rel="stylesheet" type="text/css" href="divovi.css"></head>/head><body><body>

<div id="osnova"> <div id="osnova"> <div class="kolona"><div class="kolona">

<h1>Imena</h1><h1>Imena</h1><p>Pera</p><p>Pera</p><p>Mika</p><p>Mika</p>

</div></div><div class="kolona"><div class="kolona">

<h1>To je to !</h1><h1>To je to !</h1></div></div>

</div></div></body></body></html></html>

Primer organizacije stranePrimer organizacije strane

MoguMoguććnosti CSSnosti CSS--aaCSSCSS--om se mogu definisati najfiniji detalji na om se mogu definisati najfiniji detalji na prezentacijiprezentacijiNajNajččeeššćće se ovaj veliki skup pravila napie se ovaj veliki skup pravila napišše e jednom, pa ga web master kopira na sve svoje jednom, pa ga web master kopira na sve svoje prezentacije koristeprezentacije koristećći ih po i ih po žželjieljiVeliVeliččina teksta kojim se opisuju stilovi je toliko ina teksta kojim se opisuju stilovi je toliko minorna, da se ne vodi raminorna, da se ne vodi raččuna o tome da li se na una o tome da li se na nekom sajtu koriste svi opisi u velikom skupu cssnekom sajtu koriste svi opisi u velikom skupu cssPored standardnih karakteristika boje teksta, Pored standardnih karakteristika boje teksta, pozadine, velipozadine, veliččine, uvlaine, uvlaččenja, razmaka, margina enja, razmaka, margina mogu se postaviti i senke, preklapanja, mogu se postaviti i senke, preklapanja, poravnanja, ivice, pasusi, plutajuporavnanja, ivice, pasusi, plutajućći tekst itd.i tekst itd.

PrimerPrimer<html><html><body><body><input type="text" size="20" <input type="text" size="20"

style="style="background:yellowbackground:yellow; ; color:redcolor:red" " value="value="InicijalnoInicijalno ispisanispisan teksttekst !">!">

<<brbr><><brbr>>

<input type="radio" style="<input type="radio" style="background:bluebackground:blue"> "> IzborIzbor <<brbr><><brbr>>

<select size="1" style="background:#008000; <select size="1" style="background:#008000; color:#FAF519">color:#FAF519">

<option selected><option selected>PrviPrvi element </option>element </option><option><option>DrugiDrugi</option></option><option><option>TreciTreci</option></option></select><</select><brbr><><brbr>>

<input type="button" <input type="button" style="background:#BFE2F9; style="background:#BFE2F9; color:#E62B86; fontcolor:#E62B86; font--weight:weight:bold" value="bold" value="KlikniKlikni ovdeovde !">!">


VizuelniVizuelni efektiefekti<html><html><head><head><style><style>p {height: 350px; width: 450px; fontp {height: 350px; width: 450px; font--size: 44pt;size: 44pt;filter: filter: progid:DXImageTransform.Microsoft.Shadowprogid:DXImageTransform.Microsoft.Shadow(color=(color=’’graygray’’, direction=120, strength=6), direction=120, strength=6)}}</style></style></head></head><body><body><p><p>Get a Drop Shadow EffectGet a Drop Shadow Effect</p></p></body></body></html></html>

VizuelniVizuelni efektiefekti

filter:progid:DXImageTransform.Microsoft.dropshadowfilter:progid:DXImageTransform.Microsoft.dropshadow(OffX(OffX=5, =5, OffYOffY=5, Color==5, Color=’’graygray’’, Positive=, Positive=’’truetrue’’))””

VizuelniVizuelni efektiefekti

p {height: 350px; width: 450px; fontp {height: 350px; width: 450px; font--size: 44pt;size: 44pt;

filter:progid:DXImageTransform.Microsoft.MotionBlur(filter:progid:DXImageTransform.Microsoft.MotionBlur(StrengthStrength=5,Direction=120);=5,Direction=120);

}}

Toliko Toliko o CSS o CSS stilovimastilovima !!!!!!


BeogradBeograd


HTML HTML forme (forme (obrasciobrasci))

FormeFormeForma predstavlja skup grafiForma predstavlja skup grafiččkih elemenata koji kih elemenata koji su definisani u HTML, sa ciljen da korisniku su definisani u HTML, sa ciljen da korisniku omoguomogućće da izvre da izvršši unos nekog podatkai unos nekog podatka

Forma se najForma se najččeeššćće sree srećće u formularima, gde se e u formularima, gde se ooččekuje da se izvrekuje da se izvršši registracija, ali i u obliku i registracija, ali i u obliku samo dva tekstualna polja za registracijusamo dva tekstualna polja za registraciju

U formama se najU formama se najččeeššćće koriste : tekstualna polja, e koriste : tekstualna polja, radio tasteri, chech polja i tasteriradio tasteri, chech polja i tasteri

HTML HTML obrasciobrasciPrimena obrazaca: kod prikupljanja razliPrimena obrazaca: kod prikupljanja različčitih itih podataka od korisnikapodataka od korisnikaOznakaOznaka obrascaobrasca jeje <form><form> </form></form>

AtributiAtributi oveove oznakeoznake susu ::1.1. ActionAction –– Web Web iliili UrlUrl adresaadresa kojojkojoj ččitaitačč ššaljealje

podatke nakon potvpodatke nakon potvrrde unosa Sude unosa Submbmit. Ako je to it. Ako je to mail treba staviti mail treba staviti mailto:adresamailto:adresa..

2.2. MethodMethod –– je naje naččin slanja. Moin slanja. Možže biti e biti POSTPOST ili ili GETGET. . PostPost sakrivasakriva podatkepodatke kojekoje prenosiprenosi dokdok GetGetprikazujeprikazuje u u tracitraci AddresseAddresse..

3.3. TitleTitle –– je ime obrasca kome je ime obrasca kome ćće se pristupitie se pristupiti4.4. EnctEnctyypepe –– tip kodiranja pri slanjutip kodiranja pri slanju

HTML HTML formeformeForme su delovi prezentacije u koje Forme su delovi prezentacije u koje ćće se upisivati e se upisivati određeni podaciodređeni podaciElementi forme mogu biti:Elementi forme mogu biti:•• text text –– tekstualno polje,tekstualno polje,•• radio radio –– radio buttons,radio buttons,•• checkbox,checkbox,•• select select –– padajupadajućći meni u komi meni u komee se nalaze vrednosti se nalaze vrednosti

definisane u tagu option,definisane u tagu option,•• submit submit –– akcija koja treba da se izvrakcija koja treba da se izvrššii

Tag za unos teksta je Tag za unos teksta je InputInput, pri , pri ččemu se mora emu se mora definisati tip, ime promenljive i dudefinisati tip, ime promenljive i dužžinainaAtributi:Atributi:

Type, id, name, size, maxlength, disabledType, id, name, size, maxlength, disabled ......

Unos tekstaUnos tekstaUnos u tekstualno poljeUnos u tekstualno polje: :

<input type="text" name= <input type="text" name= ""polje1olje1" " value="with an initial valuevalue="with an initial value">">

ViViššeredno tekstualno polje:eredno tekstualno polje:<<textareatextarea name= name= ""polje2polje2" cols="24" rows="2">" cols="24" rows="2">HelloHello</</textareatextarea>>

Polja sa passwordPolja sa password--omom: : <input type="password" name= <input type="password" name= ""poljepolje3" value="secret">3" value="secret">

Tag labelTag labelTag label se vrlo Tag label se vrlo ččesto koristi u strukturi formi, iako o esto koristi u strukturi formi, iako o definiciji forme njoj striktno i ne pripadadefiniciji forme njoj striktno i ne pripadaOvj tag sluOvj tag služži da se kroz njegov sadri da se kroz njegov sadržžaj prikaaj prikažže statie statiččki ki tekst, koji korinik ne motekst, koji korinik ne možže da menjae da menjaIz tog razloga ne spada striktno u elemente formeIz tog razloga ne spada striktno u elemente formeMeđutimMeđutim, , ččesto se koristi da se statiesto se koristi da se statiččki deo forme ki deo forme prikaprikažže kroz ovaj tag, ili alternativno direktno u HTMLe kroz ovaj tag, ili alternativno direktno u HTML--aaLabel je u viLabel je u viššim programskim jezicima postao im programskim jezicima postao standard, narostandard, naroččito kada se radi o pozicioniranju ito kada se radi o pozicioniranju teksta, pa se preporuteksta, pa se preporuččuje da s koristiuje da s koristi

<label><label> Unesite ime:Unesite ime: </</label>label>

TasteriTasteriTasterTaster SSubmitubmit::

<input type="<input type="submitsubmit" name="" name="ime1ime1" value="Submit">" value="Submit">

Taster RTaster Reseteset ::<input type="<input type="resetreset" name="" name="imeime2" value="Reset">2" value="Reset">

TasterTaster::<input type="<input type="buttonbutton" name="" name="imeime3" value="Push Me">3" value="Push Me">

SSubmitubmit: : ššalje podatkealje podatkeRReseteset: : VraVraćća sve vrednosti polja na a sve vrednosti polja na inicijalneinicijalneTaster Taster : : izvrizvrššava neku akciju koja ava neku akciju koja je sakrivena iza je sakrivena iza Java ScriptJava Script kkôôdada

PrimerPrimer<html><html>

<body><body><form name="proba" action=<form name="proba" action=““pera.php" metod="POSTpera.php" metod="POST““

enctype="application/xenctype="application/x--wwwwww““>>

<p> Ime:<input type="text" name= "Ime" size="12"><p> Ime:<input type="text" name= "Ime" size="12">Prezime:<input type="text" name="Prezime" size="15">Prezime:<input type="text" name="Prezime" size="15">

<p><p>

<p> <p> <input type=<input type=““submitsubmit”” valuvaluee==““submitsubmit””>><input type=<input type=““resetreset””>><p><p>

</form></form>


PrimerPrimer

Taster fileTaster filePosebanPoseban tip tip tasteratastera predstavljapredstavlja taster taster tipatipa file, i file, i koristikoristi se se kodkod uploadupload--a a iliili definisanjadefinisanja putanjeputanjeSintaksaSintaksa zaza ovajovaj taster taster jeje

<input type="file" name=<input type="file" name=““imeime" id=" id=““ime_idime_id" />" />

OvajOvaj taster se u browsertaster se u browser--u u prikazujeprikazuje kaokao tekstualnotekstualnopoljepolje i taster Browse (i taster Browse (inicijalnoinicijalno))

KlikomKlikom nana Browse, Browse, dobijadobija se se prikazprikaz strukturestrukturepodaakapodaaka nana lokalnomlokalnom raraččunaruunaru

KreiranjeKreiranje poljapolja zaza ččekiranjeekiranjePolja za Polja za ččekiranje su drugi naekiranje su drugi naččin popunjavanja in popunjavanja obrasca.obrasca.DefiniDefiniššu se oznakom u se oznakom checkboxcheckbox

Atributi:Atributi:Type, id, name, value i checkedType, id, name, value i checked

Value je oznaka koja se nakon submit Value je oznaka koja se nakon submit ššalje alje serveru u formi ime/vrednost za taj check box. serveru u formi ime/vrednost za taj check box. Na taj naNa taj naččin server za svaki box zna da li je in server za svaki box zna da li je aktiviran ili neaktiviran ili neCheckedChecked govori govori ččitaitačču da pre crtanja naznau da pre crtanja naznačči i checkbox poljecheckbox polje

CheckboxCheckboxCCheckboxheckbox: :

<input type="<input type="checkboxcheckbox" name= " " name= " ne vidi se 1ne vidi se 1””value= " value= " ne vidi se 2ne vidi se 2" " checkedchecked>>

typetype: : "checkbox""checkbox"namename: : Koristi se da bi se pozivao Java Koristi se da bi se pozivao Java scriptscript--omomvaluevalue: : oznaka koja se nakon submit oznaka koja se nakon submit ššalje alje serveru u formi ime/vrednost za taj check serveru u formi ime/vrednost za taj check boxbox

PrimerPrimer

Kreiranje radio dugmadiKreiranje radio dugmadiRadio dugmad je modifikovani box u kome se Radio dugmad je modifikovani box u kome se daje mogudaje moguććnost izbora dvanost izbora dva ili viili višše parametrae parametraPoPoššto je to modifikacija svi atributi ostaju isti, to je to modifikacija svi atributi ostaju isti, samo se tip menja u samo se tip menja u radioradioZa razliku od Checkbox, jednom oznaZa razliku od Checkbox, jednom označčeno polje eno polje postaje aktivno sve dok se drugo polje ne postaje aktivno sve dok se drugo polje ne aktivira. Deaktiviranje nije moguaktivira. Deaktiviranje nije mogućće ponovnim e ponovnim klikom na isto mestoklikom na isto mestoAtributomAtributom checkedchecked nekaneka odod dvedve vrednostivrednostipostavljapostavlja se u se u startustartuII radio i box radio i box dugmaddugmad se se kontrolikontroliššu scriptu script--om na om na slisliččan naan naččin kao i tekstin kao i tekst

Radio buttons:Radio buttons:<<brbr>>

<input type="radio" name="<input type="radio" name="radiobuttonradiobutton““ value="myValue1">value="myValue1">malemale

<<brbr>><input type="radio" name="<input type="radio" name="radiobuttonradiobutton" value="myValue2" " value="myValue2" checked>checked>femalefemale

PrimerPrimer Radio buttonsRadio buttons

PadajuPadajućće listee listePadajuPadajućće liste su e liste su ččetvrti tip unosa u obrazacetvrti tip unosa u obrazacOznaka Oznaka <select></select><select></select>PodoznakaPodoznaka <option></option><option></option>

AtributiAtributi::

ssizeize ((brojbroj izabranihizabranih opcijaopcija), id, name,), id, name,

multiple multiple (i(izbor vizbor višše opcija)e opcija)

selectedselected (po(poččetna vrednost), etna vrednost),

valuevalue –– ime/vrednost koja se vraime/vrednost koja se vraćća serverua serveru

ListaLista::<<selectselect name=name=““perapera">">

<<optionoption value="red">red<value="red">red</option/option>><option value="green">green</option><option value="green">green</option><option value="BLUE">blue</option><option value="BLUE">blue</option>

<</select/select>>

ArgumentiArgumenti::•• sizesize: : broj vidljivih polja broj vidljivih polja (default (default jeje "1""1"))•• multiplemultiple: : ako jeako je "true""true", , bilo koji broj bilo koji broj

elemenata moelemenata možže biti selektovane biti selektovan (default (default jeje "false""false"))

Primer ListePrimer Liste

<select size=<select size=““11”” name=name=““predmetipredmeti””>><option value=<option value=““MM””> > MatematikaMatematika </option></option><option value=<option value=““EE””> > EngleskiEngleski </option></option><option value=<option value=““RR””> > RacunariRacunari </option></option><option value=<option value=““MRMR””> > MrezeMreze </option></option>

</select></select>

PrimerPrimer

<input type=<input type=““checkboxcheckbox”” name=name=““prviprvi”” value=value=““ONON””> > PrviPrvi teksttekst boksboksaa

<input type=<input type=““checkboxcheckbox”” name=name=““drugidrugi””value=value=““ONON””> > DrugiDrugi teksttekst boksaboksa

……<input type=<input type=““radioradio”” value=value=““YesYes”” name=name=““trecitreci”” > >

opcija1opcija1<input type=<input type=““radioradio”” value=value=““NoNo””checked name=checked name=““trecitreci”” > > opcija2opcija2

PrimerPrimer

<html><html><head><head><title>Get Identity</title><title>Get Identity</title>

<meta http<meta http--equiv="Contentequiv="Content--Type" content="text/Type" content="text/html;charsethtml;charset=iso=iso--88598859--1">1"></head></head>

<body><body><p><b>Who are you?</b></p><p><b>Who are you?</b></p><form method="post" action=<form method="post" action=““www.nesto.comwww.nesto.com">">

<p>Name: <p>Name: <input type="text" name="<input type="text" name="textfieldtextfield">">

</p></p><p>Gender: <p>Gender: <input type="radio" name="gender" value="m">Male<input type="radio" name="gender" value="m">Male<input type="radio" name="gender" value="f">Female</p><input type="radio" name="gender" value="f">Female</p>

</form></form></body></body></html></html>

PrimerPrimer

<html><head><title>Prijavni formular</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-

8"><body bgcolor="#FFFFFF" text="#000000"><div align="left"><b>Kreiranje novog naloga</b> </div><br><form name="kreiranjemaila" method="post" action=""><hr><div align="left"><b>Lični podaci</b> </div><br>Ime: <input type="text" name="ime"> <br> <br>Prezime: <input type="text" name="prezime"> <br> <br>Pol:Muški <input type="radio" name="pol" value="pol" checked>Ženski <input type="radio" name="pol" value="pol" > <br> <br>Adresa: <input type="text" name="adresa"> <br> <br>Poštanski broj: <input type="text" name="postBroj" size="5"

maxlength="5"> <br>Datum rođenja: <select name="mesec"><option>Januar</option><option selected>Mesec</option><option>Februar</option><option>Mart</option><option>Novembar</option><option>Decembar</option></select>

<select name="dan"><option>1</option><option selected>Dan</option><option>2</option><option>3</option><option>29</option><option>30</option><option>31</option></select><br> <br>Način plaćanja:Keš<input type="checkbox" name="kes" value="checkbox"

value="checkbox">Elektronski<input type="checkbox" name="elektronski" ><br><br><div align="center"><input type="submit" name="potvrdi" value="POTVRDI"><input type="reset" name="odustani" value="ODUSTANI"></div></form></body></html>

DodavanjeDodavanje skrivenihskrivenih informacijainformacijaSkriveneSkrivene informacijeinformacije se se postavljajupostavljaju nana sajtsajt nana istiistinanaččin kao i klasiin kao i klasiččne, ali ih korisnik ne vidi.ne, ali ih korisnik ne vidi.

Skrivene informacije sluSkrivene informacije služže web masteru, da e web masteru, da pored informacija koje pored informacija koje ššalje korisnik dobije i alje korisnik dobije i informacije od znainformacije od značčajaaja

NajNajččeeššćće su to oznake vezane za datum, vreme, e su to oznake vezane za datum, vreme, brojbroj logovanjalogovanja itditd..

KKôôdd<input type=<input type=““hiddenhidden”” name=name=“…”“…”>>

Name: Name: LoginAttempsLoginAttemps –– brojbroj logovanjalogovanjaLoginDataTimeLoginDataTime –– datum i datum i vremevreme logovanjalogovanja

HTML HTML obrasciobrasci –– definisanje okviradefinisanje okviraTag Tag <<fieldsetfieldset>> omoguomoguććava da se oko fomulara ava da se oko fomulara defidefišše okvir koji ima estetski karaktere okvir koji ima estetski karakterOvaj tag se otvara (i zatvara) neposredno nakon Ovaj tag se otvara (i zatvara) neposredno nakon otvaranja forme (otvaranja forme (<form><form>))Tag Tag <legend> <legend> sluslužži da se u i da se u <<fieldsetfieldset>> definidefinišše ime e ime koje se nalazi u gornjem levom uglu.koje se nalazi u gornjem levom uglu.

PrimerPrimer<html><html><body><body>

<form name="<form name="formularformular" method="post" action="" method="post" action="pera.phppera.php">">

<<fieldsetfieldset>><legend><legend>NazivNaziv formeforme</legend></legend>

User name: <input type="text" name="user" /><User name: <input type="text" name="user" /><brbr/>/>

Password: <input type="text" name="pass" /><Password: <input type="text" name="pass" /><brbr/>/>

<input type="submit" value="Log in" /><input type="submit" value="Log in" /></</fieldsetfieldset>></form></form>


Toliko Toliko o o obrascimaobrascima !!!!!!

2. osnove html-a i css-a -...

Documents