Web Početnik
Naučite što je to HTML, CSS te kako pretvoriti dizajn u
funkcionalnu web stranicu
Igor Benić
This book is for sale at http://leanpub.com/webpocetnik
This version was published on 2014-10-16
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
©2014 Igor Benić
Also By Igor Benić
WPB3 - Wordpress na Bootstrapu 3.x
Sadržaj
Predgovor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML . . . . . . . . . . . . . . . .
Uvod u HTML . . . . . . . . . .
HTML Elementi . . . . . . . . .
Još Elemenata . . . . . . . . . .
Atributi . . . . . . . . . . . . .
Što je to atribut? . . . . . . . . .
Koliko atributa se može koristiti?
Što dalje? . . . . . . . . . . . .
Poveznice . . . . . . . . . . . .
Slike . . . . . . . . . . . . . . .
Dodatni atributi . . . . . . . . .
Zadatak . . . . . . . . . . . . .
Tablice . . . . . . . . . . . . . .
Još primjera . . . . . . . . . . .
Dodatni atributi . . . . . . . . .
Zaključak . . . . . . . . . . . .
Šta sada? . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2
2
2
4
8
8
9
9
10
12
12
12
12
13
14
15
16
Uvod u CSS . . . . . . . . . . . . . . . . . . .
Alati? . . . . . . . . . . . . . . . . . . . .
Što je to zapravo CSS? . . . . . . . . . . .
CSS sintaksa . . . . . . . . . . . . . . . . .
Gdje pišem CSS? . . . . . . . . . . . . . .
CSS - Boje i pozadina . . . . . . . . . . . .
CSS Fontovi . . . . . . . . . . . . . . . . .
CSS - Tekst i Poveznice . . . . . . . . . . .
CSS - Identifikacija i grupiranje elemenata
CSS - Box model . . . . . . . . . . . . . .
CSS - Floats . . . . . . . . . . . . . . . . .
CSS - Pozicioniranje i z-index . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
17
17
17
17
18
19
24
27
30
32
36
37
Moja prva web stranica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
SADRŽAJ
Uvod u Psd2Html . . . . . . . . . .
Rezanje dizajna . . . . . . . . . . .
PSD2HTML - Početna struktura . .
PSD2HTML - Header . . . . . . . .
PSD2HTML - Gornji sadržaj . . . .
PSD2HTML - Slider . . . . . . . . .
PSD2HTML - Donji sadržaj i footer
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
41
42
52
59
73
83
91
Autor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Savjetovanje i poduke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
97
97
Predgovor
Ova knjiga napravljena je kao skup tri tečaja koja se nalazi na www.lakotuts.com¹. Ta tri tečaja
obuhvaćaju učenje HTML-a, CSS-a te pretvaranja dizajna u pravu web stranicu.
Knjiga je namijenjena svima koji nikada nisu otvorili neki editor i počeli izrađivati web stranicu te
može biti primjerena i korisnicima koji se ne bave web stranicama ali ponekad moraju nešto sebi
ili nekome promijeniti preko CSS-a ili HTML-a. Ovom knjigom moći će pratiti samu strukturu web
stranice i snalaziti se u strukturi jer nakon što se prođe cijeli sadržaj knjiga posjedovati će se znanje
za razumijevanje i izradu web stranice.
¹http://www.lakotuts.com
HTML
Uvod u HTML
U ovom serijalu upoznati ćeš HTML (HyperText Markup Language), proći ćeš sa nama većinu
elemenata te stvoriti temelj za daljnje proučavanje HTML-a i izradu web stranica. Za izradu običnih
HTML stranica dovoljan je notepad ( Windows ) ali ja bih ti preporučio da posjetiš našu stranicu sa
popisom Alata² za izradu web projekata i počneš koristiti jedan od alata za razvoj web projekata.
Što je HTML?
HTML je prezentacijski jezik koji služi za prikazivanje informacija putem pretraživača. Ovaj jezik
je temelj za prikazivanje informacija te ćeš naučiti već u par članaka kako napraviti svoju prvu web
stranicu.
Da li mi je potreban server?
HTML ne zahtjeva podršku servera već je dovoljan samo pretraživač i datoteka u kojoj je spremljen
kod od HTML-a.
Što ćemo naučiti prateći ovaj serijal?
Serijal HTML naučiti će te pravljenju osnovne web stranice i korištenju elemenata HTML-a. Serijal
je podijeljen u nekoliko kratkih članaka kako te ne bi zamarali sa svim informacijama u jednom
članku jer bi te to moglo zbuniti i izgledati teško, a zapravo je jako jednostavno. Sljedeći korak za
tebe je da odabereš svoj alat u kojemu ćeš pratiti ovaj serijal, otvoriš svoj najdraži pretraživač i
kreneš čitati dalje :)
HTML Elementi
U prošlom članku upoznali smo se općenito sa HTML-om. Sada je vrijeme za krenemo u dublje
upoznavanje HTML-a. HTML se sastoji od elemenata koji predstavljaju različite vrste sadržaja.
HTML Elementi sastoje se od tagova odnosno sastoji se od otvarajućeg taga, sadržaja i zatvarajućeg
taga.
²http://www.lakotuts.com/alati/
3
HTML
1
<tag>Sadržaj</tag>
Sada kada smo saznali što je to zapravo HTML element možemo napraviti našu prvu praznu stranicu.
Otvori svoj alat za izradu web projekata i upiši sljedeće:
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Ovo je početna struktura HTML dokumenta. Početnim <html> i deklaracijom !DOCTYPE pretraživaču govorimo da otvara html dokument i to HTML5 dokument zbog jednostavne i kratke deklaracije
!doctype. Zatim se otvaraju i zatvaraju tagovi head _i _body. Unutar head taga upisujemo podatke
bitne za pretraživača kao što su tzv. meta tagovi kao što je opisni meta tag (description), charset
(npr. utf-8), zatim upisujemo i tag title koji možeš primijetiti kada otvaraš web stranicu na vrhu
otvorenog prozora pretraživača.
Title tag
Tag title na web pretraživaču.O _head _tagu i sadržaju unutar njega pričati ću u kasnijim dijelovima
ovog serijala.
Moja prva web stranica
Unutar taga body upisujemo podatke koje će pretraživač prikazati nama. Tu sve što se upisuje se
prikazuje. Sada ćemo napraviti svoju prvu web stranicu, upiši sljedeće i spremi tu datoteku kao
_.html _npr. index.html
4
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja prva web stranica
i ovdje pišem sav sadržaj koji želim prikazati.</p>
</body>
</html>
Sada kada otvoriš svoj index.html u svojem omiljenom web pretraživaču i pogledaj svoju prvu web
stranicu.
Prva Web stranica
U ovome primjeru koristili smo tag heading h1 i tag paragraph p. Heading se koristi uglavnom za
naslove te se koriste tagovi od h1 do h6 gdje je h6 najmanja veličina naslova dok je h1 najveća veličina
naslova. Paragraph se koristi općenito za tekst. Meta tag charset=”utf-8” daje upute pretraživaču da
koristi skup znakova u kojemu se nalaze i znakovi našeg pisma (č,š,ž….). U sljedećim člancima ovog
serijala upoznati ćeš se sa još nekim HTML elementima.
Još Elemenata
U prošlom članku napravili smo našu prvu web stranicu koja je imala samo naslov i jedan kratki
tekst. U ovome članku unijeti ćemo još malo teksta kako bi to ličilo na nekakvu web stranicu.
5
HTML
Otvorimo našu zadnju stranicu u alatu za izradu web projekata i krenimo proširivati ju. Za sada
unijeti ćemo novi heading tag - h2 koji će biti malo manji od prošlog naslova.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
</head>
<body>
<h1> Moja prva web stranica </h1>
<p>
Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazat\
i.
</p>
<h2> Škola HTML-a </h2>
<p> www.lakotuts.com </p>
</body>
</html>
Sada naša web stranica trebala bi ličiti na sljedeće :
Prva web stranica, dodatni elementi
Oblikovanje teksta
Tekstovi izvan i unutar nekih tagova mogu koristiti druge tagove koji služe za oblikovanje prikaza
teksta kao što su tagovi strong, em ili small. Sljedeći zadatak je napraviti neke dijelove naše web
stranice podebljane, neke manje veličine teksta, a neke ukošene. Moj primjer je sljedeći:
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
6
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8" />
</head>
<body>
<h1>
Moja prva web stranica
</h1>
<p>
Ovo je moja
<strong> prva web stranica </strong> i ovdje pišem sav
sadržaj koji želim prikazati.
</p>
<h2><em> Škola HTML-a </em></h2>
<small><p> www.lakotuts.com </p></small>
</body>
</html>
Bitno! Potrebno je primijetiti da se ide po redoslijedu otvaranja tagova, tako da što je zadnje
napisano, prvo se zatvara (tzv. LIFO - last in first out). Otvaranje i zatvaranje tagove ne smije se
križati.
Hoću novi red
Novi red se dodaje jednostavnim elementom br koji se zatvara bez sadržaja između na sljedeći način
:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja <strong>prva web stranica</strong>
<br/> i ovdje pišem sav sadržaj koji želim prikazati.</p>
<h2><em>Škola HTML-a</em></h2>
HTML
13
14
15
7
<small><p>www.lakotuts.com</p></small>
</body>
</html>
Može se primijetiti kako se element za novi red zatvorio na kraći način : . Još jedan takav element
koji se zatvara na kraći način je <hr/> koji dodaje horizontalnu crtu uzduž html dokumenta. Pa ajmo
dodati jednu liniju koja će razdvajati prvi paragraph sa drugim naslovom. Ovdje neću napisati kako
sam napravio to, već očekujem od tebe da napraviš to sam/a. Siguran sam da ćeš uspjeti.
Liste, listanje :O
Da, HTML omogućuje i pisanje listi. Liste se naime mogu napraviti tako da se poredaju po brojevima
ili da budu bez brojeva odnosno odvajaju se nekim znakom. Elementi koji označuju početak i
završetak lista su : 1) <ol></ol> za listu za brojevima i 2) <ul></ul> za listu bez brojeva.
Nakon što se lista otvori, svaki član lista mora biti obilježen sa tagom LI : <li>Naziv člana ili cijeli
sadržaj</li>. Pokušaj sam/a napraviti svoju listu najdražih filmova i pjesama. Neka filmovi budu
poredani po brojevima od najboljeg prema najlošijem kao neka Top lista najprodavanijih filmova.
Ukoliko zapneš ispod možeš pronaći cijeli HTML dokument.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja <strong>prva web stranica</strong> <br/>
i ovdje pišem sav sadržaj koji želim prikazati.</p>
<hr/>
<h2><em>Škola HTML-a</em></h2>
<small><p>www.lakotuts.com</p></small>
<ol>
<li>Film 1</li>
<li>Film 2</li>
<li>Film 3</li>
</ol>
<ul>
8
HTML
23
24
25
26
27
28
<li>Pjesma 1</li>
<li>Pjesma 2</li>
<li>Pjesma 3</li>
</ul>
</body>
</html>
Dodatni Elementi
Evo nas još malo pa pri kraju našeg putovanja kroz HTML. Već si spreman/na na izradu svoje prave
web stranice. Do sljedećeg članka izvježbaj malo ove elemente koje smo prošli i napravi par svojih
stranica.
Atributi
Atributi su važan dio elemenata jer se koriste za specifičniji prikaz sadržaj tj. točnije rečeno za
dodavanje još informacija u neki tag kako bi pretraživaču bilo jasnije što je potrebno napraviti.
Što je to atribut?
Atributi su dio taga koji se nalazi unutar otvarajućeg taga i koriste se za specifičnije određivanje
sadržaja.
1
<h1 style="background-color: #ff0000">Moja prva web stranica</h1>
9
HTML
Ovo je jedan atribut koji daje pozadinu tagu h1.
Atributi - BG
Koliko atributa se može koristiti?
Nema ograničenja kod korištenja atributa u jednom elementu. Razni elementi koriste razne atribute,a
većina atributa su isti kod svakog elementa. Elementi poput i <hr/> taga koji predstavljaju sami sebe
tj. nova linija i horizontalna linija nemaju svoje atribute niti koriste neke zajedničke atribute osim
“style” atributa ukoliko se želi dodati nekakav stil na taj element kao što smo mi dodali pozadinu
tagu h1
Što dalje?
Kako biš uspio/la naučiti većinu atributa i mogao/la ih koristiti na svojoj stranici u svojem alatu
za izradu web projekata isprobavaj različite atribute. Lista atributa na ovoj stranici može ti pomoći
kako bi te usmjerila u atribute : www.w3.org³
**Pažnja! **
Neki atributi se po današnjim standardima više ne koriste - HTML5
³http://www.w3.org/TR/html4/index/attributes.html
HTML
10
U sljedećem tutorijalu upoznati ćemo se sa poveznicama (eng. Link) gdje će se koristiti par čestih
atributa kod poveznica.
Poveznice
Poveznice (eng. Link) su elementi HTML-a koji služe za povezivanje različitog sadržaja tj. različitih
stranica. Poveznica može poslužiti za povezivanje stranica unutar tvojeg web-a ili za povezivanje
stranica drugih web-ova. U ovome tutorijalu naučiti ćeš kako se to radi. Ovaj tutorijal podijeljen je
na više dijelova:
1. Struktura poveznice
2. Linkanje
3. Linkanje unutar stranice
Svaki dio će se opisati i biti prikazan kodom radi lakšeg razumijevanja.
Struktura poveznice
Struktura jedne poveznice sastoji se od nekoliko atributa i taga a. Sve unutar taga smatra se
poveznicom i klikom voditi će na određeno odredište.
1
2
<a href="index.html" title="Moja prva stranica" target="_blank">Moja prva strani\
ca</a>
Može se primijetiti da su dodana tri atributa href, title i target. Vrijednost href atributa predstavlja
stranicu koju želimo dobiti klikom na poveznicu. Atribut title daje dodatan opis poveznici te ga
je najbolje koristiti na poveznicama koje trebaju dodatan opis ukoliko nije jasno iz samog teksta
unutar poveznice ili se title koristi za unos cjelovitog naziva poveznice ukoliko tekst poveznice
nije u potpunosti prikazan (npr. ovaj link je …… , title=”ovaj link je super”). Atribut target je
namijenjen pretraživaču te daje informaciju kako da ga pretraživač otvori. Najčešće korištene
vrijednosti atributa target :
• _blank - poveznica se otvara u novom prozoru ili tabu
• _self - poveznica se otvara u istom prozoru odnosno tabu
Atributi title i target nisu obavezni kako bi poveznica izvršavala svoju funkciju.
Linkanje
Kada linkamo stranice van našeg web-a potrebno je upisati potpunu adresu web stranice. Netočno:
HTML
1
2
11
<a href="www.facebook.com">Facebook</a>
<a href="facebook.com">Facebook</a>
Točno:
1
<a href="http://www.facebook.com">Facebook</a>
Linkanje unutar stranice
Kada želimo linkati stranica unutar našeg web-a nje potrebno upisivati potpunu adresu već je
dovoljno samo upisati putanju do našeg sadržaja. Ne bi bilo ni krivo upisati i potpunu web adresu
našeg sadržaja. Linkanje stranice u istom direktoriju Probajte napraviti sljedeće, pored vašeg
index.html stvorite još jedan dokument i nazvoite ga kako god hoćete. Ja ću za primjer nazvati
dokument index2.html. Kada bi htio povezati taj dokument unutar index.html dovoljno je u atribut
href upisati index2.html i klikom na tu poveznicu otvoriti će nam se naš novi dokument kao nova
web stranica.
1
<a href="http://www.facebook.com">Facebook</a>
Linkanje stranice u sub-direktoriju Ukoliko želimo malo organiziraniju stranicu možemo naše
nove stranice stavljati u neke sub-direktorije (npr. index.html i subFolder/index2.html). Ako želimo
povezati novu stranicu našeg web-a potrebno je upisati cjelovitu putanju do nove stranice.
1
<a href="index2.html">Moja druga web stranica</a>
Linkanje stranice u direktoriju prije
Smjestimo se sada u index2.html. Sada kada bi htjeli povezati index.html preko index2.html-a
potrebno je linkati na drugačiji način. Kako je index.html u direktoriju iznad index2.html potrebno
je napisati sljedeću putanju :
1
<a href="subFolder/index2.html">Moja druga web stranica</a>
Putanja “../” označuje da smo u jednoj razini iznad index2.html te povezujemo se na stranicu
index.html koja se nalazi u tom direktoriju.
Zaključak
Poveznice nam pružaju različite načine povezivanja sadržaja naše web stranice i sadržaja drugih web
stranica. Koristeći jednostavne nazive naših datoteka i direktorija možemo stvoriti lagane putanje
koje će korisnik naše stranice lakše pamtit. Sljedeće što vam je činiti je otvoriti vaš alat u kojem radite
web stranicu i vježbajte povezivanje sadržaja. U sljedećem tutorijalu naučiti ćete kako prikazivati
slike.
HTML
12
Slike
Svaka web stranica danas ima barem nekoliko slika kako bi predstavili sebe, svoj proizvod ili nešto
drugo vezano uz njih i time povećali svoju klijentelu. U ovome tutorijalu naučiti ćeš kako postaviti
slike na svoju prvu web stranicu. Slika ima svoj zasebni element u HTML-u i to je element . Element
se sastoji od nekolicine atributa koji su specifični upravo za taj element. Ti atributi jesu src i alt.
Atribut src pokazuje na putanju do slike kako bi pretraživač mogao doći do slike i prikazati je.
Atribut alt služi za opis te slike koji se prikazuje u slučaju kada je putanja do slike kriva ili je slika
nedostupna.
1
<img src="putanja_do_slike.jpg" alt="Moja prva slika"/>
Može se primijetiti da element slike ima samozatvarajući tag kao što imaju i i <hr/> tagovi.
Dodatni atributi
Dodatni atributi kod elementa img su width i height kojima se određuju dimenzije širine i visine
slike koju prikazujemo. Jedini potreban atribut za prikazivanje slike kod većine pretraživača je src ,
ostali atributi služe za dodatne informacije.
Zadatak
Dajem ti zadatak da dodaš svojoj web stranici sliku. Otvori svoju web stranicu i pogledaj sliku,
zatim upiši krivu putanju do slike i pogledaj ispis atributa alt. Isprobaj različite putanje do slike na
isti način kao što smo u prošlom tutorijalu vidjeli različite putanje do stranica. Radi se na istom
principu tako da se može prikazati i slika sa druge web stranice ukoliko znamo točnu putanju do nje.
Tablice
Tablice kod HTML-a najčešće se koriste za prikazivanje informacija u strukturiranom obliku kao
što je npr. tablica grupe u nogometu, statistika, informacije o vremenu po danima i sl. U ovome
tutorijalu naučiti ćeš osnove tablica kako biš i ti mogao prikazivati svoje podatke u tablicama.
Osnovna struktura jedne tablice izgleda ovako :
HTML
1
2
3
4
5
6
7
8
9
10
13
<table border="1">
<tr>
<td>ćelija 1</td>
<td>ćelija 2</td>
</tr>
<tr>
<td>ćelija 3</td>
<td>ćelija 4</td>
</tr>
</table>
Tag table označuje početak i završetak tablice. Dodan je atribut border=”1” kako bi se obrubi tablice
vidjeli. Tag tr predstavlja redak to tag td predstavlja stupac. U gornjem primjeru možemo dakle
zaključiti da se radi o tablici sa 2 reda i 2 stupca.
Još primjera
Tablica sa 3 reda i 4 stupca
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1">
<tr>
<td>ćelija 1</td>
<td>ćelija 2</td>
<td>ćelija 3</td>
<td>ćelija 4</td>
</tr>
<tr>
<td>ćelija 5</td>
<td>ćelija 6</td>
<td>ćelija 7</td>
<td>ćelija 8</td>
</tr>
<tr>
<td>ćelija 9</td>
<td>ćelija 10</td>
<td>ćelija 11</td>
<td>ćelija 12</td>
</tr>
</table>
Tablica sa 4 reda i 3 stupca
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
14
<table border="1">
<tr>
<td>ćelija 1</td>
<td>ćelija 2</td>
<td>ćelija 3</td>
</tr>
<tr>
<td>ćelija 4</td>
<td>ćelija 6</td>
<td>ćelija 7</td>
</tr>
<tr>
<td>ćelija 8</td>
<td>ćelija 9</td>
<td>ćelija 10</td>
</tr>
<tr>
<td>ćelija 11</td>
<td>ćelija 12</td>
<td>ćelija 13</td>
</tr>
</table>
Dodatni atributi
Elementi tablice kao i sama tablica mogu imati višestruke atribute kao što su border,align,valign,width,colspan,rowsp
i sl. Najčešći su align,colspan i rowspan. Colspan predstavlja koliko neki stupac zauzima mjesta. Npr.
jedan red (tr) sadrži samo jedan stupac koji zauzima mjesta za tri stupca kao sljedeći primjer.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
15
<table border="1">
<tr>
<td>ćelija 1</td>
<td>ćelija 2</td>
<td>ćelija 3</td>
</tr>
<tr>
<td colspan="3">ćelija 4</td>
</tr>
</table>
Rowspan predstavlja koliko mjesta zauzima stupac, ali u obliku retka kao na sljedećem primjeru.
1
2
3
4
5
6
7
8
9
10
11
<table border="1">
<tr>
<td rowspan="2">ćelija 1</td>
<td>ćelija 2</td>
</tr>
<tr>
<td>ćelija 3</td>
</tr>
</table>
Align kao što i valign _služi za upravljanje položajem teksta unutar ćelije. Align može biti _left,center
i right. Tako da ukoliko imamo postavljeno align=”left” cijeli sadržaj u toj ćeliji biti će postavljen
ulijevo. Kod valign-a imamo sljedeće vrijednosti: top,middle,bottom. Kod ovog atributa koristi se
pozicioniranje po Y-osi odnosno od gore prema dolje. Tako da ukoliko imamo valign=”top” cijeli
sadržaj će početi od vrha ćelije.
Zaključak
Došli smo na kraj serijala HTML u kojem smo prošli najčešće korištene elemente s kojima osoba
koja je prošla ovaj serijal može napraviti svoju web stranicu.
HTML
16
Šta sada?
Nakon ovog serijala potrebno je dalje nastaviti učiti i baviti se HTML-om. Pratite naše ostale
tutorijale, čitajte, gledajte i učite. Jednostavno je, samo je potrebno vježbati. Sljedeći korak bi bio
učenje CSS-a koji je različiti tip jezika te služi za upravljanje izgledom naše web stranice. CSS je
veoma opširan te nije predstavljen u ovome serijalu iz razloga što će CSS biti opisan u zasebnom
serijalu pod nazivom CSS.
Uvod u CSS
CSS je prezentacijski jezik koji služi za određivanje izgleda naše web stranice. Svim elementima
HTML-a možemo promijeniti izgled ili poziciju na našoj web stranici. U ovome serijalu naučiti
ćemo osnove CSS-a kako bi svatko tko prođe ovaj serijal mogao uparavljati izgledom svoje web
stranice.
Alati?
Alati za izradu CSS-a su u većini slučajeva isti alati koji se koriste za izradu HTML stranica odnosno
svih web projekata. Moja preporuka je da koristite alat s kojim vam je najugodnije raditi, a to čak
može biti i Notepad(Windows), Pico(Linux), Simple Text(Mac).
Što je to zapravo CSS?
Riječ CSS je akronim odnosno skraćenica od riječi Cascading Style Sheets. Kao što je prethodno
navedeno, to je prezentacijski jezik za definiranje HTML elemenata odnosno sadržaja web stranice.
To može biti boja slova, pozadina stranice, veličina slova, raspored elementa kao što je npr. slika,
dimenzije elemenata i sl.
CSS sintaksa
Neka svojstva CSS-a mogu se definirati i preko HTML-a (atributi). Ukoliko ste radili već HTML
stranicu onda ćete i prepoznati neke dijelove u CSS-u, ako niste prođite sa nama prvo serijal HTML⁴.
HTML atribut
1
<body bgcolor="#FF0000">
** CSS svojstvo**
1
body {background-color: #FF0000;}
Dakle, možemo primijetiti kako se za element body u CSS-u dodalo svojstvo background-color čija
vrijednost je #FF0000. I HTML atribut i CSS svojstvo ovdje će prikazati jednaku stvar - web stranicu
sa crvenom pozadinom.
⁴http://www.lakotuts.com/serijali/html
Uvod u CSS
18
Gdje pišem CSS?
CSS se može pisati direktno u HTML dokumentu ili se može povezati u HTML dokument. Dikretno
Direktno pisanje CSS-a može biti kao HTML atribut style ili se može dodati unutar tagova style.
Možda je malo zbunjujuće ali dovoljno je pogledati primjere u nastavku i sve će se razjasniti.
HTML atribut style
1
<body style="background-color: #FF0000;">
HTML tag style
1
2
3
4
5
6
<head>
...
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
Kada definiramo atribut style, definiramo ga kao svaki atribut unutar HTML elementa, a kod
definiranja CSS unutar taga style stavlja se bilo gdje u HTML dokumentu. Preporučljivo je stavljati
ga u HTML elementu head.
Povezivanje izvana
Kako bi mogli povezati css potrebna je datoteka sa ekstenzijom tj. formata .css koja se sprema uz
HTML dokument ili u nekom drugom subfolderu kao što je npr. css. Ukoliko uzmemo za primjer da
je naša css datoteka, pod nazivom style, u nekom subfolderu nazvanom css, povezujemo je sa HTML
dokumentom na sljedeći način:
1
2
3
4
<head>
...
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
Datoteka CSS može se nazvati kako god se hoće, ali česti nazivi glavne datoteke su style,main,default
i sl. Prednost povezivanja izvana je ta da nije potrebno za svaki HTML dokument pisati ili kopirati
cijeli naš CSS koji može biti poprilično dugačak već naše definicije sadržaja u CSS-u mogu biti
spremljene u zasebnoj datoteci za lakše mijenjanje izgleda a primjenjuju se sa tim jednim pozivom
na svaku HTML stranicu. Još jedna prednost je ta da ukoliko moramo promijeniti npr. boju slova,
nije potrebno otvarati sve naše HTML dokumente sa CSS-om i tamo mijenjati CSS već je potrebno
samo u toj jednoj datoteci CSS promijeniti boju slova i zatim se to mijenja na svakoj HTML stranici
koja je povezana sa našom datotekom CSS.
Uvod u CSS
19
CSS - Boje i pozadina
Na svojoj web stranci ponekad bi željeli prikazati neki element druge boje ili tekst koji prelazi preko
neke slike. Koristeći neka svojstva css-a možemo postići razne efekte na našoj web stranici i učiniti
je unikatnom. U ovome tutorijalu prikazati ćemo par različitih svojstava css-a :
•
•
•
•
•
•
•
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Color
Svojstvo color predstavlja boju teksta nekog HTML elementa. Moguće je na razne načine pisati boje:
• Hexadecimalne vrijednost (#FFFFFF)
• Imena (red, blue, green)
• RGB (rgb(255,0,0))
U ovome serijalu koristiti će se najčešće hexadecimalne vrijednost boja, kao što je na primjer :
1
p {color:#ff00ee;}
U ovome primjeru svaki HTML element p (paragraph) dobiti će rozu boju, tako da :
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {color:#ff00ee;}
</style>
</head>
<body>
<h1 style="background-color: red;">Moja prva web stranica</h1>
<p>Ovo je moja <strong>prva web stranica</strong> <br/>
20
Uvod u CSS
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
i ovdje pišem sav sadržaj koji želim prikazati.</p>
<hr/>
<h2><em>Škola HTML-a</em></h2>
<small><p>www.lakotuts.com</p></small>
<ol>
<li>Film 1</li>
<li>Film 2</li>
<li>Film 3</li>
</ol>
<ul>
<li>Pjesma 1</li>
<li>Pjesma 2</li>
<li>Pjesma 3</li>
</ul>
</body>
</html>
će izgledati slično ovome :
CSS - Boja teksta
Boja pozadine
Svojstvo background-color predstavlja boju pozadine nekog HTML elementa. Vrijednost ovog
svojstva piše se na isti način kao i svojstvo color, te u ovom serijalu će se najčešće koristiti
Uvod u CSS
21
hexadecimalna vrijednost boje. Na prethodnoj slici i kodu možemo vidjeti kako je dobiven efekt
crvene pozadine preko HTML atributa style.Ukoliko obrišemo taj atribut i prepišemo vrijednosti
atributa unutar css-a, dobiti ćemo isti efekt. Tako da će sljedeći kod dati jednaki efekt kao i prethodno
napisani kod.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {color:#ff00ee;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja <strong>prva web stranica</strong> <br/> i ovdje pišem
sav sadržaj koji želim prikazati.</p>
<hr/>
<h2><em>Škola HTML-a</em></h2>
<small><p>www.lakotuts.com</p></small>
<ol>
<li>Film 1</li>
<li>Film 2</li>
<li>Film 3</li>
</ol>
<ul>
<li>Pjesma 1</li>
<li>Pjesma 2</li>
<li>Pjesma 3</li>
</ul>
</body>
</html>
Slike u pozadini
Preko CSS-a možemo dodati i slike u pozadinu te se to radi preko svojstva background-image.
22
Uvod u CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {color:#ff00ee;}
h1 {background-color: red;}
body {
background-image:url(../css/Untitled-1.jpg);}
</style>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja <strong>prva web stranica</strong> <br/> i ovdje pišem
sav sadržaj koji želim prikazati.</p>
<hr/>
<h2><em>Škola HTML-a</em></h2>
<small><p>www.lakotuts.com</p></small>
<ol>
<li>Film 1</li>
<li>Film 2</li>
<li>Film 3</li>
</ol>
<ul>
<li>Pjesma 1</li>
<li>Pjesma 2</li>
<li>Pjesma 3</li>
</ul>
</body>
</html>
Iz ovog primjera dodali smo sliku (slika je uvodna slika ovog serijala) na HTML element body. Kako
je tijelo web stranice puno veće od slike, slika će se ponavljati po x i y koordinati (sa lijeva na
desno, od gore prema dolje). Do slike se dođe slijedećiupute iz serijala HTML gdje smo vas upoznali
sa elementom a (poveznicom) gdje je objašnjeno dodavanje putanje. U ovome primjeru putanja
url(../css/Untitled-1.jpg) označuje da je slika u folderu css koji je jedna razina iznad našeg .html
dokumenta.
23
Uvod u CSS
CSS - slika pozadine
Background - Repeat
Svojstvo background-repeat _koristi se za postavljanje ponavljanja neke pozadine. U prethodnom
primjeru može se primijetiti kako se naša slika serijala ponavlja uzduž i poprijeko. Sa ovim svojstvom
možemo odrediti ponavljanje slike i tako dobiti željeni efekt. Vrijednost _background-repeat-a su
sljedeće :
•
•
•
•
repeat-x : slika se ponavlja po x koodrinati ( s lijeva na desno )
repeat-y : slike se ponavlja po y koordinati (od gore prema dolje)
repeat : slika se ponavlja i po x i po y koordinati
no-repeat: slike se ne ponavlja
Ukoliko odredimo da se slika ne ponavlja, prikazati će se samo jednom i tako ćemo dobiti željeni
efekt na našoj stranici. Sljedeći primjer css-a za body će dati željeni efekt:
1
2
3
body {
background-image:url(../css/Untitled-1.jpg);
background-repeat:no-repeat;}
Uvod u CSS
24
Background-attachment
Sa sljedećim css svojstvom može se odrediti kako će se slika ponašati naspram korisnika stranice
odnosno da li će se pomicati skupa sa njegovim pomicanjem miša ili će stajati cijelo vrijeme na
istom mjestu. Vrijednosti koje možemo primijeniti :
• scroll : slika se miče skupa sa svim HTML elementima
• fixed : slika ostaje cijelo vrijeme na istom mjestu
Isprobajte i jednu i drugu vrijednost kako bi vidjeli efekte tih vrijednosti.
Background-position
Ovo svojstvo određuje poziciju slike u elementu. Uobičajeno je postavljeno gore lijevo, ali ovim
svojstvom mi možemo odrediti da slika bude postavljena u sredini HTML elementa ili negdje drugdje
ako tako hoćemo. Kako se koristi element body, ukoliko odredimo da je vrijednost center center ili
50% 50% slika će biti postavljena u sredini. Vrijednost ovog svojstva mogu se pisati u postotcima,
riječima, pikselima ili mjernim jedinicama kao što je cm. Pišu se uvijek dvije vrijednost jer jedna
označava X koordinatu, a druga Y koordinatu.
Background
Svojstvo bacground predstavlja sva ova svojstva zajedno na jednom mjesto tako da se svi ovi efekti
zajedno mogu dobiti pišući ih u jednom svojstvu _background. _Naravno kako ne bi došlo do
nekih pogrešaka postoji i redoslijed pisanja vrijednosti : [background-color] [background-image]
[background-repeat] [background-attachment] [background-position]
CSS Fontovi
Najvažniji dio web stranice je sadržaj, a sadržaj se sastoji od teksta. Kako bi tekst bio što ugodniji za
čitati koriste se razna css svojstva koja to omogućavaju. U ovome tutorijalu naučiti ćemo css svojstva
vezana uz font. Kao što smo prošli u prošlom tutorijalu css svojstva za pozadinu tako ćemo i u ovome
tutorijalu napraviti za font. Dakle, nekoliko css svojstava vezanih uz font su:
•
•
•
•
•
•
font-family
font-style
font-variant
font-weight
font-size
font
Uvod u CSS
25
Font Family
Css svojstvo font-family predstavlja listu fontova koji se koriste za prikaz teksta kao što je npr.
Arial ili Times New Roman. Lista fontova se gleda sa lijeve na desnu stranu, te ukoliko prvi s lijeve
nije dostupan korisniku naše web stranice, tekst će biti prikazan sa fontom koji je sljedeći po redu.
Postoje dvije kategorizacije fontova: naziv family-a ili opći family. Naziv family-a su npr. Arial ili
Times New Roman, gdje zapisujemo nazive font-a koji će se koristiti, dok je opći family npr. sans ili
sans-serif koji predstavlja skupinu font family-a kao što npr. Arial pripada sans-serifu, dok Times
New Roman i Georgia pripadaju sans-u. Razlikujemo ih po krajevima slova gdje Times New Roman
ima malo produžene/zakrivljene krajeve slova, a Arial nema. Deklaracija font-family-a:
1
2
3
h1 {font-family:Arial,Verdana,sans;}
h1 {font-family:Times New Roman, Georgia, sans-serif;}
U gornjim deklaracijama postavili smo kod prve da ćemo koristiti Arial, ukoliko korisnik nema Arial
instaliran na računalu, koristiti će se Verdana (Mac nema Arial), a ukoliko nema ni tog koristiti će
se raspoloživi sans font. Kod druge deklaracije naveli smo fontove koji spadaju u sans-serif family.
Font-style
Svojstvo font-style označuje način prikaza teksta, a to može biti normal, italic ili oblique.
1
h2 {font-style: italic;}
Font-variant
Font-variant predstavlja način prikaza veličine slova, a može biti normal ili small-caps. Vrijednost
small-caps prikazati će normalni tekst štampanim slovima u manjoj veličini umjesto da se prikazuje
kao običan tekst.
1
2
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Font-weight
Font-weight označuje debljinu slova koja se koristi. Uobičajene vrijednosti su normal i bold, iako u
današnje vrijeme vrijednost mogu uz spomenute ići i od 100-900 ( današnji font-family mogu imati
uz regular fontove i light ili bold,semibold fontove koji koriste upravo veličine između 100 i 900).
Uvod u CSS
1
26
h1 {font-weight: bold;}
Font-size
Svojstvo font-size predstavlja veličinu teksta, te se može pisati u vrijednosti px,em,pt,% te u zadnje
vrijeme pretraživači podržavaju i rem. Vrijednost em se računa relativno od elementa u kojem je
tekst kao npr.
1
2
3
4
5
6
7
8
9
<style>
.element1 {font-size:14px;}
.element1 h1 {font-size:2em; /* font-size:28px (2*14)}
</style>
<div class="element1">
<h1>Tekst</h1>
</div>
Rem je malo drugačiji od em-a jer se on računa relativno od body odnosno html elementa.
1
2
3
4
5
6
7
8
9
10
<style>
html {font-size:10px;}
.element1 {font-size:14px;}
.element1 h1 {font-size:2rem; /* font-size:20px (2*10)}
</style>
<div class="element1">
<h1>Tekst</h1>
</div>
Font
Svojstvo font jednako je kao i svojstvo background iz prošlog tutorijala te on sadrži sva font svojstva
na jednom mjestu.
1
2
3
h1 {
font: oblique bold 1em arial, sans-serif;
}
Uvod u CSS
27
CSS - Tekst i Poveznice
U ovome tutorijalu naučiti ćemo kako se upravlja tekstom i poveznicama odnosno koja css
svojstva možemo koristiti kako bi korisnicima naše web stranice sadržaj bio čitljiviji. Ovdje će biti
predstavljena css svojstva za tekst i pseudo klase za poveznice. CSS svojstva za tekst su sljedeća:
•
•
•
•
•
text-indent
text-align
text-decoration
letter-spacing
text-transform
Pseudo-klase za poveznice jesu sljedeće:
•
•
•
•
link
visited
hover
active
Text-indent
Text-indent predstavlja uvlačenje/izvlačenje teksta ovisno o vrijednost lijevo ili desno. Primjenom
text-indent-a možemo na svim odlomcima uvući prvu liniju teksta. To se može napraviti na sljedeći
način:
1
p {text-indent:25px;}
Ukoliko to primijenimo na našoj web stranici na kojoj imamo teksta unutar HTML elementa <p>
dobiti ćemo sljedeće:
1
2
3
4
Ovo je odlomak unutar HTML elementa <p>.
Prva linija odlomka je uvučena 25px jer smo tako odredili
putem css-a. To je super koristiti kod nekih bitnih
tekstova ili uvodnih odlomaka.
Uvod u CSS
28
Text-align
CSS svojstvo text-align koristi se za poravnanje teksta. Tekst je uobičajeno poravnan left iako su
vrijednosti ovog svojstva sljedeće:
•
•
•
•
left
right
center
justify
Poravnanje se odvija s obzirom na element u kojem se tekst nalazi.
Text-decoration
CSS svojstvo text-decoration služi za dodavanje različitih efekata na tekst. Vrijednost ovog svojstva
su sljedeće:
• underline
• line-throught
• overline
Ovo su sve efekti koji se mogu vidjeti i pišući tekst u MS Wordu, tako da ih nije potrebno objašnjavati
kako bi se shvatili.
1
p {text-decoration:overline;}
Letter-spacing
Letter-spacing koristi se za upravljanje razmaka između slova u tekstu. Vrijednosti se mogu pisati u
pikselima (px), em ili rem.
1
p {letter-spacing:2px;}
Css svojstvo text-transform služi za način prikaza teksta. Vrijednost su sljedeće:
• Capitalize - samo početna slova svake riječi su pisana velikim slovom
• uppercase - sva slova su velika, štampana
• lowercase - sva slova su mala
Svim CSS svojstvima može se dodati i vrijednost none ukoliko je potrebno na nekim dijelovima
to svojstvo maknuti.
Uvod u CSS
29
Pseudo-klase
Pseudo-klase predstavljaju različite uvjete ili događaje prilikom definiranja prikaza sadržaja. Najčešće ih se koristi kod poveznica i to kada se mišem prođe preko neke poveznice.
:link
Pseudo klasa Link koristi se za poveznice koje korisnik još nije posjetio odnosno nije kliknuo na njih.
1
2
3
a:link {
color: blue;
}
Svaka poveznica koja nije posjećena, prema gornjem primjeru imati će plavi tekst.
:visited
Ovo je suprotno od prethodnog te predstavlja poveznice koje je korisnik već posjetio.
1
2
3
a:visited {
color: black;
}
:active
Ova pseudo-klasa označava poveznicu koja je trenutno aktivna. Pod aktivnom poveznice smatra se
poveznica koja se trenutno klikće.
1
2
3
4
a:active {
background:red;
}
:hover
Pseudo-klasa :hover predstavlja događaj kada se mišem prođe preko poveznice. Najčešće se tu
mijenja svojstvo text-descorationi ili color.
Uvod u CSS
1
2
3
4
30
a:hover {
color:yellow;
}
CSS - Identifikacija i grupiranje elemenata
Identifikacija i grupiranje elemenata koristi se kako bi se preko CSS-a lakše prikazivalo pojedine
dijelove web stranice. U ovome tutorijalu proučiti ćemo kako na različite načine prikazivati neke
dijelove HTML elemenata i kako ih grupacijom odvojiti od ostalog sadržaja.
Identifikacija
Za identifikaciju elemanta koriste se dva HTML atributa, a to jesu id i class. Oba atributa mogu
se ciljano kontrolirati preko CSS-a, ali je bitno uočiti razliku između oba. Identifikator id koristi se
samo za pojedini HTML element na web stranici tj. ne smiju biti dva ili više HTML elemenata sa
istom vrijednosti id atributa.
Krivo
1
2
3
<h1 id="heading">Ovo je jedan Heading sa H1</h1>
<h2 id="heading">Ovo je još jedan Heading sa H2</h2>
<h1 id="heading">Evo opet jednog headinga H1</h1>
Točno
1
2
3
<h1 id="heading1">Ovo je jedan Heading sa H1</h1>
<h2 id="heading2">Ovo je još jedan Heading sa H2</h2>
<h1 id="heading3">Evo opet jednog headinga H1</h1>
Identifikator class, suprotno od id, može se koristiti na više HTML elemenata, kao npr.
1
2
3
<h1 class="heading">Ovo je jedan Heading sa H1</h1>
<h2 class="heading">Ovo je još jedan Heading sa H2</h2>
<h1 class="heading">Evo opet jednog headinga H1</h1>
Još jedna prednost kod korištenja identifikatora class je ta što ih se može više koristiti na jednom
elementu dok id dopušta samo jednu vrijednost
Uvod u CSS
1
2
3
31
<h1 class="heading color_red">Ovo je jedan Heading sa H1</h1>
<h2 class="heading border_bottom">Ovo je još jedan Heading sa H2</h2>
<h1 class="heading nova_klasa">Evo opet jednog headinga H1</h1>
Dobra praksa nalaže korištenje samo atributa class za CSS, dok se id koristi za javascript, jQuery i
sl.
Zašto, kad mi class i id isto daju?
Korištenje samo class atributa pojednostavljuje nam daljnju izradu naših web stranica. Ukoliko se
koriste i class i id, a pritom još i style u kojem možemo direktno upisati css pravila, dolazi do problema
poznatog kao specifičnost. Specifičnost kod CSS-a određuje što će pretraživač prikazati, a prikazuje
css pravila sa najvećom specifičnosti za određeni element. Prioriteti specifičnosti:
1. Atribut style
2. Atribut id
3. Atribut class
To znači ukoliko bi koristili za jedan element i id i class i style dobili bi sljedeće:
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.heading {
font-size:12px;
color:red;
}
#heading {
color:blue:
font-size:15px;
}
</style>
<h1 class="heading" id="heading" style="font-size:20px">Ovo je jedan Heading sa \
H1</h1>
Iz gornjeg primjera možemo vidjeti da je sa klasom heading dano da element ima veličinu fonta
od 12px i crvenu boju teksta. Ali pridodajući mu atribut id, dali smo nova pravila u kojima smo
definirali da će element imati plavu boju teksta i veličinu fonta od 15px. A zatim se sa atributom style
definirala veličina fonta od 20px. Sada će naš h1 element imati veličinu fonta od 20px i plavu boju
teksta. Naša klasa .heading ovdje ne vrijedi ništa niti mijenja išta, dok id #heading daje samo plavu
boju tekstu. Ukoliko zamislimo sada daljnje dorađivanje naše web stranice sa različitim atributima
style i id, izgled će biti teško mijenjati jer nećemo znati što sve treba promijeniti da bi dobili željeni
efekt zbog specifičnosti. Ukoliko bi koristili samo atribut class, mogli bi promijeniti i veličinu fonta
i boju teksta na jednom mjestu i time dobili željeni izgled.
Uvod u CSS
32
Grupiranje elemenata
Grupiranje elemenata se koristi kako bi dio sadržaja naše web stranice mogli prikazati na različitoj
poziciji ili drugačije boje i sl. Grupiranje se izvodi na sljedeći način:
1
2
3
4
5
6
7
8
<div class="prva_grupa">
<h1>Ovo je naslov prve grupe</h1>
<p> Evo i mali tekst prve grupe</p>
</div>
<div class="druga_grupa">
<h1>Ovo je naslov druge grupe</h1>
<p> Pa evo nam i teksta druge grupe</p>
</div>
Sada kad smo grupirali naše elemente, možemo ih lako odvojiti CSS-om:
1
2
3
4
.prva_grupa {background-color:blue;}
.druga_grupa {background-color:red;}
.prva_grupa h1 {font-size:15px;}
.druga_grupa h1 {color:white;}
Ovim CSS pravilima odredili smo da će nam prva grupa imati plavu, a druga grupa crvenu pozadinu,
te smo odredili i različita CSS svojstva za HTML elemente h1 u jednoj i drugoj grupi. Time sam vam
pokazao kako možete lako upravljati izgledom pojedinih HTML elemenata grupiranjem različitih
elemenata u jedan.
CSS - Box model
Box model je model koji “obavija” svaki HTML element. Sastoji se od samog sadržaja, paddinga,border-a i margin-a. U ovome tutorijalu kratko ćemo proći box model kako bi mogli bolje
razumijeti margine i paddinge.
33
Uvod u CSS
Box Model
Box Model
Iz slike se mogu vidjeti gdje se nalaze pojedini, već spomenuti, elementi box modela. U sredini se
vidi veličina sadržaja u omjeru širina x visina. Dakle, uz sve već nabrojane elemente postoje još dva
elementa box modela,a to su širina i visina. Dodavajući vrijednosti raznim dijelovima box modela,
mijenjamo mu izgled, tako da ukoliko smo dodali ovome HTML elementu pozadinu, povećavajući
paddinge, izdužujemo sam HTML element i tako se i pozadina prikazuje duž cijelog elementa.
Dodajući bordere na HTML element vidjet ćemo uz tu pozadinu i krajeve različitih boja i veličina (
to ovisi o nama ). Ukoliko uz sve to dodajemo margine primijetit ćemo kako će se naš HTML element
pomicati s obzirom na susjedne elemente.
Padding
Padding može biti namješten na četiri strane:
•
•
•
•
padding-top
padding-bottom
padding-left
padding-right
Sva ova svojstva su sama po sebi jasna (gore,dolje,lijevo,desno). To sve možemo napisati u jednom
CSS svojstvu pod nazivom padding. Njegove vrijednost jesu gore,desno,dolje,lijevo (u smjeru
kazaljke na satu) pa bi tako:
1
padding: 20px 10px 5px 2px;
značilo da dodajemo padding-top:20px,padding-right:10px;padding-bottom:5px i padding-left:2px.
Povećavajući padding na lijevo i desno, povećavamo tako i cjelokupnu širinu našeg HTML elementa,
a tako i povećavajući gore i dolje, povećavamo visinu našeg HTML elementa.
Uvod u CSS
34
Margin
Margine možemo namještavati jednako kao i paddinge:
•
•
•
•
•
margin-top
margin-bottom
margin-left
margin-right
margin
gdje margin označava vrijednosti svih smjerova margina u jednome kao i kod padding-a. Kod
paddinga i margina možemo namještati i kraće dva smjera (po X i Y koordinati) odjednom odnosno
namještati u jednoj vrijednost gore i dolje, a u drugoj vrijednost lijevo i desno pa tako je i ovo sljedeće
napisano:
1
2
3
margin: 20px 10px;
/** margin-top:20px, margin-bottom:20px;
margin-left:10px; margin-right:10px;**/
Jednako kao i za margine, namješta se i za paddinge.
Border
Border označava rub box modela koji se sastoji od debljine ruba, tipa ruba i boje ruba. Debljina
ruba određuje se najčešće putem piksela.
Tipovi ruba:
35
Uvod u CSS
Tipovi bordera
Boje ruba određuju se kao i sve ostale boje u CSS-u.
1
2
3
4
5
p {
border-width: thick;
border-style: dotted;
border-color: gold;
}
Moguće je jednako tako i određivati pojedine strane bordera :
1
2
3
4
5
6
p {
border-top-width: 20px;
border-top-style: dotted;
border-top-color: blue;
}
Kao i većina CSS svojstva i border se može pisati kao jedno CSS svojstvo :
1
border: 1px solid #fff
Ove vrijednosti bordera označavaju debljinu bordera od 1px, tip solid, a boja bordera je bijela.
36
Uvod u CSS
CSS - Floats
CSS svojstvo float koristi se kako bi se HTML elementi poravnali uz neki drugi HTML element.
U ovome tutorijalu će se kratko prikazati svojstvo float i kako djeluje na druge HTML elemente.
Ukoliko imamo nekakav element i pozicioniramo ga sa float:left, taj element će se poravnatu ulijevo,
dok će ostali sadržaj na stranici ispuniti prazninu nastalu tim elementom i “obavijati” se oko tog
floatanog elementa.
Floatana slika
U gornjem primjeru možemo vidjeti kako se slika “floata” na lijevo te kako se ostali sadržaj “obavija”
oko slike. Ovaj primjer dobiven je sljedećim kodom:
1
2
3
4
5
6
7
8
9
10
11
<div class="slika">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
.slika {
float:left;
width: 100px;
}
Moguće vrijednosti svojstva float jesu:
• left
• right
• none
Uvod u CSS
37
Svojstvo clear
Svojstvo clear služi kako bi se nekom elementu ili elementima maknulo relativno pozicioniranje
na “floatani” element. Time bi novi HTML element došao u novi red, ispod floatanih elemenata.
Moguće vrijednosti jesu:
•
•
•
•
left
right
both
none
Najčešće se koristi vrijednost both. Tako da u gornjem primjeru koristimo na HTML elementu p
svojstvo clear:both, cijeli tekst osim naslova prešao bi u novi red, ispod slike. To se koristi kada ne
želimo da neki sadržaj u nastavku web stranice bude pod utjecajem “float-a” nekog HTML elementa.
CSS - Pozicioniranje i z-index
Sa pozicioniranjem preko CSS-a moguće je bilo koji sadržaj dovesti na točno određeno mjesto koje
hoćemo kako bi pravili precizne izglede naše web stranice. U ovome tutorijalu proći ćemo načine
pozicioniranja preko css svojstva position. Ako gledamo na naš pretraživač kao element na kojeg se
relativno pozicioraju ostali elementi, njegov gornji lijevi kut imati će vrijednost 0px 0px tj. top: 0px,
left: 0px. Ukoliko sada želimo nekakav naslov dodati točno 30px od vrha i 100px sa lijeva dodajemo
za takav naslov sljedeći css:
1
2
3
4
5
6
7
8
9
<style>
h1 {
position:absolute;
top:30px;
left:100px;
}
</style>
<h1>Ovo je moj naslov</h1>
CSS svojstvo position može imati sljedeće vrijednosti:
•
•
•
•
absolute
relative
static
fixed
Sa vrijednosti absolute pozicioniramo element relativno na element koji je pozicioniran relative te
sadrži taj element u sebi kao npr:
Uvod u CSS
1
2
3
4
5
38
<div class="relativno">
<h1>OVo je sada novi naslov koji je
apsolutno pozicioniran s obzirom na gornji element</h1>
</div>
Ukoliko želimo da je sada naš naslov unutar HTML elementa h1 pozicioniran tek na desnom kraju
HTML elementa div.relativno koristimo sljedeći kod:
1
2
3
4
5
6
7
8
9
.relativno {
width:200px;
height:20px;
position:relative;
background:red;}
.relativno h1 {
position:aboslute;
right:0;}
Isprobajte ovaj dio CSS-a kako bi vidjeli što će se dogoditi. Uz position:absolute mogu se dodatno
koristiti sljedeća svojstva:
•
•
•
•
top
bottom
left
right
Pozicioniranje sa vrijednosti static, ne gleda niti jedan element koji je relativno pozicioniran nego
se pojavljuje po redoslijedu prikaza HTML elemenata, dok se pozicioniranje fixed odnosni direktno
na pretraživač, a ne kao u slučaju pozicioniranja absolute koji se odnosi na prethodno pozicionirani
elementa sa vrijednosti relative.
Z-index
Z-index se koristi kod prikazivanja različitih elemenata koji zauzimaju isti prostor na web stranici.
To se često postiže kod elemenata koji su pozicionirani relativno ili apsolutno. Uvijek se prikazuje
HTML element sa većim z-indeksom.
39
Uvod u CSS
Z-Index
Prema gornjoj slici možemo primijetiti kako je slika AS sa z-index-om od 5 ispred svih ostalih slika.
Ovakav prikaz je napravljen kako bi se vidio utjecaj z-index-a na različito pozicionirane elemente.
Ukoliko bi svih 5 karata bilo pozicionirano na točno istom mjestu, vidio bi se samo AS kao karta dok
bi sve druge karte bile iza te karte.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#deset {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#decko {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#dama {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#kralj {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
Uvod u CSS
27
28
29
30
31
32
33
34
40
}
#as {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Kod je isto preuzet sa html.net kako ne bi stvarali neke nove primjere pri ovome tutorijalu jer je ovo
dosta dobro iskorišten primjer z-index-a te je lako shvatljiv svakome.
Moja prva web stranica
U ovome serijalu napraviti ćemo prvu pretvorbu dizajna iz formata PSD u HTML/CSS.
Uvod u Psd2Html
Psd2Html predstavlja proces pretvorbe dizajna iz PSD formata u HTML format. Prilikom tog procesa
koristi se i CSS. U ovome serijalu napraviti ćemo “Moju prvu web stranicu” čiji PSD možete skinuti
na ovome link-u⁵. Tokom ovog serijala proći ćemo rezanje dizajna i pripremanje dijelova dizajna
koji su nam potrebni pri izradi HTML verzije.
Moja prva web stranica
⁵https://www.dropbox.com/s/31yn7kx27ubypv4/MojaPrvaWebStranica.psd
42
Moja prva web stranica
Dizajn napravljen iz gornje slike biti će izrezran, isjeckan i kako god još hoćete to nazvati i pretvoren
u pravu web stranicu, Vašu prvu web stranicu. Koristiti će se razna CSS svojstva i HTML elementi
te malo jQuery-a tj. javascripte kako bi izradili i slider na kojem će se vrtiti slike projekata. Prilikom
izrade ove web stranice koristiti će se alati Brackets ili Sublime Text 2/3, ovisno o mjestu gdje se
nalazim prilikom pisanja tutorijala ovog serijala.
Rezanje dizajna
Svaki dizajn koji sadrži neke elemente kao što su slike, ikone i sl. režu se iz dizajna kako bi ih mogli
koristiti u izradi naše web stranice. U današnje vrijeme razne ikone se koriste i kao fontovi ali mi
nećemo to koristiti u ovome serijalu već ćemo na jednostavniji način prikazati vam kako se može
jednostavno izraditi web stranica iz nekog dizajna. Otvorite si nekakav direktorij (folder) i nazovite
ga kako god vi hoćete. Ja sam svoj nazvao Moja prva web stranica. Unutar tog foldera napravite još
tri koje ćete nazvati images,css i js. Folder images ćemo danas koristiti i u njega ćemo spremati sve
slike koje ćemo izrezati. Ostali folderi koristiti će nam za CSS i Javascript.
Alat za rezanje
Otvorite naš PSD koji možete skinuti na ovome linku⁶. Alat koji ćemo koristiti za rezanje je običan
Marquee Tool.
alat
Pripremanje za rezanje
Prije rezanja moramo pripremiti naš dokument tako da su nam vidljivi samo elementi koje hoćemo
rezati dok ostale činimo nevidljivima kako ih ne bi dohvatili prilikom rezanja. To činimo tako da
⁶https://www.dropbox.com/s/31yn7kx27ubypv4/MojaPrvaWebStranica.psd
43
Moja prva web stranica
ikonu oka pored svakog layera kliknemo kako je više ne bi bilo, tada to označava da se layer više ne
vidi u dokumentu.
visibility
To ćemo učinti za sve elemente koji nam nisu potrebno kao što je pozadina, tekst, pozadina search-a
i sl. Nakon što sve to sakrite ili ako niste sigurni što sve treba sakriti pogledajte sljedeću sliku:
44
Moja prva web stranica
nakonVisibility
Nakon što smo sve sakrili što nam nije potrebno, otvoriti ćemo novi layer. Prvo se pozicioniramo
na najgornji layer kako bi se novi layer stvorio iznad svih, a zatim ili poklikamo na izborniku Layer
> New > Layer … i kliknemo OK ili pritisnemo Shift+Ctrl+N (Win) / Shift+Command+N (Mac) i
kliknemo OK ili odaberemo sljedeću funkciju prema slici:
45
Moja prva web stranica
pozicioniranjeNewLayer
Nakon što smo stvorili novi layer trebali bi imati ovu sliku:
46
Moja prva web stranica
NewLayer
Time smo dobili prazni layer na kojemu možemo dalje raditi što god hoćemo. Za potrebe ovog
tutorijala, nama treba kompletna slika naših elemenata na jednom layeru iz kojeg ćemo rezati naše
elemente tj. rezati ćemo dijelove slike. Kako smo sada pozicionirani na našem novom layeru potrebno
je stvoriti tu sliku koja sadrži sve naše elemente. To se čini tako da odemo na izbornik Image > Apply
Image… i samo kliknemo OK.
47
Moja prva web stranica
applyImage
Nakon što smo to napravili trebali bi dobiti sljedeće:
nakonImageApply
Možemo primijetiti da sada Layer 2 (naš novi layer) nije više prazan već sada ima nešto na sebi. To
je sada slika svih naših elemenata na jednom mjestu te sada možemo krenuti sa rezanjem elemenata
koji su sada dio jedne slike.
48
Moja prva web stranica
Rezanje
Prvi dio koji ćemo rezati je logo. Odaberemo naš alat za rezanje (Maquee Tool - CTRL/Command
+ M) i krenemo sa rezanjem. Kliknemo na jedno mjesto u našem dokumentu, držimo lijevu tipku
miša i povlačimo tako da se unutar granica alata nalazi naš logo. Evo kako sam ja to napravio:
rezanjeLogo
Nakon što smo označili dio koji želimo rezati pustimo lijevu tipku miša. Sada samo treba to
kopirati jednostavnom naredbom CTRL+C/Command+C. Nakon što smo kopirali otvoriti ćemo novi
Dokument (FIle) u koji ćemo to i kopirati. Otvaranjem novog dokumenta, dimenzije kopiranog bi
trebale biti unesene kao dimenzije dokumenta. Dobra strana ovog načina je što će se kopirati samo
dio koji je vidljiv iako smo mi odabrali puno veću širinu od logo-a, pixeli koji nisu vidljivi se ne
kopiraju. Dakle, u izborniku odaberemo File > New… ili CRTL/Command + N te odaberemo OK.
newNakonCopy
Sada u tom novom dokumentu zalijepimo naš kopirani element (CTRL/Command + P). Time se
49
Moja prva web stranica
stvorio novi layer koji sadrži naš logo. Layer “Background” koji se stvori pri svakom otvaranju
novog dokumenta dovoljno je samo učiniti nevidljivim. To radimo zato da prilikom spremanja slike
nemamo nikakvu pozadinu na slici.
rezanjeLogoaVisibility
Sada, dok još imamo otvoreni novi dokument sa našim logo-om, odemo na izbornik File > Save for
Web.. . Kako bi sliku spremili bez pozadine, potrebno ju je spremiti kao GIF ili PNG, mi ćemo spremiti
u PNG formatu kako bi bila bolje kvalitete, dok se GIF koristi kod jednostavnijih slika koje imaju
jednu/dvije boje. U gornjem desnom izborniku umjesto JPEG odaberemo PNG-24 i kliknemo Save.
Sada je potrebno odabrati destinaciju za našu sliku, a to će biti u folderu images koji smo prethodno
napravili te je spremimo pod nazivom logo. To bi trebalo ovako izgledati:
images
Sada isti postupak koristimo kod svakog elementa. Postupci su sljedeći:
1. Odabrati element sa Marquee Alatom
50
Moja prva web stranica
2.
3.
4.
5.
6.
Kopirati
Otvoriti novi dokument
Zalijepiti kopirani element
Sakriti pozadinu u novom dokumentu
Spremiti za Web (Save as Web..) - ukoliko nema pozadine spremiti kao PNG, ako ima pozadinu
spremiti kao JPEG
7. Nazvati element i spremiti u folder images
Sljedeće slike pokazati će neka rezanja i krajnji rezultat u folderu images.
socialRezanje
label
51
Moja prva web stranica
rezanjeEmail
sliderIkona
Folder nakon što su svi izrezani i pospremljeni bi trebao izgledati ovako:
52
Moja prva web stranica
izrezaneSlike
PSD2HTML - Početna struktura
U prošlom tutorijalu pokazao sam vam kako rezati dizajn i pripremiti sve potrebne ikone. U ovome
tutorijalu upoznati ćemo se sa početnom strukturom web stranice i google fontovima.
Početna struktura
Ukoliko ste slijedili prošli tutorijal imate sve potrebne foldere za našu web stranicu. Sada moramo
napraviti novu datoteku index.html pa otvorite svoj alat za izradu web stranica/projekata i otvorite
novu datoteku te je spremite pod nazivom index.html u folder naše prve web stranice.
Struktura projekta
Zatim otvorite 2 datoteke te jednu nazovite style.css i spremite je u folder css, a za drugu datoteku
učinite sljedeće:
1. Posjetite http://www.cssreset.com/⁷
⁷http://www.cssreset.com/
53
Moja prva web stranica
2.
3.
4.
5.
Odaberite “Get the code” kod Normalize.css 1.0
Kliknite na Minified
CTRL/Command + P u novo otvorenu datoteku
Spremite datoteku u folder css pod nazivom reset.css
css
HTML struktura
Sljedeći dio koda predstavit će našu početnu HTML strukturu koju će sadržati index.html. Nemojte
se preplašiti odmah, ispod cijelog koda sve će biti objašnjeno. Poželjno je da sve unosite sami, ne
copy/paste.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<head>
<title>Moja prva web stranica - Lako tuts</title>
<meta charset="utf-8"></meta>
<link type="text/css" rel="stylesheet" href="css/style.css" >
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,
600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Header -->
<header>
<div>
<div>
<img src="images/logo.png" width="138" height="152" alt="Lako Tuts Logo" />
<h1>Lako Tuts</h1>
<img src="images/label.png" width="173" height="102" alt="Lako Tuts Slogan\
" />
Moja prva web stranica
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
54
</div>
<div>
<ul>
<li><a href="#" title="LakoTuts Facebook">Facebook</a></li>
<li><a href="#" title="LakoTuts Twitter">Twitter</a></li>
</ul>
<form action="" method="post">
<input type="text" placeholder="Pretraži" />
<input type="submit">
</form>
</div>
</div>
</header>
<!-- Header END -->
<!-- Sadržaj -->
<section>
<div>
<br/>
</div>
</section>
<!-- Sadržaj END -->
<!-- Footer -->
<footer>
<div>
<br/>
</div>
</footer>
<!-- Footer END-->
</body>
</html>
Objašnjenja:
Head
• < meta charset=”utf-8”></ meta> - Preko ovog charset-a pretraživač može prikazivati slova sa
različitim simbolima kao što je č,š i sl.
• < link type=”text/css” rel=”stylesheet” href=”css/style.css” > - Pozivamo našu CSS datoteku
preko koje ćemo određivati izgled naše web stranice
• < link href=’http://fonts.googleapis.com/css….. - Pozivamo font family sa google-a, u sljedećem
poglavlju bit će objašnjen postupak dobivanja tog css linka
Moja prva web stranica
55
Body
Unutar HTML elementa body unosimo cijeli sadržaj koji se prikazuje na web stranici. HTML
elementom header, koji je HTML5 element, označujemo zaglavlje web stranice. Unutar tog elementa
unosimo sav sadržaj koji će biti predstavljen kao zaglavlje naše web stranice, a to su logo,naslov
web-a, tražilica, social linkovi.
Zatim HTML element div.container označuje jedan element koji objedinjuje cijeli sadržaj i preko
njega ćemo centrirati taj sadržaj tj. postaviti ćemo ga u sredinu web preglednika. Unutar njega
imamo 2 HTML elementa left i right koji označuju lijevi i desni dio header-a, u lijevi dio ide logo i
naslov web-a, dok u desni dio spada tražilica i social linkovi. To smo napravili kako bi lakše upravljali
položajem tih sadržaja. U lijevom sadržaju, unutar HTML elementa div.left zatim smo dodali logo
u obliku HTML elementa img čiji atribut src pokazuje našu izrezanu sliku logo-a. Naslov weba stavljen je pod heading element h1, te “tablica” Može Svatko je isto tako stavljena pod HTML
element img. Svaki img element ima definirane atribute alt,width,height i class.
U desnom sadržaju unijeli smo zatim, unutar div.right, social linkove i tražilicu. Social linkove stavili
smo u element liste ul čiji itemi (eng. list item) li sadrže poveznice na social stranice. Tražilicu
smo stavili pod HTML element form sa 2 elementa input gdje jedan označuje unos sadržaja koji
pretražujemo a drugi gumb čijim klikom pretražujemo. Atribut forme action označuje stranicu na
koju idemo pretraživati, ukoliko nije unesena gleda se stranica na kojoj se forma nalazi, atribut
method označuje metodu kojom se pravi HTTP zahtjev te to mogu biti “POST” ili “GET”. HTML
elementi section,main i footer označuju glavni sadržaj web-a i footer web-a gdje prema ovom dizajnu
ide samo informacije za copyright.
Ta dva dijela nećemo proći u sljedećem tutorijalu već u narednim tutorijalima koji dolaze, pa za
početak dana je samo struktura sa headerom. Može se primijetiti da svaki od tih HTML elemenata
imaju isto div.container koji centriraju sam sadržaj. Ukoliko ste kopirali cijeli html ili unijeli sami
trebali bi dobiti sljedeće:
56
Moja prva web stranica
Početna struktura bez CSS
U dizajnu koristio se font ‘Open Sans’ i to više verzija : semi bold, light i light italic. Google fontovi
se pretražuju na http://www.google.com/fonts⁸. Sa iste stranicu se mogu preuzeti fontovi ili dobiti
podaci kako koristiti fontove na našoj web stranici. Kada ste došli na tu stranici, u tražilicu upišite
Open Sans. Prvi po redu je font koji mi koristimo.
⁸http://www.google.com/fonts
57
Moja prva web stranica
Google Font
Sada uz prvi font uz desni kraj postoji par opcija koja se mogu odabrati za pojedini font.
Font Opcije
Nama je potreban Quick Use, to je opcija u sredini između tri sivih opcija. Kada kliknemo na to, doći
ćemo na stranicu za odabir raznih opcija za taj font. Prvo što nam se nudi je odabir svih font-style-a.
Nama su potrebni samo Light, Light Italic i Semi-Bold.
58
Moja prva web stranica
Font Styles
59
Moja prva web stranica
Sljedeće što nam je za odabrati je opcije za karaktere fonta odnosno za slova. Kako mi koristimo i
posebne znakove odnosno č,š,ć i sl. moramo uzeti proširenu verziju fontu, a to je uz Latin i Latin
Extended.
Extended Font
Nakon toga nude nam se različite opcije odabira za prikaz font-a na našoj web stranici. Mi u ovom
slučaju koristimo prvu opciju.
Font css
PSD2HTML - Header
U prošlom tutorijalu upoznali smo se sa strukturom i google fontovima. U ovome tutorijalu napraviti
ćemo header naše web stranice putem html-a i css-a.
60
Moja prva web stranica
header
Header
Sljedeći dio koda predstavlja strukturu header-a. Cjelovitu početnu strukturu možete vidjeti u
PSD2HTML - Početna struktura⁹ ili u istoimenom poglavlju u knjizi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
<!-- Header -->
<header>
<div class="container">
<div class="left">
<img src="images/logo.png" width="138" height="152" class="logo"
alt="Lako Tuts Logo" />
<h1 class="headline">Lako Tuts</h1>
<img src="images/label.png" width="173" class="label" height="102"
alt="Lako Tuts Slogan" />
</div>
<div class="right">
<ul class="social">
<li class="prvi"><a href="#" title="LakoTuts Facebook" class="facebook">
Facebook</a></li>
<li><a href="#" title="LakoTuts Twitter" class="twitter">
Twitter</a></li>
</ul>
<form action="" class="search" method="post">
<input type="text" placeholder="Pretraži" class="input" />
<input type="submit" class="submit">
</form>
</div>
</div>
⁹http://www.lakotuts.com/psd2html-pocetna-struktura/
Moja prva web stranica
26
27
61
</header>
<!-- Header END -->
CSS
Kada smo dodali Open Sans u naš projekt možemo početi raditi na našem CSS-u i izgledu sadržaja.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*********
Lako Tuts CSS
***********/
@import url('reset.css');
/* LAYOUT s*/
html {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height:100%;
}
body{
background:#30394f;
min-height: 100%;
margin:0;
line-height: 1.4;
}
.main, footer {background:#ede8df;}
.main {min-height: 400px;}
Na HTML element html dodali smo font-family kako bi se na svim ostalim elementima, ukoliko
nemaju definiran font-family, primijenio ovaj font-family. Tako ne moramo za svaki poseban
element nanovo definirati font-family. Dodano je i svojstvo height:100% kako bi se zauzela visina
cijelog pretraživača. Na HTML elementu _body _dodana je pozadina tamno plave boje koja je i
namještena dizajnom.
Namješten je i min-height kako bi sigurno body zauzeo visinu cijelog pretraživača, a ako ima i
više sadržaja onda se visina tog elementa još nadopunjuje. Postavljena je margin:0 zbog reset.css
koji je nadodao body-u margine sa strane. Time smo namjestili da body zauzima i potpunu širinu
pretraživača. Line-height je namješten na 1.4 što znači da ukoliko je font-size:16, line-height će biti
cca 22px. Inače se uzima line-height između 1.4 i 1.6 za najbolju čitljivost. Zatim smo definirali i
sadržaj koji nećemo dalje raditi u ovome tutorijalu.
Elementima .main i footer dodali smo pozadinu kao što je i po dizajnu, te smo .main elementu dodali
i neku minimalnu visinu kako bi mogli vidjeti kako će to izgledati. Ako pomnije pogledate footer,
koji ima istu pozadinu kao i .main, nije na dnu pretraživača već dolazi odmah iza main-a.
Moja prva web stranica
62
Postavimo footer na dno pretraživača.
Kako bi postavili footer na dno, moramo imati neki relativni element na koji bi se footer odnosio.
U ovome slučaju, to je body. Ako njega definiramo kao relativni element, tada footer možemo
apsolutno namjestiti s obzirom na body. Sada u body dodajemo position:relative, a za footer
napišemo sljedeće:
1
2
3
4
5
footer {
width:100%;
position: absolute;
bottom:0;
}
Time smo rekli footeru da uvijek bude na dnu, s obzirom na body. I kako preko position:absolute,
footer gubi cijelu širinu, dodali smo definiciju širine koja zauzima cijelu širinu pretraživača.
Centriranje
Sada kada smo definirali generalni layout header, main i footer, trebamo centrirati sadržaj. Dodajmo
sljedeći dio u CSS.
1
2
3
4
.container {
width:960px;
margin:0 auto;
}
Osvježite pretraživač (F5 - refresh, reload) i pogledajte promjenu. Iako sadržaj ne izgleda centrirano,
njegov block u kojem se sadrži je centriran. Ono što smo sada učinili je da smo elementu .container
definirali širinu od 960px i postavili ga u sredinu pretraživača.
63
Moja prva web stranica
container
Left i Right
Ok, sada smo centrirali sadržaj. Nakon toga potrebno je razmijestiti elemente pa sada dolaze na red
klase .left i .right koje smo uveli u header.
1
2
3
4
5
6
7
8
9
10
11
/* HEADER */
header .container > .left {
width:595px;
float:left;
}
header .container > .right {
width:365px;
float:left;
}
Sljedeća deklaracija header .container > .right /.left predstavlja:
• gledaj .left ili .right koji je baš nivo ispod container tj. nalazi se točno unutar .container ( ne
unutar div.element koji je unutar .container)
• gledaj .container koji se nalazi negdje unutar header elementa.
64
Moja prva web stranica
To znači da ukoliko imamo
1
2
3
4
5
6
7
<header>
<div class="container">
<div class="element">
<div class="left"></div>
</div>
</div>
</header>
Ovdje će element .left poprimiti svojstva jer još je jedan nivo ispod container tj. nije direktno ispod
containera. Gornjim CSS definicijama odredili smo širinu elemenata i dodali im svojstvo float:left
tako da se pripijaju jedan uz drugog slijeva. Kako su zbog float, pozicionirali se ulijevo, cijeli sadržaj
sada se “obavija” oko tih elemenata pa smo dobili sljedeći izgled:
floatano
Tu možemo vidjeti kako su se .main i footer “obavili” oko header sadržaja jer je cijeli sadržaj
pozicioniran sa “floatom”. To znači da moramo nakon header brisati floatove. To ćemo učiniti na
sljedeći način:
Moja prva web stranica
1
2
3
4
5
65
.container::after {
content: '';
display:block;
clear:both;
}
Time smo rekli pretraživaču da kod svakog elementa sa klasom container očisti floatove i time se
prebacuje sadržaj u “novi red”. Što se tu zapravo događa je da se preko pseudo-klase ::after, elementu
.container kaže da nakon njega dolazi jedan block sa praznim sadržajem koji čisti floatove. Time se
ne zauzima mjesto na web stranici i očistimo utjecaj floatova na sljedeći sadržaj.
Logo
Prema dizajnu možemo vidjeti da se logo pozicionira ulijevo od teksta.
1
2
3
4
5
6
7
8
.logo {
float:left;
margin-left:24px;
margin-right:24px;
margin-top:60px;
margin-bottom:-10px;
display:block;
}
Sljedećim CSS-om pozicionirali smo logo ulijevo od teksta te ga pomakli od sadržaja preko margina.
Dodali smo mu i display:block iz razloga što je img po defaultu inline element. Kako bi floatovi i
margine mogli utjecati na logo, morali smo ga deklarirati kao block element.
Naslov weba
Sljedeći korak je pozicionirati naslov weba i promijeniti mu izgled.
1
2
3
4
5
6
7
.headline {
color:#6aceeb;
text-transform: uppercase;
margin-top:120px;
font-weight: 600;
font-size:48px;
margin-bottom:0;}
Gornja CSS svojstva mijenjaju boju teksta i postavljaju sva slova u štampana slova. Zatim ga pomiču
prema dolje za 120px (margin-top) što je duplo više od logo-a kako bi došao na otprilike sredinu slike
našeg logoa. Kako ne bi pomicao sadržaj ispod njega, odredili smo margin-bottom na nulu jer zbog
66
Moja prva web stranica
reset.css je element h1 dobio određeni margin-bottom. Font-weight je postavljen na 600 kako bi
odgovarao semi-bold stilu od fonta. Sada bi to trebalo ovako izgledati:
csslogoH1
Prema dizajnu ovaj naš label “Može Svatko” se sakrije iza glavnog sadržaja. Kako bi to bilo
moguće moramo upotrijebiti z-index te pozicioniranje. Kako je label unutar .left klase, moramo
ga pozicionirati apsolutno s obzirom na .left. Klasa .left nam dobija position:relative.
1
2
3
4
5
header .container > .left {
width:595px;
float:left;
position: relative;
}
A label nam dobiva sljedeće:
Moja prva web stranica
1
2
3
4
5
6
7
8
67
img.label {
clear:both;
bottom: -55px;
left: 350px;
position: absolute;
z-index: -1;
}
Time se gubi njegov utjecaj na raspored sadržaja, a preko z-index koji je -1, prikazuje se iza glavnog
sadržaja jer sam sadržaj po defaultu ima z-index:0. Sa deklaracijama left i bottom pomaknuli smo ga
350px od lijeve strane klase .left i 55px ispod klase .left (To se sve događa, kao što možete primijetiti,
s obzirom na klasu .left). Probajte maknuti od .left svojstvo position pa pogledajte što ćete onda
dobiti.
Pozicionirajmo search i social linkove
Sljedeći korak je srediti desni dio header. Prvo što je potrebno je pozicioniranje samih linkova i
search forme.
1
2
3
4
5
6
7
8
9
10
11
ul.social {
margin-top:60px;
float:right;
}
.search {
clear:both;
float: right;
display:block;
}
Listu linkova pomičemo za 60px prema dolje kao i logo. Time su linkovi u razini sa logo-om.
Pozicionirali smo ih skroz desno, a zatim sa .search očistili njihov daljnji utjecaj sa floatom. Zatim
smo i search-u dali float:right kako bi ga skroz desno pozicionirali.
68
Moja prva web stranica
desniDio
Uredimo Social Linkove!
Sada kada smo pozicionirali naše elemente vrijeme je da ih i uredimo. Prvo ćemo urediti social
linkove.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.social li {
display:block;
width:28px;
float:left;
}
.social .prvi {
margin-right:40px;
}
.social a {
color:#fff;
text-decoration: none;
text-indent: -9999px;
display:block;
width:28px;
height:28px;
}
.social a.facebook {
69
Moja prva web stranica
18
19
20
21
22
background:url('../images/facebook.png') left center no-repeat;
}
.social a.twitter {
background:url('../images/twitter.png') left center no-repeat;
}
Na početku definiramo izgled list elemenata tako da ih postavljamo kao block elemente, floatamo
ih ulijevo tako da budu jedni na drugima slijeva i definiramo širinu svakog elementa koja je 28px a
to je određeno našim sličicama od facebooka i twittera. .social .prvi označuje prvog elementa u listi
jer smo na prvi element postavili tu klasu kako bi drugi element odmaknuli od njega za 40px kao
što je i u dizajnu. .social a označuje sve linkove u listi.
Postavljamo im boju te ih definiramo kao block element kako bi mogli definirati njegovu visinu i
širinu. Ono što je ovdje bitno je text-indent, kojeg smo postavili na -99999px kako bi ga maknuli i
kako bi ostala samo slika koju ćemo postaviti. .social a.facebook/twitter postavljaju sliku za svaki
link. Postavljamo sliku kao background image koji se ne ponavlja te se centrira po Y koordinati (gore
i dolje).
socailLinks
Lijepi search
Preostao nam je još doraditi izgled search-a. Treba nadopuniti našu klasu .search sljedećim:
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
11
12
13
70
.search {
clear:both;
float: right;
display:block;
width:263px;
height:35px;
background-color:#ede8df;
border:1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Dodana mu je širina i visina, boja te rubovi. Sa zadnjim svojstvima definirali smo i zaobljenje ruba, a
prefiski -moz i -webkit označuju pretraživače firefox i safari/chrome. To su dodatne specifikacije koje
se dodaju iz sigurnosti iako za neka svojstva danas to više nije ni potrebno, ukoliko gledamo stranicu
sa najnovijim verzijama pretraživača. Ali ovo omogućuje i zaobljenje na starijim pretraživačima u
čije vrijeme još border-radius nije bio priznat od w3c. Sada smo definirali samo izgled forme ali ne
i dva unutarnja elementa.
1
2
3
4
5
6
7
8
9
10
11
12
.search .submit {
display:block;
width:17px;
height:17px;
float:right;
text-indent: -9999px;
background: url('../images/search.png') center center no-repeat;
border:none;
margin-top:8px;
margin-right:10px;
cursor: pointer;
}
Gornji CSS definira izgled search gumba kojemu postavljamo dimenzije kakve ima search.png.
Pozicioniramo ga skroz udesno i dodajemo mali razmak između njega i ruba forme sa margin-right.
Tu je isto tako iskorišten text-indent kako bi se maknuo tekst i ostala samo slika gumba. Dodano je
i svojstvo cursor:pointer koji mijenja izgled našeg miša kada prođemo preko gumba.
71
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
.search .input {
background:none;
border:none;
height:30px;
font-style: italic;
font-size:18px;
padding-left: 10px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
width:80%;
}
Element sa klasom .input definiran je gornjim CSS svojstvima. Prvo mu mičemo boju pozadine
i rubove koje su dane od pretraživača. Nakon toga definiramo mu visinu, širinu i ostala, već
objašnjena, svojstva.
sredenSearch
Dorade
Prema dizajnu možemo primijetiti da je početni tekst unutar search forme slabije boje. To je boja
HTML5 atributa placeholder te njemu izgled mijenjamo sljedećim CSS kodom:
72
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.search .input::-webkit-input-placeholder {
color: #bdbdbd;
}
.search .input:-moz-placeholder { /* Firefox 18- */
color: #bdbdbd;
}
.search .input::-moz-placeholder {
color: #bdbdbd;
}
/* Firefox 19+ */
.search .input:-ms-input-placeholder {
color: #bdbdbd;
}
Sljedeća dorada koju ćemo napraviti je pomicanje labele “Može Svatko” jer ovako sakrivena ne daje
nikakve informacije, a da tako i ostane nam ne služi baš na našoj stranici. Dakle kako bi to mogli
učiniti napraviti ćemo sljedeće. Dodajemo prvo na općenitu deklaraciju labele svojstva transition.
Sada bi naša definicija labele trebala ovako izgledati:
1
2
3
4
5
6
7
8
9
10
img.label {
clear:both;
bottom: -55px;
left: 350px;
position: absolute;
z-index: -1;
transition: bottom 1s;
-webkit-transition: bottom 1s; /* Safari */
}
Iako se sada ništa ne događa jer nema događaja koji će pokrenuti transition. On se uključuje na
pojedinim događajima koja se događaju na tom elementu. Mi ćemo napraviti da se malo podigne
kada prelazimo mišem preko .left klase. To ćemo postići sljedećim CSS svojstvom:
1
2
3
header .container > .left:hover img.label {
bottom:-25px;
}
Sada kada prelazimo mišem preko klase .left, naš label dobiva drugačiji bottom, odnosno veće za
30px (jer ide od - prema + ) pa se tako i njegova pozicija povisuje.
73
Moja prva web stranica
PSD2HTML - Gornji sadržaj
U prošlom tutorijalu napravili smo header naše prve web stranice. Sada je na redu glavni sadržaj.
U ovome tutorijalu napraviti ćemo gornji glavni sadržaj gdje se nalazi poruka dobrodošlice i slider.
Prvo što je potrebno spremiti sliku za naš slider i definirati strukturu našeg gornjeg sadržaja, zatim
ga je potrebno urediti CSS-om.
Priprema slike
Sliku spremamo na jednak način kao što smo i rezali naš dizajn. Ovdje ću prikazati još jednom, na
malo drugačiji način, kako doći do naše slike. Prvo što je potrebno napraviti je stvoriti novi Layer i
Apply Image.
Apply Image
74
Moja prva web stranica
Nakon toga potrebno je odabrati našu sliku. Mali problem nastaje prilikom odabira slike jer je
prikazana slika na slideru samo dio jedne veće slike tako da moramo odabrati samo dio koji ide
kao naš slider. U narednih par slika prikazati će se način kako doći do odabira samo potrebnog dijela
slike. Prvo je potrebno odabrati našu sliku. To činimo tako da kliknemo na Layer koji sadrži sliku.
logoSelected
Zatim držeći D i klikom miša na oblik odnosno shape našeg slidera (elementa u kojemu se nalazi
naša slika) stvara se odabir slike. Na sljedećoj slici prikazano je područje gdje je potrebno kliknuti
kako bi se slika odabrala.
75
Moja prva web stranica
Dctrl
Odabrana slika
Nakon toga, dovoljno je CTRL/Command + C i otvoriti novi File, zalijepiti je tamo i spremiti. Ja ću
76
Moja prva web stranica
je nazvati slika spremiti je u početni folder naše prve web stranice.
Folder
Struktura gornjeg sadržaja
Struktura našeg gornjeg sadržaja sastojati će se od lijeve i desne strane koje će sadržavati slider i
poruku. Slider će zatim imati jedan container koji će u sebi sadržavati elemente slidera odnosno slike
sa tekstom.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Sadržaj -->
<section class="main">
<div class="container">
<div class="left">
<div class="slider">
<div class="slider_item">
<img src="slika.jpg" width="326" height="188" alt="Slika" />
<span class="opis">
<h1>Moj prvi projekt</h1>
<p>Kratki tekst o mojem projektu</p>
</span>
</div>
<div class="slider_item">
<img src="slika.jpg" width="326" height="188" alt="Slika" />
<span class="opis">
<h1>Moj drugi projekt</h1>
</span>
</div>
</div>
</div>
<div class="right">
<h1>Dobrodošli na moju prvu web stranicu!</h1>
<p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slov\
oslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-\
Moja prva web stranica
26
27
28
29
30
31
32
33
34
35
77
og stoljeća.</p>
<div class="meta">
<span class="email">john@doe.com</span>
<span class="adresa">Adresa 1, LakoTuts 45399</span>
</div>
</div>
<br/>
</div>
</section>
<!-- Sadržaj END -->
Možete primijetiti kako za slider koristimo istu sliku. Stavio sam drugačiji tekst kako bi prepoznali
kada slider mijenja svoj sadržaj. U jednoj pravoj web stranici koristile bi se i druge slike.
CSS
Sada kada naša stranica ima potrebnu strukturu, moramo preko CSS-a definirati izgled našeg gornjeg
glavnog sadržaja. Prvo je potrebno odmaknuti malo naš sadržaj od logoa i gornjeg teksta kao što je
predviđeno dizajnom. To ćemo učiniti tako da odemo u naš CSS i klasi .main pridodamo sljedeće:
1
.main {min-height: 400px;padding-top:40px;}
Zatim je potrebno odmaknuti lijevi i desno dio sadržaja.
1
2
3
4
5
6
7
8
9
10
/* Main */
.main .left {
width:380px;
float:left;
}
.main .right {
width:580px;
float:left;
}
Ovime smo dobili sljedeće:
78
Moja prva web stranica
Lijevi i desni sadržaj
Poruka dobrodošlice
Poruku dobrodošlice je potrebno namjestiti u light font i crvene boje. Također promijeniti i veličinu
fonta.
1
2
3
4
5
6
.main .right > h1 {
font-weight:300;
font-size:30px;
color:#ff434c;
margin:0;
}
Ovdje je isto tako primjenjen i margin koji brišemo sa vrijednosti 0 kako bi maknuli dobivene
margine iz reset.css.
Moja prva web stranica
79
Tekst dobrodošlice
Tekst je isto tako potrebno namjestiti u light font te namjestiti dobar i čitljivi line-height.
1
2
3
4
5
6
7
8
.main .right > p {
font-weight:300;
font-size:14px;
line-height:1.6;
width:80%;
text-align:justify;
}
Kako prema dizajnu možemo primijetiti kako je širina teksta manja od širine naslova, dodali smo
i width koji je jednak 80% širini elementa u kojem se nalazi, a to je 80% širine od elementa .right.
Nakon toga smo mu i poravnanje namjestili tako da je jednako i s lijeve i s desne stranice.
Meta podaci
Meta podatke prvo moramo malo pomaknuti od teksta.
1
.main .right > .meta {
font-weight:300;
1
2
3
font-size:12px;
margin-top:50px;
}
Ovime smo i namjestili veličinu fonta za cijeli tekst unutar klase meta.
Email
1
2
3
4
5
.meta > .email {
background:url('../images/email.png') no-repeat left center;
padding-left:40px;
}
Za email ovdje smo dodali pozadinsku sliku koja se ne ponavlja tako da se prikaže samo jedanput
te smo zatim tekst unutar elementa .email postavili 40px udesno. Time smo dobili dovoljan razmak
kao što je prikazan u dizajnu.
Adresa
Za adresu možemo to kopirati i promijeniti putanju slike.
80
Moja prva web stranica
1
2
3
4
5
.meta > .adresa {
background:url('../images/adresa.png') no-repeat left center;
padding-left:40px;
margin-left:50px;
}
Ovdje smo još dodali i pomicanje udesno za 50px preko margin-left. Time smo dobili željeni izgled
kao što je u dizajnu. Sada bi naša stranica trebala izgledati ovako:
Izgled teksta dobrodošlice
Slider
Sada kada je riješen desni dio sadržaja, možemo preći na naš slider.
Moja prva web stranica
1
2
3
4
5
6
7
81
.slider {
border:1px solid white;
width:326px;
height:188px;
margin:0 auto;
position:relative;
}
Ovime smo slider postavili na sredinu te smo mu odredili širinu i visinu prema dimenzijama slike.
Na kraju njegov position je postavljen na relative kako bi mogli elemente slidera postaviti s obzirom
na njega.
1
.slider_item {
position:absolute;
1
2
3
top:0;
left:0;
}
Zatim smo element slidera postavili gore lijevo sa position:absolute kako bi uvijek počinjao u istom
položaju naspram našeg slidera.
1
2
3
4
5
6
7
8
9
.slider_item .opis{
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(0, 0, 0, 0.1);
height:77px;
}
Kako bi bili sigurni da će naš opis uvijek biti na istome mjestu i iste veličine dodali dali smo i njemu
position:absolute te smo mu odredili da počinje dolje lijevo. Sa gornjom definicijom background
svojstva dali smo mu crnu pozadinu ali sa opacity postavljenim na 10%.
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
82
.slider_item .opis h1{
font-size:18px;
margin-bottom:0;
margin-top:10px;
font-weight:300;
font-style:italic;
color:#ff434c;
margin-left:10px;
}
.slider_item .opis p{
font-size:12px;
margin:0;
margin-left:10px;
font-weight:bold;
}
Gornje definicije CSS-a su već viđene pa ih nećemo dodatno objašnjavati. Proučite ih dok ih pišete
kako bi vidjeli njihova svojstva.
Slider Navigacija
Navigacija nije bila dodana u gornjoj strukturi pa je moramo sada dodati.
1
2
3
4
5
6
7
....
<div clasS="navigacija">
<a href="#" class="nav active">1</a>
<a href="#" class="nav">2</a>
</div>
</div>
<div class="right">
Navigaciju smo dodali na kraju elementa .left. Sada ju je potrebno samo još urediti preko CSS-a.
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
83
.left .navigacija {
width:40px;
margin:9px auto;
text-align:center;
}
.navigacija .nav {
text-indent:-9999px;
background:url('../images/slider.png') no-repeat left center;
display:block;
width:11px;
height:11px;
float:left;
margin-left:4px;
margin-right:4px;
}
.navigacija .nav.active {
background:url('../images/sliderCurrent.png') no-repeat left center;
}
Definirali smo navigaciji širinu i postavili je u sredinu te odmaknuli od vrha za 9px. Zatim smo
elementima navigacije dali klasičnu sličicu slider navigacije, odredili dimenzije i naravno stavili
kao display:block kako bi element poprimio te dimenzije, te sa float:left smo odredili da idu jedan uz
drugog. Odmaknuli smo ih nakon toga preko margin-a. Kako bi mogli vidjeti koji je slider aktivan
morali smo dodati u jedan element i klasu active preko koje se raspoznaje u navigaciji koji je element
aktivan. Zatim smo u css-u izmijenili pozadinsku sliku.
PSD2HTML - Slider
Gornji dio sadržaja je skoro pa gotov. Nedostaje nam samo funkcionalni slider. U ovome tutorijalu
napraviti ćemo slider pomoću jquery plugin-a.
jQuery
jQuery je javascript biblioteka što znači da funkcije koje izvršava jQuery rade preko javascripta.
jQuery nam omogućuje da u kraćem roku obavimo više stvari odnosno da jednom funkcijom
dobijemo ono što bi napravili sa nekoliko funkcija koristeći se čistim javascriptom. jQuery biblioteku
možete pogledati na www.jquery.com¹⁰. Plugin koji ćemo koristiti ovisi o jQuery jer koristi
¹⁰http://www.jquery.com
84
Moja prva web stranica
neke njegove funkcije tako da moramo skinuti odnosno koristiti jQuery kako bi i jQuery plugin
mogao raditi. Kako bi došli do jQuery-a potrebno je otići na download sekciju koja se nalazi na
www.jquery.com/download¹¹. Na ovoj stranici možete skinuti cijeli kod od jQuery-a. Za svrhu ovog
tutorijala ja ću koristiti CDN (Content Delivery/Distribution Network), a to mi omogućuje korištenje
jQuery-a iako nije na mojem serveru već njegov kod preuzimam sa neke druge stranice. To možete
pronaći ako malo scrollate prema dolje u download sekciji.
jQuery CDN
Koristiti ćemo gornji poziv skripte. Tako da na kraju naše HTML datoteke možete zalijepiti taj kod.
1
2
3
4
</footer>
<!-- Footer END-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</body>
jCarousel
jCarousel je plugin koji koristi jQuery funkcije te ga možete pronaći na stranici orgalla.com/jcarousel/¹².
Ja sam pronašao taj plugin tako da sam pretražio katalog plugina na stranici plugins.jquery.com.
¹³Link če vas odvesti na pretraživanje slider-a. Tamo u listi možete pronaći i jCarousel. Zatim sam
na stranici jCarousel-a kliknuo na DOWNLOAD i kopirao sam cijeli kod koji mi je dan u pretraživaču,
otvorio sam novu datoteku u mojem alatu za izradu web projekata i zalijepio taj kod u tu datoteku
te je nazvao carousel.js i spremio je u folder js. Sada kako bi saznao kako se koristiti tim plugin-om
otvorio sam stranicu _DOCUMENTATION¹⁴ _i kliknuo na Instal__lation. ¹⁵.
Ovdje sam proučio osnove pozivanja samog plugin-a te kako ga pozivam u HTML datoteci odnosno
kako ga pokrećem. Prvo što je potrebno je pozvati samu datoteku koja nam sadrži kod od jCarousel-a.
To je naša datoteka carousel.js. Nju pozivam ispod poziva jQuery-a.
¹¹http://jquery.com/download/
¹²http://sorgalla.com/jcarousel/
¹³http://plugins.jquery.com/tag/slider/
¹⁴http://sorgalla.com/jcarousel/docs/
¹⁵http://sorgalla.com/jcarousel/docs/reference/installation.html
85
Moja prva web stranica
Poziva se nakon jQuery-a jer koristi funkcije od jQuery-a.
Ukoliko se pozove prije, pozvati će se funkcije koje su definirane u jQuery-a, a one će se definirati
tek nakon jCarousel, pa naš plugin i slider neće raditi.
1
2
3
4
5
6
</footer>
<!-- Footer END-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/carousel.js"></script>
</body>
Čitajući dalje vidio sam kako se rade slideri odnosno naši .slider_item-i.
jCarousel
Saznajemo iz ove dokumentacije da možemo postaviti bilo što unutar slidera i on će to vrtiti. Odlično,
to nama i treba. Ali zapazimo još nešto. Svi itemi koji se vrte moraju biti unutar jednog dodatnog
container-a. Dok mi imamo samo
86
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
<div class="slider">
<div class="slider_item">
<img src="slika.jpg" width="326" height="188" alt="Slika"
<span class="opis">
<h1>Moj prvi projekt</h1>
<p>Kratki tekst o mojem projektu</p>
</span>
</div>
...
/>
Ukoliko pozivamo jCarousel na .slider, potrebno nam je imati još jedan dodatni container. Naša dva
.slider_item-a dodajemo unutar containera .slides.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="slider">
<div class="slides">
<div class="slider_item">
<img src="slika.jpg" width="326" height="188" alt="Slika"
<span class="opis">
<h1>Moj prvi projekt</h1>
<p>Kratki tekst o mojem projektu</p>
</span>
</div>
<div class="slider_item">
<img src="slika.jpg" width="326" height="188" alt="Slika"
<span class="opis">
<h1>Moj drugi projekt</h1>
/>
/>
</span>
</div>
</div>
</div>
Ukoliko dalje čitamo, naići ćemo na poglavlje Setup gdje se prikazuje poziv plugin-a. Kako bi to
mogli napraviti, a da ne pretrpamo naš HTML dokument, ja ću to napraviti u zasebnoj datoteci koju
ću nazvati main.js i spremiti je i folder js. Ona će sadržavati sljedeće:
Moja prva web stranica
1
2
3
4
5
87
$(document).ready(function(){
$('.slider').jcarousel();
});
Prva linija pokazuje pretraživaču da nakon što se sve učita na našoj stranici, tek onda može učitati
ovaj dio skripte tj. riječima napisanih u kodu: “Kada je dokument spreman (sve je učitano) onda
čitaj i izršavaj ono što se nalazi u ovoj funkciji).”. Dalje pozivamo naš plugin na elementu sa klasom
.slider. Datoteku main.js potrebno je pozvati u našoj HTML datoteci i to ispod poziva carousel.js
jer su neke od funkcija u main.js ovisne o funkcijama definiranim u carousel.js. Kako je naš CSS
drugačije posložen i nije podložan promjenama koje vrši plugin na našem dokumentu, potrebno ga
je promijeniti.
Zašto nije podložan?
Nije podložan iz razloga što smo naše .slider_item elemente pozicionirali apsolutno s obzirom na
.slider i time su se poredali jedan item na drugi te se ne izmjenjuju. Ovaj plugin zahtjeva da su itemi
poredani jedan uz drugog (prisjetite se float-a). Dakle čitajući dalje dokument dolazimo do poglavlja
Style the carousel U sadržaju ovog poglavlja objašnjeno je kako definirati CSS svojstva za elemente
slidera.
Na njihovoj stranici to je urađeno za HTML elemente ul, dok ćemo mi morati to raditi za naše
elemente koji su div. To je zapravo nebitno jer ćemo ih ciljati preko klasa, tako da su to i ul odnosno
li elementi ne bi pravilo neku razliku. Ajmo sada u koracima sređivati naš CSS.
Prvo ćemo prikazati njihov CSS na stranici te onda naš.
Njihov slider element
1
2
3
4
5
6
7
8
9
10
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
position: relative;
overflow: hidden;
}
Naš slider element
Moja prva web stranica
1
2
3
4
5
6
7
8
88
.slider {
border:1px solid white;
width:326px;
height:188px;
margin:0 auto;
position:relative;
overflow:hidden;
}
Promjene: Dodali smo overflow svojstvo sa vrijednosti hidden kako bi se prikazivao samo sadržaj
unutar ovih definiranih dimenzija dok bi ostali sadržaj bio sakriven. Možete primijetiti da piše kako
ovaj element mora biti sa position:relative tako da je to dobro što smo napravili već prije :)
Njihov slider container element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
width: 20000em;
position: relative;
/* Optional, required in this case since it's a <ul> element */
list-style: none;
margin: 0;
padding: 0;
}
Naš slider container element
1
2
3
4
.slides {
width:700px;
position: relative;
}
Promjene: Dodali smo novi dio u naš CSS, a to je .slides koji predstavlja naš container te smo mu
dodali position:relative i širinu od 700px zato jer ukoliko pročitate njihov komentar u CSS-u, širina
bi trebala biti dovoljno velika da stane cijeli sadržaj u njih. Kako mi imamo dva sadržaja od 326px,
iako ih nismo definirali direktno u CSS slika je te širine te ona definira i širinu elementa koji ju
sadržava, 326*2 je 652 ako se ne varam te sam ja ovako bez računanja stavio 700px kako bih bio
Moja prva web stranica
89
siguran. Bolje je postaviti točnu širinu, tako da vi nemojte učinite moju pogrešku nego isprobajte sa
manjom širinom to namjestiti :)
Njihov slider item element
1
2
3
4
5
6
7
8
/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
/* Required only for block elements like <li>'s */
float: left;
}
Naš slider item element
1
2
3
4
.slider_item {
float:left;
position: relative;
}
Promjena: Izbrisali smo mu apsolutnu poziciju i smještaj tj. obrisali smo position,top _i _left te
smo mu dodali float:left kako bi jedni uz druge prijanjali tj. naslanjali se jedni na druge, te smo
mu dodali i position:relative. Taj position nema veze sa sliderom već ima veze sa našim drugim
CSS-om. Naš element .opis u .slider_item pozicionira se apsolutno prema prvom elementu koji ima
position:relative. Zbog toga smo dodali position:relative na naš slider_item kako ne bi .opis gledao
na neki drugi element i krivo se pozicionirao.
Slider Navigacija
Kako bi saznao kako aktivirati paginaciju otišao sam ponovo na dokumentaciju i odabrao Pagination.
Tu sam saznao da možemo jednostavno pozvati paginaciju sa jcarouselPagination(). Tako da je
dovoljno odabrati element koji je naša navigacija za slider i pozvati tu metodu.
Moja prva web stranica
1
2
3
4
5
6
7
90
$(document).ready(function(){
$('.slider').jcarousel();
$('.navigacija').jcarouselPagination();
});
Sada možemo primijetiti kako se naša navigacija poremetila odnosno dobili smo brojke 1 i 2 umjesto
naših gumbića. Ono što se dogodilo je to da je plugin našem elementu .navigacija izbrisao sadržaj i
dodao svoj sadržaj čime smo izgubili klase. Dakle kako bi vratili naše gumbiće definirane u CSS-u
potrebno je umjesto .nav napisati a.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.navigacija a {
text-indent:-9999px;
background:url('../images/slider.png') no-repeat left center;
display:block;
width:11px;
height:11px;
float:left;
margin-left:4px;
margin-right:4px;
}
.navigacija a.active {
background:url('../images/sliderCurrent.png') no-repeat left center;
}
Sada se naši gumbići vide i sve je kako i prije.
Ali ne vidi se aktivan slider !?
Da, aktivan slider se ne vidi iz razloga što se ne dodaju klase .active na elemente unutar navigacije.
Kako bi to riješili, moramo otići opet na stranicu jCarousel i to na evente paginacije¹⁶ (Pagination
Plugin -> Events). Ukoliko kliknete na active event poveznica će vas odvesti na dio gdje se prikazuje
poziv evenata odnosno prikazuje se kako definirati događaje koji će se dogoditi nakon što je ovaj
event pozvan. Na toj djelu stranice možete primijetiti sljedeći kod:
¹⁶http://sorgalla.com/jcarousel/docs/plugins/pagination/reference/events.html
Moja prva web stranica
1
2
3
4
5
6
7
91
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
});
Gledajući taj kod, implementirano je sljedeće:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
$('.slider').jcarousel();
$('.navigacija')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();
});
Šta se ovdje dogodilo?
Polako, idemo koracima:
1. Pozivamo plugin jcarousel na .slider
2. Određujemo preko evenata da kada je aktivan element navigacije( element navigacije povezan
je sa slider item-om ) tada tom elementu dodaj klasu active
3. Određujemo kada nije aktivan da mu se briše klasa active
4. Nakon definiranja evenata pozivamo i metodu stvaranja navigacije
PSD2HTML - Donji sadržaj i footer
Ovim tutorijalom završavamo našu web stranicu. Ovdje ćemo naučiti kako napraviti liste te njihov
izgled definirati putem CSS-a.
Struktura
Za početak potrebno je postaviti naš sadržaj i time definirati preostalu strukturu u našoj datoteci
index.html.
Moja prva web stranica
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
... <span class="adresa">Adresa 1, LakoTuts 45399</span>
</div>
</div>
<br style="clear:both"/>
<div class="donji_sadrzaj">
<div class="left">
<ul >
<li class="raketa">Lorem Ipsum je jednostavno probni tekst koji se
koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum
postoji kao industrijski standard još od 16-og stoljeća.
</li>
<li class="code">
Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj
i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski
standard još od 16-og stoljeća.
</li>
</ul>
</div>
<div class="right">
<ul>
<li class="klijenti">
<span class="velika plava">34</span>
Zadovoljnih klijenata
</li>
<li class="projekti">
<span class="velika crvena">10</span>
Otvorenih projekata
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Sadržaj END -->
<!-- Footer -->
<footer>
<div class="container">
&copy; LakoTuts, 2014
<br/>
</div>
</footer>
<!-- Footer END-->..
92
Moja prva web stranica
93
Neki dijelovi su pušteni i nakon našeg sadržaja kako bi mogli vidjeti gdje se točno nalazi ovaj dio
strukture. Možete prmijetiti kako sadržaj pod elementima .left i .right ipak jesu pomaknuti lijevo i
desno iako mi nismo za njih ništa dodatnog definirali. To je iz razloga što smo u jednom od prošlih
tutorijala deklarirali klase .left i .right i to pod elementom .main. Zbog takve deklaracije svi elementi
sa tim klasama unutar elementa .main poprimaju ta svojstva. U sljedećem kodu prikazane su te
deklaracije:
1
2
3
4
5
6
7
8
9
10
/* Main */
.main .left {
width:380px;
float:left;
}
.main .right {
width:580px;
float:left;
}
Lijevi stupac
Prvo ćemo srediti naš lijevi dio sadržaja te CSS koji ćemo koristiti za početak je sljedeći:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Donji sadržaj*/
.donji_sadrzaj .left ul {
font-size:12px;
padding-left:25px;
line-height: 1.5;
margin-top:40px;
}
.donji_sadrzaj .left li {
list-style: none;
width:282px;
margin-bottom: 42px;
padding-left:55px/*Širina ikona rakete i code-a + razmak od ikone */;
text-align: justify;
}
Prema gornjem CSS definirali smo izgled naših ul i li elemenata. Na ul definirali smo i padding-left
iz razloga što sam želio definirati zaseban padding-left kako se ne bi koristila deklaracija iz reset.cssa. Kod li elementa deklarirali smo njihovu širinu te zatim dodali i padding-left koji pomiče cijelu tu
Moja prva web stranica
94
širinu za 55px što odgovara širini ikona koje koristimo za lijevi stupac te još dodatan razmak između
ikona i teksta.
Sada treba dodati i ikone
Dodavanje ikona je veoma jednostavno. Pripremili smo već područje gdje ikone dolaze sa definiranjem padding-left na li elementu. Sada je jedino potrebno pozicionirati ikonu skroz lijevo i uz vrh,
a to ćemo učiniti sljedećom CSS deklaracijom.
1
2
3
4
5
6
7
li.raketa {
background:url('../images/raketa.png') no-repeat left top;
}
li.code {
background:url('../images/code.png') no-repeat left top;
}
Desni stupac
Nakon definiranja izgleda lijevog stupca na red dolazi i desni stupac. Za elemente desnog stupca
koristiti ćemo iste metode samo drugačijih vrijednosti uz neke dodatne metode koje će biti
objašnjene. Prve linije css za desni stupac:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.donji_sadrzaj .right ul {
font-size:18px;
padding-left:100px;
line-height: 1.5;
margin-top:40px;
color:#b5aea3;
}
.donji_sadrzaj .right li {
height:80px;
list-style: none;
padding-left:100px;
margin-bottom:20px;
}
Ovdje smo jednako tako koristili svoju definiciju padding-left za ul, a isto i za li element gdje se kod
li elementa računa širina ikona + razmak između ikone i teksta. Visina li elementa isto je tako uzeta
iz dimenzije ikona kako bi se cijele ikone vidjele. Ovim CSS-om sad je definirana pozicija elemenata
i izgled teksta. Sljedeće je dodavanje ikona:
Moja prva web stranica
1
2
3
4
5
6
7
95
li.klijenti {
background:url('../images/klijenti.png') no-repeat left center;
}
li.projekti {
background:url('../images/monitor.png') no-repeat left center;
}
Kao što možete primijetiti ove ikone dodane su na jednak način kao i gornje ali ovdje je pozicija po
Y (gore dolje) koordinatama namještena da se prikazuje u sredini elementa. Ostao nam je još samo
tekst, pa ajmo i to srediti:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.donji_sadrzaj .right .velika {
font-size: 48px;
font-weight: bold;
margin-right: 20px;
}
.donji_sadrzaj .right .plava {
color:#6aceeb;
}
.donji_sadrzaj .right .crvena {
color: #ff434c;
}
Sada naša web stranica izgleda približno jednaka PSD-u ali tekst još uvijek mora biti centriran sa
ikonama kod desnog stupca. Tu ćemo se malo opet poigrati sa floatanjem i sl. Prvo što ćemo učiniti
je da se ostali tekst prikazuje uz naša velika slova pa kod definiranje naših velikih slova postavljamo
float:left.
1
2
3
4
5
6
.donji_sadrzaj .right .velika {
float: left;
font-size: 48px;
font-weight: bold;
margin-right: 20px;
}
Nakon toga potrebno je srediti i čišćenje floata jer će se sada cijeli naredni sadržaj prikazivati uz
velika slova, tako da i sljedeća velika slova se prikazuju uz prethodna velika slova. To ćemo učiniti
tako da u svakom li elementu desnog stupca prvo brišemo odnosno čistimo floatove. Sada CSS od
našeg li elementa desnog stupca treba izgledati ovako:
Moja prva web stranica
1
2
3
4
5
6
7
8
96
.donji_sadrzaj .right li {
height:80px;
clear:both;
list-style: none;
padding-left:100px;
line-height: 80px;
margin-bottom:20px;
}
Ovime čistimo floatove i krećemo iz novog reda za svaki li element, a definiranjem line-height na
80px što je dimenzija visine od naših ikona za desni stupac, postigli smo centriranje teksta uz sliku.
To se dogodila zato jer se sada gleda svaka linija teksta unutar li elementa ima visinu od 80px pa po
tome je i tekst jednako pozicioniran s obzirom na gornju i donju granicu linije te smo time postigli
centriranje teksta.
Footer
Footer je jednostavan. Kako koristimo klasu .container tekst nam je već pozicioniran uz lijevi rub
našeg containera te je jedino potrebno definirati veličinu fonta, a to jednostavno činimo ovako:
1
2
3
4
footer {
font-size:12px;
padding:20px 0;
}
Koristeći se prethodnom definicijom padding-a povećali smo footer gore i dolje za 20px.
Autor
Autor knjige je Igor Benić kojeg možete pronaći na twitteru pod @igorbenic. Također je i autor sva
tri tečaja na www.lakotuts.com gdje snima i piše tutorijale na hrvatskom jeziku.
Savjetovanje i poduke
Za pomoć pri izradi vlastitih web stranica Igor Benić nudi usluge pomoći, podučavanja te savjetovanja pri izradi web stranica. Za više informacija o tome, kontaktirajte ga na e-mail: i.benic@hotmail.com.

IWA – zadaci- ispit_15.09.2014

CSS – osnove

CSS_prvi dio

Uvod u web programiranje: Uvod u CSS

OSNOVE HTML-a

- Leanpub

WDW Sponzorstvo Što mi očekujemo i ne

3-dnevno jedrenje za djevojke

DOBRODOŠLI U HTML I deo

Carbon X potkape - Vatro

Pretraživanje - općenito - E

Peticija svjećara

Opći uvjeti korištenja Internet stranica www.blitz

SanskrtVel_Sezona2-1.pdf - TM

KOLAČIĆI (COOKIES) Kolačić je informacija spremljena

Smjernice za izradbu i oblikovanje završnog rada