Organizacija

sadržaja web strane

Web dizajn

Dr Nenad Kojić
 Organizacija sadržaja
• Da bi sadržaj web strane, mogao da se proizvoljno
uredi, ali i prikazivao isto u različitim browser-ima,
potrebno je primeniti neki od načina organizacije
sadržaja web strane
• Organizacija podrazumeva pravljanje strukture
strane i definisanje koji deo stranice je namenjen
za prikaz konkretnog sadržaja (slike, teksta,...)
• Ovo treba da bude prva faza u kreiranju sajta

• Na primer, šema
jedne strane
izgleda ovako
 Organizacija web strane

• Organizacija se može uraditi na tri načina:

– Pomoću frame-ova (starija tehnika,

prevaziđena)

– Pomoću tabela (Neki pretraživači “ne

vole” tabele)

– Pomoću divova tj. CSS-om (preporučljivo)

Organizacija sadržaja pomoću CSS-a
 Rad sa divovima

• Organizacija sadržaja pomoću divova je u ovom

trenutku prioritetna jer to skoro svi web pretraživači
očekuju
• Ovakva organizacija podrazumeva da se ceo
sadržaj sajta logički grupiše u manje celine
• Te celine se fizički kreiraju tagom div
• Broj ovih logičkih celina nije ograničen

• Organizacija sajta pomoću divova, sama po sebi,

ne može da reši problem, obzirom da tag div nema
grafičku interpretaciju, i ima mali broj HTML
atributa, da bi se njim precizno “upravljalo”.
 CSS

• Iz tog razloga, divovi koriste CSS da bi se pomoću

njega izvršilo pozicioniranje diva, i definisanje svih
stilova i formata za sadržaj pojedinačnog diva

• CSS koji “upravlja” pozicijom i stilovima divova, se

obično nalazi u posebnom eksternom fajlu

• Na taj način, sve stranice sajta, pravila o rasporedu i

načinu prikaza unutar divova, nalaze na jednom
mestu, u eksternom CSS fajlu
• Svaka promena koja se želi na sajtu, tada se
realizuje na jednom mestu a primenjuje se na svim
stranama sajta
 Pravila kod pisanja divova

• Ceo sajt se nalazi u jednom divu, koji se najčešće

naziva okvir ili wrapper
• Na ovaj način ceo sadržaj sajta može se centrirati
u odnosu na prikaz u browser-u
• Primer centiranja sadržaja sajta
 Pravila kod pisanja divova
• Unutar diva koji “drži” ceo sajt, nalazi se proizvoljan broj
drugih divova
• Ovi divovi treba da ukažu na sledeći nivo “grube”
organizacije
• Unutar njih se može dalje preciznije struktuirati sadržaj,
upotrebom divova za manje delove sadržaja
• Svaki div ima svoju oznaku, po kojoj se prepoznaje, i po
kome se povezuje sa pravilom definisanim u CSS-u
• Tag div ima dva ključna taga za vezu sa CSSom: id i
class
• id se stavlja ako je struktura diva jedinstvena, dok se
class stavlja kada postoji više od jednog diva sa istom
strukturom
 class

• Obzirom da se class koristi u slučaju kada ima više

divova koji imaju istu strukturu, cilj je takve
sadržaje prepoznati, i grupisati u divove
• Na ovaj način se isti kod u CSS-u piše samo
jednom

• Obzirom da se može dogoditi “raspadanje web

strane”, manje divove treba grupisati u veće
• Ovo pravilo grupisanja primenjuje se i po
horizontalnom i vertikalnom grupisanju sadržaja
Primer
Drugi nivo detalja
Primer
Kod levog diva
 Div sa/bez CSS

• Organizacija sadržaja pomoću divova,

podrazumeva tri među faze:
– Kreiranje div tagova, u skladu sa željenom organizacijom
– Definisanje atributa div tagova, kojim se omogućava
delovanje CSS koda
– Pisanje CSS koda za pozicioniranje divova
– Pisanje CSS koda za definisanje stilova i načina prikaza
konkretnog sadržaja unutar divova

• Do sada prve dve faze su obrađene, i pripadaju

HTML kodu
• Druge dve pripadaju CSS-u
 CSS (Cascading Style Sheets)
• CSS predstavlja skup pravila kojima se bliže uređuje
stilizovanje i formatiranje dokumenata napisanih
primenom markap jezika.
• Cilj je napisati kod kojim se uređuje način prikaza
sadržaja unutar HTML strane tj. kreirati stilove
• Napomena: razdvojiti korisnički sadržaj HTML
dokumenta od stilova za prikaz (definisati na jednom
mestu način prikaza: font, veličine, margine, boje,
pozadinske slike i sl.)
• CSS omogućava da se unapred kreiraju stilovi,
kojima se definiše prikaz za svaki pojedinačni
element HTML koda
• Na taj način, izbegava se pisanje istih stilova više
puta
Sajt kreiran pomoću CSS
Sajt kreiran CSS-om, ali bez njega
Objašnjenje

