Marko Spasojevic - Praktikum Iz Web Dizajna (Novo Izdanje)

html(5) css(З) xml

Praktikum iz

WEB D8ZдJN A VISOKA SKOLA STRUKOVNIH STUDIJA ZA INFORMACIONE 1 KOMUNIKACIONE

TEHNOLOGIJE

Beograd, 2012.

Marko М Spasojevic

Marko М. Spasojevic

PRAKTIKUM IZ

WЕБ DIZAJNA

VISOKA SKOLA STRUKOVNIH STUDIJA ZA INFORMACIONE 1 KOMUNIKACIONE TEHNOLOGIJE

Beograd, 20 1 2.

Marko М. Spasojevic. inz. Spec

PRAKТIKUM IZ WEB DIZAJNA

1 izdanje

Recenzenti: Dr Nenad Koj ic, dipl.inz. Nikola Reljin, dipl.inz

Izdavac Visoka skola strukovnih studija za infoпnacione i komunikacione tehnologije

Zdravka Celara 1 6, Beograd

Dizajn korica: Vladan Glisovic, inz .

Stampa: AD Stamparija "Buducnost" Sumadijska 1 2 Novi Sad

Tiraz 300 primeraka

Napomena Fotokopiranje ili umnozavanje па bilo koji nacin ili ponovno objavljivanje ove knj ige, u celini ili delovima, nije dozvoljeno bez prethodne izricite saglasnosti i pismenog odobrenja izdavaca i autora.

Predgovor

Ova kпjiga паmепјепа је prveпstveпo studeпtima Visoke ICT skole u Beogradu, koji slusaju predmet Web dizajп. Svakako, posto је ova materija vrlo iпteresaпtпa i dostupпa sirem auditorijumu, kпjigu mogu koristiti svi ljuЬitelj i web prezeпtacija, koj i zele da ostvare пeki visi пivo u svome zпапјu.

U danasnje vreme savremeпi zivot se пе moze zamisliti bez upotrebe iпterneta,Web prezeпtacije kao пjegov osпovпi deo predstavlja vezu izmedu korisпika i resursa koje taj koirsпik moze da koristi. Da Ьi korisпik mogao lako, brzo i iпtuitivпo da upotreЫjava te resurse Web prezeпtacija mora da bude tako koпcipiraпa i orgaпizovaпa da korisпiku omogiCi lak i prijatпa rad. Daпas па trzistu postoji veliki broj programa pomocu kojih se moze veoma lako пapravati Web prezeпtac ija, bez Ьilo kakvog zпanja pozadiпskog koda koji је saciпjava. Medutim, kako se proЫemi postaju sve komplikovaпij i пе postoji jediпstveпi пасiп па koji se moze defiпisati saЫom ро kome se vrsi izrada Web prezeпtacija za Ьilo koji proЫem, te па osпovu toga mora se preci па izradu Web prezeпtacija putem koda tj . posao za programera. Iz tog razloga ova kпjiga се svim oпima koji је koriste omoguCiti da stekпu uvid i пеорhdпо zпanje za kreiranje dobrih u fuпkcioпalпih Web prezeпtacija.

Kпj iga је podeljeпa па sest poglavlja ciji је zadatak da Citaoca postepeпo uvedu u svet izrade Web prezeпtacija. Prvo poglavlje sadrzi primere koji uvode citaoca u пасiп i pravila pisaпja HTML koda, povezivanje izmedu straпica kao i fOrmatiranje elemeпata straпe pomocu atriЬuta. Da Ьi svaka Web prezeпtacija Ьila jediпstveпa u pogledu dizajпa i da Ьi se izbegao sterilaп izgled straпa potrebпo је primiпeti CSS па elemeпtima straпe. Primeпa i upotreba CSS-a је obradeпa u drugom poglavlju.

U trecem poglavlju obradeпi su elemeпti HTML formulara bez koji se пе moze zamisli Ьilo koja ozЬiljпa Web prezeпtacija, koja zeli da od posetioca ili korisпika prikupi пеkе iпformacije.

u cetvrtom i petom poglavlju kroz primere obradeпa је sledeca geпeracija HTML-a tj . HTML 5 i CSS CSS 3 koje doпose поvе tagove оdпоsпо поvа svojstva koj ima se poboljsava orgaпizacija i izgled Web prezeпtacije.

u sestom poglavlju obradeпi su primeп IZ XML-a koji predstavlja јеdап od пajzastupljeпih markup-u jezika daпas bez koga se пе moze zamisliti daпasпj i svet obrade i razmeпe podataka.

Posle svih ovih primera, Citalac Ьi trebalo da kreira staticku Web prezeпtaciju primeпom svih паСiпа koji su ovde opisaпi putem primera.

Autor se ovim putem zahvaljuje kolegama Nikoli Relj iпu, dr Neпadu Koj icu i studпetima па пjihovim sugestijama i predlozima.

Beograd, Novembar 20 1 2

Autor

SADRZAJ

PREDGOVOR

POGLA VLJE 1 . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 1

HTML osnove . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 3

Formatiranje teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Slike и HTML dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 1 4

Linkovi и HTML-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6

Tabele и HTML-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7

Tagovi <div> i <span> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1

POGLAVLJE 1 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

