Marko Spasojevic - Web dizajn (staro izdanje) - ( 110 str; 2009 god. ).pdf

Web dizajn Materijal za laboratorijske vezbe

Marko Spasojevic inz.spec.

Sadrzaj HTML uvod, formatiranje teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Formatiranje teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 7 Slike, linkovi tabele ...................................................................... 12 Raspored elemenata strani i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 CSS ( Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . 20 CSS sintaksa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 20 CSS pseudo elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 27 Pozicioniranje elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 29 Staticko pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 29 Relativno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Apsolutno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 31 Fiksno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 32 Preklapanje elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... 40 CSS u eksternom fajlu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 lzrada saona (template-a) HTML strane pomocu CSS-a . . . . . . . . . . . . . . .... 45 Atributi kao selektori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 59 Sintaksa: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . 59 Primeri sajtova formatirani putem CSS-a . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . .. 60 HTML formulari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Element INPUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. ........................... 76 Tekstualna polja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 76 Polja za unos lozinke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 77 Radio dugmici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 77 Checkbox-ovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Dugme tipa submit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 78 Dugme tipa reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 78 HTML dugme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..................................... 78 Skriveno polje -h idden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Unos vise linija teksta - textarea . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . ..... 79 Oznaka -label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Padajuca lista - dropdown list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Grupisanje elemenata formulara -fieldset ..................................... 80 HTML multimedijalni sadZaj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 89 L 5 .................................................................................. 91 Spisak novih elementa u HTML-u 5 ............................................... 91 css 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Visoka skola strukovnih studija za Infonnacione i Komunikacione tehnologije Materijal za laboratorij ske vezbe iz predmeta Web dizajn

HTML uvod, f ormatiranje teksta

HTML (Hyper TextMarkup Language) predstavlja simbolicki jezik koji se sastoji od tagova i koristi se za izradu Web strana.

Karakteristike HTML-a:

';r Osnovi simbol jezika tag koji ima svoj naziv ';r Naziv taga se pise izmedu < ovde ide naziv taga > ';r HTML tagovi dolaze u parovima ';r Prvi tag se naziva pocetni ( ) krajnji zavrsni ( ) ';r Izmedu tagova ide njihov sadrzaj ';r Sadrzaj pored teksta moze da sadrzi i druge tagove ';r Skup tagova cini Web stranu

Struktura HTML dokumenta ( strane)

Primer 1. Osnovni delovi html dokumenta. Dati kod snimiti pod nazivom "primerl.html" (bez znakova navoda)

< t i t l e > T e k s t s e vidi u n a s l ovu B rows e r - a < / t i t l e >

< / head>

Zdravo ! ! ! Ova j t e k s t s e vidi z at o s t o i sp i san u body tagu . S av otekst ko j i s t e nap i s a l i i de u j ednom redu .

< / html>

NAPOMENA: U imenima datoteka i direktorijuma izbegavati prazna mesta izmedu reci. Umesto praznog mesta koristi srednje i donje crte ( - _) ili kominaciju velikih i malih slova (npr.

testKolokvijum.html)

[2]


t ) '.iI ,,_ t) u nluvu :" "." 1!1" f1!->x 111Ji1E! - -

rwl541dr

\.1/r arketpe

M1elGt'e1Jw /DLilrie ,!.R:;1 P r imer 2 < / t it l e >

< / head>

Zdravo , ovo p rvi red < ! - - Ovo komen t a r ko j i s e nevidi na s t r a n i nego s amo u kodu - - >

Zdravo , ovo drugi red < / html>

Napomena: Obratiti paznju na nacin zatvaranja taga
. Ovakav nacin zatvaranja taga se naziva samozatvarajuCi tag.

Primer 3. Pisanje komentara u HTML-u. Dati kod snimiti pod nazivom "primer.html" (bez znakova navoda)

< t i t l e > P r imer 3 < / t i t l e >

< / head>

Zdravo , ovo p rvi red < ! - - Ovo komen t a r ko j i s e nevidi na s t r a n i nego s amo u kodu - - >

Zdravo , ovo drugi red < / body> < / html>

Zdravo,ovo prvi red Zdravo,ovo drugi red

Slika 3 - Komentar u HTML-u

[3]


Primer 4. Paragrafi (pasusi) u HTML-u. Dati kod snimiti pod nazivom "primer4.html " (bez znakova navoda)

< t i t l e>Krei ranJe p a s u s a < / t i t l e > < / head>

Z dravo , s ada radimo sa p a s u s ima

Ovo t e k s t u p rvom p a s u s u t e k s t a < /p>

Ovo t e k s t u drugom p a s u s u teksta p a s u s u t e k s t a < /p> < / >

Ovo t re c i p a s u s . S ada t e vi det i d a s e i d r u g i t a govi mogu p i s a t i

unut a r t agova t a k o d a ova j t e k s t t reba d a u p a s u s u a l i u novom redu . < /p> < /body> < / html>

Zdravo,sada rd sa pasusuna

Ovo tekst u prvom pasusu teksta

Ovo tekst u drugom pasu teksta pasusu teksta

Ovo trec1 pass Sada te videh da se 1 drugi ta,gov:i mogu p1sal:! unt ta,gova tako d ttkst t: up;:1su ah unovomredu

""'11t-;- Dore

Slika 4 - Pasusi na HTML strani YSlc

! Vled _ Gel:m\; 9red LleI Heoclirte . O.nl001ize l..U.! WriOOm Mll'kelpce 0 D[je- .1. Cocktes- / CSS ,! Fam ! lm. lrictoi Mi&:ieol.l:S ; Outine )l' Tcdo

Najvece zaglavlje (oko 24 piksela) Tekst priizno velicine 18 piksela ekst pliimo vellcine 14 piksela

ekst prilimo velicine 12 p:iksela

TekstpriliznovtlkimlOpikseh.

