Hypertext

Markup
Language
&
Cascading
Style Sheets




HTML / CSS Skripta
2012
Sadraj
1. Poeci interneta ................................................................................................................................. 1
1.1. ARPA-Net ..................................................................................................................................... 1
1.2. Znanstvene ustanove .................................................................................................................. 1
1.3. Majka svih mrea ......................................................................................................................... 2
1.4. to je internet ? ........................................................................................................................... 3
1.5. TCP/IP protokol ........................................................................................................................... 4
1.5.1. IP adresiranje ............................................................................................................................ 4
1.6. Client-Server tehnologija ............................................................................................................. 5
1.7. DNS - Domain Name System ....................................................................................................... 5
1.8. Routing i Gateways ...................................................................................................................... 6
2. Internet usluge ................................................................................................................................... 7
2.1. E-mail........................................................................................................................................... 7
2.2. Telnet .......................................................................................................................................... 7
2.3. FTP ............................................................................................................................................... 7
3. Nastanak world wide weba ................................................................................................................ 9
3.1. Inicijativa stvaranja svjetske mree ............................................................................................. 9
3.2. Prvi preglednik ............................................................................................................................. 9
4. Uvod u WEB Dizajn ........................................................................................................................... 10
4.1. Karakteristike web dizajna ......................................................................................................... 10
4.2. Osnovni elementi web stranice ................................................................................................. 11
4.3. Tipovi razliitih izgledaweb stranica (layouts) ........................................................................... 12
4.4. Uspjena web stranica ............................................................................................................... 12
5. Osnove HTML-a ................................................................................................................................ 14
5.1. to je HTML? ............................................................................................................................. 14
5.2. Asociranje .html ekstenzije s browserom .................................................................................. 15
6. Prva HTML stranica........................................................................................................................... 16
6.1. Struktura HTML dokumenta ...................................................................................................... 17
6.2. Prazni Prostor (Whitespace) ...................................................................................................... 18
6.3. Komentar u HTML-u .................................................................................................................. 18
7. Osnove CSS-a .................................................................................................................................... 19
7.1. Kako izgleda CSS dokument? ..................................................................................................... 19
7.2. Anatomija CSS elementa ........................................................................................................... 20


HTML / CSS Skripta
2012
7.3. Selektori, atributi i vrijednosti ................................................................................................... 21
7.3.1. Vrste selektora ................................................................................................................... 22
7.4. Komentari u CSS-u ..................................................................................................................... 23
8. HTML & CSS ...................................................................................................................................... 24
9. Boje .................................................................................................................................................. 25
9.1. Heksadecimalne boje ................................................................................................................ 25
9.2. RGB boje .................................................................................................................................... 25
9.3. RGBA boje.................................................................................................................................. 26
9.4. HSL boje ..................................................................................................................................... 26
9.5 HSLA boje ................................................................................................................................... 27
10. Tekst ............................................................................................................................................... 28
10.1. Specijalni znakovi .................................................................................................................... 28
10.2. Stiliziranje teksta putem CSS-a ................................................................................................ 29
10.3. Naglaavanje teksta i indeksi ................................................................................................... 30
11. Headings ......................................................................................................................................... 30
12. Crte i prijelom reda ........................................................................................................................ 31
13. Slike ................................................................................................................................................ 32
13.1. Formati slika na web stranicama ............................................................................................. 32
13.2. Smjetanje slika u HTML-u....................................................................................................... 33
13.3. Stiliziranje slike putem CSS-a ................................................................................................... 34
13.4. Slika kao pozadina elementa ................................................................................................... 34
14. Hyperlink ........................................................................................................................................ 35
14.1. Stiliziranje linkova .................................................................................................................... 37
15. DIV & SPAN ..................................................................................................................................... 38
16. Box model i pozicioniranje ............................................................................................................. 39
16.1. Box model................................................................................................................................ 39
16.2. Pozicioniranje .......................................................................................................................... 40
17. Liste ................................................................................................................................................ 42
17.1. Ureene liste ........................................................................................................................... 42
17.2. Neureene liste ....................................................................................................................... 44
17.3. Definicijske liste ....................................................................................................................... 44
17.4. Ugnijeene liste ..................................................................................................................... 45
17.5. Stiliziranje lista......................................................................................................................... 46
18. Tablice ............................................................................................................................................ 47


HTML / CSS Skripta
2012
18.1. Stiliziranje tablica .................................................................................................................... 51
19. Formulari ........................................................................................................................................ 53
19.1. to su formulari? ..................................................................................................................... 53
19.2. Textboxses ............................................................................................................................... 54
19.3. Textarea................................................................................................................................... 55
19.4. Checkbox & radio input ........................................................................................................... 56
19.5. Selekcije ................................................................................................................................... 58
19.6. Gumbi (buttons) ...................................................................................................................... 59
19.7. Stiliziranje formulara ............................................................................................................... 60
20. Meta tagovi .................................................................................................................................... 63
21. Validator ......................................................................................................................................... 65
22. Napomene ...................................................................................................................................... 66


POU Proanima 2012, Vodnikova 15, Zagreb 1

HTML / CSS Skripta
2012
1. Poeci interneta
1.1. ARPA-Net
Jezgra interneta nastaje 60-ih godina u SAD-u. Kako se radilo o hladnoratovskom
vremenu u amerikom Ministarstvu obrane (Department of Defense) potaknut je projekt
zatite vojnih podataka koji ak i pri atomskom napadu ne bi smjeli biti uniteni.
Nastala je ideja dislokacije podataka na vie raunala pri emu bi svako raunalo imalo
kompletne podatke te bilo povezano sa drugim raunalima u mreu. U sluaju da neko od
njih bude uniteno ostala raunala ionako imaju sve potrebne podatke. Nadalje, omoguen je
i transfer novih podataka (update) na sva raunala.
Advanced Research Projects Agency (ARPA), realizirao taj projekt stoga je prvih
godina mrea i nosila ime ARPA-Net. Krajem 1969. bila su umreena 4 raunala, a tri godine
poslije 40 raunala.
1.2. Znanstvene ustanove

Zahvaljujui otvorenoj arhitekturi ARPA - Net-a poetkom 70-ih mnoge akademske
institucije vidjele su svoju ansu za razmjenu informacija, rad na zajednikim projektima bez
potrebe fizikog okupljanja znanstvenika na jednom mjestu, sinkronizaciju podataka itd.
Broj umreenih raunala je rastao. Ispoetka su to bila Unix raunala, a kasnije sve
vie i osobna raunala. Neka od raunala su imala stalnu zakupljenu liniju, dok su druga,
kao i danas pristupala mrei povremeno, putem modema. Na internet stranici
http://www.internetworldstats.com moete pogledati statistike o broju korisnika interneta.
Zbog razliitih operacijskih sustava, tvornikih modela raunala, itd nastaje
nunost stvaranja jedinstvenog protokola koji e omoguiti prijenos podataka meu
raunalima. Tako nastaje Transmission Control Protocol/Internet Protocol (TCP/ IP). Sva
raunala koji komuniciraju internetom moraju podravati spomenuti protokol.
Kako u znanstvenim ustanovama imamo i studente, internet dobiva i novu
dimenziju. Naime studenti koriste mogunost komuniciranja koju prua ARPA-Net kao
neku vrstu - oglasne ploe za svoje potrebe. Tom Truscott, Jim Ellis i Steve Bellovin
uspostavili su prvu tzv. USENET news grupu na kojoj su korisnici irom svijeta razgovarali i
mijenjali svoja iskustva o politici, religiji i ostalim temama.






POU Proanima 2012, Vodnikova 15, Zagreb 2

HTML / CSS Skripta
2012
1.3. Majka svih mrea

Budui da vojne ustanove ele svoje podatke sauvati kao tajnu, poetkom 80-ih
dolazi do razdvajanja vojnog dijela ARPA Neta od civilnog, pa tako nastaje MILNet. ARPA
net ostaje i dalje slui znanstvenim ustanovama.
Broj umreenih raunala raste rapidno, a kad se u zbivanje ukljuila i National Science
Foundation (NSF) razvoj mree dobiva novi epilog. Umreavanjem sveuilita i velikih
raunalnih centara te povezivanjem manjih mrea na njih nastaje okosnica (backbone)
amerikog interneta.









Na ovaj nain je nastala - mrea nad mreama, a pojam - internet se sve vie udomauje.
Krajem osamdesetih pojam ARPA Net je konano i odbaen, a naziv - internet zaivljava i
spominje se prvi put 1982. godine.
U Europi imamo slian razvoj dogaaja, pa 1986. nastaje RARE (Rseaux Associs pour la
Recherche Europenne). Cilj ove organizacije je koordiniranje razliitih sistema pa nastaje
projekt pod nazivom COSINE (Cooperation for an Open Systems Interconnection
Networking in Europe). Razlika izmeu amerike i europske mree je u nainu transfera
podataka. U Europi se koristi ISO standard dok SAD koristi TCP/IP. Meutim zbog
strahovitog razvoja u Americi, TCP/IP standard za prijenos sve vie se probija u Europu te
nastaje mrea koja podrava oba standarda (EuropaNET). Postavljanjem transatlantske veze
dvije velike mree se spajaju.
Koordinaciju internet-prometa u Europu vodi organizacija RIPE (Rseaux IP Europens).
1992. nastaje i europska kraljenica interneta Ebone (European Internet-Backbone).
National Science Foundation (NSF) www.nsf.gov
Ebone-Net www.ebone.net
Rseaux IP Europens (RIPE) www.ripe.net

POU Proanima 2012, Vodnikova 15, Zagreb 3

HTML / CSS Skripta
2012
1.4. to je internet ?

Internet je raznovrsna raunalska mrea sastavljena iz mnotva manjih, meusobno
povezanih mrea sa milijunima raunala spremnih za izmjenu podataka. Dakle ono to
danas nazivamo - internetom nije jedna homogena mrea nego sustav mnotva manjih
lokalnih mrea povezanih na okosnicu (backbone). 1970. godine etiri raunala su prvi put
bila povezana putem telefonske linije: Stanford Research Institute, UC Los Angeles, UC
Santa Barbara i University of Utah at Salt Lake City.
Raunalska mrea (spoj dvaju ili vie raunala) je izraena od bakrenih, optikih
kablova i telefonskih linija te ju dijelimo na dvije glavne vrste: LAN (Local area network,
mrea smjetena u jednoj zgradi) i WAN (Wide area network, mrea koja je nalazi na irem
geografskom podruju, npr. veem od 3 kilometra).
Mnogi korisnici internata smatraju kako se internet i www (world wide web).
istoznanice. To miljenje je pogreno. Naime, www je samo jedna programska platforma
koja tvori ogroman svijet interneta
















POU Proanima 2012, Vodnikova 15, Zagreb 4

HTML / CSS Skripta
2012
1.5. TCP/IP protokol

Povijesno gledano, nastankom ovog protokola stvara se preduvjet za razvoj - mree
nad mreama. Protokoli odreuju poredak odailjanja i primanja podataka izmeu raunala,
te radnje koje se poduzimaju prilikom prijenosa/prijema podataka.
Podaci se - sjeckaju u male pakete od kojih svaki ima adresu na koju e biti poslan te
koji je po redu. Da bi podaci stigli do primatelja i to pravim redoslijedom omogueno je TCP-
om dok adresiranje omoguuje IP protokolom. Protokoli u potpunosti upravljaju
komunikacijskom aktivnou na internetu. Bez obzira da li surfate internetom (gledate
WWW stranice), aljete e-mail, podiete (upload) ili skidate (download) podatke putem FTP-
a, koristite TELNET; podaci se uvijek na isti nain adresiraju i transportiraju.
Svako raunalo prikljueno na internet prijavljeno je putem tzv. IP adrese i nazivamo
ga HOST-om. Razlikujemo stalne IP adrese i dinamike za svaki pristup internetu (npr. mali
korisnik koji se povremeno prikljuuje).

1.5.1. IP adresiranje

Tipina IP-Adresa izgleda ovako: 219.170.211.5. Dakle etiri broja(4x8 bitova, etiri
osmerke) podijeljena tokama. Toke imaju zadatak usmjeravanja prema podreenim
mreama (ovo moemo usporediti sa telefonijom. Prvo zovemo pozivni broj neke zemlje,
zatim upanije, grada te vlasnika.)
Tip mree IP-adresiranje Tipina IP-adresa

A-klasa xxx.xxx.xxx.xxx 110.200.110.67
B-klasa xxx.xxx.xxx.xxx 135.117.110.15
C-klasa xxx.xxx.xxx.xxx 192.35.155.132

Deblje oznaeno predstavlja mreni broj, dok ostatak adrese predstavlja broj Hosta.
Mrea A klase se nalazi na vrhu hijerarhije te moe imati do 126 mrenih brojeva. U
ovaj tip mree spada Amerika vojna mrea. Ostala tri broja u ovakvom tipu mree mogu
imati do 255 brojeva, pa je mogue dodijeliti 16,7 mil kombinacija (hostova).

Mreu B klase emo prepoznati po tome to prvi broj ima vrijednost izmeu 128 i
192. Prva dva broja predstavljaju mrene brojeve od kojih ovaj drugi moe imati vrijednost
od 0-255. Na ovaj nain je mogue ostvariti oko 16000 mrea. Trei i etvrti broj (hosts)
takoer mogu imati vrijednost od 0-255 pa je na takve mree mogue prikljuiti 65000
Hostova. Mree B klase se dodjeljuju velikim firmama, fakultetima i ISP-ovima.



POU Proanima 2012, Vodnikova 15, Zagreb 5

HTML / CSS Skripta
2012
Mrea C klase se nalazi na dnu hijerarhije i njen mreni broj ima vrijednost od 192-
223. Prva tri broja predstavljaju mreni broj, dok je zadnji broj predstavlja broj hosta. Mogue
je adresirati preko 2 mil. mrea na ovaj nain pri emu svaka od njih moe imati max. 255
Hostova.

