HTML skripta 2013/2014

PRIRUNICI TEHNIKOG VELEUILITA U ZAGREBU

MANUALIA POLYTECHNICI STUDIORUM ZAGRABIENSIS

TOMISLAV STOJANOV

UVOD U (X)HTML I CSS

2013 T. Stojanov: Skripta UHC stranica 2

Nakladnik

Tehniko veleuilite u Zagrebu

Informatiko-raunarski odjel

Autor

Tomislav Stojanov, predava

Recenzenti

prof. dr. sc. Zdravko Dovedan Han

prof. dr. sc. Hrvoje Stani

Objavljivanje je odobrilo Struno vijee Tehnikog veleuilita u Zagrebu,

odlukom broj: 1407-6/13 od 26. oujka 2013. godine.

Skripta

CIP zapis dostupan u raunalnom katalogu

Nacionalne i sveuiline knjinice u Zagrebu pod brojem 839764

ISBN 978-953-7048-27-3


Uvod u (X)HTML i CSS skripta

Tomislav Stojanov

16. 12. 2012.

Cilj kolegija: Upoznati studente s teoretskim i praktinim radom u HTML-u, XHTML-u i CSS-u, osnovnim jezicima za obiljeavanje (markup jezicima) sadraja i izgleda na webu. Za uspjeno praenje kolegija nije potrebno prethodno znanje o webu kao ni poznavanje rada u suvremenim programima za grafiku izradbu internetskih stranica. (Iz sinopsisa kolegija)


Sadraj

HTML 4 i XHTML ...................................................................................................................................... 7

Jezici za obiljeavanje .......................................................................................................................... 8

Kodiranje, skriptiranje i programiranje ............................................................................................... 9

Razlika sadraja i prikaza ..................................................................................................................... 9

Nastavak ............................................................................................................................................ 11

O HTML-u........................................................................................................................................... 11

Struktura HTML-a .............................................................................................................................. 12

Doctype ............................................................................................................................................. 12

HTML i XHTML ................................................................................................................................... 14

Minimalna stranica ............................................................................................................................ 14

Zaglavlje ............................................................................................................................................. 15

Blokni i redani elementi ................................................................................................................... 15

Okviri (frameovi) ................................................................................................................................ 15

Komentari .......................................................................................................................................... 17

Poveznice ........................................................................................................................................... 17

Ikona u adresnoj traci (favicon) ......................................................................................................... 19

Rad sa slikama ................................................................................................................................... 19

Atributi alt i title ........................................................................................................................ 20 Liste ................................................................................................................................................... 21

Odlomci ............................................................................................................................................. 22

Prikaz hrvatskih grafema ................................................................................................................... 24

Tablice ............................................................................................................................................... 26

Obrasci (forme) u HTML-u ................................................................................................................. 29

CSS 2.1 ................................................................................................................................................... 32

O CSS-u .............................................................................................................................................. 33

CSS i (X)HTML .................................................................................................................................... 34

CSS prioriteti ...................................................................................................................................... 35

CSS media types ................................................................................................................................ 36

Sintaksa.............................................................................................................................................. 37

Klase i identifikatori ........................................................................................................................... 38

Elementi div i span ........................................................................................................................ 39 Poveznice u CSS-u .............................................................................................................................. 40


Dizajniran HTML obrazac u CSS-u ...................................................................................................... 40

Pokazivai .......................................................................................................................................... 42

Jedinice .............................................................................................................................................. 42

Model kutije ...................................................................................................................................... 43

Obrubi (borders) ................................................................................................................................ 44

Model sata ......................................................................................................................................... 45

Rubovi (margins) ............................................................................................................................... 47

Popuna (paddings) ............................................................................................................................ 48

Model kutije Internet Explorera ........................................................................................................ 48

Ureivanje lista .................................................................................................................................. 49

Skraivanje zapisa sintakse fonta ...................................................................................................... 50

Ureivanje tablica ............................................................................................................................. 51

Dimenzioniranje ................................................................................................................................ 52

Klasificiranje ...................................................................................................................................... 52

Plutanje.............................................................................................................................................. 54

Pozicioniranje .................................................................................................................................... 65

Kombiniranje obiljeivaa.................................................................................................................. 71

Sveopi obiljeiva ............................................................................................................................. 73

Pseudoklase i pseudoelementi .......................................................................................................... 74

Uvjetovani komentari za IE ................................................................................................................ 75

Naglaavanje autorstva u CSS-u ........................................................................................................ 76

HTML5 ................................................................................................................................................... 77

O HTML5 ............................................................................................................................................ 78

HTML5 video ...................................................................................................................................... 79

HTML5 audio ..................................................................................................................................... 81

MP3 ................................................................................................................................................... 82

AAC .................................................................................................................................................... 82

Vorbis ................................................................................................................................................. 82

Crtaa povrina canvas .................................................................................................................. 83 Lokalna pohrana ................................................................................................................................ 83

Web-radnici ....................................................................................................................................... 84

Ostale znaajke HTML5 ..................................................................................................................... 84

Google Maps u HTML-u ..................................................................................................................... 85

CSS3 ....................................................................................................................................................... 87


O CSS3................................................................................................................................................ 88

Obiljeivai u CSS3 ............................................................................................................................. 88

Prebirniki prefiksi ............................................................................................................................. 89

Zaobljivanje uglova i sjenanje .......................................................................................................... 90

Prozirnost .......................................................................................................................................... 90

Prebirnici ........................................................................................................................................... 93

Testiranje mrenih stranica ............................................................................................................... 93

Literatura ........................................................................................................................................... 96


prvo poglavlje

HTML 4 i XHTML


Jezici za obiljeavanje Jezici za obiljeavanje ili markup language obiljeavaju tekst (primarno, ali ne nuno samo tekst) strukturno, grafiki, kontekstualno, formulativno i funkcionalno. Primjeri:

SGML za obiljeavanje openitih dokumenata HTML za obiljeavanje mrenoga teksta XHTML jedan od jezika koji su se razvili iz HTML-a RTF za obiljeavanje teksta i njegova oblikovanja ODF za obiljeavanje teksta i njegova oblikovanja CSS za ureivanje izgleda XML za razmjenu podataka LaTeX za ureivanje tehnike i znanstvene dokumentacije DocBook za semantiko kodiranje tehnike dokumentacije Wikitext za oblikovanje enciklopedijskoga wiki-teksta MathML za matematiku MusicML za obiljeavanje glazbenoga zapisa TEI za obiljeavanje teksta CML (Chemical Markup Language) za kemiju RTML (Remote Telescope Markup Language) za daljinsko upravljanje teleskopa VoiceXML za kodiranje glasa RSS za razmjenu kratkih obavijesti XUL (Mozilla XML User Interface Markup Language) za kodiranje suelja

Jezike za obiljeavanje mogli bismo podijeliti i sadrajno na dokumentne (Document Markup Language), vektorske, na one koje slue za kodiranje aplikativnog suelja, za razvijanje web-servisa (Web Service Markup Language), za openitu namjenu itd.

Na primjeru obiljeavanja teksta podebljanim slovima (bold) ovako bi izgleda zapis u razliitim sintaksama:

\b RTF HTML XHTML 1 ODF {font-weight: bold} CSS '''primjer''' wiki-sintaksa

Prema tipu jezici za obiljeavanje dijele se na prezentacijske, deskriptivne (logike ili strukturne) i na

proceduralne (fizike). Razlika meu njima je na razini opisa i odvojenosti deklaracija od procedura.

Prezentacijski su jezici za obiljeavanje, primjerice, RTF, DOCX i CSS s pomou kojih vizualiziramo svoj sadraj i on je najee skriven od korisnika. Deskriptivni jezici su, primjerice, HTML i XML s pomou kojih opisujemo podatke. Proceduralni jezici poput LaTeX-a i PostScripta zovu se tako jer ukljuuju obavijesti o proceduri ili radnji vezano za podatak.


Deskriptivni metapodatak opisuje podatak, a proceduralni metapodatak navodi proceduru ili radnju

vezanu za neki podatak.

Da je HTML deskriptivni podatak govori i injenica da definiranjem naslova (npr. ) ne upuujemo kakav on izgled treba poprimiti, nego samo konstatiramo njegovu naslovnost. Za tu se

svrhu sluimo prezentacijskim jezikom CSS-om. U svojoj ranoj fazi HTML je sluio i za jednu i za drugu primjenu, tj. on je bio i prezentacijski i deskriptivni, ali se razvojem tehnologije i shvaanjem

potrebe odvajanja izgleda od sadraja to dokinulo. I danas u HTML-u postoje oznake koje su upuivale na tu njegovu dimenziju, kao to su (break ili prelazak u novi redak), (horizontal rule ili ispisivanje vodoravne crte) itd.

Ono to oznaku ini prezentacijskom jest prikazna (eng. rendering) jedinica u prebirnicima koja na sebi zadani nain pretvara pojmovnost naslova u prikaz u odreenome fontu i veliini.

Jezika za obiljeavanje ima mnotvo i njihov se broj poveava. iroko rasprostranjeni jezici za

obiljeavanje jesu i JMBG, OIB, automobilske registracijske ploice itd. Oni su formativni i

strukturirani zapisi o graanima ili vozilima u kojima su saetom sintaksom navedena vana njihova

svojstva. Za jezike za obiljeavanje vano je da imaju dogovoreni skup obiljeja i definiranu sintaksu.

U primjeru HTML-a kao jezika za obiljeavanje sav je tekst okruen oznakama (eng. tags ili tagovima) koje ga strukturno opisuju.

Kodiranje, skriptiranje i programiranje Razlika kodiranja, skriptiranja i programiranja postoji iako se esto terminoloki ne provodi pa se

govori o programiranju stranica u HTML-u.

Programiraju se instrukcije u elji da predvidimo mogue ishode i sljedove izvravanja. Tipini

programski jezici su PHP, Java, JavaScript itd.

Skriptiramo kada elimo automatizirati este radnje ili povezani niz radnji u jednu, npr. shell skriptni jezici, GUI skriptni jezici, tekstni skriptni jezici.

Kodiramo kada elimo jedan jezik oblikovati u nekome drugome jeziku, npr. kodiramo tekst u

HTML-u.

Dakle, HTML i CSS su koderski jezici, a rad u njima naziva se kodiranje.

Razlika sadraja i prikaza Razlika sadraja (content) i prikaza (layout) u svijetu HTML-a i CSS vrlo je izraena i treba voditi rauna da se ona svlada. Ona uvjetuje gdje zavrava HTML i poinje CSS. U ranoj fazi razvoja HTML-a on je imao ulogu i opisa strukture stranice i grafikoga ureenja. Uvidjelo se da to nije dobar put i da

