Inform A Tika

CSS (Cascading Style Sheets)
DananjeWeb stranice dele se na:

HTML deo koji definie sadraj (strukturu) Web stranice.
CSS deo koji definie izgled Web stranice (kao na primer boja slova , pozadine, margine i tako dalje).
JavaScript deo koji definie dinamiku Web stranice.
CSS pravilo(sintaksa)
Selektor{svojstvo1:vrednost1;svojstvo2:vrednost2; ...}
Selektor moe biti:
HTML element(tag)na koji de se opis stila odnositi.
Klasa HTML elemenata na koju de se opis stila odnositi.
Identifikaciona vrednost (ID) HTML elemenata na koji de se opis stila odnositi

Primer
Ako je selektor HTML element(tag) :
p{ svojstvo1:vrednost1;svojstvo2:vrednost2; ...}
Ako je selektor Klasa HTML elemenata :
.imeKlase { svojstvo1:vrednost1;svojstvo2:vrednost2; ...}
Ako je selektor Identifikaciona vrednost (ID) HTML elemenata:
#IDVrednost { svojstvo1:vrednost1;svojstvo2:vrednost2; ...}

Opisi stilova postavljaju se izmeu poetne i zavrne oznake stila(<style>...</style>) u zaglavlju HTML koda Web
stranice.
Opisi stilova se sastoje od jednog ili vie pravila.
CSS pravilo:
h1 {color:blue;font-size:30px;font-family:arial;}

Primer
<style>
body{margin:0px; background-color:blue;}
h1,h2 {font-family:Arial; font-weight :bold; font-size:20px; }
</style>

Selektor body govori web brauzer-u sledede: sve margine na stranici trebaju biti 0px, boja pozadine treba biti plava.
Selektori h1 i h2 govore web brauzer-u sledede: tekst treba biti napisan u Arial fontu-debljina slova treba biti
podebljana,veliina teksta treba biti 20px.

Primer