Da li e ovakav nain adresiranja zadovoljiti potrebe u budunosti, ostaje upitno, ve
sada se zagovara prelazak na drukiji nain adresiranja.
1.6. Client-Server tehnologija

Raunalo koje nudi internet usluge (World Wide Web, Gopher, E-mail, FTP itd.) mora
imati instaliran odgovarajui software. U client/server tehnologiji jedno host raunalo ima
ulogu posluitelja a drugo ulogu klijenta. Serveri su softverski programi koji se nalaze na
hostovima (raunalima) te koji permanentno oekuju upit koji odgovara usluzi za koju su
namijenjeni. Clients (klijenti) su softverski programi vre upit te potrauju od servera neki
sadraj, podatak. Web browser (Firefox, IE, Opera) je jedan takav client. Reguliranje
komunikacije izmeu Servera i Clienta postie se odgovarajuim protokolom. U sluaju
WWW-a to je HTTP (Hyper Text Transfer Protocol).
Client trai podatke, a server ih alje. Ovo je uobiajena konstelacija. Meutim ima i
izuzetaka, npr. kad podiemo podatke na server FTP-om, aljemo e-mail ili ispunjavamo
formular i aljemo ga. U ovim sluajevima govorimo o Client-Push ("Client dostavlja (gura)
podatke serveru").
Drugi izuzetak je kad server bez prethodnog upita alje podatke clientu. To se naziva
Server-Push ("server gura podatke clientu "). Internet se sve vie razvija u pravcu tzv. Push-
Tehnologija. Primjer su aktualno stanje dionica, vremenska prognoza, vijesti itd. koje server
alje klijentu u svakom trenutku. Firefox i Microsoft Internet Explorer imaju odgovarajui
interface za primanje ovakvih sadraja.
1.7. DNS - Domain Name System

Kompjutori (raunala) barataju brojkama, dok ljudi mnogo bolje pamte nazive,
imena. Stoga je izmiljen sistem koji omoguuje pronalaenje nekog sadraja na internetu bez
potrebe pamenja ili zapisivanja IP Adresa. DNS sistem omoguava pretvaranje IP Adrese u
naziv, a organiziran je hijerarhijski kao i IP Adrese (podijeljen tokama). Razlikujemo Top-
Level-Domain i unutar nje Sub-Level-Domain. Svaka Sub-Level-Domena moe imati ispod
sebe jo domena, poput http://www.yahoo.co.uk.
Top-Level-Domene se nalaze u nazivu na zadnjem mjestu. Prepoznajemo ih po
skraenicama. Najpoznatija je .com (eng. - dot com), pa je u zadnje vrijeme izveden termin -
dot com kompanije. Top Level Domena se odnosi ili na dravu ili za prepoznavanje tipa
usluga.


POU Proanima 2012, Vodnikova 15, Zagreb 6

HTML / CSS Skripta
2012
U svakoj dravi postoji ustanova koja regulira dodjelu domena, u Hrvatskoj je to
CARNet.
hr = Hrvatska
au = Austrija
hu = Maarska
it = Italija
my = Malezija
com = komercijalna adresa
org = organizacija
net = mrene usluge
edu = amerike visokokolske ustanove
gov = amerike vladine ustanove
mil = amerike vojne ustanove

1.8. Routing i Gateways

Na internetu se protok informacija odvija prvenstveno unutar submree. Gateway-i i
routeri su dvije kritine komponente interneta. Kako bi se ostvarila komunikacija izmeu
dvije submree, potrebni su nam sklopovi pod nazivom routeri. Pri komunikaciji na
spojevima razliitim mrea (razliitih standarda) kao i upitima za nekom informacijom koja
se nalazi na udaljenom raunalu, u igru stupaju raunala koja nazivamo gateways. Ova
raunala kao to im samo ime kae - premouju prijenos podataka iz neke submree sa
hostovima u slijedeu. Ovo usmjeravanje podataka izmeu submrea se naziva routing.
Opis moguih ruta u nekoj mrei odreen je tzv. routing-tablicama na gateway-raunalima.
Gateway raunala imaju i zadatak pronai alternativne rute za prijenos podataka u
sluaju da neka ruta ne funkcionira zbog zaepljenja, oteenja itd.
Postoje tvz. - test paketi koji se alju izmeu gateways raunala za kontrolu funkcije i
uspostavljanja optimalne raspodjele optereenosti za slanje podataka.
Kada aljemo ili dobivamo podatke npr. iz Amerike to ne znai da svi podaci stiu
istom linijom. ak i pojedini paketi iste poiljke mogu ii razliitim smjerovima. Tako moete
jedan dio podataka dobiti preko Atlantika, a drugi dio moe stii preko Pacifika, prije nego
ih va browser prikae, a da niti vi niti va browser o tome nemate nikakav uvid.




POU Proanima 2012, Vodnikova 15, Zagreb 7

HTML / CSS Skripta
2012
2. Internet usluge
2.1. E-mail

E-Mail (elektronika pota) je najee koritena internet usluga. Sve vie istiskuje
obinu potu iz upotrebe, a nije poteen niti fax. Prednosti su oite:
- stiu do primatelja u roku nekoliko minuta po cijeni lokalnih impulsa bez obzira
koliko je udaljen primatelj,
- mogue je slati tekst, sliku, videozapis, audio zapis,
- mogue je slati podatke istovremeno na vie adresa itd. putem mailing listi itd.

Nedostatak e-maila je to ne postoji dovoljna doza privatnosti (naime e-mail je
mogue presresti i proitati) kao i ogroman broj neeljenih (spam) poruka.
2.2. Telnet

Telnet se koristi za rad na udaljenom raunalu, prije svega na Unix sistemima. Svaki
korisnik ima vlastiti login za prijavu korisnika na neko raunalo prikljueno na Internet.
Prijava je mogua samo ako korisnik zna korisniko ime i ifru. Nakon prijave pojavljuje se
Unix-Shell i moemo raditi sistemske naredbe na nekom udaljenom raunalu, pokretati
programe itd.
PC korisnici koji ne administriraju server raunala skoro pa nee dolaziti u kontakt s
telnetom, iako u MS Windowsima i Macintosh raunalima postoje Telnet-Clients koji
omoguuju rad na nekom hostu. Bez poznavanja sistemskih naredbi i operativnog sistema
ovakav program nema neku svrhu.
2.3. FTP

FTP (File Transfer Protocol) je internet servis koji slui za podizanje (upload) ili
skidanje (download) nekog sadraja sa nekog serverskog raunala. Nadalje sadraj je
prikazan u preglednom obliku (slino kao Windows explorer) te je podatke mogue brisati,
preimenovati itd. Razlikujemo dvije vrste prijave, logiranja na FTP: "normalna" i anonimna.
Kod normalne prijave potrebno nam je korisniko ime i ifra koji smo dobilo od
administratora servera i imamo ovlasti koje nam je on postavio. Kod anonimnog prijavka
radi se o javnim serverima za koje nije potrebna posebna dozvola nego pod korisniko ime
unosimo "anonymous", a pod ifru e-mail adresu. Postoje FTP serveri sa otvorenim
pristupom koji nude velike zbirke programa, slika, podataka itd za download.
Za otvorene, anonimne FTP servere vrijede pravila ponaanja. Kako se na njih
prijavljujete kao gost ne trebate se zadravati vie nego je potrebno, ne uitavati nepotrebno
mnogo sadraja, obavezno proitati readme file koji se nalazi u skoro svakom direktoriju.


POU Proanima 2012, Vodnikova 15, Zagreb 8

HTML / CSS Skripta
2012
Posjet otvorenim FTP-serverima moemo napraviti Internet preglednicima. Pri tome
podatke vidimo u obliku hyperteksta. Ako mnogo radite sa FTP-om potreban vam je neki od
FTP programa, a mnogo njih moete nabaviti i besplatno kao freeware. Danas vrlo popularni
programi su Core FTP, Filezilla ili SSH secure schell. Kada ste napravili Vau web stranicu,
potrebno je zakupiti web prostor (eng. web hosting) za smjetaj Vae internet stranice.
Savjetujemo vam da pretraite po internetu kako biste po vlastitom odabiru i mogunostima
zakupili optimalan web hosting paket. Neki od poznatih pruaa takvih usluga u hrvatskoj
su firme Croadria, Pondi, Plus, itd


Pomou jednog od spomenutih programa moete se spojiti na Va server na kojem
ste zakupili prostor. Kako je ilustrirano na slici, dovoljno je pokrenuti program, napisati
naziv servera (host), Vae korisniko ime i ifru te se spojite na server. Sve ostalo jednako je
radu kao u windows exploreru. Vano je pri tom naglasiti da se cijela web stranica treba
nalaziti u direktoriju public_html (osim ako nije drugaije navedeno od strane servera) i
poetna web stranica treba se zvati index.html.





POU Proanima 2012, Vodnikova 15, Zagreb 9

HTML / CSS Skripta
2012
3. Nastanak world wide weba
3.1. Inicijativa stvaranja svjetske mree

Tim Berners-Lee, britanski informatiar sa CERN instituta sa nekoliko
svojih kolega pokrenuo je inicijativu za koritenje interneta u razmjeni
informacija na nain da cijeli dokumenti budu vidljivi te uz mogunost
prikazivanja slika i jednostavne navigacije (- skakanja s dokumenta na
dokument) potom posebno oznaenih dijelova teksta koji bi imali vezu - link.
Odluujue je bilo ovo posljednje, uvoenje hiperveza - hyperlinks u
dokument.
Stup cijelog projekta postaju novi format podataka: HTML (Hypertext Markup Language) i
novi protokol koji omoguuje njegovo prenoenje: Internet Protokol HTTP (Hypertext
Transfer Protocol). Novi softver za krajnjeg korisnika bi trebao omoguiti izvravanje ovih
hiperveza i prikazivanje podataka sa bilo kojeg raunala irom svijeta (World Wide).
Mnoga internet raunala su konfigurirana kako bi podravala novi protokol, a znanstvenici
su - zagrizi u ostvarenju ove ideje.
Tim Berners-Lee http://www.w3.org/People/Berners-Lee

3.2. Prvi preglednik


Posebno aktivan u programiranju bio je Marc Andreessen koji je razvio
prvi internet preglednik sa grafikim sueljem, browser pod imenom Mosaic.
Kasnije, Marc Andreessen izaao je iz Mosaic-Projekta i postao suosniva nove
firme: Netscape.
U drugoj polovici 1993. utjecajni svjetski dnevnici poput New York Times-a pisali
su o groznici internet zajednice. Broj radoznalih je brzo rastao, kao i broj servera na kojima je
bio instaliran software za HTTP. Tisue ljudi je poelo uiti HTML i pisati svoje vlastite
stranice.
Velike tvrtke poput Microsofta i velikih telekomunikacijskih kompanija u svijetu ispoetka
nisu obraali panju na razvoj interneta, meutim kad su promijenili kurs i - ukljuili se u
igru internet doivljava strahovit uspon.
Broj tehnologija i softverskih rjeenja preplavljuje trite te nastaje potreba za
standardiziranjem HTML i drugih jezika. Na kraju krajeva ipak je bitna informacija koju
emo dobiti a ne kua koja proizvodi softver. Sreom ovaj pritisak na softversku industriju
donosi i svoje rezultate.

Marc Andreessen http://en.wikipedia.org/wiki/Marc_Andreessen



POU Proanima 2012, Vodnikova 15, Zagreb 10

HTML / CSS Skripta
2012
4. Uvod u WEB Dizajn
4.1. Karakteristike web dizajna
Vizualno atraktivna web stranica privlai posjetitelje, a taj vizualni element je zasigurno prvo
iskustvo i stvar koje e posjetitelji primjetiti kada posjete vau web stranicu. Ukoliko je
stranica lijepo, skladno i funkcionalno oblikovana posjetitelj e se osjeati ugodno i nastavit
e istraivanje i koritenje web stranice. Isto tako, ukoliko stranica nije ostavila pozitivan prvi
dojam, posjetitelj e otii na neku drugu stranicu i tamo traiti eljene informacije.

to je web dizajn?
Web dizajn je proces izrade i razvoja web sjedita (web site) koji ukljuuje osmiljavanje,
koncept, izradu i odravanje istog. Web dizajn treba utjeloviti, prenositi i promovirati
ukupne ciljeve web sjedita kao i naglaavati funkcionalnost istog.

Funkcije dobrog web dizajna:
1. dizajn web stranice (web page) treba biti privlaan i atraktivan istodobno omoguavajui
korisnicima percepciju odnosno koritenje sadraja. Dizajn treba biti spona izmeu
korisnika i informacija na stranici.
2. omoguiti korisnicima prepoznavanje svake stranice kao dio jedne cjeline (web sjedita)
3. omoguiti korisnicima jednostavno i intuitivno koritenje navigacije web stranice
4. konano, web dizajn treba maksimalno iskoristiti naela i principe web upotrebljivosti i
vizualnog dizajna
Osnovni principi/naela dobrog web dizajna
1. poravnanje elemenata na stranici (alignment) grid
odnosi se na poravnavanje gornjih, donjih, bonih ili centralnih dijelova svih grafikih
i/ili tekstualnih elemenata na stranici; poravnavanje lijevih rubova elemenata npr.
naslova, podnaslova i tekstova na stranici doprinosi boljoj percepciji povezanosti
elemenata i preglednijoj i itljivijoj vizualnoj strukturi stranice
2. ravnotea elemenata (balance) simetrian i asimetrian
svaki element na stranici ima svoju teinu, npr. veliina naslova, intenzitet boje slova
ili pozicija grafikih objekata na stranici moe stvoriti odreenu ravnoteu
3. jedinstvenost elemenata (unity)
razliiti elementi kompozicije su u meusobnoj interakciji
4. kontrast (contrast)
je nizanje ili postavljanje razliitih grafikih ili tekstualnih elemenata koji se koristi za
naglaavanje stvari na web stranici; npr. serifni fontovi kao to su - Times New Roman
ili Garamound za naslove i sans-serifni fontovi Arial ili Verdana za sadraje
5. konzistentnost elemenata (consistency)
omoguava percepciju pripadnosti elemenata web stranici i vizualne stabilnosti i
identiteta cijelog web sjedita; npr. navigacija (menu) se uvijek treba nalaziti na istom
mjestu na svakoj web stranici (npr. pri vrhu stranice ili u lijevom stupcu)





POU Proanima 2012, Vodnikova 15, Zagreb 11

HTML / CSS Skripta
2012
4.2. Osnovni elementi web stranice
Web stranica je elektroniki sinonim ili ekvivalent klasinom papiru, a obino sadri slijedee
elemente:
1. kontejner (container)
- zamislimo ga kao okvir za sliku koji dri sadraj te slike odnosno samu ilustraciju ili
fotografiju; znai kontejner slui za uokviravanje sadraja stranice i svih ostalih
grafikih ili multimedijalnih elemenata. irina kontejnera moe biti fiksna stranica je
uvijek iste irine bez obzira na rezoluciju ili veliinu monitora ili tekua (prilagodljiva) -
stranica se automatski iri ovisno o irini prozora web preglednika
2. logo
- glavni razlikovni znak tvrtke odnosno njezin osnovni identifikacijski element; logo se
treba nalaziti uvijek pri samom vrhu stranice i uvijek na istoj poziciji jer na taj nain
pokazuje posjetiteljima da su stranice koje posjeuju dio jednog web sjedita
3. navigacija
- zasigurno jedan od najvanijih elemenata web stranice koji omoguava korisnicima
kretanje stranicom i pronalaenje sadraja; navigacija treba biti konzistentno prikazana,
jednostavna, intuitivna i prikladno nazvana; navigacija se obino nalazi pri samom vrhu
stranice ili u lijevom odnosno desnom stupcu iste
4. sadraj
- Content is king! - osnova, svrha i smisao postojanja web stranice; ako se ne moe
pronai odreeni sadraj ili je sadraj nedovoljno interesantan ili relevantan posjetitelj
u trenu odlazi na neku drugu web stranicu; sadraj treba biti jasno i kvalitetno
prezentiran
5. footer
- donji dio stranice koji sadri obino dodatne i manje vane sadraje i/ili linkove, npr.
Informacije o privatnosti, odricanju od odgovornosti, uvjetima koritenja stranice, izjavi
o zatiti podataka, linkove na glavne cjeline stranice i sl.





















POU Proanima 2012, Vodnikova 15, Zagreb 12

HTML / CSS Skripta
2012
4.3. Tipovi razliitih izgledaweb stranica (layouts)

1. navigacija u lijevom stupcu desno sadraji (left-column navigation)
najpoznatiji i najraireniji tip izgleda navigacije - standard
2. navigacija u desnom stupcu lijevo sadraji (right-column navigation)
neuobiajena verzija koja ima svoje praktine razloge primjene
3. trostupana navigacija (three-column navigation)
koristi se kod web shop-ova ili stranica sa mnogo sadraja ili mnogo navigacija

Tipovi osnovnih irina web stranica
1. fiksna irina izraena u px (fixed width)
2. tekua ili prilagodljiva irina izraena u % (liquid width)
Osnovne razlike ova dva tipa izgleda irine web stranice su:
1. fiksna irina
a. potpuna kontrola pozicioniranja web elemenata na stranici u odreenim okvirima
b. mogunost odabira ciljanih rezolucija
2. tekua ili prilagodljiva irina
a. automatsko prilagoavanje svim rezolucijama monitora
b. smanjuje se potreba za skrolanjem
Odabir irine izgleda web stranice ovisi o specifinostima svakog web projekta odnosno o
ciljanoj publici, faktorima i ciljevima pristupanosti, upotrebljivosti i jednostavnosti
koritenja.

4.4. Uspjena web stranica

to je zapravo uspjena web stranica?
Kako ovaj pojam moemo definirati? Zato koristimo ovaj pojam? Mnogi smatraju da je
uspjena web stranica ona stranica koja ostvaruje veliku posjeenost ili ona koja je vizualno
atraktivna i obiluje interaktivnim i multimedijalnim animacijama ili pak ona koja ima samo
mnogo sadraja. Istina je negdje u sredini. Istina je zapravo sadrana u rijeima -
multidisciplinarnost, percepcija i svrha. Uspjenu web stranicu determiniraju svi ovi
navedeni elementi i to u njihovom zajednikom ispreplitanju i interakciji.

Da bi bila uspjena, web stranica treba sadravati ove elemente:
1. dizajn
atraktivan i privlaan vizualni dizajn
2. sadraj
relevantan i koristan sadraj za (ciljane) posjetitelje
3. upotrebljivost
jednostavna, pristupana i upotrebljiva stranica
4. optimizirana za trailice
web stranica prilagoena to boljoj poziciji na trailicama (SEO)


POU Proanima 2012, Vodnikova 15, Zagreb 13

HTML / CSS Skripta
2012
Meutim, uspjena web stranica je pojam koji se drugaije percipira kod razliitih tipova
korisnika:
1. vlasnik stranice smatra da je njegova stranica uspjena ako ostvaruje odreenu utedu
ili poveava prodaju proizvoda putem weba;
2. marketing odjel smatra da je stranica uspjena ako se kontinuirano poveava broj
posjetitelja;
3. posjetitelji smatraju da je stranica uspjena kada pronau odreenu informaciju;
4. web odjel smatra da je stranica uspjena kada naprave vrhunsku stranicu prema
aktualnim web standardima koristei najnaprednije tehnike i alate i jo k tome osvoje
neku od prestinih nagrada za web (npr. VIDI web awards)...
Svatko od njih ima razliiti cilj stoga se i pojam uspjena web stranica razliito
interpretira.









POU Proanima 2012, Vodnikova 15, Zagreb 14

HTML / CSS Skripta
2012
5. Osnove HTML-a

5.1. to je HTML?
HTML je skraenica za HyperText Markup Language. HTML je skriptni jezik za
stvaranje web stranica.
U HTML-u, koristimo tag-ove, naredbe, kljune rijei opasane uglatim zagradama.
Tagovi dolaze u parovima prvi aktivira naredbu, a drugi ju deaktivira. Razlikuje ih kosa
crta na poetku druge naredbe, npr. <html> i </html>.
Vjerojatno ve imate na svom raunalu software potreban za izradu i testiranje HTML
stranica: Notepad (Start > Programs > Accessories >Notepad) i internet preglednik
poput Internet Explorera, Mozille, Opere ili Chrome-a. To je sve to Vam je potrebno za
napraviti Internet stranicu. Ako niste ljubitelj Notepada, preporuamo Vam sljedee
alate/editore s kojima moete pisati web stranice: ConText, Notepad ++ i RapidCSS. HTML
stranice imaju extenziju .html ili .htm.
Postoji nekoliko paketa dizajniranih za kreiranje HTML dokumenata i oni se zovu
WYSIWYG-editori (skraenica od What You See Is What You Get), zbog toga to moete
drag and drop / click and place HTML elemente u dokument a editor e sam automatski
napisati HTML kod. Postoji nekoliko WYSIWYG editora, npr. MS FrontPage, Namo
WebEditor, HoTMetal, HotDog, itd, ali za poetnika je najbolje poeti pisati HTML u
Notepad++ radi razumijevanja funkcioniranja HTML-a. Kasnije ete vidjeti kako se
najkvalitetnije web stranice rade kombinacijom WYSIWYG editora i tekstualnih editora.
Trenutano najbolji WYSIWYG editor je Adobe Dreamweaver CS5.5 (v11.5).
Kako bi bili sigurni da Vam HTML kod radi, pokuajte sve naredbe pisati jednako
(malim slovima). Kasnije emo se pozabaviti mnogim ATRIBUTIMA naredbi to su
specijalne opcije ponekad potrebne za svaku naredbu.









POU Proanima 2012, Vodnikova 15, Zagreb 15

HTML / CSS Skripta
2012
5.2. Asociranje .html ekstenzije s browserom
Veina korisnika posjeduje jedan ili vie pretraivaa na raunalu: Internet Explorer,
Mozillu, Operu ili Chrome.
Iako je Internet Explorer zastupljeniji od ostalih pretraivaa ne znai da je i bolji.
Naime u zadnje vrijeme trini udio u Internet preglednicima sve vie zauzimaju popularni
Mozilla Firefox i Google Chrome (glavne su im znaajke znatno via sigurnost nego IE, bre
otvaranje dokumenata, bolja standardizacija prikaza web stranica, stabilnost) kojim se po
zadnjim anketama koristi oko 50% svjetskih korisnika interneta. Stoga je potrebno testirati
web stranice na svim pretraivaima, jer naalost postoji nekonzistentnost, nekompatibilnost
meu njima.
Kako bi spremljeni dokument kasnije mogli testirati kao web stranicu potrebno je,
nakon zavretka pisanja HTML koda u tekst editoru, spremiti dokument kao
ime_dokumenta.html. Nakon to je dokument spremljen kao web stranica dovoljno je
kliknuti miem na njega i otvorit e se web stranica u defaultnom pretraivau. Kako biste
provjerili izgleda li vaa web stranica istovjetno i u drugim pretraivaima potrebno je u
meniju file opcijom open nai eljeni dokument i otvoriti ga.















POU Proanima 2012, Vodnikova 15, Zagreb 16

HTML / CSS Skripta
2012
6. Prva HTML stranica
Prije nego to ponemo preporuamo stvaranje jednog novog foldera pod nazivom
prezime_ime polaznika, i u njega pohranjujete sve Vae uratke.
Otvorite text editor i napiite sljedei kod:

<!DOCTYPE html>
<html>
<head>
<title>prva_stranica</title>
</head>
<body>
Hello World!
</body>
</html>


Sauvajte dokument u HTML folderu kao primjer_1.html
Sad otvorite svoj HTML dokument tako da dvaput kliknete miem na njega i stranica e se
otvoriti u vaem defaultnom pretraivau.
SAVJET:
Da bi vidjeli izvorni HTML kod bilo koje stranice, ili kliknite desnom tipkom mia
negdje unutar web stranice (ne na sliku) i odaberite view source, ili odaberite source koji se
nalazi u meniju view (pri otvorenoj web stranici). Kada napravite promjene na web stranici i
spremite ih, dovoljno je u web pregledniku pritisnuti tipku F5 (refresh) koja e aurirati
uinjene promjene.
Tagove pisati malim slovim, iz razloga to neki atributi funkcioniraju samo u sluaju
kad u napisani malim slovima. Uz pisanje malim slovima koristimo i tzv. programersku
piramidu.
primjer programerske piramide

<1>
<2>
<3> </3>
</2>
</1>

Kod programerske piramide podelementi su pomaknuti (uvueno) u desno, a
njihovi podelemenit takoer se miu(uvlae) desno. Koristimo ovaj nain pisanja koda zbog
lake kontrole i preglednosti.

POU Proanima 2012, Vodnikova 15, Zagreb 17

HTML / CSS Skripta
2012
6.1. Struktura HTML dokumenta
<!DOCTYPE>
<!DOCTYPE> govori pregledniku o kojem tipu dokumenta se radi.
<!DOCTYPE> deklaracija mora biti prva deklaracija u vaem HTML5 dokumentu, prije
<html> taga.
HTML 5 za razliku od HTML 4.01 nije baziran na SGML-u pa njegov <!DOCTYPE> ne
zahtjeva DTD reference.
Za HTML 5 dokumente:
<!DOCTYPE html>

<HEAD>
Sadraj unutar <HEAD> elementa vrlo je vaan jer opisuje sadraj dokumenta. Taj se
sadraj zove meta-informacije. On se ne vidi u pretraivau nego ga koriste search roboti za
indeksiranje web stranica. Osim meta-informacija <HEAD> element sadri ime autora, razne
skripte, komentare, ikone web stranice (naredba: <link rel=shortcut icon
href=ikona.ico>) i najvanije od svih naziv stranice, <TITLE>.
<TITLE>
Najvaniji element <HEAD> elementa je <TITLE> element, kojeg pretraivai prikazuju na
vrhu prozora. <HTML> element daje dokumentu ime koje prepoznaju roboti i pretraivai.
Unutar ovog elementa nije dozvoljeno markiranje teksta, kao ni koritenje znakova , / : - ; jer
operacijski sistem moe imati problema s takvim nazivima. Takoer u ime naziva
dokumenta ne stavljajte nikakve znakove ili prazna mjesta. Pokuajte tvoriti ime koritenjem
slova i brojki i koristite podcrtu, underscore _ ako elite alternativu za prazno mjesto. Piite
nazive malim slovima. Ako ih piete velikim slovima postoji opasnost da pretraiva ne
prepozna traenu stranicu.
Konano, vaa bi se stranica trebala u veini sluajeva zvati "index.html", "index.htm",
"default.htm" ili u sluaju ASP-a (ACTIVE SERVER PAGES), "default.asp".
<BODY>
Kao to samo ime kae, glavnina web stranice nalazi se unutar <BODY> .. </BODY>
elementa. BODY tag sadri nekoliko atributa koji se mogu definirati i oni utjeu na izbor boje
pozadine, veliinu margina itd. Uobiajeno je da se atributi stavljaju unutar znakova
navodnika: ATRIBUT="VRIJEDNOST". Sve atribute piemo u jednom redu u tekst editoru.
Atribute HTML naredbi, openito, piemo u sljedeem obliku:
<NAREDBA ATRIBUT1="vrijednost" ATRIBUT2="vrijednost" ATRIBUT3="vrijednost"
ATRIBUT4="vrijednost" itd...>

POU Proanima 2012, Vodnikova 15, Zagreb 18

HTML / CSS Skripta
2012
Element (tablice, slike, tekst, slojevi, itd...) na koji se naredba odnosi (npr. naredba za
oblikovanje teksta).
</NAREDBA>
Za razliku od HTML 4.01 u kojem <BODY> ima attribute u HTML 5 su potpuno izbaeni te
su ostali podrani samo globalni i event atributi (o ovim atributima moete vie proitati na
online knjinjici http://www.w3schools.com )
6.2. Prazni Prostor (Whitespace)
Space i blank space spadaju u WHITESPACE kategoriju tzv. dijelove bez teksta.
U primjeru prazan prostor izmeu rijeju "Hello" i "World" interpretiran je po
pretraivau kao jedno prazno mjesto, znai pravilo bi bilo da browser dva i vie praznih
mjesta pretpostavlja i prikazuje kao jedno prazno mjesto.
Jedina upotreba praznog mjesta u HTML-u je za uvlaenje i preglednost teksta, ime
se postie bolja preglednost i snalaljivost u izvornom kodu. Ako se vi kao dizajner web
stranica ne moete snai u vlastitom kodu to nije ba pohvalno. Stoga imajte na umu i ovu
mogunost.
Nedostatak toga je da izvorni kod postaje neitak, kao u primjeru:

<!DOCTYPE html>
<html><head>
<title>igranje s tekstom</title>
</head><body>
Hello World!
</body></html>

iako ga pretraiva ispravno prikazuje.
6.3. Komentar u HTML-u
Komentari su korisni ako elimo unutar HTML koda staviti neku naznaku i ako
elimo sprijeiti dio HTML-a od pojavljivanja u web pretraivau.
Komentar se jednostavno umee izmeu poetne naredbe komentara <!-- te zavrne -->
(<!minusminus KOMENTAR minusminus>):
<!-- KOMENTAR U HTMLu -- >
Ugnijeeni komentari nisu dozvoljeni jer mogu stvoriti probleme pri ispravnom
prikazivanju web stranica:
<!-- <!-- ovo nije dozvoljeno -->-->

POU Proanima 2012, Vodnikova 15, Zagreb 19

HTML / CSS Skripta
2012
7. Osnove CSS-a

CSS je kratica za Cascading Style Sheets. CSS je jezik za oblikovanje stila koji odreuje
izgled HTML dokumenta. Npr. CSS moe odreivati vrstu slova, boje, margine, crte, visinu,
irinu, pozadinsku sliku, napredno pozicioniranje i tota drugo.
HTML takoer moe biti koriten za odreivanje izgleda web stranice. No CSS nudi vie
mogunosti, toniji je i profinjeniji. CSS podravaju svi dananji preglednici.
HTML koristimo za odreivanje strukture sadraja. CSS koristimo za oblikovanje strukture
sadraja. Odvajanje stila izgleda web stranice od sadraja dokumenta, uinio je odravanje
mnogo lakim.
7.1. Kako izgleda CSS dokument?
Ako ste mislili da je CSS dokument napisan u nekom tekom programskom jeziku ili je
jednostavno nacrtan u nekom grafikom programu (?!) jako se varate!!! CSS dokument je
najobiniji tekstualni dokument koji sadri instrukcije/naredbe za web preglednike, a koje
definiraju stilove za odreene HTML elemente na web stranici. CSS dokument izgleda
ovako:
body {
margin:0px;
font-family:"Trebuchet MS";
font-size:12px;
}
a {
text-decoration:none;
background-color:#f00;
color:#fff;
}
h1{
margin:0px;
font-weight:bold;
font-size:20px;
}
p {
color:#666666;
font-size:11px;
}
1. Selektor body govori web pregledniku
slijedee:
- sve margine na stranici trebaju biti 0px
- pismo treba biti napisano u Trebuchet
MS fontu
- veliina pisma treba biti 12px

2. Selektor a govori web pregledniku
slijedee:
- linkovi ne smiju biti podcrtani
(nemaju underline)
- boja pozadine linka treba biti crvena
- boja teksta linka treba biti bijela

3. Selektor h1 govori web pregledniku
slijedee:
- sve margine oko h1 elementa trebaju
biti 0px
- debljina slova treba biti podebljana
- veliina pisma treba biti 20px

4. Selektor p govori web pregledniku
slijedee:
- boja teksta cijelog odlomka treba biti
siva
- veliina pisma treba biti 11px


POU Proanima 2012, Vodnikova 15, Zagreb 20

HTML / CSS Skripta
2012
7.2. Anatomija CSS elementa
Kao to sam ve rekao, CSS dokumenti su tekstualni dokumenti koji sadre instrukcije
odnosno naredbe koje govore web pregledniku kako treba stilski oblikovati (formatirati) i
prikazati odreene HTML elemente. CSS element se sastoji od:
1. deklaracijski blok
- kod koji dolazi iza selektora ukljuuje sve mogunosti oblikovanja koje se primjenjuju
na selektor; blok poinje sa otvorenom vitiastom zagradom ({) i zavrava sa
zatvorenom vitiastom zagradom (})

2. deklaracija
- izmeu otvorene i zatvorene vitiaste zagrade deklaracijskog bloka dolazi jedna ili vie
deklaracija ili instrukcija za oblikovanje. Svaka deklaracija ima dva dijela: atribut i
vrijednost, te zavrava znakom toka-zarez (;)

3. selektor
- govori web pregledniku koji element na web stranici teba oblikovati (npr, naslov,
odlomak, link, slika, tablica, forma i sl...)

4. atribut
- CSS nudi mnogo razliitih mogunosti oblikovanja koje se zovu atributi. Atributi
definiraju odreeni stilski efekt.

5. vrijednost atributa
- definira kako e se oblikovati odreeni atribut; razliiti atributi zahtjevaju razliite
tipove vrijednosti, npr.: mjerne duljine > 12px, 2em ili 1in; boja > black ili #000000; URL
> slike/slika-1.jpg) ili specifina kljuna rije > top, center, left)