se mora odvojiti jedno od drugoga te da mora postojati zasebni jezik za grafiko oblikovanje.

Danas je popularno govoriti o semantikome webu, tj. o naglasku na ukodiravanju semantikih podataka o svemu za to je potrebno dati dodatnu obavijest, a to je raunalno iskoristivo. To je

naglasak na webu koji je okrenut sadraju i koji zna to e sa znaenjem. Semantiki web zapoinje sa semantikim oznakama i kodiranju znaenjskih podataka, poevi od atributa alt pa sve do optimizacije stranice za trailice.


eljeli bismo da tree aplikacije koje rade s naim stranicama to pravilnije obrauju grau (npr.

servisi Readability, InstaPaper itd.), da osobe oteena vida takoer mogu pristupati naemu tekstu, da podravamo izmjenjivost sadraja meu web-servisima i aplikacijama, da trailice dobro indeksiraju sadraj itd.

Nasuprot semantikim oznakama, ekranske oznake pripadaju kodu HTML-a koji se sve vie naputaju. Neke od njih su: (ukoeno), (podebljano), ili (prekrieno), (uveano), (umanjeno), (podvueno) i dr. Sve te oznake rade ono to bi trebale ine da nam rijei imaju izgled kako mi to elimo, meutim to je iskljuivo ekranska perspektiva bez

znaenja. Odgovarajui semantiki obojeni elementi jesu:

razne vrste naslova prema kojima trailice semantiki indeksiraju dokument ukoena slova podebljana slova skraenice adrese kratice definicija promjenjivica ili navod kod

Drugim rijeima, sve ove oznake znaenjski opisuju vrstu teksta koji okruuju (odreuju da je rije o

kodu, citatu, kratici itd.).

Dogaalo se da su se, primjerice, oznake pogreno koristile. Budui da je dotini

element tekst prikazivao na odreeni vizualni nain, poelo ga se koristiti i za druge primjere kada

nije bilo rije o navodu.

Semantikim oznakama pripadaju i navodnici koji bi se trebali obiljeavati elementom . Oni su semantiki jer daju dodatni podatak o navodnicima. Naime, jezici se meusobno razlikuju po tipu

navodnika. Kada se uitavaju stranice iji je tekst obiljeen ovim oznakama, korisnik e vidjeti one

navodnike iji je jezik postavljen kao radni u prebirniku. Tako e oznaka navodnika biti razliito prikazana ovisno o hrvatskome, francuskome ili engleskome jezinom suelju.

Tip navodnika moe se i zadati atributom lang gdje kao vrijednost moe biti postavljena dvoslovna oznaka jezika.

umjesto vrijednosti fr, moe se staviti us, uk, hr itd.


Nastavak Datoteka s kodom u HTML-u ima nastavak .html ili .htm. Ako nismo u mogunosti stvorenoj datoteci promijeniti nastavak, obratite pozornost da se u operativnome sustavu Windows promijeni zadano

svojstvo neprikazivanja nastavaka.

O HTML-u HTML oznauje HyperText Markup Language ili jezik za obiljeavanje teksta. Nije potrebno prevoditi izraz u hipertekst. Izraz hipertekst pomodni je izraz koji se u ranoj fazi nastajanja HTML-a kao prefiksoid hiper- nadopisivao i drugim raunalnim pojmovima (npr. Hyper Links, Hyper Reference) u elji da se to je mogue vie razlikuje od obinoga teksta, poveznice ili referencije.

Nastavak dokumenta u HTML-u je html ili htm.

Svaki dokument u HTML-u tekstualna je datoteka i ureuje se u ureivau teksta. (Na vjebama koristimo se besplatnom aplikacijom Notepad++.)

Prva i osnovna namjena HTML-a jest prikaz teksta na webu, ali to nije i jedina namjena. Jezik HTML koristio se za pisanje datoteka pomoi (eng. help files) u formatu CHM (Microsoft Compiled HTML). Rije je o sada ve naputenome formatu koji je izmislio Microsoft za potrebe pisanja prirunika o

radu s odreenom tehnologijom. Naslijedio ga je drugi jezik za obiljeavanje koji je bio razvijen ba za

potrebe Microsoft Assistance Markup Language, a sada se primarno koristi web za takve potrebe. Osim teksta kodiranoga u HTML-u, ta je datoteka u sebi imala kompiliran i sadraj, indeks, trailicu te druge funkcije. Mogli bismo govoriti o CHM-u kao o ranoj fazi razvoja e-knjige.


Struktura HTML-a Svaki se dokument pisan u HTML-u sastoji od dva temeljna dijela od zaglavlja (eng. head) i od tijela (eng. body). Podatci u zaglavlju odnose se na podatke u tijelu dokumenta na nain da ih opisuju pa ih moemo nazvati metapodatcima. U zaglavlju se navode brojni podatci o samoj mrenoj stranici,

autoru, kodnoj prikazbi, kljunim rijeima itd. Ono to je navedeno meu metapodatcima, to se ne

prikazuje u prebirniku.

HTML ine elementi, a elementi se sastoje od oznaka. Oznake se dijele na jednostruke i dvostruke.

Jednostruke oznake su one koje se sastoje od samo jednoga lana, dok dvostruke imaju poetni i

zavrni lan (npr. oznakom zapoinje odlomak, a zavrava). Jednostruke su oznake, primjerice, i koje zbog svoje naravi ne okruuju neki tekst da bi ga opisale (prva oznaka stvara novi redak, a druga iscrtava novi redak).

Oznake mogu imati atribute koji dodatno specificiraju element. Atribut se pie uvijek unutar

poetnoga lana oznake. Atribuirana oznaka oznauje da odlomak p ima klasu s nazivom naslov.

Doctype Doctype je podatak o definiciji tipa dokumenta (eng. document type definition) koji stoji na samome vrhu dokumenta pisanoga u HTML-u s pomou kojega prebirnik zna koji jezik moe oekivati. Doctype odreuje je li rije o HTML-u, XHTML-u, XML-u, SGML-u te u kojoj je inaici kod pisan. Doctype je zapravo poseban jezik za obiljeavanje s nastavkom .dtd i on po svojemu obliku nije XML-oidan (njegov pandan u svijetu XML-a jest XML Schema).

HTML 4.01 ima tri tipa dokumenta: tranzicijski (transitional), striktni (strict) i skup okvira (frameset). Tranzicijski mod je najkoriteniji i odnosi se na sintaksu koja ne iskljuuje valjanost starih oznaka i

elemenata. Primjerice, tranzicijski mod doputa i dalje koritenje nepreporuenih elemenata


, , itd. Ona se smatra prijelaznom prema striktnoj ili istoj sintaksi i ponajprije je izmiljen radi razloga kompatibilnosti prema starome kodu.

Striktni mod ne doputa valjanost oznaka, elemenata ili sintakse koja nije podudarna s njegovim

standardom. Ovaj je mod onaj koji se preporuuje za pisanje koda.

Mod skupa okvira (frameset) ne razlikuje se od tranzicijskoga i striktnoga moda po kategoriji odnosa prema starome standardu, nego bitno fundamentalnije frameset je nain gradnje web-stranice s pomou viestrukih okvira ili dokumenata u HTML-u. Vie o tome u zasebnome poglavlju.

XHTML ima identine tipove dokumenta kao i HTML 4, ali se sintaksa poneto razlikuje.

Kao to se vidi, svaki XHTML dokument zapoinje s osnovnom deklaracijom koja potjee iz svijeta

XML-a, a po emu se vidi da je XHTML zapravo XML dokument. Prvi redak odreuje inaicu XML-a kojom je XTHML pisan i koja mu je znakovna prikazba. Drugi redak odreuje tip dokumenta i koja je

adresa datoteke prema kojoj se taj jezik usklauje.

Jezici HTML 4 i XHTML podravaju razliite modove, ali ih HTML5 vie nema.


HTML i XHTML U trenutku faze standardizacije jezika HTML kada su kulminirali problemi meusobne neusklaenosti

prebirnika u prikazu istoga HTML koda i paralelnome razvoju jezika, nastala je ideja o vioj i striktninijoj razini jezika HTML. Jedno od rjeenja bilo je stroe postaviti sintaktika pravila pa se tako kao uzor striktnosti postavio XML. Pravila iz njega prenesena su u HTML, a prema tome je

oznaka X u XHTML-u i dobila ime. Meu ostalim, XHTML je definirao da vrijednost atributa mora biti u navodnicima, da se elementi piu malim slovima, da se oznake moraju zatvarati itd. XML je jezik za

prijenos sadraja, ali je bio zamiljen i kao metajezik za druge jezike. XHTML je trebao biti njegov prvi

primjer jezika nastaloga na uzoru XML-a.

XHTML 1.0 zamiljen je da bude isto to i HTML 4.01 samo s dodatkom XML-a. Tada se vjerovalo da e XHTML potpuno zamijeniti HTML i da e zapoeti s razvojem od inaice 1.0 pa nadalje. Inaica 1.1

tako je bila jo striktnija, iskljuen mu je tranzicijski mod, a u planu je bio i razvoj jezika XHTML 2.0

koji je trebao biti vrlo razliit jezik od 1.1. Meutim, njegov je razvoj kasnio, a to je odgovaralo

onima kojima su eljeli nastaviti razvijati jezik na drugim osnovama (npr. Opera koja je zapoela sa

svojim radom, a kojoj su se pridruile i druge kompanije koje su stvorili konzorcij WHATWG). Iz tih se

inicijativa razvio HTML5.

Svaki se HTML 4.01 moe automatski pretvoriti u XHTML bilo preko web-suelja http://www.it.uc3m.es/jaf/html2xhtml/ ili preko softvera kao to je TidyUI (http://tidy.sourceforge.net).

Minimalna stranica Da bismo kod pisan HTML-om mogli nazvati stranicom HTML, moramo imati minimalno sljedee stvari:

Da bismo stranicu uinili minimalnom stranicom pisanoj u HTML5, moramo dodati deklaraciju i

znakovnu prikazbu:


Zaglavlje U zaglavlju () nalaze se metapodatci stranice ili podatci o podatcima. Oni se upisuju u element . Tih tipova podataka ima dosta i oni se i dalje razvijaju. Neki od najeih su:

1. Podatak o kljunim rijeima i opisu stranice.

2. Podatak o autoru ili vremenu ureivanja stranice.

3. Podatak o aplikaciji koja je generirala kod.

4. Podatak o kodnome prikazu teksta.

5. Podatak o automatskome osvjeivanju stranice. Vrijednost contenta izraena je u sekundama.

