Toaz - Info Html5 Css3 Kurspdf PR

––
Klaster akademija je projekat Poslovnog udruženja IKT klaster centralne Srbije

www.ict–cs.org
Autor i predavač: Srdjan Radenković, web dizajner
Sadržaj
Prezentacija firme na internetu putem web sajta ........................................................... 5

Internet domen ................................................................................................................ 6
Kako odabrati ime domena? .......................................................................................... 6
Hosting .............................................................................................................................. 7
Web sajtovi ....................................................................................................................... 8
10 osnovnih elemenata koje web sajt mora sadržati .................................................. 8
Tipovi web sajtova .........................................................................................................10
Uvod u HTML .....................................................................................................................11
Osnovni tagovi ...............................................................................................................12
Head tagovi ....................................................................................................................12
Liste .................................................................................................................................13
Tagovi za formatiranje teksta .......................................................................................13
Elementi forme ..............................................................................................................13
Tagovi slika i medija.......................................................................................................13
Elementi tabela ..............................................................................................................14
Atributi ............................................................................................................................14
Uvod u CSS .........................................................................................................................15
Ciljni elementi ................................................................................................................16
Svojstva i vrednosti ........................................................................................................17
Predefinisane ključne reči .............................................................................................17
Brojevne vrednosti ........................................................................................................17
Poravnanje teksta ..........................................................................................................18
Svojstva teksta ...............................................................................................................18
Fontovi ............................................................................................................................19
Pozicioniranje elemenata .............................................................................................19
Pozicija/veličina elementa .............................................................................................19
Klaster akademija HTML5 + CSS3 za početnike|2

Podešavanje svojstva ivica ............................................................................................19
Sadržaj koji ne staje u element ....................................................................................20
Definisanje boja i slika u pozadini ................................................................................20
Podešavanje stilova za linkove .....................................................................................21
Podešavanje svojstva kursora ......................................................................................21
Podešavanje stilova liste ...............................................................................................21
Preklapanje stilova (kaskadni stilovi) ...........................................................................22
Načini definisanja stilova ..............................................................................................22
Stil unutar HTML elementa .......................................................................................22
Stilovi definisani unutar dokumenta ........................................................................22
Stilovi definisani u eksternoj stranici stilova ............................................................22
Pravilno pisanje i uređivanje koda ...............................................................................23
Struktura izrade web stranica ..........................................................................................24
Definisanje <head> i <body> taga................................................................................24
Unošenje sadržaja na web stranice .............................................................................30
Naslovi (Headings) .........................................................................................................31
Liste (Lists) ......................................................................................................................31
Liste s brojevima (Numbered lists) ...........................................................................32
Liste s oznakama (Bulleted lists) ...............................................................................32
Definicijske liste (Definition lists) ..............................................................................32
Veze ili linkovi (Links) .....................................................................................................33
Apsolutni likovi ...........................................................................................................34
Relativni linkovi ...........................................................................................................34
Slike .................................................................................................................................35
Tabele .............................................................................................................................36
Horizontalna linija..........................................................................................................37
Entiteti .............................................................................................................................37
Struktura web sajta .......................................................................................................39

#top .............................................................................................................................40
#header .......................................................................................................................40
#main ..........................................................................................................................43
footer ...........................................................................................................................49
Responsive dizajn..............................................................................................................51
Bootstrap ...........................................................................................................................56
Grid Sistem? ...................................................................................................................57
Kako boje Vašeg sajta utiču na posmatrača? .................................................................59
Literatura / Linkovi ............................................................................................................62

Prezentacija firme na internetu putem web sajta
Globalizacija, razvoj interneta i telekomunikacija su uticali na privredu svuda u
svetu. Prisustvo na internetu danas je postalo jedan od presudnih faktora uspeha na
tržištu, bez obzira na veličinu kompanije ili delatnost kojom se bavi. Investicijom u web
sajt, više niste ograničeni na svoj grad ili zemlju - vaša firma lako i brzo postaje dostupna
svima na svetu. Web sajt je ogledalo firme i može mu pristupiti svako ko ima internet, bez
obzira na udaljenost, radno vreme ili broj posetilaca.
Za pravljenje zaista dobrih web sajtova, potrebno je da poznajete principe:
marketinga, dizajna i psihologije kupaca.
Isto tako važno je i da budete u toku sa internet trendovima. Internet se, kao i svet u
kome živimo, stalno menja. Uspešne formule za pravljenje sajtova iz prošlosti mogu biti
kontraproduktivne u budućnosti.
Dobar web sajt je onaj koji Vaši kupci lako pronalaze na internetu i koji komunicira
sa njima, a koji je prilagodjen upotrebi na svim
uredjajima, kako računarima tako i mobilnim
telefonima i tabletima (mobile-friendly). Web sajt
štedi Vaše vreme, jer ostvaruje kontakte sa
kupcima po ceo dan i noć omogućavajući Vam da
se posvetite drugim važnijim poslovima.
Web prezentaciju je neophodno prilagoditi
potrebama delatnosti firme. Svi oni imaju bitno
različite potrebe. Prezentacija treba da bude Vaša
lična karta na internetu, oblik prepoznavanja i mogućnost neposredne komunikacije sa
svima, kako sadašnjim, tako i potencijalnim klijentima.
Postoji nekoliko vrsta web prezentacija. Dovoljno je reći da kompleksnost
prezentacije, koja zavisi od toga da li je cilj napraviti složen dinamički sistem za
prezentovanje i interakciju sa posetiocima ili jednostavnu prezentaciju, direktno utiče na
njenu cenu i vremenski period izrade.
Jedna internet prezentacija se sastoji od tri dela:
1. Internet domen (adresa Vašeg sajta);
2. Hosting - server (fizička lokacija na kojoj je smešten);
3. Sadržaj web sajta (tekstovi, slike, muzika, video sekvence...itd).

Internet domen
Inernet domen je tekstualna oznaka koja identifikuje skup uređaja ili Internet
servisa, povezujući ih u jedinstvenu administrativno-tehničku celinu. Domen se sastoji iz
niza alfanumeričkih segmenata i cifara razdvojenih tačkama, saglasnih Internet
standardima. Naziv domena ne sme biti kraći od dva (2), niti duži od šezdeset tri (63)
znaka. Ime domena ne sme da sadrži crticu na početku ili kraju, takodje ne sme da sadrži
uzastopne crtice na trećoj i četvrtoj poziciji.
Sistem Internet domena (Domain Name System, DNS) je bazni Internet servis, koji
omogućava prevođenje Internet domena u IP brojeve i obrnuto. Tipovi internet domena
su:
• teritorijalni ili CCTLD (Country Code Top Level Domain) i
• generički ili GTLD (Generic Top Level Domain)
Teritorijalni domeni označavaju državu u kojoj je registrovan taj domen. Za teritoriju
Srbije CCTLD domen je .rs. Pored ovog domena, od januara 2012. godine Srbiji je
dodeljena i ćirilična adresa .срб.
Generički domeni su internacionalni domeni, i njih može registrovati bilo ko. Neki
od najpopularnijih GTLD domena su domeni .com, .net, .org, .info, .biz, .eu, .mobi, .me...
Do nedavno je postojalo nešto više od 20 gTLD domena, ali je u proteklih par godina
odobreno jako puno novih gTLD domena, koji kompanijama omogućavaju da registruju
ekstenziju prema njihovim željama, npr. .webdesign, .graphics, .google, .healthcare,
.hiphop, .xxx, .lawyer....1
U zavisnosti od potrebe, firma se odlučuje za registraciju određenog tipa domena.
Npr, škole će uzeti domen tipa .edu.rs, udruženja gradjana .org.rs, ili čak i .org, kompanije
koje su fokusirane na domaće tržište opredeliće se za .rs ili .co.rs domen, dok firme koje
su orijentisane ka svetskom tržištu se najčešće odlučuju za .com domen.
Kako odabrati ime domena?

Perfektno dizajniran websajt ne vredi mnogo ako nemate dobro osmišljeno ime
domena. Ali, koje ime domena može da bude uspešno? Na žalost, PERFEKTNO ime
domena ne postoji! Svaki posetilac Vašeg websajta zapamtiće web adresu, samo ukoliko
nije previše komplikovana. Potrudite se da odaberete ime domena koje će biti
jednostavno i lako za pamćenje, i ono što je najvažnije jedinstveno, da ne stvara konfuziju
sa drugim ili popularnijim sajtovima.
1
Spisak svih gTLD domena možete nači na http://en.wikipedia.org/wiki/List_of_Internet_top-
level_domains
Kada počnete da tražite ime domena, napravite listu interesantnih domena i
sužavajte izbor dok ne dođete do pravog rešenja. Ukoliko pokrećete prodajni sajt, u
imenu je poželjno da postoji nešto vezano za elektronsku trgovinu, prodaju ili kupovinu –
pravi primer je sajt kupujemprodajem.com koji je prodajni sajt oglasnog tipa.
Ukoliko je ime jednostavno, kratko i jedinstveno, ostaje vam samo da bude efikasno
i u pogledu pisanja – izbegavajte slova "q," "z," "x," "c," i "p", ali u našem srpskom jeziku,
prinuđeni smo da izbegavamo i tzv. Vukova slova, osim kada je reč o .срб domenu.
Imena brendova, kompanija, zaštićenih robnih marki – savetujemo da izbegavate
prilikom zakupa domena jer ćete sebi doneti više štete nego koristi. Iako je kod nas
pravna država prespora, ukoliko Vas vlasnik tuži, gotovo sigurno ćete izgubiti spor.
Domen kao ime brenda je dobitna kombinacija koja se preporučuje u svim
slučajevima – brendirate svoj proizvod, a samim tim Vaš domen postaje moćna alatka u
celokupnom procesu brendiranja proizvoda.
Hosting
Hosting je servis ili usluga koju plaćate Vašem hosting provajderu, a za uzvrat
dobijate određeni prostor na njegovom kompjuteru (serveru). Da bi Vaš sajt bio na
internetu, kompjuter gde se vaš web sajt nalazi (server) mora biti stalno povezan sa
internetom. Hosting provajderi poseduju velike i moćne servere koji hostuju Vaš sajt i
obezbeđuju da on bude non stop online, odnosno vidljiv.
Prva stvar koju trebate da uradite kada imate plaćen domen i hosting jeste da
domen povežete sa hostingom. Ovo nije nešto što ćete morati sami ručno da radite, jer
za potrebne svojih klijenata sve firme koje se bave registracijom domena će odraditi taj
posao.
Prilikom odabira hostinga najbitnije je opredeliti se za pravi hosting paket. Najčešće
je tu reč o manjim hosting paketima na jednom zajedničkom serveru, gde se pored vašeg
nalazi još nekoliko stotina ili hiljada sajtova. U ovom slučaju Vi dobijate odredjeni prostor
na serveru sa ograničenim resursima koje delite sa ostalim korisnicima. Cene za ovakve
pakete se najčešće kreću od 20-50 evra pa naviše, na godišnjem nivou.
Za nešto ozbiljnije sajtove obično se koriste virtualni serveri (VPS). Ovo je jedan
odvojeni deo servera gde su Vam unapred definisani resursi kojima raspolažete
(procesor, memorija, prostor na disku, mesečni protok). Za najzahtevnije korisnike u
ponudi su root (dedicated) serveri, gde korisnik ima čitavu mašinu na raspolaganju samo
za svoje potrebe. Kod velikih portala neretko se srećemo i sa nekoliko povezanih servera
koji opslužuju jedan web sajt.

Web sajtovi
Sada kada ste zakupili domen i hosting, sve što Vam treba je sadržaj za Vaš sajt.
Za izradu prezentacije potrebno je da znate kakav efekat želite da ostvari Vaša
prezentacija. Da li hoćete da prodate proizvod, pokažete klijentima čime se bavite,
ponudite određene usluge ili pak želite da imate internet kataloge svojih proizvoda
dostupne svima i u svako vreme.
Dizajn je slika Vaše firme na internetu. Posetioci sajta umnogome cene kredibilitet i
poslovnost Vaše kompanije kroz web dizajn. Loše dizajniran web sajt narušava imidž
Vaše kompanije, te zato morate biti oprezni kada je u pitanju web dizajn. Dizajn je proces
koji započinje sagledavanjem koncepta budućeg sajta, planiranjem sajta i na kraju
dizajniranjem. Postoji dosta elemenata koje treba uskladiti prilikom dizajniranja sajta:
izbor tehnike koja će se koristiti za izradu, sadržaj u vidu teksta, fotografije, animacije itd.
Sadržaj je razlog dolaska posetioca na Vaš web sajt. Način na koji je napisan sadržaj
može da utiče na uspeh vašeg sajta. U zavisnosti da li je sadžaj kvalitetan ili loš zavisiće i
rangiranje Vašeg sajta na internet pretraživačima, a time i broj poseta sajtu.
Dobar sadržaj treba da animira kupce i podstakne ih na akciju.
Navigacija web sajta je važan element koji ne smete zanemariti. Elementi web sajta
kao sto su header, navigacioni meni, sadržaj, footer i ostali, treba da imaju logičan
raspored. Posetilac ne sme biti zbunjen i dezorijentisan, jer može jednom akcijom,
jednim klikom miša napustiti Vaš web sajt.
10 osnovnih elemenata koje web sajt mora sadržati