POU Proanima 2012, Vodnikova 15, Zagreb 21

HTML / CSS Skripta
2012
7.3. Selektori, atributi i vrijednosti

Selektor govori web pregledniku koji HTML element na web stranici teba oblikovati (npr,
naslov, odlomak, link, slika, tablica, forma i sl...). Svaki selektor moe imati vie atributa, a
svaki atribut unutar selektora moe imati nezavisne vrijednosti. Atribut i njegova vrijednost
su odvojeni dvotokom (:) i nalaze se unutar vitiaste zagrade. Iza vrijednosti dolazi toka-
zarez (;). Ako postoji vie atributa u deklaraciji isti su odvojeni znakom toka-zarez (;). Ako
se vrijednost sastoji od vie rijei sve se treba staviti pod navodne znakove.

U ovom primjeru selektor je p, a u CSS dokumentu to se pie ovako:

p {
font-weight:bold;
font-size:12px;
font-family: "Trebuchet MS", Verdana, Arial, serif;
}

U HTML kodu izgleda ovako:
<p>
Neki tekst napisan unutar paragrafa koji ima odreeni stil.
</p>

U web pregledniku to izgleda ovako napisano:
Neki tekst napisan unutar paragrafa koji ima odreeni stil.

Ovaj stil znai da e svi odlomci biti podebljani u veliini pisma 12px i da e biti napisani u
pismu Trebuchet MS, Verdana ili Arial (ovisno o tome koje je pismo instalirano na
korisnikovom raunalu). Vjerojatno ste do sada primjetili da svaki atribut stila piem u
novom redu gdje je svaki red uvuen...Zato to radim? Iskljuivo radi bolje preglednosti i
itljivosti stilova! Meutim, stilove je mogue pisati i u jednom redu, ako to elite. Na taj
nain, gornji stil moete napisati i ovako:
p {font-weight:bold;font-size:12px;font-family:"Trebuchet MS",Verdana, Arial, serif;}