N.,je hvl,je (oJu. lpimeh.) ......... """"" - . - Dcm .... le; YSoo ,1

Slika 5 - Zaglavlja na HTML strani

Primer 5. Pravljenje razlicitih velicina zaglavlja pomocu taga . Dati kod snimiti pod nazivom " primerS.html " (bez znakova navoda)

< t i t l e> P r avl j en j e r a z l i ci t i h ve l i cina z ag l avl j a ( n a s l ova ) < / t it l e > < / head>

Na j vece z ag l avl j e ( oko 2 4 p i k s e l a ) < / h l > T e k s t p r i i z n o ve l i c i n e 1 8 p i k s e l a < / h 2 > T e k s t p r i i z n o ve l i c i n e 1 4 p i k s e l a < / h > < h 4 > T e k s t p r i i z n o ve l i c i n e 1 2 p i k s e l a < / h 4 > T e k s t p r i i z n o ve l i c i n e 1 0 p i k s e l a < / h 5 > Na jman j e z ag l avl j e ( oko 8 p i k s e l a ) < / h >

Ovo t e k s t u p rvom p a s u s u t e k s t a < /p>

Ovo t e k s t u drugom p a s u s u t e k s t a p a s u s u t e k s t a < / p > < / >

Ovo t re c i p a s u s . S ada t e vi det i d a s e i d r u g i t a govi mogu p i s a t i

unut a r t agova t a k o d a ova j t e k s t t reba d a u p a s u s u a l i u novom redu . < /p> < /body> < / html>

[4]


Primer 6. Prikazivanje nacionalnih karaktera.Stranica mora iti sacuvana u Unicode fonnatu. Dati kod snimiti pod nazivom "primer.html " (bez znakova navoda)

< t i t l e > D e f i n i s an j e t ipa html-a i p r i k a z a n a c i o n a l n i h k a r a kt e r a < / t i t l e >

< / head>

T e k s t s a s rp s k im s l ovima . < ! - - Ovo koment a r - - > S ada s e vide i s l ova , S, D , i Z :

< /body> , , , , , , .

< / html>

Primer 7. Razmak izmedu reci u HTML-u. Dati kod snimiti pod nazivom "primer7.html" (bez znakova navoda)

< t i t l e> P r avl j en j e ra zmaka< / t i t l e >

< /head>

Kucan j em t e k s t a s a p o st i z e s e n i kakav efekat , Dodavan j e ra zmaka p o st i z e j edan " Space " , mo z e s e k o r i s t i t i & nbsp ; &nbsp ; &nbsp ; &nbsp ; &nbsp ; & nbsp ; & nb sp ; b r o j

ra zmakom, ne s em k r e i ran j e j ednog " Space " . pomocu & nbsp ; ko j im s e

p r o i z vo l j an put a .

S ada dovo l j n o kao i nove redove

napravi t i ra zmake u kucan j u ,

i oni kao p r i k a z an i . < /pre>

< /body> < / html>

Tekst sa srpsknn slo1Jlllla

t akvi b i t i i

KucanJtm teksta sa razmakom, ne posW: st rukakav eftkat, sem kmrariJt Jtdrg "S"

<

Sadasevide1slovaC,S,EJ,C1i DodavariJt rarmakaJe pomou ko_J!ffi se post:iie Jtd 'Space', moie se konsl1.11. prowo!Jari br


Formatiranje teksta

Primer 8.Nacin prikaza i formatiranja teksta. Dati kod snimiti pod nazivom "primer8.html" (bez znakova navoda)

< t i t l e>Osnovn i e l emen t i f o rmat i r an j a t e k s t a < / t it le>

< / head>

Z a t e k s t t ipa BOLD t reba k o r i s t i t i tag < /b> Vecina c i t a ca t a g S TRONG p r i ka z u j e k a o BOLD , a l i o snovna namena p o j a cavan j e de l a t e k s t a < / st rong> < i > Z a t e k s t t ipa I TAL I C t reba k o r i s t i t i t a g I < / i > Vecina c i t a ca t a g p r i ka z u j e k a o I TAL I C , a l i o snovna namena nagl a s avan j e de l a t e k s t a < / em> T a g C I TE t a kode t e k st p r i ka z u j e k a o I TAL I C , k o r i s t i s e z a c i t a t e < / c i t e > T a g ADDRE S S t akode t e k s t p r i ka z u j e k a o I TAL I C , k o r i s t i s e z a adrese < / addr e s s > < ! -P r i ka z u j e ho r i z ontalnu l i n i j u -- >

O r i g i n a l n i t e k s t : P R I KAZ ma l o g / ve l i k o g t e k s t a ZNACI proporcionalno SmAn j En j E /poveCan j E ORI G I NALNOG < sma l l > P R I KAZ ma l o g t e k s t a ZNACI proporcionalno SmAn j En j E ORI G I NALNOG < / sma l l >
DvosL.r:uko maji LeksL d se dvosL.r:ukom p.r:imeom Laga SMALL < / sma l l > < / sma l l > P R I KAZ ve l i kog t e k s t a ZNACI proporcionalno poveCan j E ORI G I NALNOG < /b i g>
P recrtani t e k s t dob i j a s e t agom DEL< / de l > < i n s > P o dvu ceni t e k s t dob i j a s e t agom I N S < / in s > Efekat podvu cenog t e k s t a c e s ce s e dob i j a upot rebom taga U < / u >
Dodavan j e inde k s a t agom SUB H 2 < / sub>O , i l i t agom SUP z a pot rebe eksponenta < sup> 2 < / sup> .

< /body> < /html>

[]


Primer 9. lzdvajanje teksta. Dati kod snimiti pod nazivom "primer9.html" (bez znakova navoda)

< t i t l e> I z dva j an j e t e k s t a < / t it l e >

< / head>

P rva re cen i c a t e s kt a

Tekst ko j i s l edi b i ce komp l etno uvu cen u odn o s u na l evu marginu s t r an i c e , i kao t akav predstavl j a ce p o s eban deo t e k st a . Ovo se post i z e t agom BLOCKQUOTE

< / l ockquote> Ako s e u t e k s t u po j avl j u j e s k r a cen i c a , z e l i s e p r i k a z punog n j enog imena , kada k o r i s n i k m i s em stane da t u r e c k o r i s t i s e t a g R s a a t r ibutom t i t l e= " ne k i t e k st " . S t a t i m i s em na s k r a cenicu n a s e s k o l e I C T < / abbr> d a b i s e vi deo efekat .

< /body> < /html>

Primer 10. Pozicioniranje teksta i rad sa html atriutima. Dati kod snimiti pod nazivom " primerlO.html" (bez znakova navoda)

< t i t l e >P o z i c i on i ran j e t e k s t a < / t it l e >

< / head>

Tekst i n i c i j alno p o s t avl j en u z l evu marginu . T e k s t c e l o g p a s u s a b i ce p o s t avl j en l evo . < /> T e k s t c e l o g pasusa b i ce p o s t avl j en na s redinu . < /> T e k s t c e l o g pasusa b i ce p o s t avl j en desno . < />

< /body> < / html>

E lle . 1 Hl;iiciry S.ookmait


Primer 11.HTML liste,liste definicija. Dati kod snimiti pod nazivom "primerll.html" (bez znakova navoda)

< t i t l e>De f i n i s an j e l i s t i < / t it l e >

< / head>

< / dl >

S p i s a k s k racen i c a ve z an i h z a W :

WWW< / dt > Wo r l d Wide WEB< / dd>

URL < / dt > Un i f o m Re source Locat o r < / dd>

html < / dt > hyperText Markup Language

php < / dt > p e r s on a l home page< / dd>

i t a k o dal j e

< /body> < / html>

f ie _E (]I: 'j_ o;w Hr1e


< / o l > < /p> Ne r e d j ene l i st e < / h 2 > Vrste cve ca :

< l i > L a l a < / l i > < l i>Ru z a < / l i > < l i >Karan f i l < / l i >

< / u l >

Vrste j e l a :

< l i > Supa< / l i > < l i > G l avno j e l o< / l i > < l i >De z e rt < / l i >

< / u l >

Aut omob i l i :

< l i >Mercede s < / l i > < l i >Audi < / l i > < l i >Reno< / l i >

< / u l >
< /> < /body> < /html>

Primer 13.Kominovanje razlicitih tipova listi. Dati kod snimiti pod nazivom "primerl.html" (bez znakova navoda)

< t i t l e>Komb inovane l i st e < / t it l e >

< / head>

L i s t a 1 . S t ambeni p r o s t o r < u l >

< l i > Stan < u l >

< / u l > < / l i > < l i >Ku ca

< u l >

< / l i > < / u l >

< / u l >

< l i >Jedn o s oban < / l i > < l i >Dvo s oban < / l i >

< l i >P r i z emna< / l i > < l i >Jednospratna< / l i > < l i >V i s e spratna < / l i >

[9]


L i s t a 2 . Voce

< l i >Agrumi :

< / l i >

< d i r > < l i > L imun< / l i > < l i >Manda r ine< / l i > < l i >Kivi< / l i > < / di r >

< l i > O s t a l o voce :

< l i >Jabuka< / l i > < l i >Kruska< / l i > < l i >Sl j iva< / l i >

< / di r > < / l i >

< / o l >
Lista 3 . p i ca

Be z a lkoholna : < o l >

< / o l > < / l i >

< l i>Al koho lna :

< l i > Ca j < / l i > < l i >Kafa< / l i > < l i > S o k < / l i >

< o l s t a rt = " 4 " > < l i >Votka< / l i > < l i >Vin j a k< / l i > < l i>P ivo< / l i >

< / o l > < / l i >

< / o l > < /body>

< / html>

o"1V"'Ood Ge!i"'llSio..tod LoleslHe.od.-,., Cl""""ebl \.'i.....,orke!ploce

0 Dble .1.


Slike, linkovi tabele

Primer 14. Slike u okviru HTML strane. Dati kod snimiti pod nazivom "primer14.html" (bez znakova navoda)

Un o s s l i k e u st ranicu < / t i t l e > < / head> Tag za unos s l i k e img . Unu t a r taga mora b i t i i source s l i k e , da b i se z n a l o oda k l e s e s l i k a u z ima . Na j bo l j e da t o bude neki f o l de r unut a r f o l dera ko j i predstavl j a s a j t . < / h > S l i ka 1 - j p e g s l i k a , ko j a u u s t om f o l deru gde i html st rana S l i ka 2 - g i f s l i k a , ko j a u podfolderu F o l de r 2 u odn o s u na html st ranu
S l i ka 3 - png s l i k a , ko j a u p r o i z vo l j nom F o l deru 3 u odn o s u na html st ranu < img s r c= " s l i k e / s l i k a . pn g " > S l i ka 4 - j p g , fa j l ko j i s e p r e u z ima s a neke web l o kac i j e
< / body> < / html>

Primer 15. Atriuti img taga. Dati kod snimiti pod nazivom "primerlS.html" (bez znakova navoda)

< t i t l e>At r ibut i s l i k e< / t it l e > < / head>

S l i k a 1 - O r i g i n a l n a s l ika s a a t r ibutom alt ko j i i s p i s u j e t e k s t ako nema s l ike
< img s r c= " s l i k e / s l i ka l . j p e g " a l t = " p r e de l i S rb i j e " >

S l i k a 2 - D e f i n i san j e at ributa z a ap s o lutnu v i s inu i du z inu s l i k e

S l i k a 3 - D e f i n i san j e a t r ibuta z a r e l at ivnu v i s inu i du z inu s l i k e

S l i k a 4 - D e f i n i san j e at ributa z a p o r avnan j e s l i k e a l i gn

S l i k a 5 - D e f i n i san j e at ributa z a p o r avnan j e s l i k e a l i gn i imena s l i ke