• U oba primera, originalni sajt urađen je primenom

CSS-a
• CSS je korišćen za dve odvojene stvari:
1. Organizaciju sajta (pozicioniranje divova unutar
strane)
2. Grafičko definisanje stilova (pozadine, veličine i
boje teksta, definisanje veličine teksta i slika,
pozadinske boje i sl.)

• Nakon ukidanja veze između HTML strane i CSS

koda, vidi se pravi efekat odsustva CSS-a
Način pisanja koda u CSS-u
• Postoje dva opšta pravila za pisanje CSS koda:
1. Definisanje selektora (selekcije HTML elementa na koji će
se primeniti stil)
2. Definisanje svojstva i vrednosti (svojstvo-property koje
svojstvo elementa HTML taga se koristi a vrednost
definiše neku od mogućih vrednosti za to svojstvo)

• Selektor može biti ime taga, atribut id ili atribut class

• Svojstva postoji puno (npr. color, text-align, font-size,
font-family, background-image, width, height, .........)
• Vrednost zavisi od svojstva (npr. #FFFCCC, 12px, left,
small, italic, ....)

• Vrednost se dodeljuje svojstvu operatorom : a

razdvajaju sa ;
• Npr. color: #54B24B; font-size:20px;
Način povezivanja CSS-a sa HTML-om

• CSS se može na četiri načina povezati sa HTML-om:

1. Pisanjem unutar HTML fajla (u HTML tagu)

2. Pisanjem unutar HTML fajla (interni CSS kod)
3. Pisanjem van HTML fajla (eksterni CSS kod)
4. Kombinovanjem bilo koja od ova tri načina
 1. CSS unutar HTML fajla (u HTML tagu)

• Ukoliko se CSS kod piše u liniji taga HTML-a, onda se

1. a) kao veza HTML-a i CSS-a koristi atribut style

• Na taj način sav kod uključujući HTML atribut style se

piše po pravilima HTML-a, a vrednost ovog atributa je
kod koji se piše po pravilu CSS-a

• <p style="font-size:30px; color:#00ff00">Kreiranje CSS

stilova u liniji taga.</p>

• <p style="font-size: 40pt; color:red; background-

color:#FFFF00"> Kreiranje CSS stilova u liniji. </p>
 Primer za CSS kod u liniji taga

1. b)
<html>
<head>
</head>
<body>
Kreiranje CSS stilova u liniji.
<p style="font-size: 20pt">Kreiranje CSS stilova u liniji.</p>
<p style="font-size: 30pt; color:green">Kreiranje CSS stilova u
liniji. </p>
<p style="font-size: 40pt; color:red; background-color: #FFFF00">
Kreiranje CSS stilova u liniji. </p>
</body>
</html>
 2. CSS unutar HTML fajla (interni CSS)

• Ukoliko se CSS kod piše kao interni unutar HTML

2. a) strane, onda se piše u HEAD sekciji u posebnom tagu
<style> </style>

• Obzirom da se sada kod ne piše u liniji taga, nekako se

mora definisati na koji tag želimo da stil primenimo

• Za to je potreban selektor

• Na ovaj način, isti stil, koji se ranije pisao za svaki

pojedinačni tag, sada će se pisati samo jednom i važiti
unutar cele HTML stranice.
• Time se smanjuje količina koda, i svaka naredna
korekcija se radi samo na jednom mestu, za sve iste
stilove.
 2. CSS unutar HTML fajla (interni CSS)

• Ukoliko se CSS kod piše kao interni unutar HTML

2. b) strane, onda se piše u HEAD sekciji u posebnom tagu
<style> </style>
Selektor je
tag h1
<head>
<style type="text/css">
h1 {color:blue; font-size:20px ; font-family: verdana}
</style>
</head>
<body> Bez CSS-a
<h1>Neki naslov</h1>
</body>
Sa CSS-om
 2. CSS unutar HTML fajla (interni CSS)

• Kada se kao selektor koristi atribut class, ime klase

2. c) počinje simbolom .
<head>
Selektor je
<style type="text/css">
atribut class
.ime { font-size: 30pt ; color: blue}
</style>
</head>
<body>
<p class="ime">Iskaz na koji je primenjen stil iz head-a.</p>
<div class="ime">
<h4>Tri iskaza</h4>
<p>sa istim stilom</p>
</div>
</body>
 2. CSS unutar HTML fajla (interni CSS)

• Kada se kao selektor koristi atribut id, ime klase