Grupiranje selektora
Selektore je mogue grupirati. Npr. ako elimo svim paragrafima (p), linkovima (a) i
naslovima (h1) pridodati iste atribute to emo napraviti na slijedei nain:
p, a, h1 {
color: #FF0000;
font-family: "Trebuchet MS", Verdana, Arial, serif;
}

U ovom primjeru smo tri selektora odvojili zarezom i pridodali im iste atribute boju i
pismo. Na ovaj nain moemo povezati mnogo selektora ime smanjujemo potrebu za
pisanjem vie stilova za svaki element posebno.

POU Proanima 2012, Vodnikova 15, Zagreb 22

HTML / CSS Skripta
2012
7.3.1. Vrste selektora

Postoji vie vrsta selektora:

1. selektor elementa (element type selector)
- p, h1, div, em, a, img...
- primjer: p {font-size:12px} > selektor p odreuje stil za sve odlomke

2. univerzalni selektor (universal selector)
- * (zvjezdica)
- primjer: * {font-size:12px} > selektor * odreuje stil za bilo koji odnosno sve elemente

3. selektor klase (class selector)
- .prvi
- primjer: .prvi {font-size:12px} > selektor .prvi odreuje stil za sve elemente koji imaju
vrijednost atributa .prvi;na web stranici moe biti neogranien broj elemenata koji imaju
definiranu ovu vrijednost atributa

4. selektor ID-a (ID selector)
- #navigacija
- primjer: #navigacija {font-size:12px} > selektor #prvi odreuje stil za element koji ima
specifinu vrijednost atributa #prvi, a s obzirom da ID atributi moraju imati jedinstvene
vrijednosti, ID selektor ne moe odreivati vie od jednog elementa na web stranici

5. selektor potomka (descendant selector)
- ul li
- primjer: ul li {font-size:12px} > selektor ul li odreuje stil za sve HTML elemente koji su
potomci ili djeca (descendant) ul elementa koji je njihov predak ili roditelj (ancestor)

6. selektor djece (child selector)
- ul>li
- primjer: ul>li {font-size:12px} > selektor ul>li odreuje stil za sve li elemente koji su
najblii potomci ili djeca (descendant) ul elementa koji je njihov predak ili roditelj
(ancestor)

7. najblii susjedni selektor (adjacent sibling selector)
- h1+p
- primjer: h1+p {font-size:12px} > selektor h1+p odreuje stil za sve p elemente koji su
najblii susjedni potomci ili djeca (descendant) h1 elementa koji je njihov predak ili
roditelj (ancestor)