< /body> < / html>

[11]


Uno llke u ocolr-.icu

"::.-.... -jDl\.J" u.,,..u.r....u\l.i.


Linkovi

Primer 17. Definisanje tekstulanih i grafickih linkova. Dati kod snimiti pod nazivom " primer17.html" (bez znakova navoda)

< t i t l e > L i nkovi 1 Tekstualni i g r a f i c k i < / t i t l e> < / head>

Tekstualni l ink ka s t r a n i c i p r imer l . html < / a>

< h r e f = " http : / /www . ict . edu . r s " > Tekstualni l ink k a neko j web s t r an i c i < / a>

Tekstualni l ink k a nekom f a j lu n a uda l j en o j web s t r an i < / a>

S l i ka k a o l ink ka html st ranici < h r e f= " p r ime r l . html " >< img s r c= " s l i k e / s l i k a . p n g " a l i gn= "middl e " > < / > < href= "mu l t imedi j a /pdfTest . pdf " > L i n k ka P D F fa j lu . < / a>

< /body> < / html>

Primer 18. Nacin prikaza novih stranica pomocu linkova. Dati kod snimiti pod nazivom " primer18.html" (bez znakova navoda)

< t i t l e>Na cini p r i k a z a novih st ranica . < / t i t l e > < / head>

T e k s t u a l n i l ink ka s t r a n i c i prime r 1 7 . html ko j a s e otvara u novom p r o z oru< / a >
T e k s t u a l n i l ink ka s t r a n i c i prime r 1 7 . html ko j a s e otvara u p r o z oru ko j i ugn j e z den u drugi p r o z o r ( f rame set ) < / a >

< h r e f= " p r ime r 1 7 . html " t a rget="_s e l f " > T e k s t u a l n i link ka s t r a n i c i prime r 1 7 . html ko j a s e otvara u p o st o j e cem p r o z oru< / a> < h r e f= " p r ime r 1 7 . html " t a rget="_t op " > T e k s t u a l n i l ink ka s t r a n i c i p r ime r 1 7 . html ko j a se otva ra u n a j v i s em fre jmu na s t r a n i c i p r i cemu z ak l an j a p o st o j e cu stran icu< / a >

< /body> < /html>

[13]


Primer 19. Unutrasnji linkovi na strani (anchor). Dati kod snimiti pod nazivom "primer19.html" (bez znakova navoda)

ostavljanje internog referenciranja stranice

< / head>

WEB programi ran j e < / h 2 > < o l >

< l i > HTML< / a >< / l i > < l i > Java S c r ipt < / a>< / l i > < l i > PHP < / a>< / l i > < l i > ASP < / a>< / l i >

< / o l >

HTML < / a > < / h > hyp e r T ext Markup Language html predstavl j a j e z i k z a o z n a cavan j e hiperteksta i hipermedi j a html predstavl j a t e k stualnu dat oteku B i l o ko j i t e k s t editor p r i hvat l j iv z a i z radu html dokumenata

Java S c r ipt < / > < / h > St ranice ko j e s e men j a j u u vremenu St ranice ko j e s e men j a j u s hodno web c i t a cu i l i pot rebama

k o r i s n i ka S t r a n i c e ko j e su interakt ivne s a s e rverom i k o r i s n ikom p r o t o k o l ko j i s a l j e b e z p rove re

< /> < / h > : p e r s on a l home page Direktno s e up i su j e u html kd prevodi s e na s e rveru p o s ebnim programom
prevodi s e redo s l e dom ko j im p i s an

ASP < / > < / h > A S P - Act ive S e rver page s p r i n c ip i j e l n o p o s t o j i ve l i k a s l i cnost s a php-om p repo z n avan j e ASP st ran i c e e k s t en z i j i * . asp I zvrsno o k ru z en j e z a web s e rver u asp . dl l f a j lu

< /body> < / html>

[14]


Primer 20. Definisanje tabele. Dati kod snimiti pod nazivom "primer20.html " (bez znakova navoda)

< ! -Red p rvi - - >

< / t r >

P rvo p o l j e u p rvom redu < / t d> D rugo p o l j e u p rvom redu < / t d>

< ! -Red drugi - ->

p rvo p o l j e u drugom redu < / t d> D rugo p o l j e u drugom redu < / t d>

< / t r > < /t>

< /body> < /html>

"' J;dt Y 'tf

< / t r > < t r >


P rvo p o l j e u drugom redu < / t d> D rugo p o l j e u drugom redu < / t d>

< / t r >

< t r a l i gn= " r ight " >


< / t r> < t r a l i gn = " cent e r " >

P rvo p o l j e u drugom redu < / t d> D rugo p o l j e u drugom redu < / t d>

< / t r> < / t >

< / cent e r > < /body>

< /html>

[15]


Primer 22. reiranja rastojanja medu celijama tabele i spajanje redova. Dati kod snimiti pod nazivom "primer22.html " (bez znakova navoda)

< t r >

< / t r> < t r >

< / t r> < t r >

A< / t d> l < / td>

2 < / t d>

< / t d>

1

< / t r> < / t >

< /body> < / html>

