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