8. pseudo-klase (pseudo class)
- :link, :visited, :active, :hover, :focus
- primjer: a:visited {color:#ff0000;} > selektor a:visited odreuje stil za sve posjeene
linkove na web stranici; pseudo klase definiraju stanja linkova: neposjeeni link (link),
posjeeni link (visited), trenutno odabrani link (active) i link preko kojeg se prelazi
kursorom mia (hover)



POU Proanima 2012, Vodnikova 15, Zagreb 23

HTML / CSS Skripta
2012

9. pseudo-elementi
- :first-letter, :first-line, :before, :after
- primjer: p:first-letter {color:#ff0000;} > selektor p:first-letter odreuje stil za prvo slovo u
reenici

7.4. Komentari u CSS-u
Komentari su korisni ako elimo unutar CSS koda staviti neku naznaku i ako elimo
sprijeiti dio CSS-a da se primjenjuje unutar HTML-a.
Komentar se jednostavno umee izmeu poetne naredbe komentara /* te zavrne */
/* KOMENTAR CSS.u */
Ugnijeeni komentari nisu dozvoljeni jer mogu stvoriti probleme pri ispravnom
prikazivanju web stranica:
/* /* ovo nije dozvoljeno */ */















POU Proanima 2012, Vodnikova 15, Zagreb 24

HTML / CSS Skripta
2012
8. HTML & CSS

HTML dokument koji u sebi nema definirane stilove nee vizualno oblikovati elemente na
stranici. Meutim, ako ga poveemo sa CSS dokumentom, HTML elementi e biti vizualno
oblikovani odnosno stilizirani. Stilska lista moe biti povezana sa HTML dokumentom na tri
naina ovisno o njenoj lokaciji:

1. interno
- CSS stilovi su definirani unutar <style>...</style> elementa i nalaze se na samoj web
stranici unutar <head>...</head> elementa. Ovi stilovi se iskljuivo odnose na elemente
na samoj web stranici

2. interno inline
CSS stilovi su definirani unutar bilo kojeg TAG-a i nalaze se na samoj web stranici . Ovi
stilovi se iskljuivo odnose na TAG u kojem su pisani
<div style=width:150px; height:140px;background:#f00;> </div>
3. eksterno
- CSS stilovi se nalaze u odvojenom CSS dokumentu koji je sa HTML dokumentom
povezan putem <link> elementa koji se nalazi unutar <head> elementa
<link rel=stylesheet type=text/css href=putanja_do_css_datoteke />

Mi emo se u radu koncentrirati na eksterni CSS.
Osnovna HTML & CSS sintaksa i povezivanje
index.html

<!DOCTYPE html>
<html>
<head>
<title>prva_stranica</title>
<link rel=stylesheet type=text/css href=stil.css>
</head>
<body>
Hello World!
</body>
</html>

stil.css
body {
background-color:#f00;
}

Koristei LINK tag povezali smo eksternu css datoteku sa html datoteku te putem css
definirali pozadinsku boju tijela stranice, u ovom sluaju #f00 crvena.

POU Proanima 2012, Vodnikova 15, Zagreb 25

HTML / CSS Skripta
2012
9. Boje

Boje su sigurno jedan od najvanijih elemenata web dizajna. Dobar odabir boja e privui posjetitelje
naih web stranica i izazvati ciljane emocije, a loe kombinacije boja mogu otjerati posjetitelje bez
obzira na zanimljivost sadraja koje elimo ponuditi.
Pomou CSS-a moemo kontrolirati boje pozadine, linija i teksta na naim web stranicama. Boje se u
CSS-u mogu deklarirati pomou est razliitih metoda. Karakteristikama boje u CSS deklaraciji
moemo pridruiti heksadecimalnu, RGB, RGBA, HSL ili HSLA vrijednost ili pak jedan od unaprijed
definiranih naziva boja.
Boje se na zaslonu naeg raunala dobivaju mijeanjem tri osnovne boje: crvene (red), zelene (green)
i plave (blue). Svaka od te tri boje moe imati 255 nijansi. Kombinacijom 255 nijansi crvene, zelene i
plave dobivamo preko 16 milijuna boja. Ako sve tri osnovne boje imaju vrijednost 0, dobivamo crnu
boju. Druga krajnost je kad sve tri osnovne boje poprime vrijednost 255. Tada dobivamo bijelu boju.
9.1. Heksadecimalne boje

Heksadecimalni brojevi su brojevi sa bazom 16, za razliku od dekadskih koje obino koristimo i koji
imaju bazu 10. Dvoznamenkasti heksadecimalni brojevi mogu poprimiti vrijednosti od 00 (0 u
dekadskom sustavu) do FF (255 u dekadskom sustavu). Heksadecimalne boje imaju znak ljestve #,
nakon kojeg dolazi 6 ili 3 heksadecimalnih znamenki.
Prve dvije znamenke se odnose na vrijednost crvene boje, druge dvije na vrijednost zelene, a zadnje
dvije na vrijednost plave boje. Shematski bi to mogli napisati #RRGGBB, a u CSS kodu bi to izgledalo
ovako:
p {
background-color:#00FF00;
}

U naem primjeru heksadecimalne vrijednosti crvene i plave boje imaju vrijednost 0, a zelene
maksimalnu vrijednost FF ili u dekadskom sustavu 255. Pozadina tekstualnog odlomka bi u naem
primjeru izgledala na web pregledniku ovako
Ovo je primjer boje pozadine heksadecimalne vrijednosti #00FF00.
9.2. RGB boje

RGB vrijednosti boja imaju drugaiji format pisanja vrijednosti boja u odnosu na heksadecimalni, ali je
princip u stvari isti. Format RGB boje izgleda ovako: rgb(vrijednost crvene boje, vrijednost zelene
boje, vrijednost plave boje). Vrijednosti boja variraju od 0 do 255 u dekadskom sustavu ili od 0% do
100%. Primjer plavog teksta bi bio kodiran ovako:
p {
color:rgb(0,0,255);
}
Tekstualni odlomak iz primjera bi web preglednici prikazali ovako:
Ovo je primjer boje teksta vrijednosti rgb(0,0,255).

POU Proanima 2012, Vodnikova 15, Zagreb 26

HTML / CSS Skripta
2012
9.3. RGBA boje

Novije verzije preglednika koje ukljuuju IE9+, Firefox 3+, Chrome, Safari i Operu 10+ omoguuju
dodavanje alfa kanala u RGB prikaz boja. Alfa kanal odreuje prozirnost boje i moe poprimiti
vrijednost od 0.0 (potpuno prozirna) do 1.0 (potpuno neprozirna). Format RGBA vrijednosti boja
izgleda ovako: rgba(vrijednost crvene boje, vrijednost zelene boje, vrijednost plave boje, vrijednost
alfa parametra).
U CSS kodu bi to moglo izgledati ovako:
p {
background-color:rgba(255,0,0,0.5);
}

a noviji web preglednici e to prikazati ovako:
Ovo je primjer boje pozadine RGBA vrijednosti rgba(255,255,0,0.5)

9.4. HSL boje

Prikaz HSL boja zahtijeva novije verzije web preglednika kao i RGBA boje. Ako ste ikada radili obradu
fotografija, vjerojatno ste se susreli sa pojmovima ton boje (engl. hue), zasienost boje (engl.
saturation) i svjetlina boje (engl. lightness). HSL boje imaju format: hsl(hue, saturation, lightness).
Vrijednosti tona, zasienosti i svjetline boje predstavljaju koordinate u cilindrinom prikazu boja.
Ton boje (hue) oznaava vrstu boje i definira se kao
kromatska kvaliteta boje. Po tonu razlikujemo jednu
boju od druge. Ton moe poprimiti vrijednosti od 0
do 360. To su ustvari stupnjevi koji odreuju poloaj
boje na krunoj paleti boja. Crvena boja se nalazi na
0 (ili 360) stupnjeva, zelena na 120 stupnjeva, a
plava na 240 stupnjeva.




Zasienost boje (saturation) je stupanj istoe boje, koji se odreuje udjelom akromatskih boja (crna,
siva, bijela) u kromatskim bojama (crvena, naranasta, uta, zelena, itd.). Zasienost se izraava u
postocima i poprima vrijednosti od 0% do 100%. Vrijednost 0% e dati sivu boju, dok e vrijednost
100% predstavljati istu boju.

POU Proanima 2012, Vodnikova 15, Zagreb 27

HTML / CSS Skripta
2012

Svjetlina (lightness) je osobina kromatske boje koja je usporediva sa svjetlinom sive akromatske boje.
Svjetlina se takoer izraava u postocima od 0% do 100%. Vrijednost 0% e dati crnu, a 100% bijelu
boju.

Evo primjera HSL boje u CSS-u
p {
background-color:hsl(280,65%,75%);
}

Web preglednici bi to ovako prikazali.
Primjer pozadine boje vrijednosti hsl(280,65%,75%)
9.5 HSLA boje

Ve pogaate HSLA boja je HSL boja sa alfa kanalom, koji dodaje osobinu prozirnosti izraenu u
decimalnim brojevima od 0 do 1. Ako boji iz prethodnog primjera dodijelimo 50% prozirnosti, CSS kod
e izgledati ovako:
p{
background-color:hsla(280,65%,75%,0.5);
}

Dogovoreni nazivi boja
147 naziva boja je unaprijed definirano u HTML i CSS specifikacijama. Ovdje emo pokazati samo
neke.
BurlyWood
DarkSeaGreen
LightBlue
NavajoWhite
DarkKhaki



POU Proanima 2012, Vodnikova 15, Zagreb 28

HTML / CSS Skripta
2012
10. Tekst
<P>
U HTML-u je praksa da se paragrafi oznae s <P> i </P>. Pretraiva e automatski dodati
line break kad poinjete novi paragraf.
P tag sve attribute prima preko CSS-a, iako je u HTML 4.01 imao glavni atribut ALIGN taj
atribut u HTML5 nije podran.
<p>Hello</p>
<p>World!</p>
Hello

World!
<p>H e l l o W o r l d !</p> H e l l o W o r l d !
<p>H e l l o W o r l d !</p> H e l l o W o r l d !
Prvi primjer ima dva puta P tag. Zamijetite praznu liniju koja razdvaja paragrafe.
Zadnja dva primjera pokazuju kako pretraiva ignorira dvoprazna mjesta.

10.1. Specijalni znakovi
Da bi pretraiva mogao prikazivati prazno mjesto, space character, u HTML-u se koristi
&nbsp; - NON-BREAKING SPACE.
Specijalni znakovi poinju sa & i zavravaju sa ; dok je izmeu njih odreeni kod eljenog
znaka. Tih znakova ima izuzetno mnogo, no neki najee koriteni su:
& < >
&amp; &#149; &copy; &#153; &lt; &gt; &deg; &reg; &frac12; &plusmn;









POU Proanima 2012, Vodnikova 15, Zagreb 29

HTML / CSS Skripta
2012
10.2. Stiliziranje teksta putem CSS-a

Manipulacija tekstom se vri putem CSS-a. U tablici se nalaze atributi i opis njihovih
djelovanja na tekst.
Kako svaki od ovih atributa ima u prosjeku 4 mogue vrijednosti za detaljnu upotrebu
referirajte se na W3 Schools.
Atribut Opis
color Boja teksta
direction Odreuje smjer pisajna
letter-spacing Poveava ili smanjuje razmak izmeu znakova u tekstu
line-height Odreuje veliinu linije teksta
text-align Odreuje horizontalno poravnavanje teksta
text-decoration Odreuje dekoraciju teksta
text-indent Odreuje uvlaenje prve linije u bloku teksta
text-shadow Odreuje sjenu teksta
text-transform Kontrolira kapitalizaciju tekst (velika slova)
vertical-align Odreuje vertikalno poravnavanje teksta
white-space Oreuje kako se white-space u elementu kontrolira
word-spacing Poveava ili smanjuje razmak izmeu rijei u tekstu
font Odreuje sve vrijednosti font-a u jednoj linij
font-family Odreuje obitelj fonta za tekst
font-size Odreuje veliinu fonta za tekst
font-style Odreuje stil fonta
font-variant Odreuje da li e tekst biti prikazan malim slovima ili ne
font-weight Odreuje teinu fonta

.textstyle {
color:#ff0000;
direction:ltr;
letter-spacing:10px;
line-height:20px;
text-align:justify;
text-decoration:underline;
text-indent:200px;
text-shadow:#000000 3px 3px 3px;
text-transform:capitalize;
word-spacing:20px;
}

.fontstyle {
font-family:"Verdana", sans-serif;
font-size:18px;
font-style:italic;
font-variant:small-caps;
font-weight:bolder;
}


POU Proanima 2012, Vodnikova 15, Zagreb 30

HTML / CSS Skripta
2012
10.3. Naglaavanje teksta i indeksi
<STRONG> <EM> <SUP> i <SUB>
Tekst okruen <STRONG> i </STRONG> bit e podebljan. Dok e tekst okruen sa <EM> I
</EM> biti naglaen tonije nakoen.
Tekst okruen sa <SUP> i </SUP> bit e izraen kao superscript format (bit e malo
uzdignut iznad normalnog teksta). To je korisno za matematike izriaje, npr:
3x<SUP>2</SUP> + 5 e prikazivati: 3x
2
+ 5 .
Tekst okruen sa <SUB> i </SUB> bit e izraen kao subscript format (malo smanjen ispod
normalnog teksta). To je korisno za kemijske formule, kao u primjeru: H<SUB>2</SUB>O
to prikazuje: H
2
O.
11. Headings
<H1>..... <H6>
Postoji est HEADING tagova, i svi su forme: <Hn>, gdje je n broj od 1 do 6. Heading broj 1
je najvei. Tekst na koji se odnosi HEADING tag je poboldan i smjeten u zaseban red na
stranici. Kod ove je naredbe takoer potrebno zatvoriti tag.

<!DOCTYPE html>
<html>
<head>
<title>headings_2</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>










POU Proanima 2012, Vodnikova 15, Zagreb 31

HTML / CSS Skripta
2012
12. Crte i prijelom reda

<BR />

Line break omoguava da se zavri tekua linija i da se premjesti u liniju ispod te tekue. To
je upotrebljivo u sluaju kad ne elite da internet preglednik umee prazan red.
BR tag nema zavrni dio naredbe, samozatvarajui je i koristi se sam, bez ikakvih atributa.
Dvije naredbe <BR/> jedna za drugom e rezultirati praznim redom.


<!DOCTYPE html>
<html>
<head>
<title>upotreba_line_breaks</title>
</head>
<body>
<p>Rrecenica sa jednim <br />line break-om</p>
<p>Recenica <br />sa dva<br />line break-a</p>
</body>
</html>



<HR />

Horizontal rule se koristi za razdvajanje dijelova web stranice. Evo to je rezultat upotrebe
HR taga, po defaultu:

Horizontal rule se rastee na 100% dostupne irine.
HR tag nema zavrni dio naredbe, samozatvarajui je. U HTML5 nema atributa te se ureuje
putem CSS-a.













POU Proanima 2012, Vodnikova 15, Zagreb 32

HTML / CSS Skripta
2012
13. Slike

13.1. Formati slika na web stranicama

Web stranice bi izgledale prilino dosadne i monotone da nema slika na njima. No, najea
je greka koju svjei web dizajneri rade je stavljanje previe slika na stranicu, ega je rezultat
nepregledne i arene stranice kojima treba cijela vjenost da se uitaju.

Prije nego ponemo eksperimentirati sa slikama, trebamo se upoznati sa osnovnim tipovima
slika koji se koriste na web stranicama.

Vjerojatno ste uli za Windows-ov BITMAP tip slike (sa .bmp ekstenzijom). Bitmap format
daje zapravo slikama skoro savren izriaj, ali je najvei nedostatak taj to su slike masivne a
to rezultira izuzetno dugim downloadom koje jako frustrira posjetioce vaeg site-a.
Dva popularna formata slika za web su the GIF (Graphics Interchange Format), i JPEG (Joint
Photographic Experts Group). Njihove su ekstenzije .gif i .jpg (ili .jpeg).

GIF
Skraenica za Graphics Interchange Format, format za razmjenu slika. To je standardni
format grafikih datoteka koji je ogranien na koritenje 256 boja i koji bez gubitaka
komprimira slike. GIF datoteke mogu sadravati niz slika koje e se prikazivati jedna za
drugom i initi animaciju, animirani GIF. Format GIF podrava i transparentnost, tj.
mogunost da se kroz dijelove slike vide ostali sadraji web stranice.

JPEG
Format grafike datoteke koji podrava preko 20 miliona boja (32-bitna paleta boja). Format
JPEG (ili JPG) djelomino smanjuje kvalitetu slike prilikom komprimiranja.

PNG
Skraenica od Portable Network Graphics, izvorni format datoteke programa Fireworks. Taj
format moe bez gubitka komprimirati sliku i, poput formata JPEG, podrava milione boja,
ali su njegove datoteke obino mnogo vee od datoteka u JPEG formatu. Format PNG
podrava providnost bolje od formata GIF, ali ne podrava animacije.











POU Proanima 2012, Vodnikova 15, Zagreb 33

HTML / CSS Skripta
2012
13.2. Smjetanje slika u HTML-u

<IMG>

Naredba image za umetanje slika u web stranicu ima nekoliko atributa, ali su atributi SRC i
ALT obavezni. Naredba <IMG> nema </IMG>, zavretak naredbe, samozatvarajui je.

Visinu, irinu kao i veinu drugih atributa za slike podeavamo putem CSS-a.
Tablica pokazuje attribute koji su dostupnu u HTML-u te posebno 2 koja su obavezna.

Atribut Vrijednost Opis
src URL Obavezan. URL/putanja do slike
alt text Obavezan. Alternativni tekst / opis u sluaju da putanja
nije dostupna



URL

URL (Uniform Resource Locator) je drugo ime za web adresu. U sluaju naredbe za sliku,
image taga mora se u naredbu unijeti URL adresa slike.
URL se dijeli u dvije grupe:

APSOLUTNI URL je web adresa u cijelosti ( npr. Ona ukljuuje dio http://).
RELATIVNI URL je web adresa koja je povezana dokumentom u tom URL-u.
Relativni URL-ovi su oblika: "../images/home.gif".


<!DOCTYPE html>
<html>
<head>
<title>slika</title>
</head>
<body>
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"
alt="google" />
</body>
</html>





POU Proanima 2012, Vodnikova 15, Zagreb 34

HTML / CSS Skripta
2012
13.3. Stiliziranje slike putem CSS-a

Kao i kod stiliziranja teksta , slike stiliziramo putem tag elementa, klasa ili id-ia.
Neki od atributa koji su primjenjivi na slike: width, height, position, display, margin, border

slika.html

<!DOCTYPE html>
<html>
<head>
<title>slika</title>
<link rel=stylesheet type=text/css href=stil.css>
</head>
<body>
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"
alt="google" class="slika" />
</body>
</html>


stil.css

.slika {
width:300px;
height:300px;
border:none;
margin-left:100px;
margin-top:100px;
}


13.4. Slika kao pozadina elementa

Slike je uz pomo CSS mogue prikazati kao pozadine HTML elemenata npr. pozadina
nekog paragrafa. Atribute koje moemo upotrijebiti za postalvljanje slike kao pozadine su:
background i background-image.

npr.

.parafpozadina {
background:url(slika.jpg);
}


.parafpozadina {
background-image:url(slika.jpg);
}





POU Proanima 2012, Vodnikova 15, Zagreb 35

HTML / CSS Skripta
2012
14. Hyperlink

<A>

HYPERLINK (esto se kae i link) je element web stranice na kojeg kad se klikne, pristupa
drugoj web stranici, ili generalno , drugoj web adresi.
Linkovi su esto u formi teksta, ali su popularni i image linkovi.
Da bi kreirali link, potreban nam je otvoreni i zatvoreni A tag (ANCHOR tag), koji ima
nekoliko atributa:

Atribut Vrijednost Opis
href URL Specificira URL stranice na koju se linka
id section_name Specificira ime sidrita
target _blank
_parent
_self
_top
framename
Specificira gdje e se link otvoriti

Sav sadraj izmeu otvorenog i zatvorenog taga smatra se linkom. U primjeru,
<A HREF="http://www.google.com">GOOGLE!</A>
link je: GOOGLE!

Ako pokuate kliknuti miem na link, otvorit e se Google home page. Primijetite da korisnik
vidi samo tekst koji se nalazi izmeu A tagova.
Za link moete koristiti razliite tagove. Linkove je dobro oznaavati stalno istom bojom jer
e im boja biti ionako promijenjena ovisno o bojama specificiranim u CSS-u.

Evo primjera slike koja je ujedno i link:

<!DOCTYPE html>
<html>
<head>
<title>slika kao link</title>
</head>
<body>
<a href="http://www.google.hr">
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"
alt="google" />
</a>
</body>
</html>


POU Proanima 2012, Vodnikova 15, Zagreb 36

HTML / CSS Skripta
2012
Takoer je mogue staviti i hyperlink na e-mail adresu. Sintaksa je slina onoj kao kod
obinog linka sa jednom razlikom, npr.
<A HREF="mailto:[email protected]">e-mail</A>

Primijetimo da se klikom mia na rije e-mail otvara editor za slanje e-mail pote (Outlook
Express, Mozilla Thunderbird, itd).

Da bi se kretali unutar stranice koja je bogata sadrajem i po kojoj se moe ii gore-dole
(scroolati) moramo definirati sidrita i pozive na ista.

Sidrite definiramo sa upotrebon ID atributa u bilo kojem tagu.
<DIV ID="NAZIVSIDRISTA"></DIV>

Na sidrite se pozivamo sa upotrebom A taga i # u kombinaciji sa nazivom sidrita kao
vrjednosti HREF atributa.
<A HREF="#NAZIVSIDRISTA"></A>
Unutar(izmeu) A tagova mora biti ugnjeenih tagova i/ili teksta.

Ukoliko je neki ID ve izdefiniran u CSS-u onda se taj isti ID uzima i kao naziv sidrita.















POU Proanima 2012, Vodnikova 15, Zagreb 37

HTML / CSS Skripta
2012
14.1. Stiliziranje linkova

Kao i sve dosada stiliziranje se vri putem CSS-a. Da li putem tag elementa , klase ili id-ia,
nebitno.
Ono to je vano za stiliziranje linkova jeste to da se mogu prikazati kao blok elementi uz
upotrebu display, width i height atributa.
Takoer treba napomenuti da se uz linkove najee koriste pseudo klase (active, hover,
visited)
Npr. pseudo klasa hover kontrolira ponaanje elementa kad se kursor mia nalazi iznad tog
elementa, active dok je element kliknut i klik je jo uvijek aktivan (dakle drimo ga), visited
ako je link ve posjeen.


link.html

<!DOCTYPE html>
<html>
<head>
<title>slika</title>
<link rel=stylesheet type=text/css href=stil.css>
</head>
<body>
<a href="https://www.google.com" class="link" />Google</a>
</body>
</html>


stil.css

body {
background-color:#000;
color:#fff;
}

.link {
width:200px;
height:100px;
color:#ff0000;
border:none;
display:block;
}

.link:hover {
color:#ff0000;
}





POU Proanima 2012, Vodnikova 15, Zagreb 38

HTML / CSS Skripta
2012
15. DIV & SPAN

<DIV> tag nije nita drugo doli dra/kontejner drugih tagova.
Poput <BODY> taga, DIV elementi su blok elementi i grupiraju druge elemente.
U HTML-u upotrjebljavajte samo idue atribute, sve drugo stilizirat putem CSS-a.
Atribut Vrijednost Opis
class ime_klase Specificira ime klase za element
id ime_id Specificira jednistven ID za element

Primjer DIV taga sa pozivom klase:

<div class=klasa> Sadraj </div>



<SPAN> tag utjee na stil teksta kojeg obgrljuje. Sadraj tag-a moe biti poravnat ili dobiti
specifine atribute.
Za razliku od <P> i <DIV> tagova <SPAN> ne utjee na formatiranje sadraja; nema prelaza
u novi red nakon zatvranja, tonije nije logika podjela dokumenta ve vizualno efektiranje
samog dokumenta.

Govori pregledniku da aplicira stil na sadraj unutar tagova.

npr.

Ovo je crni tekst, a ovaj <span style=color:#f00;>crven</span>.
















POU Proanima 2012, Vodnikova 15, Zagreb 39

HTML / CSS Skripta
2012
16. Box model i pozicioniranje

16.1. Box model

Svi html elementi se mogu promatrati kao pravokutni boksevi. Kada se radi o CSS-u, pojam
box model se koristi kada govorimo o dizajnu stranice i o rasporedu elemenata unutar
stranice.
Razumjevanje box modela je veoma vano kada su u pitanju pozicioniranje i raspored
elemenata stranice. Ako ne razumijete ponaanje box modela i ako ne razlikujete elemente od
kojih se sastoji, imati ete velikih problema sa pozicioniranjem.
CSS BOX MODEL je u sutini prostor koji okruuje html elemente, a sastoji se od:
1. Sadraja Sadraj je onaj dio elementa gdje se pojavljuju npr. tekst i slike.
2. Paddinga Prazni prostor izmeu sadraja i ruba. Na padding se primjenjuje ista
boja pozadine kao i na sadraj.
3. Ruba Rub okruuje sadraj i padding. Na njega takoer utjeu deklaracije za boju
pozadine sadraja.
4. Margina Margine predstavljaju prostor koji se nalazi izvan ruba. One nemaju boju
pozadine i potpuno su prozirne.




POU Proanima 2012, Vodnikova 15, Zagreb 40

HTML / CSS Skripta
2012
Da biste znali pravilno odrediti visinu, irinu, margine, rub i padding za odreene html
elemente, morate znati kako funkcionira box model.
Vano je da znate da e dodavanje margina i paddinga poveati ukupnu irinu elementa.
Ovo je najlake ilustrirati primjerom. Uzmimo da odreeni element, npr. paragraf, ima irinu
200 piksela. Ako mu dodamo padding od 20 piskela i margine od 15 piksela, ukupna irina
elementa iznosie 270 piksela:
200px (sadraj) + 40px padding (lijevi + desni) + 30px margine (lijeva + desna) = 270px.
Pri tome treba uzeti u obzir razlike izmeu margina i paddinga. Padding je prazni prostor
koji se nalazi izmeu sadraja i ruba i na njega se primjenjuje ista boja pozadine kao i na
sadraj, dok margine predstavljaju prozirni prostor izvan ruba.
Stoga bi ukupnu irinu ili visinu elementa uvijek trebalo raunati na sljedei nain:
UKUPNA IRINA = sadraj + padding (lijevi i desni) + rub (lijevi i desni) + margine
(lijeva i desna)
UKUPNA VISINA = sadraj + padding (gornji i donji) + rub (gornji i donji) + margine
(gornja i donja)

16.2. Pozicioniranje

Za pozicioniranje se koristi atribut position.
Atribut position moe imati sljedee vrijednosti: static, inherit, fixed, relative i absolute.
Static Ovo je osnovna vrijednost (default value) za pozicioniranje. U sutini svaki element
za koji nije posebno deklarirana relativna, fiksna ili apsolutna vrijednost, poziconiran je
statiki tj. nije pozicioniran. Na ovakve elemente nee utjecati deklaracije za pozicioniranje
kao npr. top, bottom, left, z-index. Oni se nalaze unutar normalnog toka html dokumenta.
Inherit Elementi kojima je dodijeljena vrijednost inherit naslijedit e vrijednosti za
pozicioniranje koje ima element u kome se nalaze, tj. parent element. Treba naglasiti da
vrijednost inherit ne podravaju verzije Internet Explorera manje od 8.
Fixed Fiksno pozicioniranje podrazumjeva da je element pozicioniran fiksno u odnosu na
prozor browsera. To znai da se on nee pomjerati ak i kada korisnik skroluje stranicu.
Elementi koji su pozicioniran na ovaj nain se uklanjaju iz normalnog toka html dokumenta.
Svi ostali elementi se ponaaju kao da taj fiksirani elemenat vie ne postoji. Za odreivanje
pozicije fiksnih elemenata koriste se svojstva top, right, bottom i left.
Relative Pod relativnim pozicioniranjem se podrazumjeva da je element pozicioniran
relativno u odnosu na svoju prvobitnu poziciju. Ovako pozicionirani elementi se mogu
pomjerati i preklapati sa drugim elementima. Meutim, za razliku od fiksnog pozicioniranja,

POU Proanima 2012, Vodnikova 15, Zagreb 41

HTML / CSS Skripta
2012
kada je neki element relativno pozioniran on i dalje ostaje u normalnom toku hmtl
dokumenta. Tj. ne biva uklonjen iz normalnog toka, te za njega i dalje ostaje sauvano
mjesto.
Kao i kod fiksnog pozicioniranja, za odreivanje pozicije elementa se koriste svojstva top,
right, bottom i left.
Relativno pozicionirani elementi se esto koriste kao kontejneri ili omotai za apsolutno
pozicionirane elemente. Na primjer, apsolutno pozicionirana slika ili paragraf unutar
relativno pozicioniranog div-a.
Absolute Pod apsolutnim pozicioniranjem se podrazumjeva da je element pozicioniran
apsolutno u odnosu na prvi parent element (tj. elemenat u kome se nalazi) a koji ima bilo
koju vrijednost za pozicioniranje osim static. Ako ne postoji neki takav parent element, onda
se za toku pozicioniranja uzima poetni tag.
Apsolutno pozicionirani elementi se izuzimaju iz normalnog toka html dokumenta, a svi
ostali elementi se ponaaju kao da oni vie ne postoje. Tj. za njih nee biti sauvano mjesto
kao za relativno pozicionirane elemente.
I ovdje se, kao kod fiksnog i relativnog pozicioniranja, za odreivanje pozicije elementa
koriste svojstva top, right, bottom i left.

Za primjere pozicioniranja referirati se na W3 Schools.
http://www.w3schools.com/css/css_positioning.asp












POU Proanima 2012, Vodnikova 15, Zagreb 42

HTML / CSS Skripta
2012
17. Liste

17.1. Ureene liste

Ureene liste koriste se kad elite prikazati sadraj koji ima nekakav redoslijed.

Naredba za ureene liste je <OL> to ukljuuje i </OL>. Sav tekst izmeu tagova smatra se
djelom liste.

OL ima tri atributa TYPE, START i REVERSED

TYPE moe uzeti jednu od sljedeih vrijednosti: 1, I, i, A ili a - predstavlja tip ureivanja koji
elite: brojevi, rimski brojevi (veliki ili mali) i slova. TYPE je po defaultu namjeten na
brojeve.

START je koristan ako elite nastaviti listu. U sklopu ovog atributa potrebno je navesti broj
kojim elite nastaviti listu. Ako imate listu od 1 5, i elite nastaviti sa 6, potrebno je
namjestiti START="6" u estom stavku liste. Ako imate listu od A D, i elite nastaviti listu
sa E, namjetate START="5" zato jer je E peto slovo abecede.

REVERSED slui za obrunto dodjeljivanje vrjednosti (od veeg prema manjem)

Elementi liste su okrueni <LI> i </LI> tagovima. LI ima atribut VALUE. VALUE je jednako
kao i START atribut OL tag-a, i koristi se za nastavljanje lista.




















POU Proanima 2012, Vodnikova 15, Zagreb 43

HTML / CSS Skripta
2012


<!DOCTYPE html>
<html>
<head>
<title>uredene liste</title>
</head>
<body>
<p>Ovotjedni top 5 UK singlova:</p>
<ol>
<li>Robbie Williams feat. Nicole Kidman - Somethin' Stupid</li>
<li>Daniel Bedingfield - Gotta Get Thru This</li>
<li>Gordon Haskell - How Wonderful You Are</li>
<li>Sophie Ellis Bextor - Murder on the Dancefloor</li>
<li>Stereophonics - Handbags and Gladrags</li>
</ol>
<p>Ostatak topa 10:</p>
<ol start="6">
<li>Ian Van Dahl - Will I</li>
<li>S Club 7 - Don't stop</li>
<li>Samantha Mumba - Lately</li>
<li>Kate Winslet - What If</li>
<li>Hermes House Band - Country Roads</li>
</ol>
<p>Ostali singlovi:</p>
<ol>
<li value="16">Kylie Minogue Cant Get You Out of My Head</li>
<li value="26">Destiny's Child - Survivor</li>
<li>Jennifer Lopez ft. Ja Rule - I'm Real</li>
<li value="29">David Gray - This years love</li>
<li value="38">Anastacia - Paid My Dues</li>
</ol>
<p>5 moji najdraih albuma:</p>
<ol type="i">
<li>Hootie & The Blowfish - Cracked Rear View</li>
<li>Leonard Cohen - Ten New Songs</li>
<li>Mick Jagger - Goddess In The Doorway</li>
<li>The Doobie Brothers - The Greatest Hits</li>
<li>David Gray - White Ladder</li>
</ol>
</body>
</html>









POU Proanima 2012, Vodnikova 15, Zagreb 44

HTML / CSS Skripta
2012
17.2. Neureene liste

Ako elite stvoriti neureenu listu, umjesto OL koristite UL.

UL u HTML5 nema atributa i svo ureivanje liste ove vrste vri se putem CSS-a.

Stavke u listi dodavaju se upotrebom LI taga. Ako stvarate neureene liste moete namjestiti
TYPE atribut LI na disc, square ili circle ovisno kakav izriaj odreene stavke elite.


<!DOCTYPE html>
<html>
<head>
<title>neuredene liste</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ul>
</body>
</html>


17.3. Definicijske liste

Za stvaranje definicijske liste koristimo DL tag.
DL u HTML5 nema atributa i svo ureivanje liste ove vrste vri se putem CSS-a.

Stavke u listi dodavaju se upotrebom DT i DD tagova (u paru)

<!DOCTYPE html>
<html>
<head>
<title>definicjiske liste</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>

POU Proanima 2012, Vodnikova 15, Zagreb 45

HTML / CSS Skripta
2012
17.4. Ugnijeene liste

HTML dozvoljava da se stavi lista u listu. Sve to treba u tom sluaju napraviti je da se na
mjesto stavke liste stavi nova ugnijeena lista.


<!DOCTYPE html>
<html>
<head>
<title>neuredene liste</title>
</head>
<body>
<ul>
<li>HTML:
<ol>
<li>head</li>
<li>title</li>
<li>body</li>
</ol>
</li>
<li>CSS</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ul>
</body>
</html>





















POU Proanima 2012, Vodnikova 15, Zagreb 46

HTML / CSS Skripta
2012
17.5. Stiliziranje lista

Kao i ostale elemente u HTML-u isto tako moemo stilizirati i liste.
Najjednostavniji nain stiliziranja jeste stiliziranje samog teksta liste ali mogue je i stilizirati
ostale elemente poput oznake liste.

Atribut Opis
list-style Postavljanje svih atributa/vrjednosti u jednoj liniji
list-style-image Specificira sliku za oznaku/marker liste (bulletin)
list-style-position Specificira da li se marker liste pojavljuje unutar ili van toka sadraja
list-style-type Specificira tip markera liste


primjer stilizirane liste:

index.html

<!DOCTYPE html>
<html>
<head>
<title> stilizirna lista</title>
<link rel=stylesheet type=text/css href=stil.css>
</head>

<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>


stil.css

ul {
list-style:square url("http://www.w3schools.com/cssref/sqpurple.gif");
}



POU Proanima 2012, Vodnikova 15, Zagreb 47

HTML / CSS Skripta
2012
18. Tablice

HTML tablice omoguavaju nam uredno prikazivanje web sadraja. Bez tablica bi web
stranice izgledale poprilino loe dizajnirane.

Tablice se esto koriste za dijeljenje sadraja zaslona, prikazivanje vertikalnih i horizontalnih
linija, ili ak za kreiranje rubova oko slika ili teksta.
Meutim postoji i nekoliko sitnica na koje treba paziti: najei je sluaj da se dimenzije
tablice odreuju elementima u tablici (i to najveim elementom, slikom u redu / stupcu), a
ne dimenzijom tablice kako bi trebalo i biti.

<TABLE>

Sve izmeu <TABLE> i pripadajueg </TABLE> taga smatra se dijelom te tablice. Ako se
izostavi zatvarajui tag neki browseri nee uope prikazati ostatak web stranice.

Unutar tabela treba definirati redove, a unutar redova elije.


<TR>

Nakon TABLE tag-a, treba definirati redove koristei the <TR> i </TR> tagove.



<TD>

Da bi dodali elije u redove, njihov sadraj treba biti smjeten izmeu <TD> i </TD> tagova.
Taj e sadraj biti prikazan u browser, unutar TD tagova moete smjestiti bilo koji sadraj
elite: sliku, link, pa ak i novu tablicu.

<TH>

Tag <TH> predstavlja header eliju koja je u svojoj sutini jednaka TD osim u dijelu da
naglaava tekstualni sadraj.

Takoer treba napomenuti da postoje tagovi <THEAD> </THEAD> i <TFOOT></TFOOT>
koji predstavljaju header i footer tablice.
Unutar THEAD taga idu TH elije a unutar TFOOT taga se postavljaju TD elije, naravno ako
se koristi THEAD i TFOOT treba koristiti i tag <TBODY></TBODY> koji predstavlja tijelo
tablice a u njega idu TD elije.




POU Proanima 2012, Vodnikova 15, Zagreb 48

HTML / CSS Skripta
2012
Osnovni primjer
Evo kako izgleda "normalna" tablica:

Ime Prezime
Muko Ivo Ivi
ensko Ana Ani

Sljedei kod generira tu tablicu

<!DOCTYPE html>
<html>
<head>
<title>tablica</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>Ime</td>
<td>Prezime</td>
</tr>
<tr>
<td>Muko</td>
<td>Ivo</td>
<td>Ivi</td>
</tr>
<tr>
<td>ensko</td>
<td>Ana</td>
<td>Ani</td>
</tr>
</table>
</body>
</html>















POU Proanima 2012, Vodnikova 15, Zagreb 49

HTML / CSS Skripta
2012
Prijer tablice sa upotrebom THEAD, TFOOT te TBODY tagova:


SPOL IME i PREZIME
Ime Prezime
Muko Ivo Ivi
ensko Ana Ani
generirano HTML5 kodom

Sljedei kod generira tu tablicu

<!DOCTYPE html>
<html>
<head>
<title>tablica</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="3"> SPOL IME i PREZIME</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">generirano HTML5 kodom</td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Ime</td>
<td>Prezime</td>
</tr>
<tr>
<td>Muko</td>
<td>Ivo</td>
<td>Ivi</td>
</tr>
<tr>
<td>ensko</td>
<td>Ana</td>
<td>Ani</td>
</tr>
</tbody>
</table>
</body>
</html>



POU Proanima 2012, Vodnikova 15, Zagreb 50

HTML / CSS Skripta
2012
ROWSPAN i COLSPAN

ROWSPAN slui za vertikalno razvlaenje elije ili spajanje vie elija u jednu.

COLSPAN slui za horizontalno razvlaenje elije ili spajanje vie elija u jednu.

Primjer normalne tablice
A B C D E
F G H I J
K L M N O


Primjer tablice sa ROWSPAN i COLSPAN atributima
(spojili smo elije ABCDE u jednu te FK, HM , JO u jednu eliju, elija ABCDE je razvuena
preko 5 elija-stupaca a FK, HM, JO preko 2 reda)

ABCDE
FK G HM I JO
L N

Evo koda koji generira drugu tablicu:

<!DOCTYPE html>
<html>
<head>
<title>tablice row i col span</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="5">ABCDE</td>
</tr>
<tr>
<td rowspan="2">FK</td>
<td>G</td>
<td rowspan="2">HM</td>
<td>I</td>
<td rowspan="2">JO</td>
</tr>
<tr>
<td>L</td>
<td>N</td>
</tr>
</table>
</body>
</html>


POU Proanima 2012, Vodnikova 15, Zagreb 51

HTML / CSS Skripta
2012
18.1. Stiliziranje tablica

Kako ste do sada mogli vidjeti i raditi stilove za gotovo sve elementa tako je i sa tablicama.
No prije nego krenete u stiliziranje tablice moramo napomenuti da TABLE tag nesmije
sadravat atribut border u HTML-u, taj atribut se postavlja putem CSS-a.

Primjer stilizirane tablice:

stil.css

#tablica {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #6cf;
}

#tablica th {
padding: 20px;
font-weight: normal;
font-size: 13px;
color: #039;
text-transform: uppercase;
border-right: 1px solid #0865c2;
border-top: 1px solid #0865c2;
border-left: 1px solid #0865c2;
border-bottom: 1px solid #fff;
}

#tablica td {
padding: 10px 20px;
color: #669;
border-right: 1px dashed #6cf;
}