[

Primer 23. Definisanje rastojanja sadrzaja celije od margina i spajanje kolona. Dati kod snimiti pod nazivom "primer23.html " (bez znakova navoda)

< t r >

Spo j ene 2 k o l one < / t d> < / t r >

< t r > b < / td>

2 < / t d> < / t r> < t r >

c < / t d> < / t d>

< / t r> < / t >

< /body> < / html>

Primer 24. Primer kominovane tabele. Dati kod snimiti pod nazivom "primer24.html " (bez znakova navoda)

< / t > < /body>

< / html>

P e r a < / t d> Mika< / t d>

< / t r >

La z a < / t d> Joca< / t d>

< / t r >

[16]

1 Pera


Primer 25. Definisanje naslova tabele. Dati kod snimiti pod nazivom "primer25.html" (bez znakova navoda)

Ime t abe l e < / capt ion> 1 < / t d> 2 < / t d>< / t r > 3 < / t d> 4 < / t d>< / t r >

< / div> < /body>

< / t >

Raspored elemenata na strani i

Za raspored elemenata na strani koriste se dva HTML taga i .

- sluzi za definisanje dela ili sekcije (division) HTML dokumenta i najcesce se koristi za grupisanje k elemenata u jednu celinu radi lakse obrade prilikom oikovanja sajta.

- sluzi za definisanje dela ili sekcije HTML dokumenta ali ne kao k vec da grupise elemente inline.

Najcesce korisceni atriuti:

id - jedinstveni indentifikator elementa na HTML strani

class - indentifikator za grupisanje elemenata u odredenu kategoriju

Primer 26. Definisanje osnovne strukture HTML dokumenta. Dati kod snimiti pod nazivom " primer2 6.html " (bez znakova navoda)

< t i t l e>Pode l a HTML dokumenta c e l i n e < / t i t l e> < / head>

< span>Ovo z aglavl j e< / span>

< / div>

Ovde p o s t avl j amo n e k i s a dr z a j < /p> < / div>

Vi s o k a I C T , Web di z a j n l ab . ve z b e < / cent e r > < / div>

< /body>

[17]


Primer 27. Definisanje strukture HTML dokumenta. Dati kod snimiti pod nazivom "primer27.html " (bez znakova navoda)

< t i t le>Podela HTML dokument a na c e l in e < / t i t le> < / head>

Na s l ov HTML st rane< / h 2 >

< / div>

< span c l a s s="meni l in k " > < a h r e f= " # " t it l e=" l i n k l " > L i n k 1 < / a> < / span> < span c l a s s="meni l in k " > < a h r e f= " # " t it l e=" l ink2 " >L i n k 2 < / a> < / span> < span c l a s s="meni l in k " > < a h r e f= " # " t it l e=" l i n k " >L i n k 3 < / a> < / span> < span c l a s s="meni l in k " > < a h r e f= " # " t it l e=" l in k 4 " > L i n k 4 < / a> < / span> < span c l a s s="meni l in k " > < a h r e f= " # " t it l e=" l i n k 5 " >L i n k 5 < / a> < / span>

< / div>

Ovo t e k s t p rvog clanka . < / div>

Ovo t e k s t drugog clanka . < / div>

Ovo t e k s t t receg clanka . < / div>

< / div> < / div>

< a l i gn="cent e r " >Vi s o k a I C T , Web di z a j n lab . ve b e < / p > < / div>

< /body> < / html>

[18]


CSS ( Cascading Style Sheets)

Sluzi za definisanje nacina kojim se prikazuju HTML elementi. Moze se pisati u okviru samog HTML dokumenta ili u posebnom spoljnom (ekstemom) fajlu.

CSS sintaksa

CSS sintaksu cine pravila kojima se formatiraju HTML elementi na strani. Svako pravilo ima dva glavna dela selektor (kojim se odaira tj. selektuje) element iz HTML dokumenta i jedne ili vise deklaracija.

Selektor

Deklaracija Deklaracija

Slika 15 - CSS pravilo Selektor predstavlja HTML element koji zelite da formatirate. Pored samog HTML elementa kao selektori se mogu upotrejavati i vrednosti atriuta id i class i mnogih drugih.

Deklaracija se sastoji svojstva (property) i vrednosti tog svojstva,pri cemu svojstvo predstavlja neki atriut HTML elementa koji se moze menjati.

imeSvojstva : vrednost;

Vrednost svojstva koje se najcesce odnosi na boju se zadaje u heksadecimalnom fonnat sa pocetnim znakom #.

#FFOOOO #OOFFOO #OOOOFF

/ * Ovo komen t a r u C S S-u */

/ * Sva k i p a r a graph s e f o rma t i r a ovako */ { co l o r : #F F O O O O ; text - a l i gn : cente r ; }

/ * S e lektu j e l ement ko j i ima vredn o s t a t r ibuta i d t e s t */ # t e s t { c o l o r : # O O f f O O ; }

/ * S e lktu j e l ement ( e ) ko j i ima j u vredn o s t a t r ibuta c l a s s p roba */ . p roba { text - a l i gn : r i ght ; }

[19]


Primer 28. reiranje CSS-a u liniji taga: Velicina, boja,pozadina teksta i fontovi. Dati kod snimiti pod nazivom "primer28.html " (bez znakova navoda)

< />

< / head> Krei ran j e C S S s t i l ova u l i n i j i .

Kr e i ran j e C S S s t i l ova u l i n i j i . < /p>

Kreiran j e CSS s t i l ova u l i n i j i .

Krei ran j e C S S s t i l ova u l i n i j i . < />

B o l d t e k s t ! < /> T e k s t ko j i in k a ! < /> Cent r i rani t e k s t ! < /> I t a l i k t e k s t ! < /> L i n i j a ! < /> T e k s t man j eg font a ! < / > < s t y l e = " font - s i z e : b i gge r ; " > T e k s t v e c e g font a ! < /> Ovo vrlo ma l i font . < /p> Ovo ma l i font.< /p> Font ap s o lutne mere l pt . < / p > < s t y l e = " font- s i z e : 3 0 0 % ; " >Font r e l at ivne m e r e od 3 0 0 % . < /> P recrtani t e k s t ! < /> P o dvuceni t e k st ! < /> Font ovi < / h 3 > < s t y l e = " font- fami ly : C a r leton ; " > P r i k a z v s t a f ont ova . Font C a r leton ! ! ! < /> P r i k a z v r s t a font ova . Font Century Goth i c ! ! ! < /> P r i k a z v r s t a font ova . Font Century Schoolbook ! ! ! < />

P r i k a z v r s t a font ova . Font Comic Sans MS ! ! ! < /> < /body>

< / html>

KrJranJ CSS st:Jlov01. u liji_

reiranj CSS stilova u linij i.

reiranje CSS stilova liniji.

reiranje CSS stilova u liniji. Bold tekst

Tekst koJi bhnk.al

Italik tkstl

Lirujal

Dme

Centnraru tekstl

Slika 16 - Primena CSS svojstava

[20]

1.:.1 lll/i,YSI d


Primer 29. Definisanje internog CSS-a. Dati kod snimiti pod nazivom "primer29.html" (bez znakova navoda)

< t i t l e>lnterno p o z ivani s t i l ovi < / t it l e > < s t y l e type="t ext / c s s " > < ! --

body { background-co l o r : # C 9 F 1 C 5 h l { c o l o r : # 5 4 2 4 ; font : b o l d 1 2 Verdana h2 { font - s t yl e : i t a l i c ;

font-we i ght : b o l d ; c o l o r : u ; }

h c o l o r : # ; t ext- shadow : 0 . 2 em 0 . 2 em s i lve r } h4 text - a l i gn : cent e r ; lie /! rriccu""'nl: 00o-,,/"m2'3 .ml lnterno poziv.i 2tilovi

t ext-decorat ion : unde r l i n e ; t ext-t ran s f o rm : capita l i z e ; }

font : 1 2 He lvet i c a } - - > < / style>

< / head>

I nt e rno de f i n i s a n i s t i l h l < / h l >
I n t e rno def i n i s an i stil h2 < / h2 >
I n t e rno de f i n i s a n i stil h 3 < / h3>
I n t e rno def i n i s an i stil h 4 < / h 4 >

I nt e rno de f i n i s a n i s t i l < / >

< /body> < /ntml >

Internodefisastilhl

Intemo definisani stil h2

Intemo dernisani stil h3

Interno Defrnis:ani Stil 4

ln1ernode1inisan1sl1lp

Cll

Primer 30. Definisanje pozadinske slike. Dati kod snimiti pod nazivom "primerO.html " (bez znakova navoda)

lile:/ / /C:/D ocumen_ov1/pr1merO.htlll

----.

< ! --

c o l o r : # 4 9 7 FBF ; l ine-height : S em ; font - s i z e : 1 4 ; font- fami ly : Ar i a l , san s - s e r i f ; padding- l e ft : ; padding- r i ght : 1 0 0 ; text - a l i gn : j u s t i fy ;

body { background- image : u r l ( s l i k e / p o z adina . png ) ; } --> < / style>

< / head>

Upot reba s t i l ova za defin i s an j e s l i k e kao p o z adin e < / b >

Upot reba s t i l ova z a defin i s an j e p a s u s a < /p>

< / html>

[21]

/


Primer 31. Definisanje pozadinske slike bez ponavljanja i sa pozadinskom bojom. Dati kod snimiti od nazivom "primerJ.html" (bez znakova navoda)

< s t y l e type="t ext / c s s " > body {

background- image : u r l ( s l i k e / p o z adina . pn g ) ; background-repeat : no- repeat ; background-p o s i t ion : t op l e ft ; widt h : l O O Op x ; h e i ght : l O O Op x ; background-co l o r : # 0 2 0 5 3 ;

} < / s t y l e > < / head>

