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
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
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" />
Moja prva web stranica
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:
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
<meta charset="utf-8"/>
Moja prva web stranica
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
<meta charset="utf-8"/>
Moja prva web stranica
Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazati.
Š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
Moja prva web stranica
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
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:
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
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
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
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
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 1
ćelija 2
ćelija 3
ć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
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
<meta charset="utf-8"/>
Moja prva web stranica
Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazati.
Š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.
Ovo je moja prva web stranica i ovdje pišem sav sadržaj koji želim prikazati.
Š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
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-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
Ovo je jedan Heading sa H1
Ovo je još jedan Heading sa H2
Evo opet jednog headinga H1
Identifikator class, suprotno od id, može se koristiti na više HTML elemenata, kao npr. 1 2 3
Ovo je jedan Heading sa H1
Ovo je još jedan Heading sa H2
Evo opet jednog headinga 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
Ovo je jedan Heading sa H1
Ovo je još jedan Heading sa H2
Evo opet jednog headinga 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
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
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: • • • •
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: • • • • •
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
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
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
Moja prva web stranica - Lako tuts <meta charset="utf-8">
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
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
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
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
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:
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
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
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
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
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
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:
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.
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:
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
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
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
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-\
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
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.
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.
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
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%.
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
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
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
Č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
Moj prvi projekt
Kratki tekst o mojem projektu
...
/>
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
Moj prvi projekt
Kratki tekst o mojem projektu
Moj drugi projekt
/>
/>
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:
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; }
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
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
'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.
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:
Š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.
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.
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.
34 Zadovoljnih klijenata
10 Otvorenih projekata
..
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
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
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
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
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:
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: [email protected].