POU Proanima 2012, Vodnikova 15, Zagreb 52

HTML / CSS Skripta
2012
index.html

<!DOCTYPE html>
<html>
<head>
<title>Stilizirana tablica</title>
<link rel="stylesheet" type="text/css" href="stil.css"/>
</head>
<body>
<table id="tablica">
<thead>
<tr>
<th>Great</th>
<th>Nice</th>
<th>Bad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bourne Ultimatum</td>
<td>Shoot 'Em Up</td>
<td>Ali</td>
</tr>
<tr>
<td>The Mummy</td>
<td>Apocalypto</td>
<td>Monster</td>
</tr>
<tr>
<td>Shawshank Redemption</td>
<td>Indiana Jones</td>
<td>Dead or Alive</td>
</tr>
<tr>
<td>I Am Legend</td>
<td>Star Wars</td>
<td>Saw 3</td>
</tr>
</tbody>
</table>
</body>
</html>







POU Proanima 2012, Vodnikova 15, Zagreb 53

HTML / CSS Skripta
2012
19. Formulari

19.1. to su formulari?

U HTML-u, formular je zamiljen kao interaktivni dio web stranice, gdje korisnik unosi tekst,
selektira tekst iz lista itd, tonije da uzima informacije od korisnika. Sigurno ste se ve susreli
na formularima na internetu, kada ste provjeravali svoj web mail.