6. Podatak o preusmjerivanju stranice i koliko brzo.

Blokni i redani elementi Svi se elementi u HTML-u dijele na dvije vrste blokne (block-element) i redane (inline-element). Blokni se elementi prikazuju u bloku, tj. za svoj prikaz trae vlastiti redak (npr. , , , ), a redani se prikazuju u nastavku, tj. linearno (npr. , , ).

Okviri (frameovi) Okvir predstavlja strukturu vie stranica u HTML-u koji se meusobno slau na nain da se vie stranica u HTML-u istovremeno prikazuju unutar jedne stranice. Vie okvira ini skup okvira (eng. frameset). Da bismo radili s okvirima, moramo odrediti skup okvira. Odnos meu njima postavlja se s pomou postotaka ili piksela.

Stranica koja odreuje kako se okviri prikazuje ne sadrava , nego samo definiciju okvira.


Okviri se mogu slagati u redcima (rows) ili u stupcima (cols), a taj se podatak navodi kao atribut frameseta. Vrijednosti atributa frameset govore o meusobnu omjeru okvira koji se definiraju u njemu. U navedenoj sintaksi iskazuje se da se dva okvira nalaze u stupcima u odnosu da prvi zauzima 25 posto, a drugi 75 posto ekrana.

Umjesto jedne od vrijednosti mogue je postaviti zvjezdicu (*) koja govori o tome da dotini okvir

zauzima onoliko prostora koliko je preostalo u odnosu na druge okvire i ukupnu trenutanu

razluivost ekrana.

elimo li zakljuati poloaj okvira i onemoguiti runo pomicanje, koristimo sljedeu sintaksu:

Uvid u kod odreenoga okvira postiemo desnim klikom mia iznad njega i odabirom This frame > View frame source.

Iako se izradba mrenih stranica s pomou okvira smatra zastarjelim dizajnom, koritenje unutarnjih

okvira ili iframeova potpuno je standardno i rabe se kad god ubacujemo elemente sa stranica YouTube ili Google Maps.

Vjeba s okvirima: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols.


Dva su nain izgradnje skupa okvira: gnijeenjem (frameset unutar frameseta) ili viestrukim framesetom (dvije ili vie stranica odreuju frameset).

Unutarnji okvir ili iframe odreuje se unutar , a ne unutar frameseta. Njegov atribut src definira stranicu koja se treba uitati u njemu.

Obratite pozornost da element iframe nema sadraja i da je prazan.

Komentari Komentari u HTML-u slue za istu svrhu kao i u bilo kojem drugom jeziku za kodiranje, programiranje ili skriptiranje za pisanje biljeaka autora koda. Komentiranjem postiemo veu razumljivost i snalaenje u kodu, osobito pri vraanju na taj dio koda, ali i za jednu drugu pragmatinu funkciju:

komentiranjem, naime, postiemo da dio koda koji okruimo uinimo da se ne izvrava ime si

olakavamo testiranje i ispravljanje pogreaka pri kodiranju.

Komentiranje se vri s pomoi oznaka , a moe se komentirati jedan redak ili vie njih.

Poveznice Poveznice ili linkovi (eng. links) dijele se na apsolutne i relativne.

Apsolutne poveznice su one koje upuuju na jedinstvenu adresu bez obzira upuuju li na mrenu ili

lokalnu adresu.