2. d) počinje simbolom #
<head> <style type="text/css">
#spolja{ width:1000px; height:500px; background-color:#CCC333;
margin:10px 20px; border:1px dotted #000222; padding:5px; }
.tekst{ padding:5px; background-color:#FF0000; margin:5px 0px;}
</style>
</head>
Selektor je
<body> atribut id i class
<div id="spolja">
<div class="tekst">Ovo je neki tekst</div>
<div class="tekst">Ovo je neki tekst</div>
</div>
</body>
 3. CSS van HTML fajla (eksterni CSS)

• Prednost internog CSS-a je da se na jednom mestu može

3. a) napisati kod koji se može pozvati proizvoljan broj puta
unutar jedne web stranice
• Problem, jer što se taj isti kod mora pisati na svakoj strani
sajta ukoliko te stranice imaju iste stilove (što je često
slučaj jer sajt ima template – sve strane iste)

• U tom slučaju koristi se eksterni kod kome se sve stranice

mogu obratiti

• Ovo je najčešći način profesionalne upotrebe jer se svaka

naredna stilska korekcija na celom sajtu radi
centralizovano na samo jednom mestu – eksternom CSS
 3. CSS van HTML fajla (eksterni CSS)

• Način pisanja eksternog CSS-a je po istim do sada

3. b) definisanim CSS pravilima
• Nakon definisanja CSS koda, fajl se snima po nekim
imenom (npr. proba) i sa ekstenzijom css, tj. proba.css

• Obzirom da je ovaj css fajl fizički odvojen od HTML

stranice, mora se napraviti veza između njih

• To se realizuje unutar HEAD taga u posebnoj liniji koda

<head>
<link rel="stylesheet" type="text/css" href="proba.css“/>
</head>
 3. CSS van HTML fajla (eksterni CSS)

<html>
3. c) <head>
<link rel=“stylesheet“ href="stil.css" type="text/css“/>
</head>
<body>
<span class="naslov">Ispis klasom naslov </span><br/>

<div class="podnaslov">Ovaj podnaslov je ispisan <br/> istoimenom

klasom<br/>koja je postavljena da deluje u tag DIV.</div>

<table border="2">
<tr><td class="podnaslov">Prikaz u tabeli <br/>podnaslov</td></tr>
</table>

<div class="telo">Centralni deo ispisan je klasom telo.</div>

</body>
</html>
 stil.css
.naslov, .podnaslov {font-face:Verdana; color:red;
background:#707070; font-weight:bold;}
3. d) .naslov {font-size:16pt;}
.podnaslov {font-size:14pt;}
CSS ZA ORGANIZACIJU
HTML

• Ranije je rečeno da je CSS jedan od ključnih načina

organizacije sadržaja web strane
• Sa aspekta HTML-a, potrebno je napisati dobro
ugnježdene tagove div ili span
• Da bi se pozicija svakom od njih mogla definisati
pomoću CSS-a, potrebno je koristiti atribute id ili
class kao selektore, obzirom da su svi tagovi div
međusobno isti
• Kako se dizajn strane najčešće odnosi na sve strane
sajta, ovo je skoro neophodno raditi u eksternom
CSS-u
• CSS ima posebnu grupu svojstava koja se koriste u
pozicioniranju u odnosu na svojstva za stilove
Primarna CSS svojstva

• Jedno od ključnih svojstava je float

• Ovo svojstvo definiše poziciju nekog diva u odnosu
na horizonatalni prikaz
• U tom smislu, može imati vrednosti left i right
• Ukoliko ima više susednih divova, oni će se po
default-u ređati na levu stranu

• Pored float, bitno je proceniti kom divu i u kom

slučaju treba obavezno definisati svojstva width i
height

• Uloga svojstava margin i padding ima ključnu ulogu u

međusobnom odnosu divova, na mikronivou, dok
float radi na globalnom planu
Margin - Padding

• Svojstvo margin tj. padding po pravilu ima 4 vrednosti

margin:10px 5px 15px 20px;
• Ove vrednosti su redom: top, right, bottom, left

margin:10px 5px 15px;

• Ove vrednosti su redom: top, right, bottom

margin:10px 5px;
• Ove vrednosti su redom: top, right

margin:10px;
• Ove vrednosti su redom: top, right, bottom, left po 10px
Margin

• Pored klasičnih uloga svojstva magrin, postoji i jedna

dodatna, koja se često koristi
• Naime, glavni div, u kome se nalazi ceo sajt, se najčešće
centrira u odnosu na dimenzije browser-a
• Ovo se radi automatski pomoću svojstva margin sa
vrednošću auto. Preporuka je da pre toga stavi linija
koda kojom se setuju vrednosti a ne preuzimaju default-
ne iz konkretnog browser-a

*{margin:0px; padding:0px; }
#omot{ width:1024px; height:1000px; margin:0 auto;}
 Organizacija
sadržaja web strane
Web dizajn

Dr Nenad Kojić