[ "-;" [)

Upot reba s t i lova z a de f i n i san j e s l i k e kao p o z adine

Upot reba s t i lova z a def i n i san j e p a s u s a < / p >

< /body> < / html>

Primer 32. Linije i elementi lista. Dati kod snimiti pod nazivom "primer32.html " (bez znakova navoda)

< t i t l e > C S S s t i l ov i < / t i t l e > < s t y l e type= " t ext / c s s " > < ! - -h r { a l i gn : cent e r ; widt h : 7 0 % ; s i z e : B ; c o l o r : green } u l { l i st - s t yl e : s quare i n s i de u r l ( s l i ke / l i st a_s t r e l i c a . pn g ) } / * ume s t o ove s l i k e stavite l i st a_k rug . png l i st a_ok . png * / --> < / style>

< h r / > < u l >

< l i > L a l a< / l i > < l i>Ru z a < / l i > < l i >Karan f i l < / l i >

< / u l >

[22]

.,. Lala .,. Ruia .,. Karanfil


Primer 33. Linkovi i grafika. Dati kod snimiti pod nazivom "primer33.html" (bez znakova navoda)

< s t y l e type= " t ext / c s s " >< ! - -

- - > < / style> < s t y l e type= " t ext / c s s " >

< / style> < / head>

a : l ink { co l o r : navy ; font-wei ght : b o l d ; } a : vi s it e d { co l o r : u ; font-we i ght : b o l d ; } a : act ive { co l o r : r e d ; font-we i ght : b o l d ; } a : hove r { c o l o r : y e l l ow ; font-we i ght : b o l d ;

t ext-decorat ion : unde r l i n e ; background- c o l o r : purp l e ; }

img { bo rder-widt h : 7px; border-styl e : s o l i d ; border-co l o r : purpl e ; }

body s c r o l lbar-b a s e - c o l o r : green ; s c r o l lb a r - a r row-c o l o r : u ; s c r o l lbar-da r k s hadow-c o l o r : # 6 9 0 8 ; s c r o l lb a r - face-co l o r : #FFFBC 6 ; s c r o l lbar-high l i ght - c o l o r : r e d ; s c r o l lb a r - shadow-c o l o r : purp l e ; s c r o l lbar-t rack-co l o r : green ; }

Tekstualni l ink ka s t r a n i c i 3 0 . html < / a>

T e k s t u a l n i l ink ka e k s t e rn o j web s t r an i c i < / a> S l i k a < img s r c= " s l i k e / s l i k a l . j p g " >

Primer 34. Klase na primeru teksta. Dati kod snimiti pod nazivom "primer34.html" (bez znakova navoda)

< t i t l e > P r imer 3 4 < / t i t l e >

< s t y l e type= " t ext / c s s " > < ! --. ime { font - s i z e : 3 0pt ; c o l o r : u } -->

< / style> < /head>

I s k a z na ko j i p r imen j en s t i l iz head-a . < /p> I s k a z na ko j i

p r imen j en s t i l i z taga . < />

< h 4 > T r i i s k a z a < / h 4 >

s a i s t im s t i l om< /p>

ko j i p o s ledica del ovan j a taga div ! < /p>

< / div> < / body>

< /html>

[23]


Primer 35. Klase i razni HTML elementi. Dati kod snimiti pod nazivom "primer35.html" (bez znakova navoda)

< s t y l e type= " t ext / c s s " > p . spec i a l { co l o r : r e d ; background : # F 8 F 4 0 0 ; }

h r . z e l ena { a l i gn : cent e r ; widt h : 6 0 % ; s i z e : 2 ; c o l o r : green } h r . c rvena { a l i gn : cent e r ; widt h : 6 0 % ; s i z e : 2 ; c o l o r : red }

# okvi r { b o r de r : lpx s o l i d # ; } h l { co l o r : yel l ow ; font - s t y l e : it a l i c ; border : s o l i d ; text - a l i gn :

cent e r ; } h l . new { co l o r : green ; b o r de r : s o l i d ; font - s t yl e : bo l d ; b o r de r : s o l i d ;

t ext-a l i gn : cent e r ; } < / style>

< / head>

I s k a z na ko j i p r imen j en s t i l ! < />

Ovo p r i k a z s t i l a h l . < / h l >
< h l c l a s s= " new " > Ovo p r i k a z s t i l a hl p r e k o k l a s e new . < / h l >

< / div> < /body>

< /html>

Primer 36. Promena oika kursora. Dati kod snimiti pod nazivom "primer3 6.html " (bez znakova navoda)

< s t y l e type= " t ext / c s s " > . l l ink { cu r s o r : c r o s s h a i r ; } . 2 l ink { c u r s o r : he lp ; } . l ink { cu r s o r : pointe r ; } . 4 l ink { cu r s o r : move ; } . 5 l ink { cu r s o r : wa it ; } . font l { font- fami ly : Verdan a ; font - s i z e : 1 8 ; c o l o r : r e d ;

text - a l i gn : cent e r } < / style>

< / head>

< /body> < / html>

c r o s s l in k < / a>

help l in k < / a >

p o i nt e r < / a>

move l in k < / a >

wait l in k < / a>< / b > < span c l a s s = " font l " > T e k s t i sp i san s t i l om k l a s e font l < / span>

[24]


Primer 37. Margine i unutrsnji razmak (padding). Dati kod snimiti pod nazivom "primer37.htm l" (bez znakova navoda)

< s t y l e type= " t ext / c s s " > * { margin : Op x ; padding : Op x ; # sp o l j a { widt h : l O O Opx : ; h e i ght : 5 0 0p x ; background-co l o r : #CCC ;

ma rgin : l Opx 2 0 ; b o r de r : lpx dott e d # ; padding : 5px ; } . t e k s t { padding : 5p x ; background- c o l o r : #FF O O O O ; margin : 5px ;


< / div>

Ovo n e k i t e k s t < / div>

Ovo n e k i t e k s t

< / div>

< /body> < / html>

Primer 38. Graficki objekat kao link. Dati kod snimiti pod nazivom "primer38.html" (bez znakova navoda)

< t i t l e> G r a f i c k i ob j ekat kao l in k < / t i t l e > < s t y l e type= " t ext / c s s " >

#button : wi dt h : 1 2 em ; b o r de r - r i ght : lpx s o l i d # ; padding : l em ; margin-bottom : l em ; font- fami ly : Ar i a l ; background- c o l o r : #EF 9 C O O ; c o l o r : # 0 0 0 5 ; }

#button u l { l i st - s t yl e : non e ; margin : O ; padding : O ; b o r de r : none ; } #button _ i { bo rder-bottom : lpx s o l i d # 9 0bade ; margin : ; } #button i { di sp l ay : l o c k ; padding : 5 5 5 0 . 5 em ;

b o r de r - l e ft : 1 0 s o l i d # 1 9 5 8 7 ; b o r de r - r i ght : 1 0 s o l i d # 5 0 8 fc 4 ; background- c o l o r : # 2 1 7 5 ; c o l o r : # f f f ; t ext-deco rat i on : none ; width : 1 0 0 % ; }

#button i { wi dt h : aut o ; } #button i a : hove r {

borde r - l e ft : 1 0 s o l i d # l c 6 4 dl ; borde r - r i ght : 1 0 s o l i d # 5 3 0 ; background-co l o r : # 2 5 8 6d7 ; c o l o r : # f f f ; }

< / s t y l e > < / head>

< u l >

< l i>P rvi e l ement < / a>< / l i > < l i>Drugi e l ement < / a >< / l i > < l l > < a hreI= " p r l me r . hL ml " >T r e c l e l emen L < / a > < / l l > < l i>Cetvrt i e l ement < / a>< / l i > < l i>P e t i e l ement < / a > < / l i >

< / u l > < / div>

< /body> < / n t-ml >

[25]


- Done Y Slooi

Slika 17 - Primer 37 Slika 18 - Primer 38

CSS pseudo elementi

Pseudo elementi se koriste da i se dodali neki "specijalni" efekti na selektore.

Sintaksa

se lekt o r : p s eudo - e l ement { svo l stvo : vredn o s t ; }

Primer 39.Pseudo eiementfir st -line CSS-a. Dati kod snimiti pod nazivom "primer39.html" (bez znakova navoda)

P s eudo e l ement i < / t it l e > < s t y l e type= " t ext / c s s " > p : f i r s t - l ine { c o l o r : # f f O O O O ; font -va r i ant : sma l l -cap s ; } < / style> < / head>

P s eudo e l ement : f i r s t - l ine se k o r i s t i da bi se dodao efekat na p rvu l i n i j u t e k s t a . < /p>

< / html>

[26]


Primer 40.Pseudo eiementfist -letter . Dati kod snimiti pod nazivom "primer40.html" (bez znakova navoda)

P s eudo e l ement i < / t it l e > < s t y l e type= " t ext / c s s " > p : f i r s t - l et t e r { c o l o r : # f f O O O O ; font - s i z e : xx- l a rge ; } < / style> < / head>

P s eudo e l ement : fi r s t - l e t t e r se k o r i s t i da bi se dodao efekt na p rvo s l ovo t e k s t a . < /p>

< l ht.ml >

Primer 41. Pseudo element before . Dati kod snimiti pod nazivom "primer41.html" (bez znakova navoda)

< ! DOCTYPE html PUBL I C " - / /W C / /DTD XHTML 1 . 0 T r a n s i t i ona l / / E N " " http : / /www . w . o r g / TR/ xhtml l / DTD / xhtml l -t ra n s i t i ona l . dt d " > P s eudo e l ement i < / t it l e > < s t y l e type= " t ext / c s s " >

h l : b e f o r e { content : u r l ( s l i ke / sm i l ey . gi f ) ; } < / style> < / head> Ovo n a s l ov< / h l >

P s eudo e l ement : be f o r e ubacu j e s a dr z a j p r e t ekuceg e l ementa < /> Ovo n a s l ov< / h l >

Napomena : < /b> I n t e rnet Exp l o r e r 8 ( i novi j i ) podr z ava ovo s amo a k o de f i n i san ! DOCTYPE . < /p> < / body> < / html>

Primer 42. Pseudo element after . Dati kod snimiti pod nazivom "primer42.html" (bez znakova navoda)

< ! DOCTYPE html PUBL I C " - / /W C / /DTD XHTML 1 . 0 T r a n s i t i ona l / / E N " " http : / /www . w . o r g / TR/ xhtml l / DTD / xhtml l -t ra n s i t i ona l . dt d " > P s eudo e l ement i < / t it l e > < s t y l e type= " t ext / c s s " > hl : a f t e r { content : u r l ( s l i k e / sm i l ey . gi f ) ; } < / style> < / head>

Ovo n a s l ov< / h l >

P s eudo e l ement : a f t e r ubacu j e s a dr z a j p o s l e teku ceg e l ementa < /> Ovo n a s l ov< / h l >

Napomena : < /b> I n t e rnet Exp l o r e r 8 ( i novi j i ) podr z ava ovo s amo ako de f i n i san ! DOCTYPE . < /p> < / body> < / html>

[27]


Pozicioniranje elemenata

Pozicioniranje moze iti:

> Staticko - position :static > Relativno - position :relative > Apsolutno - position :apsol ute > Fiksno - position :fixed

Staticko pozicioniranje

Ovo vrsta pozicioniranja podrazumevana za sve elemente HTML dokumenta.Elemementi se pozicioniraju redosledu elemenata.

Primer 43. Staticko pozicioniranje elemenata. Dati kod snimiti pod nazivom "primer43.html" (bez znakova navoda)

l a< /p>

P o z i c ioni ran j e e l emenata putem C S S S t at i cko< / t i t l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { border : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; co l o r : # f f f ; } #di v- 1 -padding { padding : 1 ; } # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ; } # div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ; }

< / s t y l e > < / head>

i d = div-p r e < / p > < / div>

id = div- 1 < /p>

i d = div- l a< /p>

Ovo n e k i t e k s t u okviru div-a s a i d-em div-

< / div>

i d = div- l b < / p >

Ovo t e k s t , ko j i s e na l a z i u p a s u s u diva ko j i ima

id div- l b < / p > < / div>

i d

< / div> < / div>

< / div> div- l c < /p>

i d < / div>

div-p o s l e < /p> < / div>

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

[28]


Slika 19 - Staticko pozicioniranje

Relativno pozicioniranje

HTML elementi se pozicioniraju relativno u odnosu na podrazumevanu poziciju.Sadrzaj koji obohvucen ovim pozicioniranjem moze da se pomera i da prelazi preko drugih elemenata ali prostor koji rezervisan za njega i dalje sacuvan tj. rezervisan.

Primer 44. Relativno pozicioniranje. Dati kod snimiti pod nazivom "primer44.html" (bez znakova navoda)

< t i t l e >P o z i c i on i ran j e e l emenata putem C S S Re l a t ivn o < / t i t l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; c o l o r : # f f f ;

p o s it i on : r e l a t ive ; t op : 2 0p x ; l e ft : - 4 0p x ; } #di v- 1 -padding { padding : 1 ; } # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ; } # div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ; }


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>

[29]


Ovo neki t e k s t u okviru div-a s a i d-em div- l a
< / div>
i d = div- l b < / p >

Ovo t e k s t , ko j i s e n a l a z i u p a s u s u diva ko j i ima

id div- l b < /p> < / div>

i d

< / div> < / div>

< / div>

i d = div-p o s l e < /p>

< / div> < / div>

div- l c< /p>

< / div> < /body>

< / html>

id = div-pre

Slika 20 - Relativno pozicioniranje

Apsolutno pozicioniranje

Element koji se pozicionira apsolutno pozicioniran relativno u odnosu na prvi roditelj ski element cije pozicioniranje razlilito od static ,a ako takav element ne postoji onda se pozicioniranje vrsi u odnosu na tag .

Primer 45 . Apsolutno pozicioniranje. Dati kod snimiti pod nazivom "primer45.html " (bez znakova navoda)

P o z i c i on i ran j e e l emenata putem C S S Ap s o lutno < / t i t l e >

< s t y l e type= " t ext / c s s " > # s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; co l o r : # f f f ; } #di v- 1 -padding { padding : 1 ; } # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ; p o s i t ion : ab s o lut e ;

t op : O ; r i ght : O ; widt h : 2 0 0p x ; } # div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ; }

< / style>

[]


l a < / p >

< d i v i d= " s a dr z a j " >

i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>

Ovo n e k i t e k s t u okvi ru div-a s a i d-em div-

< / div>

i d = div- l b < / p >

Ovo t e k s t , ko j i s e nal a z i u p a s u s u diva ko j i ima

id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< /body>

Pozicioniranje elemenala pulem C S S _

div- l c < /p>

Slika 2 1 - Apsolutno pozicioniranje

Fiksno pozicioniranje

Element sa ovom vrstom pozicioniranja se pozicionira realtivno u odnosu na prozor browser-a.Koristi se za elemente koji moraju da budu staticni prilikom skrolovanja strane.

Napomena: Internet Explorer podrzava fiksno pozicioniranje samo ako postoji !DOCTYPE

[31]


Primer 46. Fiksno pozicioniranje. Dati kod snimiti pod nazivom "primer4 6.html " (bez znakova navoda)

l a< /p>

< t i t l e >P o z i c i on i ran j e e l emenata putem C S S F i k sno< / t i t l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; height : 1 5 0 0 ; }

# div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; co l o r : # f f f ; } #di v- 1 -padding { padding : 1 ; } # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

position : fixed ; top : O ; right : O ; width : 2 0 0px ; }

# div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ;

< / style> < /head>

i d = div-p r e < / p >

< / div>

i d = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

< / html>

div- l c< /p>

Savet: Skrolujte stranu gore dole kako i videli efekat fiksnog pozicioniranja.

[32]


Primer 47. Kominacija relativnog i apsolutnog pozicioniranja. Dati kod snimiti pod nazivom " primer47.html" (bez znakova navoda)

l a< /p>

P o z i c i on i ran j e e l emena t a put em C S S < / t i t le> < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; c o l o r : # f f f ;

pos ition : relative ; }

