HTML Skripta 2013/2014

PRIRUNICI TEHNIKOG VELEUILITA U ZAGREBU
MANUALIA POLYTECHNICI STUDIORUM ZAGRABIENSIS
TOMISLAV STOJANOV UVOD U (X)HTML I CSS
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
2013 T. Stojanov: Skripta UHC
stranica 2
Uvod u (X)HTML i CSS

Tomislav Stojanov 16. 12. 2012.
skripta
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) 2013 T. Stojanov: Skripta UHC stranica 3
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 2013 T. Stojanov: Skripta UHC stranica 4
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 2013 T. Stojanov: Skripta UHC stranica 5
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
stranica 6
prvo poglavlje
HTML 4 i XHTML
stranica 7
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 <b> <b></b> <text:span stylename="bold">1</text:span> {font-weight: bold} '''primjer''' RTF HTML XHTML ODF CSS 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.
stranica 8
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. <h1>) 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 <br/> (break ili prelazak u novi redak), <hr/> (horizontal rule ili ispisivanje vodoravne crte) itd. Ono to oznaku <h1> 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. 2013 T. Stojanov: Skripta UHC stranica 9
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: <i> (ukoeno), <b> (podebljano), <s> ili <strike> (prekrieno), <big> (uveano), <small> (umanjeno), <u> (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: <h1><h6> razne vrste naslova prema kojima trailice semantiki indeksiraju dokument <em> ukoena slova <strong> podebljana slova <abbr> skraenice <address> adrese <acronym> kratice <dfn> definicija <var> promjenjivica <blockquote> ili <cite> navod <code> 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 <blockquote> 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 <q>. 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. <q lang="fr"> umjesto vrijednosti fr, moe se staviti us, uk, hr itd.
stranica 10
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.
stranica 11
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 <p> zapoinje odlomak, a </p> zavrava). Jednostruke su oznake, primjerice, <br/> i <hr/> 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 <p class="naslov"> 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
stranica 12
<bgcolor>, <center>, <font face> 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.
stranica 13
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:
stranica 14
Zaglavlje
U zaglavlju (<head>) nalaze se metapodatci stranice ili podatci o podatcima. Oni se upisuju u element <meta>. Tih tipova podataka ima dosta i oni se i dalje razvijaju. Neki od najeih su: 1. Podatak o kljunim rijeima i opisu stranice. <meta name="keywords" content="xml,html"/> <meta name="description" content="O HTML-u"/> 2. Podatak o autoru ili vremenu ureivanja stranice. <meta name="author" content="Ivo Ivi"/> <meta name="revised" content="drugo itanje: Franjo Tahi, 2012-1113"/> 3. Podatak o aplikaciji koja je generirala kod. <meta name="generator" content="Dreamweaver MX"/> 4. Podatak o kodnome prikazu teksta. <meta http-equiv="content-language" content="hr"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 5. Podatak o automatskome osvjeivanju stranice. Vrijednost contenta izraena je u sekundama. <meta http-equiv="refresh" content="5"/> 6. Podatak o preusmjerivanju stranice i koliko brzo. <meta http-equiv= "refresh" content= "5;url=http://www.tvz.hr/">
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. <p>, <ol>, <li>, <h1>), a redani se prikazuju u nastavku, tj. linearno (npr. <a>, <em>, <strong>).
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. <frameset cols="25%,75%"> <frame src="prvi.html"> <frame src="drugi.html"> </frameset> Stranica koja odreuje kako se okviri prikazuje ne sadrava <body>, nego samo definiciju okvira.
stranica 15
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: <frame noresize="noresize" src="nesto.html"/> 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. 2013 T. Stojanov: Skripta UHC stranica 16
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 <body>, a ne unutar frameseta. Njegov atribut src definira stranicu koja se treba uitati u njemu. <iframe src="tekst.html" width="400" height="200"></iframe> 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. <a href="http://www.tvz.hr/">Klikni za posjet stranicama TVZ-a</a> <a href="D:\moj_rad\">Lokalna datoteka</a> 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. <a href="druga.html"> relativna poveznica za dokument u istoj mapi <a href="../druga.html"> relativna poveznica za dokument u nadreenoj mapi <a href="2013/druga.html"> 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. <a href="#"> Otvaranje stranice u novome prozoru (ili kartici) prebirnika radi se s pomou atributa target="_blank". <a href="http://www.tvz.hr" target="_blank">Poveznica</a> 2013 T. Stojanov: Skripta UHC stranica 17
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. href="mailto:mirko@mirkovic.hr? cc=marko@markovic.hr& subject=Javljanje& body=Pozdrav"> Gornja sintaksa, osim to upisuje adresu e-pote mirko@mirkovic.hr 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). <a href="glazba/demo.mp3">Preuzimanje pjesme.</a> 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. <a href="#poglavlje_1">Klikni za unutarnji skok</a> <a name="poglavlje_1"></a> Obratite pozornost da atribut name nema znak ljestvi, kao i da je poveznica prazna. elimo li raditi fragmente meu razliitim okvirima, sintaksa jest sljedea <a href="okvir_1.html#a" target="xy">Poveznica</a> 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: <a
stranica 18
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 <head> se postavlja sintaksa: neanimirana ikona: <link rel="shortcut icon" href="favicon.ico"> animirana ikona: <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" type="image/gif" href="animated_favicon1.gif">
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: 2013 T. Stojanov: Skripta UHC stranica 19
<img src="slika.jpg"/>
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=""). <img src="slika.jpg" alt="semantika informacija" title="ekranska informacija" />
stranica 20
Slike se postavljaju kao poveznice na nain da ih se okrui elementom <a href>. <a href="http://www.tvz.hr/"> <img src="tvz.png"/> </a>
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 <ul type="circle"> Ureena lista izgleda ovako: <ol> <li>Prvo</li> <li>Drugo</li> <li>Tree</li> stranica 21
</ol>
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. <ol type="A"> <li>Prvo</li> <li>Drugo</li> <li>Tree</li> </ol> Element <ol> 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. <ol type="I" start="7"> Neureena lista izgleda ovako: <ul> <li>Prvo</li> <li>Drugo</li> <li>Tree</li>
</ul>
Definicijska lista dodatno odreuje stavku liste s elementom <dd>. Ta je lista izvorno zamiljena kao strukturni opis nekoga rjenika ili pojmovnika. <dl> <dt>Enchanting</dt> <dd>Poboljavanje svojstava</dd> <dt>Tailoring</dt> <dd>Krojenje</dd> <dt>Jewelcrafting</dt> <dd>Draguljarstvo</dd> </dl> Liste se mogu gnijezditi (liste unutar lista). <ul> <li>Prva stavka</li> <ul> <li>Ubaena stavka 1</li> <li>Ubaena stavka 2</li> </ul> <li>Druga stavka</li> </ul>
Odlomci
Tekst se u HTML-u upisuje u elementu <p> 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.
stranica 22
Meutim, elimo li doista prikazati prazan prostor, umjesto odlomka <p> trebamo postaviti <pre> 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.
stranica 23
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:
stranica 24
HTML5 zaglavlje:
4. definirani font u prebirniku
5. font instaliran na OS-u
stranica 25
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>, <caption>, <th> (table heading), <tr> (table row) i <td> (table definition). Element <table> 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 <tr> odreuje se redak, a <td> polje u retku. Imamo li potrebe za metapoljima u tablici, npr. za opisom to se u kojem stupcu definira, umjesto <tr> rabimo <th>. Ovako to izgleda u praksi:
stranica 26
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 <title> i <alt>. <border> odreivanje okvira tablici <bgcolor> odreivanje pozadinske boje tablice <width> odreivanje irine tablice <height> odreivanje visine tablice <align> odreivanje vodoravnoga poravnavanja tablice <valign> odreivanje okomitoga poravnavanja tablice <background> odreivanje pozadinske slike tablice <cellpadding> odreivanje odmaka teksta od ruba polja <cellspacing> odreivanje odmaka polja meu sobom stranica 27
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.
stranica 28
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 <form>. 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.
stranica 29
Viestruki izbor padajuega izbornika radi se s pomou sljedeega koda: <select multiple="multiple"> Visina padajuega izbornika: 2013 T. Stojanov: Skripta UHC stranica 30
<select size="size"> Onemoguen izbor: <select disable="disable">
stranica 31
drugo poglavlje
CSS 2.1
stranica 32
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 <head> 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. 2013 T. Stojanov: Skripta UHC stranica 33
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 <head> u HTML-u u kojem se nalazi <style>
2. unutar oznake u HTML-u
3. u vanjskoj datoteci sa .css nastavkom 2013 T. Stojanov: Skripta UHC stranica 34
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. <strong> rezultira podebljanim slovima, <em> 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
stranica 35
Po mjestu definiranja izgleda, prioriteti su poslagani na sljedei nain: 1. 2. 3. 4. prebirnike zadane vrijednosti (browser default) vanjski CSS CSS unutar kontejnera <head> 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. <link href="/css/dizajn.css" title="glavni dizajn" type="text/css" rel="stylesheet" media="screen,projection,tv" /> <link href="/css/dizajn2.css" title="ispis" type="text/css" rel="stylesheet" media="print" /> 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.).
stranica 36
Sintaksa
Osnovna sintaksa CSS-a jest sljedea: obiljeiva {svojstvo: vrijednost;} selector {property: value;} Na primjeru HTML-ova elementa <p> 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. 2013 T. Stojanov: Skripta UHC stranica 37
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 <footer>, <header>, <nav>, <section> 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: <h1 class="desno">Naslov ide udesno</h1> Kada su klase pisane samostalno odnose se na cijeli .desno {text-align: right;} U (X)HTML-u poziva se na identian nain: <h1 class="desno">Veliki naslov udesno</h1>
stranica 38
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.: <div style=""> <span style=""> <div class=""> <span class=""> <div id=""> <span id=""> <div title=""> <span title=""> 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 <div>). 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.
stranica 39
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.
stranica 40
stranica 41
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.
stranica 42
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 RGBu 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?
stranica 43
Obrubi (borders)
U CSS-u obruba ima razliitih oblika, a u nastavku se prikazuje njihova sintaksa i izgled.
stranica 44
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 (borderwidth) 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 2013 T. Stojanov: Skripta UHC stranica 45
{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
stranica 46
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.
stranica 47
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
stranica 48
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.
stranica 49
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: 2013 T. Stojanov: Skripta UHC stranica 50
h2 { font: italic small-caps bold 80%/120% arial, helvetica, sansserif; }
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 <table> od elemenata <td>. Za border-spacing vrijedi model sata. Takoer, moemo utjecati da se neko polje prikae ili ne prikae s pomou obiljeivaa emptycells: 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.
stranica 51
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 <ul>, a kako nekada elimo da nam navigacija bude vodoravna, a ne okomita, moramo listi promijeniti tip. 2013 T. Stojanov: Skripta UHC stranica 52
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.
stranica 53
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.
stranica 54
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.
stranica 55
U nastavku je prikaz kontejnera div kojemu je odreeno da pluta lijevo. U odnosu na nadreeni element (tj. body), <div> se postavio lijevo, a njegov sljedei element prinuen je da mu doe zdesna.
stranica 56
Slijedi primjer sluaja da <div> pluta lijevo, ali da nakon sebe ne utjee na druge elemente (clear: both;). U odnosu na nadreeni element (body), <div> 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 <div>. U odnosu na nadreeni element (body), <div> se desno postavio, a njegov sljedei element prinuen je da mu doe slijeva (jer ne moe doi zdesna).
stranica 57
Ovo je primjer desnoga plutanja kontejnera <div>, ali sa ienjem plutanja nakon sebe. U odnosu na nadreeni element (body), <div> 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.
stranica 58
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:
stranica 59
stranica 60
stranica 61
Primjer plutanja elemenata tipinoga dizajna:
uoi!
stranica 62
Prvo moramo napraviti raspored po <div>-ovima i to e plutati oko ega.
Prvi div omota irine 720px
Drugi <div> odnosi se na glavni naslov, irina nije navedena, samo padding ime se dobiva visina.
stranica 63
Trei <div> odnosi se na glavni sadraj i dodatni (sporedni) sadraj on pluta desno u odnosu na Poveznice, irina 520px.
etvrti <div> odnosi se na poveznice on pluta lijevo u odnosu na <div> koji obuhvaa Sadraj i Dodatni te ima irinu 200px.
Peti <div> je glavni sadraj on pluta lijevo u odnosu na Dodatni i ima irinu 340px.
esti <div> odnosi se na dodatni sadraj on pluta desno u odnosu na Sadraj i ima irinu 180px.
stranica 64
Sedmi <div> 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 <h2> nalazit e se tono na 50. pikselu s vrha i 50. pikselu slijeva.
stranica 65
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.
stranica 66
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.
stranica 67
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 <h2> koji se relativno pomaknuo za 50 piksela prema gore.
Prazan prostor!
Fiksno pozicioniranje koristi se kada elimo postii efekt slike koja se ne skrola.
stranica 68
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.
stranica 69
stranica 70
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:
stranica 71
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 <p> 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.
stranica 72
Sintaksa p + a oznauje <a> koji je prvi brat nakon <p>, 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;}
stranica 73
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 <p>, na status tekstualnoga polja <focus> i na ureivanje retka tablice sa statusom hover. p:first-letter p:first-line p:first-child p:before p:after prvo slovo odlomka prvi redak odlomka prvo dijete roditelja <p> prije sadraja odlomka poslije sadraja odlomka
input:focus, textarea:focus {background: #ffc;}
tr:hover { background-color: #3d80df; color: #fff; }
stranica 74
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:  gte IE 7]>samo IE 7 i vii <![endif]--> lt IE 9]>samo IE manji od 9 <![endif]--> lte IE 8]>samo IE 8 ili manji <![endif]--> gt IE 6]>samo vii od IE 8 <![endif]-->
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.
stranica 76
tree poglavlje
HTML5
stranica 77
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/webapps/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/ stranica 78
HTML5 ne doputa rad s okvirima, ali doputa iframeove. Uz element <iframe> rabi se i <object> te imaju identinu primjenu. Pitanje je kako se sada rade sidrita u razliitim okvirima ako vie nema frameseta?
Najvanije znaajke u HTML5 jesu: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. HTML5 video: <video> HTML5 audio: <audio> uvoenje crtae povrine: <canvas> Drag-and-Drop lokalna pohrana Web-radnici podrka za izvanmreni rad geolokacija proireni HTML obrasci novi semantiki elementi
HTML5 video
Element kojim se poziva HTML5 video jest <video>. 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 <video>, jednostavno e ga ignorirati. Kako se ubacuje YouTube video u HTML? 2013 T. Stojanov: Skripta UHC stranica 79
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:
stranica 80
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 <audio>. 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.
stranica 81
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 <video>. 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. 2013 T. Stojanov: Skripta UHC stranica 82
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 <canvas> kojim se ostvaruje polje za izvravanje crtaih mogunosti JavaScripta. <canvas id="crtanje" width="200" height="100"></canvas>
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.
stranica 83
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. <input <input <input <input <input <input <input <input type="search"> type="number"> type="range"> type="color"> type="tel"> type="url"> type="email"> type="date">
Takoer, dodaje se i cijeli niz novih semantikih elemenata (umjesto nesemantikoga <div>) kao to su <article>, <summary>, <figure>, <footer>, <nav>, <section> itd. Mikropodatci predstavljaju ubacivanje dodatne semantike u tekst radi bolje pretraivosti i indeksabilnosti.
stranica 84
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.
stranica 85
stranica 86
etvrto poglavlje
CSS3
stranica 87
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;}
stranica 88
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.
stranica 89
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.
stranica 90
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.
stranica 91
Internet Explorer 6-8 ne podravaju prozirnost pa za njega moramo pribjegavati drugaijim tehnikama. Rjeenje je http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ i generiranje koda s pomou filtra koje IE koristi.
stranica 92
Prebirnici
Engleski izraz browser zapravo znai prebiranje pa se on prevodi u hrvatski u doslovnome znaenju kao prebirnik. Dosadanji uvrijeeni termin preglednik prije bi se odnosio na viewer. Prebirnici igraju veliku ulogu pri uenju HTML-a i CSS-a jer (jo uvijek) predstavljaju mjesto na koje moramo posebno obraati pozornost. Naime, zbog naslijeenih razloga i problema nejedinstvena prikaza istoga koda u razliitim prebirnicima, kadto moramo pisati vie koda u CSS-u od kojih se jedan odnosi na jedan prebirnik ili razluivost, a drugi na drugi prebirnik i razluivost. elimo li raditi mrene stranice koje e biti vidljive svima i na nain na koji mi elimo da one budu vidljive, moramo se prilagoditi razliitim praksama i standardnima. Prebirnici su vie od obinih ljuski (shell) za prebiranje po internetu. U njihov se razvoj ulae mnogo pa je i oekivano da je konkurencija meu njima tako izraena. Oekuje se da e prebirnici imati sve vaniju ulogu u naim operativnim sustavima, a mogue je i da postanu operativni sustavi kao takvi (web OS). Prebirnici su postali i igrae infrastrukture (cloud gaming) kao i nositelji uredskih aplikacija (npr. Google Docs, MS Office 365).
Razlike meu njima postoje pa korisnici odabiru prema svojim kriterijima. Mi se na kolegiju primarno sluimo Mozillom Firefox kao predstavnikom prebirnika koji je iroko prihvaen u akademskoj zajednici.
Testiranje mrenih stranica