CSS (Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

CSS sintaksa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

CSS pseudo elementi . . .. . . . . . .. . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... . . . . ... . . . . . . . . . . . . . . . 33

Pozicioniranje elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Staticko pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Relativno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Apsolutno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Fiksno pozicioniranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Preklapanje elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

CSS и ekstemom faj lu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Svojstvo display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Izrada saЫona (template-a) HTML strane pomocu CSS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

AtriЬuti kao selektori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Primeri sajtova formatirani putem CSS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

POGLAVLJE 111 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

HTML formulari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Multimedijalni sadrzaj и HTML-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

POGLA VLJE IV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

H T M L 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

POGLAVLJE V . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

css 3 .. . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . .. . . .. . . .. . .. . . . . . . . . . . . .. . . . . . . . . . . . . .. . . . . . . .. . .. . . . . .. . .. . .. . .. . . .. . . 97

POGLA VLJE VI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 3

XML osnove . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 5

Literatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 27

Pog{av(je 1

Praktikum iz VVeb dizajna

HTML osnove

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

Karakteristike HTML-a:

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

<html> <head>  

<Љеаd> <body>  

<Љоdу> <Љtml>

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

3

Praktikum iz VVeb dlzajna

Primer 1 . Osпovпi delovi html dokumeпta (Slika 1). Dati kod sпimiti pod пazivom " primerl.html " (bez zпakova пavoda)

<html> <head>

<title>Tekst se vidi и пaslovu Browser-a</title> <Љеаd>

<body>Zdravo ! ! ! Ovaj tekst se vidi zato sto је ispisaп и body tagu. Sav ovaj tekst koji ste пapisali ide и јеdпот redu.

<Љоdу> <Љtml>

() Tekst se vidi u naslovt1 Brow§ -а ..:lQI:� Eile !;_dit Y.iev� Hi;;_tory !!ookmarks Iools !ie

L::J Tekst se vid i 1Ј naslovu Browser-a

Zdravo ! ! ! Ovaj tekst se vidi zato sto је 1sp1sc

otekst koj1 ste nap1saJ11de u jednom redu.

Slika 1 . Kreiranje dva оsпоvпа dela html straпe.

· 1 Primet 2 - Mozilla firefo)( -

Eile !;,dit Y.iew Hi�tory !!ool<marks

Zdravo,ovo је p1'1i red

Zdravo,ovo је drugi red

Slika 2. Defiпisaпje prekida reda.

Primer 2.Defiпisaпje prelaska и пovi red и HTML-u (Slika 2) . Dati kod sпimiti pod пazivom ,.primer2.html " (bez zпakova пavoda)

4

<html> <head>

<title>Primer 2</title> <Љеаd>

<body>Zdravo,ovo је prvi red <br/> < ! - - Ovo је komeпtar koji se пе vidi па straпi пеgо samo и kodu - ->

Zdravo,ovo је drugi red .<br/> <Љоdу> <Љtml>

Praktikum iz 1о/еЬ dizajna

Napomena: Obratiti pazпju па пасiп zatvaraпja taga <br/>. Ovakav пасiп zatvaranja taga se пaziva samozatvaraju Ci tag.

Primer 3. Pisaпje komeпtara u HTML-u (Slilш 3). Dati kod sпimiti pod пazivom " primerЗ.html " (bez zпakova пavoda)

<html> <head>

<title>Primer 3</title> </head>

<body>Zdravo,ovo је prvi red <br/> < ! - - Ovo ј е komeпtar koji se пevidi па straпi пеgо samo u kodu - ->

Zdravo,ovo је drugi red. <br/> <Љоdу> </html>

Zdravo,ovo је prvi red Zdravo,ovo је dru� red

Slika 3 . Komeпtar u HTML-u.

Zdravo.sada raduno sa pasuruna

Ovo Је tekst u prvom pasusu teksta

Ovo Је tekst u drugom pasusu teksta pasusu teksta

Ovo Је trec1 pasus Sada се te V1deЬ. da se 1 ckug1 tagovi mogu p1sat1.

unutar tagova

tak.o da ovaJ tekst treba da Je u pasusu ali u novom redu

Slika 4. Pasusi па HTML straпi.

Primer 4. Paragrafi (pasusi) u HTML-u (Slilш 4). Dati kod sпimiti pod пazivom ,.primer4.html " (bez zпakova пavoda)

<html> <head>

<title>Kreiraпje pasusa</title> </head>

<body>Zdravo,sada radimo sa pasusima.<br/> <p>Ovo је tekst u prvom pasusu teksta.</p> <p>Ovo је tekst u drugom pasusu teksta pasusu teksta. </р> <р></р> <p>Ovo је treci pasus.Sada се te videti da se i drugi tagovi mogu pisati

uпutar tagova <br/> tako da ovaj tekst treba da је u pasusu ali и пovom redu.</p> <Љоdу>

5

Praktifi.um iz Wеь dlzajna

Primer 5 . Pravljenje razliCitih velicina zaglavlja pomocu taga <hn> (Slika 5). Dati kod snimiti pod nazivom " primerS.html " (bez znakova navoda)

<html> <head>

<title>Pravljenje razliCitih velicina zaglavlja (naslova)</title> </head> <body>

<hl > Najvece zaglavlje (oko 24 piksela). </h l > <h2> Tekst priЫizno velicine 18 piksela. </h2> <hЗ> Tekst priЫizno velicine 14 piksela. <ЉЗ> <h4> Tekst priЫizno velicine 12 piksela. </h4> <h5> Tekst priЫizno velicine 1 О piksela. </h5> <hб> Najmanje zaglavlje (oko 8 piksela). <Љб> <p>Ovo је tekst u prvom pasusu teksta.</p> <p>Ovo је tekst u drugom pasusu teksta pasusu teksta.</p> <p></p><p>Ovo је treCi pasus.Sada се te videti da se i drugi tagovi

mogu pisati unutar tagova <br/> tako da ovaj tekst treba da je u pasusu ali u novom redu.</p> <Љоdу> </html>

N ajvece zaglavlje ( oko 24 piksela) Tekst P.riЫizno v�licine 18 pikse\a

Tekst priЫizno velicine 14 piksela

Tekst priЫimo velicine 12 piksela

Tekst priЬlizкo w:licine 1 О pikseh

Slika 5 . Zaglavlja па HTML strani .

Tekst s а srpskim slovillla.

_ Sada se vide i slova С, S, D ,С i Z Ћирилица такође Ч, Ш, Ђ, Ћ, Љ, Њ, Џи остала.

Slika 6. lspis srpskih karaktera.

Primer 6. Prikazivanje karaktera С, S, D ,С, Z, Ч, Ш, Ђ, Ћ, Љ, Њ, Џ. Stranica mora biti sacuvana u Unicode formatu (Slika 6). Dati kod snimiti pod nazivom ,.primer6.html " (bez znakova navoda)

6


<html> <head>

<title>Defiпisaпje tipa html-a i prikaza пacioпalпih karaktera</title> <meta http-equiv=" Content-Type" content="text/html;

charset=utf-8" > </head>

<body> Tekst sa srpskim slovima. <br/><br/><! - - Ovo је komeпtar - - > Sada se vide i slova С, S, D ,С i Z<br/> Ћирилица такође: Ч, Ш, Ђ, Ћ, Љ, Њ, Џ и остала.

<Љоdу> </html>

Primer 7 . Razmak izmedu reci u HTML-u (Slika 7). Dati kod sпimiti pod пazivom , rimer7.html " (bez zпakova пavoda)

<html> <head>

<title>Pravljeпje razmaka</title> <meta http-equiv="Coпteпt-Type" coпteпt="text/html; charset=utf-8"> </head> <body>Kucaпjem teksta sa razmakom, пе

postize se пikakav efekat, sem kreiraпje jedпog "Space" . <р> Dodavaпje razmaka је pomocu &пЬsр; kojim se postize јеdап "Space", а moze se koristiti proizvoljaп &пЬsр;&пЬsр;&пЬsр;&пЬsр;&пЬsр;&пЬsр;&пЬsр; broj puta. <br/><br/> <pre>Sada је dovoljпo пapraviti razmake u kucaпju, kao i поvе redovei опi се kao takvi biti Prikazaпi. l KucanJem teksta sa ral!nakom. ne postiZe se 1Шc.akav efekat. smi kreiranJe Jednog

</pre> ·space"

<Љоdу> DodavanJe rar:шakaJe pomoCu koJIПI se postiU Jedan "Space", а moie se konstrtl.

prowolJan broJ puta

</html> Sada Је dovolJno

!се.о 1 nove redove

1 on;i. Се kao

pr11cazan1.

toJon

napravit1 raznusk:e u k:ucanJu,

bltl

Slika 7. Razmaci па html straпi.

7


Formatiranje teksta

Priтer 8 .Nacin prikaza i forтatiranja teksta. Dati kod sniтiti pod nazivoт ,.primer8.html " (bez znakova navoda)

8

<htтl> <head>

<title>Osnovni eleтenti forтatiranja teksta </title> <теtа http-equiv="Content-Type" content="text/htтl; charset=utf-8">

<Љеаd> <body>

<Ь> Za tekst tipa BOLD treba koristiti tag В </Ь><Ьr/> <strong> VeCina citaca tag STRONG prikazuje kao BOLD, ali је osnovna naтena pojacavanje dela teksta </strong> <br/> <br/> <br/> <i> Za tekst tipa 1Т ALIC treba koristiti tag 1 </i> <br/> <br/> <ет> Vecina citaca tag ЕМ prikazuje kao IТALIC, ali je osnovna naтena naglasavanje dela teksta </ет> <br/> <cite> Tag СПЕ takode tekst prikazuje kao 1Т ALIC, а koristi se za citate </cite> <br/> <address> Tag ADDRESS takode tekst prikazuje kao 1Т ALIC, а koristi se za adrese </address> <hr><! --Prikazuje horizontalnu liniju -- ><br/> Originalni tekst: PRIKAZ тalog/velikog teksta ZNACI proporcionalno SтAnjEnjE/poveCanjE ORIGINALNOG <br/> <br/> <sтall> PRIKAZ тalog teksta ZNACI proporcionalno SтAnjEnjE ORIGINALNOG </sтall> <br/> <sтall><sтall> Dvostruko тanj i tekst doЬija se dvostrukoт priтenoт taga SMALL </sтall> </sтall> <br/> <Ьig> PRIKAZ velikog teksta ZNACI proporcionalno poveCanjE ORIGINALNOG <Љig> <br/> <del> Precrtani tekst doЬija se tagoт DEL</del> <br/> <ins> Podvuceni tekst doЬija se tagoт INS </ins> <br/> <u> Efekat podvucenog teksta cesce se doЬija upotreboт taga U</u> <br/> <br/> <br/> Dodavanje indeksa je tagoт SUB H<sub> 2 </sub>O, ili tagoт SUP za potrebe eksponenta Х <sup> 2 </sup>. <br/> <br/> <br/> <hr align="right" noshade size="5" width="бOOpx"> <Љоdу> <Љtтl>


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

<html> <head>

<title>Izdvajanje teksta </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head> <body>Prva recenica teskta <br/>

<Ыockquote> Tekst koji sledi Ьiсе kompletno uvucen u odnosu na levu marginu stranice, i kao takav predstavljace poseban deo teksta. Ovo se postize tagom BLOCKQUOTE

<Љlockquote> <br/> <br/> Ako se u tekstu pojavljuje skracenica, а zeli se prikaz punog njenog imena, kada korisnik misem stane da tu rec koristi se tag ABBR sa atriЬutom title="neki tekst". <br/> Stati misem na skracenicu nase skole <abbr title="Visa skola za informacione i komunikacione tehnologije"> ICT </abbr> da Ьi se video efekat. <br/> <br/>

<Љоdу> </html>

Primer 10 . Pozicioniranje teksta i rad sa atriЬutima tagova (Slika 8) . Dati kod snimiti pod nazivom " primer 10.html " (bez znakova navoda)

<html> <head>

<title>Pozicioniranje teksta </title> <meta http-equiv="Content-Type" content="text/html ; charset=utf-8">

</head> <body bgcolor="#F5F8E3" text="#000080">

Tekst је inicijalno postavljen uz levu marginu. <br/> <р align="left"> Tekst celog pasusa Ьiсе postavljen levo. </р> <р align="center"> Tekst celog pasusa Ьiсе postavljen na sredinu. </р> <р align="right"> Tekst celog pasusa Ьiсе postavljen desno. </р>

<Љоdу> </html>

9


• 1 Pozicioniranje teksta - Mozilla Firefoн Spisak skracenica vezanih za 'WEB:

Е.Ме !;cit l[iew Нi�tory !!ookmarks Iools !iefp Ј П Po21cioniranje teksta w:;.rw

П file:/l/C:/Documents and Set л" World Wide ·тв

Tekst Је inicualno postavljen uz levu margm.u. Unifoпn Resource Locator

Tekst celog pasusa bice postavl.Jen levo. html

hyperText Markup Language Tekst celog pasusa bice postavljen na sredinu. php

Tekst celog pasusa bice postavljen desno. personal home page

Slika 8 - Primena html atriЬuta. Slika 9 - Prikaz liste definicija .

Primer 1 1.HTML liste, l iste definicija (Slika 9) . Dati kod snimiti pod nazivom ,primerl l.html " (bez znakova navoda)

<html> <head>

<title>Definisanje listi </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<dl> <body>Spisak skracenica vezanih za WEB:

<dt>WWW </dt> <dd>World Wide WEB</dd>

<dt>URL</dt> <dd>Uniform Resource Locator</dd>

<dt>html</dt> <dd>hyperText Markup Language</dd>

<dt>php</dt> <dd>personal home page</dd>

</dl>i tako dalje . . .. . <Љоdу>

</html>

Primer 12 . Uredene i neuredene liste (Slika 1 О) . Dati kod snimiti pod nazivom "primer12.html " (bez znakova navoda)

1 0

Prafitifium iz Wеь dlzajna

<html><head> <title>Liste sa nabrajanjem </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <Љead><body>

<h2>Uredjene liste<Љ2> <p>Sutra kupiti: <ol>

</ol>

<li> Mleko</li> <li>Secer</li> <li>Keks</li> <li>Sapun</li>

</p><p>Nakon glasanja znaju se i poslednja cetiri mesta

Uredjene liste

Sutra kupiti.

1. lvlleko 2 Secer 3. Keks 4. Sapun

<ol start="7"> Nakon glasanja ZIШJU se i poslednja cetiri mes

<li> pesma 1 </li> <li> pesma 2</li> <li> pesma 3</li> <li> pesma 4</li>

</ol></p><h2>Neredjene l iste<Љ2> <p>Vrste cveca:<ul type="disc">

<li> Lala </li> <li>Ruza</li> <li>Karanfil</li>

</ul><br/><br/>Vrste jela: <ul type="circle">

<li>Supa</li> <li>Glavno jelo</li> <li> Dezert</li>

</ul><br/><br/> AutomoЬili :<ul type="square">

<li>Mercedes</li> <li> Audi</li> <li>Reno</li>

</ul> <br/><br/></p>

<Љоdу> <Љtml>

7. pesma 1 8. pesma 2 9. pesma 3

10. pesma 4

N eredjene liste

Vrste cveca:

• Lala • RиZa • Karanfil

Vrste jela.

о Supa о Glavno Jelo о Dezert

Automobili:

• Mercedes • Auch • Reno

Slika 1 О. Uredenje i neuredene liste.

1 1

Praktikum iz Wеь dizajna

Primer 1 3 .КomЬinovanje razlicitih tipova listi (Slika 11). Dati kod snimiti pod nazivom "primerJЗ.html" (bez znakova navoda)

<html> <head>

<title>KomЬinovane liste </title> <meta http-equiv="Content-Type" content="text/html ; charset=utf-8">

</head> <body>

Lista 1 . Stambeni prostor <ul>

<li>Stan <ul>

</ul> </li> <li>Kuca

<ul>

</ul> </li>

<li> Ј ednoso ban</li> <li> Dvoso ban</li>

<li>Prizemna</li> <li> Jednospratna</li> <li> Visespratna</li>

</ul> <br/><br/>

Lista 2. Voce <ol start=" 1 ">

<li>Agrumi: <dir>

<li> Lim un</li> <li> Mandarine</li> <li>Kivi</li>

</dir> </li>

<!-Nastavak па sledecoj strani -->

1 2

Lista 3 . pica <ol start=" 1 ">

<li> Bezalkoholna: <ol>

<li>Caj</li> <li>Kafa</li> <li>Sok</li>

</ol> </li>

<li>Alkoholna: <ol start="4">

<li> Votka</li> <li> Vinjak</li> <li>Pivo</li>

</ol> </li>

</ol> <Љоdу>

<Љtml>

Praktikum iz Wеб dizajna

Lista 1. Stamb eni pro stor

• Stan

о Jednosoban

о Dvosoban

• Киса о Prizemna

о Ј ednospratna

о Visespratna

Lista 2 Voce

Agrumi•

о Limun

о Mandarine

о Kivi

2. Ostalo voce·

о Jabuka

о Kruska

о SIJiva

Lista 3. pica

1. Bezalkoholna.

1. Сај 2. Kafa

3 Sok

2. Alkoholna•

4. Votka

5. Vmjak 6. Pivo

Slika 1 1 . KomЬinovane liste.

1 3

Prafi.tikum iz Wеь dizajna

Slike u HTML dokumentu

Primer 14 . Slike u okviru HTML straпe (Slika 12). Dati kod sпimiti pod пazivom ,,primer14.html " (bez zпakova пavoda)

<html> <head>

<title>Uпos slike u straпicu</title> </head> <body> <hЗ>Tag za uпos slike је img. Uпutar taga mora Ьiti i source slike, da Ьi se zпalo odakle se slika uzima. Najbolje је da to bude пeki folder uпutar foldera koji predstavlja сео sajt . </hЗ> <br/><br/>Slika 1 - jpeg slika, koja је u ustom folderu gde i html straпa<br/> <img src="slike/slikal .jpg"> <br/><br/>Slika 2 - gif slika, koja је u podfOlderu Folder 2 u odпosu па html straпu <br> <img src="slike/slika2.gif'> <br/><br/>Slika 3 -рпg slika, koja је u proizvoljпom Folderu 3 u odпosu па html straпu <br/><img src="slike/slikaЗ .pпg"> <br/><br/> Slika 4 - jpg, fajl koji se preuzima sa пеkе web lokacije <br> <img src="http://www .ict.edu.rs/Sai tes/ default/files/ ict_ lo go. рпg"> <Љоdу> </html>

Shka 3-Defuuan-e .mьut. i.a relшvnu w.inu 1 du5nu slike

�-·-----··-Slika 12 . Prikaz slika. Slika 1 3 . Promeпa veliCiпe slike.

14


Primer 1 5 . AtriЬuti img taga (Slika 13). Dati kod snimiti pod nazivom " primer 15.html " (bez znakova navoda)

<html> <head><title> AtriЬuti slike</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>.

Slika 1 - Originalna slika sa atriЬutom alt koj i ispisuje tekst ako nema slike<br> <img src="slike/slika l .jpeg" alt="predeli SrЬije"> <br/>

Slika 2 - Definisanje atriЬuta za apsolutnu visinu i duzinu slike <br/> <img src=" slike/slika l .jpeg" height=327 width=291 alt="predeli SrЬije"> <br/>

Slika 3- Definisanje atriЬuta za relativnu visinu i duzinu slike <br/> <img src=" slike/slika l .jpeg" height=25% width= 1 05% alt="predeli SrЬije"> <br/>

Slika 4 - Definisanje atriЬuta za poravnanje slike align <br> <img src=" slike/slika l .jpeg" height= 1 50 width=1 80 alt="predeli SrЬije" align="right"> <br/><br/>

Slika 5 - Definisanje atriЬuta za poravnanje slike align i imena slike<br> <img src=" slike/slika l .jpeg" height= l 5% width=l 5% alt="predeli SrЬije" align="center" name="eksterijer" border=" l О"> <br/><br/>

<Љоdу> </html>

Primer 1 6.Dodavanje slike i Ъоје pozadini uz pozadinski zvuk. Dati kod snimiti pod nazivom " primer16.html " (bez znakova navoda)

<html> <head><title>Slika pored adrese sajta, и paleti Favorites i pozadinske

slike i muzike</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="l .gif">

</head> <body bgcolor="#FFFFOO" text="#FFOOOO" background="slike/slika l .jpeg" > <bgsound src="multimedija/muzika.wma" lоор="З"> Ucitavanje slike kao pozadine web strane. <br> <br>

<Љody></html>

1 5

Praktikum iz VV еБ dlzajna

Linkovi u HTML-u

Primer 1 7 . Defiпisaпje tekstualпih i grafickih liпkova. Dati kod sпimiti pod пazivom ,,primer1 7.html " (bez zпakova пavoda)

<html> <head><title>Liпkovi 1 Tekstualпi i graficki</title></head>

<body><a href="primerl 6.html">Tekstualпi liпk ka straпici primer 1 6.html</a><br/><br/><a href="http://www . ict.edu.rs"> Tekstualпi liпk ka пеkој web straпici</a> <br/> <br/> <а href="http://www. ict.edu.rs/system/files/Iпtemet_html_O.zip"> Tekstualпi liпk ka пekom fajlu па udaljeпoj web straпi</a> <br/> <br/> Slika kao liпk ka html straпici <br/> <а href="primer 1 6 .html"><img src="slike/slikaЗ .pпg" aligп="middle"> </а> <br/> <br/> <а href="multimedija/pdffest.pdf''>Liпk ka PDF faj lu.</a>

<Љоdу> </html>

Primer 1 8 . NaCiп prikaza пovih straпica pomocu liпkova. Dati kod sпimiti pod пazivom " primer18.html " (bez zпakova пavoda)

<html> <head><title> N aCiпi prikaza пovih straпica. </title></head> <body>

<а href="primerl 7 .html" target="_Ьlaпk" >Tekstualпi liпk ka straпici primer 17 .html koja se otvara и пovom prozoru</a> <br> <br> <а href="primer l 7.html" target="_pareпt" >Tekstualпi liпk ka straпici primer 17 .html koja se otvara и prozoru koji је ugпjezdeп и drugi prozor (frameset)</a> <br/> <br/> <а href="primerl 7.html" target="_self'' >Tekstualпi liпk ka straпici primer l 7 .html koja se otvara и postojecem prozoru</a> <br/> <br/> <а href="primerl 7.html" target="_top" >Tekstualпi liпk ka straпici primer l 7 .html koja se otvara и пajvisem frejmu па straпici pri cemu zaklanja postojecu straпicu</a> <br> <br>

</Ьоdу> </html>

1 6


Primer 1 9. Unutrasnji linkovi па strani (anchor). Dati kod snimiti pod nazivom

,.primer19.html " (bez znakova navoda)

<html> <head><title> Postavljanje internog ref erenciranja stranice</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head><body><h2> WEB programiranje </h2>

<ol> <li> <а href="# l ">HTML</a></li> <li> <а hreF"#2">JavaScript</a></li> <li> <а href="#З">PHP</a></li> <li> <а href="#4"> ASP</a></li>

</ol><hЗ> <а name=" l "> HTML</a> </hЗ> <p>Ovde ubaciti malo<br/> vise teksta. </р>

<hЗ> <а name="2"> JavaScript </а> <ЉЗ> <p>Ovde ubaciti malo vise teksta.</p>

<hЗ> <а name="З "> РНР</ А> </hЗ> <p>Ovde ubaciti malo vise<br/> teksta.</p>

<hЗ> <а name="4"> ASP </а> </hЗ> <p>Ovde ubaciti <b>malo</Ь> vise teksta.</p> </Ьody></html>

Tabele u HTML-u

Primer 20. Defmisanje tabele (Slika 14) . Dati kod snimiti pod naz1vom "primer20.html " (bez znakova navoda)

<html> <body><taЫe border="l ">

<! --Red prvi -> <tr>

<td>Prvo polje и prvom redu</td> <td> Drugo polje и prvom redu </td>

</tr> <! --Red drugi - -> <tr>

<td>prvo polje и drugom redu</td> <td> Drugo polje и drugom redu </td>

</tr> </tаЫе>

<Љodv></html>

JIPrvo�e u prvom redu ]i!)rug� ро!Је u prvom redu Ј Jlirvo �u�redu]�ljeu�

Slika 1 4 - Tabela и html-u.

1 7

Praktifi.um iz Wеь dizajna

Primer 2 1 . AtriЬuti tabele i njenih elemenata. Dati kod snimiti pod nazivom ,.primer21.html " (bez znakova navoda)

<html> <body>

<center><taЫe border=" 1 " width="85%" bgcolor="yellow">

<tr> <td>Prvo polje и prvom redu</td> <td> Drugo polje и prvom redu </td>

</tr> <tr>

<td>Prvo polje и drugom redu</td> <td> Drugo polje и drugom redu </td>

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

<tаЫе width="85%" height="55%" border="8" bordercolor="#FFOOOO">

<tr align="right"> <td valign="top">Prvo polje и prvom redu</td>

<td valign="middle"> Drugo polje и prvom redu </td> </tr>

<tr align="center"> <td bgcolor="#cccc99">Prvo polje и drugom

redu</td> <td valign="bottom"> Drugo polje и drugom redu </td>

</tr> </tab le></ center> </Ьоdу>

</html>

[ SpOJene 2 kolone

1 ь г Slika 1 5 . Spajanje kolona.

1 8

Slika 1 6. Spajanje redova i rastojanje izmedu celija.

Praktikum iz WеБ dlzajna

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

<html><body> <tаЫе width="60%" border="З" cellspacing=" I O " >

<tr>

</tr> <tr>

</tr> <tr>

</tr> </tаЫе>

</Ьоdу> <Љtml>

<td rowspan="З" >A</td> <td> l </td>

<td>2</td>

<td>З</td>

Primer 23. Spajanje kolona. (Slika 15) . Dati kod snimiti pod naz1vom ,.primer23.html " (bez znakova navoda)

<html> <body>

<tаЫе width="60%" border="З " cellpadding="20" > <tr >

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

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

</tr> <tr>

<td>c</td> <td>З</td>

</tr> </tаЫе>

<Љоdу> <Љtml>

1 9

Prak.tik.um iz Wеь dlzajna

Primer 24. Primer komЬinovane tabele (Slika 17). Dati kod snimiti pod nazivom ,,primer24.html" (bez znakova navoda)

<html> <body>

<tаЫе border="З" width="50%" height="50%" cellpadding="8" cellspacing="4" >

<tr> <td rowspan="2">Pera</td> <td colspan="2">Mika</td>

</tr> <tr>

<td>Laza</td><td> Joca</td>

М>kа

Pera

</tr> </tаЫе> <Љоdу>

</html> Slika 1 7. Spajanje redova i kolona.

Primer 25. Definisanje delova tabele (Slika 18). Dati kod snimiti pod nazivom ,,primer25.html" (bez znakova navoda)

<html> <body>

<div align="center" > <tаЫе border="2" width="50%"> <caption> Ime tabele</caption> <thead>

<tr><th>Kolona 1 </th><th>Kolana 2</th></tr> </thead> <tbody> <tr>

<td > 1 </td> <td >2</td> Ime tabele

</tr> <tr>

1 Kolona l 11 Kolana2

'l 1 112 1 1

<td > 3</td><td >4</td> </tr></tbody>

lз __ ]4 _ _Ј

</tаЫе> </div> Slika 1 8 . Delovi tabele.

<Љodv></html>

20


Tagovi <div> i <span>

Primer 26. Definisanje osnovne strukture HTML dokumenta (Slika 19). Dati kod snimiti pod nazivom " primer26.htm/" (bez znakova navoda)

<html> <head><title>Podela HTML dokumenta па celine</title></head> <body>

<div id="zaglavlje"> <span>Sadrzaj predstavljen inline.</span> <span> Sadrzaj predstavljen inline.</span>

</div> <div id="omotSadrzaja">

<p>Tekst и р и okviru div-a.</p>Tekst и div-u. </div> <div id="footer"> <center>Visoka ICT,Web dizajn lab. vezbe.</center> </div>

<Љоdу> </html>

Sadrzaj predstavljen inЬne. Ovo је tekst и span tagu Naslov HTML strane

Tekst ир и okviru div-a.

Tekst и div-u

Link. 1 Link. 2 Link. 3 Link. 4 Link. 5 Ovo Је tekst prvog clanka. Ovo Је tekst drugog clanka. Ovo Је tekst treceg clanka.

Visoka ICT,Web chzajn lab vefue

Slika 1 9. Tekst и div-u i span-u. Slika 20. Struktuiranje html dokumenta pomocu div-a i

span-a.

2 1

Prafitifium iz Wеь dizajna

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

<html> <head>

<title>Podela HTML dokumenta па celine</title> </head>

-<body>

<div id="zaglavlje"> <hl >Naslov HTML strane</h l >

</div> <div id="glavniMeni">

<span class="meni_link"> <а href=="#" title="link l ">Link 1 </а>

</span> <span class="meni_link">

<а href=="#" title="link2">Link 2</а> </span>

</div> <div id="omotSadrzaja">

<div id="sadrzaj"> <div class="clanak">

Ovo је tekst prvog clanka. </div> <div class="clanak">

Ovo је tekst drugog clanka. </div> <div class="clanak">

Ovo је tekst treceg clanka. </div>

</div> </div> <div id=:="footer">

<р align="center">Visoka ICT,Web dizajn lab. vezbe</p> </div>

</Ьоdу> </html>

22

Pogfav[je 11

css

Praktikum iz Wеб dlzajna

CSS (Cascading Style Sheets)

Sluzi za defiпisaпje па Сiпа па koji se prikazuju HTML elemeпti. Moze se pisati u okviru samog HTML dokumeпta ili u posebпom fajlu.

CSS sintaksa

CSS siпtaksu Сiпе pravila ро koj ima se formatiraju HTML elemeпti па straпi. Svako pravilo ima dva glavпa dela selektor (koj im se odaЬira tj . selektuje elemeпt iz HTML dokumeпta) i јеdпе il i vise deklaracija.

Sdektor

Deklaracija Deklaracij а

Slika 2 1 . CSS pravilo

/* Ovo је komeпtar u CSS-u */

/* Svaki paragraph se formatira ovako * / р { color:#FFOOOO;text-aligп:ceпter;}

/* Selektuj elemeпt koji ima vredпost atriЬuta id test * / #test { color:#OOffOO;}

/* Selktuj elemeпt(e) koji imaju vredпost atriЬuta class proba */ .proba { text-aligп:right;}

Selektor-om se odaЬira HTML elemeпt koj i se zeli formatirati. Pored imeпa HTML taga kao selektori se пајсеsсе mogu upotreЫjavati i vredпosti atriЬuta id i class.

25


Deklaracija se sastoji о svojstva (property) i vrednosti tog svoj stva, pri cemu svojstvo predstavlja neki atriЬut HTML elementa koj i se moze menjati.

imeSvojstva : vrednost; Vrednost svojstva koje se najcesce odnosi па boju se zadaje и heksadecimalnom format sa pocetnim znakom #. (#FFOOOO - crvena, #OOFFOO - zelena, #OOOOFF-plava) Primer 28. Kreiranje CSS-a и liniji. taga (Slika 22) . Dati kod snimiti pod nazivom ,primer28.html " (bez znakova navoda)

<html> <head> <title>Primer 28</title></head> <body>

Kreiranje CSS stilova и linij i . <р style="font-size:20px">Kreiranje CSS stilova и liniji .</p> <р style="font-size:ЗOpx; color:#OOffOO">Kreiranje CSS stilova и

linij i . </р><р style="font-size: 40pt; color:red; background-color: #FFFFOO"> Kreiranje CSS stilova и linij i . </р>

26

<р style="font-weight:bold;"> Bold tekst! </р> <р style="text-decoration:Ыink;"> Tekst koji Ыinka! </р> <р style="text-align:center;"> Centrirani tekst! </р> <р style="font-style: italic;"> ltalik tekst! </р> <р style="border-top: solid;"> Linija ! </р> <р style="font-size: smaller;"> Tekst manjeg fonta! </р> <р style="font-size:Ьigger;"> Tekst veceg fonta! </р> <р style="font-size:x-small ;">Ovo је vrlo mali font.</p> <р style="font-size: small;">Ovo је mali font.</p> <р style="font-size: 1 брх; ">Font apsolutne mere 1 брt.</р> <р style="font-size:300%;">Font relativne mere od 300%.</р> <р style="text-decoration: line-through; "> Precrtani tekst! </р> <р style="text-decoration:underline"> Podvuceni tekst! </р> <hЗ>Fontovi</hЗ> <р style="font-family: Carleton ;" > Prikaz vrsta fontova. Font Carleton ! ! ! </р> <р style="font-family: Century Gothic;" > Prikaz vrsta fontova. Font Century Gothic! ! ! </р> <р style="font-family: Century SchoolЬook;" > Prikaz vrsta fontova. Font Century SchoolЬook! ! ! </р> <р style="font-family: Comic Sans MS;" > Prikaz vrsta fontova. Font Comic Sans MS ! ! ! </р> <Љody></html>

Praktikum iz WefJ dizajna

�- -Кienn"cSSm!cvau.n"

Кreiranje C S S stilova u linф.

!,_," .

Interno dt!finb·ani stil h2

Intenio DeГlllliiani Stil Н4

Slika 22. Primeпa CSS svojstava па S lika 23. Primeпa CSS svojstava па tekst. tekst i pozadiпu.

Primer 29. Defiпisaпje iпternog CSS-a (Slika 23). Dati kod sпimiti pod пazivom "primer29.html" (bez zпakova пavoda)

<html> <head><title>Iпterno pozivaпi stilovi</title>

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

</head> <body> <b>Upotreba stilova za definisanje slike kao pozadine<Љ> <br/> <p>Upotreba stilova za definisanje pasusa</p>

<Љоdу> </html>

Primer 3 1 . Definisanje pozadinske slike bez ponavljanja i sa pozadinskom bojom (Slika 25). Dati kod snimiti pod nazivom " primerЗJ.html " (bez znakova navoda)

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

body{ background-image: url( slike/pozadina.png); background-repeat:no-repeat; background-position:top left; width: 1 OOOpx;height: 1 ОООрх; background-color:# 02053А;}

</style></head> <body><b>Upotreba stilova za definisanje slike kao pozadine<Љ>

<br/><p>Upotreba stilova za definisanje pasusa</p>

28

<Љody></html>

Slika 24. Pozadinska slika koja se ponavlja.

Slika 25. Pozadinska slika koja se пе ponavlja.


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

<html> <head><title> CSS stilovi</title>

<meta http-equiv="content-type" соп tent="text/html; charset=utf-8 "> <style type="text/css"> < ! - -hr { align: center ; width: 70%; size :8 ; color: green; } ul { list-sty le: square inside url( slike/lista _ strelica. png) }

/* umesto ove slike stavite lista_krug.png lista_ok.png */ --></style>

</head><body> <hr/><br/><ul >

<li>Lala</li> <li> Ruza</li> <li> Karanfil</li>

</ul><br/> <Љоdу> </html>

" Lala "Ruia " Karanfil

Slika 26. Neuredena lista.

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

<html><head><style type="text/ css"> a: link { color: navy; font-weight: bold ;} a:visited { color: Ыuе; font-weight: bold;} a:active { color: red; font-weight: bold;} a:hover { color: yellow; font-weight: bold; text-decoration:

underline; background-color: purple;} img {border-width: 7px;border-style: solid;border-color: purple;} body { scrollЬar-base-color: green; scrollЬar-arrow-color: Ыuе;

scrollЬar-darkshadow-color: #69СО8А; scrollЬar-facecolor: #FFFBCб; scrollЬar-highlight-color: red; scrollЬar-shadow-color: purple;scrollЬar-track-color: green; }

</style></head><body><a href="30.html">Tekstualni link ka stranici 30.html</a> <br/> <а href="http://www .ict.edu.rs">Tekstualni link ka eksternoj web stranici</a> <br/> <br/> Slika <img src="slike/slika l .jpg" > <Љody></html>

29


Primer 34. Кlase па primeru teksta. Dati kod sпimiti pod пazivom "primer34.html " (bez zпakova пavoda)

<html> <head><title>Primer 34</title>

<style type="text/css"> . ime { foпt-size: 30pt ; color: Ыuе}

</style> </head> <body> <р class="ime">Iskaz па koji је primeпjeп stil iz head-a.</p>

<р style="foпt-family: Verdaпa ;foпt-size: 1 8 ; color: red"> Iskaz па koj i је primeпjeп stil iz taga Р.</р>

<div class="ime"> <h4>Tri iskaza</h4>

<p>sa istim stilom</p> <p>koj i j e posledica delovaпja taga div !</p>

</div> <Љody></html>

Primer 35 . Кlase i razпi HTML elemeпti. Dati kod sпimiti pod пaz1vom "primer35.html " (bez zпakova пavoda)

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

p .special {color: red; backgrouпd: #F8F400; } hr.zeleпa {aligп: ceпter; width: 60%; size: 2 ; color: greeп} hr.crveпa {aligп: ceпter; width: 60%; size: 2; color: red} #okvir { border: 1 рх solid #ООО;} hl { color:yellow; foпt-style: italic;border:solid; text-aligп: ceпter;} h 1 .поvа { color:greeп; border: solid; foпt-style:bold;border: solid;

text-aligп: ceпter; } </style></head>

<body>

30

<р class="special">Iskaz па koj i је primeпjeп stil !</p><br/> <hr class="zeleпa" > <hr class="crveпa" >

<div id="okvir"> <hl> Ovo је prikaz stila hl. </hl><br/> <hl class="пova"> Ovo је prikaz stila h 1 preko klase пew.</hl>

</div> <Љody></html>


Primer 36. Promena oЫika kursora. Dati kod snimiti pod nazivom "primer36.html " (bez znakova navoda)

<html> <head>

<style type=' 'text/css"> . l ink 1 { cursor:crosshair; } . l ink2 { cursor:help; } . l ink3 { cursor:pointer;} .l ink4 { cursor:move; } . link5 { cursor:wait; }

.font l {font-family: Verdana; font-size: 1 8рх; color: red; text-al ign: center}

</style> <Љеаd> <body>

<ul> <li><a href="stranal .html" class="linkl ">cross l ink</a></li> <li><a href="strana2.html " class="link2">help link</a></li> <li><a href="strana3.html " class="link3">pointer</a></li> <li><a href="strana4.html " class="l ink4">move l ink</a></li> <li><a href="mypage.htm" class="link5">wait l ink</a></li>

</ul><hr/><span class="font l "> Tekst ispisan stilom klase fontl </span>

</Ьоdу> <Љtml>

Fтvi eleгnent

Drugi eleгnent

Treci eleгneпt

Cet\trti eleгnent

F'eti eleгnent

Slika 28. Navigacija.

i ... " .. "".""�"" .. " .. _ .. ".""" .. """" ...... "" .. " .. "" ..... " .. "" .... ""."".-".""."".""." .. .

!

1 ! !

! i : : ! ! !

! Slika 2 7. margin i padding.

31

\ Praktifi.um iz Wеь dlzajna

Primer 37. Margiпe i uпutrsпji razmak (paddiпg) (Slika 27) . Dati kod sпimiti pod пazivom " primer3 7.html " (bez zпakova пavoda)

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

* { margiп:Opx; paddiпg:Opx; } #spolja { width: 1 ОООрх: ; height :500px; backgrouпd-color:#CCC;

margiп: 1 Орх 20рх; border: 1 рх dotted #ООО; paddiпg: 5рх; }

} .tekst { paddiпg: 5px; backgrouпd-color:#FFOOOO; margiп:5px Орх;

</style> </head> <body>

<div id="spolja"> <div class="tekst">Ovo је пeki tekst</div> <div class="tekst">Ovo је пeki tekst</div>

</div> </Ьоdу>

</html>

Primer 38 . Graficki objekat kao liпk (Slika 28). Dati kod sпimiti pod пazivom ,.primer38.html " (bez zпakova пavoda)

<html> <head><title>Graficki objekat kao liпk</title>

<style type="text/css"> #buttoп { width: 1 2em;border-right: 1 рх solid #OOO;paddiпg: О О 1 em О;

margiп-bottom: 1 em;foпt-family: Arial; backgrouпd-color: #EF9COO; color: #3СООО5;}

#buttoп u l { list-style: пoпe;margiп:O;paddiпg: O ;border: попе;} #buttoп li {border-bottom: 1 рх solid #90bade;margiп: О;} #buttoп li а {display: Ыock;paddiпg: 5рх 5рх 5рх 0.5em;

border-left: 1 Орх solid # 1 958Ь7; border-right: 1 Орх solid #508fc4; backgrouпd-color: #2 1 7 5bc;color: #fff; text-decoratioп:пoпe; width:

100%;} #buttoп l i а {width: auto ;} #buttoп l i a:hover { border-left: 1 Орх solid # l c64dl ;border-right: 1 Орх solid #5ba3eO;backgrouпd-color: #2586d7;color: #fff;} </style></head>

32


<body> <div id="buttoп">

<ul> <li><a href="primerl .html">Prvi elemeпt</a></li> <li><a href="primer2.html">Drugi elemeпt </a></li> <li><a href="primer3.html">Treci elemeпt </a></li> <li><a href="primer4.html">Cetvrti elemeпt </a></li> <li><a href="primer5.html">Peti elemeпt </a></li>

</ul> </div>

<Љоdу> </html>

CSS pseudo elementi

Pseudo elemeпti se koriste da Ьi se dodali пeki "specijalпi" efekti па selektore.

selektor:pseudo-elemeпt { svoj stvo:vredпost; }

Primer 39.Pseudo elemeпt jirst-line CSS-a (Slika 29). Dati kod sпimiti pod пazivom ,,primer39.html " (bez zпakova пavoda)

<html> <head> <title> Pseudo elemeпti</title> <style type="text/css">

p:first-line {color:#ffOOOO;foпt-variaпt: small-caps;} </style> </head> <body>

<p>Pseudo elemeпt : first-liпe se koristi <br/> da Ьi se dodao ef ekat па prvu liпiju teksta.</p>

<Љоdу> </html>

Napomena: пеkа od ovih pseudo elemeпata Internet Explorer podrzava samo ako је defiпisaп ! DOCTYPE

33


Pseur1n clcmcnt1 - Moz1lftJ Bref .:J.gj� EJle f;dot �- � � Iools t

1 П Pseudo elementi +

PSEUDO ELEMENT ЛР,<;Т -UNE SE KOR!SТI da bi se dodao efekat na prvu hruju teksta.

811Za!llllllllll!l!ll:mi:!!I:tiE' l.:..JC1� Eie !i,dt !!Jew �tO<Y � IO<lls t

Pseudo elementJ +

Р seudo element first-letter se korisь da Ь1 prvo slovo teksta.

Slika 29. Upotreba pseudo elementa Slika 30. Upotreba pseudo elementa :first-line . Jirst-letter .

Primer 40.Pseudo element jist-letter (Slika 30). Dati kod snimiti pod nazivom "primer40.html " (bez znakova navoda)

<html><head> <title>Pseudo elementi</title> <style type="text/css">p:first-letter { color:#ffOOOO;font-size:xx-large;} </style> </head> <body>

<p>Pseudo element : first-letter se koristi da bi se dodao efekt па prvo slovo teksta. </р> <Љоdу> </html>

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

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 .0 Transitional//EN" "http://www . w3.org/ТR/xhtml 1 /DTD/xhtml 1 -transitional.dtd"> <html><head> <title> Pseudo elementi</title> <style type="text/css">

h 1 : before { content:url( slike/smiley.gif);} </style></head> <body><h l >Ovo је naslov</h l > <p>Pseudo element :before ubacuje sadrzaj pre tekuceg elementa </р> <h l >Ovo је naslov</h l ><p><b>Napomena:<Љ> <Љоdу> </html>

34

Praktifi.um iz Wеб dlzajna

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 .0 Transitional//EN" "http://www.w3.org/ТR/xhtml 1 /DTD/xhtml 1 -transitional .d td "> <html><head> <title>Pseudo elementi</title> <style type="text/css"> h 1 : after { content:ur 1( slike/smiley.gif); } </style></head> <body><h 1 >Ovo је naslov</h 1 > <p>Pseudo element :after ubacuje sadrzaj posle tekuceg elementa </р> <h 1 >Ovo је naslov</h 1 ><р><Ь> N apomena:<Љ> <Љоdу> </html>

Pozicioniranje elemenata

Pozicioniranje moze biti: );;>- Staticko - position:static );;>- Relativno - position:relative );;>- Apsolutno - position:abso/ute );;>- Fiksno - position:ftxed

Staticko pozicionira�je

Ovo vrsta pozicioniranja је podrazumevana za sve elemente HTML dokumenta.Elemementi se pozicioniraju ро redosledu elemenata.

Slika 3 1 . Staticko pozicioniranje elemenata.

3 5


Primer 43. Staticko pozicioniranj e elemenata (Slika ЗЈ). Dati kod snimiti рос nazivom "primer43.html" (bez znakova navoda)

<html> <head><title>Pozicioniranje elemenata putem CSS Staticko</title> <style type="text/css">

#sadrzaj { border: 1 рх solid #ООО; margin:40px; padding :30px;} #div-pre, #div-posle { background-color:#88d; color:#OOO; }

#div- 1 { width:400px; background-color:#OOO;color:#fff; } #div- 1 -padding { padding: lOpx; } #div- 1 а { background-color:#d33 ; color:#fff; }

#div- 1 Ь { background-color:#3d3 ; color:#fff; } #div- 1 с { background-color:#33d; color:#fff; } #primer div р { margin :O .25em; padding: .25em О; }

</style></head> <body><div id="sadrzaj "><! - -deo koji se ponavlja pocetak - -> <div id="primer">

<div id="div-pre"> <p>id = div-pre</p>

</div> <div id="div- 1 ">

<div id="div- 1 -padding"> <p>id = div- 1 </р>

<p>id = div- 1 а</р> <div id="div- 1 а">

<p>Ovo је neki tekst u okviru div-a sa id-em div- 1 а</р> </div> <div id="div- 1 Ь">

<p>id = div- 1 Ь</р> <p>Ovo је tekst,koj i se nalazi u pasusu diva koji ima id div- 1 Ь</р>

</div> <div id="div-1 c"><p>id = div- 1 c</p></div>

</div> </div> <div id="div-posle"><p>id = div-posle</p></div>

</div> </div><!-deo koji se ponavlja kraj - - > <Љody></html>

36


Relativno pozicioniranje

HTML elementi se pozicioniraju relativno u odnosu па 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 (Slika 32). Dati kod snimiti pod nazivom .primer44.html " (bez znakova navoda)

<html> <head>

<title>Pozicioniranje elemenata putem CSS Relativno</title> <style type="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:30px;} #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff;

position:relative; top:20px; left:-40px ; } #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33 ; color:#fff; } #div- 1 Ь { background-color:#3d3; color:#fff;} #div- 1 с { background-color:#33d; color:#fff; } #primer div р { margin:O .25em; padding: .25em О; }

</style> <Љеаd>

<body> <!-Ovde ide deo koda iz body dela primera 44 --><Љоdу> <Љtml>

Slika 32. Relativno pozicioniranje. Slika 33. Apsolutno pozicioniranje.

37


Apsolutno pozicioniranje

Elemeпt koji se pozicioпira apsolutпo је роz1сюпirап relativпo u odпosu па prvi roditeljski elemeпt Cije је pozicioпiraпje razlilito od static,a ako takav elemeпt пе postoji опdа se pozicioпiranje vrsi u odпosu па tag <html>.

Primer 45 . Apsolutпo pozicioпiraпje (Slika 33). Dati kod sпimiti pod пazivom ,primer45.html" (bez zпakova пavoda)

<html> <head><title>Pozicioпiraпje elemeпata putem CSS Apsolutпo</title>

<style type="text/css">

<Љеаd> <body>

#sadrzaj { border: 1 рх solid #ООО; margiп:40px; paddiпg:ЗOpx;} #div-pre, #div-posle { backgrouпd-color:#88d; color:#OOO; } #div- 1 { width:400px; backgrouпd-color:#OOO;color:#fff; } #div- 1 -paddiпg { paddiпg: 1 Орх; } #div- 1 а { backgrouпd-color:#d33 ; color:#fff; position:absolute;

top:O;right:O; width:200px; }

#div- 1 Ь { backgrouпd-color:#ЗdЗ; color:#fff; } #div- 1 с { backgrouпd-color:#ЗЗd; color:#fff; } #primer div р { margiп : O .25em; paddiпg: .25em О; }

</style>

<!-Ovde ide deo koda iz body dela primera 44 --> <Љоdу> <Љtml>

Fiksno pozicioniranje

Elemeпt sa ovom vrstom pozicioпiranja se pozicioпira realtivпo u odпosu па prozor browser-a. Koristi se za elemeпte koji moraju da budu staticпi prilikom skrolovaпja straпe. Internet Explorer podrzava fiksпo pozicioпiraпje samo ako postij i ! DOCTYPE .

38


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

<html><head><title>Pozicioniranje elemenata putem CSS F iksno</title> <style type="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:ЗOpx; height: 1500рх;} #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff;} #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33; color:#fff; position:fixed; top:O; right:O; width:200px;} #div- 1 Ь { background-color:#ЗdЗ ; color:#fff;} #div- 1 с { background-color:#ЗЗd; color:#fff;} #primer div р { margin:O .25em; padding: .25em О; }

</style> <Љead><body><!-Ovde ide deo koda iz body dela primera 44 -->

</Ьody></html>

Primer 47. KomЬinacija relativnog i apsolutnog pozicioniranja (Slika 34). Dati kod snimiti pod nazivom ,primer47.html" (bez znakova navoda)

<html><head><title>Pozicioniranje elemenata putem CSS</title> <style type="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:ЗOpx;}

#div-pre, #div-posle { background-color:#88d; co]or;.#000; } #div- 1 { width:400px; backgroundcolor:#OOO;color:#fff;position:relative;} #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33 ; color:#fff; top:O; right:O;

width:200px; position:absolute;} #div- 1 Ь { background-color:#ЗdЗ ; color:#fff;} #div- 1 с { background-color:#ЗЗd; color:#fff;} #primer div р { margin:O .25em; padding: .25em О; }

</style> </head> <body> <!-Ovde ide deo koda iz body dela primera 44 --> </Ьоdу> <Љtml>

39


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

<html><head><title>Pozicioniranje elemenata putem CSS</title> <style type="text/css">

#sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:30px ;} #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO; color:#fff;

position:relative; } #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33 ; color:#fff; top:O; left:O;

width:200px; position:absolute; } #div- 1 Ь { background-color:#3d3; color:#fff;top:O; righ t:O;

width:200px; position:absolute; } #div- 1 с { background-color:#33d; color:#fff; }

#primer div р { margin:O .25em; padding: .25em О; } </style><Љead> <body>

<!-Ovde ide deo koda iz body dela primera 44 --> <Љоdу>

<Љtml>

Sl ika 34. KomЬinacija relativnog i apsolutnog pozicioniranja.

Slika 35 . Dve kolone sa absolutnim poz1c10шranJem.

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

<html> <head><title>Pozicioniranje elemenata putem CSS</title>

<style type="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:30px;}

40

Praktifi.um iz Wеь dizajna

#div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff; position:relative; height:250px; } #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33; color:#fff; position:absolute; top:O; right:O; width: 200рх; } #div- I Ь { background-color:#ЗdЗ; color:#fff; position:absolute; top:O; right:O; width :200px; } #div- 1 с { background-color:#33d; color:#fff;} #primer div р { margin:O .25em; padding : .25em О; }


<!-Ovde ide deo koda iz body dela primera 44 --> <Љоdу>

<Љtml>

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

<html> <head>

<title>Pozicioniranje elemenata putem CSS</title> <style type="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:ЗOpx; } #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff; } #div- 1 -padding { padding: 1 Орх; } #div- l a{ background-color:#d33 ; color:#fff; float:left; width:200px; } #div- 1 Ь { background-color:#ЗdЗ ; color:#fff; } #div- 1 с { background-color:#33d; color:#fff; }

#primer div р { margin:O .25em; padding: .25em О ; } </style>

</head> <body> <!-Ovde ide deo koda iz body dela primera 44 --> <Љоdу>

</html>

4 1


Primer 5 1 . Prikaz dve kolone pomocu float - drugi naCin. Dati kod snimiti pod nazivom "primerSJ.html" (bez znakova navoda)

<html> <head>

<title>Pozicioniranje elemenata putem CSS</title> <style type="text/css">

#sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:ЗOpx; } #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff; } #div- 1 -padding { padding: 1 Орх; } #div- l a { background-color:#d33; color:#fff; float:left; width: 150px; }

#div- lЬ { background-color:#ЗdЗ; color:#fff; float:left; width:150px; }

#div-1 с { background-color:#33d; color:#fff;} #primer div р { margin:O .25em; padding: .25em О; } </style></head> <body> <!-Ovde ide deo koda iz body dela primera 44 --> <Љоdу> </html>

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

<html> <head>


#sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:ЗOpx;} #div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background-color:#OOO;color:#fff;} #di v- 1 -padding { padding: 1 Орх; }

#div- l a { background-color:#d33; color:#fff; float:left; width: 1 90px; }

#div- 1 Ь { background-color:#ЗdЗ ; color:#fff;float:left; width: 190рх; }

#div- 1 с { background-color:#33d; color:#fff; clear:both; }

#primer div р { margin:O .25em; padding: .25em О; } </style>

</head> <body><!-Ovde ide deo koda iz body dela primera 44 --><Љоdу> </html>

42

Praktikum iz WеБ dizajna

Preklapanje elemenata

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

<html> <head><title>Pozicioniranje elemenata putem CSS</title>

<style type;="text/css"> #sadrzaj { border: 1 рх solid #ООО; margin:40px; padding:30px;}

#div-pre, #div-posle { background-color:#88d; color:#OOO; } #div- 1 { width:400px; background:#OOO;color:#fff;position:relative; } #div- 1 -padding { padding: 1 Орх; } #div- 1 а { background-color:#d33 ; color:#fff;position:absolute; top:25px; right:Opx; z-index:2 ; } #div- 1 Ь { background-color:#3d3 ; color:#fff;} #div- 1 с { background-color:#33d; color:#fff;}

#primer div р { margin:O .25em; padding: .25em О; } </style><Љead>

<Ьody><!-Ovde ide deo koda iz body dela primera 44 --><Љоdу> <Љtml>

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

<html><head><title>Pozicioniranje elemenata putem CSS</title> <style type="text/css">

#sadrzaj {border: 1 рх solid #OOO;margin:40px;padding:30px; position:relative;color:#FFF;height:200px ;}

#sadrzaj div { height: 1 ООрх; } #sloj - 1 { position:absolute; top: 1 Орх; background-color:#OOO; } #sloj-2 { position:absolute; top:20px; background:#FFOOOO; z-index:2; } #sloj-3 { position:absolute; top:30px; background:#OOFFOO; z-index :3 ; }

</style> <Љead><body><div id="sadrzaj ">

<div id="sloj - 1 ">0vo је tekst koji se nalazi u sloju jedan</div> <div id="sloj -2">0vo је tekst koji se nalazi u sloju dva</div> <div id="sloj-3">0vo је tekst koji se nalazi u sloju tri</div>

</div> <Љodv><Љtml>

43


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

<html> <head>


#sadrzaj {border: 1 рх solid #OOO;margin:40px;padding:30px; position:relative; color:#FFF; height:200px;}

#sadrzaj div { height: 1 ООрх; } #sloj - 1 { position:absolute; top: 1 Орх; background-color:#OOO; } #sloj -2 { position:absolute; top:40px; left:SOpx; background-

color:#FFOOOO; z-index:-2; } #sloj-3 { position:absolute; top:30px; background-color:#OOFFOO; z

index:3 ; } </style>

</head> <body>

<div id="sadrzaj"> <div id="sloj - 1 ">0vo је tekst koji se nalazi u sloju jedan</div> <div id="sloj -2">0vo је tekst koji se nalazi u sloju dva</div> <div id="sloj-3">0vo је tekst koji se nalazi u sloju tri</div>

</div> <Љоdу>

</html>

Slika 36. Svojstvo overjlow .

44

Prafi.tikum iz Wеь dizajna

Primer 56. Overflow (Slika Зб). Dati kod snimiti pod nazivom ,primer56.html " (bez znakova navoda)

<html> <head>

<title>Overflow</title> <style type="text/css">

.prelaz_skrolovanje { width: l 50px;height: 1 50рх; overflow: scroll; background-color:#CCC;} .prelaz _skriven { width: 1 50px;height: 1 50рх; overflow:hidden; border: 1 рх

solid #FFOOOO;} </style>

<Љеаd> <body>

<div class="prelaz _ skrolovanje">Ovde dodati nekoliko redova teksta. </div> <div class="prelaz_skriven">Ovde dodati nekoliko redova teksta. </div>

</Ьоdу> <Љtml>

CSS u eksternom f ajlu

Do sada је css kod pisan u okviru HTML dokumenta, pored ovog nacina postoji i drugi koji se cesce 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.

<link rel=" stylesheet" type="text/css" href="stil.css">

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 postize: < !--[if lE verzija]>

<link rel="stylesheet" type="text/css" href="ie-css.css" /> <! [ endif]-->

45


Primer 57. Definisanje eksternog CSS. Dati kod snimiti pod nazivom ,.primer57.htmf' (bezznakova navoda) stil. css

body { font-family: Verdana;color: Ыuе; background-color: yellow;}

rлimer57.html

<html> <head>

<link rel="sty/esheet'' type="text/css " href= "stil.css"> </head>

<body> Dodela zute Ъоје pozadini i plave Ъој е tekstu ! <Љоdу> </html>

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

.naslov, .podnaslov, telo {font-face:Verdana; color:red; background:#707070; font-weight:bold ;} .naslov { font-size: 1 брt;} .podnaslov { font-size: 1 4pt; }

vrimer58.html

<html> <head>

<title>Primer 58</title> <link rel="sty/esheet" href="stil.css" type="text/css">

</head<body> <span class="naslov">lspis klasom naslov </span><br/> <div class="podnaslov">Ovaj podnaslov ј е ispisan <br/>

istoimenom klasom<br/>kojaje postavljena da deluje u tag DIV.</div> <tаЫе border="2">

<tr><td class="podnaslov">Prikaz u tabeli је pomocu klase :<br/> "podnaslov" .</td></tr>

</taЫe><hr/> <div class="telo">Centralni deo ispisan je klasom telo.</div> <hr/><Љody></html>

46


Svojstvo display

Primer 59. Primena svojstva display. Dati kod snimiti pod naz1vom primer59.html" (bez znakova navoda)

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

div { display: Ыосk; background-color: #FFOOOO; color:#FFF; border: l px solid Ыасk; margin: 5рх; padding: 5рх;}

li { display:inline-Ыock; width:70px; border: 1 рх solid #ООО ;} .vest{ display: inline; width: 1 50рх; background: #OOOOFF; color:#FFF;}

#tabela div { color:#FFF; background-color: #OOOOFF;} #tabela{ display: tаЫе; } #tabela .red { display: taЫe-row; }

#tabela .celij a { display: taЫe-cell; text-align: center; width :ЗOpx;} </style></head>

<body> <div id="prvi" class="Ьlok">Prvi</div> <div id="drugi" class="Ьlok">Drugi</div> <div id="treci" class="Ьlok"> Treci</ div> <div id="omot">

<div class="vest">Prva vest</div> <div class="vest">Druga vest</div> <div class="vest">Treca vest</div>

</div> <ul>

<li><a href="#">Link 1 </a></li> <li><a href="#">Link 2</a></li>

</ul> <div id="tabela">

<div class="red"> <div class="celija"> 1 </div> <div class="celija">2</div>

</div> <div class="red">

<div class="celija">З</div> <div class="celija">4</div>

</div> </div><Љody></html>

47


Izrada saЬlona (template-a) HTML strane pomocu CSS-a

Ovaj deo obuhvata primere koji pokazuju пасiпе kako se pomocu CSS moze uraditi orgaпizacija HTML elemeпata i па taj пасiп postiCi skladaп raspored elemeпata а samim tim izgled straпica Web sajta.

( �WiЖ:tJФ:51:J\!Юbuntu!;i)!!�E';. Cete:Ьr.tft�Wth thf1 nfiw officl>!!I Clщ1.esf! Yetsbn of Ubuntu

4ttE4';it"FltWbuntu > �ц!wnt.u O�troPCщif.ly)

ubuntu"'

'·••'''·iii.!!'' Super-fast and great-took1ng, Ubuntu is а Cre.зte!fьt ��or" best open�sourceexp.erts • secure, 1ntшt1ve operat1ng system that ��=��:�0r��ые powers desktops, servers, netbooks and tod'Y laptops. Ubuntu IS, and always w1ll Ье, wh;u<• Uwпtu? > absolutely fгее.

Jo1n the commun1ty ) Get support ) Ubuntu fог business ) eepнt of

g Get he'9Fнtfrom f) Secu�, re\1�Ь�:tnd • н1�thlnC�m1zln!I. uЬunt·Ju•eг tkence"free,

Jo!noџгcomrnunlt:y doc....,..ntкton•nd tndћe+!> bring Forum"oг!;aet �rywherelre

b1ttter.open-sour.:"' pгof"ss!on�1 u�lcig Ubuntu to 'oft:ow.n:tothe HIPPOrtfrom reduce CO•t• �nd

boost oerformtnce.

Slika 3 7 . Primer izgleda i orgaпizacije sajta.

Postupak za izradu sаЫопа:

48

1 . Potrebaп ј е dizajп јеdпе straпe kao uzorak (jpg,psd . . . ) 2 . Potrebпo је aпalizirati celiпe od kojih se sastoj i straпa 3 . Pogledati mere па uzorku glavпih elemeпata straпe 4. Pisaпje HTML koda sa div-ma tj . tagovima za orgaпizaciju strukture

straпe 5 . Pisaпje CSS koda

Praktikum iz 1Ve6 dizajna

Primer 60. Potrebno је napraviti strukturu HTML strane kao па Slici 38 (mera и pikselima). Za mere elemenata koristiti SajtOrganizacijal.psd

<html> <head><title>Organizacija sajta 1 </title><link rel="stylesheet"

href="stil.css" type="text/css"> <Љеаd> <body>

<div id="omot''> <div id="zaglavlje">

<h l >Naslov saj ta<Љl > </div> <div id="meni">

<span class="link"><a href="#">Link 1 </a></span> <span class="link"><a href="#">Link 2</a></span> <span class="link"><a href="#">Link 3</a></span>

</div> <div id="omotSredina''>

<div id="levaKolona"> </div> <div id="sadrzaj"> </div>

</div> <div class="cisti"></div> <div id="footer">

<hЗ>Ovo је f ооtеr<ЉЗ> </div>

</div> </Ьоdу>

<Љtml>

stil.css

* {margin:Opx; padding:Opx; } #omot{ width: 1 024рх; height: 1 ОООрх; margin:O auto ;} #zaglavlj е { width: 1 ОООрх; height:200px;border: 1 рх solid #ООО ;} #meni { width: 1 ОООрх; height:50px; border-bottom: lpx solid #ООО;

border-left: 1 рх solid #ООО; border-right: 1 рх solid #ООО;} #omotSredina {height:бOOpx;width: 1 OOOpx;border-bottom: 1 рх solid #ООО; border-left: 1 рх solid #ООО; border-right: 1 рх solid #ООО; }

49


#levaKolona {height: 600px;width: ЗОО рх; border-right: 1 рх solid #ООО; float:left;} #sadrzaj { height:бOOpx; width:700px ;} #fOoter {width: 1 ОООрх; height:50px; border-bottom: 1 рх solid #OOO;borderleft: 1 рх solid #OOO;border-right: 1 рх solid #ООО;} .sredina { width: 500px;margin: О auto;padding: 1 Орх;} . sredina span { margin:Opx 20рх ;} .cisti { clear:both; } h2,h3 { text-align:center;}

Naslov sajta

Lmkl I.fnk1 L1Dk3 """' LЬok!

Ovo је footer

Slika 38 . Struktura Web stranice, sa levom kolonom.

Primer 6 1 . Potrebno је napraviti strukturu HTML strane kao па Slici 39. Za mere elemenata koristiti Sajt0rf(anizaciia2.psd

<html> <head>

<title>Organizacija sajta 1 </title> <link rel="stylesheet" href="stil.css" type="text/css">

</head> <body>

<!-Deo koda iz tela(body-a) primera 59 - -> <Љоdу>

</html>

50


stil.css

* {margin:Opx; padding:Opx; } #omot{ width: 1 024рх; height : 1 ОООрх; margin:O auto; } #zaglavlje { width: 1 ОООрх; height:200px;border: 1 рх solid #ООО;} #meni { width: 1 ОООрх; height:50px; border-bottom: 1 рх solid #OOO;borderleft: 1 рх solid #OOO;border-right: 1 рх solid #ООО ;} #omotSredina {height:бOOpx;width: 1 OOOpx;border-bottom: 1 рх solid #OOO;border-left: 1 рх solid #OOO;border-right: 1 рх solid #ООО; } #levaKolona {height:бOOpx;width:ЗOOpx;border-left: 1 рх solid #ООО; float:right; } #sadrzaj { height:бOOpx; width:700px;} #footer{ width: 1 ОООрх; height:50px; border-bottom: 1 рх solid #ООО; borderleft: 1 рх solid #OOO;border-right: 1 рх solid #ООО ;} .sredina{ width :500px; margin:O auto; padding: 1 Орх;} .sredina span { margin:Opx 20рх ;} .cisti { clear:both; } h2,h3 {text-align: center;}

Naslov sajta

Linkl Link2 Link3 Link4 LinkO

Ovoje footer

Slika 39. Struktura Web stranice, sa desnom kolonim.

5 1

--

Praktikum iz VV еБ dlzajna

Primer 62. Potrebno је napraviti strukturu HTML strane kao па Slici 40. Za mere elemenata koristiti SajtOrganizacijaЗ.psd

<html> <head><title>Organizacija sajta 1 </title>

<link rel="stylesheet" href="stil .css" type="text/css"> <Љеаd> <body>

<div id="omot"> <div id="zaglavlje"><h2>Naslov sajta</h2></div> <div id="meni">

<span class="link"><a href="#">Link 1 </a></span> <span class="link"><a href="#">Link 2</a></span> <span class="link"><a href="#">Link 3</a></span>

</div> <div id="omotSredina">

<div id="levaKolona"></div> <div id="sadrzaj"></div> <div id="desnaKolona"></ div>

</div> <div class="cisti"></div> <div id="footer">

<hЗ>Ovo је footer<ЉЗ> </div>

</div> <Љоdу>

<Љtml>

stil. css

* {margin:Opx; padding:Opx; } #omot { width: 1 024 рх; height: 1 ОООрх; margin: О auto ;} #zaglavlj e { width: 1 ОООрх; height:200px;border: 1 рх solid #ООО ;} #meni { width: 1 ОООрх; height:50px; border-bottom: 1 рх solid #OOO;borderleft: 1 рх solid #OOO;border-right: 1 рх solid #ООО ;} #omotSredina {height:бOOpx;width: 1 OOOpx;border-bottom: 1 рх solid #OOO;border-left: 1 рх solid #OOO;border-right: 1 рх solid #ООО; } #levaKolona { height:бOOpx; width:250px;float: left;}

52


stil.css

#desnaKolona{ height:бOOpx; width:250px; float :left;} #sadrzaj { height:бOOpx; width:498px; f1oat : left; border-left: 1 рх solid #OOO;border-right: lpx solid #ООО ;} #footer {width: l OOOpx; height:50px; border-bottom: l p x solid #ООО; borderleft: 1 рх solid #ООО; border-right: 1 рх solid #ООО; }

.sredina{ width:500px; margin:O auto; padding: 1 Орх;}

.sredina span { margin:Opx 20рх;}

.cisti { clear:both; } h2,h3 { text-align:center;}

Naslov sajta

""" ' ..... . ,_, ....... ..... .

Ovo је footer -

Slika 40. Struktura strane sa tri kolone. -

Primer 63. Potrebno је napraviti strukturu HTML strane kao па slici 38 (mera u procentima). Za mere elemenata koristiti Sajt0rf(anizacijal.psd

<html> <head>

<title>Organizacija sajta 1 ,mere u procentima</title> <link rel="stylesheet" href="stil.css" type="text/css">

<Љеаd> <body> <!-Deo koda iz tela(Ьody-a) primera 59 - -><Љоdу>

<Љtml>

53


stil.css

* {margin:Opx; padding:Opx; } #omot{ width: 1 00%; height: 1 00%; margin:O auto;} #zaglavlje { width: 1 00%; height:20%;border: l px solid #ООО; } #meni { width: 1 00%; height:5%; border-bottom: 1 рх solid #OOO;borderleft: 1 рх solid #ООО; border-right: 1 рх solid #ООО ;} #omotSredina{ height:70%;width: 1 00%; border-bottom: lpx solid #OOO;border-left: 1 рх solid #OOO;border-right: 1 рх solid #ООО; } #levaKolona{ height: 1 00%; width:20%;border-right: l px solid #OOO;float:left; } #sadrzaj { height: 1 00%; width:80%; margin:O О О 20%;} #footer { width: 1 00%; height:5%; border-bottom: lpx solid #OOO;borderleft: 1 рх solid #ООО; border-right: 1 рх solid #ООО ;} .sredina { width:80%; margin:O auto; padding: 1 Орх;} .sredina span { margin:Opx 20рх; } .cisti { clear:both; }

Primer 64. Vertikalni meni pomocu neuredene liste. Dati kod snimiti pod nazivom " primer63.html " (bez znakova navoda)

<html> <head><title>Neurdjena lista 1 vertikalni meni</title> <style type="text/css"> ul { list-style-type:none;margin:O;padding:O;} а: link,a:visited { display: Ыосk; font-weight: bold; color:#FFF; backgroundcolor:# 1 О 1 Ofб;width: 1 20рх; text-align:center; padding:4px; textdecoration:none;text-transform:uppercase; } a:hover,a:active {background-color:#FFF ;color:#OOO; } </style><Љead> <body>

<ul> <li><a href="#linkl ">Link 1 </a></li> <li><a href="#link2">Link 2</a></li> <li><a href="#linkЗ">Link 3</a></li> <li><a href="#link4">Link 4</a></li> </ul>

<Љody><Љtml>

54


Primer 65. Horizontalni meni pomocu neuredene liste. Dati kod snimiti pod nazivom " primer65.html " (bez znakova navoda)

<html> <head> <title>Neurdjena lista 1 horizontalni meni</title> <style type="text/css"> ul { list-style-type:none;margin:O;padding: O;overflow:hidden; } li { fl oat: left;} a:link,a:visited { displa у: Ыосk; width: 1 20рх; font-weight: bold; color:#FFFFFF;background:# 1 О 1 fe5 ; text-align:center; padding:4px; textdecoration:none;text-transform:uppercase;} a:hover,a:active { background-color:#FFF; color:#OOO; } </style> </head> <body>

</Ьоdу> <Љtml>

<ul> <li><a href="#linkl ">Link 1 </a></li> <li><a href="#link2">Link 2</a></li> <li><a href="#linkЗ">Link 3</a></li> <li><a href="#link4">Link 4</a></li> </ul>

Primer 66. Galerija slika pomocu CSS-a (Slika 41). Dati kod snimiti pod nazivom " primer66.html " (bez znakova navoda)

<html> <head><title>CSS galerija slika</title> <style type="text/css"> div .slika { margin:2px;border: 1 рх solid #OOOOff;height: auto;wid th:auto;floa t: left; tex t-align: center;} div.slika img { display:inline;margin:Зpx;border: 1 рх solid #ffffff; } div.slika a:hover img{ border : 1 рх solid #OOOOff;} div.opis { text-align:center; font-weight:normal; width: 1 20рх; margin:2px;} </style></head>

55


<body> <div class="slika">

<а target="_Ьlank" href="#"> <img src="slike/galerija l .jpg" alt="Slika 1 " width=" 1 1 О" height="90" /> </а> <div class="opis">Dvorac 1 </div>

</div> <div class="slika">

<а target="_ Ыank" href="#"> <img src="slike/galerija2 .jpg" alt="Slika 2" width=" l 1 0" height="90" /> </а> <div class="opis">Dvorac 2</div>


<а target="_Ьlank" href="#"> <img src="slike/galerijaЗ .jpg" alt="Slika 3" width=" l 1 0" height="90" /> </а> <div class="opis">Potok</div>


<а target="_ Ьlank" href="#"> <img src="slike/galerija4.jpg" alt="Slika 4" width=" 1 1 О" height="90" /> </а> <div class="opis">Predeo</div>

</div> <Љоdу> </html>

Dvorac 1 Dvorac 2 Potok Predeo

4 1 . Galerija slika pomocu div-a i CSS-a.

56


Primer 67. Lista za navigaciju pomocu slika (Slika 42). Dati kod snimiti pod nazivom " primer67.html " (bez znakova navoda)

<!DOCTYPE html PUBLIC "-//WЗC//DTD XHTML 1 .0 Strict//EN" 'Ъttp ://www .wЗ .org/ТR/xhtml 1 /DTD/xhtml 1 -strict.dtd"> <html> <head><style type="text/ css"> #nav list {position:relative; } #nav list li { margin:O;padding:O;list-style:none;position:absolute;top:O ;} #navlist l i , #navlist a {height:44px;display:Ыock;} #home {left:Opx;width:46px; } #home { background:ur 1( slike/img_ па vigacij a.gif) О О;} #prethodni { left:63px;width:43px ;} #prethodni {background:ur 1( slike/img_ navigacij а .gif) -4 7 рх О;} #sledeci { left: 1 29px;width:43px;} #sledeci {background:url(slike/img_navigacija.gif) -91 рх О;} </style><Љead> <Ьоdу> <ul id="navlist"> <li id="home"><a href="#"></a></li> <li id="prethodni"><a href="#"></a></li> <li id="sledeci"><a href="#"></a></li>

</ul> <Љоdу> <Љtml>

+ + Slika 42. Navigacija

pomocu slika

Primer 68. Providnost elemenata. Dati kod snimiti pod nazivom ,.primer68.html " (bez makova navoda)

<html><head> <title>Providnost elemenata</title> <style type="text/css"> div. pozadina { width: 500px;height:250px; background:url(slike/galerija4.jpg) repeat; border:2px solid Ыасk; } div.providno { width:400px;height: 1 80px;margin:30px 5 Opx;backgroundcolor:#ffffff;border: 1 рх solid Ыасk;

/* za 1Е */filter:alpha( opacity=60); /* CSSЗ standard */opacity:0.6; }

div.providno р { margin:ЗOpx 40px;font-weight:bold; color:#OOOOOO;} </style><Љead>

57

Prafi.tifi.um iz Wеб dizajna

<body> <div class="pozadina"> <div class="providno"> <p>Ovo је neki tekst koji se smesten u providni element.</ р> </div> </div> </Ьоdу> <Љtml>

AtriЬuti kao selektori

Do sada su kao selektori korisceni uglavnom vrednosti atriЬuta id i class, mada је moguce koristiti i atriЬute elemenata kao selektore.

Sintaksa:

[ naziv atriЬuta operator vrednost] { svo jstvo:vrednost;}

Primer 69. AtriЬut kao selektor. Dati kod snimiti pod nazivom ,.primer69.html" (bez znakova navoda)

< !DOCTYPE html PUBLIC "-//WЗC//DTD ХНТМL 1 .0 Transitional//EN" "http://www .wЗ .org/TR/xhtml l /DTD/xhtml 1 -transitional.dtd"> <html> <head>

<style type="text/css"> [title] {color:Ыue;}</style> <Љеаd> <body>

<h2>Svoj stvo se primanjuje na:</h2> <hl title="Zdravo">Zdravo<Љl > <а title="ICT" href="http://www . ict.edu.rs">Visoka ICT</a>

<hr /><h2>Svojstovo se пе primenjuje na:<Љ2><p>ICT</p> <Љоdу> <Љtml>

58

Praktikum iz Web dlzajna

Primer 70.AtriЬut i njegova vrednost kao selektor. Dati kod snimiti pod nazivom " primer70.html " (bez znakova navoda)

<!DOCTYPE html PUBLIC "-//WЗC//DTD ХНТМL 1 .0 Transitional//EN" "http://www.wЗ.org/TR/xhtnill /DTD/xhtmll -transitional.d td "> <html> <head> <style type="text/css">[title=dvorac] {border:Spx solid green;}</style> <Љеаd> <Ьоdу>

<h2>Primenjuje se na:</h2> <img title="dvorac" src="slike/galerij a l .jpg" width="270"

height="50" /> <br /><а title="dvorac" href="#">Link</a> <hr /><h2>Ne primenjuje se nа:<Љ2> <р title="pozdrav">Zdravo !</p><a class="dvorac"

href="#"> Link</a> </Ьоdу> </html>

Primer 7 1 . OdaЬir elementa па osnovu vrednosti atriЬuta. Dati kod snimiti pod nazivom "primer71.html " (bez znakova navoda)

<!DOCTYPE html PUBLIC "-//WЗC//DTD ХНТМL 1 .0 Transitional//EN" "http://www .wЗ.org/TR/xhtmll /DTD/xhtml 1 -transitional.dtd"> <html> <head> <style type="text/css">[title-=zdravo] { color: Ыue;} </style> <Љеаd> <body>

<h2>Primenjuje se na:</h2> <h l title="zdravo studenti">Zdravo studenti<Љl > <р title="kolege zdravo">Zdravo CSS studenti ! <Љ l > <hr /><h2>Ne primenjuje se nа:<Љ2> <р title="student">Zdravo CSS studenti !</р>

<Љоdу> <Љtml>

59


Primeri sajtova formatirani putem CSS-a

Primer 72. Primer sаЫопа (Slika 43).

stil. css

f>rlmer sajta 1

Na<>lov

OvojeJ•dn1kr11k1 r•c•nlc1.0vaJ•J•dn1kr1tk1rei•nlc1.0va)cJ•dn10r1tk1 rt�onlc1.0vaJeJ•dn10r11k1rKcnlc1 Ovo)• J1dn1kr1lk1 r.C1nlc10>'oJ1J1dn1 Or1�k1r.C1nlc.a. OvaJej1dn1kr1•k1�onlc._ovaj1J1dn1kш01r�enlc1 OvoJ•J•dn1

Or.м:k11"31nlc10vaj1J•dn1kt11!t1 r8\':1nlc• O�aj1)8dn1kr.ik1 ...:1nlcLOvaJ1J•�"lk•1<k1 reё1"'cL Ovaje/Odn1k111ko r.C1nlcf._ Ova Ј• j1dn1kr 11k11oit •nlc._ Ovajtjed1U.krt1k 1 <e<cnкo.OvaJejed n1kr1101 r.Cco>lcL

Naslov -

Ovaj., J1dn1 katk1 r.C1nlc1 Ova J•J•dn1 krak1 ..Cenlca. Ova J•J•d n•k1.o1k1 r.C1nlca.Ovaj1Jed n1 k11tk1 r.C1nм:1 Ovo/o J1dn10шk11oc1nlc1 Ovaj8J1dn1kr 1tk1rot1nlc1. OvoJ•J1dn1kr�k1r"31nlc•Ova)•J•dn1 krt1k1 1...C:•n!c"ova)• J•dna

kra tka r.Cerщoa.OvaJ• Jtdna kra�k• r<lt•nlca.. Ova Је jl!tdna krtoka r<lt•ntca.OvaJe )•dna ir'"1k• r<lt•nic" Ova Је J•dna OratJo а r«•n!ca ovoJej•dna.kra1karot1nlca.o�aJeJednakrOfOa'8c•n�a.OvaJ•J•dnakr1.1kar"31nlca.

OvojeJ1dnakr.ikarot1nlca.OvoJ•J•dnakra.tka

r.Кenlca.Ova 1eJ•dna.kr.ika r.t•nlc&.OvOj8jtdnakr.aika ::::�Ovo}IJednakr&1karot1nlca.Ovoj1J•dnakr.ika

OvoJ•/ednakr.ika •<lt•nlca.OvoJ..J•dnak•••ka r<lt•nlca.OvoJol•dnakr.ika r"3•nlca.OVojeJ8dnakr.ika

r"31nlca. OvoJ•J•dnakr..ika1"3enlca.OVaJ•J•dnakradca ::::�:ovojeJ•dnakr.JJka <..C•nlci1.0YOJe/ednak raтka

Slika 43. Primer sаЫопа web straпe.

* { paddiпg: O;margiп: О;} body {foпt: . 8em "Lucida Saпs", "Trebuchet MS", Verdaпa, Arial, SaпsSerif;backgrouпd-image: url(slike/optsbg.gif);backgrouпd-repeat: repeat;} а { text-decoratioп: попе;соlоr: # ЗВ85СА;} a:hover { color: #ООО; } #wrap {margiп: 20рх auto;width: 700px;paddiпg: 1 Opx;backgrouпd-color: #fff;} #header {height : 90px;backgrouпd-color : #AODCF8;text-aligп:ceпter;} #header h 1 { paddiпg-left: 1 Орх; paddiпg-top: 1 2рх; foпt-size: 25рх; color: #3 1 799F; } #header h 1 а { foпt-size: 25рх; color: #3 l 799F; text-decoratioп: попе ;} #header h2 { paddiпg-left: 1 Орх; paddiпg-top: Орх; foпt-size: 1 4рх; color: #fff; } #meпu { text-aligп: ceпter; margiп-top: 1 Орх; foпt-size : 1 1 рх; paddiпg:2px; foпt-weight: bold; foпt-family:Arial, Helvetica, saпs-serif; border: Орх solid #D8ЕЗЕЕ; backgrouпd: #F9FCFC;} #meпu а {color : #ЗВ85СА; text-decoratioп : попе; paddiпg: 1 Орх;} #meпu a:hover { color : #000; }

60


stil.css

#content { text-align: left; margin-top: 5рх; padding: 1 Орх; font-size: 1 1 рх; } #content h2 { f ont-size: 1 5рх; color : #444; padding: О О 5рх О; } #footer { margin-top: 25рх; clear: both; text-align: center; color: #fff; font-size: 1 Орх; background-color:#AODCF8; padding:2px ;} .meta {padding-bottom:2px;font-size: 1 Opx;color:#999999; font:Arial, Helvetica, sans-serif; } #bottom { font-size: 1 1 рх ; padding: 1 Орх О О О; } #Ьottomleft { width:45%;float:left;background:#fff;paddingbottom: 1 Opx;padding-left:5px;} #Ьottomright { width:45%;float:right;background:#fff;paddingbottom: 1 Opx;padding-right: 5px;} #divider { text-align: center;font-size : 1 1 px;padding:2px;font-weight: bold; font-family:Arial, Helvetica, sans-serif; }

primer72.html

<!DOCTYPE html PUВLIC "-//WЗC//DTD XHTML 1 .0 Strict//EN" 'Ъttp://www .wЗ .org/ТR/xhtmll /DTD/xhtml l -strict.dtd"> <html xmlns="http://www . wЗ .org/1 999/xhtml "> <head> <title>Primer sajta I</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <meta http-equiv="Content-Type" content="textЉtml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="stil.css" media="screen" /> <Љead><body> <div id="wrap"> <div id="header">

<h l ><а href="#">Primer sajta 1</а><Љ 1 > <h2>Kratak opis sajta. </h2>

</div> <div id="menu"> <а href="#">Pocetna</a> <а href="#">O sajtu </а> <а

href="#"> Kontak</ а></ div> <div id="content">

<h2><a href="#">Naslov</a></h2> <р class="meta"> 1 9. 1 1 .2006</р> <р> Ovde postavite neki tekst.</p><p> </p>

6 1


<р><а href="#"> Detaljnij е . . . . </а></р> <p> </p> <h2><a href="#"> N aslov</a></h2> <р class="meta"> 1 9. 1 1 .2006</р> <p>Ovde postavite neki tekst.</p> <p> </p> <р><а href="#">Detaljnije . . . . </a></p>

</div> ·

<div id="divider">» <а href="#">Link</a> » <а href="#">Link</a> » <а href="#">Link</a> » <а href="#">Link</a> » <а href="#">Link</a></div>

<div id="bottom"> <div id="bottomleft">Ovde postavite neki tekst.</div> <div id="bottomright">

<div id="div2">0vde postavite neki tekst.</div> </div>

</div> <div id="footer">Laboratorijske vezbe <а

href="http://www . ict.edu.rs">Visoka ICT</a><a href="#"></a>. </div> </div> <Љоdу> </html>

62

l,1nt;ovJ 11

Linkov1 IJI

"'"'

Primer sajta П

Naslov 0...0Je)edn&Jldnost1.vn1. recen1c1. 0voJ1. Jednll.Jldno�& Гl!cen1c4.0\IOJe Jedn11 Jedno�1.rece111c110vuJe Jedn1.J1dnosl&.'n&recen1ca.0...0 J eJedn1.JldnoR11Vn& re<:en1c11 � 0vu J1Jedщ1 Jed"05tt1vn1. r1cen1c.a-OvoJ1J1dn1. Jldnosr,,\ю4 re<"1'1•�&Ql/'tlJeJedn1.Jedno$t"vn1. recenic1100fl!JeJedn&J1dno�vn11 recen•ca.Ovo JIJldn•Jedno5tlWn&recenic&

" Оvојб" Jeclnaj('dnoя3\lf'la recenk"4..

OVOJl! J•dn• J•dno«&vn•rec••�c• OwJe J•dn•J•dno<«•vn•r•c•noc&.Owo;e J•dn•

Jl!dno5\�ri• recen•ca.Ov-> Је Jldn& Jedno5t&vn& recen"• Ovo Је Jldn1.11dnOЯ4Vni>. recentc4-0vo JeJedn& Jednos11.vn1. rec1n1ca.�D.t.li1.Jinl< OvoJe Jedn& Jednos1"vnarec1n1ca.Ovo1e .iedn4J1tdno$цvn11recenJc& ()./0JeJedn& Jednost1.vn1. recenica.O..o )eJedмJednostavrl1. recerж..._ OvoJe Jedn& Jea,ostavna recer11ca.O.o Jt:Jedna J1dnost&-,ma r11cenoc..._o"0Je 1edri.1.J'l!dnosta�'l'l& recen1c..._

Naslov 1

OvoJe Jed""Jednosuma recerwc<>.Ovo Је Jedna Jtdnost1.vn!t. recen1c& Ovo Је Jedna jea,ost11un11 recl!f'loca.Cnro Је �dr."Jednoя...,na recerжa Ovo Jlt Jedna JednO$t.lt•nll recenic..._OvuJtJIOn1.;edno::uvn4r1cen1[&0\/0Jt Jedn4 Jtdnostavnarecenoa O..o Je Jedn4 )1tdnostdVn& recen1ca.OvoJe J1dn11 J1dno:rt&vn11recerмca

• Suvt<.1. 1

Slika 44. Primer strane sa levom kolonom.

Praktikum iz 'Web dizajna

Priтer 73. Priтer sajta forтatiraпog CSS-oт (Slika 44). stil. css

* {тargiп: O;paddiпg: О;} а { color: #36С;} a:hover { color: #06F;} body {backgrouпd: #ЕЕЕ url(slikeЉg.gif);color: #444; foпt: поrтаl 62.5% "Lucida Saпs Uпicode",saпs-serif;тargiп: О;} iпput { color: #555;foпt: поrтаl 1 . 1 ет "Lucida Saпs Uпicode",saпs-serif;} p,cite,code,ul { foпt-size: l .2eт;paddiпg-bottoт: 1 .2ет;} h1 { foпt-size: 1 .4eт;тargiп-bottoт: 4рх;} code { backgrouпd: url(slikeЉgcode.gif); border: 1 рх solid #FOFOFO; border-left: 6рх solid #39F;color: #555;display: Ыock;foпt: поrтаl 1 . 1 ет "Lucida Saпs Uпicode" ,serif; тargiп-bottoт: 1 2px;paddiпg: 8рх l Opx;white-space: pre;} cite {backgrouпd: url(slike/quote.gif) пo-repeat;color: #666;display: Ыосk; foпt: поrтаl 1 .Зет "Lucida Saпs Uпicode",serif; paddiпg-left: 28рх;} hl ,h2,h3 { color: #367EA6;paddiпg-top : 6рх;} .clearer { clear: both; } .coпtaiпer {backgrouпd: url(slikeЉgcoпtaiпer.gif) repeat-y;тargiп: О auto; paddiпg-bottoт: 6рх; width: 767рх ;} .header {backgrouпd: url(slikeЉeader.gif) repeat-x;} .title h 1 { color: #FFF;foпt: поrтаl З ет Verdaпa,saпs-serif; height: 1 50px;liпe-height: 1 50px;тargiп-bottoт: 8рх; text-aligп: ceпter; } .пavigatioп {тargiп-bottoт: 4рх ;} .пavigatioп а { backgrouпd-color: #4А9 1 СЗ ; color: #FFF; float: left; foпt: bold 1 .2ет "Trebuchet MS" ,saпs-serif; paddiпg: 8рх O;width: 1 9%; border-right: 1 рх solid #FFF; text-aligп: ceпter; text-decoratioп: попе;} .пavigatioп a:hover {backgrouпd-color: #OOO;color: #FFF;} .таiп { clear: both;paddiпg: 8рх 1 8рх; } .sideпav h l , .sideпav ul {paddiпg-left: 1 2рх;} .sideпav {backgrouпd: #EEE;border: 1 рх solid #E5E5E5;float: left;width: 200рх;} .sideпav h 1 { color: #666;foпt-size: l .2eт;height: 20px;тargiп-top: 1 .2ет;} .sideпav ul {border-top: lpx solid #FAFAFA;backgrouпd: url(slikeЉgul.gif) repeat-x; тargiп: О; paddiпg: О;}

63


.sideпav li { border: 1 рх solid #F AF AF А; border-top: попе; list-style: попе; margiп: О;} .sideпav li а { color: #777;display: Ыосk; foпt-size: 0 .9em; paddiпg: 3рх 6рх 3рх 1 4px;text-decoratioп: попе; } .sideпav li a:hover { color: # 1 1 1 ; } .сопtепt { float : right; width: 520рх;} .сопtепt . item {paddiпg: 6рх 1 2рх; border: 1 рх solid #ЕЕЕ; backgrouпd: #FFF; margiп-bottom: 8рх ;} .сопtепt .descr {color: #333; margiп-bottom: 6рх;} .сопtепt l i { list-style: url(slike/li.gif); margiп-left: 1 8рх;} form {paddiпg: О О 6рх 8рх;} .styled {border: 1 рх solid #DDD;paddiпg: 4рх ;} .buttoп {backgrouпd: url(slike/search.gif) пo-repeat left bottom;border: попе; height: 27рх; width : 27рх;} .footer { backgrouпd: #FFF; border: 1 рх solid #ЕЕЕ; color: #666; foпtsize: 1 . 1 ет; margiп: О auto; text-aligп: ceпter;paddiпg: 6px;width: 720рх;} .footer а {color: #36C;text-decoratioп: попе;} .footer a:hover {color: #06F;text-decoratioп: uпderliпe;}

'Jrimer73.html

<html><head> <meta http-equiv="coпteпt-type" coпteпt="text/html; charset=utf-8"/> <meta пame="descriptioп" coпteпt="descriptioп"/> <meta пame="keywords" coпteпt="keywords"/> <meta пame="[email protected]" сопtепt=" author"/> <liпk rel="stylesheet" type="text/css" href="stil.css" media="screeп"/> <title>Primer sajta 11</title></head> <body><div class="coпtaiпer">

<div class="maiп"> <div class="header">

<div class="title"><hl >Primer sajta 11</h l ></div> </div> <div class="coпteпt">

<div class="item"><hl >Naslov<Љl > <div class="descr">Juп 1 3, 20 1 0 </div> <p>.Ovo је јеdпа jedпostavпa receпica.</p>

<cite>Ovo је јеdпа jedпostavпa receпica.</cite><p>Ovo ј е јеdпа jedпostavпa receпica.</p>

64

Praktifi.um iz Wеь diza:.fna

</div> <div class="item">

<hl >Naslov 1 </hl > <div class="descr">Jun 1 1 , 20 1 0 </div> <p>Ovo је jedna jednostavna recenica</p>

<ul>

</ul>

<li>Stavka 1 </li> <li>Stavka 2</li> <li>Stavka 3</li>

<p>Ovo је jedna jednostavna recenica.</p> </div>

<div class="item"> <hl >Naslov 2</h l > <div class="descr">May 24, 20 1 0</div> <p>Ovo је jednajednostavna recenica . . </ р>

<code>margin-bottom: 1 2px;font: normal 1 . 1 ет "Lucida Sans Unicode" ,serif; background: url(slike/quote.gif) no-repeat;padding-left: 28px;color: #555;</code> <p>Ovo је jedna jednostavna recenica.</p>

</div> </div>

<div class="sidenav"> <hl >Linkovi I</h l >

<ul> <li><a href="#">link 1 </a></li> <li><a href="#">link 2</a></li>

</ul> <h l >Linkovi 11</h l >

<ul>

</ul>

<li><a href="#">link 1 </a></li> <li><a href="#">link 2</a></li>

<h 1 > Linkovi Ш </h 1 > <ul>

</ul>

<li><a href="#">link 1 </a></li> <li><a href="#">link 2</a></li>

65


<h 1>Pretraga<Љ1 > <form action="#">

<div><input type="text" name="search" class="styled" /> <input type="submit" value="" class="button" /></div>

</form> </div>

<div class="cl earer"><span></span></ div> </div> <div class="footer">© 201 1 <а href="#">Website. com</a>.

Laboratorijske vezbe <а href="#">CSS</a> & <а href="#"> XHTML</a>. Visoka <а href="#">ICT</a>

</div> </div> <Љоdу>

Prlшi-r sa jt.1 Ш ()vo Је prlmer

PoCetnAstrana · Nalante se ovde

Ovo је naslov Ovo је .iedna Jednostavna reC:ernca Ovo Jt Jedna je:dn()stavna

re-Cemca Ovo Је Jedna Jednostavna rеСешса. Ovo Је Jedna

jednostavna reC:entca. Ovo уе Jedna Jednostavna reC:emca.Ovo

Је Jedna jedoostavna reC:entca Ovo Jt Jedna jednostavna

reC:entca.Ovo Је Jednajednostavna reC:en1ca Link. test ka sajtu.

LaboratonJSke vtiЬe Web diza.Jfl

N�cija • Lnk 1 • Lnk 2 • I..nk 3 • I..nk 4 • Linlt 5 • Lшk 6 • Link 7 • I..nk 8

Slika 45. Primer organizacije elemenata .

Primer 74. Primer sajta formatiranog pomocu CSS-a (Slika 45).

66

-

Praktikum iz Wel? dlzajna

stil. css

* {paddiпg: O;margiп: О;} body {backgrouпd: #fff; foпt: . 74em "Trebuchet MS" Verdaпa, Arial, saпsserif; liпe-height: l .5em; } а {color: #3B6EBF;text-decoratioп: попе;} a:hover {text-decoratioп: uпderliпe;} #wrap { margiп: 20рх auto; width: 724рх; backgrouпd: #fff url('slike/midd.jp g'); backgrouпd-repeat: repeat-y;} #top { backgrouпd: #fffurl('slike/topp.jpg'); height: 26рх; } #сопtепt { paddiпg: О 40рх О 40рх; } #bottom { backgrouпd: #fff url('slikeЉott.jpg'); height: 20рх;} .header { height: 1 ООрх; backgrouпd: #85ACF7 url('slikeЉidr.jpg'); } .header h 1 { paddiпg-left: 1 7рх; paddiпg-top: 22рх; foпt-size: 22рх; color: #FFF; } .header h 1 а { foпt-size: 22рх; color: #FFF; text-decoratioп: попе;} .header h2 { paddiпg-left: 1 7рх; paddiпg-top: Орх; foпt-size: 1 7рх; color: #FFF; } .breadcrumbs { backgrouпd: #F6F9FB; border-bottom: 1 рх solid #Е 1 Е 1 Е 1 ; paddiпg: 5рх;} .middle { float: left; width: 59%; margiп: О 1 Орх; paddiпg: 1 % 1 %; textaligп: justify; } .right { float: left; width: 30%; margiп: О 1 Орх; paddiпg: 1 % 1 %; } .right ul { paddiпg: 20рх О 1 5рх 20рх; margiп:O; } .right li { margiп-bottom:5px; list-style-type: square; color: #ЗВ6ЕВF;} .middle h 2 { color: #ЗВ6ЕВF; foпt-size: 1 6рх; margiп-bottom: 1 Орх; margiп-top: 1 Орх;} .right h2 { color: #ЗВ6ЕВF; foпt-size: 1 4рх; margiп-top: 1 5рх; } #clear { display: Ыосk; clear: both; width: 1 00%; height: 1 рх; overflow:hiddeп; } #footer {text-aligп: ceпter; color: #666; }

'Jrimer74.html

<html><head> <title>Primer saj ta 111</title> <meta http-equiv="Coпteпt-Laпguage" coпteпt="Eпglish" /> <meta http-equiv="Coпteпt-Type" coпteпt="textЉtml; charset=UTF-8" />

67


<link rel="stylesheet" type="text/css" href="stil.css" media="screen" /> </head> <body> <div id="wrap">

<div id="top"></div> <div id="content"> <div class="header"> <h l ><a href="#">Primer sajta III</a></h l > <h2>0vo ј е primer</h2> </div> <div class="breadcrumbs"> <а href="#">Pocetna strana</a> · Nalazite se ovde </div>

<div class="middle"> <h2>0vo је naslov</h2>0vo је jedna jednostavna recenica.Ovo ј е jedna jednostavna recenica.Ovo је jedna jednostavna recenica. <а href="#">Link test ka</a> sajtu. <br /><br /><img src="slike/minimal .jpg" alt="slikal " /> </div> <div class="right"> <h2>N avigaci ja</h2> <ul>

</ul> </div>

<li><a href="#">Link 1 </a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li>

<div id="clear"></div> </div> <div id="bottom"></div>

</div> <div id="footer">Laboratorijske vezbe <а href="#">Web dizajn</a></div> <Љоdу> </html>

68


Primer 75. Primer sajta formatiraпog pomocu CSS-a (Slika 46). 1 - - -' Primer Sa)ta IV -:_:-.с:_:,'

stil. css

. . ' . '6* Naslov sadrzaja

:::::: •. ""'"°"'""-•)

- i-...... -ko, " _ " 18 .... k .... •J ,.,._")"" ........ � -.... - - -

СМ1 � ·�·°'"'8drlа.--.О•0Јt1�.-.цо.о ,..._,.-.ц.о.о�па� o.o�.--.o.o,..irц. .--o.oil'O)U.-- O•o.18dn•.--hooJ� .__.o,o �.-.ц 0•11�.-- a.o�.-- Ooo d'\:.-O•OJ8"•.--.0.0 J�- ovol8dn•.-.ц.o."��.aJМn:o�O•oJ8!i'l.>.-.ц

O.. )llllna�J8(1r.o".....,.. a.0Jt1.W..".....,.. o.a�".....,...

Centralni naslov sadrzaja O•Oleod.,.,,_.ц.o.o� --U O..,, J•dna.-- o. a � � °' " � . -- 000�.-.ц,O.Q,...ana ,_,.,._°"" _... _ O'ffl )Мlr>ll ,_..., '>o-o ,..._ ,_.,.°""iadn.o,...<:rfll<i> CМ11odn•1_,,..,, o.a�f'8al,,..,. Oro ,.dr\3<eaonou.O•o\8<1'>�r..,.�""' O.a!ldr>a� Ovo J11"'1•rJ1'81'"30\fCIJ8dtl.J.'8.....,.. O•aJ•<ln.1'818nC.11.0YoJ•dnarece"u O•OJ�rwto>r>Cl.O.Di-dn• •-*"O•<>J•<fn•"""a.O•OJ8dПa tl!tenr�

O•OJ�M•� O•OJ8dПa!'l'C8ПICI O•aJ•<И•rw<'lllllCl .... O}l'dn•re.иno" O•otodn•� O•c)Юnarwa>r>Cl.O•oJ•dn• ",,.,,....,о.,,...- .._,.,. Oн1Jldna ....,.,,QO•O J•dna �.Ova 11<1<>a rwaor>e1Cl<11 !IКl""r•.,..,o::• O•oJ&dn• rllC8rilc.ilo.0•D jedna rect'l><oi..O•o;Jcn.rwa>»CIO•oJ•dn•-.._0,o;l!t:n• r•<8М'l0.,,J•<Jn• ,_,loo O•O;Jt:n8�0•0 1•�n•r�'*"',,. O•oJ•<lnorrg.,......,, 010J•dn�rwt8"°" O•oledn1r1"r'llUO•O;ot:n•rwt8"°"

Slika 46 - Primer straпe sa dve koloпe.

нн �_�м.:; :.:::: � ....... " ... _ .. "' " ":"�::..:::

._. .:... ,.-. ... _ о.. ___ "- - - - --

··-... ......-.... .. � .,..,,... •• 1. o•ioo• - ,..\!о." ..... " - � -- "'* - - -

'*ili'l!!F"*

body { text-aligп: ceпter; margiп-top: 1 Орх; margiп-bottom: 1 Орх; color:#666666; backgrouпd-color: #ЕОЕОЕО;} a:liпk { color: #OOOOFF; text-decoratioп: попе;} a:visited {color: #OOOOFF; text-decoratioп: попе;} a:active { color: #OOOOFF; text-decoratioп: попе;} a:hover { color: #FFOOOO; text-decoratioп: uпderliпe; } #page_ wrapper { margiп-left: auto; margiп-right: auto;width: 98%; textaligп: left; backgrouпd: #FFFFFF; border: 8рх solid #FFFFFF;} #header_ wrapper { backgrouпd: #4E7DD1 url(' . ./slike/meпu_bg.gif) bottom left repeat-x;margiп:Opx; paddiпg:Opx;} #header {height: 60рх; paddiпg: 1 5рх; backgrouпd: url(' . ./slikeЉeader _ bg.gif) top right пo-repeat;margiп:Opx; } #header h 1 { margiп:Opx; foпt-family: verdaпa, arial, saпs-serif; foпt-size: 28рх; color:#ffffff;letter-spaciпg: - 1 рх; } #header h2 {margiп:Opx; foпt-family: Verdaпa, arial, saпs-serif; foпt-size: 1 4рх; color:#B 1 C6EB;letter-spaciпg: 1 рх; } #left _ side { margiп-top: 1 Орх; float: left; width: 1 60рх; backgrouпd: #F 1 F6FE url(' . ./slike/side_bg.gif) bottom left repeat-x; }

69


#right_ side { margiп-top: l Орх; float: right; width: 1 бОрх; backgrouпd: #Fl FбFE url(' . ./slike/side _ bg.gif) bottom left repeat-x; } #сопtепt { margiп-top: 20рх; margiп-bottom: Орх; margiп-left: 1 80рх; margiп-right: 1 80рх;} #footer { height: 50рх; backgrouпd-color: #4E7DD 1 ; clear: both; textaligп: ceпter;paddiпg-top : 1 2px; color: #B6CEF9; foпt-family: Verdaпa, arial, saпs-serif; foпt-size: 1 1 рх; liпe-height: 1 8рх;}

#footer a: liпk { color: #FFFFFF; text-decoratioп: попе;} #footer a:visited { color: #FFFFFF; text-decoratioп: попе ;} #footer a:active { color: #FFFFFF; text-decoratioп: попе;} #footer a:hover { color: #FFFFFF; text-decoratioп: uпderliпe;} #left _ side р, #right _ side р { margiп: 1 Opx;margiп-top : 1 5px;margiпbottom: 1 5рх; foпt-family: verdaпa, arial, saпs-serif; foпt-size: l lpx;liпeheight: l брх; color: #333333; }

#left_side h3, #right_side h3 { margiп-top: 5px; margiп-bottom: l Орх; margiп-left:5px; margiп-right:5px; paddiпg:4px;foпt-family: verdaпa, arial, saпs-serif; foпt-size: 1 4рх; foпt-weight: bold;liпe-height: 1 4px;color: #FFFFFF; border: l рх solid #OF397 4;backgrouпd-color: #2 1 5 3АА; } #left_side h4, #right_side h4 { margiп-top:Opx;margiп-bottom:Opx;margiпleft: l Орх; foпt-family: verdaпa, arial, saпs-serif; foпt-size: 1 2px;foпtweight: bold;liпe-height: 1 2px;color: #2 1 53АА; } #сопtепt р { margiп-top: 1 5рх; margiп-bottom: 1 5px;foпt-family: verdaпa, arial, saпs-serif; foпt-size: 1 2px;liпe-height: 1 8px;color: #333333;} #сопtепt h3 { margiп-top: 5px; margiп-bottom: l Орх; foпt-family: Verdaпa, arial, saпs-serif;foпt-size: 1 8px;foпt-weight: bold;liпe-height: 1 8px;color: #2 1 53АА; }

#сопtепt h4 { margiп-top:Opx;margiп-bottom:Opx;foпt-family: verdaпa, arial, saпs-serif;

foпt-size: 1 4px;foпt-weight: bold;liпe-height: 1 2px;color: #21 53АА;} #пavlist { margiп-top: 1 px;margiп-bottom:Opx;text-aligп:ceпter;paddiпg: 5рх О; margiп-left: O;border-bottom: l рх solid #OF397 4;foпt: bold 1 4рх Verdaпa, saпs-serif; } #пavlist li { list-style: пoпe;margiп : O;display: iпliпe;}

70

Praktifi.um iz Wеь Шzајпа

#пavlist li а { color: #F 1 FбFE; paddiпg: 5рх 1 5рх; margiп-left: 3рх; border: 1 рх solid #OF397 4; border-bottom: попе; backgrouпd: #2 1 53АА url(' "/slike/tab _ bg.gif) bottom left repeat-x;

text-decoratioп: попе;} #пavlist l i a: liпk { color: #F 1 FбFE; } #пavlist li a:visited { color: #F 1 FбFE; } #пavlist li a:hover{ color: #FFFFFF; backgrouпd: #3364BB;border-color: #OF3974; } #пavlist 1 i a#curreпt { color: #ООО; backgrouпd: #FFFFFF; border-bottom: 1 рх solid #FFFFFF;} . float_left { f1oat: left; margiп-right: 1 Орх; } .float_right { f1oat: right; margiп-left: l Opx; } . featurebox _ ceпter { backgrouпd-color: #fffffб; margiп: Орх; paddiпg: 1 Орх; border: 1 рх solid #DFE8F7; foпt-family: verdaпa, arial, saпs-serif; foпt-size: l lpx; liпe-height: 1 8рх; color: #333333 ; }

.featurebox_side {backgrouпd-color: #fffffб; margiп:Opx l Opx 1 5рх l Opx; paddiпg : 1 Орх; border: 1 рх solid #DFE8F7; foпt-family: Verdaпa, arial, saпs-serif; foпt-size: 1 1 рх; liпe-height: 1 8рх; color: #333333;}

vrimer7 5. ht ml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 .0 Traпsitioпal//EN" "http ://www .w3.org/TR/xhtml l /DTD/xhtml 1 -traпsitioпal.dtd"> <html xmlпs="http://www.w3.org/ 1 999/xhtml"> <head> <meta http-equiv="Coпteпt-Type" coпteпt="text/html; charset=utf-8" />

<meta пame="descriptioп" coпteпt="Kratak opis straпe. " /> <meta пame="keywords" coпteпt="lista kljucпih reci razdvojeпih zarezom" /> <title>Primer sajta IVI Web dizajп</title> <liпk href="css/stil .css" type="text/css" rel="stylesheet" />

<Љead><body> <div id="page _ wrapper">

<div id="header _ wrapper"> <div id="header">

7 1

Praktikum iz Web dtzajna

<h 1 >Primer<font color="#FFD F8C"> sajta IV </font></h 1 > <h2>0vo ј е primer jednog sajta</h2>

</div> <div id="navcontainer">

<ul id="navlist"> <li id="active"><a href="#" id="current">Link 1 </a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li>

</ul> </div>

</div> <div id="left side">

<hЗ> Leva strana 1 </hЗ> <p>Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link

<а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta.</p> <hЗ>Leva strana 11</hЗ>

<div class='featurebox_side'>Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta.Ovo jedna recenica </div> <p>Ovo ј е jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta.Ovo jedna recenica.<a href="#">Link</a> Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.</p> <div class='featurebox _ side'>Ovo ј е jedan <а href="#"> link</a> koj i ј е sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta.Ovo jedna recenica </div> </div><div id="right_side"><hЗ>Desna strana 1</hЗ> <p>Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta. Ovo jedna recenica </р>

72


<div class='featurebox side'> Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.</div> <h4> Podnasl ov</h4> <p>Ad splendide <а href="#">quaerendum</a> per, еа minimum officiis oportere vel, anhas perpetua percipitur. Consequat contentiones his te, id <а href="#">noster</a> menandri his. Per partem perfecto eu, est soluta accusata ех.</р> <hЗ> Desna strana 11 </hЗ> <div class='featurebox side'> <а href="#">Lorem ipsum</a> summo nominavi pri et. Stet eruditi perfecto at sed, ad enim constituto deseruisse quo, mea по quem eros munere. </div> <p>Ovo је jedan <а href="#">link</a> koj i је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta. Ovo jedna recenica.<a href="#">Link</a> Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru saj ta. Ovo jedna recenica.<a href="#">Link</a> Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. </р> </div> <div id="content"> <hЗ>Naslov sadrzaja</hЗ> <div class='featurebox_center'> Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi u okviru sajta.

73


Ovo jedna recenica.</div><p>Ovo је jedan <а href="#">link</a> koji је sastavni deo. Link <а href="#">vodi</a> ka nekoj strani koja se nalazi и okviru sajta.Ovo jedna recenica.<a href="#">Link</a> Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.<a href="#">Link</a> Ovo jedna recenica.Ovo jedna recenica.</p> <h4>Podnaslov<Љ4> <p>Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. </р> <p>Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. </р> <hЗ>Centralni naslov sadrzaja<ЉЗ> <p>Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna rесешса. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna <а href="#"> recenica</a>.Ovo jedna recenica.</p> <p>Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna rесешса. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica.Ovo jedna recenica. Ovo jedna recenica.Ovo jedna recenica.Ovo jedna <а href="#">recenica</a>.Ovo jedna recenica.</p> </div> <div id="footer"> <а href="#">Link 1 </а> 1 <а href="#">Link 2</а> 1 <а href="#">Link 3</а> 1 <а href="#">Link 4</а> 1 <а href="#">Link 5</а> <br />Web dizajn,Laboratorij ske vezbe<a href="#" target="_Ыank">Visoka ICT</a> </div></div> <Љоdу> <Љtml>

74

Pog{avij·e 111

Jff�L formufari •

l

mu{timedija

Prafi.tifi.um iz VV еб dlzajna

HTML formulari

Primer 76. HTML formular (Slika 4 7) . Dati kod snimiti pod naz1vom " primer76.html " (bez znakova navoda)

<html> <head> <title>HTML formular</title><Љead> <body>

<form> <tаЫе>

<tr> <th colspan="2" align="center" >Registracija korisnika</th>

</tr> <tr>

<td>Ime:</td> <td><input type="text" name="tЫme" id="tЫme" /></td>

</tr> <tr>

<td>Prezime:</td> <td><input type="text" name="tbPrezime" id="tbPrezime" /></td>

</tr> <tr><td> Datum rodenj a:</td>

<td align="right">Dan: <select name="ddlDan" id="ddlDan"> <option value="O"> Izaberi . . . . </option> <option value=" 1 ">1 </option> <option value="2">2</option> <option value="З "> 3</option></select><br/>

Mesec:<select name="ddlMesec" id="ddlMesec"> <option value="O">Izaberi . . . </option> <option value=" l ">Januar</option> <option value="2"> F ebruar</option></select><br/>

Godina:<select name="ddlGodina" id="ddlGodina"> <option value="O">Izaberi . . . </option> <option value=" 1 990"> 1 990</option> <option value=" 1 99 1 "> 1 99 1 </option> <option value=" 1 992"> 1 992</option>

</select></td> </tr>

77


<tr><td>Pol :</td> <td>

<label for="muski">Muski</label> <input type="radio" name="pol" id="muski" /><br /><label for="zenski">Zenski</label><input type="radio" name="pol" id="zenski" /></td></tr> <tr> <tЏ>Korsnicko ime:</td> <td><input type="text" name="tbKorisnickolme" id="tbKorisnickolme"

/></td> </tr>

<tr> <td> Lozinka:</td>

<td><input type="password" name="tbLozinka" id="tbLozinka" /></td> </tr>

<tr> <td>Lozinka ponovo:</td>

<td> <input type="password" name="tbLozinkaPonovo" id="tbLozinkaPonovo" /></td>

</tr> <tr>

<td><input type="submit" name="ЬtnRegistruj " id="btnRegistruj" value="Registracija" />

</td> <td>

<input type="reset" name="btnPonisti" id="ЬtnPonisti" value="Ponisti" /> </td>

</tr> </tаЫе>

</form> <Љоdу> <Љtml>

78

РоЈ

KorsniCko ime :======: LoDnka с= ::Ј Lохшkз ponovo с= __Ј - -

Slika 47 . HTML formular.

Praktikum iz VV еб dizajna

Primer 77. HTML formular. Dati kod snimiti pod nazivom " prinier77.html " (bez znakova navoda)

<html> <head><title>HTML formular</title><Љead> <body> <form action=111 1 accept-charset=11UTF-811 method=11post11 id=11weЬform11

name=11weЬform11 > <tаЫе border=11 1 11>

<tr><th colspan=112 11> Zainteresovani za upis</th></tr> <tr><td>Ime i prezime:</td>

<td> <input type=11text11 maxlength=114011 name=11tЫmePrezime11

id=11tЫmePrezime11 size=11З011 /> </td>

</tr> <tr><td>Studijski program: </td>

<td > <input type=11checkbox11 name=11chЫt11 id=11chЫt11 value=11IT11 />

Intemet tehnologije <br/> <input type=11checkbox11 name=11chbPbt11 id=11chbPЬt11

value=11PBT11 /> Postanske i bankarske tehnologije<br/> <input type=11checkbox11 narne=11chbTk11 id=11chbTk11 value=11TK11

/> Telekomunikacije <br/> < input type=11checkbox11 name=11chbMi11 id=11chbMi11 value=11MI11

/> Medicinska informatika <br/> </td>

</tr> <tr> <td>E-mail : </td>

<td> <input type=11text11 maxlength=11 1 28 11 name=11tbEmail 11

id=11tbEmail 11 size=11З011 /> </td>

</tr> <tr><td colspan=11211 align=11center11>

<input type=11submit11 name=11btnSubmit11 id=11btnSubmit11 value=11Prijavi se11 />

</td> </tr></table></form><Љody><Љtml>

79

Praktikum iz VVeh dizajna

Primer 78. HTML forma sa grupisanjem elemenata (Slika 48). Dati kod snimiti ::юd nazivom "primer78.html " (bez znakova navoda)

<html><head><title>HTML formular</title><Љead> <body><form>

<fieldset><legend> Licni podaci</legend> <tаЫе>

<tr><th colspan="2" align="center" >Registracija korisnika</th> </tr><tr><td>Ime:</td>

<td><input type="text" name="tЫme" id="tЫme" /></td> </tr> <tr><td>Prezime:</td>

<td><input type="text" name="tbPrezime" id="tbPrezime" /></td> </tr><tr><td>Datum rodenja:</td>

80

<td align="right">Dan: <select name="ddlDan" id="ddlDan"> <option value="O"> Izaberi. " . </option> <option value=" 1 "> 1 </option> <option value="2">2</option> <option value="З "> 3</option>

</select><br/> Mesec:<select name="ddlMesec" id="ddlMesec">

<option value="O">Izaberi . . . </option> <option value=" 1 "> Januar</option> <option value="2">Februar</option> </select><br/>

Godina:<select name="ddlGodina" id="ddlGodina"> <option value="O">Izaberi . . . </option> <option value=" 1 990"> 1 990</option> <option value=" 1 99 1 "> 1 99 1 </option> <option value=" 1 992"> 1 992</option> </select></td></tr>

<tr> <td>Pol:</td> <td><label for="muski ">М uski</label> <input type="radio" name="pol" id="muski" /><br /> <la bel for="zenski "> Zenski</la bel> <input type="radio" name="pol" id="zenski" /></td>

</tr> </tаЫе>

</fieldset>

Praktikum iz VV еЬ dizajna

<fieldset><legend>Podaci о nalogu</legend> <tаЫе> <tr><td>Korsnicko ime:</td>

<td><input type="text" name="tbKorisnickolme" id="tbKorisnickolme" /></td>

</tr> <tr><td>Lozinka:</td>

<td><input type="password" name="tbLozinka" id="tbLozinka" /></td>

</tr> <tr><td> Lozinka ponovo: </td>

<td><input type="password" name="tbLozinkaPonovo" id="tbLozinkaPonovo" /></td>

</tr> <tr><input type="hidden" name="hfSkriveno"

id="hfSkriveno" value="skrivena Vrednost" /><td> <input type="submit" name="btnRegistruj" id="btnRegistruj " value="Registracija" />

</td> <td><input type="reset" name="btnPonisti" id="btnPonisti"

value="Ponisti" /> </td> </tr>

</tаЫе> </fieldset> </form> <Љоdу>

</html>

Licni podaci -------

Registracija ko:rismka

Ime:

Prezime.

Datшn rodenJa

Pol

Dan: l 1zaberi ... ЈВ Mescc:I� Godшa:l lzaberi .. , lJ

MuSki r Zensk1 r

Podac1 о nalogu -------

KorsniCko ime:

Lorinka:

Lorinka ponovo:

Slika 48. Grupisanje elemenata formulara.

8 1


Primer 79. Elementi formulara formatirani sa CSS-om (Slilш 49). Dati kod snimiti pod nazivom "primer79.html " (bez znakova navoda)

<html> <head><title>HTML formular</title>

<style type="text/css"> .textbox {border: 1 рх solid #ССС;} . list{ border: l px solid #ССС;} label { font-style :italic; } .button {background-color:#0960AЗ;color:#FFF;border: 1 рх solid

#d4d4d4;} fieldset { border: 1 рх solid #ffOOOO ;} legend { font-weight:bold;}


<! - - Ostatak koda isiti kao u primeru 77 - -> </Ьоdу> <Љtml>

Licni podaci------Registracija korisnika

Ime: Prezime:

Datum rodenJa:

Ро!:

Dan· lzвberi .... � Mesec:l lzвberi_: . ..:Ј

GodшaJ lzвberi . .:f MuSk:i r t.nskl r

Podaci о nalogu------Korsшcko 1me: Lozinka· Lozinka ponovo: ldjЦ!p!Qфl -

Slika 49. Formatiranje elemenata formulara pomocu CSS-a .

Primer 80. HTML formular, CSS formatiranjem (Slika 50) . Dati kod snimiti pod nazivom " primer80.html " (bez znakova navoda)

82


<html> <head><title>HTML foпnular</title>

<style type="text/css"> . textbox {border: 1 рх solid #ССС;} . list{ border: lpx solid #ССС; width: 1 45рх;} .button { background-color:trasparent; color:#OOO; border: 1 рх solid

#ООО; } fieldset { border: l px solid #ffOOOO;} legend { font-weight:bold;}


<foпn id="foпnaZaUnos" action="primer79.html"> <tаЫе style=" width:500px; margin :O auto; border: 1 рх solid

#СССССС;"> <tr><th colspan="2">Foпna za narucivanje</th></tr> <tr><td>Ime i prezime:</td>

<td> <input type="text" id="tЫmePrezime" name="tЫmePrezime"

class="textbox" /> </td>

</tr> <tr><td> Adresa:</td>

<td> <input type="text" id="tbAdresa" name="tbAdresa" class="textЬox" />

</td> </tr>

<tr><td>Grad:</td> <td> <select id="ddlGrad" name="ddlGrad" class="list">

<option value="O">Izaberi . . . </option> <option value="Beograd">Beograd</option> <option value="Novi Sad">Novi Sad</option> <option val ue="N is"> N is</ option>

</select> </td>

</tr>

83


<tr><td>Proizvod:</td> <td><select id="ddlProizvod" name="ddlProizvod"

multiple="multiple" size="5" class="list"> <option value="Proizvodl ">Proizvod 1 </option> <option value="Proizvod2">Proizvod 2</option> <option value="ProizvodЗ ">Proizvod 3</option>

</select> </td>

</tr><tr><td>Kolicina:</td> <td>

<input type="text" id="tbKolicina" name="tbKolicina" class="textbox" /> </td>

</tr><tr> <td>Vrsta placanja:</td> <td>

<input type="radio" name="rb VrstaPlacanja" value="elektronski" /> Elektronski<br/> <input type="radio" name="rbVrstaPlacanja" value="kes" checked />Kes

</td> </tr> <tr><td colspan="2" align="center"> <input type="submit" id="btnSubmit" name="btnSubmit"

value="Unesi" class="button" /> <input type="reset" id="btnReset" name="btnReset"

value="Ponisti" class="button" />

84

</td> </tr> </table></form><Љody><Љtml>

Ime 1 prezune.

Adresa:

Grad:

Pro1zvod:

Kobcina

Vrsta placanja

F опnа za naruci vапје

1zвberi . Pro1zvod 1 ;Pra1zvod 2 Pro1zvod З Pro1zvod4 Pro1zvod 5

(' Elektronsla !t Kes

1 Une11 1 1 Рм•- 1

� �

Slika 50. Formatiranje elemenata fOrmulara pomocu CSS-a

Praktikum iz VV еЬ dlzajna

Multimedijalni sadrzaj u HTML-u

Da Ьi se па HTML straпu postavio пeki sadrzaj koji пiје deo staпdardпog HTML potrebпo је taj sadrzaj (video,muzika,flash,pdf . . . ) ubaciti u dokumeпt putem specijalпog taga <object>.VeCiпa browser-a moze ispravпo da iпterpretira ovaj tag, а ako to пiје slucaj koristi se tag <i!mbed> koji ima istu fuпkciju kao i <object> tag.

Pimer 8 1 . Flash aпimacija па HTML straпi (Slika 51) . Dati kod sпimiti pod пazivom " primer81.html " (bez zпakova пavoda)

<html> <head>

<title>Flash materijal</title> <Љеаd> <body>

<div style="margiп:O auto; width:бOOpx;"> <object codebase="http://dowпload.macromedia.com/

puЬ/shockwave/cabs/flash/swflash.cab#versioп=7,0 , 1 9,0" width=" l 75" height=" 1 75">

<param пame="movie" value="multimedija/flash. l swf' /> <param пame="quality" value="high" /> <embed src="multimedija/flash l .swf'

plugiпspage="http://www .macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width=" 17 5" height=" 1 7 5" meпu="false">

</embed> </object>

</div> <Љоdу> <Љtml>

Primer 82. Video materijal па HTML straпi (Slika 52). Dati kod sпimiti pod пazivom " primer82.html " (bez zпakova пavoda)

85

Prafi.tifi.um iz Wеь dizajna

<html> <head>

<title> Video materijal</title> <Љеаd> <body>

<div style="margin:O auto; width:бOOpx;"> <object width=" 320" height=" 240" classid="clsid:CFCDAA03-

8BE4- 1 1 cf-B84B-0020AFBBCCF A" >

</object > </div>

<Љоdу> <Љtml>

<param name="controls" value="ImageWindow" /> <param name="autostart" value=" true" /> <embed src="multimedija/video l .avi" />

Slika 5 1 . Prikaz ukljucivanja jlash animacije u HTML stranu .

Slika 52. Ukljucivanje video materijala u HTML stranu .

86

Pogfav(je Јо/


H T M L S

HTML 5 predstavlja sledecu geпeraciju HTML-a koja jos u potpuпosti пiје zazivela ali se polako i sigumo pozicioпira u svetu web-a. Ova geпeracija HTML пiје zazivela u potpuпosti iz razloga sto ga пeki browser-i i dalje пе podrzavaju u potpuпosti. U ovom delu пavesce se samo пеkе osobeпosti i primeri kako bi studeпti stekli uvid u пovu geпeraciju web satova.

Noviпe koje пudi HTML 5 su sledece:

� Canvas elemeпt za crtaпje � Video i audio elemeпti za reprodukciju videa i zvuka � Bolja podrsta za ojjline skladisteпje podataka � Novi elemeпti koj i su vezaпi za sadrzaj <article>, <footer>, <header>,

<nav>, <section> � Novi elemeti formulata прr. kalendar,datum, vreme,email,url,pretraga

Sto se tice podrske za HTML 5 пi јеdап browser u potpuпosti пе podrzava HTML 5, ali sa svakom пovom verzijom podrska је sve bolja.

Preporuka studeпtima је da za realizaciju primera koji se пalaze u ovom delu koriste sledece browser-e : Firefox(od verzije 3.5), Google Chrom 5, 0pera 9 i Internet Explorer 9.

Primer 83. HTML 5 dokumeпt (Slika 53). Dati kod sпimiti pod пaz1vom ,primer83.html " (bez zпakova пavoda)

< !DOCTYPE HTML> <html> <head><title>Naslov HTML 5 dokumeпta</title></head> <body> Sadrzaj HTML 5 dokumeпta <Љоdу> </html>

89


г - - - - - - - - - - - - - � - - - � - - - -

� - - - � - - _,L. - -Joo�r _ _ v.- - �- - - - -� Slika 53 . Struktura HTML strane sa HTML 5 elementima.

Primer 84. Organizacija strane pomocu HTML 5 elementa (Slika 54). Date kodove snimiti u folder "primer83" (bez znakova navoda) index.html

<!DOCTYPE html> <html lang="sr">

90

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="stil .css" type="text/css"> <title>Strana u HTML 5</title>

</head> <body>

<header id="page _ header"> <hl >Strana u HTML 5</h l > <nav>

<ul> <li><a href="#">Link 1 </a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li>

</ul> </nav>

</header>


<section id="posts"> <article class="post">

<header> <h2>0vo је naslov post-a<Љ2> <p>Postavio Pera

<time datetime="201 1 -03-01 Т14 :39"> 1 Mart 20 1 1 ,u 14 :39 </time> </р>

<Љeader> <aside>

<p>"Ovo је neki tekst pod znacima navoda."</p> </aside> <p>Ovo је jedna prosta recenica koja je samo primer.</p>

<p>Ovo је jedna prosta recenica kojaje samo primer.</p> <footer>

<р><а href="#"><i>25 Komentara</i></a> . . . </р> </footer>

</article> </section> <section id="sidebar"> <nav>

<hЗ>Arhiva<ЉЗ> <ul>

<li><a href="#">Oktobar 201 O</a></li> <li><a href="#">Septembar 201 O</a></li> <li><a href="#"> А vgust 20 1 O</a></li>

</ul> </nav>

</section> <f ooter id ="page _ f ooter">

<р>&сору; 201 1 Web dizaj n lab vezbe.</p> <nav>

<ul> <li><a href="#">Pocetna</a></li> <li><a href="#">O saj tu</a></li>

</ul> </nav>

</footer> <Љоdу>

<Љtml>

9 1


stil. css

body{width:960px;margiп: 1 5px auto;foпt-family: Arial, "MS Trebuchet" , saпs-serif;} p {margiп:O О 20рх О;} р, l i { liпe-height:20px;} header#page _ header{ width: 1 00%; } header#page_header паv ul, #page_footer паv ul { list-style: попе; margiп : О; paddiпg: О; } #page_header паv ul li, footer#page_footer паv ul li { paddiпg:O; margiп: О 20рх О О; display:iпliпe;} sectioп#posts{ float: left; width: 74%; } sectioп#posts aside { float: right; width: 35%; margiп-left: 5%; foпt-size:

Strana u HTML 5

Ovo је naslov post-a Postavю Р8(а 1 МЗ12011.u 14 39 CN0JeJedпapros1areteпк:akoJaJe samo prrner Ovo Је ·ovo је neki tekst pod J€dлt!.prostarei::emcako;aJesamopnmer Ovo1eJedna znacima navoda • pros1a reteпica kОЈЗ је samopпmer Ovo Је Jedna pros1a rei::entea ko1a Је samo pnmer Ovo Је jedia prosta retenlca koJa Је sooio prlr!ler Ою 1е Jed'la prosta rei::erflea koia.te sooio pnmer Ovo Ј8 Jednaprosla reten1cakOJЭJe sоою pnmer Ovo JeJedia prosta rei::en1Ca kОЈЗЈе samo pпmer Ovo Је J8dia prosta rei::eп1ca kОЈЭ Је sоою pпmer ОУс Је J8dna prosla reten1ca koJa ЈЕ! sooio pпmer

Ovo Је JedГla prosta reteruca kоЈЗ Је samo pnmer Ovo Је Jlidrнэ prostг rei::eп1ca kOJa Је samo pпmer Ою Је ]EJdna prosta rei::eniCa koJa Је samo prтmer Ою Је Јеdпа pros1areteп1ca kОЈЭЈе samo pпmer Cvo ЈеЈеdпа prosta ге�::егмсаkо]Э Је samo pпmer Ою Је Јеdпа prosta reteп1ca kо]Э 1е samo pпmer Cvo Је 1еdпа prosla retenca kоЈЭ ie samo pпmer Ovo Је 1еdпа prosta retemca kоЈЭ Је samo pпmer Ovo Јеј(Јdпа prosta rei::en1cakoJЭJe samo pпmer OVo JeJedпaprostareteп1ca kоЈЭ Је samo pпmer Ovo Је 1еdпа prosta reteniCa kOJa Је samopпmer Ою 1e1edпaprostarei::eп1ca kОЈЭЈе samo pпmer OvoJeJedпaprosta rei::eпlca kОЈЭЈе samopпmer Ovo JeJednaprosta retenca k{)jaJe samo pпmer Ovo JeJednaprosta reteп1cakoja Је samo prmer Ою JeJedпaprosta rei::eruca ko]0 Је samopпmer 0.'О Је Je.0naprosta reteпica kОЈЭ Је samopпmer Ovo Је )ednaprosta rOCenca kоЈЭ Је samopr mer ОУо ЈеЈеdпа pros-=i reteп1ca kOJa Је samo pпmer Ою JeJedпaprosta reteniCakoJaJe samopпmer

820 1 1 Web dza1п labveftle

Poi::li:tвa � Uslovr11 l<on�enia Pпv�ost

Ar11iva • Oktobar 2010 • :>eDlembar2010 • Avausl 2010

• J.!.ШlfuQ • Jun 2010 • Ма1 2010 • Арп1 2010 • Mart2010 • Februar 2010 • Jaпuar 20!0

Slika 54. Izgled straпe kodiraпe u HTML-u 5 i fomratiraпe CSS-om

"°'""H'fNlS

Primeri: Bubnjevi

Gitaгa . .,

Orgaп . .,

Bas

Slika 55. Reprodukciju zvuka .

92

Slika 56. Reprodukciju videa .


Primer 85. Audio materijal па HTML 5 strani (Slika 55). Dati kod snimiti pod nazivom ,.primer85.html" (bez znakova navoda)

<!DOCTYPE html> <html lang=11sr11>

<head><meta charset=11utf-8 11> <title>Audio u HTML 5</title>

</head> <body>

<h 1 >Primeri:</h 1 > <article class=11primer11>

<header><h2> Bubnjevi</h2></header> <audio id=11bubnjevi11 controls>

<source src=11multimedija/drums.ogg11 type=11audio/ogg11> <source src=11multimedija/drums.mp311 type=11audio/mpeg11> <а href=11 mul timedij а/ drums.mp3 11> Preuzmi drums. mp 3</ а>

</audio> </article>

<article class=11primer11> <header><h2>Gitara</h2></header> <audio id=11gitara11 controls>

<source src=11multimedija/guitar.ogg11 type=11audio/ogg11> <source src=11multimedija/guitar.mp311 type=11audio/mpeg11> <а href=11multimedija/guitar.mp311>Preuzmi guitar.mp3</a>

</audio> </article> <article class=11primer11>

<header><h2>0rgan</h2></header> <audio id=11organ11 controls>

<source src=11multimedija/organ.ogg11 type=11audio/ogg11> <source src=11m ultimedi ја/ organ.m р3 11 type=11 audio/m peg11> <а href=11multimedija/organ.mp3 11>Preuzmi organ.mp3</a>

</audio> </article>

<Љоdу> </html>

93

Praktikum iz VV еБ dizajna

Primer 86. Video materijal па HTML 5 strani (Slika 56). Dati kod snimiti pod nazivom "primer86.html " (bez znakova navoda)

<!DOCTYPE html> <html lang="sr">

<head> <meta charset="utf-8 "> <title> Video</title>

<Љеаd> <body>

<video controls> <source src="multimedija/O l _Ыur.mp4"> <source src="multimedija/O 1 _ Ыur.ogv"> <source src="multimedija/O l _blur.webm">

</video> </Ьоdу>

<Љtml>

Primer 87. Novi HTML 5 elementi formulara. Dati kod sacuvati kao ,.primer87.htmf' (bez znakova navoda) . Napomena: stranu gledati putem browser-a Opera ili Google Chrom .

<!DOCTYPE HTML> <html> <head>

<title>Novi elementi formulara u HTML 5</title> <Љеаd> <body> <form > E-mail: <input type="email" name="korisnik_email" /><br /> URL adresa: <input type="url" name="korisnik_url" /><br/> Ocena: <input type="number" name="ocena" min="5" max=" l О" /><br/> Skala: <input type="range" name="skala" min=" 1 " max=" 1 О" /><br/> Datum: <input type="date" name="korisnik_datum" /><br/> Вој а: <input type="color" name="korisnik_boja" /> <input type="submit" /> </form> </Ьоdу> <Љtml>

94

CFogГav(je 1)

css з


css з

CSS3 predstavlja skup dodatnih svoj stava i selektora pomocu kojih se moze vrsiti prilagodavanje prikaza HTML elemenata. Sva svojstva i selektori koji su se do sada koristili, koriste se i sada samo је nj ihov skup prosiren. Као sto је slucaj sa HTML 5, i CSS3 svojstva i selektori nisu podrzani u potpunosti od strane svih browser-a_ Neki browser-i podrzavaju nova svojstva i selektore kroz sopstvena svojstva i selektore koji imaju slican naziv kao i standardna, samo imaju odredeni prefix koj i se razlikuje u zavisnosti od tipa browser-a . U narednih nekoliko primera bice predstavljenjena neka karakteristicna svojstava i mogucnosti CSS3.

Prefix/Browser Mozzila prefix -moz-

Chrome/Saf ari -webkit-

Microsoft О era -ms- -о-

Primer 88. Zakrivljene ivice,senke Ыokova,slike ivica (Slika 5 7) . Dati kod sacuvati kao ,.primer88.htmf' (bez znakova navoda)

<! DOCTYPE html> <html> <head> <style type="text/css"> div.zakrivljeno { border:2px solid #a l а 1 al ; padding: 1 Орх 40рх; background:#dddddd; width:300px; -moz-border-radius:25px; /* Firefox 3 .6 i ranije verzije */ border-radius:25px;}

div.senka{width:300px; height: 1 ООрх; background-color:yellow; -moz-box-shadow: lOpx lOpx Spx #888888; /* Firefox 3 .6 i ranije verzije */ -webkit-box-shadow: 1 Орх 1 Орх 5рх #888888; /* Safari * / box-shadow: lOpx lOpx Spx #888888; } div .slika _ivice { border-width: 1 5рх; width:250px; padding: 1 Орх 20рх; } #round{ -moz-border-image:url(slike/ivica.png) 30 30 round; /* Firefox */ -webkit-border-image:url(slike/ivica.png) 30 30 round; /*Safari i Chrome */ border-image:url(slike/ivica.png) 30 30 round; }

97


#stretch {-moz-border-image:url(slike/ivica.png) 30 30 stretch ; /* Firefox */ -webkit-border-image:url(slike/ivica.png) 30 30 stretch; /* Safari i Chrome */ border-image:url( slike/ivica.png) 30 30 stretch; } </style> <Љеаd> <body> <div class="zakrivljeno">border-radius svojstvo sluzi da zakrivi ivice elementa. </ div> <div class="senka"></div> <p><b>Napomena:<Љ> Intemet Explorer nepodrzava border-image svostvo. </р> <p>border-image svojstvo govori koja slika se koristi kao ivica elementa. </р> <div id="round" class="slika_ivice">Ovo је neki tekst.</div><br /> <div id="stretch" class="slika_ivice">Ovo је neki tekst.</div> <p>Slika koja ј е koriscena:</p><img src="slike/ivica.png" /> <Љоdу> <Љtml>

bQrder-radaus 'iVOJrtvO duS da zakmi мсе elemtnta

Napomena: Intemet Explorer nepoddava border-1rnage svostvo

bordcr--image svoJstvogovonkoJa s.hka se konsь kao меа elementa

• • Ovo Је nek1 tekst

•

• • Ovo ;е nek1 tekst

•

Shka koJa ;е konJCena.

• •

Slika 57. Zakrivljene ivice, senke.

98

. ' '

0V"oje neb tekstOvo Jt" nela tekstOV"o Је nek1

tekstOV"o Је nekz teЬt Ovo је neki tek.st Ovo је neki tekst 0V"o је neki tekst Ovo је nela. tekstOvo је neki tekst Ovo Је nela tekst.Ovo Је nekitekst � shka:

Slika 58 . Pozadine elemenata.

Praktikum iz Wеб Шzајпа

Primer 89. CSSЗ pozadine, svoj stvo background-size (Slika 58) . Dati kod sacuvati kao ,.primer89.htmf' (bez znakova navoda)

< !DOCTYPE html> <html> <head> <style type="text/css"> body {background:url( slike/pozadina _ cvet.gif); -moz-background-size:80px 60рх; /* Firefox */

background-size:80px 60рх; background-repeat:no-repeat; padding-top:40px ;} div {background:url( slike/pozadina _ cvet.gif); -moz-background-size: 100% 100%; /* Firefox */

background-size: l 00% 100%; background-repea t:no-repea t; } </style> </head> <body> <p>Na ovo mesto ubaciti malo proizvoljnog teksta.</p>

<p>Originalna slika: <img src="slike/pozadina _ cvet.gif' alt="Flowers" width="224" height=" 1 62" /></р> <div class="pozadina"> Na ovo mesto ubaciti malo proizvoljnog

teksta. </div> </Ьоdу> </html>

Primer 90. CSSЗ pozadine, svojstvo background-orgin (Slika 59 i 60) . Dati kod sacuvati kao ,.primer90.htmf' (bez znakova navoda)

<! DOCTYPE html> <html> <head> <style type="text/css"> div {padding:ЗOpx; border:2px solid Ыасk; background:url( slike/pozadina _ cvet.gif); backi:!round-reoeat:no-reoeat: backl!found-size: 1 00% 1 00%: }

99


#div 1 {background-origin: border-box; } #div2 {background-origin:content-box; }

</style> <Љеаd> <body> <p>background-origin : border-box:</p> <div id="divl ">Na ovo mesto ubaciti malo proizvoljnog teksta.</div> <p>background-origin:content-box:</p> <div id="div2">Na ovo mesto ubaciti malo proizvoljnog teksta.</div> <Љоdу> <Љtml>

Slika 59. Struktura box-ova u Ыоk elementu.

backgroood-ongm,border-boж-

background-o��nt-bo:t

Ovo Је neki te�9 Је nek.J tekst a.Ovo Jt neki tekst.OvOJt:�Ovoje""'add� ' tekЛOvoje

nelci tekst. Ovoje neki-tekstQy��J6� Jt:neki.

tШtOvo · ·°'''' Ov��9-o.ie "-

Slika 60. Primena svojstva background-origin.

Primer 9 1 . CSSЗ pozadine, svojstvo background-image. Dati kod sacuvati kao ,primer91.html" (bez znakova navoda)

< !DOCTYPE html> <html> <head> <style type="text/css"> body { background-image:url( slike/pozadina _ cvet.gif),

url(slike/pozadina _ drvo.gif); } </style> <Љеаd> <body> <Љоdу> <Љtml>

1 00


Primer 92. CSSЗ efekti sa tekstom, svojstvo text-shadow. Dati kod sacuvati kao ,primer92.htmf' (bez znakova navoda)

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

h 1 { text-shadow: Spx Spx Spx #FFOOOO; } </style> <Љеаd> <body> <hl >Text-shadow efekat ! <Љl> <p><b>Napomena:<Љ> Internet Explorer пе podrzava ovo svoj stvo.</p> <Љоdу> <Љtml>

Primer 93. CSSЗ evekti sa tekstom, svoj stvo word-wrap. Dati kod sacuvati kao ,primer93.html" (bez znakova navoda)

<!DOCTYPE html> <html> <head> <style type="text/css"> р. test { width: 1 1 ет; border: 1 рх solid #000000; word-wrap: break-word; } </style> <Љеаd> <body>

<р class="test"> Ovo ј е neki tekst.Ovo је neki tekst.Ovo ј е neki tekst.Ovo је neki tekst.</p> </Ьоdу> <Љtml>

Primer 94. CSSЗ fontovi. Dati kod sacuvati kao ,primer94.html" (bez znakova navoda)

1 0 1

Prali.tili.um iz VVeb dizajna

< !DOCTYPE html> <html><head> <style type="text/css"> @font-face { font-family: mojFont;src: url('fontovi/fontTest.ttf), url('fontovi/fontTest.eot') format("opentype") ; /* IE * /}

div { font-family:mojFont; }

</style> <Љеаd> <body><p><b>Napomena:<Љ> Intemet Explorerpodrzava samo .eot fontove.</p> <div> Sa CSSЗ sajtovi konacno mogu da koriste proizvoljne fontove. </div> <Љоdу> <Љtml>

Primer 95. CSSЗ transformacije, svoj stvo transform. Dati kod sacuvati kao .primer95.htmf' (bez znakova navoda)

<! DOCTYPE html> <html><head> <style type="text/css"> body{ padding: З Opx; } div.rotiraj { width:200px; height: 1 ООрх; background:yellow; /* Rotacija div-a */ transform:rotate(ЗOdeg); -moz-transfOrm:rotate(ЗOdeg); /* Firefox */ -webkit-transform:rotate(ЗOdeg); /* Safari i Chrome * / -o-transform:rotate(ЗOdeg); /* Opera */} div.transliraj { width: 1 ООрх; height: 75px; background:red; border: 1 р х solid Ыасk;} div. transliraj#div2 { transform: translate( 50рх, 1 ООрх); -moz-transform:translate(50px , 1 00px); /* Firefox */ -webkit-transform:translate(50px, 1 ООрх); /* Safari i Chrome */ -o-transform:translate(50px, 1 00px); /* Opera */}

1 02

Praktikum iz VVeБ dizajna

div .rotacij а { width: 1 OOpx;height:75px;backgrouпd-color:red;border: 1 рх

solid Ыасk; } div.rotacij a#div2 { traпsform:rotate(ЗOdeg); -moz-traпsform:rotate(ЗOdeg); /* Firefox */ -webkit-traпsform:rotate(ЗOdeg); /* Safari i Chrome */ -o-traпsform:rotate(ЗOdeg); /* Opera */} div.skaliraпje { width: l ООрх; height:75px; backgrouпd-color:red; border: 1 рх solid Ыасk; } div .skaliranj e#div2 { margiп: l ООрх; traпsform:scale(2,4 ) ; -пюz-traшfomпcak(2,4); /* Firefox */

-webkit-traпsform:scale(2,4); /* Safari i Chrome */ -o-traпsform:scale(2,4 ); /* Opera * /} div.skew { width: 1 ООрх; height:75px; background-color:red; border: 1 рх solid Ыасk; } div.skew#div2 { traпsform:skew(30deg,20deg); -moztraпsform: skew(30deg,20deg); /* Firefox */-webkittraпsform:skew(30deg,20deg); /* Safari i Chrome */ -o-traпsform:skew(30deg,20deg); /* Opera */} </style> </head> <body><p><b>Napomeпa:<Љ> Iпtemet Explorer пе podrzava traпsform,traпslate svojstva.</p> <br /><br /><div class="rotiraj ">Zdravo ! ! !</div> <br/><br/> <div class="traпsliraj ">Zdravo,ovo је DIV elemeпat.</div> <div id="div2" class="traпsliraj ">Zdravo,ovo ј е DIV elemeпat.</div> <br/><br /><br/><br /><br/><br/><br/><br/><br /><br /> <div class="rotacija">Ovaj elemeпt se rotira. </div> <div id="div2" class="rotacija">Ovo ј е rotiraпi elemeпt.</div> <br/><br/><br/><br /><br/> <div class="skaliraпje">Ovo је elemeпt koj i se skalira.</div> <div id="div2" class="skaliraпje">Ovo ј е skaliraпi elemeпt.</div> <br/><br /><br/><br/><br/> <div class="skew">Ovo је elemeпt па koji се se raditi skew</div> <div id="div2" class="skew">Elemeпt паd koj imje uradeп skew.</div> <Љоdу> </html>

1 03


Primer 96. CSSЗ selktor, elementl�element2 (selektuje svaki element2 koji se nalazi posle elementa l ). Dati kod sacuvati kao ,.primer96.htmf' (bez znakova navoda)

<!DOCTYPE html> <html> <head><style type="text/css"> p-ul { background:#ffOOOO; }</style>

· <Љеаd> <body><div>div element.</div> <ul>

<li>Caj<lli> <li>Kaf а<Лi> <li>Sok</li>

</ul><p>Prvi paragraf.</p> <ul>

<li>Caj<lli> <li> Kafa</li> <li>Sok</li>

</ul><h2>Neka lista<Љ2> <ul>

<li>Caj</li> <li> Kafa</li> <li>Sok</li>

</ul> <Љodv><Љtml>

Primer 97. CSSЗ selktor, [attriЬute/\=valuej (selektuje svaki element cij i atriЬut pocinje zadatom vrednoscu). Dati kod sacuvati kao ,.primer97.htmf' (bez znakova navoda)

< !DOCTYPE html> <html><head> <style type="text/css"> div[ classл="test" ] { background:#ffffOO;} </style><Љead><body> <div class="prvi_test">Prvi div element.</div> <div class="drugi">Drugi div element.</div> <div class="test">Treci div element.</div> <р class="test">Neki tekst u paragrafu.</div> <Љodv><Љtml>

1 04

Praktikum iz VV еб dtzajna

Primer 98. CSSЗ selktor, [attriЬute$=value} (selektuje svaki element ciji se atriЬut zavrsava zadatom vrednoscu). Dati kod sacuvati kao ,.primer98.htmf' (bez znakova navoda)

<!DOCTYPE html> <html> <head> <style type="text/css"> div[ class$="test" ] { background:#ffffOO;} </style> <Љеаd> <body> <div class="prvi_test">Prvi div element.</div> <div class="drugi">Drugi div element.</div> <div class="test">TreCi div element.</div> <р class="test">Neki tekst u paragrafu.</div> </Ьоdу> <Љtml>

Primer 99. CSSЗ selktor, [attriЬute*=value} (selektuje svaki element Ciji atriЬut sadrzi zadatu vrednost). Dati kod sacuvati kao ,.primer99.htmf' (bez znakova navoda)

< !DOCTYPE html> <html> <head> <style type="text/css"> div[class*="test"] {background:#ffffOO; } </style> <Љеаd> <body> <div class="prvi_test">Prvi div element.</div> <div class="drugi">Drugi div element.</div> <div class="test">TreCi div element.</div> <р class="test">Neki tekst u paragrafu.</div> </Ьоdу> <Љtml>

1 05

Prali.tili.um iz Wеь dizajna

Primer 1 ОО. CSSЗ selktori, :first-o/-type , : last-o/-type , :only-o/-type , :onlychild (selektuj e svaki element ciji se atriЬut zavrsava zadatom vrednoscu). Dati kod sacuvati kao ,primerJOO.htmf' (bez znakova navoda)

<! DOCTYPE html> <html> <head> <style type="text/css"> p:first-of-type {background:#ffOOOO;} p:last-of-type {background:#OOOOff; color:#fff; } p:only-of-type { background:#OOFFOO; color:#fff;} span:only-child { background-color:#CCC; color:#OOO; } </style> <Љеаd> <body> <h 1 >Ovo ј е naslov putem h 1 taga<Љ 1 > <p>Ovo ј е prvi paragraf.</p> <p>Ovo је drugi paragraf. </р> <p>Ovo ј е treci paragraf.</p> <p>Ovo ј е cetvrti paragraf. </р> <div><p>Tekst jedinog paragrafa koji ј е u okviru div-a.</p></div> <p><b>Napomena:<Љ> Intemet Explorer пе podrzava : only-child selektor. </р> <div><span>Ovo је j edini span u div-u i nema vise ni jednog elementa</span></div> <div><span>Ovo је prvi span u div-u.</span><span>Ovo је drugi span u div-u. </span></ div> <Љоdу> <Љtml>

Primer 1 О 1 . CSSЗ selktori, :nth-child(x) , :nth-last-child(x) . Dati kod sacuvati kao ,.primerJOJ.html" (bez znakova navoda)

< !DOCTYPE html> <html> <head> <style type="text/css"> /* svi elementi р koji su drugi svom roditelju unapred */ p:nth-child(2) { background:#ffOOOO; }

1 06

Praktikum iz VV еб dlzajna

/* svi elementi р koji su drugi svom roditelju ali unazad*/ p:nth-last-child(2) { background:#OOOOff; } </style> <Љеаd> <body> <p>Ovo је prvi paragraf .</р> <p>Ovo је drugi paragraf.</p> <p>Ovo је treci paragraf. </р> <p>Ovo је eetvrti paragraf.</p> <p><b>Napomena:<Љ> Intemet Explorer ne podrzava :nth-child() selektor. </р> <Љоdу> <Љtml>

Primer 1 02. CSSЗ selktori, :nth-child(x) , :nth-last-child(x) , :nth-o/-type(x) , :nth-last-o/-type(x) (Slika 61). Dati kod sacuvati kao ,primer102.htmf' (bez znakova navoda)

< !DOCTYPE html> <html>

<head> <title>Primer 1 0 1 1 Web dizajn praktikum</title> <style>

p :nth-child(2) { color:#FFOOOO ;} p :nth-last-child(2) { color:#OOOOFF; } p:nth-child(2n+3) {text-transform:uppercase;} /*li :nth-of-type(2n+ 1) { color:#OOFFOO;} * / li: nth-of-type( even) { color:#OOFFOO; } li: nth-of-type(-n+ 3) { color:#FFFFOO ;} li : nth-last-of-type(S) { font-weight: bold;} tr:nth-child(odd) { background-color:#CCC; } td:nth-last-child(2n+ 2) { color:#FFOOOO;}

</style> <body><div id="prvi-deo">

<p>Ovo је tekst u prvom pasusu.</p> <p>Ovo је tekst u drugom pasusu.</p>

<p>Ovo је tekst u trecem pasusu.</p><p>Ovo ј е tekst u cetvrtu pasusu.</p>

1 07


<p>Ovo ј е tekst u petom pasusu. </р> </div> <ul id="navigacija">

<li>Tekst 1 </li> <li>Tekst 2</li> <li>Tekst 3</li> <li>Tekst 4</li>

<li>Tekst 5</li> <li>Tekst 6</li> <li>Tekst 7</li> <li>Tekst 8</li>

<li>Tekst 9</li> <li>Tekst 1 O</li> <li>Tekst 1 1 </li>

<li>Tekst 1 2</li> </ul>

<tаЫе border=" 1 "> <tr>

<td> l </td> <td>2</td> <td>З</td> <td>4</td>

</tr> <tr>

<td>5</td> <td>б</td> <td>7</td> <td>8</td>

</tr> <tr>

<td>9</td> <td> 1 O</td> <td> 1 1 </td> <td> 1 2</td>

</tr> </tаЫе><Љоdу>

<Љtml>

1 0 8

Praktikum iz VV еБ dizajna

Ovo ј е tekst u prvom pasusu.

Ovo је tekst u drugom pasusu.

OVO ЈЕ TEKST U TRECEM PAS

Ovo ј е tekst u cetvrtu pasusu.

OVO ЈЕ TEKST U РЕТОМ PASU

• Tekst 5

• Tekst 7

• Tekst 9

• Tekst 1 1

Slika 6 1 . Selektovanje elemenata.

Primer 1 03 . CSSЗ selktori, :empty , :епаЫеd , :disahled , :only-o/-type. Dati kod sacuvati kao ,primerJOЗ.html" (bez znakova navoda)

1 09


<!DOCTYPE html> <html>

<head> <title>Primer 1 02 1 Web dizajn praktikum</title>

<style> p:empty {border:Зpx solid #FFOOOO;} : епаЫеd { background-color:Ыue; } :disaЫed { background-color:red; } input {color:#FFF; } span:only-of-type{ color:#FFOOFF; }


<div id="prvi-deo"> <p></p><p>Tekst</p><p> </p><p>Ovo је tekst .</р>

</div><p>Ovo ј е tekst van div-a sa id-em prvi-deo</p> <div id="drugi-deo">

<span>Ovo је span koji је jedino "dete" div-a sa id-em drugi-deo</span>

</div> <tаЫе border=" 1 ">

<tr> <td>Ime i prezime:</td> <td> <input type="text" name="tЫmePrezime" id="tЫmePrezime" />

</td> </tr> <tr><td>Broj indeksa:</td>

<td><input type="text" name="tbBroj indeksa" id="tbBrojlndkesa" disaЫed /></td>

</tr> <tr>

<td><input type="button" name="btnUnesi" id=''ЬtnUnesi" value="Unesi" /></td><td><input type="button" name="btnPonisti" id="btnPonisti" value="Ponisti" /></td>

1 10

</tr> </tаЫе>

</Ьody></html>


Primer 1 04. CSSЗ prikaz teksta и kolonama (Slika 62) . Dati kod sacuvati kao ,.primer104.html" (bez znakova navoda). Koriscena svojstva rade samo pod Mozilla Firefox browser-om (-moz-) . Za ostale browser-e koristite odgovarajuce pre/ikse.


<head> <title>Primer 1 03 1 Web dizajn praktikum</title>

<style> #kolone{ width :960px; margin:O auto; -moz-column-width : 50%;

-moz-column-count:2 ; } </style>

<Љеаd> <body>

<div id="kolone">

<Љоdу> <Љtml>

</div>

<h l >Lorem ipsum<Љ l > <p>Na ovo meto ubaciti tekst.</p> <р> Na ovo meto ubaciti tekst.</p> <р> Na ovo meto ubaciti tekst. </р> <р> Na ovo meto ubaciti tekst. </р> <р> Na ovo meto ubaciti tekst. </р>

----... --"-.... <!_ ..... =:;;:::-..:.��=:=.:..�==-l..ort.'mipsum , ______ , __ .......,.. ... _" ... ,...." ............ \/< _________ " ... ..... -с ... - -" ..... -"-..- - ...._ v. _ _...._,..,,," ____ "...,.,._ �-=.::::.:�::.��:; ===:..�=�=-.- -.-....- -- ------ --" ..... N:..-.м.-----___ "_ ... _ ... _i:i.- ___ _ ..... -�s.i-·�·- ho�----

;.;::.=;"==:�:_;::" ===-..:=.:.-: ___ _ �·-"--"--с... .... а.-"- �-- ... -()<-. _ _ _ _ _ -"--- ы--"-.-." _______ " __ ...__ --·-·- --·--"-- -------"-"---... -... _... ... ,.i.,.,,,._.. __ -.�. ��-----..--""-н-___ ..,.,......, _____ ,__ ... ___ "_" _______ -_ ... _____ � .... --.. ()<-.- _____ с-______ ...,._ --"'-... """""-- s.."--"- ,_" ... __ ...,._ ._ ___ _ __ _, .......... _"_L_"_ =��==..:.::..4::.-:.= --..w.,,...__ ... __ .......,. __ " �v_.,... ... _..-.--·-·--"_..._..i"" ь.-,.._ __ __ ------· ..... --__ foio..__"'_.._.., __ " ---- -·---·---··------�- � ........ " ...... --... ---.--_ ... ....,__" _____ "" ..... "_ ----...--·--�----"--.... "-........ "'""- ��r--·-.---... "--0.-<1 .... odo.>rt-... !'.-.,..," ... _ ________ _ ......_ ....... ____ _,"""'" _..."r-... -1.., ... " __ "___ ------�-----

�..,-"_,.." ___ .,,...__"""' --.... --- ---�--"' w.v----·---"-- ------"..-"--·- - �-� ---- _ ... �"----... -""- -===-:==':.:.�".:'8'- =--====�....:..::-�=� ::::::""":.��-- ====-.:="===:-::-=-

_ ... _" _____ ...,_"'_ �- ....... --.... ·---· ... _____ ______ _ -- -... -�,._,. __ __ _____ "".......__ .__ --lolo---�--· -----�---·-------"-"- --·-........ _ ... ____ _ �-=-s.:=.=::o:.:.:.:.":...- ::::.·.:.:::...-::..�=:�--

Slika 62. Prikaz teksta и dve kolone.

1 1 1

Prafi.tifi.um iz Wеь dlzajna

Lon.>m ipsum ......,. ... v...._" ____ --""- 11-.�--�-"--� ...... _ " _ "� .... -..._.. ... " --- --ю.. ...,.__ � � -...... -

и.....,......,..._.,,_.,.......,._ .....-- - - - � -.. о.-"--."'-*" ..... ..._ н.-" ... ..,,.""--еr"- _.....,. _...,._ __ ��"i..-. "�...,,..._ "''" ь-... 11>«,..,.......м"� -� _ _ 11о_" __ њ.. ------....... "--ы.....-"-·-·"- .... -i-." ... " ..... __ - i..r-.,._.,.... ..... .__ ... •• -.,-• .w.. Noc<.-" м. - -м--..-...... -..... ..._..,. .... ..._. ____ ..,. � - п- "-.. ..... "..�._.._ --ы-�-·�·- """'....., ....i...м.,._.i-ы.v--� __ ..._ si_...,.,..._ w..... c-1111-r..- W.....� ,._.� N••••._." ... Pl.-_М..000 ...... "l&•...,.W.. ,i.. i-..-c- � - - .._ · - � -- "--........... _ ""� _" __ _ D_,,_.,." ... "r.w-. • ..-..- n-- - "--=-iь.ro - i.- ..-.i. - ".- - p..,,-.-�."_.,.,,_.,," -·"'*""- - "' "oi.......,i.-ьo-...,,1 .-.-�...." .... " ь.ь ы... ,_

:..'"7:::::.�=.· ... �" :..�==�l'r� :::::=:;:;:.....:;:-""-....... "" .... '--'1'-"41"' •-. _"l'.,._"""- ""�"fwc< -•Ulol>м.o---�f><llU Coo.te< ............ 111 lfw<1>noli."->1 _ , .............. " -...<Ь о.r..- !;,.._, __ --с."""""'"""'"'-. •-«-•ll�JOodoмc:•� ,_..,lclo!>"'""'� u...,..," -·'°-''"'-N-� ()_.".., ....., __ ",_1111.,.. "'--t..Jolc<••_......"-... ---"""'--·�- --.i"""'·"'"*-" .... ..,,..,,,") •-·- "'--" ... ... •-cw.i-1<><"'"_,....._ "" D...: ro- ,_ .,.., � -l'Т._4"-.�..t._1t. __ - с-....."--."-..... -�-ы..� - h-.... � " - � 1"<-... _._"1ю-.• "81&..._ F"• .._,, __ ""'"' .......... "f..,< _...__, Nloo "___ "-----"r..-- -----"'"-(1&8oqotdo_N<l_ Dootc _ - 1.orto..-dolo<•-.c- - • S...-..wl_•._ "..,"�-�Do.<o&. .,......,..., ,,,,_.., ____ -- � « oc.....,. N-�-___ "_..._,..."" __ " __...._ ... _ .... _ ........, _ " _ " ____ _ s..i"._ _ _ _ "....,_r ..... __ " ___ "..&. . ......__ �..---,.....--.--... �" ....... "- ..,.._. __ .._,_ ... � - � " --..... "- .....

- � ----- - ,_._"._ _ _ ....,...._ _, р,_-._ ___ "__ _. _ _.. - · - - N• ----o-.i."-...

=�=::.::�.-��,.! =�..=.:.':�...=... ::.!.�==�-=--_ .... ""&1о ,..__ ,__ - -...-·•·--Ь,.11 -........-..i - w. v-_,.,,

==:w-::.-=:-"-.:::.... �=-- -,.... ::::.�i.:..--::.:·..::. -* �·"-·- _..._ _�"'-----"ac- N-�-- v-.-..њ ___ а...• - � - · - - N• _ " _ "� .,,..�- --.id.lo<.""""-'1c" .... i.... ... ·--N.," .... ),(-.._ ....._ � ..... ·--- .... i:r-. - - - � - --------_ Cw_tl_o.i.o «'""-... _ ..... ""� ...... - -r..n- -� ....... - r... ..... �•'P'"""-·•�i.." r ... _,.,.,_...._.oc...-.r-, ·----�,._ ""---·-"-- --6.-" ...... -"� _, __ - i-...,.....dolo<•-.c_,".,. '°""к,...lill. �o>d-.c•do-.

Slika 63. Prikaz teksta и tri kolone.

Primer 1 05. CSSЗ prikaz teksta и kolonama (Slika 63) . Dati kod sacuvati kao ,.primerJOS.htmf' (bez znakova navoda) . Koriscena svojstva rade samo pod Mozilla Firefox browser-om (-moz-) Za ostale browser-e koristite odgovarajuce pre/ikse.


<head><title>Primer 1 04 1 Web dizajn praktikum</title> <style>

#kolone{ width:960px; margin:O auto; -moz-column-width:auto; -moz-column-coun t: 3;}


<div id="kolone"> <hl >Lorem ipsum<Љ l >

<p>Na ovo meto ubaciti tekst.</p> <р> Na ovo meto ubaciti tekst.</p> <р> Na ovo meto ubaciti tekst. </р> <р> Na ovo meto ubaciti tekst. </р> <р> Na ovo meto ubaciti tekst. </р>

<div> <Љody><Љtml>

1 1 2

X9vl_L

Praktikum iz VV еЬ dlzajna

ХМL osnove

Primer 1 06. Jednostavna XML datoteka. Dati kod sacuvati kao primer106.xmf' (bez znakova navoda) .

<?xml version=" l .O" encoding="utf-8"?> <! - -Ovo је xml komentar -- > <poruka>

<primalac>Nikola Relj in</primalac> <poslao>Marko М Spasojevic</poslao> <naslov>Pocetak rada sa XML-om</naslov> <telo>Poruka kojom Vas podsecam da ove nedelje radimo sa XML

om.</telo> </poruka><! - - Ovo је primer XML fajla - ->

Primer 1 07. XML datoteka, sa porukam. Dati kod sacuvati kao ,primer107.xmf' . (bez znakova navoda)

<?xml version=" 1 .0" encoding="utf-8"?> <poruke>

<poruka> <primalac>Nikola Reljin</primalac> <poslao>Marko М Spasojevic</poslao>

<naslov>Pocetak rada sa XML-om</naslov> <telo>Poruka kojom Vas podsecam da ove nedelje radimo

sa XML-om</telo> </poruka> <poruka>

<primalac> Nikola Reljin</primalac> <poslao>Nenad Kojic</poslao> <naslov>Zavrsili smo XML</naslov> <telo>Ove nedelje zavrsavamo rad sa XML-om</telo>

</poruka> <poruka>

<primalac> Nikola Reljin</primalac> <poslao>Nenad Kojic</poslao> <naslov> ХМL cuva razmake</naslov>

1 1 5


<telo>Ovaj tekst је sa dosta razmaka iz cega mozete videti da XML cuva prazan prostor za razliku od HTML-a</telo>

</poruka> <poruka>

<primalac> N ikola Relj in</primalac> <poslao>Marko М Spasojevic</poslao> <naslov>Rad sa entitetima</naslov> <telo>Da Ьi ispisali znakove koji su rezervisani u XML-u

morate da ih pisete u oЫiku entiteta.Neki od entitea su: < > & ' " </telo>

</poruka> </poruke>

Primer 1 08. XML datoteka, sa atriЬutima. Dati kod sacuvati kao ,.primerl08.xml" (bez znakova navoda) .


<poruka prioritet="normalan"> <primalac pol="M">Nikola Reljin</primalac> <poslao pol="M">Marko М Spasojevic</poslao> <naslov>Pocetak rada sa XML-om</naslov> <telo>Poruka kojom Vas podsecam da ove nedelje radimo

sa XML-om</telo> </poruka> <poruka prioritet="srednji">

<primalac pol="M">Nikola Reljin</primalac> <poslao pol="M">Nenad Kojic</poslao> <naslov>Zavrsili smo XML</naslov> <telo>Ove nedelje zavrsavamo rad sa XML-om</telo>

</poruka> <poruka prioritet="visoki">

<primalac pol ="Z"> Milena Vesic</primalac> <poslao pol="M">Nenad Kojic</poslao> <naslov> XML cuva razmake</naslov> <telo>Ovaj tekst Је sa dosta razmaka iz cega mozete

videti da ХМL cuva prazan prostor za razliku od HTМL-a</telo> </poruka>

1 1 6


<poruka prioritet="normalan"> <primalac pol="M">Nikola Reljin</primalac> <poslao pol="Z"> Milena Vesic</poslao>

<naslov>Rad sa entitetima</naslov> <telo>Da Ьi ispisali znakove koj i su rezervisani u XML-u

morate da ih pisete u oЫiku entiteta.Neki od entitea su: < > & ' " </telo>

</poruka> </poruke>

Primer 1 09. Formatiranje prikaza XML datoteke pomoci CSS-a (Slika 64). Date kod sacuvati kao ,.primer109.css" i ,.primer109.xml" (bez znakova navoda) . primer 109. css

Studenti { border: 1 рх solid #ООО; margin:20px auto; width:бOOpx; padding: 1 Opx;background-color:#CCC;display:Ыock; } Student { background-color:#888; display:Ыock; margin:20px Орх; } imePrezime, broj lndeksa, email, datumRodjenj a{ display:Ыock; margin:5px;} [ status="b"] { background-color:#OOOOFF; color:#FFF;}

primer 109.xml

<?xml version=" 1 .Q'' encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="primer109.css" ?> <Studenti>

<Student status="b"> <imePrezime>Marko Markovic</imePrezime> <bro jl ndeksa> 1 23 /1 О</Ьrој Indeksa> <email>[email protected]</email> <datumRodjenja>

<dan>4</dan> <mesec> 2</mesec> <godina> 1 985</ godina>

</datumRodjenja> </Student>

1 1 7


<Student status="s"> <imePrezime> Апа Ј oksimovic</imePrezime> <brojlndeksa> 23/09<Љrо jlndeksa> <email>[email protected]</email> <datumRodjenja>

<dan> 20</dan> <mesec>6</mesec> <godina> 1 986</ godina>


<Student status="b"> <imePrezime>I van 1 vanovic</imePrezime> <broj Indeksa> 34/ 1 О<Љrој Indeksa> <email>[email protected]</email> <datumRodjenja>

<dan>23</dan> <mesec> 1 O</mesec> <godina> 1 987</godina>


<Student status="s"> <imePrezime>Petar Markovic</imePrezime> <broj lndeksa>200/ 1 1 <Љroj lndeksa> <email>[email protected]</email> <datumRodjenja>

<dan>24</dan> <mesec>4</mesec> <godina> 1 986</godina>


</Studenti>

Slika 64. Prikaz XML podataka.

1 1 8


Primer 1 1 0. ХМL imenski prostori (namespace). Dati kod sacuvati kao ,.primerJJO.xml" (bez znakova navoda) .

<?xml version=" 1 .0" encoding="UTF-8" ?> <Studenti xmlns:ict="http ://www.ict.edu.rs/">

<ict: Student status="b"> <ict: imePrezime> Marko Markovic</ict:i mePrezime> <ict: bro ј Indeksa> 1 23/1 O</ict: broj Indeksa> <ict:email>marko.markovic@ict .edu .rs</ict:email> <ict:datumRodjenj a>

<ict: dan>4</ict: dan> <ict:mesec>2</ict:mesec> <ict:godina> 1 985</ict:godina>

</ict:datumRodj enj а> </ict: Student> <ict:Student status="s">

<ict: imePrezime>Ana Joksimovic</ict:imePrezime> <ict: bro jlndeksa> 23/09</ict: bro ј Indeksa> <ict: email>[email protected]</ict:email> <ict: datumRod jen ја>

<ict: dan> 20</ict: dan> <ict:mesec>б</ict:mesec> <ict:godina> 1 986</ict:godina>

</ict:datumRodj enja> </ict: Student>

<ict: Student status="b"> <ict: imePrezime> 1 van 1 vanovic</ict:imePrezime> <ict:brojlndeksa> 34/ 1 O</ict: bro j lndeksa> <ict: email>i van. [email protected]</ict :email> <ict: datumRodjenja>

<ict:dan>23</ict:dan> <ict:mesec> 1 O</ict:mesec> <ict:godina> 1 987</ict:godina>

</ict:datumRodjenj а> </ ict: Student>

</Studenti>

1 1 9

Prafi.tikum iz VVeb dlzajna

Primer 1 1 1 . XML datoteka, podaci tipa CDA ТА. Dati kod sacuvati kao ,primerlll.xml" (bez znakova navoda) .


<poruka> <primalac> Nikola Relj in</primalac> <poslao>Marko М Spaso jevic</poslao> <naslov>Pocetak rada sa XML-om</naslov> <telo><! [CDATA[ <hЗ>Poruka kojom Vas podsecam da

ove nedelje radimo sa XML-om</hЗ> ]]></telo> </poruka> <poruka>

<primalac> Nikola Relj in</primalac> <poslao> N enad Кој ic</poslao> <naslov>Zavrsili smo XML</naslov> <telo><! [CDATA[ <hЗ>Ove nedelje zavrsavamo rad sa

ХМL-оm<ЉЗ> ]]></telo> </poruka> <poruka>

<primalac>Nikola Reljin</primalac> <poslao>Nenad Kojic</poslao> <naslov> XML cuva razmake</naslov> <telo><! [CDA Т A[Ovaj tekst је sa dosta razmaka iz

cega mozete videti da XML cuva prazan prostor za razliku od HTML-a] ]></telo>

</poruka> <poruka>

<primalac> Nikola Relj in</primalac> <poslao>Marko М Spasojevic</poslao> <naslov>Rad sa entitetima</naslov> <telo><! [CDA TA[Da bi ispisali znakove koji su rezervisani

u XML-u morate da ih pisete u oЫiku entiteta.Neki od entitea su: < > & ' &qout; ] ]></telo>

</poruka> </poruke>

1 20


Primer 1 12 . ХМL datoteka, sa ponovljenim tagovima. Dati kod sacuvati kao .JJrimer112.xmf' (bez znakova navoda) .

<?xml version=" 1 .0" encoding="UTF-8" ?> <Studenti>

<Student status="b"> <imePrezime> Marko Markovic</imePrezime> <brojlndeksa> 123/1 O</Ьrojlndeksa> <email>[email protected]</email> <Testovi> Prvi test</Т estovi> <Testovi> Drugi test</Т estovi>

</Student> <Student status="s">

<imePrezime> Апа Ј oksimovic</imePrezime> <bro jlndeksa> 23/09</Ьrој Indeksa> <email>[email protected]</email> <Testovi> Prvi test</Т estovi> <Testovi>Drugi test</Тestovi> <Testovi>Treci test</Тestovi> <Testovi>Cetvrti test</Т estovi>

</Student> <Student status="b">

<imePrezime> Ivan 1 vanovic</imePrezime> <broj lndeksa> 34/1 O</Ьrojlndeksa> <email>[email protected]</email> <Testovi>Prvi test</Тestovi> <Testovi>Drugi test</Тestovi> <Testovi>Cetvrti test</Т estovi>

</Student> <Student status="s">

<imePrezime> Petar Markovic</imePrezime> <brojlndeksa>200/l l </Ьrojlndeksa> <email>[email protected]</email> <Testovi>Prvi test</Тestovi>

</Student> </Studenti>

Primer 1 1 3 . Primer DTD datoteke za ХМL kod u pпmeru 1 06. Dati kod sacuvati kao ,primer113.dtd'' (bez znakova navoda)

1 2 1


<!ELEMENT poruka (primalac,poslao,naslov,telo)> <! ELEMENT primalac (#PCDATA)> <!ELEMENT poslao (#PCDATA)> <!ELEMENT naslov (#PCDATA)> <! ELEMENT telo (#PCDATA)>

Primer 1 14. Primer ukljucivanja DTD datoteke u ХМL datoteku. Dati kod sacuvati kao ,primer114.xmr' (bez znakova navoda) .

<?xml version=" l .O" encoding="utf-8"?> <!DОСТУРЕ poruka SYSTEM "primer112.dtd"> <poruka>

<primalac> Nikol а Relj in</primalac> <poslao>Marko М Spaso jevic</poslao> <naslov>Pocetak rada sa XML-om</naslov> <telo>Poruka kojom Vas podsecam da ove nedelje radimo sa XML

om.</telo> </poruka>

Primer 1 15 . Primer zajednickog pisanja DTD koda i XML koda. Dati kod sacuvati kao ,primerllS.xmr' (bez znakova navoda)

<?xml version=" l .O" encoding="utf-8"?> <! DOCTYPE poruka [ <!ELEMENT poruka (primalac,poslao,naslov,telo)> < !ELEMENT primalac (#PCDATA)> <! ELEMENT poslao (#PCDATA)> < !ELEMENT naslov (#PCDATA)> <! ELEMENT telo (#PCDATA)> ]> <poruka>

<primalac>Nikola Reljin</primalac> <poslao>Marko М Spasojevic</poslao> <naslov>Pocetak rada sa XML-om</naslov>

<telo>Poruka kojom Vas podsecam da ove nedelje radimo sa XMLom.</telo> </poruka>

1 22

Praktikum iz VVeb Шzајпа

Primer 1 1 6. Primer DTD koda za primer 1 07. Dati kod sacuvati kao primer116.dtd'' (bez znakova navoda) .

< !ELEMENT poruke (poruka+)> <! ELEMENT poruka (primalac,poslao,naslov ,telo )> <! ELEMENT primalac (#PCDATA)> <! ELEMENT poslao (#PCDATA)> <! ELEMENT naslov (#PCDATA)> <! ELEMENT telo (#PCDATA)>

Primer 1 1 7 . Primer DTD koda za primer 1 08. Dati kod sacuvati kao ,primer11 7.dtd" (bez znakova navoda) .

<!ELEMENT poruke (poruka+)> <! ELEMENT poruka (primalac,poslao,naslov ,telo )> < ! ELEMENT primalac (#PCDATA)> <! ELEMENT poslao (#PCDATA)> <! ELEMENT naslov (#PCDATA)> < !ELEMENT telo (#PCDA ТА)>

<!ATTLIST poruka prioritet CDATA #REQUIRED> <!ATTLIST primalac pol CDATA "m"> <!ATTLIST poslao pol (mlz) "z">

Primer 1 1 8 . Primer DTD koda za primer 1 12 . Dati kod sacuvati kao ,primer118.dtd'' (bez znakova navoda) .

<! ELEMENT Studenti (Student+)> < ! ELEMENT student ( imePrezime, broj 1 ndeksa,email, Т estovi+ )> <! ELEMENT imePrezime (#PCDATA)> <! ELEMENT brojlndeksa (#PCDATA)> <! ELEMENT email (#PCDATA)> <! ELEMENT Testovi (#PCDATA)>

<!ATTLIST student status (bls)>

1 23


Primer 1 1 9. Primer DTD koda za primer 1 09. Dati kod sacuvati kao ,primer119.dtd'' (bez znakova navoda) .

< !ELEMENT Studenti (Student+)> < ! ELEMENT student ( imePrezime, broj Indeksa,email,datum )> < !ELEMENT imePrezime (#PCDA ТА)> <!ELEMENT broj lndeksa (#PCDATA)> <!ELEMENT email (#PCDATA)> <! ELEMENT datum (dan,mesec,godina)> <! ELEMENT dan (#PCDATA)> <! ELEMENT mesec (#PCDATA)> < !ELEMENT godina (#PCDATA)> <!ATTLIST student status (bls)>

Primer 1 20. XML Schema za pпmer 1 06. Dati kod sacuvati kao ,primer120.xsd" (bez znakova navoda) .

<?xml version=" 1 .0"?> <xs: schema xmlns:xs="http://www.ict.edu.rs/webdizajnSchema" targetN amespace="http ://www.i ct.ed u.rs" xmlns="http://www. ict.ed u.rs" elementFormDefault="qualified"> <xs:element name="poruka">

<xs:complexType> <xs:sequence>

<xs:element name="primalac" type="xs:string"/> <xs:element name="poslao" type="xs:string"/> <xs:element name="naslov" type="xs:string"/> <xs:element name="telo" type="xs: string"/>

</xs: sequence> </xs:ComplexType>

</xs:element> </xs: schema>

1 24


primer 106.xml

<?xml version=" l .O" encoding="utf-8"?> <poruka xmlns="http ://www.ict.edu.rs" xmlns:xsi=" http://www.wЗ.org/2001 /XMLSchema-instance" xsi:schemaLocation=" primerl 19.xsd ">

<primalac>Nikola Relj in</primalac> <poslao>Marko М Spasojevic</poslao> <naslov>Pocetak rada sa XML-om</naslov> <telo>Poruka kojom Vas podsecam da ove nedelje radimo sa XML

om.</telo> </poruka>

Primer 1 2 1 . XML Schema za primer 1 08. Dati kod sacuvati kao ,primer121.xsd" (bez znakova navoda) .

<?xml version=" 1 .0"?> <xs:schema xmlns:xs="http://www .ict.edu.rs/webdizajnSchema" targetN amespace= "http://www . ict.ed u.rs" xmlns="http://www .i ct.ed u.rs" elementFormDefault="qualified"> <xs:element name="poruka">

<xs:complexType> <xs:attriЬute name="prioritet" type="xs: string" /> <xs:sequence>

<xs:element name="primalac" type="xs:string"/> <xs: complexType>

<xs:attriЬute name="pol" type="xs: string"/> </xs:complexType>

<xs:element name="poslao" type="xs: string"/> <xs:complexType>

<xs:attriЬute name="pol" type="xs: string"/> </xs: complexType>

<xs:element name="naslov" type="xs:string"/> <xs:element name="telo" type="xs:string"/>

</xs:sequence> </xs:ComplexType>

</xs:element></xs: schema>

1 25


Primer 1 22. XML primena, RSS feed (Slika 65) . Dati kod sacuvati kao .primer122. rss" (bez znakova navoda)

<?xml version=" l .O" encoding="UTF-8" ?> <rss version="2.0">

<channel> <title>Kratke vesti</title> <link>http://www .kratke-vesti.com</link> <description>Ovo ј е portal koji sadrzi vesti</description> <item>

<title>Naslov vesti broj 1 </title>

S lika 65. RSS ikonica .

<link> http://www.kratke-vesti.com /vestl </link> <description>Ovo је kratak opis vesti broj 1 </description>

</item> <item>

<title>Naslov vesti broj 2</title> <link> http://www .kratke-vesti.com /vest2</link> <description>Ovo ј е kratak opis vesti broj 2</description>

</item> </channel>

</rss>

126

Praktikum iz VVeБ d1zajna

Literatura

Jennifer Niederst RobЬins, ''Naucite Web dizajn ", Mikro knj iga, Beograd, 2008

2 Josh Hill i James А Brannan, "Brilj antno HTML5 i CSSЗ'', Mikro knj iga, Beograd, 2 0 1 1

3 Elliotte Rusty Harold, W. Scott Means, "XML za programere'', Mikro Knj iga, Beograd, 2006

4 Kris Jamsa, Konrad King, Andy Anderson, "HTML i Web dizajn kroz prakticne primere'', Mikro Knj iga, Beograd, 2003

5 Michael Bowers , Dionysios Synodinos , Victor Sumner, "Pro HTML5 and CSSЗ Design Patterns", Apress, 20 1 1

1 27

OVA FORMA SALJE МАП. NA ADRESU: info@alil•·• ...

Korisoifko"""·CLozilkol Nom pi.tlO\io.{GocoWlo �

N..i.,ea Kl\МUO CD O

I PONROI J�

r �--