<FORM>

Koja god bila svrha vaeg formulara morate zatvoriti FORM tag koji sadri sve elemente,
npr. text boxes i buttons izmeu <FORM> i </FORM> tag-a.

FORM ima nekoliko atributa koji su ovisno o namjeni vaeg formulara proizvoljni:

Attribute Value Description
accept-charset character_set Specificira kodnu listu znakovlja koju server
prihvaa
action URL Specificira gdje se alju podatci iz formulara
autocomplete on
off
Specificira da li je automatsko popunjavanje
ukljueno ili ne
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specificira kako e podatci iz formulara biti
kodirani kad se alju prema server (samo
ako je method="post")
method get
post
Specificira HTTP metodu za slanje podataka
name text Ime formulara
novalidate novalidate Specificira da formular ne treba biti validiran
kad se alje
target _blank
_self
_parent
_top
Specificira gdje e se pojaviti odgovor nakon
slanja formualra







POU Proanima 2012, Vodnikova 15, Zagreb 54

HTML / CSS Skripta
2012
<INPUT>

Veina interaktivnih formulara koristi INPUT tag nema zavrnog taga.
TYPE atribut odreuje tip formulara (o tome neto kasnije, u nastavku).

Ako e va formular biti nakon ispunjavanja poslan na neku adresu, trebate podesiti
NAME atribut. To odreuje tip formulara.

19.2. Textboxses

<INPUT TYPE="TEXT">

TEXT BOX izgleda ovako:



Da bi se stvorio takav izgled, upotrebljeni HTML je bio:

<FORM><INPUT TYPE="TEXT"></FORM>

Izgleda vrlo jednostavno, ali postoji mnogo atributa koje moete namjetati. Kao
prvo moete namjestiti SIZE atribut to je vidljiva duljina text boxa. VALUE e
namjestiti defaultnu vrijednost text boxa:

<FORM>
<INPUT TYPE="TEXT" VALUE="formular">
</FORM>
Na zaslonu je prikazano:

formular


elite li ograniiti broj znakova koje korisnik moe unijeti u text box namjetate
MAXLENGTH atribut na eljenu vrijednost.










POU Proanima 2012, Vodnikova 15, Zagreb 55