Velik je broj web-servisa koji testiraju mrene stranice, ali meu njima bismo izdvojili nekoliko najpoznatijih. 1. http://acid3.acidtests.org/ testira podranost i usklaenost s internetskim standardima
2. http://tools.pingdom.com/ brzina uitavanja
stranica 93
3. http://validator.w3.org/ podranost i usklaenost s internetskim standardima
4. http://nibbler.silktide.com/ razni testovi
stranica 94
5. http://gtmetrix.com/ razni testovi
stranica 95
Literatura
Knjige Mark Pilgrim: Dive Into HTML 5 (http://diveintohtml5.org/) Mark Pilgrim: HTML 5. Spreman za uporabu. IT Expert & OReilly, Dobar Plan 2010. (prijevod na hrvatski naslova HTML 5. Up and Running) CSS Mastery: napredna Web rjeenja, OReilly, 2006., 280 str. (prevedeno na hrvatski) CSS Cookbook, OReilly, 3. izd, 2009., 736 str. CSS: The Definite Guide, OReilly, 3. izd., 2006. CSS: The Missing Manual, OReilly, 2009. The Book of CSS, No Starch Press, 2011.
Tutorijali W3Schools http://www.w3schools.com/ (poglavlje HTML, HTML5, CSS i CSS3) http://www.html5rocks.com tutorijali za naprednije
Mjeseni asopisi 1. Mrea zadovoljavajua kvaliteta priloga, okrenutost poslovnome sektoru, teme iroko informatike, esto infrastrukturne, rjee o webdizajnu i razvoju weba
2. Vidi okrenutost webu, prepoznatljivost i tradicija u radu s dizajnom, iri i inovativni pristup (portal, web-aplikacija, godinja nagrada za web, dostupnost arhive akademskoj zajednici u RH itd.).
3. dotNet visokoprofesionalni i visokousmjereni na razvoj weba, aktualan i suvremen, okrenutost razvijateljima i dizajnerima, slabo dostupan (ponajprije Zinio i Newsstand)
stranica 96

HTML Skripta 2013/2014

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Skripta 2013/2014

Cargado por

Copyright:

Formatos disponibles

PRIRUNICI TEHNIKOG VELEUILITA U ZAGREBU

MANUALIA POLYTECHNICI STUDIORUM ZAGRABIENSIS

TOMISLAV STOJANOV UVOD U (X)HTML I CSS

Tehniko veleuilite u Zagrebu Informatiko-raunarski odjel

Autor Tomislav Stojanov, predava

2013 T. Stojanov: Skripta UHC

Uvod u (X)HTML i CSS

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Kodiranje, skriptiranje i programiranje

Razlika sadraja i prikaza

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Blokni i redani elementi

2013 T. Stojanov: Skripta UHC

Vjeba s okvirima: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols. 2013 T. Stojanov: Skripta UHC stranica 16

2013 T. Stojanov: Skripta UHC

Primjer pozivanja s atributom target:

Ikona u adresnoj traci (favicon)

Atributi alt i title

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Ovako to izgleda u prebirniku:

2013 T. Stojanov: Skripta UHC

Prikaz hrvatskih grafema

2. kodni prikaz datoteke s kodom u HTML-u

3. kodni prikaz zaglavlja koda u HTML-u HTML 4.01 zaglavlje:

2013 T. Stojanov: Skripta UHC

4. definirani font u prebirniku

5. font instaliran na OS-u

2013 T. Stojanov: Skripta UHC

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

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Obrasci (forme) u HTML-u

2013 T. Stojanov: Skripta UHC

<select size="size"> Onemoguen izbor: <select disable="disable">

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

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

2. unutar oznake u HTML-u

3. u vanjskoj datoteci sa .css nastavkom 2013 T. Stojanov: Skripta UHC stranica 34

2013 T. Stojanov: Skripta UHC

CSS media types

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Elementi div i span

2013 T. Stojanov: Skripta UHC

Dizajniran HTML obrazac u CSS-u

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

2013 T. Stojanov: Skripta UHC

Model kutije Internet Explorera