# div- 1 -padding { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

top : O ; right : O ; width : 2 0 0px ; }

# div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ;


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

[33]

div- l c < /p>


Primer 48. Dve kolone sa apsolutnim pozicioniranjem. Dati kod snimiti pod nazivom " primer48.html" (bez znakova navoda)

l a< /p>

< t i t l e >P o z i c i oni ran j e e l emenata putem C S S < / t i t l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { border : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-col o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; c o l o r : # f f f ;

position : relative ; }

# div- 1 -padding { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

top : O ; right : O ; width : 2 0 0px ; }

# div- l b { background-co l o r : # d ; c o l o r : # f f f ; top : O ; right : O ; width : 2 0 0px ; }

# div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { margin : O . 2 5 em ; padding : . 2 5 em ;


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

< /html>

[34]

div- l c < /p>


Primer 49. Prikaz dve kolone pomocu apsolutnog pozicioniranja i fiksne velicine. Dati kod snimiti pod nazivom "primer49.html " (bez znakova navoda)

la

< t i t l e >P o z i c i on i ran j e e l emenata putem C S S < / t it l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-co l o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; c o l o r : # f f f ;

pos ition : relat ive ; height : 2 50px ; }

#di v- 1 -padding { paddin g : 1 ; } # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

pos ition : absolute ; top : O ; right : O ; width : 2 0 0px ; }

# div- l b { background-co l o r : # d ; c o l o r : # f f f ; posit ion : absolute ; top : O ; right : O ; width : 2 0 0px ;

# div- l c { background-co l o r : # d ; c o l or : # f f f ; } # p r imer div { ma rgin : O . 2 5 em ; padding : . 2 5 em ;


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< /body>

[35]

div- l c < /p>


Primer 50. Prikaz dve kolone pomocu float - koristi se kada su kolone promeljive visine. Dati kod snimiti pod nazivom "primerSO.html" (bez znakova navoda)

l a< /p>

< t i t l e >P o z i c i on i ran j e e l emenata putem C S S < / t i t l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-co l o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; co l o r : # f f f ; } # div- 1 -paddi n g { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

float : left ; width : 2 0 0px ; } # div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { ma rgin : O . 2 5 em ; paddin g : . 2 5 em ;

< / st y l e > < / head>

i d = div-p r e < / p >

< / div>

i d = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

< / html>

[]

div- l c< /p>


Primer 51. Prikaz dve kolone pomoc float - drugi nacin. Dati kod snimiti pod nazivom " primer51.html" (bez znakova navoda)

l a< /p>


# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , # div-p o s l e { background-co l o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o : # O O O ; co l o r : # f f f ; } # div- 1 -paddin g { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o : # f f f ;

float : left ; width : 1 5 0px ; } # div- l b { background-co l o r : # d ; c o l o : # f f f ;

float : left ; width : 1 5 0px ; }

# div- l c { background-co l o r : # d ; c o l o : # f f f ; } # p r imer div { ma rgin : O . 2 5 em ; paddin g : . 2 5 em ;


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < / body>

< / html>

[37]

div- l c < /p>


Primer 52. Prikaz dve kolone pomoc float i clear. Dati kod snimiti pod nazivom "primer52.html " (bez znakova navoda)

l a< /p>

< t i t l e > o z i c i on i ran j e e l emena t a put em C S S < / t it l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-co l o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; co l o r : # f f f ; } # div- 1 -paddin g { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

float : left ; width : 1 9 0px ; } # div- l b { background-co l o r : # d ; c o l o r : # f f f ;

float : left ; width : 1 9 0px ; }

# div- l c { background-co l o r : # d ; c o l o r : # f f f ; clear : both ; } # p r imer div { ma rgin : O . 2 5 em ; paddin g : . 2 5em ; }


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >

Ovo t e k s t , ko j i s e n a l a z i u p a s u s u diva ko j i ima

id div- lb < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

< / html>

[38]

div- l c< /p>


Preklapanje elemenata