HTML / CSS Skripta
2012
<INPUT TYPE="PASSWORD">

PASSWORD BOX izgleda ovako:

******


Tekst koji unosite automatski se prikazuje zvjezdicama.
Za stvaranje text boxa ovog tipa, kod izgleda ovako:

<FORM><INPUT TYPE="PASSWORD"></FORM>

Atributi za password boxes isti su kao i za text boxes, naravno VALUE nije potreban jer
nema logike predefinirat neiju lozinku.

19.3. Textarea

<TEXTAREA>

Pretpostavimo da elite element formulara koji doputa unoenje vie linija teksta
znane kao TEXTAREA (okvir za unos teksta).

Osnovna textarea zahtjeva poetni i zavrni TEXTAREA tag izmeu poetnog i
zavrnog FORM taga:

<FORM><TEXTAREA></TEXTAREA></FORM>






Hello All



Ako elimo da text area ima neku defaultnu vrijednost potrebno je samo smjestiti
eljeni tekst izmeu poetnog i zavrnog TEXTAREA taga:
<FORM><TEXTAREA>Hello All</TEXTAREA></FORM>

HTML tagovi izmeu TEXTAREA tagova nee funkcionirati.

TEXTAREA nema SIZE atribut. Umjesto njega mogu se namjestiti ROWS i COLS
atributi. ROWS je jednostavno namjestiti samo se upie broj vidljivih linija u
textarea-i.


POU Proanima 2012, Vodnikova 15, Zagreb 56

HTML / CSS Skripta
2012
19.4. Checkbox & radio input

<INPUT TYPE="CHECKBOX">

CHECKBOX, izgleda ovako kad je oznaen:

Neoznaeni pak izgleda ovako:

HTML potreban za stvaranje dva checkboxa razliitih stanja izgleda ovako:

<FORM>
<INPUT TYPE="CHECKBOX" CHECKED=CHECKED>
<INPUT TYPE="CHECKBOX">
</FORM>

CHECKED jednostavno oznaava kvadrati po defaultu. Checkboxovi su grupirani zajedno
namjetanjem NAME atributa na isto ime. Upotrebom checkboxova korisnik moe odabrati
vie od jedne opcije

Boje:
Plava:

Crvena:

Zelena:


HTML kod:

<!DOCTYPE html>
<html>
<head>
<title>Check Box</title>
</head>
<body>
<form>
Boje:<br />
Plava:<input type="checkbox" name="boje" value="plava"/> <br />
Crvena:<input type="checkbox" name="boje" value="crvena"/> <br />
Zelena: <input type="checkbox" name="boje" value="zelena"/> <br />
</form>
</body>
</html>





POU Proanima 2012, Vodnikova 15, Zagreb 57

HTML / CSS Skripta
2012
<INPUT TYPE="RADIO">

RADIO BUTTON takoer ima dva stanja. Ovaj puta samo jedna opcija iz grupe moe biti
odabrana (nazvani su radio buttonima po uzoru na stare radio aparate koji su imali gumbe
za stiskanje frekvencija i radili su na principu da kad se jedan gumb utisne svi ostali iskoe).

Opet, da bi se namjestio radio button po defaultu, treba smjestiti CHECKED atribut unutar
INPUT taga. Ako sluajno selektirate dva ili vie radio buttona, browser e sam oznaiti
samo jedan a ostale deaktivirati.

Boje:
Plava:

Crvena:

Zelena:


HTML kod:

<!DOCTYPE html>
<html>
<head>
<title>Check Box</title>
</head>
<body>
<form>
Boje:<br />
Plava:<input type="radio" name="boje" value="plava"/> <br />
Crvena:<input type="radio" name="boje" value="crvena"/> <br />
Zelena: <input type="radio" name="boje" value="zelena"/> <br />
</form>
</body>
</html>


Sad moete odabrati samo jednu opciju. Za grupiranje radio buttona namjestite
NAME atribute na istu vrijednost; za odabiranje vie vrjednosti sa radio buttonima NAME
mora biti razliit.










POU Proanima 2012, Vodnikova 15, Zagreb 58

HTML / CSS Skripta
2012
19.5. Selekcije

<SELECT>

SELEKCIJA je popis predefiniranih opcija:


Gorillaz


HTML kod:

<!DOCTYPE html>
<html>
<head>
<title>Select</title>
</head>
<body>
<form>
<select>
<option selected="selected">Gorillaz</option>
<option>Dido</option>
<option>Travis</option>
<option>Coldplay</option>
<option>Oasis</option>
</select>
</form>
</body>
</html>


Uoite ugnjeivanje tagova unutar FORM taga , smjetate SELECT tag, a unutar
njega smjeta se lista pojedinanih OPTION tagova.
OPTION ima SELECTED atribut koji ini jednu opciju defaultnom kad se stranica
uita u browser.
SELECT tag takoer ima i nekoliko atributa. SIZE odreuje koliko je opcija vidljivo
odjednom, a namjetena vrijednost po defaultu je 1, DROP DOWN LIST. Ako SIZE
nije 1, moete koristiti MULTIPLE atribut kako bi dozvolili korisniku da odabere vie
od jedne opcije stisnuvi pri tom Ctrl i oznaavajui eljene opcije. MULTIPLE u
ovom sluaju ne zahtijeva da mu se upie neka vrijednost. Unutar OPTION taga
moe se smjestiti vie od jednog SELECTED atributa.

<SELECT SIZE=5 MULTIPLE=MULTIPLE>






POU Proanima 2012, Vodnikova 15, Zagreb 59

HTML / CSS Skripta
2012
19.6. Gumbi (buttons)

<INPUT TYPE="RESET">

Sljedei tip gumba je RESET BUTTON. Kad kliknemo na njega, svi e elementi formulara biti
prebaeni na svoje defaultne vrijednosti.

<INPUT TYPE="SUBMIT">

Uskoro emo biti spremni za stvaranje cijelog formulara sa svim sastavnim elementima, ali
ostao nam je jo SUBMIT BUTTON.
Kad pritisnemo SUBMIT BUTTON pozivamo stranicu koja je navedena u ACTION atributu
FORM taga. ACTION moe biti mailto:, to za krajnji uinak ima da je informacija cijelog
formulara poslana na adresu koja je navedena nakon mailto:


<!DOCTYPE html>
<html>
<head>
<title>Select</title>
</head>
<body>
<form action="mailto:[email protected]" method="post">
<select name="Umjetnici">
<option selected="selected" value="Gorillaz">Gorillaz</option>
<option value="Dido">Dido</option>
<option value="Travis">Travis</option>
<option value="Coldplay">Coldplay</option>
<option value="Oasis">Oasis</option>
</select>
<br />
<input type="reset" value="Ponisti"/>
<input type="submit" value="Posalji"/>
</form>
</body>
</html>












POU Proanima 2012, Vodnikova 15, Zagreb 60

HTML / CSS Skripta
2012
19.7. Stiliziranje formulara

Kod stiliziranja formulara mogue je stilizirati gotovo sve elemente upotrebom CSS-a izuzev
radio buttona i checkbox-eva te strelice na select-u.
Te elemente je mogue stilizirati, za sada , samo upotrebom JavaScript-a.

Primjer stilizirane forme:

forma.html

<!DOCTYPE html>
<html>
<head>
<title>Formular u CSS-u</title>
<link rel="stylesheet" type="text/css" href="stil.css"/>
</head>

<body>
<form>
<div class="box">
<h1>Contact Form :</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback">
</textarea>
<input type="button" class="button" value="Submit Form" />
</label>
</div>
</form>
</body>
</html>







POU Proanima 2012, Vodnikova 15, Zagreb 61

HTML / CSS Skripta
2012
stil.css

* {
margin:0;
padding:0;
}

body {
font:100% normal Arial, Helvetica, sans-serif;
background:#ff0;
}

form, input, select, textarea {
margin:0;
padding:0;
color:#000;
}

div .box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div .box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div .box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}









POU Proanima 2012, Vodnikova 15, Zagreb 62

HTML / CSS Skripta
2012

div .box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div .box .input_text {
padding:10px 10px;
width:200px;
background:#fff;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div .box .message{
padding:7px 7px;
width:350px;
background:#fff;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button {
color:#fff;
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}





POU Proanima 2012, Vodnikova 15, Zagreb 63

HTML / CSS Skripta
2012
20. Meta tagovi

Meta-podatke umeemo u zaglavlje (head) HTML dokumenta, a slue u razliite
svrhe; kao uputa robotima za pretraivanje (robots) i browserima, sadre podatke o autoru,
jeziku i drugim korisnim sadrajima. Meta-podaci nisu zamiljeni za osobne komentare i
podatke nego za tu svrhu koristimo ve navedeni <!-- komentar ---> element. U osnovi
razlikujemo meta tagove za pretraivake programe i one sa uputama za browser.


<head>
<meta name="description" content=" ovdje unosimo kratak opis naeg sitea">
<meta name="author" content="ime autora">
<meta name="keywords" content="npr: dizajn, design, web design, hosting etc.">
<meta name="date" content="2000-05-30 T08:49:37+00:00">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">.
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein">
<meta name="revisit-after" content="20 days">
<meta name="Publisher" content="Proanima">
<meta name="Rights" content="Sva prava pridrava izdava">
<meta name="Subject" content="Skripte za polaznike informatike kole">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="expires" content="0">
<meta http-equiv="refresh" content="5; URL=http://www.genbukan.org/">
<meta http-equiv="content-language" content="de">
<meta name="generator" content="MS Frontpage 2.0">
<meta http-equiv="pragma" content="no-cache">
</head>



Pretraivake maine indeksiraju oko 200-250 prvih znakova iz web dokumenta, pa je
svrsishodno - Description staviti na poetak, odmah iza <HEAD> taga. Nadalje unos veeg
broja znakova (preko 250) nema svrhe jer ionako nee biti indeksiran, a samo e poveavati
file.











POU Proanima 2012, Vodnikova 15, Zagreb 64

HTML / CSS Skripta
2012
Objanjenje:

"description" = upisujemo kratak opis sadraja, tematiku stranice ili sitea
author" = ime autora stranice.
keywords" = kljune rijei vezane uz sadraj npr. odmor, hotel, more, Hvar, Jadran
date" = datum publiciranja dokumenta.
index" = ovime dozvoljavate pretraivakim mainama - Robotima indeksiranje stranice u
bazu podataka.
nofollow" = zabranjujete pretraivakom programu indeksiranje stranice i ulazak dublje u
sadraj sitea putem linkova.
lang="en" = definiranje jezika na kojem su napisane stranice, to moe biti jako korisno ako
se npr. radi o stranicama napisanim na vie jezika ili pak kada elimo omoguiti indeksiranje
naih stranica u pretraivakim mainama na vie jezika. Evo jednog primjera:
<meta name="keywords" lang="hr" content="odmor, Grka, sunce">
<meta name="keywords" lang="de"content="Ferien, Griechenland, Sonnenschein">
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine">
revisit-after" = podatak za pretraivake robote, nakon koliko vremena da ponovo
indeksiraju stranicu (korisno ako esto mijenjamo sadraj).
"Publisher" = izdava.
Rights" = copyrights.
Subject" = tema koju obrauje dokument.
content-type" = odnosi se na vrstu filea (tekst, html, script) te pismo na kojem je napisano.
U sluaju naeg pisma koristi emo normu ISO-8859-2, kako bi imali prikaz slova sa
kvaicama ili pak Windows-1250 standard koji je ee koriten jer velika veina ionako radi
pod Windowsima.
"expires" = uputa browseru da stranicu potrai na originalnom serveru (za one korisnike koji
pristupaju preko proxya). Ako postavimo vrijednost 0 to znai svaki put kada potraimo
stranicu ona e doi sa servera. Moemo definirati i tono vrijeme od kada browseri trebaju
potraiti stranicu sa servera npr. : content="Sat, 14 Jun 2000 12:00:00 GMT". O ovom sluaju
browser bi nakon 14. lipnja traio stranicu sa servera, ne sa proxy raunala, iako se ista nalazi
na njemu.
"refresh" = definiramo koliko dugo e stranica biti vidljiva prije nego se automatski uita
slijedea definirana linkom. Obratite pozornost na malo drukiju konstelaciju znaka
navodnika nakon vrijednosti u sekundama.
content-language" = jezik na kojem je stranica napisana.
"generator" = program koji smo koristili pri izradi stranica, nije obavezno, slui velikim
tvrtkama za mjerenje uspjenosti (statistika) koritenja nekog softvera.
"pragma" = uputstvo proxy raunalu da (ne) memorira stranicu u cache.







POU Proanima 2012, Vodnikova 15, Zagreb 65

HTML / CSS Skripta
2012
21. Validator

Kako biste se uvjerili da je Vaa web stranica pravilno napisana, na web stranici
http://validator.w3.org/ moete uploadati Va .html podatak (validate by file upload) i
validator e Vam provjeriti da li je web stranica napisana po standardu ili nije. Imajte na umu
da svaka ozbiljna web stranica mora biti to kvalitetnije napisana i sa to manje greaka.
Tome nam i slui validator, provjera ispravnosti napisanog HTML koda.

Takoer je potrebno validirati i CSS kod , a to moete uiniti na iduem linku:
http://jigsaw.w3.org/css-validator/

Ukoliko web stranica u potpunosti zadovolji validator moete na svoje stranice postaviti
neke od ponuenih ikona na samom validatoru kako bi i korisnici vidjeli da je stranica
validna.































POU Proanima 2012, Vodnikova 15, Zagreb 66

HTML / CSS Skripta
2012
22. Napomene

Skripta je pisana za upotrebu sa HTML5 , CSS 1, CSS2 i CSS3 standardom .

Referirajte se na preporuenu online knjinicu za detalje o atributima i njihovim
vrjednostima.

Preporuena online knjinica:
http://www.w3schools.com