249451188-Web-početnik

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

Sadržaj

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

Ovo je početna struktura HTML dokumenta. Početnim 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

<meta charset="utf-8"/>
Moja prva web stranica

Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazati.

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

<meta charset= "utf-8" />

Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazat\ i.

Škola HTML-a

www.lakotuts.com

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

<meta charset="utf-8" />

Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazati.

Škola HTML-a

www.lakotuts.com

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


Ovo je moja prva web stranica
i ovdje pišem sav sadržaj koji želim prikazati.

Škola HTML-a

HTML

13 14 15

7

www.lakotuts.com

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
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)
za listu za brojevima i 2)
za listu bez brojeva. Nakon što se lista otvori, svaki član lista mora biti obilježen sa tagom LI :
Naziv člana ili cijeli sadržaj
. 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



Škola HTML-a

www.lakotuts.com

Film 1

Film 2

Film 3

8

HTML

23 24 25 26 27 28

Pjesma 1

Pjesma 2

Pjesma 3

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


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
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

Moja prva strani\ ca

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

Facebook Facebook

Točno: 1

Facebook

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

Facebook

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

Moja druga web stranica

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

Moja druga web stranica

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

Može se primijetiti da element slike ima samozatvarajući tag kao što imaju i i
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

ćelija 1 ćelija 2

ćelija 3 ćelija 4

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

ćelija 1 ćelija 2 ćelija 3 ćelija 4



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

ćelija 1 ćelija 2 ćelija 3




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


ćelija 4

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

ćelija 1 ćelija 2

ćelija 3

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

** 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

HTML tag style 1 2 3 4 5 6

...

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

...

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



20

Uvod u CSS

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32


Škola HTML-a

www.lakotuts.com

Film 1

Film 2

Film 3

Pjesma 1

Pjesma 2

Pjesma 3

ć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



Škola HTML-a

www.lakotuts.com

Film 1

Film 2

Film 3

Pjesma 1

Pjesma 2

Pjesma 3

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



Škola HTML-a

www.lakotuts.com

Film 1

Film 2

Film 3

Pjesma 1

Pjesma 2

Pjesma 3

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

Tekst

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

Tekst

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
dobiti ćemo sljedeće: 1 2 3 4

Ovo je odlomak unutar HTML elementa
. 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

Ovo je jedan Heading sa H1

Ovo je još jedan Heading sa H2

Evo opet jednog headinga H1

Točno 1 2 3




Identifikator class, suprotno od id, može se koristiti na više HTML elemenata, kao npr. 1 2 3




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




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

Ovo je jedan Heading sa \ 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

Ovo je naslov prve grupe

Evo i mali tekst prve grupe

Ovo je naslov druge grupe

Pa evo nam i teksta druge grupe

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

causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
.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

Ovo je moj naslov

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

OVo je sada novi naslov koji je apsolutno pozicioniran s obzirom na gornji element

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


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


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


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


pozicioniranjeNewLayer

Nakon što smo stvorili novi layer trebali bi imati ovu sliku:

46


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


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


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


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


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


rezanjeEmail

sliderIkona

Folder nakon što su svi izrezani i pospremljeni bi trebao izgledati ovako:

52


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


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

Moja prva web stranica - Lako tuts <meta charset="utf-8">

Lako Tuts
$Lako Tuts Slogan\$


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

Facebook

Twitter

Objašnjenja: Head • < meta charset=”utf-8”> - 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


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


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


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


Font Styles

59


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


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

...

Lako Tuts

Facebook

Twitter

⁹http://www.lakotuts.com/psd2html-pocetna-struktura/


26 27

61

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.


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


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


To znači da ukoliko imamo 1 2 3 4 5 6 7

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:


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


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:


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


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


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:


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


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


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


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


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


Dctrl

Odabrana slika

Nakon toga, dovoljno je CTRL/Command + C i otvoriti novi File, zalijepiti je tamo i spremiti. Ja ću

76


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

Moj prvi projekt

Kratki tekst o mojem projektu

Moj drugi projekt

Dobrodošli na moju prvu web stranicu!

Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slov\ oslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-\


26 27 28 29 30 31 32 33 34 35

77

og stoljeća.

[email protected] Adresa 1, LakoTuts 45399

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


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.


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


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.


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%.


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

....
1 2

ćelija 1	ćelija 2	ćelija 3	ćelija 4
ćelija 5	ćelija 6	ćelija 7	ćelija 8
ćelija 9	ćelija 10	ćelija 11	ćelija 12

ćelija 1	ćelija 2	ćelija 3
ćelija 4	ćelija 6	ćelija 7
ćelija 8	ćelija 9	ćelija 10
ćelija 11	ćelija 12	ćelija 13

249451188-Web-početnik

Recommend Documents

Moja prva web stranica

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Škola HTML-a

Moja prva web stranica

Škola HTML-a

Tekst

Tekst

Ovo je jedan Heading sa H1

Ovo je još jedan Heading sa H2

Evo opet jednog headinga H1

Ovo je jedan Heading sa H1

Ovo je još jedan Heading sa H2

Evo opet jednog headinga H1

Ovo je jedan Heading sa H1

Ovo je još jedan Heading sa H2

Evo opet jednog headinga H1

Ovo je jedan Heading sa H1

Ovo je još jedan Heading sa H2

Evo opet jednog headinga H1

Ovo je jedan Heading sa \ H1

Ovo je naslov prve grupe

Ovo je naslov druge grupe

Ovo je moj naslov

OVo je sada novi naslov koji je apsolutno pozicioniran s obzirom na gornji element

Moj prvi projekt

Moj drugi projekt

Dobrodošli na moju prvu web stranicu!

Moj prvi projekt

Moj prvi projekt

Moj drugi projekt