Kada se elementi pozicioniraju van nonnalnog toka oni sami mogu da preklapaju druge elemente.Za podesavanje preklapanja elementa koristi se svojstvo z -inde x koje moze imate pozitivnu ili negativnu vrednost.

Primer 53. Preklapanje elemenata pomocu svojstva z -inde x. Dati kod snimiti pod nazivom " rimer53.html " (bez znakova navoda)

la

< t i t l e >P o z i c i on i ran j e e l emenata putem C S S < / t it l e > < s t y l e type= " t ext / c s s " >

# s a dr z a j { b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : Op x ; } # div-p r e , #div-p o s l e { background-co l o r : # 8 8 d ; c o l o r : # O O O ; } # div- 1 { width : 4 0 0p x ; background- c o l o r : # O O O ; c o l o r : # f f f ;

pos ition : relat ive ; } # div- 1 -paddin g { padding : l Op x ; # div- l a { background-co l o r : # d3 3 ; c o l o r : # f f f ;

pos ition : absolute ; top : 2 5px ; right : Opx ; z-index : 2 ; }

# div- l b { background-co l o r : # d ; c o l o r : # f f f ; } # div- l c { background-co l o r : # d ; c o l o r : # f f f ; } # p r imer div { ma rgin : O . 2 5 em ; padding : . 2 5 em ;


i d = div-p r e < / p >

< / div>

id = div- 1 < /p>

i d = div- l a< /p>


< / div>

i d = div- l b < / p >


id div- l b < / p > < / div>

i d

< / div> < / div>

< / div>


< / div> < / div>

< / div> < /body>

< / html>

[39]

div- l c< /p>


Primer 54. Preklapanje vise elemenata. Dati kod snimiti pod nazivom "primer54.html " (bez znakova navoda)


# s a dr z a j {

}

b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : 3 0p x ; p o s i t ion : r e l a t ive ; c o l o r : #FFF ; h e i ght : 2 0 0p x ;

# s a dr z a j d i v { he ight : l O Op x ; # s l o j - 1 { p o s i t ion : ab s o l ut e ; t op : l Op x ; background- c o l o r : # O O O ; # s l o j -2 { p o s i t ion : ab s o l ut e ; t op : 2 0p x ; background-co l o r : #F F O O O O ;

z - index : 2 ; } # s l o j - 3 { p o s i t ion : ab s o l ut e ; t op : 3 0p x ; background-co l o r : # O O F F O O ;

z - index : 3 ; } < / style>

< / head>

< / div> < /body>

Ovo t e k s t ko j i s e n a l a z i u s l o j u j edan < / div>

Ovo t e k s t ko j i s e n a l a z i u s l o j u dva < / div>

Ovo t e k s t ko j i s e n a l a z i u s l o j u t r i < / div>

[40]


Primer 55. Preklapanje vise elemenata sa negativnom vrednoscu z -inde x svojstva. Dati kod snimiti pod nazivom "primer55.html " (bez znakova navoda)


# s a dr z a j {

}

b o r de r : lpx s o l i d # ; margin : 4 0p x ; padding : 3 0p x ; p o s i t ion : r e l a t ive ; c o l o r : #FFF ; h e i ght : 2 0 0p x ;

# s a dr z a j d i v { he ight : l O Op x ; # s l o j - 1 { p o s i t ion : ab s o l ut e ; t op : l Op x ; background- c o l o r : # O O O ; # s l o j -2 { p o s i t ion : ab s o l ut e ; top : 4 0px ; left : 5 0px ;

background- c o l o r : #FF O O O O ; z - index : -2 ; # s l o j - 3 { p o s i t ion : ab s o l ut e ; t op : 3 0p x ; background-co l o r : # O O F F O O ;

z - index : 3 ; } < / style>

< / head>

Ovo t e k s t ko j i s e n a l a z i u s l o j u j edan < / div>

Ovo t e k s t ko j i s e n a l a z i u s l o j u dva < / div>

Ovo t e k s t ko j i s e n a l a z i u s l o j u t r i < / div>

< / div> < /body>

< /html>

Primer 56. Overflow. Dati kod snimiti pod nazivom "primer5 6.html " (bez znakova navoda)

< t i t l e>Ove r f l ow< / t it l e > < s t y l e type= " t ext / c s s " >

. p r e l a z_s k r o l ovan j e { widt h : 1 5 0p x ; h e i ght : 1 5 0p x ; ove r f l ow : s c r o l ; background- c o l o r : # C C C ;

. p r e l a z_s k r iven { widt h : 1 5 0p x ; h e i ght : 1 5 0p x ; ove r f l ow : hi dden ; border : lpx s o l i d #FF O O O O ;

< / style>

Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo n e k i t e k s t ko j i s l u z i

samo k a o t e s t . Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo n e k i t e k s t ko j i s l u z i

samo k a o t e s t .

[ 41]

Visoka skola strukovnih studija za Infonnacione i Komunikacione tehnologije Materijal za laboratorij ske vezbe iz predmeta Web dizajn Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo neki tekst ko j i s l u z i s amo kao t e s t .

Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo n e k i t e k s t ko j i s lu z i s amo kao t e s t .




Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . < / div>

Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo n e k i t e k s t ko j i s l u z i

samo kao t e s t . Ovo n e k i t e k s t ko j i s l u z i s amo kao t e s t . Ovo

samo kao t e s t . Ovo n e k i

s lu z i s amo kao t e s t . Ovo n e k i





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

O verflow

Ovo neki tekst koji sluzi samo kao _ test. Ovo neki tekst koji sluzi samo kao test. Ovo neki tekst koji sluzi samo kao

t ()rr-, f1 pJ.:-j tPJ.:-


CSS u eksternom fajlu

Do sada smo css kod pisali u okviru samog HTML dokumenta, pored ovog nacina postoji i drugi nacin koji se najcesce primenjuje prilikom izrade Web strana to da se css kod pise u okviru posebnog fajla koji ima ekstenziju css .Ovaj fajl se zatim "ukljucuje" u HTML stranu pomocu posebnog taga u okviru zaglavlja HTML dokumenta.

Primer 57. Definisanje eksternog css. Dati kod snimiti pod nazivom "primer57.html" (bez znakova navoda) stil.css

body { font- fami ly : Verdan a ; col o r : u ; background-c o l o r : y e l l ow ; }

< l ink r e l = " stylesheet " type= " t ext / c s s " h r e f = " s t i l . c s s " > < / head>

D o de l a z u t e p o z a d i n i i p l ave t e k s t u ! < /body> < / html>

Primer 58. Definisanje eksternog css-a,atributi i tabela. Dati kod snimiti pod nazivom " primer58.html " (bez znakova navoda) stil.css

. n a s l ov , . podn a s lov, t e l o { font - f a c e : Verdan a ; c o l o r : re d ; background : # 7 0 7 0 7 0 ; font-wei ght : bo l d ; } . na s l ov { font - s i z e : l pt ; } . podn a s l ov { font - s i z e : 1 4pt ; } . t e l o { font- s i z e : 1 2 pt ; }

[43]


< t i t l e > P r imer 4 0 < / t i t l e > < l ink r e l = " stylesheet" h r e f = " s t i l . c s s " type= " t ext / c s s " >

< / head>

< span c l a s s = " na s l ov " > I sp i s k l a s om n a s l ov < / span>

Ova j podn a s l ov i sp i san
i s t o imenon k l a s om ko j a p o s t avl j ena da delu j e u t a g D IV .

< / div>

P r i k a z u t abe l i pomocu k l a s e : "podn a s l ov " . < / t d> < / t r >

< / t ae> Cent r a l n i deo i sp i san k l a s om t el o . < / div>

< /body> < / html>

Izrada saona (template-a) HTML strane pomocu CSS-a

Ovaj deo obuhvata primere koji pokazuju nacine kako se pomocu CSS moze uraditi organizacija HTML elemenata na HTML dokumentu i na taj nacin postici prijatan raspored i izgled stranica Web sajta.

Desktop Netook Bus1rie-s Support Prt')ett Commun1ty Partners Shop U bu tu(i

New Yerl

( ;:f,figjj}l:J\&U b u n tu!=jfr;;i C.elebrate with the nf"w of:::ial Chinese version of Ubutu

Ji\j;'i![8;7 Download Ubuntu Desktop tody )

Wh111t's ubuntu liko!"?Whynot t111ko!" 111 tour' De.>ktop ) Netbook ) Server ) Download U b u n t u

Su per-fast and great-looking, Ubuntu is secure, i n tu i tive operating system that powes desktops, seves, netbooks and laptops. Ubuntu is, and a lways will , bsolu tely F.

Ceated the best open-source experts From all v the world, Ubuntu is availae 1n 24 languages and d F d:=:i\}\}flload today

W'hy use Ubuntu? > Join the community > Get suppot > Ubuntu F business > Bl"' pi'llr t o f

someth1oama21no.

J o i n o u commun1t,-