Klikni za posjet stranicama TVZ-a Lokalna datoteka Relativne poveznice su one koje upuuju na sadraj u odnosu na datoteku odakle se kree. Druge se povezane (linkane) datoteke mogu nai u istoj mapi, u mapi iznad ili u mapi ispod one odakle se kree. relativna poveznica za dokument u istoj mapi relativna poveznica za dokument u nadreenoj mapi relativna poveznica za dokument u podreenoj mapi 2013 Produkcijska poveznica radi se s pomou znaka ljestve (#), Tako obiljeen tekst ponaa se u naim produkcijskim uvjetima kao prava poveznica iako nas ne vodi nigdje klikom na nju. Otvaranje stranice u novome prozoru (ili kartici) prebirnika radi se s pomou atributa target="_blank". Poveznica


Poveznice ne moraju uvijek otvarati novu mrenu stranicu, mogu otvarati i klijent za rad s e-potom ako odredimo da klikom na poveznicu elimo da posjetitelji poalju poruku. To je, primjerice, esto u podnoju stranice gdje ostavljamo adresu e-pote za odreenu vrstu kontakta. Gornja sintaksa, osim to upisuje adresu e-pote [email protected] u polje za primatelja (eng. to), dopisuje i adresu u polje za dodatnoga primatelja (eng. cc) te naslov (Javljanje) i tekst poruke (Pozdrav). Treba obratiti pozornost na sintaktiku uporabu znakova za odvajanje (? i &). Poveznica za preuzimanje takoer se smatra vrstom poveznice. Ako se umjesto nastavka html stavi nastavak, primjerice, mp3 ili docx, prebirnik e klikom na poveznicu zapoeti preuzimanje (eng. download).

Preuzimanje pjesme. Sljedeu podvrstu poveznica ine fragmenti ili sidrita. Nazivaju se i unutarnjim poveznicama jer se odnose na veze unutar dokumenta ili s jednoga dijela teksta na drugi. Osobito su pogodni za stranice s puno teksta i za e-knjige (skokovi na sadraj, indeks, fusnote itd.). Poveznica se ostvaruje znakom ljestve (#), a mjesto na koje ide obiljeeno je atributom name.

Klikni za unutarnji skok

Obratite pozornost da atribut name nema znak ljestvi, kao i da je poveznica prazna. elimo li raditi fragmente meu razliitim okvirima, sintaksa jest sljedea

Poveznica

Ono se ita: kad klikne na rije Poveznica otvori stranicu okvir_1.html u dijelu #a na lokaciji xy.

Obratite pozornost da im radimo s okvirima koji se meusobno linkaju s pomou atributa

target, taj se podatak mora prvo deklarirati u framesetu kao atribut name="xy".

Primjer deklaracije frameseta s atributom name:


Primjer pozivanja s atributom target:

Ikona u adresnoj traci (favicon) Ikona u adresnoj traci esto se postavlja radi boljega dojma koji stranica ostavlja na korisnika. U adresnu traku stavlja se logotip ili neki drugi prepoznatljivi grafiki simbol koji se sprema u oznakama (eng. bookmarks) stranice. Nastavak oznake moe biti u ICO, GIF ili PNG u razluivostima 16x16, 32x32 ili 48x48 u 8-bitnoj, 24 bitnoj ili 32-bitnoj dubini boje. Izradba ikone je jednostavna jer ne ukljuuje grafiku obradbu nego odlazak na stranicu http://www.chami.com/html-kit/services/favicon/ na kojoj postavljamo svoju izvornu sliku i za koju odabiremo elimo li animacijsku ili neanimacijsku ikonu. Ovisno to smo odabrali, u se postavlja sintaksa: neanimirana ikona: animirana ikona:

Rad sa slikama Nulta ishodina toka ili toa razluivosti 0x0 na raunalnome ili televizijskome ekranu nalazi se u

gornjemu lijevom kutu.

To znai da se prikaz renderira linearno i da moramo planirati njihov prikaz u odnosu na tekst.

Slike se prije postavljanja na web moraju obraditi i optimizirati za ekranski prikaz, a vie o tome govori se u

podruju web-dizajna, a ne kodiranja mrenih stranica.

Najei format slika je JPEG, a on moe imati vie nastavaka: JPG, JPEG, JPE, JIF i drugi. JPEG je standardni akronim lossy image formata Joint Photographic Experts Group. Na operativnim sustavima Windows rabi se JPG, a na Mac OS JPEG.

Sintaksa za ubacivanje fotografija:


Obratite pozornost da ako slici veliine 3456x2304 piksela damo da se prikazuje u okviru 20x22

piksela, ta e slika imati male prikazne dimenzije, ali e se uitavati i dalje izvorna slika. Taj je nain

rada sa slikama nepreporuljiv zbog svoje neoptimiziranosti.

Atributima width, height, align, valign, border i drugima mogue je dodatno urediti sliku, ali se ovaj nain rada ne preporuuje. Suvremeni standard propisuje da se sva grafika obradba slika

mora ureivati s pomou CSS-a, a ne starim HTML-ovskim atributima.

Atributi alt i title Atributi alt i title razlikuju se po tome to je alt znaenje, a title ekranski prikaz. Ono to navedemo pod titleom prikazat e se na ekranu nakon to neko vrijeme zadrimo pokaziva mia nad nekim sadrajem (slikom, poveznicom itd.), a tekst pod atributom alt predstavlja njegov opis.

Atribut alt obvezatan je za validaciju stranice, pa makar bio naveden bez sadraja (alt="").


Slike se postavljaju kao poveznice na nain da ih se okrui elementom .

Liste Liste u HTML-u slue za popisivanje ili nabrajanje nekih lanova. Liste mogu biti ureene (kada je meu njima ureeni poredak, eng. ordered ili ol), neureene (kada poredak meu lanovima liste nije bitan, eng. unordered ili ul) i definicijske (kada stavke liste imaju dodatni opis, definition ili dl).

HTML ima samo tri simbola za prikaz neureenih lista. Preporuuje se izgled lista obraditi CSS-om.

disc

circle

square

Ureena lista izgleda ovako:

Prvo Drugo Tree


Ureenoj listi moemo postaviti atribut type ija vrijednost odreuje tip pobrojavanja. Ono moe biti

arapskim brojkama, malim ili velikim rimskim brojkama, te malim ili velikim slovima abecede.

Prvo Drugo Tree Element moe imati i atribut start ija vrijednost odreuje od kojega e lana pobrojavanje zapoeti. Sljedei primjer pokazuje da e stavke liste zapoeti s velikim rimskim brojem VII.

Neureena lista izgleda ovako:

Prvo Drugo Tree Definicijska lista dodatno odreuje stavku liste s elementom . Ta je lista izvorno zamiljena kao

strukturni opis nekoga rjenika ili pojmovnika.

Enchanting Poboljavanje svojstava Tailoring Krojenje Jewelcrafting Draguljarstvo Liste se mogu gnijezditi (liste unutar lista).

Prva stavka Ubaena stavka 1 Ubaena stavka 2 Druga stavka

Odlomci Tekst se u HTML-u upisuje u elementu koji oznauje paragraf. Bez obzira to se u tekstu moe nalaziti viestrukih bjelina ili praznih redaka, prebirnici e viak praznih mjesta reducirati i prikazati

tekst s minimalnim brojem praznoga prostora. To je svojstvo znaajno za sve jezike za obiljeavanje.


Meutim, elimo li doista prikazati prazan prostor, umjesto odlomka trebamo postaviti koji odreuje da se dotini tekst ne formatira.

Ovako to izgleda u prebirniku:

elimo li izbjei da nam se neki tekst ne lomi na kraju retka, koristimo HTML-ovu oznaku za neprelamajui razmak (non-breaking space). To se rabi kod titula, novanih vrijednosti, jedininih mjera itd. Uoite na donjoj slici da se titule nisu odvajale od imena i prezimena.


Prikaz hrvatskih grafema Da bismo dobili prikaz znakova kakav oekujemo, bez obzira odakle netko uitavao nae stranice i s

koje tipkovnice ili jezinoga podruja, moramo uskladiti sljedee stvari:

1. kodni prikaz preglednika

2. kodni prikaz datoteke s kodom u HTML-u

3. kodni prikaz zaglavlja koda u HTML-u

HTML 4.01 zaglavlje:


HTML5 zaglavlje:

4. definirani font u prebirniku

5. font instaliran na OS-u


6. font definiran u datoteci s kodom u CSS-u

Upravo zbog iroke rairenosti nekoliko fontova (npr. Verdana, Arial, Helvetica, Times i dr.), oni se

najee rabe na prikaz mrenih tekstova. Vrlo je lo odabir prinuenje posjetitelja naih stranica da

instalira font koji se nama svia i u kojem smo kodirali na izgled.

Zadana znakovna prikazba je unikod i to UTF-8.

Tablice Zbog nedostatka drugih naina pozicioniranja elemenata na stranici, u ranoj fazi razvoja weba tablice su bile koritene posve pogreno umjesto da slue iskljuivo za ono za to su i namijenjene, tj. za prikaz sadraja u tablinome obliku (npr. popis studenata i njihove evidencije i ocjena), tablice su se

koristile za layout, tj. za rasporeivanje elemenata na ekranu. Drugim rijeima, irina se ekrana zamislila kao velika tablica te smo odreeno polje definirali na nain da se prikazuje u dijelu ekrana i

u njega upisali svoj sadraj.

Iako je ova tehnika pogrena, brojne stranice jo uvijek koriste ovaj nain dizajniranja (primjerice, sam W3Schools je ovaj dizajn imao sve do sredine 2011. godine, a sve hrvatske dnevne novine do

2010. godine).

Tablice se grade s pomoi sljedeih elemenata: , , (table heading), (table row) i (table definition). Element je glavni kontejner koji okuplja sve tabline podelemente. Tablica se, poput televizijske slike na ekranu, definira linearno. Ako elimo odrediti tablicu koja ima dva retka i dva stupca, onda se prvo definira prvi redak, zatim prvo polje

prvoga retka, zatim drugo polje prvoga retka, potom se zatvara prvi redak pa se otvara drugi redak.

Nakon toga se odredit prvo i drugo polje drugoga retka, a na kraju se zatvara drugi redak. Elementom

odreuje se redak, a polje u retku. Imamo li potrebe za metapoljima u tablici, npr. za opisom to se u kojem stupcu definira, umjesto rabimo . Ovako to izgleda u praksi:


Tablini elementi imaju brojne atribute. Neki od njih koji se odnose na grafiko oblikovanje

zamjenjuju se CSS-om. U nastavku navodimo neke od njih. Poput poveznica, slika i drugih strukturnih elemenata, tablice takoer imaju atribuciju i .

odreivanje okvira tablici

odreivanje pozadinske boje tablice

odreivanje irine tablice

odreivanje visine tablice

odreivanje vodoravnoga poravnavanja tablice

odreivanje okomitoga poravnavanja tablice

odreivanje pozadinske slike tablice

odreivanje odmaka teksta od ruba polja

odreivanje odmaka polja meu sobom


Uoite da se tablicama ne moe definirati visina u postotcima ako se postavi HTML ili XHTML doctype.

Tablice po svojem ustroju nisu uvijek pravilne pa moraju postojati i atributi s pomou kojih spajamo

vodoravna (rowspan) ili okomita (colspan) polja tablice. Brojana vrijednost koja se upisuje pod tim atributima predstavlja broj polja koji se ukupno spaja. Obratite pozornost da se definicija polja u

retku koje je spojeno nekom drugom polju brie.


Kod ovih nepravilnih tablica vano je zapamtiti da si uvijek moramo postaviti pitanje koliko ova

tablica ima redaka i stupaca. To nije uvijek mogue odgovoriti iz prve, ali nam je taj odgovor kljuan

u pisanju koda. Pomoi e nam iscrtkavanje nevidljivih bridova polja olovkom ime e doi do naega

odgovora. Osim toga, tom emo tehnikom znati i koje polje trebamo spojiti s kojim drugim poljima.

Obrasci (forme) u HTML-u Obrasci u HTML-u su dijelovi stranice koji predstavljaju suelje za odgovor naim posjetiteljima. Da bi prebirnik ispravno shvatio da je rije o obrascu, moramo postaviti glavni kontejner . Obrazac moe biti tekstualni (u jednome ili u vie redaka), tipkovni (tipka za slanje i ponitavanje rezultata),

padajui izbornik ili radiobuttoni i checkboxovi.

Padajui izbornik moe imati jedan ili vie odabira, a moe se podesiti i prikaz vie od jednoga retka

(zadano je jedan redak). Radiobuttoni i checkboxovi nemaju adekvatan prijevod na hrvatski pa se sluimo engleskim nazivljem. Radiobuttoni imaju svojstvo samo jednoga odabira od vie ponuenih, za razliku od checkboxova gdje je mogue odabrati vie ponuenih. Oni se meusobno razlikuju i izgledom prvi su okrugli, a drugi su etvrtasti.


Viestruki izbor padajuega izbornika radi se s pomou sljedeega koda:

Visina padajuega izbornika:


Onemoguen izbor:


drugo poglavlje

CSS 2.1


O CSS-u Jezik za obiljeavanje CSS znai Cascading Style Sheets. Dijeli se na dvije inaice 2.1 i 3 koje se nazivaju level 2, revision 1. U ovome dijelu bavimo se iskljuivo CSS-om 2.1 koji je, unato postojanju inaice 3, jo uvijek u irokoj uporabi. Ne moemo govoriti da je zastario ili loiji u odnosu na inaicu 3 jer je njegov sljedbenik jo uvijek u razvoju i nije standardiziran.

Inaica 1.0 izila je 1996. godine, a 2.1 postojao je W3C Recommendation tek u lipnju 2011. godine.

CSS znai slijedni stilski obrazac, a naziv zahvaljuje svojemu svojstvu odreenosti prioriteta u

prikazu budui da CSS-ovi obiljeivai na raznim razinama i razliitim prioritetima mogu oblikovati isto mjesto.

CSS je usmjeren za prikaz (X)HTML-a, ali ne nuno samo njega nego i bilo kojeg drugog jezika za obiljeavanje (npr. XML).

Budui da je preuzima funkciju grafikoga oblikovanja sadraja, (X)HTML-u ostaje ono za to je prvotno i zamiljen za opis strukture elemenata.

Radimo li u striktnom modu HTML-a 4.1 ili XHTML-a 1.0, njegova je uporaba obvezatna.

Odjeljivanjem sadraja od izgleda generira se manje koda, a on je bitno pregledniji te ga je lake

naknadno ureivati.

Svaki se element (X)HTML-a moe modificirati CSS-om ime moemo govoriti o unverzalnosti CSS-ovih obiljeivaa (za razliku od HTML-ovih atributa).

Popisi obiljeivaa (selectors) je podugaak i on se ne mora uiti napamet, ali se mora znati za to slui i kako se upotrebljava. U ovim se skriptama oni nee taksonomski nabrajati, nego e se ukazati

na osnovnu sintaksu i mogunosti, a studentima se ostavlja da dodatne informacije pronau na

tutorijalu iz CSS na stranicama W3Schoolsa http://www.w3schools.com/css/. Zbog svoje univerzalnosti obiljeivai su primjenjivi za brojna mjesta tako da je uenje time jednostavnije svojstvo padding, margin, align moe imati i odlomak, div, slika, naslov itd.

CSS neke mrene stranice pronalazi se na sljedei nain: prvo treba otii u opciju view page source, zatim treba pronai mjesto unutar gdje se poziva kod u CSS-u, te kliknuti na tu datoteku (ili spojiti relativnu poveznicu CSS-a s URL-om stranice u HTML-u.

Kao i (X)HTML, CSS ima svoju validaciju: http://jigsaw.w3.org/css-validator.


Specifikacija CSS-a zapisana je na stranicama: http://www.w3.org/TR/CSS21/.

CSS i (X)HTML CSS se unutar (X)HTML-a moe nalaziti na trima mjestima:

1. unutar u HTML-u u kojem se nalazi

2. unutar oznake u HTML-u

3. u vanjskoj datoteci sa .css nastavkom


CSS prioriteti Budui da istome elementu moemo na raznim mjestima odrediti izgled, moraju postojati prioriteti

izvravanja. Openito pravilo jest da to je obiljeiva specifiniji (tj. nii), ima vei prioritet. Kada

bismo se slikovito izrazili, onda bismo rekli da je pravilo fakulteta jae od pravila UN-a.

1. Prebirniki stilski obrazac (user agent style sheet) onaj koji je zadan u prebirniku, npr. rezultira podebljanim slovima, kosim prioritet peti

2. Korisniki s. o. (user s. s.) onaj koji je definirao korisnik (posjetitelj) stranica prioritet etvrti

3. Autorski s. o. (author s. s.) onaj koji je definirao autor stranice prioritet trei (normalni css)

4. Autorski important s. o. (author important s. s.) ono to autor definira vanim s elementom important prioritet drugi

5. Korisniki important s. o. (user important s. s.) ono to korisnik definira vanim s elementom important prioritet prvi


Po mjestu definiranja izgleda, prioriteti su poslagani na sljedei nain:

1. prebirnike zadane vrijednosti (browser default) 2. vanjski CSS 3. CSS unutar kontejnera 4. unutar (X)HTML retka (inline CSS)

CSS media types Osim za prebirnike CSS je predvien da uredi prikaz sadraja i na pisau, projektoru, televizoru,

dlanovnicima itd. Ti se detalji odreuju u zaglavlju gdje se povezuje datoteka sa stilskom

informacijom.

Ono to se najee naziva inaicom za ispis upravo je CSS koji je oblikovan na nain optimiziran za

pisa (crno-bijeli prikaz, format A4 itd.).


Sintaksa Osnovna sintaksa CSS-a jest sljedea:

obiljeiva {svojstvo: vrijednost;}

selector {property: value;}

Na primjeru HTML-ova elementa i obiljeivaa s kojim odabiremo vrstu fonta:

p {font-family: verdana;}

Svaki obiljeiva mora zavravati znakom toka-zarez ak i kada je u retku deklariran samo jedno svojstvo. Naziv obiljeivaa ne smije zapoinjati brojkom.

Obiljeja (atribucije) mogu se nizati u retke prigodom ega je viak bjelina i redaka nevaan.

h1 { margin-left: 10pt;

font-family: helvetica; text-align: center; } Gore navedena sintaksa kae da e naslov biti udaljen od lijeve margine 10 toaka, da je biti ispisan fontom Helvetica, te da e biti centriran.

Imamo li vrijednosti koje u sebi sadravaju bjelinu, moraju se zapisivati unutar navodnika.

h1 {font-family: "times new roman"} Obiljeivai i elementi mogu se grupirati:

h3,li,p {color:purple;} ili h3, li, p {color: purple;} Stilovi se mogu dodavati i atributima elemenata. Sljedei redak kae: svi oni koji u table imaju visinu

400 imat e utu pozadinsku boju.


table[height="400"] {background-color: yellow}

Atributi imaju jo i dodatnu sintaksu a[alt~="mala"] znai da se trai atribut alt koji ima dio sadraja mala i koja je unutar elementa a.

Jednoredni komentari se u CSS-u piu na sljedei nain:

/* Ovo je komentar u CSS-u */ Piemo li vieredane komentare:

/* Poetak, sredina i kraj vieredanog komentara */

Klase i identifikatori Razlika klase i identifikatora jest to se klasa primjenjuje kao definirani stilski obrazac za brojne i

generike lanove koji mogu posegnuti za njime, dok su identifikatori jedinstveni i pojedinani sluajevi ureivanja stila. Mnogi se dijelovi mrene stranice ureuju samo na jednome mjestu i na

identini nain zaglavlje, meni, navigacija itd.

HTML5 je uveo dodatne jedinstvene elemente za sve ove strukturno-sadrajne elemente pa tako sada imamo , , , itd.

Klasa se ostvaruje sintaktikim operatorom toke (.), a identifikator ljestvama (#).

U CSS-u klasa se ovako pie:

h1.desno {text-align: right;} Ovo znai da se svi naslovi h1 koji imaju pozvanu klasu desno poravnavaju s desnom marginom.

U (X)HTML-u klasa se poziva:

Naslov ide udesno Kada su klase pisane samostalno odnose se na cijeli

.desno {text-align: right;} U (X)HTML-u poziva se na identian nain:

Veliki naslov udesno


Identifikatori imaju identinu sintaksu samo to umjesto znaka toke piemo znak ljestvi i to se u (X)HTML-u poziva sa id (umjesto class).

Elementi div i span Elementi div i span su jedini elementi u cijelome (X)HTML-u koji nemaju znaenje, ve kojima korisnik pridaje funkcionalnost. Oni se smatraju gradivnim materijalima kojima moemo posegnuti u

izgradnji stranice ba kao to graditelji mogu odabrati razne vrste blokova u zidanju.

Razlika meu njima iskljuivo je u kategoriji jesu li blokni (block) ili redani (inline). Slikovito reeno, zamislimo da graditelji imaju dvije vrste greda jedne koje se polau vodoravno i druge koje se postavljaju okomito. Po tome bi span bila vodoravna, a div okomita greda.

Element span slui za redano grupiranje ili atribuiranje.

Element div slui za blokno grupiranje i atribuiranje.

Njihovi atributi mogu biti razni, npr.:

Element div ee se koristi zbog svoje naravi da grupira kod i da dijeli sastavnice web-stranice.

Budui da nam je potreban za strukturu stranice, u koderskome argonu postoji izraz divitis koji oznauje prekomjerno koritenje elemenata div (primjerice, svaka bi se tablica mogla preurediti da mu gradivni dio bude ). Najee ga se prepoznaje kada imamo toliko elemenata div da se vie ne moemo snai meu njima i odrediti za to nam koji slui.

Budui da se elementi div mogu postaviti bilo gdje na ekranu, mogue je da se preklapaju, odnosno da im se odredi visina ili irina iz kojih njihov sadraj moe izlaziti, a to moe utjecati na konaan

estetski dojam o stranici.


Poveznice u CSS-u CSS je obogatio oblikovanje poveznica. Novo je a:hover iza kojega odreujemo stil kada miem prijeemo preko poveznice ime se na jednostavan nain otvara vaan dio dizajna mrene stranice.

a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue} Treba obratiti pozornost da je poredak stavki pri definiranju poveznica fiksan a:hover mora slijediti a:link i a:visited, a a:active iza a:hover.

Dizajniran HTML obrazac u CSS-u S CSS-om nam bitno rastu dizajnerske mogunosti pa se jednostavnim zahvatima mogu ostvariti dobar estetski dojam o naim stranicama. Sljedei kod ostvaruje i fokus polja u kojem upisujemo

podatke.


Pokazivai U CSS-u moemo utjecati na izgled pokazivaa (cursors) u odreenim situacijama. Sintaksa je vrlo jednostavna i odreuje se obiljeivaem cursor i jednoj od vrijednosti.

Jedinice U (X)HTML-u imali smo vrlo ogranien nain izraavanja jedininih mjera. U CSS-u nudi se cijeli niz jedinica od kojih svaka ima svoju primjenu (preslika sa stranica W3Schools).

Najee koritene jedinice su postotak (%), piksel (px), toka (pt) i em.

Em je relativna jedinica slina postotku i koja se prikazuje ovisno o veliini fonta.


Boje se mogu prikazivati imenom boje, kroz apsolutni ili postotni sustav RGB-a te kroz heksadekadsku vrijednost. Postoje i RGBA boje koje su novije podrane (od IE 9+, FF 3+, Opera 10+ itd.) gdje se RGB-u pridodaje vrijednost prozirnosti (transparentnosti), tj. alpha ili opacity. Vrijednosti koje prozirnost moe imati jesu od 0.0 (potpuno prozirno) do 1.0 (potpuno neprozirno).

Model kutije Model kutije ili box-model jest slikoviti prikaz i nain kako se ureuje prostor oko sadraja kodiranoga u HTML-u kroz jezik CSS. Kad god imamo razliit prikaz istoga HTML-a i naruene odnose meu strukturnim elementima stranice najee ima uzroke u modelu kutije i neoptimiziranosti za

odreeni prebirnik.

Model kutije definira odnos izmeu rubova (margins), obruba (borders) i popuna (paddings), a izgleda ovako (preslika preuzeta sa W3Schools):

Pitamo se na koji e se dio odnositi bojanje pozadine (background-color) kada joj takvo to definiramo? Sa sljedee slike vidimo da se pozadinska boja odnosi na sadraj, popunu i obrub, ali ne i

na rubove.

Zbog svojstva odmicanja sadraja od obruba, za popunu ili padding govori se kao o unutarnjim marginama.

Kada bismo imali definiran okvir sa sljedeim dimenzijama, koliko bi na okvir bio ukupno irok i

visok?


Obrubi (borders) U CSS-u obruba ima razliitih oblika, a u nastavku se prikazuje njihova sintaksa i izgled.


Vrsta crte odreen je obiljeivaem border-style.

Obrubi se ne moraju nuno ureivati za sve strane (gornji, donji, lijevi i desni), nego se moe odrediti

samo za jednu od njih.

Osim to obrubu moemo urediti vrstu crte (border-style), moemo odrediti i debljinu (border-width) te boju (border-color).

Vrijednosti obiljeivaa border-width mogu biti izraene rijeima thin, medium, thick ili izraeno u jedininim mjerama.

Vrijednosti obiljeivaa border-color mogu biti izraene rijeima (npr. red, blue, yellow itd.), heksadekadsko ili RGB-om.

Model sata elimo li urediti boju naih obruba, umjesto deklariranja u vie redaka, kod se moe bitno skratiti.

Tako se umjesto sljedeega:

border-color-top: red; border-color-right: green; border-color-bottom: blue; border-color-bottom: yellow; moe zapisati i ovako:

{border-color: red green blue yellow;} Skraivanje sintaktikoga zapisa ostvaruje se standardiziranjem poretka itanja boja u odnosu na

stranice obruba. Kao model je posluio sat gdje se kazaljka kree od 12 sati (gore) prema 3 sata

(desno), zatim prema 6 sati (dolje) i na kraju do 9 sati (lijevo). To znai da se gore navedene boje

itaju da se crvena boja odnosi na gornji obrub, zelena na desni, plava na donji, a uta na lijevi obrub.

Boje je mogue i drugaije odrediti ne moramo imati sva etiri obruba u posve razliitim bojama. U gornjem primjeru pokazali smo to se dogaa kada navedemo sve etiri boje, a u nastavku vidimo koji su scenariji kada primijenimo jednu, dvije ili tri boje.

{border-color: red;} sva etiri obruba crvena

{border-color: red green;} gore i dolje crveno, desno i lijevo zeleno


{border-color: red green blue;} gore crveno, desno i lijevo zeleno, dolje plavo

Na isti nain kao to se model sata primjenjuje kod modifikacije boje obruba, tako je i kod ureivanja

debljine crta obruba.

{border-width: 5px;} sva etiri obruba 5px

{border-width: 5px 10px;} gornji i donji 5px, desni i lijevi 10px

{border-width: 5px 10px 1px;} gornji 5px, desni i lijevi 10px, donji 1px

{border-width: 5px 10px 1px 0px;} gornji 5px, desni 10px, donji 1px, lijevi bez obruba


Skraivanje sintakse moe biti i jo izraenije. Umjesto:

border-width: 10px; border-style: solid; border-color: blue; moemo zapisati i:

border: 10px solid blue; Pritom valja napomenuti da je poredak bitan te da je podatak o styleu (solid) bitan.

Rubovi (margins) Ureivanje rubova ili margina radi se na isti nain kao to smo opisali s obrubima. Jedina je razlika u

tome to rubovi nemaju pozadinsku boju.


Popuna (paddings) Situacija sa sintaksom vezano za popunu (padding) identina je s obrubom i rubom.

Model kutije Internet Explorera Internet Explorer ima svoj nain kako rauna modelom kutije, a koji se razlikuje od svih drugih prebirnika. Budui da je ovo vaan imbenik na koji moramo obratiti pozornost da bi nam stranica

bila ispravno prikazana, moramo znati vie o njemu i kako ga zaobii. Ovaj se problem manifestira

samo ako nije deklariran doctype (jer onda IE rauna po svom zadanom nainu).

Primjer razliitosti u izgledu vidi se u nastavku:

1. Mozilla Firefox

2. Chrome


3. Opera

4. Internet Explorer

Razlika je u tome to IE popunu i obrub pribraja irini sadraja.

Vie tehnikih podataka o ovome fenomenu moe se nai na sljedeoj poveznici:

http://tinyurl.com/w322t.

Ureivanje lista Spomenuli smo da (X)HTML nema velike mogunosti za ureivanje lista. U CSS-u s pomou sintakse list-style-type i vrijednostima none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin itd. moemo odrediti tip pobrojavanja stavki.


elimo li postaviti svoju sliku umjesto pretpostavljenih grafikih uzoraka, to inimo na sljedei nain:

Skraivanje zapisa sintakse fonta Budui da font, kao i neki drugi obiljeivai, imaju brojna sintaktika proirenja, zapis se moe skratiti.

Umjesto:

h2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 80%; line-height: 120%; font-family: arial, helvetica, sans-serif; } Moemo zapisati i ovako:


h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }

Ureivanje tablica Obiljeivai border-style i border-width odreuju vrstu i irinu crte posve nalik na obrube. Ono to je specifino za tablicu jest border-spacing koji radi razmak elementa od elemenata . Za border-spacing vrijedi model sata.

Takoer, moemo utjecati da se neko polje prikae ili ne prikae s pomou obiljeivaa empty-cells: show|hide;

Tablicama moemo odrediti i njegov naslov. To se radi sa caption-side s vrijednostima top (zadano), left, right ili buttom.

S pomou obiljeivaa table-layout i vrijednostima automatic (zadano) i fixed tablici moemo fiksirati irinu i odrediti da je irina polja zakljuana, odnosno da se prilagoava sadraju.


Dimenzioniranje Dimenzioniranje slui za odreivanje visina i irina. Obiljeivai koji dimenzioniraju jesu:

height visina width irina min-height minimalna visina max-height maksimalna visina min-width minimalna irina max-width maksimalna irina line-height razmak meu redcima

Razmak meu redcima ili visina retka odreen je u postotcima gdje je zadana vrijednost 100%. U donjim primjerima vidi se kako izgleda razmak od 90% i od 200%.

p {line-height: 90%} p {line-height: 200%}

Klasificiranje Klasificiranjem mijenjamo tip elementa koji moe biti blokni ili redani. Obiljeiva display: block pretvara redani u blokni (npr. da poveznice budu u vlastitim redcima), a display: inline blokni u redani (npr. da se stavke liste prikau u istome retku).

Jedna od estih uporaba promjene bloknih elemenata u redane jest radi stvaranja navigacijske liste.

Stavke navigacijske liste esto se rade s pomou lista , a kako nekada elimo da nam navigacija bude vodoravna, a ne okomita, moramo listi promijeniti tip.


Dodavanjem obiljeivaa display: inline; naa navigacija dobiva sljedei izgled:

Treba upozoriti jedan vaan aspekt pretvaranja redanoga elementa u blokni: dok nam je prije u

redanome obliku poveznica bila rije, sada u bloknome obliku cijeli pravokutnik postaje povrina

poveznice.


Nakon promjene da poveznice postanu blokne:

Plutanje Plutanje (float) tehnika je pozicioniranja strukturnih elemenata stranice. Bloknost i redanost zadaju normalni (tj. linearni) tijek prikazivanja elemenata, a to moemo naruiti s plutanjem. Plutanje je

vrlo esto u tiskanome tekstu gdje se esto zbog slika ili dodatnih sadraja ubacuju okviri na raznim

mjestima. Uoite mnotvo nelinearno prikazanih elemenata na sljedeim stranicama asopisa.


Rije je o tome da imamo mnotvo dijelova koji se ponaaju kao samostalne cjeline i koje su ubaene

u drugo tijelo teksta. Snalaenje pri itanju podrazumijeva da vidimo koji tekst predstavlja cjelinu, te

da vizualno razdvojimo jednu strukturu od druge.

Tehnika plutanja smjeta element u odnosu na nadreeni element koji utjee na druge elemente u

istoj hijerarhijskoj razini. Plutanje se odnosi na tekst u odnosu na drugi tekst, sliku prema drugoj slici,

tekst sa slikom, kontejneri meusobno itd. Elementi mogu plutati samo lijevo i desno, ne moe se

ostvariti okomito plutanje. Vrlo je vano shvatiti da plutanje ne govori samo kako se koji element

treba postaviti u odnosu na nadreeni element, nego i kako se elementi koji slijede postavljaju

prema njemu.

elimo li sprijeiti da plutajui elementi utjeu na sljedee, odnosno da se sljedei elementi ne

poravnavaju u odnosu na plutajui, rabimo sintaksu clear: both;

Slijedi primjer koda gdje blokni elementi meusobno ne plutaju.


U nastavku je prikaz kontejnera div kojemu je odreeno da pluta lijevo. U odnosu na nadreeni element (tj. body), se postavio lijevo, a njegov sljedei element prinuen je da mu doe zdesna.


Slijedi primjer sluaja da pluta lijevo, ali da nakon sebe ne utjee na druge elemente (clear: both;). U odnosu na nadreeni element (body), se lijevo postavio, a njegov sljedei element prikazuje se slobodno, tj. po prikazu koji je zadan ili koji je naslijeen.

Ovako izgleda desno plutanje kontejnera . U odnosu na nadreeni element (body), se desno postavio, a njegov sljedei element prinuen je da mu doe slijeva (jer ne moe doi zdesna).


Ovo je primjer desnoga plutanja kontejnera , ali sa ienjem plutanja nakon sebe. U odnosu

na nadreeni element (body), se desno postavio, a njegov sljedei element prikazuje se

slobodno, tj. po prikazu koji je zadan ili koji je naslijeen (a to je u sljedeemu retku).

U nastavku je prikaz slaganja teksta i slike desnim plutanjem slike.


Ovako izgleda lijevo plutanje slike s tekstom uz manje ukraavanje.

Iako se to moda ne ini na prvi pogled, tehnika plutanja smatra se naprednijom operacijom

ureivanja elemenata na stranici te ju je potrebno izuiti i izvjebati (plutanje se mora nauiti ba kao i plivanje). Vano je zapamtiti da ono emu se daje plutanje postaje blokni element. Savjetuje se

da se uvijek zadaje irina elementima koji plutaju da bi se izbjegli mogui nepredvidljivi rezultati. Neki autori napisali su da je koncept plutanja jedno od najneintuitivnijih pojmova u CSS-u te da se pogreno shvaa. Problem nije u plutanju, ve kako se primjenjuje.

Pogreno je pokuavati da svi elementi plutaju u odnosu na sve druge. Takoer, obratite pozornost

na to da se plutati moe jedino ako se nalazimo unutar neega to nas dri na okupu (inae emo

otplutati).

Poveznice na dobre materijale za daljnje uenje o plutanju:

Float Tutorial simple tutorials on CSS floats (http://tiny.cc/3hp0cw) The Mystery of CSS Float Property (http://tiny.cc/bep0cw) CSS Float Theory: Things You Should Know (http://tiny.cc/1fp0cw)

U nastavku prikazujemo plutanje kontejnera:


Primjer plutanja elemenata tipinoga dizajna: uoi!


Prvo moramo napraviti raspored po -ovima i to e plutati oko ega.

Prvi div omota irine 720px

Drugi odnosi se na glavni naslov, irina nije navedena, samo padding ime se dobiva visina.


Trei odnosi se na glavni sadraj i dodatni (sporedni) sadraj on pluta desno u odnosu na Poveznice, irina 520px.

etvrti odnosi se na poveznice on pluta lijevo u odnosu na koji obuhvaa Sadraj i Dodatni te ima irinu 200px.

Peti je glavni sadraj on pluta lijevo u odnosu na Dodatni i ima irinu 340px.

esti odnosi se na dodatni sadraj on pluta desno u odnosu na Sadraj i ima irinu 180px.


Sedmi odnosi se na zaglavlje koje ima poniteno plutanje s obiljeivaem clear: both;. irina mu nije izraena, naveden je samo padding ine se dobiva visina i irina.

Pozicioniranje Pozicioniranje je druga tehnika postavljanja elemenata na ekranu. Pozicionirati se moe statino

(zadano svojstvo koje se primjenjuje ako nije navedena vrijednost static), relativno (smjetanje u odnosu na neki drugi element; vrijednost relative), apsolutno (smjetanje u odnosu na cijelu stranicu; vrijednost absolute) i fiksno (smjetanje elementa koji je uvijek na istome mjestu bez obzira na klizanje stranice; vrijednost fixed).

Apsolutno pozicioniranje (position: absolute) s obiljeivaima top, right, bottom i left i njihovim vrijednostima u jedininim mjerama oznauje da se neki element tono postavlja u odreeni prostor na ekranu. Obratite pozornost da obiljeivai top, right, bottom i left funkcioniraju samo za apsolutno i relativno pozicioniranje.

U donjem primjeru naslov nalazit e se tono na 50. pikselu s vrha i 50. pikselu slijeva.


Uoite da apsolutnim pozicioniranjem moemo element uiniti da se preklapa s drugim elementima

ili da bude dijelom ili potpuno izvan vidljivoga dijela ekrana.

Treba biti vrlo pozoran s ovom tehnikom jer ako neto smjestite u donji desni dio vaega

irokokutnoga ekrana, to se nee vidjeti na malim razluivostima na mobitelima.


Bolji je izbor od apsolutnoga relativno pozicioniranje ili plutanje koje radi suodnos elemenata.

Relativno pozicioniranje postavlja element u odnosu na neki drugi element. Sintaksa je identina

apsolutnome pozicioniranju (position: relative;) s obiljeivaima top, right, bottom i left te vrijednostima izraenima u jedininim mjerama. Relativno se pozicioniranje primarno koristi za fina podeavanja elemenata, ne za dizajn stranice kao takve (plutanja i margine imaju vei znaaj

za to).

U donjem primjeru drugi smo okvir postavili 50 piksela s vrha i 50 piksela slijeva u odnosu na toku

gdje se on morao zadano prikazati. Taj je pomak oznaen crvenom strelicom.


Vano je napomenuti da je prostor odakle se neto relativno pomaknulo i dalje zauzet. U primjeru

koji slijedi jasno se vidi prazan prostor koji je ostavljen na mjestu naslova koji se relativno pomaknuo za 50 piksela prema gore.

Fiksno pozicioniranje koristi se kada elimo postii efekt slike koja se ne skrola.

Prazan prostor!


U sluaju preklapanja elemenata, a elimo utjecati na njihovu vidljivost, obiljeivaem z-index odreujemo vrijednosti to e ii u pozadinu, a to e biti vidljivo. Njegove vrijednosti su izraene brojano to je vei broj, indeks je vei i prikaz ima prioritet. Zadana je vrijednost 0, a ono obiljeava da se elementi ne preklapaju.


Z-indeks vrijedi samo za one elemente koji imaju postavljeno pozicioniranje.

Pozicioniranje se moe odreivati i za okomito poravnavanje s pomou obiljeivaa vertical-align s vrijednostima text-top/text-bottom/top/bottom/middle/sub/super. Ono se esto koristi za pozicioniranje teksta i slike u istome retku.

Kombiniranje obiljeivaa Pojmovi dijete (child), potomak (descentant) i brat (sibling) iz svijeta jezika za obiljeavanje kao to su (X)HTML i XML mogu stvoriti zabunu, ali ih treba razumjeti za potrebe kombiniranja obiljeja te za njihovu primjenu u CSS-u, a dalje u HTML DOM, XML DOM itd.

Prema sljedeoj shemi kaemo da:


body ima dva djeteta (child) i oni se oznauju znakom vee od (>)

body ima 13 potomaka (descendant) i oni se oznauju znakom bjeline ( )

em je stariji brat od strong (sibling) i on se oznauje znakom plusa (+)

U nastavku emo u kodu pokazati sva tri primjera. Sintaksa p > a znai da samo djeca od imaju navedeno svojstvo, tj. samo one poveznice koje su izravno podreene odlomku.

U ovome primjeru sintaksa p a znai da svi potomci imaju navedeno svojstvo, tj. sve poveznice koje su u odlomcima.


Sintaksa p + a oznauje koji je prvi brat nakon , tj. samo prva poveznica nakon odlomka.

Mogue je imati i viestruko kombiniranje obiljeivaa.

body > div > a .desno p, .lijevo p, ul {color: blue;} Sintaktiki operator > podran je od tek od IE 7, a + od IE 9.

Sveopi obiljeiva Sveopi (univerzalni) obiljeiva obiljeuje se znakom zvjezdice (*), a njime se ponitavaju zadane

vrijednosti prebirnika (najee padding i margin) u cilju da se osiguramo da emo imati isti izgled stranice budui da svi prebirnici koriste neke svoje vlastite vrijednosti.

* {margin: 0; padding: 0;}


Pseudoklase i pseudoelementi Pseudoklasi i pseudoelementi su klase i elementi koji to nisu, a odnose se na dinamiki sadraj,

najee za poveznice. Obiljeuju se dvotokom.

a:link a:visited a:focus a:hover a:active CSS3 je dovrio razvoj i standardizaciju modula obiljeivaa i donio dosta novosti kod pseudoklasa i

pseudoelemenata, a ovdje navodimo samo dio gradiva koji se odnosi na prikaz odlomka , na status tekstualnoga polja i na ureivanje retka tablice sa statusom hover.

p:first-letter prvo slovo odlomka p:first-line prvi redak odlomka p:first-child prvo dijete roditelja p:before prije sadraja odlomka p:after poslije sadraja odlomka

input:focus, textarea:focus {background: #ffc;}

tr:hover { background-color: #3d80df; color: #fff; }


Uvjetovani komentari za IE Microsoft je razvio sintaksu prebirnikih komentara koji vrijede samo za Internet Explorer, a koji su

nam vrlo korisni. Budui da su brojne inaice IE-a meusobno razliite, imamo potrebu znati koju inaicu korisnik koristi da bismo mu isporuili njemu prilagoen CSS.

Ostali prebirnici, dakle, ignorirat e ovaj kod i smatrati ga obinim komentarom.

Proirena sintaksa jest sljedea:

Primjer koritenja u praksi:


Naglaavanje autorstva u CSS-u Spomenuli smo da nije mogue zatititi svoj dizajn pisan u CSS-u. Svakoj se stranici moe vidjeti kod u HTML-u i CSS-u. elimo li raditi autorske dizajne, morali bismo kodirati mrene stranice u nekom drugom jeziku (npr. Flash i drugi jezici). Ono to moemo napraviti jest skrenuti pozornost na svoje

autorstvo tako da datoteku s kodom u CSS-u uinimo za korak ili dva dalji od oiju posjetitelja.

Ono to elimo postii jest ostaviti trag o sebi nalik na prikaz sa slike koristei @import koji uitava

kod u CSS-u.


tree poglavlje

HTML5


O HTML5 Godine 1997. zavren je razvoj HTML 4.0, a nakon ega je obustavljena radna grupa za HTML. Dva

mjeseca nakon toga radna grupa je predstavili jezik XML 1.0. Smatralo se da je proirivanje HTML 4.0

teko jednako kao i konvertiranje 4.0 u XML. Predloen je novi poetak HTML-a utemeljenim na skupvima XML oznaka, a to se dri poetkom XHTML-a u godini 1998. Tri godine nakon toga u 2001. objavljen je nacrt specifikacije XHTML 1.1.

Striktnost u tadanjem razvoju XHTML-a uvjetovana je istraivanjima koja su pokazala da 99,9% mrenih stranica sadrava barem jednu pogreku u kodiranju. Budui da prebirnici prikazuju stranice bez obzira na pogreke, vie se nitko nije trudio potivati standarde i ispravljati greke. Striktni mod

XHTML-a trebao je rijeiti taj problem.

Godine 2004. Mozilla i Opera uz neke druge zainteresirane strane predloile su evoluciju HTML 4 sa sedam znaajki (inzistiranje na sukladnosti, toleranciji na pogreke). W3C nije podrao tu inicijativu

u glasovanju, te je izjavljeno da se ne planira raditi na novome standardu pored onih koji se

trenutano razvijaju u W3C-u. Nakon toga Mozilla, Opera te drugi nastavili su raditi izvan W3C-a na novome standardu, a ta se grupa nazivala WHAT Working Group (WHATWG). Razvoj XHTML 2.0

odvijao se presporo u odnosu na rad grupe WHATWG. Godine 2006. Tim Berners-Lee, osniva W3C-a, vratio je WHATWG u rad W3C-a te se oba jezika razvijaju unutar konzorcija i od tada potjee naziv HTML5. Godine 2009. radna grupa za XHTML je obustavljena. Neki taj potez smatraju pogrenim jer

tvrde da je bit XHTML njegova strogoa te da je to ono to webu treba. Tvrdi se da nije zdravo prikazivati sadraj stranica koje su pune pogreaka, te da ih nitko ne ispravlja, a da autori nisu ni

svjesni da ih ine. Zanimljivo je uoiti da WHATWG i dalje postoji kao nezavisna grupa unato tome

to je W3C prihvatio HTML5.

HTML5 nije jedna cjelina, nego skup modula i tako se razvija (isto kao CSS3). Zavretak

standardizacije, kako se najavljuje, ne oekuje se za jo nekoliko 5 godina. Trenutano je fazi razvoja

Candidate Recommendation nakon ega slijedi Proposed Recommendation i W3C Recommendation.

Zadnja inaica HTML5 moe se vidjeti na ovoj poveznici: http://www.whatwg.org/specs/web-apps/current-work/.

Valja upozoriti da budui da se moduli stalno nadograuju, treba pripaziti imaju li prebirnici podrku

za odreenu tehnologiju.

Polazite HTML5 jesu:

neovisnost o softveru ili hardveru smanjenje potrebe za vanjskim dodatcima (pluginovima) nove znaajke razvijaju se unutar HTML-a, CSS-a, DOM-a i JS-a puna otvorenost javnosti u razvoj standarda definiranje kako se treba reagirati kada se naie na pogreku.

Validacija HTML5 nalazi se na ovim adresama, a ona je eksperimentalna jer se jezik stalno

nadograuje:

http://html5.validator.nu/ http://validator.w3.org/


HTML5 ne doputa rad s okvirima, ali doputa iframeove. Uz element rabi se i te imaju identinu primjenu.

Pitanje je kako se sada rade sidrita u razliitim okvirima ako vie nema frameseta?

Najvanije znaajke u HTML5 jesu:

1. HTML5 video: 2. HTML5 audio: 3. uvoenje crtae povrine: 4. Drag-and-Drop 5. lokalna pohrana 6. Web-radnici 7. podrka za izvanmreni rad 8. geolokacija 9. proireni HTML obrasci 10. novi semantiki elementi

HTML5 video Element kojim se poziva HTML5 video jest . Do sada se video mogao gledati iskljuivo s pomou dodataka (plugins) kao to su Adobe Flash, Apple QuickTime, MS Silverlight i RealMedia. Stari prebirnici koji ne podravaju element , jednostavno e ga ignorirati.

Kako se ubacuje YouTube video u HTML?


Odaberemo stranicu s videom koju elimo ubaciti u na HTML kod i pritisnemo na tipku DijelI.

Nakon toga samo trebamo kopirati kod i ugraditi u na kod HTML-a.

Drugi videoisjeci ubacuju se na sljedei nain:


Ova sintaksa obuhvaa da smo neki videoisjeak pretvorili u razliite formate i postavili ih sve ime

smo izbjegli mogunost da odreeni prebirnik nee moi uitati eljeli materijal. Logika prioriteta

kae da e prebirnici uitati prvi video koji e moi dekodirati. S ovim se vee i bug na iOS-u na iPadu gdje MP4 mora biti deklariran prvi jer se u suprotnome video nee moi prikazati.

Atribut controls daje prebirniku videonavigaciju (traku te tipke play i stop). Oekuje se da e autori i sami htjeti razvijati vlastitu videonavigaciju (npr. http://videojs.com/).

Atrubit poster daje naslovnu sliku videodatoteke.

Treba razlikovati tri stvari: videokodek, audiokodek i format (kontejner koji sve dri na okupu).

format MP4 ima H.264 videokodek i AAC audiokodek format WebM ima VP8 videokodek i Vorbis audiokodek format Ogg ima Theora videokodek i Vorbis audiokodek

Naalost, jo uvijek nije dogovoren zajedniki i standardni kodek zbog ega smo prinueni vie

videodatoteka s razliitim kodecima i upisivati sintaksu koju smo gore naveli.

Pretvorba video iz jednoga u drugi kodek je vrlo jednostavna i moe se odraditi preko mree:

http://video.online-convert.com/.

HTML5 audio Dosad se audio implementirao primarno kroz Flash koji je tipino bio u formatu MP3. Kao i kod

videoformata, tako i kod audioformata situacija jo nije zrela i razvijat e se: ne postoji jedan

audioformat koji svi prebirnici podravaju.

Kontejner za HTML5 audio je .

Tri su aktualna audiokodeka:

MPEG Audio Layer III (MP3) MPEG-4 Advanced Audio Codec (AAC) Vorbis

Kako se ubacuje audiodatoteka u HTML? Nain je vrlo slian ubacivanju videodatoteka s atributom

controls i potrebom konvertiranja u razliite formate.


MP3 MP3 oznauje MPEG-1 layer 3 i nije isto to i MPEG-3. Audiodatoteke s ovim kodekom spremaju se iskljuivo s nastavkom .mp3 i on je tzv. lossy-kodek, a to znai da ima gubitak kvalitete pri kodiranju. Kodek je pod vlasnikim pravima i zatien je patentima (Fraunhofer IIS i ini). Izrazito je rairen,

popularan i prihvaen, a koristi ga primarno i Flash. Smatra se sinonimom glazbe na raunalu. Meutim, rad s MP3 moe biti skup. Primjerice, distribuiramo li raunalnu igru s vie od 5000

distribucija koja u sebi koristi MP3 datoteke moramo platiti 2500 $ naknade. Programeri koji ugrade

MP3 u Flashu iskljueni su iz naplate.

MP3 nije predvieni kodek za element .

Mrena pretvorba audiosadraja mogue je napraviti na stranici http://audio.online-convert.com/.

AAC AAC znai MPEG-4 Advanced Audio Codec i moe se pohraniti u raznim formatima: .mp4, .m4a, .3gp, .aac i dr. Dizajniran je da bude nasljednik MP3 i kao i on, takoer je rije o lossy-kodeku. Vlasnik patentnih prava ja Apple i nije ga mogue koristiti besplatno. Ovo je zadani kodek na iOS-u, PS3 itd. Strunjaci ga smatraju najkvalitetnijim formatom:

vei frekvencijski raspon: uzorkovanje od 8 do 96 kHz (MP3 ima od 16 do 48 kHz) do 48 kanala (MP3 ima ili 2 kanala ili 5.1 kanala) dobra kompresija bolja kvaliteta zvuka na istom bitrateu ima mogunost hardverskoga dekodiranja

Veliki mu je nedostatak zatienost autorskih prava.

Vorbis Audiodatoteke pohranjene u ovome kodeku imaju nastavak .ogg i .oga (od tuda i esti naziv Ogg

Vorbis). Kao MP3 i AAC, i ovaj je kodek lossy.

Slian je MP3 po veliini datoteka i kvalitete, ali zaostaje kvalitetom iza H.264.


Veliki zagovornici ovoga kodeka su Mozilla i Opera, a velika mu je prednost to je nepatentiran pa ga

svi mogu koristiti. Vorbis jo uvijek nije dovoljno rairen (rijetke radiopostaje i tek mali dio raunalnih

igara ima audiosadraj kodiran u ovome kodeku). Ipak, oekuje se vei zamah jer ga je Google

prihvatio u formatu WebM.

Crtaa povrina canvas HTML5 uveo je element kojim se ostvaruje polje za izvravanje crtaih mogunosti JavaScripta.

Lokalna pohrana Lokalna pohrana znai da web-stranice mogu spremati vee koliine podataka na korisniko raunalo i kasnije ih preuzimati. Koncept je slian kolaiima, ali s veim mogunostima (kolaii ili cookiji ograniene su veliine i prebirnik ih alje svaki puta kada zatrai novu stranicu, a to predstavlja nepotrebno troenje vremena i resursa). Tim se podatcima pristupa i manipulira preko JavaScripta.

Svi koji mogu fiziki pristupiti raunalu, mogu pregledavati i mijenjati podatke u HTML5 lokalnoj pohrani. Lokalna pohrana moe biti i tekstualna, ali i kao baza ili registar s kljuevima i vrijednostima.

Svaka web-stranica moe itati i ureivati samo svoje vrijednosti, ne i tue.

Podatci se mogu spremati s obzirom na vrijeme isteka trajanja podataka ili bez vremenskoga ogranienja.


Web-radnici Web-radnici (web-workers) omoguavaju vienitno izvravanje JavaScripta to znai pokretanje vie razliitih JavaScriptnih zadataka u pozadini, odvojeno od korisnikoga suelja.

Ostale znaajke HTML5 HTML5 je omoguio podrku za izvanmreni rad web-aplikacija to e puno znaiti za sve one koji esto koriste webmail, Google Docs i druge servise.

Razvoj geolokacije predstavlja mogunost prebirnika da proita nau lokaciju s GPS-a te da omogui web-aplikacijama da ju koriste.

Zatim, HTML obrasci bit e bitno proireni. Definira se deset novih tipova unosa za pretraivanje, brojke, doseg, boje, telefonske brojeve, web-adrese, adrese e-pote i nadnevak.

Takoer, dodaje se i cijeli niz novih semantikih elemenata (umjesto nesemantikoga ) kao to su , , , , , itd.

Mikropodatci predstavljaju ubacivanje dodatne semantike u tekst radi bolje pretraivosti i

indeksabilnosti.


Google Maps u HTML-u Da bismo dodali navigaciju posjetiteljima nae stranice sve to trebamo napraviti jest odabrati

lokaciju na Google Maps te kliknuti na simbol za poveznicu (u obliku lanca).

Nakon toga kopiramo kod i ubacujemo na svoje mjesto u HTML-u.


etvrto poglavlje

CSS3


O CSS3 Pred jezik CSS3 postavljaju se visoki zahtjevi jer mora odgovoriti na potrebe suvremenih korisnika stupanj rairenosti weba, jaka konkurencija meu proizvoaima prebirnika i njihove brze nadogradnje, nove i redefinirane tehnologije, mobilno, tabletno i TV raunalstvo, spoj web-stranica sa web-aplikacijama i hibridnim tehnologijama.

Jezik CSS3 jo uvijek je u (modularnome) razvoju i ne znamo kako e izgledati na kraju. Iz toga razloga

CSS 2.1 e, vrlo vjerojatno, jo dugo biti aktualna tehnologija te se vjerujem da e obje tehnologije

supostojati (ba kao to supostoje PHP 4 i 5). Od njega se oekuje i da ima mogunosti osnovne

obradbe fotografije, da zamijeni uporabu JavaScripta na nekim mjestima, da konkurira Flashu, da se pomakne iz svijeta kodiranja u svijet programiranja.

Razvoj je zapoeo u 1999. Do oujka 2001. radna grupa W3C-a objavila je 40-ak modula. Do svibnja 2012. objavljen je 51 modul. Moduli se razvijaju nezavisno (npr. obiljeivai, pozadine, boje itd.).

Za prikaz CSS-a zadueni su browser layout engines:

Gecko (Mozilla) WebKit (Safari, Chrome) Presto (Opera) KHTML (Konqueror) Trident ili MSHTML (Internet Explorer)

Na stranicama http://www.w3.org/Style/CSS/current-work moe se vidjeti trenutani status svih modula u razvoju. U oujku 2013. gotovi su moduli: CSS colors, CSS selectors, CSS namespaces i Media Queries.

Mozilla je postavila stranicu na kojoj se prikazuje kako bi CSS3 mogao izgledati u budunosti:

https://demos.mozilla.org/.

Obiljeivai u CSS3 Pored postojeih kombinacija obiljeivaa E F (kombinator nasljednika ili descendant combinator: obiljei F koji je nasljednik od E), E > F (kombinator djeteta ili child combinator: obiljei F koji je dijete od E), E + F (kombinator susjednoga brata ili adjecent sibling combinator: obiljei F kojeg neposredno pretie E i koji imaju zajednikoga roditelja), CSS3 uveo je i novu sintaksu.

Sintaksa E ~ F oznauje kombinator opega brata ili general sibling combinator: obiljei F kojega pretie E.

h1 ~ p {color: red;}


Podrka u prebirnicima:

CSS3 uveo je i podrku za regularne izraze u obiljeivae:

E[href^="http://"] element E iji atribut href poinje sa stringom "http://" E[href$=".txt"] element E iji atribut href zavrava sa stringom ".txt" E[title*="poveznica"] element E iji atribut title sadrava string

"poveznica (osjetljivo na veliinu slova!)

Podrka novih obiljeivaa:

Prebirniki prefiksi Budui da je jezik jo uvijek u razvoju, svi prebirnici imaju svoje prefikse koji se dodaju sintaksi radi

razloga testiranja dotine tehnologije i razvoja novih rjeenja. Na taj nain takoer signaliziramo da

dotini obiljeiva jo nije standardiziran i da e nekada izgled varirati od prebirnika do prebirnika, ali

da proizvoa jami da e tako napisan obiljeiva ispravno funkcionirati u njegovu prebirniku.


Prebirniki prefiksi uvedeni su i da se sprijei loa praksa iz prolosti. Naime, Internet Explorer 5

pourio je s implementacijom modela kutije prije nego ga je W3C standardizirao, a to je imalo za

posljedicu brojne potekoe o ijim posljedicama i danas razgovaramo (vidi poglavlje o modelu

kutije). Proizvoaima je na ovaj nain puteno da testiraju svoje nestandardne obiljeivae, a kada

se implementacija uredi, prefiksi e se brisati i imat emo svi isti obiljeiva.

Zaobljivanje uglova i sjenanje Kritike dizajnu staroga CSS-a bile su, meu ostalim, da je previe iljast. Razvile su se brojne tehnike zaobljivanja uglova, a u CSS-u je stvar bitno pojednostavljena uveden je obiljeiva koji to radi za nas.

border-radius: 25px Takoer, rad sa slikovnim sjenama u CSS 2.1 pretpostavljao je tehniku koritenja slike sjene koja se

postavljala na marginu glavne slike. U CSS3 imamo obiljeiva koji to bitno pojednostavljuje i radi

umjesto nas.

box-shadow: 5px 5px 0 gray Sjenanje teksta jednako je jednostavno:

text-shadow: 5px 5px 5px #f00

Prozirnost CSS3 uvodi mogunost obradbe fotografije uvoenjem prozirnosti (transparentnosti). Dosad smo morali sliku prethodno obraditi, a ovako sada imamo mogunost i dinamike promjene kroz kod. etvrta vrijednost RGBA omoguuje prozirnost 0 je potpuno prozirno, a 1 neprozirno.


Valja razlikovati prozirnost preko RGB-a u gornjemu primjeru i opacityja u donjem. Uoite da su rijei trea povrina u donjem primjeru izblijedjele to znai da opacity radi prozirnost svega, a ne samo boja.


Internet Explorer 6-8 ne podravaju prozirnost pa za njega moramo pribjegavati drugaijim tehnikama. Rjeenje je http://kimili.com/journal/rgba-hsla-css-genera

Documents

HTML skripta 2013/2014