<html>
<head>
<title>Stilovi-primer</title>
<style type="text/css">
p{color: #0000ff;}
.crvenitekst{color: #ff0000; text-align:center;}
#zelenitekst{color:#00ff00; text-align:right; font-size:20px;}
</style>
</head>
<body>
<p>Prvi pasus. Tekst je levo poravnati plave boje. </p>
<p id="zelenitekst">Drugi pasus. Tekst je desno poravnat izeleneboje.</p>
<p class="crvenitekst">Tredipasus. Tekst je centriran i crvene boje. </p>
</body>
</html>

Gde moe da se nalazi CSS kod (stil)
CSS kod se moe zadavati na tri standardna mesta:
Direktno u HTML tag-u, koristedi argument style(inline).
Ugraen stil, u zaglavlju dokumenta unutar taga <style>.
U eksternoj datoteci, koja se linkuje tag-om <link>.

Primer ugraenog stila
<html>
<head>
<title>Ugraeni stil</title>
<style type="text/css">
body{background-color: gray;}
p {color: #0000FF; font-size: 24px;}
h1{color: #00FF00; font-family:Arial; font-size: 34px;}
</style>
</head>
<body>
<p>Prvi pasus.</p>
<h1>Drugi pasus.</h1>
</body>
</html>

Svojstva(atributa)
Sva prethodno pomenuta na vebama

HTML
HTML Osnove
HTML dokument je datoteka sa tekstom i tagovima.
Tagovi:
definiu strukturu i izgled dokumenta
otvarajudi tag: <ime_elementa>
zatvarajudi tag: </ime_elementa>
postoje i prazni tagovi: <ime_elementa> (pravilnije: <ime_elementa />)

Osim imena HTML elementa, tag ini i odreeni broj atributa, ije su vrednosti uokvirene navodnicima:
Primer: <body bgcolor=blue>
Tag govori browser-u ta da uradi, a atribut kako da to uradi.
Razlika izmeu malih i velikih slova ne postoji (title = Title = tiTLe).
Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima.

Struktura HTML dokumenta
Tagovi koji opisuju osnovnu strukturu HTML dokumenta:
html,
head i
body.

Tag <html> je okvir u kom se nalaze svi ostali tagovi
HTML dokument uvek poinje tagom <html>, a zavrava se tagom </html>.
Tag <head> uokviruje zaglavlje u kom se nalaze informacije o samom dokumentu (naslov opis, kljune rei, ime
autora, itd.); opcion je.
Sve ono to vidimo u prozoru browser-a, tj. sadraj stranice, nalazi se u telu dokumenta koje uokviruje element
<body>
u dokumentu sme da postoji samo jedan par tagova <body></body>.

HEAD
Browser ne prikazuje informacije koje se nalaze izmeu tagova <head> i </head>, osim sadraja taga <title>.
Sadraj taga <title> je naslov HTML dokumenta koji de se pojaviti u naslovnoj liniji web itaa.

BODY
Ovaj element odreuje glavni sadraj dokumenta.
Poetni tag <body> ima atribute koji omogudavaju da se odreuju karakteristike dokumenta (boja pozadine ili slika,
boja teksta, boja posedenih i neposedenih linkova, akcije koje se izvravaju kada se dokument uita, ili ako se ne uita
iz nekog razloga, itd.)

Primer
<html>
<head>
<title>Naslov</title>
</head>
<body>
Tekst dokumenta.
</body>
</html>

Obrada teksta
Pasusi teksta se navode izmeu <p> tagova.
Svi <p> tagovi poinju u novom redu.
Iza zavrnog </p> taga, prelazi se u novi red, sa dodatnim praznim prostorom izmeu.
Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag <br>.
U okviru poetnog taga <p> moe se navesti atribut align, koji odreuje horizontalno poravnanje paragrafa; vrednost
ovog atributa moe biti jedna od slededih: left, center, right i justify.
Ukoliko se navede samo poetni tag <p>, podrazumeva se da je slededi element u novom redu.

Primer
<html>
<head>
<title>Pasusi</title>
</head>
<body>
<p>Ovo je prvi pasus.</p>
<p>Ovo je drugi pasus.</p>
<p>Ovo je treci pasus sa praznim redom.<br></p>
<p align="right">Ovo je pasus koji je desno poravnat.</p>
<p align="center">Ovo je pasus koji je centriran.</p>
</body>
</html>

Naslovi se mogu istadi koridenjem elemenata h1, h2, h3, h4, h5 i h6.
Tag h1 daje najvedu veliinu slova, a h6 najmanju.
Svaki od ovih elemenata poinje u novom redu, a browser-i dodaju jo malo praznog mesta pre zaglavlja.
U okviru zaglavlja se moe navesti atribut align, koji odreuje horizontalno poravnanje zaglavlja; vrednost ovog
atributa moe biti jedna od slededih: left, center, right.

Primer
<html>
<head>
<title>Velicina slova</title>
</head>
<body>
<h1>Ovo je velicina slova u zaglavlju H1</h1>
</body>
</html>

Ukoliko treba promeniti sam izgled teksta, koriste se slededi elementi:
b - za podebljan tekst,
i - za iskoen (italik) tekst,
u - za podvuen tekst,
big - daje vedi font za 1 od zadatog,
small - daje manji font za 1 od zadatog,
blink - daje tekst koji treperi.

Tag <font> omogudava da se menja boja, veliina i vrsta fonta; sav tekst izmeu poetnog i zavrnog taga bide
prikazan sa odreenim karakteristikama .
Atributi u okviru poetnog taga <font> su:
face naziv fonta,
color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB skali),
size - menjanje veliine,
weight - debljina slova.

Primer
<html>
<head>
<title>Karakteristike teksta</title>
</head>
<body>
<p>Sledeci tekst ce prikazati upotrebu atributa za menjanje karakteristika teksta:</p>
<p><b>Ovo je podebljan tekst.</b></p>
<p><i>Ovo je iskosen tekst.</i></p>
<p><u>Ovo je podvucen tekst.</u></p>
<p>Ovo su slova uobicajene velicine, < >a ovo su slova za jedan veca od uobicajenih.</big></p> big
<p>Ovo su slova uobicajene velicine, <small>a ovo su slova za jedan manja od uobicajenih.</small></p>
<p><font color="red" size="10">Ovo je tekst crvene boje, slova su velicine 10.</font></p>
</body>
</html>

Liste
Postoje tri vrste lista:
unordered (neoznaena) lista,
ordered (brojna) lista i
definiciona lista.
Neoznaena lista predstavlja spisak elemenata ispred kojih se nalazi bullet.
Neoznaena lista poinje tagom <ul> (Unordered List)
Elementi liste se oznaavaju tagom <li> (List Item).
Ako se umesto taga <ul> koristi element <ol>, dobija se brojna lista (Ordered List), odnosno spisak elemenata sa
rednim brojevima.
Poetni broj liste se moe zadati atributom start.
Svakom elementu se moe dodeliti poseban broj, pomodu atributa value u tagu <li>.

Primer
<html>
<head>
<title>Uredjena lista</title>
</head>
<body>
<p>Ovo je primer uredjene liste:</p>
<ol start=3">
<li>Voce:
<ul>
<li>jabuka</li>
<li>kruska</li>
<li>jagoda</li>
</ul>
</li>

<li>Povrce:
<ul>
<li>paprika</li>
<li>kupus</li>
<li>paradajz</li>
</ul>
</li>
</ol>
</body>
</html>

Slike
Tag img definie sliku koja de se javiti u HTML dokumentu.
Atribut src sadri ime slike koja treba da se nae u dokumentu, ili putanju do te slike.
Atribut alt sadri tekst koji je ispisan na mestu slike, ukoliko ona nije uitana iz nekog razloga.
Dimenzije slike se zadaju preko atributa height i width u pikselima.
Slika moe biti poravnata u odnosu na ostatak dokumenta, a eljena vrednost se daje u artibutu align-
left,center,right.
Debljina ivice slike se zadaje u atributu border.
Primer:
<img src=Priroda.jpg width=300 height=300 align= right>

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

<img src ="//D:/My pictures/slika.jpg" border="3" alt="snoopy">
<br>
<img src ="slika.jpg" height="180" width="120" alt="snoopy" align="bottom">
<br/>

</body>
</html>

Linkovi
Linkovi na Web strani se prave pomodu <a> </a> oznake (a je skradeno od anchor-sidro).
Atributi ove oznake su:
href-(hyperlink reference) koji oznaava lokaciju na koju se preusmerava Web pretraiva kada korisnik klikne na
link.Ne zaboravite "http://" za punu adresu.

Linkovi mogu da ukazuju na:
drugi dokument,
drugi deo unutar dokumenta,
bilo koji resurs (ne obavezno HTML datoteka).

URI, URL
Odredini objekat se identifikuje uz pomod mehanizma URI.
URI (Uniform Resource Identifiers) slui za identifikaciju nekog resursa.
URL (Uniform Resource Locator)
podskup URI,
slui za lociranje nekog resursa na Internetu,
oblik:
protokol://raunar:port/putanja/datoteka

Relativni linkovi

Apsolutni linkovi

Definiu putanju slike ili nekog drugog elmenta-fajla koridenjem kompletne adrese gde se nalaze. Na primer:
http://www.nekisajt.com/skladiste/slike/pozadina.gif.
http://www.google.com

Apsolutni i relativni linkovi-primer
<html>
<head>
</head>
<body>
<h1>Linkovi</h1>
<p>
Ovaj primer sadri <a href="primer09.html">link</a> sa relativnom
putanjom na prethodni primer.
</p>
<p>
Ovaj primer sadri <a href="http://www.google.com">link</a> sa apsolutnom
putanjom na Google.
</p>
</body>
</html>

Dodatni atributi body taga
Atribut bgcolor boji pozadinu stranice.
Atribut link definie boju linka.
Atrigut vlink definie boju poseenog linka.
Atribut alink definie boju aktivnog (selektovanog) linka.
Atribut background definie putanju do pozadinske slike
Primer
<html>
<head>
</head>
<body bgcolor="gray" alink="yellow" vlink="red" link="green">
<h1>Oznaavanje delova dokumenata</h1>
<p>
Ovaj pasus obeleen je imenom prvi.
Ovo je <a href="#drugi">link</a> na <code>drugi</code> deo.
</p>
</body>
</html>

Tabele
Tabele se obino koriste iz dva razloga u HTML-u. Prvi je uredjenje podataka tabelarno. Drugi je manje uoljiv ali u
HTML-u mnogo vie koriden, a to je dizajniranje web stranica koridenjem nevidljivih tabela.
Osnovni tag tabele je <TABLE> </TABLE> tj. poetni i krajnji tag.U tabelu stavljamo jedan ili vie horizontalnih
redova.Tag horizontalnog reda je <TR> </TR> tj. poetni i krajnji tag. U horizontalnom redu stavljamo jednu ili vie
elija. elija ima poetni i zavrni tag <TD> </TD>. Prvi red u svakoj tabeli ini zaglavlje sa poetnim i zavrnim
tagom <TH> </TH>.
Tag <caption> </caption> slui za postavljanje imena, natpisa tabele.

Atributi tabele
Border-okvir tabele zadat u pikselima
Align-horizontalno poravnanje sadraja u tabeli, kao i same tabele na stranici-left, center, right
Valign-vertikalno poravnanje sadraja u tabeli-top,middle,bottom
Width-irina tabele izraena u pikselima ili procentima
Height-visina tabele izraena u pikselima ili procentima
Cellpadding-je prazan prostor oko sadraja elije i oznaava se pikselima
Cellspacing- je prazan prostor izmeu dve elije i izmeu elija i tabele i oznaava se pikselima
Primer:
<table border=3 cellspacing=10 cellpadding=10 align=center width=350 height=350>

OsnoveWeb dizajna
Web dizajn:
Web dizajn je planiranje, kreiranje izgleda i strukture,izbor sadraja i izrada Web stranice.
Oblasti Web dizajna obuhvataju: Web I grafiki dizajn, dizajn interfejsa I optimizaciju za Web pretraivae.
1991.godine kreiran je prvi Web sajt na Internetu.

Alati za izradu Web stranica
Microsoft FrontPage,Exspression Web
Macromedia-HomeSite, DreamWeaver
AdobePageMill
Tehnologije zaizraduWeb stranica:
HTML
CSS
JavaScript
PHP
ASP
MySQL
AdobeFLASH
AJAX

Web sajtovi
World Wide Web je multimedijalni informacioni sistem koji se izvrava na Internetu. Sastoji se od Web sajtova koji su
smeteni(hostovani)na serverima po itavom svetu.
Web sajtovi se sastoje od Web stranica:
Svaka stranica(page)ima sopstvenu fiziku adresu(URL).
Promena stranice se vri klikom na vezu(link:re,niz rei,dugme ili sliku).
Veza je dizajnirana i posebno oznaena na ekranu(osvetljena u drugoj boji ili podvuena).
Web stranice su formatirane u HTML (Hyper Text Markup Language) jeziku.

Postupak kreiranja Web sajtova
definisanje ciljeva i zadataka sajta
planiranje sajta
prikupljanje materijala za sajt
izrada sajta (dizajn)
proba i popravka sajta
promocija sajta
pradenje i odravanje sajta

Struktura Web sajta
Verovatno najvaniji deo planiranja sajta je struktura sajta,odnosno kako rasporediti sadraj u logike
jedinice(poetna strana,ostale strane,meni,linkovi,slike,video materijal i dr.).
Kada poinjete sajt morate imati u vidu na koji nain de biti rasporeen sadraj (tekst, slike, video...).
Uvek je poeljno kreirati grafiku emu,odnosno mapu sajta, to de vam pomodi u sagledavanju logike hijerarhije, a
takoe ostalima pojasniti strukturu vaeg sajta.

Poetna strana
Homepage(prva stranica)je poetna strana sajta
Browser je otvara kao prvu prilikom pristupa Web adresi
Obezbeuje linkove ka ostalim delovima sajta
Poetna stranica daje osnovne informacije o samom sajtu i njegovom sadraju
Poetna strana se snima podimenom index.htm

Imena strana
Ostale strane se uvaju kao posebani fajlovi i treba im davati imena prema sadraju stranice.
Primer:linkovi.htm ili biografija.htm
Nikada ne treba ostavljati razmake u imenima.Koristiti vierene nazive sa velikim poetnim slovima.
Primer:ListaProizvoda.htm ili DetaljiProizvoda.htm

Root folder Web sajta
Pri izradi sajta sve fajlove koji ine sajt treba drati iskljuivo unutar jednog foldera,tzv.Root foldera Web sajta.
Unutar root-a grupisati srodne sadraje unutar zasebnih foldera,radi kasnijeg lakeg snalaenja i odravanja.
Uvek praviti posebne foldere za slike,tekstove,video zapise i sl.

Vreme uitavanja stranice
Vreme uitavanja stranice(loadingtime) je tehniki faktor od presudnog znaaja za uspenost kreacije Web strane.
Najvani je da korisnik dovoljno brzo vidi korisnu informaciju na ekranu.
Stranice nikad ne bi trebale biti vede odmaksimum 200KB.Ali bez obzira kolika je vaa stranica u bajtima morate
proveriti koliko je potrebno vremena da se uita vaa poetna stranica na najsporijoj vezi(danas bi to jo uvek bilo
56Kbps).Ako posetilac otprilike za 4 sekunde ne moe videti o emu se radi na stranici velike su anse da de je i
napustiti.
Konana veliina stranice je manje znaajna ako korisnik moe brzo da preduzme neku akciju.
Struktura Web stranice
zaglavlje(header)
navigaciju(meni, menu)
Sadraj stranice(content)
Podnoje stranice(footer)
baner(banner)
bona traka (sidebar)
pozadina(backgorund)

Zaglavlje(Header)
Header predstavlja najvie pozicionirani element Web stranice.Bitna karakteristika header-a je to je header element
koji ostvaruje prvi vizuelni kontakt sa posetiocem.U header-u se,kao to ste do sada imali priliku da primetite,nalazi
logo Web sajta,uvek sa leve strane,slogan,fotografija I navigacija(meni).

Sadraj(Content)
U delu za sadraj se nalazi glavni sadraj stranice.U zavisnosti od tipa stranice na kojoj se nalazite,to moe biti tekst
sa slikama,grupa proizvoda,samo jedan proizvod i slino.

Bona traka(Sidebar)
Jo nije sasvim ustanovljeno gde se bona traka zapravo treba nalaziti.Na nekim sajtovima ona se nalazi sa leve,dok
je na ostalim sa desne strane.Ipak,ini se da sajtovi na kojima se bona traka nalazi sa desne strane prevolauju kao
noviji trend jer su se nekada bone trake na svim sajtovima nalazile iskljuivo na levoj strani.Sadraj bone trake je
esto raznolik.Uglavnom,ne treba propustiti priliku da se u bonu traku ubace linkovi(veze) ka profilima na
drutvenim mreama,navigacija ka popularnim sadrajima ili ak glavna navigacija(umesto u zaglavlju),I zato da
ne,deo sa reklamama(banerima).Bona traka je element bez kog mnogi sajtovi funkcioniu najnormalnije.Bona
traka se u vedini sluajeva nalazi samo na sajtovima koji imaju veliku koliinu sadraja.

Podnoje(Footer)
U footer-u svakog sajta nalazi se tekst o zatiti prava na koridenje sadraja.U podnoju se takoe moe nadi
navigacija,kratke kontakt informacije o vlasniku sajta ili veze ka drutvenim mreama.

Navigacija
Navigacija ili navigacioni meni je u stvari skup linkova koji meusobno povezuju stranice Web sajta.
Navigacija na Web sajtu mora biti pregledna,laka za koridenje i da omogudava korisniku da sa to manje klikova
doe do eljene stranice.Kada je god to mogude,dobro je rukovoditi se principom da korisnik sa bilo koje stranice
moe otidi na bilo koju drugu stranicu samo jednim klikom.Treba izbegavati otvaranje drugih stranica u novom
prozoru,novom tab-u ili pop-up prozoru.
Navigacija mora biti uoljiva,ali ne prenapadna da ne bi odvlaila panju korisnika od sadraja.

Boja pozadine i fontova
Boje pozadine i fontova su bitan faktor u grafikom dizajniranju sajta.Boje zavise od teme sajta i ciljne grupe kome je
sajt namenjen.Na primer, neki deiji sajt imade boje koje su arene,crvene,vesele i slino,dok recimo sajtovi firmi
imade dve,do najvie tri boje sa njihovim nijansama,bez arenila itd.
Odnos izmedju boje pozadine i boje fonta je najbitniji za itljivost teksta,da ne bi dolo do zamaranja posetilaca
prilikom itanja.Ukoliko se prilikom odabira pozadine teksta uzima neka slika,napravite je manje transparentnom
pomodu phptoshop-a.

Formatiranje teksta
Prezentacija teksta je vaan element u grafikom dizajnu stranica.Osim na pravilan raspored slika i ostalih elemenata
unutar teksta,potrebno je obratiti panju i na koridenje praznina u obliku margina,novih redova i paragrafa,proreda i
sl.Vano je da tekst sadri dovoljno praznina ili npr.okvira jer se na taj nain tekst grupie u celine koje se lake
pretrauju pogledom.
Vedina posetilaca koji se prvi put nau na nekoj stranici prvo pogledom "prelete po sadraju stranice i na taj nain
odlue sadri li ona ono to ih zanima.Zgusnuti tekst oteava takvo pretraivanje.

Fontovi
Kako nijedan korisnik nema instalirane iste fontove,to se pri izradi Web stranica moraju koristiti samo oni fontovi za
koje ste sigurni da su prisutni na svakom raunaru.Ovo obino suava izbor na Arial,TimesNewRoman, Verdana,
ComicSansMs i CourierNew.
Za stranice koje nastoje ostaviti ozbiljan utisak bi trebalo koristiti na primer Times ili Courier,a za zabavne i
mladalake stranice ComicSansMs.
Naslove i neke detalje za koje vam treba neki kitnjasti font koji imate samo vi prikaite kao slike,ali umereno.
Na stranicama itavog sajta mora da se koristi jedan te isti font,a nikako meati dve ili vrste fontova.Isto vai i za
veliinu fonta.

Slike
koridenju slika treba dobro razmisliti.Vie slika znai due uitavanje,pa zato oprez!Bez slika se ne moe,inae bi sve
izgledalo kao tehniki prirunik,a ne kao dizajnersko delo.
Osnovnu stranicu nemojte preopteretiti jer se ona uitava prva,a due ekanje zna da nervira(znate po sebi-kada se
neka stranica ne uita u prvih pola minuta,verovatno dete otidi na neku drugu).
Kao orijentacija moe se uzeti da pojedini grafiki elementi ne bi trebalo biti vedi od 50KB dok celokupna stranica ne
bi trebala prelaziti 200KB.
Koristite komprimovane slike u gif, jpg ili png formatu.

Animacije
Na stranicama su najrairenije Gif i Flash animacije.Najee se radi o dugmadima ili banerima kojima se eli privudi
panja posetilaca.I dok jedan do dva takva elementa po stranici ne smeta previe,vie od toga nije estetski lepo jer
pravi prilino arenila.Takvo arenilo za deije i zabavne sajtove moda i ne smeta previe, ali ako je u pitanju
poslovni sajt to apsolutno nije preporuljivo.
to se tie poslovnih sajtova nimalo nije preporuljivo koristiti bilo kakvu animaciju u tekstualnom delu,ali ne smeta
recimo u top(gornjem)delu sajta gde je logo firme na primer.

Zvuk
Nimalo se ne preporuuje da se prilikom otvaranja internet stranice automatski pokrene nekakva melodija.Nametati
tako neto posetiocima nije poeljno jer to moe prilino usporiti otvaranje stranica.
Ukoliko se ipak odluite na koridenje muzike,npr.tako neto nije toliko iznenaujude kod stranica u Flash-u,uvek
treba omoguditi opciju za ukljuenje ili iskljuenje zvukova i to na jako vidnom mestu u gornjem delu stranice.

Inform A Tika

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Inform A Tika

Uploaded by

Copyright:

Available Formats

CSS (Cascading Style Sheets)

DananjeWeb stranice dele se na:

You might also like