1d h"lpbr1nQ

betteropen souce oftwr" to th"

D"ktp whyau;;-Ubu-n'tu'

g Gl"'tho!"lpft from

Ubuntuuser

docum"nttn nd

forums, o r 1:1 " t

pofess1onal uppot from

"tbk lu111e ooturo' Do,

"ktop

-- ------- - U'P't--a omun1t!:' Tr>1ning

So!"CUI"', li111I"' and

licence-Fee,

"\""" ""

us1n1:1 Ubuntu to

"duc" ct nd

hnn' r""fnm,n"

Slika 23 - Primer izgleda i organizacije sajta

[44]

t

>


Postupak za izradu saona:

1. Potreban dizajn jedne strane kao uzorak Qpg,psd ... ) 2. Potrebno analizirati celine od kojih se sastoji strana 3. Pogledati mere na uzorku glavnih elemenata strane 4. Pisanje HTML koda sa div-ma 5. Pisanje CSS koda

u narednih nekoliko primera navescemo neke "jednostavne" primere kako i studenti videli nacin kako se to realizuje.

Primer 59. Potrebno napraviti strukturu HTML strane kao na slici (mera u pikselima). Za mere elemenata koristiti SajtOrganizacijal .psd

N aslov sajta

Link 1 Link 2 Link 3 Link 4 Link 5

Ovo footer

Slika 24 - Organizacija sajta 1

[45]


< t i t l e>Organ i z ac i j a s a j t a 1 < / t i t l e > < l ink r e l = " s t y : e s h e e t " h r e f = " s t i l . c s s " type= " t ext / c s s " >

< / head>

< d i v i d= " z ag l avl j e " >

Na s l ov s a j t a < / h 2 > < / div>

< span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a

< / div>

< / div> < / div>

< / div>

h r e f= " # " > L i n k h r e f= " # " > L i n k h r e f= " # " > L i n k h r e f= " # " > L i n k h r e f= " # " > L i n k

< d i v c l a s s= " c i st i " >< / div>

Ovo foot e r < / h > < / div>

< / div> < /body>

< / html>

stil.css

* { margin : Op x ; padding : Op x ;

1 < / a> < / span> 2 < / a> < / span> 3 < / a>< / span> 4 < / a> < / span> 5 < / a>< / span>

#omot { widt h : 1 0 2 4p x ; h e i ght : l O O Op x ; margin : O aut o ; } # z a g l avl j e { widt h : l O O Op x ; height : 2 0 0p x ; border : lpx s o l i d # ; } #men i { widt h : l O O Op x ; h e i ght : 5 0p x ; b o r de r-bottom : lpx s o l i d # ;

b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

#omot S redina { h e i ght : 6 0 0p x ; widt h : 1 0 0 0px; b o r de r-bottom : lpx s o l i d # O O O ; b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

# l evaKo l ona { h e i ght : 6 0 0p x ; widt h : 3 0 0px ; b o r de r - r i ght : lpx s o l i d # O O O ; f l oat : l eft ;

# s a dr z a j { h e i ght : 6 0 0p x ; widt h : 7 0 0p x ; } #foot e r {

widt h : 1 0 0 0p x ; h e i ght : 5 0px; b o r de r-bottom : lpx solid # O O O ; b o r de r - l e ft : lpx solid # ; b o r de r - r i ght : lpx s o l i d # ;

. s redina { width : 5 0 0 p x ; margin : O aut o ; padding : l Op x ; }

. s redina span { ma r g i n : Opx 2 0 ; }

. c i st i { c l e a r : bot h ; } h2 , h3 { text - a l i gn : cent e r ; }

[46]


Primer 60. Potrebno napraviti strukturu HTML strane kao na slici 25. Za mere elemenata koristiti Sajt0rganizacija2.psd

Naslov sajta


Ovo footer

Slika 25 - Organizacija sajta 2

< t i t l e>Organ i z ac i j a s a j t a 1 < / t i t l e > < l ink r e l = " stylesheet" h r e f = " s t i l . c s s " type= " t ext / c s s " >

< / head>



< span c l a s s = " l i n k " > < a < span c l a s s = " l i n k " > < a < span c l a s s = " l i n k " > < a < span c l a s s = " l i n k " > < a < span c l a s s = " l i n k " > < a

< / div>

h r e f= " # " > L i n k 1 < / a> < / span> h r e f= " # " > L i n k 2 < / a> < / span> h r e f= " # " > L i n k 3 < / a>< / span> h r e f= " # " > L i n k 4 < / a> < / span> h r e f= " # " > L i n k 5 < / a>< / span>

[47]


< d i v i d= " l evaKo l o n a " > < / div> < / div>

< / div> < / div>


< / div> < /body>

< / html>

stil.css

* { ma r g i n : Op x ; padding : Op x ; } #omot { widt h : 1 0 2 4p x ; h e i ght : l O O Op x ; margin : O aut o ; } # z a g l avl j e { widt h : l O O Op x ; height : 2 0 0p x ; border : lpx s o l i d # ; } #men i { widt h : l O O Op x ; h e i ght : 5 0p x ; b o r de r-bottom : lpx s o l i d # ;


#omot S redina { h e i ght : 6 0 0p x ; widt h : l O O Op x ; b o r de r-bottom : lpx s o l i d # ; b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

# l evaKo l ona { h e i ght : 6 0 0p x ; widt h : O Op x ; b o r de r - l e ft : lpx s o l i d # ; f l oat : r i ght ;

# s a dr z a j { h e i ght : 6 0 0p x ; width : 7 0 0p x ; } #foot e r {

widt h : l O O Op x ; h e i ght : 5 0p x ; b o r de r-bottom : lpx s o l i d # ; b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

. s redina { widt h : 5 0 0p x ; margin : O aut o ; padding : l Op x ;

. s redina span { margin : Opx 2 0 ;

. c i st i { c l e a r : bot h ; h2 , h3 { text - a l i gn : cent e r ; }

[48]


Primer 61. Potrebno napraviti strukturu HTML strane kao na slici. Za mere elemenata koristiti SajtOrganizacija .psd

N aslov sajta


Ovo footer Slika 26 - Organizacija sajta

< t i t l e>Organ i z ac i j a s a j t a 1 < / t i t l e > < l ink r e l = " s t y : e s h e e t " h r e f = " s t i l . c s s " type= " t ext / c s s " >

< / head>



< span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a < span c l a s s = " l in k " > < a

< / div>

h r e f= " # " > L i n k 1 < / a> < / span> h r e f= " # " > L i n k 2 < / a> < / span> h r e f= " # " > L i n k 3 < / a>< / span> h r e f= " # " > L i n k 4 < / a> < / span> h r e f= " # " > L i n k 5 < / a>< / span>

[49]


< / div> < / div>

< / div> < / div>

stil.css


< / div> < /body>

* { ma r g i n : Op x ; padding : Op x ; } #omot { widt h : 1 0 2 4p x ; h e i ght : l O O Op x ; margin : O aut o ; } # z a g l avl j e { widt h : l O O Op x ; h e i ght : 2 0 0p x ; border : lpx s o l i d # ; } #men i { widt h : l O O Op x ; h e i ght : 5 0p x ; b o r de r-bottom : lpx s o l i d # ;


#omot S redina { h e i ght : 6 0 0p x ; widt h : l O O Op x ; b o r de r-bottom : lpx s o l i d # ; b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

# l evaKo l ona { h e i ght : 6 0 0p x ; widt h : 2 5 0p x ; f l oat : l e ft ; } #desnaKo l ona { h e i ght : 6 0 0px; widt h : 2 5 0p x ; f l oat : l eft ; } # s a dr z a j { h e i ght : 6 0 0p x ; width : 4 9 8p x ; f l oat : l eft ; b o r de r - l e ft : lpx s o l i d # ;

b o r de r - r i ght : lpx s o l i d # ;

# f o ot e r { widt h : l O O Op x ; h e i ght : 5 0p x ; b o r de r-bottom : lpx s o l i d # ; b o r de r - l e ft : lpx s o l i d # ; b o r de r - r i ght : lpx s o l i d # ;

. s redina { widt h : 5 0 0p x ; margin : O aut o ; padding : l Op x ;

. s redina span { margin : Opx 2 0 ;

. c i st i { c l e a r : bot h ; h2 , h3 { text - a l i gn : cent e r ; }

[50]


Napomena:

Ne tumace svi browser-i isto css u tome "prednjaci" Internet Explorer. Zato potrebno napraviti jos jedan css fajl koji se ucitavati samo kada browser IE.Ovaj fajl sadrzi samo onaj css kod koji neophodan da i se elementi prikazali u IE.Kod kojim se ovo p

Documents

Marko Spasojevic - Web dizajn (staro izdanje) - ( 110 str; 2009 god. ).pdf