1. Naslov web stranice. Prvi element koji posetioci Vašeg sajta vide jeste naslov.
Naslov mora opisivati šta se nalazi na njoj. To je osnovni element Vašeg websajta. On
pomaže posetiocima da odrede šta ih interesuje na Vašem websajtu. Naslov web stranice
mora biti jasan, koncizan i i da ima smisao. U okviru njega morate da napišete ključne
reči koje će privući Vaše potencijalne kupce.
2. Jednostavna navigacija. Ništa neće oterati posetioca Vašeg sajta kao konfuzna
ili komplikovana navigacija na sajtu. Kada Vaš websajt poseti potencijalni kupac,
potrebno je da u svakom trenutku zna na kojoj se stranici nalazi i da jednostavno
pronađe stranice koje je već posetio. Navigacioni meni mora da bude pristupačan i
jednostavan za razumevanje. Trebalo bi da bude na svakoj stranici websajta i lociran na
istom mestu Web stranice.
3. Efektivan sadržaj. Reči kojima opisujete Vaš proizvod ili uslugu osnovni su
preduslov uspeha vašeg biznisa. Opis će pomoći ili odmoći potencijalnom kupcu da
naruči vaš proizvod ili uslugu.
4. Jednostavan proces kupovine i naručivanja. Ukoliko posetilac želi da kupi Vaš
proizvod ili uslugu, pomozite mu da to učini. Ne ostavite ga u nedoumici. Potencijalnom
kupcu morate objasniti šta je potrebno da uradi, i to na najjednostavniji mogući način.
Ukoliko želi da kupi proizvod, pomozite mu tako što ćete nazvati link: KLIKNITE OVDE za
naručivanje proizvoda "X". Dostavite mu jasne i precizne instrukcije kako da naruči
proizvod i navedite mu šta može očekivati prilikom klika na neki link koji ga vodi na
stranicu za naručivanje.
5. Korisne fotografije. Fotografije i slike mogu pomoći Vašim kupcima da dožive
Vaš proizvod ili uslugu. Obavezno treba da postavite fotografije proizvoda koji prodajete.
Atraktivne fotografije mogu značajno pomoći prodaji vašeg proizvoda. Ukoliko prodajete
više proizvoda, koristite galerije fotografija i fotografije sa linkovima koji pritiskom
omogućavaju uvećanu fotografiju Vašeg proizvoda.
6. Prijava na newsletter. Većina posetilaca koji se prvi put nađu na Vašem sajtu
neće izvršiti kupovinu. Oni obično dolaze kako bi se informisali o Vašoj ponudi. Da biste
zadržali kontakt sa potencijalnim kupcima, pronađite način da prikupite njihove e-mail
adrese. Jedan od načina jeste da se prijave za besplatni elektronski magazine, tj.
newsletter. Drugi način je da im ponudite da besplatno downloaduju neki proizvod. Na
ovaj način dobijate šansu da ih imate u Vašoj bazi i redovno obaveštavate o novim
proizvodima, uslugama, promocijama kao i da zadržite kontakt sa njima. Opcija
prijavljivanja daje Vam odličnu priliku da posetioci sajta postanu Vaši kupci i da time
poboljšate prodaju.
7. Svedočenja kupaca. Odličan način da izgradite kredibilitet Vaše firme, tj. da
uverite vaše kupce da prodajete proizvode ili usluge koji zaista vrede je da uključite
komentare zadovoljnih kupaca koji objašnjavaju kako mu je Vaš proizvod ili usluga
pomogao da poboljšaju kvalitet svog života. Ispod komentara upišite imena vaših
zadovoljnih kupaca, a ako je moguće i njihove fotografije. Ovim ćete povećati kredibilitet
vaših proizvoda i usluga.
8. Stranica o nama. Posetioci su u većini slučajeva skeptični prilikom kupovine
preko interneta, jer se na ovaj način gubi lična interakcija ili poslovanje licem u lice.
Najbolji način da uverite posetioce ko ste i šta radite jeste da uključite stranicu O NAMA
koja sadrži osnovne informacije o Vama, Vašim zaposlenima i Vašem poslovanju.
9. Stranica pitanja i odgovori - FAQ. Obavezno treba da postavite stranicu pitanja
i odgovori koja sadrži osnovna pitanja posetioca sajta u vezi sa Vašim proizvodima ili
uslugama.
10. Vaši kontakt podaci. U cilju izvršenja prodaje i izgradnje Vašeg kredibiliteta,
postavite potpune informacije o načinima kontaktiranja vaše firme. Ovo podrazumeva
broj telefona, broj faxa, poštansku adresu, i e-mail adresu. Neka kontakt informacije
budu postavljene na svakoj stranici, ako je to moguće.

Tipovi web sajtova
Postoji mnoštvo statičkih web sajtova na Internetu. U prvi mah verovatno nećete
moći ni da vidite da je u pitanju statički sajt. Međutim, ukoliko je sajt mali, jednostavan,
pripada nekom preduzeću, samo pruža informacije, ne poseduje dodatke, niti posebne
opcije za posetioce, najverovatnije je da se radi upravo o njemu.
Statičke web sajtove mogu da nadograđuju, menjaju i ažuriraju samo poznavaoci
web dizajna i web programeri. Oni su najjeftiniji za hostovanje i dizajniranje. Mnoge
manje kompanije i dalje koriste baš njih kako bi imale prezentaciju na Internetu. Sa
dinamičkim sajtom niste samo pasivni posmatrač, već aktivan učesnik!
Prednosti statičkog web sajta
• Brz i jednostavan dizajn
• Lak za koriščenje
• Jeftin za hostovanje
Mane statičkog web sajta
• Zahteva dobro poznavanje web dizajniranja za rad na sajtu
• Sadržaj može postati statičan
Sa druge strane, dinamčki sajtovi u početku traže više novčanih ulaganja, ali
prednosti koje daje su mnogostruke. Prvo i najvažnije je to da vlasnik takvog sajta može
sam da dodaje i ažurira sadržaj. Na primer, vesti i događaji mogu da se postavljaju kroz
običan pretraživač. Dimaničke mogućnosti sajta su limitirane isključivo maštom.
Prednosti dinamičkih web sajtova
• Mnogo su funkcionalniji
• Jednostavniji za ažuriranje
• Nov sadržaj privlači posetioce i zadržava postojeće, plus dobar je za pretraživače
• Može da funkcioniše kao sistem koji dozvoljava korisnicima da sarađuju
Mane dinamičkih sajtova
• Sporije se izgrađuju (projektuju, programiraju i dizajniraju) i skuplji su
• Hosting je malo skuplji
Većina web sajtova iz protekle decenije su statičkog karaktera. Ipak, sve je više ljudi
koji uviđaju prednosti dinamičkih sajtova, jer dinamički sajtovi pružaju ono najbolje što
sajt može da ponudi. Da bi napravili kvaliteta web sajt, bez obzira da li je statički ili
dinamički neophodno je poznavanje HMTL-a i CSS-a.

Uvod u HTML
Pošto smo se već upaznali sa tipovima sajtova, u narednim
lekcijama ćemo i naučiti na koji način apsolutni početnici mogu da
naprave jednostavan web sajt. Za izradu sajta pomoću ovih lekcija
biće vam potrebna samo dobra volja i jedan program za obradu teksta
kao što je Notepad, mada preporučujem naprednije programe kao što
je Notepad++ za Windows korisnike i Geany za korisnike Linux
sistema. Naravno biće Vam potreban i internet pretraživač da bi mogli
da pogledate rezultate vašeg rada. Pretraživači koje ja preporučujem
su Mozilla Firefox ili Google Chrome.
HTML nije dovoljan za kreiranje kompletnog web sajta i danas je neraskidivo vezan
za CSS Mi ćemo se ovde upoznati sa trenutno aktuelnim verzijama, HTML5 i CSS3.
HTML je skraćenica od Hyper Text Markup Language, što nam govori da HTML nije
programski jezik, već jezik oznaka (eng. Markup - Oznaka). Da pojasnimo, HTML koristi
oznake (tagove) da opiše različite elemente internet stranice.
HTML tagovi se pišu unutar znakova < i >, postoje otvarajući i zatvarajući tagovi.
Otvarajući tag ima ulogu da označi početak nekog elementa, dok zatvarajući tag označava
kraj istog elementa. Npr.
<p>Ovo je paragraf</p>
<p> predstavlja otvarajući tag paragrafa, dok je </p> zatvarajući tag istog paragrafa.
Otvarajući i zatvarajući tagovi se razlikuju po tome što zatvarajući imaju znak / ispred
imena taga. Primeri tagova su još i <div>...</div>, <h1>...</h1>, <span>...</span>...
HTML elementi mogu se “usađivati” jedan u drugi i pri tome se mora voditi računa
redosledu zatvaranja elemenata. Primer:
Pravilno:
<div><p>Ovo je paragraf unutar div elementa</p></div>
Nepravilno:
<div><p>Ovo je paragraf unutar div elementa</div></p>
Kao što vidite kada se jedan element nalazi unutar drugog, treba da bude upisan
unutar istog kompletno, zajedno sa zatvarajućim tagom. To znači da se elementi
zatvaraju suprotnim redosledom od redosleda otvaranja.
Otvarajući i zatvarajući tagovi ne moraju da stoje u istom redu i broj praznih
redova između tagova i unutar tagova nema nikakvog efekta na izgled web stranice. Na
primer:

<p>
Ovo je paragraf
</p>
Je isto što i:
<p>Ovo je paragraf</p>
Takođe postoje i samozatvarajući tagovi, kojima nije potrebno stavljati zatvarajući

tag, već se zatvaraju sami dodavanjem kose crte na njihovom kraju (npr. <img />).
<img src="/images/slika1.jpg" border="0" alt="Uvod u HTML5 + CSS3" />
Otvarajući i zatvarajući tagovi u sebi mogu da sadrže druge elemente ili sadržaj, dok
samozatvarajući tagovi to ne mogu, i definišu se atributima.
Komentari se pišu u okviru  oznaka:

Osnovni tagovi
html - Kreira HTML dokument
head - Deo u kojem se nalaze naslov stranice i ostale informacije koje nisu vidljive
na samoj stranici
body - Glavni deo stranice, koji je vidljiv korisniku i u kome se nalazi sam sadržaj
h1, h2, h3, h4, h5, h6 - Tagovi za definisanje naslova, od najvećeg do najmanjeg
p - Paragraf teksta
div - Deli stranicu na različite sekcije/blokove
br - Pravi red razmaka u tekstualnom bloku
hr - Kreira horizontalnu liniju koja se najčešće koristi za vizuelno razdvajanje delova
sadržaja
blockquote - Koristi se za citiranje teksta, sa atributom za navođenje autora
Head tagovi
title - Definiše naslov stranice
meta - Sadrži osnovne informacije o stranici (ključne reči, opis i sl.)
link - Povezuje stranicu sa drugim dokumentima (CSS fajl, fav ikonica)
script - Sadrži (ili povezuje sa fajlom koji sadrži) skripte koje se izvršavaju na
klijentskoj strani
style - Sadrži stilove koji opisuju izgled HTML elemenata. Ovo je ranije bio standard,
ali se sada stil definiše u zasebnom CSS fajlu.
Liste
ol - Uređena lista (lista sadrži numeričko ili alfabetsko obeležavanje elemenata liste)
ul - Neuređena lista (obeležavanje elemenata liste se vrši simbolima kao što je
tačka, kvadratić...)
li - Element liste
Tagovi za formatiranje teksta

a - Definiše link
strong ili b - Definiše podebljan tekst
em ili i - Definiše iskošen tekst
u - Definiše podvučen tekst
span - Kreira umetnuti (inline) kontejner teksta
sub - Definiše potpisan tekst, pogodan za indeksaciju, npr. za H2O
sup - Definiše natpisan tekst, pogodan za prikaz stepena brojeva i sličnog, npr. x2
Elementi forme
form - Definiše formu, koja sadrži ulazne elemente i kontrole
fieldset - Grupiše elemente forme
legend - Definiše naslov elemenata grupisanih u fieldset
button - Definiše dugme (klikabilni element)
input - Definiše ulazni element u koji se unose informacije (tekst, email, šifra...)
textarea - Višelinijski ulazni element za unos teksta (npr. za unos komentara)
select - Lista za selektovanje stavki (jedne ili više)
option - Definiše stavku unutar select liste
label - Služi za opis elementa forme (npr. naziv pored email polja)
Tagovi slika i medija

img - Definiše umetnutu (inline) sliku
applet - Ubacuje Java aplikaciju u dokument
object - Definiše kontejner višestruke namene za učitavanje medija u dokument

param - Definiše parametre za applet ili object
map - Definiše mapu
Elementi tabela
Tabele su se ranije koristile za pravljenje strukture same stranice, što je odavno
prevaziđeno i nije validno prema standardima HTML-a, ali se tabele još uvek koriste za
tabelarni prikaz nekog teksta (lager-liste i sl.).
table - Definiše blok tabelarnog prikaza, odnosno tabelu
tbody - Služi za logično grupisanje elemenata koji pripadaju glavnom delu (body)
thead - Služi za logično grupisanje elemenata koji pripadaju zaglavlju (header)
th - Definiše ćeliju zaglavlja (header-a) tabele
tr - Definiše red u okviru tabele
td - Definiše običnu ćeliju u okviru tabele
caption - Definiše naslov tabele
col - Definiše kolonu u okviru tabele
colgroup - Definiše grupu kolona u okviru tabele
tfoot - Služi za logično grupisanje elemenata koji pripadaju donjem delu (footer)
Atributi
Tagovi mogu imati atribute, koji im dodeljuju dodatne vrednosti, pišu se u prvom
delu, odnosno nakon što je tag otvoren i sastavljeni su iz dva dela - naziv="vrednost".
Lista nekoliko bitnih atributa:
id - Jedinstveni identifikator elementa
class - Dodeljuje elementu jednu ili više podklasa
title - Definiše naziv elementa
alt - Služi za definisanje alternativnog teksta (npr. ako se slika ne učita prikaže se alt)
href - Definiše sa kojim dokumentom je link povezan
src - Određuje izvor slike, tj. putanju do nje
style - Definiše umetnute (inline) stilove elementa
Spisak svih HTML tagova (HTML Element Reference) možete pronaći na adresi
http://www.w3schools.com/tags/default.asp
Uvod u CSS
CSS (engl. Cascading Style Sheets) je jezik formatiranja
pomoću kog se definiše izgled elemenata web sajta, fontova,
boja razmaka između paragrafa, uređivanje tabela. Prvobitno,
HTML je služio da definiše kompletan izgled, strukturu i
sadržaj web sajta, ali je od verzije 4.0 HTML-a uveden CSS koji
bi definisao konkretan izgled, dok je HTML ostao u funkciji
definisanja strukture i sadržaja.
Svojim dolaskom CSS je izazvao pravu revoluciju na
internetu i to zahvaljujući nizu prednosti koje ima pred
tabličnim layoutom. Korištenjem CSS-a postalo je moguće odvojiti prezentaciju i podatke
na istoj, od samog dizajna. U ovom slučaju HTML kod postaje pregledniji i manji što znači
da ga je puno lakše kontrolisati, a takođe je moguće jednostavnom promenom
parametara u stilu promeniti izgled stranice bez izmene HTML koda.
Mogućnosti formatiranja HTML-a poprilično su ograničene. Kada dizajniramo web
sajt u HTML, ograničeni smo na tabele, kontrola fontova, i nekoliko stilova teksta poput
bold i italic. Sa CSS možemo:
• bolja kontrola layout-a
• razdvajanje sadržaja i formatiranja
• omogućava kreiranje “lakših” stranica – brže se učitavaju
• održavanje i ažuriranje više stranica istovremeno
• Daje browseru instrukcije za kontrolu izgleda stranice
Sintaksa u CSS se sastoji od opisa izgleda elemenata u dokumentu. Opis može da
definiše izgled više elemenata, i više opisa može da definiše jedan element. Na taj način
se opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa
(otuda naziv Cascading (engl. cascade) da bi se dočaralo slaganje jednog stila preko
drugog u definisanju konačnog izgleda elementa)
Svaki opis se sastoji od tri elementa:
• Naziv ciljanog elenemta
• Svojstvo ciljanih elemenata
• Vrednosti ciljanih elemenata
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis
odnositi, nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa.
Sintaksa koja se pri tome definiše je sledećeg oblika:

h1 {font-family: "Times New Roman"; font-size: 20px; color: #ff8000; }
CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle

navodeći se između znakova /* i */.
/* Ovo je naslov strane */
h1 {font-family: "Times New Roman"; font-size: 20px; color: #ff8000; }
Ciljni elementi
Ciljni elementi se definišu na tri načina:
• navodeći HTML tag ciljnih elemenata
• navodeći klasu elemenata
• navodeći identifikacionu vrednost (ID) elementa
Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u
dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog
upisa odgovarajućeg HTML taga:
body { background: #f5f5f5;font-size: 13px !important;... }
Klasa HTML elementa je reč koju stavimo kao vrednost argumenta CLASS pri
definiciji tog elementa. Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se
vrši tako što upišemo znak tačke (.) a zatim naziv klase:
.imeKlase { border: 1px solid #c5c5c5;box-sizing: border-box;... }
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na
sledeći način:
<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog

elementa. U jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj.
može postojati samo jedan element sa određenom identifikacionom vrijednošću, što
znači da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definišu se
pomoću znaka tarabe (#) a zatim identifikacionu vrednost:
#idVrednost { padding: 0px; margin: 0px auto; display: block;...}
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju
id="idVrednost".

Svojstva i vrednosti
Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih
reči definisanih u W3C standardu, a koje se kategorišu u sledeće grupe:
• definicija pozadine elementa
• ivica
• okvir
• prikaz
• dimenzije
• font
• generisani sadržaj
• margine
• unutrašnji prazan prostor
• pozicija
• izgled pripadajućeg teksta
Vrednosti pojedinih svojstava se definišu na dva načina:
• predefinisanim ključnim rečima
• brojevnim vrednostima
Predefinisane ključne reči

Predefinisane ključne reči za vrednosti svojstava se koriste u situacijama kada dato
svojstvo ima ograničen broj mogućnosti. Tako na primer svojstvo za definiciju pozadine
elementa može biti samo scroll (da se kreće uvek zajedno sa sadržajem elementa) i fixed
(da stoji uvek na istom mestu bez obzira na sadržaj).
body {background-image: url=(“background.png”); backround-attachment: fixed; }
Brojevne vrednosti
Brojevne vrednosti se mogu zadavati na nekoliko načina:
• zadajući samo brojevnu vrednost
• navodeći i jedinicu veličine skupa sa opisom
 px – pikseli,

 pt – tačke (za veličinu fonta),
 % - procentualna vrednost,
 ex – u odnosu na visinu slova ‘x’ u tekućem fontu,
 em – u odnosu na širinu slova ‘m’ u tekućem fontu
 cm – centimetar
 in – inč
 mm – milimetar
Ako zadajemo samo brojevnu vrednost, imamo mogućnost da je pišemo na dva
načina:
• u dekadnom sistemu (709)
• u heksadekadnom sistemu (#a4fde3); ovaj sistem se najviše koristi u definiciji
boje
Sve boje se u CSS definišu tekstualno (red, black, blue,...) ili pomoću HEX ili RGB(A)
boja. Za HEX kod se koriste brojevi i slova koji karakterišu boju, tako npr narandžasta
boja ima vrednost R=255, G=128 i B=0 tako da je ff (15·16 + 15 = 255), 80 (8·16 + 0 = 128) i
00. Znači narandžasta boja se u CSS piše #ff8000 u HEX formatu, ili rgb(255,128,0),
odnosno rgba(255,128,0,0) u RGB(A) formatu. Kod rgba formata zadnja cifra označava
transparentnost (providnost).
Poravnanje teksta
vertical-align (top, bottom, middle, ...)
text-align – poravnanje teksta (left, right, center, justify)
text-indent – koliko je prvi red paragrafa uvučen
line-height – vertikalna udaljenost između dvije linije
Svojstva teksta
word-spacing – razmak između riječi (normal ili konkretna vrednost),
letter-spacing – razmak između slova (normal ili konkretna vrednost),
white-space – kako da prikazuje više uzastopnih razmaka (normal, pre)
text-transform – transformacija teksta (none, capitalize (prvo slovo veliko),
uppercase, lowercase)
text-decoration – dekoracija teksta (none, underline, overline, line-through, blink)

Fontovi
font-family – vrsta fonta; parametar je ime fonta ili lista imena odvojenih zarezom;
ime fonta može biti konkretno ili ime familije; ime familije može da bude generičko
(serif, sans-serif, cursive, fantasy, monotype),
font-style – stil (normal, italic),
font-size – veličina fonta (apsolutna vrednost (small, large, ...), relativna vrednost
(smaller, larger), vrednost, procenat),
font-weight – podebljanje fonta (normal, bold, bolder, lighter ili vrednost od 100 do
900)
font-variant – način ispisa malih slova (normal, small-caps (mala slova su slična
velikim, samo je veličina manja)
Pozicioniranje elemenata
position – određuje poziciju elementa (static, absolute, relative, fixed)
static – element se iscrtava zajedno sa ostatkom HTML stranice i ne može da se
pomera
absolute – pozicionira se na fiksnu poziciju određenu atributima top i left
relative – relativna pozicija u odnosu na normalno sračunatu poziciju u odnosu na
ostatak HTML stranice
fixed – kao apsolutno pozicioniranje, samo što se sadržaj ne skroluje sa stranicom.
Pozicija/veličina elementa
margin-top, margin-bottom, margin-left, margin-right – podešavanja margina
elementa (konkretna vrednost ili procenat),
float – određuje sa koje strane će se tekst prelamati oko elementa (none, left, right)
clear – navodi se sa koje strane u odnosu na element su dozvoljeni floating
elementi (none, left, right, both)
Podešavanje svojstva ivica

border-width – definiše debljinu okvira oko elementa,

left-border-width, right-border-width, bottom-border-width, top-border-width
– podešavanje debljine okvira za svaku stranu
padding – veličina prostora između ivice i sadržaja elementa
padding-left, padding-right, padding-top, padding-bottom – podešava
udaljenost sadržaja od pojedinačne ivice
border-color – boja ivice
border-style – stil linije ivice (none, dotted, dashed,solid double, groove, ridge,
inset, outset)
border – za objedinjeni unos osobina
Sadržaj koji ne staje u element

overflow – definiše šta sa viškom
• visible – višak se prikazuje izvan elementa;
• hidden – višak se ne vidi;
• scroll – prikazuje se linija za skrolovanje
• auto - neka navigator odluči
clip – definiše region vidljivosti komponente
• auto – vidljiva oblast je veličine objekta
• rect(top, right, bottom, left) – region clipping-a
Definisanje boja i slika u pozadini

color – boja elementa
background-color – boja pozadine elementa
background-image – slika koja će biti u pozadini elementa (url(url-do-slike))
background-repeat – da li se pozadinska slika ponavlja ili ne (repeat-x, repeat-y,
no-repeat)
background-attachment – da li da se pozadinska slika pomera sa sadržajem
elementa (scroll, fixed),
background-position – podešava inicijalnu poziciju pozadinske slike (procentualne,
fiksne vrednosti, top, bottom, middle); navodi se prvo x, pa y pozicija,
background – sva svojstva odjednom

Podešavanje stilova za linkove
Stilovi za linkove su podijeljeni u sledeće “pseudo klase”:
a:link – podešava svojstva linka
a:hover – podešava svojstva za link kada je miš iznad
a:active – podešava svojstva linka kada se klikne na link
a:visited – podešava svojstva već posećenih linkova
Podešavanje svojstva kursora

Atribut cursor podešava svojstva kursora za zadati element:
auto – podrazumevana vrednost
none – sakriva miša
default – osnovni oblik pokazivača (najčešće strelica)
pointer – pokazivač na linkove
move – pokazivač na pokretne objekte
text – kursor za tekst
wait – kursor za čekanje
help – kursor za pomoć
e-resize, w-resize, n-resize, s-resize, sw-resize, ne-resize, nw-resize – promena
orijentacije pokazivača
url – zadati url do resursa koji opisuje kursor
Podešavanje stilova liste

list-style-type – definiše stil oznake za nabrajanje (disc, circle, square za neuređene
liste, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-
alpha za uređene liste),
list-style-image – url do lokacije slike koja se koristi za stavke liste (isključuje list-
style-type atribut)
list-style-position – pozicija stavke u odnosu na tekst (inside – oznaka za
nabrajanje i donji redovi teksta su jednako poravnati, outside – svi redovi stavke su
desno od oznake za nabrajanje)
list-style – objedinjuje sva prethodna podešavanja

Preklapanje stilova (kaskadni stilovi)
Svaki dodatno definisan stil se preklapa/kombinuje sa postojećim stilom. Atribut
!important obezbjeđuje da se osobina stavi na vrh kaskadnog procesa.
p {color: black !important}
Načini definisanja stilova

Postoje 3 osnovna načina definisanja stilova za Web stranice:
• inline – stilovi unutar HTML stranice
• embedded – stilovi unutar HTML dokumenta
• external – stilovi u eksternom dokumentu
Stil unutar HTML elementa
Koristi se atribut style unutar taga.

<h1 style=“color:blue”>Tekst</h1>
Stilovi definisani unutar dokumenta
Oni su ugrađeni (embedded) stilovi u samu HTML stranu. Koristi se tag style unutar
<head> sekcije. Tako definisan stil se odnosi na sve elemente koji su navedeni u stilu.
<head>
<style type=“text/css”>
h1, h2 {color:blue; text-align: center}
p {color:red}
</style>
</head>
Ova 2 načina se na preporujučuju, već da to bude definisano u eksternom .css fajlu.
Stilovi definisani u eksternoj stranici stilova
Kreira se zasebna datoteka sa definicijom stilova. Ekstenzija je uobičajeno .css. Sam

dokument se poziva upotrebom <link> taga unutar <head> sekcije.
<link rel=“stylesheet” href=“moj-stil.css”>

Pravilno pisanje i uređivanje koda
Sada konačno prelazimo na kreiranje naše prve html stranice, koja će se zvati
index.html, i koja zapravo predstavlja početnu stranu svakog sajta.
 Početna strana se uvek zove index, a pored .html može biti i neka druga
ekstenzija, npr .php, .htm, .xhtml...
 Treba voditi računa o tagovima, i obavezno zatvoriti svaki tag
 Sve što se nalazi unutar neke oznake poprima svojstva određena tom oznakom.
 Nije bitno pišemo li HTML tagove i atribute velikim ili malim slovima, svakako je
preporučljivo je pisati sve malim slovima.
 Vrednosti atributa poželjno je pisati pod navodnicima.
 Kod cele stranice možemo pisati i u jednom jedinom redu, nižući oznake jednu
iza druge. No, bolje je pisati ih tako da kod bude što pregledniji, jer ćemo se
sigurno kasnije morati na njega vratiti i ponešto izmeniti.
 Razmaci i prelomi reda (nov red) napisani u editoru ne vide se na web stranici
prikazanoj u pretraživaču. To važi i za tekst koji će biti prikazan na stranici
 Nakon što završimo web sajt, predlažem da odradite i validaciju koda, kako bi
eventualno u slučaju neke greške u pisanju istu otklonili
 I za kraj nešto nevezano za sam HTML – imena HTML dokumenata moraju
sadržati isključivo znakove engleske abecede i ne smeju u svom nazivu imati
sistemske znakove (*, ?, /, : i sl.), a preporučljivo je izbegavati i razmake u imenima
dokumenata. Umesto razmaka upotrebljavajte znakove – ili _ kao npr.
moja_stranica.html, o-nama.htm

Struktura izrade web stranica
Svaki HTML dokument sastoji se od zaglavlja (head) i tela (body).
Pre svega definišemo doctype, koji jasno govori o kojoj verziji HTML-a je reč, za
HTML5 to je <!DOCTYPE html>, a zatim toga i jezik na kome je sajt uradjen, <html
lang="sr">.
Definisanje <head> i <body> taga

U zaglavlju dokumenta <head> definišemo elemente koji se ne prikazuju na stranici.
Između ostalog, ovde ćemo definisati naslov dokumenta koji se prikazuje na naslovima
kartica (tabova) web browsera, ali i opis web sajta i ključne reči koje će pretraživači iščitati
prilikom indeksiranja web sajta. Takodje, u zaglavlju ćemo pozvati i eksterne CSS fajlove,
ali i java skriptove koje ćemo koristiti na sajtu. U zaglavlju pozivamo i kod za Google
Analytics, koji će nam omogućiti uvid u posete na sajtu i preko koga ćemo pratiti
posetioce na istom.
Sve ostalo, sav sadržaj koji se prikazuje na stranici, smeštamo u telo <body>
dokumenta.
Preporuka je da sve CSS stilove čuvate u zasebnom folderu, npr css, slike u images,
a sve skriptove u folder js, ili kako je Vama lakše da ih nazovete.
Web sajt, koji ćemo napraviti će imati podršku i za mobilne uredjaje, takozvani
responsive dizajn, pa će naš budući web izgledati kao na slici koja se nalazi na sledećoj
strani.
Kao što možete videti na slici, naš web sajt se sastoji od nekoliko ključnih celina:
 top – sam vrh sajta, koji ćemo koristiti u mobilnim verzijama za prikaz menija
i logotipa. Na desktop verzijama je to samo jedna tamna linija na vrhu
 header – sadrži logo web sajta, ikonice za socijalne mreže i navigaciju web
sajta. Na mobilnim verzijama, rezolucije ispod 960px, meni i logo se
prebacuju u top
 main – centralni deo sajta, u kome se nalazi i kompletan sadržaj
 footer – dno sajta sa Copyright informacijama, i linkom za povratak na
početak.

Sve delove dokumenta mi, a i pretraživači, prepoznajemo po odgovarajućim
oznakama. Kao što je već rečeno sve ove oznake imaju svoj početni i završni deo, pa naš
osnovni HTML kod izgleda ovako:
<!doctype html>
<html lang="sr">
<head>
<title>ICT-CS Klaster akademija</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /></head>
<body>
<div id="top">
Ove ide sadržaj top dela
</div>
<header>
Ovde ide logo, ikone za socijalne mreže i navigacija
</header>
<div id="main">
Ovde unosimo sadržaj sajta, koji će se menjati od strane do strane
</div>
<footer>
Mesto za Copyright informacije
</footer>
</body>
</html>
Pogledajmo kako naš kod izgleda u Notepad++ editoru

Kako sve osobine HTML5 i CSS3 nisu još uvek podržane u svim browserima
(uglavnom starije verzije), a koji su i dalje u upotrebi, da bi se sajt video ispravno u svim
browserima, postoji nekoliko java skriptova i CSS fajlova koje treba pozvati u <head>
tagu, kako bi izbegli probleme.
<link rel="stylesheet" type="text/css" href="css/normalize.css" />


Normalize.css je HTML5 ready alternativa CSS reset fajlu, koji se ranije koristio.
Normalize.css Vam pomaže da browseri prikažu sve elemente u skladu sa savremenim
standardima, i da razlika izmedju browsera bude svedena na minimum, tako što cilja
samo stilove koje treba normalizuje.
Normalize.css je mali CSS fajl koji obezbeđuje bolju cross-browser doslednost u

podrazumevani stajling HTML elemenata. Podržava širok spektar browser-a (uključujući i
browsere na mobilnim telefonima) i tada normalizuje HTML5 elemente, tipografija, liste,
ugrađeni sadržaj, obrasce i tabele.
HTML5 Shiv and Respond.js su Java-skripte koje omogućavaju stajling HTML5

elemenata u verzijama Internet Explorer pre verzije 9, koji ne dozvoljavaju nepoznatim
elementim da budu stilizovani bez JavaScript-a. Pre verzije Internet Explorera 9 je bilo
malo ili nimalo podrške za HTML5 elemente i druge HTML5 funkcije. Sa svojim visokim
procentom upotrebe na globlanom nivou, važno je da se osigurati da se web stranice
pravilno prikazuju u Internet Exploreru.

Google analitika Vam pruža mogućnost
da pratite veliki broj statistika vezanih za
posećenost sajta kao i da Vam pomogne da
bolje razumete vaše posetioce i mušterije.
Naravno da će u odnosu na sadržaj i

namenu Vašeg sajta zavisiti i koje statistike su
za Vas bitnije, ali važno je imati na umu da je
boljim razumevanjem posetilaca moguće
ostvariti veću posećenost sajta, i unaprediti
sveobuhvatni utisak koji sajt na njih treba da
ostavi.
 Osnovne statistike
 Odakle Vaši posetioci dolaze?
 Koliko posetilaca se vratilo na sajt, a koliko ih je došlo po prvi put?
 Koje stranice posetioci najčešće posećuju na Vašem sajtu?
 Kretanje posetilaca kroz Vaš sajt
 Praćenje poseta na sajtu u realnom vremenu
Kod za Google Analytics takodje integrišemo u okviru <head> taga, pozivanjem

sledećeg koda:


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-9999', 'auto');
ga('send', 'pageview');
</script>
Crvenom bojom je označen UA kod, koji je jedini promenljivi deo i on predstavlja ID

web sajta, i to je kod koji dobijate kada kreirate Google Analytics za odredjeni web sajt.
Da bi u potpunosti završili sa definisanjem <head> taga, ostaje nam još par stvari,
definisanje favicon ikone i meta tagova.

<meta charset="utf-8" />
<meta name="description" content=" IKT Klaster CS predstavlјa, zastupa i štiti interese
svojih članova i organizacija u zemlјi i inostranstvu i nosilac je prava i obaveza u
međunarodnoj saradnji." />
<meta name="keywords" content="IKT Klaster Centralna Srbija, klaster akademija, kurevi,
html5, css3, web dizajn" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Ovde imamo 4 osnovna meta taga, koje svaka strana treba da sadrži, a to su:
charset – Određuje kodiranje znakova za HTML dokument, u slučaju srpskih slova

preporuka je da se koristi UTF-8
description – Definiše opis web stranice. Dužina opisa bi trebalo da bude do 160
karakatera
keywords – Definiše ključne reči. Ne treba unostiti više od deset ključnih reči
robots – Daje informaciju robotima da li mogu da indeksiraju stranu ili ne

Unošenje sadržaja na web stranice
Pošto smo konačno definisali sve neophodne elemente, konačno prelazimo na sam
sadržaj web sajta, a to je ono što definišemo u <body> tagu.
Pretpostavljamo da tekst i slike imate spremne, i da je potrebno samo da se unesu,

ali kada je reč o samom dizajnu, potrebno je da slike izdvojimo iz dizajna koji smo dobili
od grafičkog dizajnera. To je najčešće PSD file, koji možete exportovati u jpg, png ili gif
slike uz pomoć više programa, a naša preporuka je Adobe Photoshop ili Adobe
Fireworks, koji je prventsveno namenjen za web grafiku.
Pisanje teksta u HTML-u slično je pisanju teksta u Wordu. Svaki napisani odlomak
morate definisati početnim tagom <p> i završnim tagom </p>
Tag <p> označava početak odlomka. Unutar odlomka možete koristiti ostale tagove
kao što su
 <b>, </b> bold

 <i>, </i> italic
 <u>, </u> underline
Ako želite unutar odlomka prelomiti tekst koristite tag <br /> (break line). Ovaj tag
nema svoj završni tag već je samostalan. Kada koristite tag <br />, on ne opisuje tekst
zato i nema završni tag. Ako linija teksta dođe do kraja prozora u browseru, sledeća reč
automatski počinje u novoj liniji. No, ako želimo sami odrediti gde će linija biti prekinuta
potrebno je koristiti break line, tag <br />.
Razlika između break line i paragrafa je u tome što break line ne korist specijano
formatiranje koje možemo dodati na početak ili kraj paragrafa, poput:
 dodatnog vertikalnog prostora

 ili pomaka prve linije desno
Veoma važno!!!
Font će se videti samo ako posmatrač ima taj font instaliran na svom računaru!
Ukoliko to nije slučaj, tekst će biti predstavljen podrazumevanim fontom. Zato pažljivo sa
fontovima! Da bi se ovo delimično prevazišlo, možete navesti više od jednog fonta:

<p style="font-family:Arial, Helvetica, Verdana">Tekst tekst tekst</p>
Objašnjenje: Browser prvo traži font ARIAL. Ako ga nađe, koristi ga. Ako ne, onda
traži sledeći navedeni font – HELVETICA. Ako ga ne nađe, tražiće VERDANA. Ako na kraju
ne nađe ni taj font, onda će koristiti podrazumevani font.
Takodje, možete koristiti i Google Fonts, a web sajtovi koji koriste ove fontove su
lepši, čitljiviji i pristupačaniji.
Google Fonts omogućava da brzo i lako da svako koristi web fontove, uključujući i
profesionalne dizajnere i programere. Oni omogućavaju da svako ima isti kvalitet
tipografije na njihovim web sajtovima i aplikacijama. Glavni cilj je bio da se stvori
direktorijum web fontova za sve. Goolge API servis olakšava da dodate Google fontove na
sajtu u sekundi. Google pruža ovu uslugu besplatno.
Naslovi (Headings)
Naslovi su jako bitni. Posebno su bitni kod indeksiranja web sajtova od strane
Google-a i ostalih web pretraživača. Ne treba ih koristiti za ostali tekst kako bi, recimo,
bio veći ili podebljan, već samo za naslove. Naslovi razbijaju dokument u celine. Naslovi:
 stvaraju organizacionu strukturu

 poboljšavaju vizuelni doživljaj stranice
 daju nam naznaku na koji su način grupisani delovi sadržaja
U htmlu je moguće postaviti 6 posebnih naslova dokumenta koji se određuju

tagovima <h1> - <h6>:
 <h1> je najviše istaknut naslov

 <h6> je najmanje istaknut naslov
<h1> naslov ima font najveće veličine koji se smanjunje na svakom sedećem (h2,
h3…), dok
<h6> ima najmanji font. Veličina fonta i njihovo formatiranje se definiše u CSS stilu.
Liste (Lists)
Liste služe za organizaciju sličnih elemenata. Omogućavaju korisniku lakši pregled
informacija.

U liste možemo staviti praktično sve, od teksta i slike pa do linkova. Razlikujemo tri
vrste listi:
 Liste s brojevima (Numbered lists)

 Liste s oznakama (Bulleted lists)
 Definicijske liste (Definition lists)
Liste s brojevima (Numbered lists)
Listu s brojevima koristimo kada želimo nabrojati neke informacije. Za kreiranje liste
koristimo dve vrste elemenata: <ol> i <li>
Kreiranje liste započinjemo tagom <ol> koji označava da se radi o listi s brojevima.
Informacije pišemo unutar početnog <li> i završnog </li> taga. Na kraju sve zatvaramo
završnim </ol> tagom.
Dva različita atributa kontrolišu prikaz liste s brojevima. Atribut start definiše
početni broj u listi, a atribut type definiše stil liste s brojevima.
 1: decimalni brojevi
 a: mala slova
 A: velika slova
 i: rimska numeracija malim slovima
Liste s oznakama (Bulleted lists)
Lista s oznakama sastoji se od jedne ili više stavki od kojih svaka počinje nekom
oznakom (najčešće tačkom). Ovakav tip liste koristi se ako redosled po kojem su izlistane
stavke nije neophodan za razumevanje informacija koje se prikazuju.
Možemo koristiti atribut type kako bi odredili vrstu oznake koju želimo da lista
koristi.
 disc: ispunjeni kružići

 square: ispunjeni kvadratići
 circle: šuplji kružići
Definicijske liste (Definition lists)

Definicijske liste grupišu pojmove definicije u jednu listu i zahtevaju tri različita
elementa kako bi se lista napravila:
 <dl> sadrži definiciju liste

 <dt> definiše pojam u listi
 <dd> definiše definiciju za pojam
Veze ili linkovi (Links)

Hyperlinkovi ili jednostavnije linkovi, povezuju HTML stranice i ostale resurse na
Internetu.
Kada uključite link na stranici, omogućavate posetiocu da prelazi sa jedne na drugu

stranicu unutar Vaše internet stranice, da ide na druge sajtove ili otvaranje
multimedijskog sadržaja (dokumenti, muzika, slike, filmovi, animacije).
URL (eng. Uniform Resource Locator) je standardni način adresiranja. Svaka stranica
ili neka datoteka ima svoj jedinstveni URL. Svaki Internet resurs, bila to stranica ili slika,
ima svoj URL. Ako je samo jedan znak u URL-u pogrešan, to može rezultirati neispravnim
linkom. Neispravni linkovi vode na stranicu greške (HTTP error 404 File or directory not
found). Ako vam URL ne radi, pokušajte sledeće:
 Proverite velika i mala slova (neki web serveri su case sensitive, što znači da
razlikuju velika i mala slova).
 Proverite ekstenziju (ako URL vašeg linka koristi link.htm, a pravo ime datoteke je
link.html, link neće raditi).
 Proverite ime datoteke.
 Koristite copy-paste (izbegavajte pisanje URL-a ako ga možete direktno kopirati).
URL radi slično kao Vaša poštanska adresa, i sastoji se od sledećih elemenata:
 Protokol http:// - Definiše protokol pomoću kojeg web browser Internet stranicu
 Domen http://www.ict-cs.org - Pokazuje na Internet stranicu gde se nalazi
datoteka koju želimo naći
 Putanja http://www.ict-cs.org/images - Imenuje putanju (listu foldera) kroz koje
morate proći kako bi došli do željene datoteke
 Ime datoteke http://www.ict-cs.org/images/logo.png - ime datoteke kojoj web
browser treba pristupiti

Postoje dve vrste linkova:
 apsolutni linkovi
 relativni linkovi
Apsolutni likovi
Apsolutni linkovi koriste kompletan URL koji povezuje unutrašnju i spoljašnju

stranicu na Internetu. Veza koja koristi kompletan URL zove se apsolutna veza i može
stajati sama za sebe. Kada povezujete svoj web sajt sa drugim web sajtom (npr. Yahoo,
Google, ...) morate upisati celu URL adresu kako bi link bio validan, npr. http://www.ict-
cs.org
Relativni linkovi
Relativni linkovi koriste stenogram kako bi definisali URL za resurs na koji se

pokazuje. Za relativne linkove na svojim stranicama koristite sledeće smernice:
 postavljajte relativne linkove između resursa samo na istom domenu

 s obzirom da su oba resursa na istom domenu, možete izostaviti informacije o
domeni u URL-u.
Veze se mogu povezati na bilo koji fajl, poput:
 Word dokumenta
 Excel dokumenta
 PDF-ove
 Arhive (zip, rar, 7zip...)
 Multimediju (slike, klipove, mp3 fajlove)
Takvim datotekama možemo pristupiti preko interneta. One poseduju svoj URL. Bilo
koja datoteka na Internet stranici (bez obzira na tip datoteke) može se linkovati direktno
preko URL-a. Ako želimo omogućiti korisnicima da preuzmu PDF, DOC, ZIP datoteku to
ćemo uraditi sledećim kodom:

<p><a href=”arhiva.zip”>Arhiva podataka</a></p>
<p><a href=”dokument.pdf”>PDF dokument</a></p>
<p><a href=”dokument.doc”>DOC dokument</a></p>
Link na e-mail adresu može automatski otvoriti novi e-mail upućen željenoj osobi.
Ovo je odličan način kako pomoći korisnicima da Vam pošalju e-mail s komentarima i
željama.
<p>Pošaljite mi poruku na ovaj <a href="mailto:kontakt@ict-cs.org">e-mail</a>.</p>
Slike
Slike se koriste kako bi korisnicima preneli korisne informacije, za navigaciju
stranice, kao i da bi poboljšali opšti izgled stranice. Kada se slike pažljivo i ispravno
koriste, one stranici daju vizuelno bolji izgled, no ako se ne koriste u skaldu sa pravilima,
mogu stranicu učiniti nečitljivom i teškom za učitavanje.
Slike se mogu kreirati i sačuvati u mnogo različitih formata, ali svega nekoliko njih je
stvarno prikladno za slike koje nameravamo staviti na Internet i koje su kompatibilne sa
svim browserima i operativnim sistemima:
 Graphics Interchange Format (GIF) – gif slike manje su od slika ostalih formata,
podržavaju samo do 256 boja i pogodne su za jednostavnije slike, ili jednostavne
animacije
 Joint Photographic Experts Group (JPEG) – jpeg slike podržavaju 24 bitne boje i
kompleksne slike, poput fotografija
 Portable Network Graphics (PNG) – najnoviji format razvijen da donese najbolje iz
gif- i jpeg-a. PNG ima iste kompresijske mogućnosti kao i gif, ali podržava 24 bitne i
32 bitne boje. PNG slike mogu biti i transparentne.
Alternativni tekst opisuje sliku tako da oni koji je iz nekog razloga ne mogu videti,
vide tekst koji opisuje sliku. Ovaj atribut je koristan ukoliko se slika zbog spore veze nije
prikazala ili više ne postoji na serveru. Alt tag je takodje obavezan kako bi se uspešno
prošla validacija koda.
Kada je reč o veličini slike možemo koristiti atribute height i width u okviru <img>
taga ili u CSS stilu kako bi browser znao koliko je slika visoka i široka. Kada definišemo
visinu i širinu slike koja se razlikuje od stvarnih dimenzija slike, web browser ih sam

prilagodi na definisane dimenzije. Kod ovakvog prikazivanja slike moramo paziti na
proporcionalnost kako slika ne bi postala deformisana ili izgubila na kvalitetu.
Tabele
Tabele služe kako bi podatke rasporedili u mrežu i učinili njihovu analizu
jednostavnijom. U HTML-u one mogu imati ulogu kontrole rasporeda podataka na
stranici, medjutim sada je standard da se sve to radi bez tabela, već preko <div> tagova.
U tabele se može staviti tekst, slika, link...
Sva kompleksnost HTML tabela dolazi iz tri osnovna elementa:
 Granice: svaka osnovna tabela mora imati 4 granične linije (zida) koje čine
pravougaonik
 Ćelije: prostor unutar 4 granične linije
 Raspon ćelija: Unutar 4 linije koje okružuju ćeliju, možemo brisati ili dodavati
zidove ćelije
Tabela ima 3 osnovne komponente:
 Tabela <table>
 Red u tabeli: <tr>, koji je uvek unutar <table>
 Ćelija tabele: <td>, koja je uvek unutar <tr>
Tag <table> i njegov kod nalaze se između <body> tagova u dokumentu. Medjutim
možemo ih koristiti izmedju većine blok elemenata, kao i između <td> i <th> tagova za
ugnježdenje tabela.
Ako u jednoj ćeliji želimo imati više redova ili kolona, treba dodati atribut koji će web
browseru govoriti u kojoj ćeliji će se granjanje događati. Broj u atributu odgovara broju
redova ili kolona koje želimo da ćelija prikazuje. To se zove premošćavanje. Za
premošćivanje ćelija koristimo sledeće atribute:
 colspan (proširuje ćeliju horizontalno)

 rowspan (proširuje ćeliju vertikalno).

Horizontalna linija
Horizontalna linija označava se tagom <hr />. Ovaj tag uključuje prikaz horizontalnih
linija na stranici. Web browser stvara liniju na osnovu <hr /> elementa, što je brže nego
da se unosi grafika. Horizontalna linija je dobra opcija ukoliko želite:
 podeliti stranicu po logičkim delovima

 odvojiti zaglavlje i podnožje od ostatka stranice
Četiri različita atributa kontrolišu izgled svake horizontalne linije:
 width: Definiše širinu linije u px ili pt

 height : Definiše visinu linije u px: Default vrednost je 1 px
 align: Definiše horizontalno poravnanje linije kao levo, središnje ili desno
 nonshade: definiše solidnu liniju bez senke
Entiteti
Tekst neke internet stranice ima svoje granice, a entiteti kao posebni ne ASCII
znakovi omogućavaju prikazivanje posebnih znakova. To su najčešće simboli. Svaki
entitet počinje sa (&) i završava se sa (;).
Svaki entitet može biti napisan uz pomoć svog naziva ili broja: &naziv_entiteta; ili
&#broj_entiteta; Npr za razmak izmedju dva karaktera koristimo „non braking space“, a
on se unosi kao
Basic American Standard Code for Information Interchange (ASCII) tekst definiše
relativno mali broj znakova. U svojoj definiciji ne uključuje posebne znakove, poput
recimo trademark simbola, razlomaka i sl.
Ako želimo napisati znakove koji nisu podržani (možemo ih pronaći u ASCII1 tabeli),
HTML mora koristiti entitete kako bi prikazao takve znakove. Web browser u tom slučaju
zameni entitet s odgovarajućim znakom na koji entitet pokazuje. Svaki entitet počine
znakom "&" i završava se znakom ";".
<p>Moje ime je Petar, a prezime Petrovć i trenutno radim na računaru.</p>
Encoding za ISO-Latin-1 znakovni set se isporučuje po defaultu. Ako želimo koristiti

neke druge znakove to zahteva uključivanje posebnih markupa koji govore browseru da
se mora spremiti na interpretaciju unikodnih kodova. U HTML 5 ovaj markup izgleda:
<meta charset="utf-8" />
Kod starijih verzija HTML-a, on se unosio ovako:
<meta http-equiv=“Content Type“ content =“text/html; charset=UTF-8“>;

Struktura web sajta
Pošto smo već definisali strukturu naše web stranice na osnovnu pripremljenog PSD
fajla, krećemo redom. Uporedo sa HTML kodom definisaćemo i stil pojedinih elemenata.
Osnovnu strukturu HTML dokumenta smo već definisali, ostaje nam da definišemo i
osnovu CSS-a, i da krenemo dalje sa radom na samom sajtu.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext);
body {background-image: url("../images/body-background.png"); background-attachment:

fixed; font-family: 'Open Sans', sans-serif; font-size: 13px;}
.clr {height:0; clear:both;}

a {text-decoration:none;-o-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s
ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out
0s; transition: all 0.2s ease-out 0s;}
p {margin-bottom:10px;}
h1, h2, h3, h4, h5, h6 {font-weight:400; line-height:120%;}
img {width:auto; max-width:100%; height:auto;}
img.border {padding:2px; border:1px solid #ccc;-webkit-box-sizing: border-box; -moz-box-
sizing: border-box; box-sizing: border-box;}
img.left {float:left; margin-right:10px;}
img.right {float:right; margin-left:10px;}
img.center {display:block; margin:0 auto 10px auto;}
hr {margin-bottom: 20px;}
Na početku dokmenta pozivamo font Open Sans koji ćemo kasnije koristiti na sajtu.
Pored toga, definišemo body tag kome dodeljujemo pozadinu. Kako ne želimo da se
pozadino skroluje, već da sajt klizi preko nje dodajemo background-attachment: fixed;.
Pošto će nam veliki broj divova i slika na sajtu imati float, definišemo .clr, a zatim i
sam link, kome uklanjano donju liniju. Naravno, za linkove definišemo i tranziciju, kako bi
prelaz izmedju boja bio neprimentniji. Pored paragrafa i heading taogva, definišemo još i
sliku, kao i nekoliko pratećih klasa. U slučaju da je slika veća od div, odnosno elementa u
koji se pakuje neće se prikazati kako treba, pa zato ograničavamo maksimlanu veličinu na
100%, ali svakako visinu i širinu postavljamo na automatski, da ukoliko je slika manja
bude prikazana u originalnoj veličini, odnosno ako je širina veća od elementa u kome se
nalazi slika da se visina i širina smanje proporcionalno. Kako ćemo na sajtu više puta
koristi slike koje imaju poravnanje levo ili desno, ili su na sredini, kao i border, da bi
izbegli više definisanja u samom kodu, na početku definisemo i to.
Pored ovoga, definisaćemo i sam container u kome će se nalaziti kompletan sadržaj,

kao i gridove, koje ćemo koristiti na sajtu.

.container{width:100%; max-width: 1200px; padding:0 20px; margin:0 auto;
position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-
sizing: border-box;}
.grid-3, .grid-4, .grid-6, .grid-8, .grid-9{ float:left}

.grid-3{ width:25%}
.grid-4{ width:33%}
.grid-6{ width:50%}
.grid-8{ width:67%}
.grid-9{ width:75%}
.grid-12{ width:100%}
S obzirom da je sada širina sajtova za desktop rezolucije 1200px i mi ćemo

.container definisati sa tom širinom. Pošto imamo padding levo i desno, a ne želimo da
povećamo veličinu samog diva dodajemo box-sizing: border-box, kao i patch za ostale
nekompatibilne browsere.
Sada konačno prelazimo na sam sajt.
#top
U našem divu koji ima id top kod desktop verzije nemamo praktično ništa. To je
samo jedna linija, koju ćemo ovde definisati kao border. Kasnije, kada budemo radili
mobilnu verziju u HMTL kodu ćemo dodati ono što je neophodno.
<div id="top">
<div class="container">
</div>
</div>
Stil za sada igleda ovako
#top {border-top: 2px solid #444444;}
#header
U divu header se nalazi logotip, kao i ikonice za socijalne mreže. Za to ćemo koristiti
html 5 tag header. Naravno, možete sve spakovati i u div koji će imati id header, ali kako
već imamo html5 tag onda ćemo njega i koristiti. Pored toga, u istom divu nam se nalazi i
navigacija sajta, koju ćemo koristiti na svim desktop verzijama sajta.
S obzirom da imamo grid sistem, ovo možemo rešiti preko gridova, medjutim logo
ćemo smestiti u div koji se tako i zove, i kako bi on bio sa leve strane imaćemo float left.
Ikonice za socijalne mreže idu desno, i samim tim definišemo float right na pomenutnom

divu. Potrudićemo se da iste stvari radimo na različite načine kako bi provežbali što je
moguće više različitih načina izrade.
Za navigaciju koristimo html5 tag nav.
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="Klaster akademija"
width="200" height="69" /></a>
</div>
<div class="social">
<a href="#" class="face"></a>
<a href="#" class="tw"></a>
<a href="#" class="yt"></a>
<a href="#" class="rss"></a>
</div>
<div class="clr"></div>
<nav>
<ul>
<li class="active"><a href="#">Početna</a></li>
<li><a href="onama.html">O nama</a></li>
<li><a href="usluge.html">Usluge</a></li>
<li class="dropdown"><a href="ponuda.html">Ponuda</a>
<ul>
<li><a href="ponuda1.html">Ponuda 1</a></li>
</ul></li>
<li><a href="uslovi-placanja.html">Uslovi plaćanja</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown"><a href="galerija.html">Galerija</a>
<ul>
<li><a href="galerija1.html">Galerija 1</a></li>
</ul></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
Kako nam sama lista, koja se u ovom slučaju koristi kao navigacija ima float: left za
svaki list item, ispod zatvorenog ul taga pozivamo div koji ima klasu clr.
U samoj navigaciji imamo i nekoliko padajućih menija, pa ćemo ih najlakse kroz stil
definisati kada se prikazuju, a kada ne.

header {margin-bottom: 30px;}
header .container {padding: 0px;}
header .logo {margin: 10px 0px; float: left;}
header .social {width: auto; margin-top: 30px; float: right;}

header .social a {display: block; width: 16px; height: 16px; margin-left: 10px; display:
inline-block;}
header .social a.face { background: url("../images/icons/facebook.png")}
header .social a.tw {background: url("../images/icons/twitter.png")}
header .social a.yt {background: url("../images/icons/youtube.png")}
header .social a.rss {background: url("../images/icons/rss.png")}
header nav{ width: 100%; max-width: 1200px; background: #fff; background:

rgba(255,255,255,0.80); margin:0 auto; padding:0; height:40px; position: relative; z-
index:9; border-width: 1px 1px 2px 1px; border-style: solid; border-color: #BCBCBC; }
header nav ul { width:100%; float:left; height:40px; padding:0; margin:0; list-
style:none;}
header nav ul li{ float:left; position:relative; margin:0;-o-transition: all 0.2s ease-out
0s; -ms-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -webkit-
transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}
header nav ul li a{font-family: 'Open Sans', sans-serif; margin:0 1px 0 0; padding:0 17px;
line-height:40px; display:block; font-size:16px; font-weight:700; color:#666;}
header nav ul li.active {background: rgba(0,0,0,0.05);}
header nav ul li.active a{}
header nav ul li li.active { background: #eee; border: none; color: #fff}
header nav ul li a:hover{ text-decoration:none; color:#000; background: rgba(0,0,0,0.03);}
header nav ul li:hover{}
header nav ul li.dropdown{background:url(../images/template/dropdown.png) right 18px no-
repeat; padding-right:10px;}
header nav ul li.dropdown:hover{-webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50,
0.3);-moz-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.3);box-shadow: 0px 0px 3px 0px
rgba(50, 50, 50, 0.3); background-color:#fff;}
header nav ul li.dropdown ul{ z-index:9999;}
header nav ul li.dropdown:hover ul{ padding-bottom:5px;}
header nav ul li.dropdown:hover ul li a:hover{ background:#2A66C0 !important}
header nav ul li.dropdown:hover ul li:last-child a:hover{-moz-border-radius-bottomright:
5px;-webkit-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;-moz-border-
radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;border-bottom-left-radius: 5px;}
header nav ul li.dropdown:hover a:hover{ background:rgba(0, 0, 0, 0) !important}
header nav ul li ul{ padding:0; background:#fff; position: absolute; top: 40px; left: 0;
width: 100%; height:auto; min-width:250px; -webkit-box-shadow: none; -moz-box-shadow:
none; box-shadow: none; display: none; opacity: 0; visibility: hidden; z-index:999; -moz-
border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-
right-radius: 5px;-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:
5px; border-bottom-left-radius: 5px;-webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50,
0.3);-moz-box-shadow:0px 3px 3px 0px rgba(50, 50, 50, 0.3);box-shadow:0px 3px 3px 0px
rgba(50, 50, 50, 0.3);}
header nav ul li ul li { background:none; padding:0 5px; margin:0; display:block;
float:none;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}
header nav ul li.dropdown:hover{}
header nav ul li ul li a{ margin:0; padding:0 15px; display: block; color: #666; font-
size:12px; line-height:30px; border-bottom:1px dotted #e5e5e5}
header nav ul li ul li:last-child a, #sb-site #menu nav ul li ul li:hover a{ border-
color:rgba(0,0,0,0);}
header nav ul li ul li:hover a{ color:#fff !important;}

header nav ul li ul li:last-child{-moz-border-radius-bottomright: 5px; -webkit-border-
bottom-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft:
5px;-webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;}
header nav ul li:hover ul { display: block; opacity: 1; visibility: visible;}
#main
S obzirom da nam se u ovom divu nalazi praktično kompletan sadržaj, radićemo ga

parcijalno, radi lakšeg razumevanja.
<div id="main">
</div>
</div>
Kao i sve do sada, kompletan sadržaj nam se nalazi u divu container. Sledeće što
definišemo je animacija. U ovom slučaju koristimo bxSlider - http://bxslider.com/. Prema
dokumentaciji proizvodjača sve slike koje koristimo u animaciji, odnosu slajdovi se nalaze
u listi koja ima klasu bxslider.
<div class="slider">
<ul class="bxslider">
<li><img src="images/animacija/01.jpg" alt="Klaster akademija" /></li>
</ul>
</div>
Takodje, uz bxSlider pozivamo i jQuerry biblioteku, kao i skript i css file koji smo
dobili u fajlu koji je preuzet sa zvaničnog sajta. Ovo sve kopiramo u <head> tag.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="js/jquery.bxslider.min.js"></script>

<link href="css/jquery.bxslider.css" rel="stylesheet" />
Ostaje nam još da pozovemo bxSlider, a to radimo preko skripta, koji kopiramo u
main.js file
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Ispod animacije imamo slogan, a ispod slogana jednu vertikalnu liniju koju ćemo
definisani u divu sa klasom break.

<div class="grid-12 slogan">
<h3>Klaster akademija je projekat Poslovnog udruženja IKT klaster centralne
Srbije Kragujevac sa ciljem stručnog osposobljavanja kako zaposlenih tako i kadra koji
nedostaje u preduzećima članica klastera.</h3>
</div>
<div class="break"></div>
Prema dizajnu koju smo dobili, ispod slogana imamo tekst koji je spakovan u 2 diva.
Levi div će biti grid-8, i u njemu se nalazi osnovni informativni tekst, dok se sa desne
strane u grid-4 nalazi ordered lista sa najčešće postavljenim pitanjima.
<div class="grid-8">
<div class="block">
<p>Klaster akademija je projekat Poslovnog udruženja IKT klaster centralne
Srbije Kragujevac sa ciljem stručnog osposobljavanja kako zaposlenih tako i kadra koji
nedostaje u preduzećima članica klastera.</p>
<p>Pokazatelj na osnovu statistike kaže da je potrebno 8 do 12 meseci za
obuku novo zaposlenog lica, pri čemu su ta lica neprofitabilna i isključivi trošak za
preduzeće prvih godinu dana. Logičnim razmišljanjem dolazimo do zaključka da je IKT
klaster akademija više nego potrebna svim našim članicama jer će kroz obuke dolaziti
znatno brže do obučenih kadrova.</p>
<p>Trenutno smo u fazi izgradnje koncepta IKT klaster akademije i u tome
nam je potrebna pomoć svih naših članica kako bi akademija bila korisna svima.</p>
<p>Potrebno je da odgovorite na sledeća pitanja i na osnovu vaših odgovora
dobićemo neophodne podatke za pripremu i organizovanje obuka, kurseva koji će se
sprovoditi u IKT klaster akademiji. </p>
</div>
</div>
<div class="block">
<h3>Pitanja</h3>
<ol>
<li>Koje tehnologije koristite u vašoj firmi?</li>
<li>Sa kojim znanjima su vam potrebni kadrovi?</li>
<li>Koliko osposobljenih kadrova bi ste zaposlili u prvih godinu dana,
a koliko u periodu od tri godine?</li>
<li>Da li ste spremni da učestvujete u obuci kandidata kroz klaster
akademiju i na koji način?</li>
<li>Da li bi klaster imao finansijsku obavezu prema vama?</li>
<li>Na koje kurseve bi slali svoje zaposlene radnike?</li>
</ol>
</div>
</div>
Osnovne 4 usluge će biti spakovana u 4 diva podjednake širine, što znači da ćemo
ovde za to iskoristiti grid-3. U odnosu na sledeći element imamo jednu liniju koju
definišemo kao horizontal rule, odnosno hr.

<div class="block usluge">
<img src="images/icon-web.png" alt="web design" width="46" height="41" />
<h3>Web Design</h3>
<p>Lorem Ipsum je jednostavno model teksta koji se koristi u štamparskoj i
slovoslagačkoj industriji. Lorem ipsum je bio standard za model teksta još od 1500.
godine, kada je nepoznati štampar uzeo kutiju sa slovima i složio ih kako bi napravio
uzorak knjige</p>
</div>
</div>
<img src="images/icon-graphic.png" alt="animacije" width="45" height="44"
/>
<h3>Animacije</h3>
<p>Ne samo što je ovaj model opstao pet vekova, nego je čak počeo da se
koristi i u elektronskim medijima, nepromenivši se. Popularizovan je šezdesetih godina
dvadesetog veka zajedno sa listovima leterseta</p>
</div>
</div>
<img src="images/icon-photo.png" alt="obrada fotografija" width="43"
height="40" />
<h3>Obrada fotografija</h3>
<p>Nasuprot verovanju, Lorem Ipsum nije nasumično izabran i složen tekst.
Njegovi koreni potiču u delu klasične Latinske književnosti od 45. godine pre nove ere,
što ga čini starim preko 2000 godina. Richard McClintock, profesor latinskog</p>
</div>
</div>
<img src="images/icon-optimization.png" alt="optimizacija" width="46"
height="46" />
<h3>Optimizacija</h3>
<p>LI dolazi iz poglavlja 1.10.32 i 1.10.33 knjige "de Finibus Bonorum et
Malorum" (Ekstremi Boga i Zla) koju je napisao Cicero 45. godine pre nove ere. Knjiga
govori o teoriji etike, koja je bila vrlo popularna tokom Renesanse.</p>
</div>
</div>
Sledeća stvar su logotipi članica klastera. Njih ćemo spakovati grid-12 div, a sve to
kao slike koje imaju float: left.
Kao što smo već jednom definisali, ispod slogana, horizontalnu liniju smo definisali
kao break, pa ćemo je pozvati i ovde, ispod logotipa članica, a pre samog predfutera,
odnosno poslednjeg reda koji imamo u našem main divu.

<div class="block clanice">
<h3>Članice ICT-CS</h3>
<div class=“firma“>
<img src="images/clanice/csm_bic_6d8d8a6cf1.jpg" alt="bic" />
</div>
<img src="images/clanice/csm_cfrs_10ac1b4343.png" alt="concept
factory" />
</div>
<img src="images/clanice/csm_neteffect_4f211b9ec3.png"
alt="neteffect" />
</div>
<img src="images/clanice/csm_webportal_d78564828e.png"
alt="webportal" />
</div>
<img src="images/clanice/pmfkg.png" alt="pmf" />
</div>
</div>
</div>
<div class="break"></div>
Kako ponovo imamo 4 diva iste širine koristimo grid-3. Prvi div će nam biti Najnovije
vesti, i to ćemo rešiti preko liste. U drugom divu ćemo postaviti logotipe 12 tehnologije
koje koristimo u okviru klastera, što će takodje biti rešeno preko liste. Sledeći div je za
Faebook like box. Kod za tu stranu ćemo povući preko Facebook strane za developere.
Skript koji je koristi za ovo ćemo kasnije iskopirati u main.js file, gde ćemo čuvati sve
skripte.
//Facebook like box

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src =
"//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3&appId=130268443712813";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I poslednji div nam je za kontakt formu, koja ima polja za unos imena, e-mail adrese,
kontakt telefona i polja za poruku.

<div class="block">
<h3>Najnovije vesti</h3>
<ul class="vesti">
<li><span>Klaster akademija</span>
Klaster akademija je projekat ICT-CS sa ciljem stručnog
osposobljavanja kako zaposlenih tako i kadra...</li>
<li><span>Otvorene pozicije</span>
Ovde se možete informisati o poslovnim ponudama i zapošljenju kod
članica IKT klastera ali i u preduzećima...</li>
<li><span>Konkursi i pozivi</span>
Zanima vas koje su aktuelne državne subvecnije i donacije, kao o
projektima inostranih donatorskih agencija...</li>
</ul>
</div>
</div>
<div class="block">
<h3>Tehnologije</h3>
<ul class="tehnologije">
<li><img src="images/tehnologije/appache.jpg" width="125"
height="125" alt="tehnologije" /></li>
<li><img src="images/tehnologije/bootstrap.jpg" width="125"
<li><img src="images/tehnologije/csharp.jpg" width="125"
<li><img src="images/tehnologije/css3.jpg" width="125"
<li><img src="images/tehnologije/html.jpg" width="125"
<li><img src="images/tehnologije/jquerry.jpg" width="125"
<li><img src="images/tehnologije/mssql.jpg" width="125"
<li><img src="images/tehnologije/mysql.jpg" width="125"
<li><img src="images/tehnologije/net.jpg" width="125" height="125"
alt="tehnologije" /></li>
<li><img src="images/tehnologije/php.jpg" width="125" height="125"
alt="tehnologije" /></li>
<li><img src="images/tehnologije/ruby.jpg" width="125"
<li><img src="images/tehnologije/silverlight.jpg" width="125"
</ul>
</div>
</div>
<div class="block">
<h3>Pratite nas</h3>
<div class="fb-page" data-href="https://www.facebook.com/ICTClusterSerbia"
data-width="270" data-height="300" data-hide-cover="true" data-show-facepile="true" data-
show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote
cite="https://www.facebook.com/ICTClusterSerbia"><a
href="https://www.facebook.com/ICTClusterSerbia">ICT CS</a></blockquote></div></div>
</div>
</div>

<div class="block">
<h3>Kontaktirajte nas</h3>
<form action="#" method="GET">
<input type="text" placeholder="Ime i prezime" />
<input type="email" placeholder="E-mail adresa" />
<input type="text" placeholder="Kontakt telefon" />
<textarea placeholder="Unesite poruku" ></textarea>
<input type="submit" value="Pošalji poruku" />
</form>
</div>
</div>
Stil koji koristimo za ceo main div je dosta opširan, pa čemo krenuti redom. Opšti
deo stila je sledeći:
#main .clr {margin-bottom: 30px;}

#main .container {background: #fff; border-width: 1px 1px 2px 1px; border-style: solid;
border-color: #BCBCBC; overflow: hidden !important;}
#main h1 {color: #2a66c0;}
#main .grid-9 .block, #main .grid-8 .block {padding-right: 20px; box-sizing: border-box;
text-align: justify;}
#main .grid-4 iframe {width: 100% !important;}
#main .grid-4 .block {padding-left: 20px; box-sizing: border-box;}
#main .grid-3 .block {padding: 0px 10px; box-sizing: border-box; text-align: justify;}
#main .grid-3 .block img {display: block; margin: 0px auto 10px;}
#main .block h3 {color: #2A66C0 ; text-transform: uppercase; margin: 0 0 20px; padding:
0px;}
#main .grid-3 .block.usluge h3 {text-align: center;}
Zatim definišemo animaciju, i slogan.
#main .slider {margin: 20px auto; overflow: hidden !important; width: 100%; max-width:
1200px;}
#main .break {background: url("../images/line-bg.png") bottom center repeat-x; margin-
bottom: 20px; width: 100%; height: 9px;}
#main .slogan h3 {font-size: 18px; letter-spacing: 2px; text-align: center; font-style:
italic; padding: 0px 50px 0px; margin: 0px; }
U grid-12 nam se nalaze logotipi članica, a njih stilizujemo:
#main .grid-12 .block.clanice img {width: 19.2%; max-width: 240px; padding: 1%; margin:
0px 1% 0 0; box-sizing: border-box; float: left; border: 1px solid #BCBCBC;}
#main .grid-12 .block.clanice img:last-child {margin-right: 0;}
Ceo zadnji red je spakovan u 4 grid-3 elementa, pa ćemo ih definisati redom:

#main .grid-3 .block .vesti {list-style: none; margin: 0px; padding: 0px;}
#main .grid-3 .block .vesti li {margin: 0px 0px 10px; padding: 0px; border-bottom: 1px
solid #BCBCBC;}
#main .grid-3 .block .vesti li:last-child {border-bottom: none;}
#main .grid-3 .block .vesti li span {color: #2A66C0; font-weight: bold;}
#main .grid-3 .block .vesti li span:after {content: " - "; color: #000; font-weight:
normal;}
#main .grid-3 .block .tehnologije {list-style: none; margin: 0px; padding: 0px;}
#main .grid-3 .block .tehnologije li {width: 23.25%; margin: 2% 2% 2% 0px; padding: 0px;
float: left; box-sizing: border-box; }
#main .grid-3 .block .tehnologije li:nth-child(4n+4) {margin: 2% 0px 2% 0px;}
#main .grid-3 .block .tehnologije li img {border: 1px solid #BCBCBC; padding: 3px; margin:
0px; box-sizing: border-box; }
#main .grid-3 .block form {margin: 0px; padding: 0px;}

#main .grid-3 .block form input[type="text"], #main .grid-3 .block form
input[type="email"] {background: #444444; border: none; color: #fff; line-height: 20px;
padding: 5px 10px; margin: 0px 0px 10px; box-sizing: border-box; width: 100%;}
#main .grid-3 .block form textarea {background: #444444; border: none; color: #fff; line-
height: 20px; height: 65px; padding: 5px 10px; margin: 0px 0px 10px; box-sizing: border-
box; width: 100%;}
#main .grid-3 .block form input[type="submit"] {margin: 0px; padding: 5px 10px;
background: #2a66c0; border: none; color: #fff}
footer
Na kraju, ostaje nam samo da odradimo još futer. Futer ćemo definisati koristeći
html5 tag footer. Takodje, možemo ga definisati i u divu čiji će id biti footer, ali svakako mi
ovde koristimo html5 tag.
<footer>
Copyright © 2015 ICT-CS klaster akademija Kragujevac. All rights reserved
<span><a class="top" href="#top"></a></span>
</div>
</footer>
Pored osnovnih informacija, imamo i link koji će nas voditi na početak strane, koji je
definisan u spanu. Ovo ćemo stilizovati kao strelicu, sliku već imamo spremnu, a kako bi
vizuelno lepše izgledalo u main.js file ćemo prekopirati skriptu po nazivu Smooth
scrolling, koja će animirati skrolovanje na vrh sajta.

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &&
location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Što se tiče stila, span će imati float:right, a sama klasa top pozadinsku sliku, koja je
zapravo strelica koja će voditi na vrh sajta.
footer .container {background: #fff; margin: 30px auto; padding: 20px 0px; box-sizing:
border-box; text-align: center; color: #000; border-width: 1px 1px 2px 1px; border-style:
solid; border-color: #BCBCBC; }
footer span {float: right;}
footer span .top {background: url("../images/back_to_top.png") center center no-repeat;
width: 20px; height: 20px; margin-right: 10px; display: block;}
Sada kada smo odradili početnu stranu, ostaje nam da odradimo i par unutrašnjih
strana.
Možemo iskoristiti ovo što smo radili kao osnovu za sve druge strane, kako bi dobili
na vremenu. Ono što je bitno, kada pravimo novu stranu je da odradimo sledeće:
 Izmena title taga

 Izmena meta tagova – description i keywords
 Modifikacija menija i izmena klasa active
 Brisanje kompletnog sadržaja, ili bar dela sadržaja iz #main koji se neće
prikazivati na unutrašnjim stranama

Responsive dizajn
Prilagodljiv dizajn web strane (eng. Responsive web design, RWD) predstavlja web
dizajn koji omogućava optimizovano prikazivanje, jednostavno korišćenje, čitanje, i
kretanje kroz web sajt koji će biti pregledan na različitim uređajima. Zapravo to je tehnika
koja nam omogućava da jednu web stranicu možemo pregledati na raznim uređajima
različitih rezolucija. Pregledanje web stranice koja nema responsive dizajn na uređajima
sa manjom rezolucijom može biti neugodno. Da bi korisnik došao do traženih informacija
deo svog vremena izgubiće kretajući se kroz samu stranu (skrolovanje, zumiranje,
pomeranje). Pri kreiranju responsive web strana sadržaj se prilagođava različitim
širinama uređaja korišćenjem fluidnog dizajna, fleksibilnih slika kao i CSS3 media queries
(tehnologija koja nam omogućava da na različitim širinama uređaja koristimo različita
CSS svojstva) i na taj način pruža korisnicima jednostavnije korišćenje.
CSS media queries dozvoljavaju strani da koristi različite CSS stilove na različitim
dimenzijama uređaja na kome se sadržaj prikazuje. Na taj način kreator sajta može
prilagoditi veličinu slova, margine i sve ostale elemente raznim uređajima kako bi strana
bila optimizovanija za korišćenje.
Za početak, na mobilnim verzijama se meni prikazuje drugačije, i obično je to meni

koji se pojavljuje sa leve strane sajta. U našem primeru koristićemo Slidebars -
http://plugins.adchsm.me/slidebars/.
Uz Slidebars pozivamo skript i css koji smo dobili u fajlu koji je preuzet sa zvaničnog
sajta. Ovo sve kopiramo u <head> tag.
<link rel="stylesheet" href="css/slidebars.min.css" />

<script src="js/slidebars.min.js"></script>
U body tagu imamo div koji ima klase left-side sb-slidebar sb-left, kako bi definisali
meni koji se pojavljuje sa leve strane. Takodje, imamo i data-sb-width="200px" koji nam
ograničava širinu slidebar-a na 200px, s obzirom da imamo neke starije modele telefona
koji imaju ekrane od svega 240px, pa smo se na taj način osigurali da će se dobro videti
slidebar i na tim uredjajima.
Naravno, u slidebar ponovo pozivamo logo, ali i kopiramo kompletnu navigaciju iz

nav taga, pošto će nam sada to biti jedini meni za navigaciju na sajtu.
<div class="left-side sb-slidebar sb-left" data-sb-width="200px">
<img src="images/logo.png" alt="Klaster akademija" />
<ul>
<li class="active"><a href="#">Početna</a></li>
<li><a href="onama.html">O nama</a></li>
<li><a href="usluge.html">Usluge</a></li>
<li><a href="#">Ponuda</a>
<ul class="submenu">
<li><a href="#">Ponuda 1</a></li>
</ul></li>
<li><a href="#">Uslovi plaćanja</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="#">Galerija</a>
<ul class="submenu">
<li><a href="#">Galerija 1</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<p>Telefon: <strong>+381 34 502535</strong><br />
Fax: <strong>+381 34 502536</strong><br />
E-mail: <strong><a href="mailto:office@ict-cs.org">office@ict-
cs.org</a></strong><br />
Adresa: <strong>Trg Topolivaca 4<br />34000 Kragujevac</strong></p>
</div>
Ostaje nam još da stilizujemo meni sa leve strane, i to radimo preko sledećeg stila.
/*left side + side menu */

.left-side, .left-side a {color: #444444;}
.left-side img {display: block; margin: 10px auto 20px; width: 80%; max-width: 200px;
height: auto; }
.left-side > ul {list-style: none; margin: 0px; padding: 0px; border-bottom: 1px solid
#444444;}
.left-side ul li {border-top: 1px solid #444444; padding: 3px 0px 3px 10px;}
.left-side ul.submenu {list-style: none; margin: 0px 0px 0px -10px; padding: 0px;}
.left-side ul.submenu li {padding: 3px 0px 3px 20px;}
.left-side p {margin: 10px 0px 0px 0px; padding: 0px 5px; line-height: 25px;}
.left-side p strong {display: inline-block; float: right; text-align: right;}
.left-side a {color: #444444;}
Sada nam preostaje da site sredimo da se vidi na odredjenim rezolucijama kako

treba. Prva rezolucija za koju radimo je do 480px širine, što obuhvata večinu današnjih
telefona, u klasičnom položaju, sa klasičnom orijentacijom ekrana.
Kako će nam kod RWD svi divovi i gridovi ići jedan ispod drugog moramo da im
izmenimo širine, tako da svi imaju 100% širine, odnosno maksimalnu širinu do 480px,

koliko je i maksimalna širina rezolucije za koju radimo, i da se prikazuju jedan ispod
drugog.
U slučaju da želite da sakrijte bilo koji div ili element, da se ne prikazuje na mobilnim
uredjajima to možete odraditi preko display: none.
/*Smartphone*/
@media (max-width: 480px) {
.container {width: 100%; padding: 0px 1%; display: block; box-sizing: border-box;}
.grid-3, .grid-4, .grid-6, .grid-8, .grid-9, .grid-12 {width: 100%; display: block;
margin: 0px 0px 20px 0px;}
body {background: #f1f1f1;}
#top { height: 40px; display: block; background: #444444;}
#top .container {background: url("../images/logo-response.png") center center no-
repeat; height: 40px;}
header {margin: 0px;}
header .logo {display: none;}
header .social { margin: 10px; width: 100%; height: 16px; text-align: center;}
header nav {display: none;}
.bx-controls-direction {display: none;}
#main .grid-9 .block, #main .grid-8 .block { padding: 0px; }
#main .slogan h3 {font-size: 14px; padding: 0px 10px;}
.fb-page.fb_iframe_widget, #main .grid-3 iframe {width: 100% !important; max-width:
480px !important; text-align: center;}
footer span {display: block; margin: 0px auto; text-align: center; width: 100%; float:
none;}
footer span .top {background: url("../images/back_to_top.png") center center no-
repeat; width: 100%; height: 20px; margin: 20px 0px 0px; display: inline-block;}
}
Sledeća rezolucija je rezolucija od 480px do 767px. što podržava većinu tableta

manjih rezolucija, i telefone sa landscape orijentacijom, odnosno kada ih rotirate za 90o.
Kao i prethodno slučaju, i ovde ćemo sve gridove i sam container definisati na 100%,
odnosno na 767px maksimalne širine.
Većina podešavanja je ista kao i prethodnoj rezoluciji, s obzirom da je reč o maloj

razlici u širini. Prema potrebi, svaki element možete zasebno definisati.

/*Smartphone & tablets */
@media (min-width: 481px) and (max-width: 767px) {
.grid-3, .grid-4, .grid-6, .grid-8, .grid-9, .grid-12 {width: 100%; display: block;
margin: 0px 0px 20px 0px;}
#main .grid-9 .block, #main .grid-8 .block { padding: 0px; }
#main .slogan h3 {font-size: 14px; padding: 0px 10px;}
.fb-page.fb_iframe_widget, #main .grid-3 iframe {width: 100% !important; max-width:
480px !important; text-align: center;}
footer span {display: block; margin: 0px auto; text-align: center; width: 100%; float:
none;}
footer span .top {background: url("../images/back_to_top.png") center center no-
repeat; width: 100%; height: 20px; margin: 20px 0px 0px; display: inline-block;}
}
Kada je reč o mobilnim uredjajima ostaje nam da definišemo još ovu rezoluciju, od
767px – 959px, što je rezolucija tableta. U poslednjih godinu dve dana na tržištu se
pojavio veliki broj tableta koji prikazuju desktop verzije sajtova, ali je svako i dalje ova
rezolucija jako važna. Prema potrebi, ovde gridove možemo definisati sa novim širinama,
jer najverovatnije neće svi biti kao u prethodna 2 slučaja 100%.
/* Tablets */
.grid-3 {width: 50%; min-height: 250px;}
I na kraju, ostaje nam da premostimo jaz od 960px - 1199px, što predstavlja desktop
rezoluciju, ali kod nekih starijih i manjih monitora. Takodje, ova rezolucija se puno
koristili na netbook računarima, ali je sve manje i manje ima, i uglavnom se podrazumeva
da je desktop rezolucija preko 1200px.

/*Desktop*/
#top {display: none !important}
header .container #showLeftPush span{display: none;}
}
@media (min-width: 1200px) {

#top .container {display: none !important}
header .container #showLeftPush span{display: none;}
}
Kada smo sve ovo uneli na dno našeg CSS fajla, ostaje nam samo da proverimo
kako se vidi sajt na telefonu ili tabletu. Takodje, možete koristiti i neke od sajtova za ovo,
kao i opciju Responsive Design View u Mozili, koju dobijate kombinacijom tastera Ctrl +
Shift + M. U RDV možete sami odabrati rezolucija za testiranje, ali je svakako preporuka
da sajt pogledate i na nekom od mobilnih uredjaja, i na njima da instalirate više
browsera, jer su razlike primetne. Dešava se i da isti browser na 2 različite verzije OS vidi
različito site.

Bootstrap
Kako smo se već upoznali sa HTML-om i CSS-om, upoznaćemo se nakratko sa
Bootsrap frameworkom. Programeri vole da jednom reše problem i da jednom dobijeno
rešenje primenjuju na više različitih situacija. Nažalost, to kod dizajna nije slučaj.
Ovim načinom razmišljanja su programeri došli do vrlo korisnih biblioteka, praksi, i

okruženja bez kojih slobodno može da se kaže da ne možemo da zamislimo moderan
razvoj za web. Neki od tih su jQuery, Rails, Django, LESS, itd.
Međutim, interfejs dizajneri nisu poznati po ovako visokom nivou sistematizacije
procesa, i standardizacije praksi koje obavljaju svakodnevno. Moglo bi se reći da interfejs
dizajn i nije baš najzahvalnija stvar za standardizaciju — što je donekle i istina, što ćemo i
dokazati — ali je takođe istina da interfejs dizajn kao disciplina sadrži u sebi određene
konvencije (takozvane “UI šeme”) koje uopšte nije loše negovati, i standardizovati.
Bootstrap je prvi, i za sada najkompletniji pokušaj da se
za interfejs dizajn uradi ono što je jQuery uradio za JavaScript.
On je front-end framework, koji se u suštini sastoji od
nekoliko CSS i JavaScript fajlova koji mogu pomoći da brže
napravite web sajtove, namerno donoseći neke osnovne
odluke za Vas i uključujuči unapred napravljene vidžete i
komponente.
Trenutno aktuelna verzija Bootstrap 3 ima mnogo upakovanih opcija u sebi, ali Vi
uvek možete odabrati samo one koje su Vam potrebne za Vaš projekat i preuzeti ih. Na
Bootstrap sajtu postoji opcija „Customize“ koja omogućava da selektujete elemente koje
ćete koristiti, a neki od njih su:
• Grid sistem koji osigurava skladnu izgradnju šablona, i strukture stranica.
• Sređena tipografija koja počinje resetom koji primorava brauzere da renderuju
stranice na najsličniji mogući način.
• Formulari koji su inače noćna mora svakog front-end developera, sa BOOTSTRAP-
om postaju mačiji kašalj.
• Navigacioni elementi u vidu globalnih, fiksiranih, meni, i tabovanih varijanti.
• Dijalozi i poruke uz pomoć kojih možete obaveštavati korisnike o rezultatima i
posledicama njihovih akcija.
• Dugmad i korisničke akcije koje olakšavaju uspostavljanje hijerarhije između akcija
za koje se očekuje da korisnici prave.
• Ikonografija koja omogućava dodavanje ikonica uz vrlo malo truda i vremena.
• Dinamički UI elementi u vidu modalnih prozora, popover-a, i tool tip-ova.
• Responsive dizajn svi BOOTSTRAP moduli su dizajnirani u vidu sa tim da će biti
korišćeni između ostalog i na malim ekranima.

Bootstrap 3 je predstavio novi flat dizajn koji je u trendu, ali on ima takođe i dve
važne funkcionalne prednosti. Prvo, pojednostavljajući neke od estetskih detalja olakšava
prilagođavanje za sopstvene potrebe, a drugo, dramatično povećava brzinu odgovora,
što u osnovi znači koliko dugo je potrebno browser-u da preuzme sve elemente na web
stranici.
Suština Bootstrap-a je u pozivanju već unapred definisanih klasa u Vašem kodu.

Prethodno naravno morate preuzeti Bootstrap CSS i java script fajlove i pozvati ih u svom
templejtu.
Može biti malo teže u početku da pozicionirate sve elemente, ali kada jednom
naučite osnovni princip pozivanja klasa, sve će ići mnogo lakše.
Ukoliko želite da naučite
Bootstrap prvi i najvažniji korak je
razumevanje grid sistema, a to ćete
najbolje postići ako odete na zvanični
Bootstrap sajt i proučite
dokumentaciju. Nakon toga
savetujemo da preuzmete Bootstrap i
pokušate sami da napravite neke
izmene.
Grid Sistem?
Bootstrap 3 u stvarnosti ima grid sistem sa 4 nivoa „responsivnosti“. Na ilustraciji
možete videti ukupno 12 gridova. Na osnovu širine svakog elementa odredjuje se koliko
će odredjeni div imati širinu, tj da li će zauzeti 2, 3 ili više grida.

Na mobilnom uređaju raspored se učitava kao jedna kolona sa 12 redova smeštenih
jedan ispod drugog, tablet će prikazati dve kolone sa 6 redova, slično tome ekran srednje
veličine prikazaće 3 kolone i 4 reda i na kraju uređaji velikih ekrana učitaće raspored u 4
kolone i tri reda. Kako bi to izgledalo na konkretnom primeru uređaja srednje veličine
kao što je laptop ili standardni desktop (3×4 grid raspored) pogledajte u primeru ispod.
Primer koda:
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
</div>
</div>
Ukratko:
• BOOTSTRAP je početna tačka za izgradnju interfejsa.
• Ukoliko odlučite da koristite BOOTSTRAP, to ne znači da vam nije potreban UI
dizajner.
• Neizmenjen BOOTSTRAP je idealna alatka za MVP-ove, lične projekte, i servise
namenjene vrlo malom broju korisnika, hobi-sajtove.
• Interfejs dizajn nije slagalica oprobanih rešenja za prethodno definisane probleme,
već odabir adekvatnih rešenja (i put do njih) za specifične probleme, u specifičnim
okolnostima.

Kako boje Vašeg sajta utiču na posmatrača?
Mnogobrojna istraživanja pokazala su da su određene boje bolje i da podsvesno

stvaramo veze između boja i emocija. Od momenta kada otvorimo oči, pa sve dok ih ne
zatvorimo, okruženi smo bojama. Većina ljudi boje deli vrlo jednostavno - na one koje
volimo i na one koje ne volimo. Ipak, iza palete boja stoji vojska psihologa, dizajnera i
marketing stručnjaka, koji boje koriste kao "oružje". To je oružje u sferi web i grafičkog
dizajna ipak prilično moćno. Njihova moć leži u psihološkim asocijacijama i podsvesnim
povezivanjem boja s osećanjima.
Kada se priča o web dizajn -u i bojama, misli se na pozadinu web sajta, navigaciju,
logo, dugmad, banere, boje fontova i sve ostale elemente na koje korisnik nailazi u
susretu s web sajtom. Obično je svrha postojanja web sajta zainteresovati posetioca,
pružiti mu sve informacije vezane za proizvod ili uslugu koje bi ga mogle zanimati te ga
ubedite da se ponovno vrati. I naravno, da taj proizvod i kupi. Prezentacija na internetu u
neku je ruku nezahvalna jer joj nedostaje ključan faktor, ljudski, pa ga na razne načine
treba nadoknaditi. Tu uskače web dizajn, koji istovremeno mora obaviti nekoliko
zadataka. Prvo, stranica mora izgledati dobro. Drugo, mora osigurati laku i jednostavnu
navigaciju. Treće, mora što duže zadržati pažnju posetioca. Četvrto, mora lagano navoditi
posetioca u smeru željene konverzacije.
Jedan od ključnih faktora pravilan je odabir boja, pozadine, teksta, naslova, linkova,
okvira itd. Upravo zbog toga svaki ozbiljan (i neozbiljan) dizajner treba da zna dosta o
psihologiji boja, jer su one usko povezane sa osećanjima i percepcijom. Uz to što izazivaju
emotivne reakcije, boje mogu stvoriti i nove veze s brendom. Dobar primer je Facebook i
njegova karakteristična plava boja. Takođe, dokazano je da boja poboljšava pamćenje. U
slučaju brendova i poboljšava prepoznavanje brenda za 80%. Zbog toga i nije neobičan
podatak da boje korišćene na web stranici imaju gotovo najveći uticaj na komunikaciju sa
posetiocem sajta. Pravom kombinacijom boja firma može povećati broj konverzija, a to
znači više posetilaca pretvoriti u klijente ili povećati broj prodatih proizvoda. Zbog toga
dajemo nekoliko saveta kako da Vam pravilan izbor boja donese korist.
1. Boje utiču na čitljivost tekstova
Osnovni princip boja na web sajtovima je praktičnost. Pre nego što uopšte počnete
razmišljati o tome na koji će način boja psihološki uticati na posetioce, oni moraju moći
pročitati tekst na Vašoj web stranici. Boja, kao i veličina i izbor fonta direktno utiču na
čitljivost. Iako čitljivost zavisi i od vrste fontova, ne sme se zanemariti uticaj kontrasta na
samu vidljivost. Pobrinite se da su boje teksta i pozadine dovoljno različiti (crna-bela,
crvena-bela, crna-žuta itd.).

2. Boje podstiču emocije
Kada birate boje za svoj web dizajn, birajte pažljivo! Koristite boje s namerom, one
koje su primerene ciljanoj publici, poruci koju šaljete i proizvodu koji prodajete. Ne
zaboravite boje uskladiti sa sveukupnom osećajem - 'feelingom' koji želite da Vaša web
stranica šalje. Ključna stvar pri efikasnom korišćenju boja je razumevanje načina na koji
ljudski mozak 'boji' emocije. Iako postoje kulturološke razlike u percepciji nekih boja,
postoje ipak i univerzalna i opšte prihvaćena pravila.
 Crvena obično simbolizuje uzbuđenje, strast i ljutnju. Uz to, naglašava važnost ili
hitnost.
 Narandžasta je boja koja označava osećaje sreće, radosti i simboluzuje sunčevu
svetlost.
 Žuta je boja koja simbolizuje radost, sreću i inteligenciju. Nekad asocira na oprez,
kritiku ili ljubomoru.
 Zelena je boja oporavka, harmonije i sigurnosti, novog početka. Može biti
povezana i sa nevinošću ili rastom.
 Plava asocira na spokoj, mirnoću i poverenje, ali i na tugu, depresiju i hladnoću.
 Ljubičasta je kraljevska boja koja označava luksuz i bogatstvo. Takođe asocira i na
duhovnost, ženstvenost, magiju i mističnost.
 Bela je boja čistoće, jednostavnosti i sigurnosti, ali može označavati i hladnoću,
udaljenost ili odsutnost.
 Crna predstavlja eleganciju, moć, dubinu, modernizam i formalnost, ali i smrt.
3. Različite kombinacije boja definišu poruku
Slično kao što svetlija ili tamnija nijansa iste boje mogu izazvati različite osećaje, tako
i različite kombinacije boja mogu izazvati drugačije emotivne reakcije. Boje mogu biti
komplementarne, kontrastne ili zajedno raditi na komunikaciji određene poruke koja se
želi poslati. Pri odabiru boja vrlo je važno da dobro poznajete one kojima se obraćate.
4. Odabir boja bi trebao biti konzistentan
Ako koristite previše boja, izlažete se većem riziku nego ako ih koristite premalo. U
slučaju korišćenja previše boja, stranica može izgledati haotično i pretrpano, pa se
sadržaj koji želite istaknuti lako izgubi u gužvi i posetilac teže pronalazi potrebne
informacije. Uz to, previše boja zamara oči, što znači da će umorni posetilac brzo
napustiti Vašu web przentaciju, a to Vam nikako nije cilj. Zbog toga se preporučuje
provlačenje dve ili tri boje kroz celi dizajn. Jedna dominantna boja, druga koja će je
suptilno pratiti i treća koja će se koristiti za isticanje ključnih elemenata na web sajtu.
5. Web boje nisu jednake kao i boje u štampanim materijalima
Obavezno uzmite u obzir činjenicu da monitor nije jednak štampi, i da svaki monitor
nije istog kvaliteta! Na različitim veličinama i kvalitetu monitora iste boje izgledaju

drugačije, pa se preporučuje korišćenje boja koje su po pravilu svetlije od onih koje bi
koristili za grafička izdanja.

Literatura / Linkovi
HTML Tutorial - http://www.w3schools.com/html/default.asp
CSS Tutorial - http://www.w3schools.com/css/default.asp
CSS References - http://www.w3schools.com/cssref/
CSS properties Index - http://meiert.com/en/indices/css-properties/
CSS properties list - http://www.pageresource.com/dhtml/cssprops.htm
Google Fonts - https://www.google.com/fonts
CSS3 generator - http://css3gen.com/
CSS3 generator - http://css3generator.com/
Gradient generator - http://www.colorzilla.com/gradient-editor/
bxSlider - http://bxslider.com/
Slidebars - http://plugins.adchsm.me/slidebars
Smooth scrolling - https://css-tricks.com/snippets/jquery/smooth-scrolling/
Colorbox - http://www.jacklmoore.com/colorbox/
HTML validator - https://validator.w3.org/
CSS validator - https://jigsaw.w3.org/css-validator/
Responsive test - http://responsivetest.net/
Responsive test - http://quirktools.com/screenfly/

Toaz - Info Html5 Css3 Kurspdf PR

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

Toaz - Info Html5 Css3 Kurspdf PR

Uploaded by

Copyright:

Available Formats

––

Klaster akademija je projekat Poslovnog udruženja IKT klaster centralne Srbije

Prezentacija firme na internetu putem web sajta ........................................................... 5

Klaster akademija HTML5 + CSS3 za početnike|2

Klaster akademija HTML5 + CSS3 za početnike|3

Klaster akademija HTML5 + CSS3 za početnike|4

Klaster akademija HTML5 + CSS3 za početnike|5

Kako odabrati ime domena?

Klaster akademija HTML5 + CSS3 za početnike|7

10 osnovnih elemenata koje web sajt mora sadržati

Klaster akademija HTML5 + CSS3 za početnike|9

Klaster akademija HTML5 + CSS3 za početnike|10

Klaster akademija HTML5 + CSS3 za početnike|11

Takođe postoje i samozatvarajući tagovi, kojima nije potrebno stavljati zatvarajući

Tagovi za formatiranje teksta

Tagovi slika i medija

Klaster akademija HTML5 + CSS3 za početnike|13

Klaster akademija HTML5 + CSS3 za početnike|15

CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle

Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog

Klaster akademija HTML5 + CSS3 za početnike|16

Predefinisane ključne reči

Klaster akademija HTML5 + CSS3 za početnike|17

Klaster akademija HTML5 + CSS3 za početnike|18

Podešavanje svojstva ivica

Klaster akademija HTML5 + CSS3 za početnike|19

Sadržaj koji ne staje u element

Definisanje boja i slika u pozadini

Klaster akademija HTML5 + CSS3 za početnike|20

Podešavanje svojstva kursora

Podešavanje stilova liste

Klaster akademija HTML5 + CSS3 za početnike|21

Načini definisanja stilova

• external – stilovi u eksternom dokumentu

Stil unutar HTML elementa

Koristi se atribut style unutar taga.

Stilovi definisani unutar dokumenta

Ova 2 načina se na preporujučuju, već da to bude definisano u eksternom .css fajlu.

Stilovi definisani u eksternoj stranici stilova

Kreira se zasebna datoteka sa definicijom stilova. Ekstenzija je uobičajeno .css. Sam

Klaster akademija HTML5 + CSS3 za početnike|22

Klaster akademija HTML5 + CSS3 za početnike|23

Definisanje <head> i <body> taga

Klaster akademija HTML5 + CSS3 za početnike|24

Pogledajmo kako naš kod izgleda u Notepad++ editoru

Klaster akademija HTML5 + CSS3 za početnike|26

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

Normalize.css je mali CSS fajl koji obezbeđuje bolju cross-browser doslednost u

HTML5 Shiv and Respond.js su Java-skripte koje omogućavaju stajling HTML5

Klaster akademija HTML5 + CSS3 za početnike|27

Naravno da će u odnosu na sadržaj i

Kod za Google Analytics takodje integrišemo u okviru <head> taga, pozivanjem

Crvenom bojom je označen UA kod, koji je jedini promenljivi deo i on predstavlja ID

Klaster akademija HTML5 + CSS3 za početnike|28

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

charset – Određuje kodiranje znakova za HTML dokument, u slučaju srpskih slova

robots – Daje informaciju robotima da li mogu da indeksiraju stranu ili ne

Klaster akademija HTML5 + CSS3 za početnike|29

Pretpostavljamo da tekst i slike imate spremne, i da je potrebno samo da se unesu,

 <b>, </b> bold

 dodatnog vertikalnog prostora

Klaster akademija HTML5 + CSS3 za početnike|30

<p>Moje ime je Petar, a prezime Petrovć i trenutno radim na računaru.</p>

/left side + side menu /