Uvod U (X)Html I Css

PRIRUČNICI TEHNIČKOG VELEUČILIŠTA U ZAGREBU

MANUALIA POLYTECHNICI STUDIORUM ZAGRABIENSIS

TOMISLAV STOJANOV

UVOD U (X)HTML I CSS

Nakladnik

Tehničko veleučilište u Zagrebu

Informatičko-računarski odjel

Autor

Tomislav Stojanov, predavač

Recenzenti

prof. dr. sc. Zdravko Dovedan Han

prof. dr. sc. Hrvoje Stančić

Objavljivanje je odobrilo Stručno vijeće Tehničkog veleučilišta u Zagrebu,

odlukom broj: 1407-6/13 od 26. ožujka 2013. godine.

Skripta

CIP zapis dostupan u računalnom katalogu

Nacionalne i sveučilišne knjižnice u Zagrebu pod brojem 839764

ISBN 978-953-7048-27-3

2013 © T. Stojanov: Skripta – UHC stranica 2

Uvod u (X)HTML i CSS skripta

Tomislav Stojanov 16. 12. 2012.

Cilj kolegija: „Upoznati studente s teoretskim i praktičnim radom u HTML-u, XHTML-u i CSS-u, osnovnim jezicima za obilježavanje (markup jezicima) sadržaja i izgleda na webu. Za uspješno praćenje kolegija nije potrebno prethodno znanje o webu kao ni poznavanje rada u suvremenim programima za grafičku izradbu internetskih stranica.” (Iz sinopsisa kolegija) 2013 © T. Stojanov: Skripta – UHC stranica 3

Sadržaj

HTML 4 i XHTML ...... 7 Jezici za obilježavanje ...... 8 Kodiranje, skriptiranje i programiranje ...... 9 Razlika sadržaja 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 redčani 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 Pokazivači ...... 42 Jedinice ...... 42 Model kutije ...... 43 Obrubi (borders) ...... 44 Model sata ...... 45 Rubovi (margins) ...... 47 Popuna (paddings) ...... 48 Model kutije Internet Explorera ...... 48 Uređivanje lista ...... 49 Skraćivanje zapisa sintakse fonta ...... 50 Uređivanje tablica ...... 51 Dimenzioniranje ...... 52 Klasificiranje ...... 52 Plutanje...... 54 Pozicioniranje ...... 65 Kombiniranje obilježivača...... 71 Sveopći obilježivač ...... 73 Pseudoklase i pseudoelementi ...... 74 Uvjetovani komentari za IE ...... 75 Naglašavanje autorstva u CSS-u ...... 76 HTML5 ...... 77 O HTML5 ...... 78 HTML5 video ...... 79 HTML5 audio ...... 81 MP3 ...... 82 AAC ...... 82 Vorbis ...... 82

Crtaća površina canvas ...... 83 Lokalna pohrana ...... 83 Web-radnici ...... 84 Ostale značajke HTML5 ...... 84 Google Maps u HTML-u ...... 85 CSS3 ...... 87

2013 © T. Stojanov: Skripta – UHC stranica 5

O CSS3...... 88 Obilježivači u CSS3 ...... 88 Prebirnički prefiksi ...... 89 Zaobljivanje uglova i sjenčanje ...... 90 Prozirnost ...... 90 Prebirnici ...... 93 Testiranje mrežnih stranica ...... 93 Literatura ...... 96

HTML 4 i XHTML

Jezici za obilježavanje Jezici za obilježavanje ili markup language obilježavaju tekst (primarno, ali ne nužno samo tekst) – strukturno, grafički, kontekstualno, formulativno i funkcionalno. Primjeri:

• SGML – za obilježavanje općenitih dokumenata • HTML – za obilježavanje mrežnoga teksta • XHTML – jedan od jezika koji su se razvili iz HTML-a • RTF – za obilježavanje teksta i njegova oblikovanja • ODF – za obilježavanje teksta i njegova oblikovanja • CSS – za uređivanje izgleda • XML – za razmjenu podataka • LaTeX – za uređivanje tehničke i znanstvene dokumentacije • DocBook – za semantičko kodiranje tehničke dokumentacije • Wikitext – za oblikovanje enciklopedijskoga wiki-teksta • MathML – za matematiku • MusicML – za obilježavanje glazbenoga zapisa • TEI – za obilježavanje 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 sučelja

Jezike za obilježavanje mogli bismo podijeliti i sadržajno na dokumentne (Document Markup Language), vektorske, na one koje služe za kodiranje aplikativnog sučelja, za razvijanje web-servisa (Web Service Markup Language), za općenitu namjenu itd.

Na primjeru obilježavanja teksta podebljanim slovima (bold) ovako bi izgleda zapis u različitim sintaksama:

• \b – RTF • – HTML • … – XHTML • 1 – ODF • {font-weight: bold} – CSS • '''primjer''' – wiki-sintaksa Prema tipu jezici za obilježavanje dijele se na prezentacijske, deskriptivne (logičke ili strukturne) i na proceduralne (fizičke). Razlika među njima je na razini opisa i odvojenosti deklaracija od procedura.

Prezentacijski su jezici za obilježavanje, primjerice, RTF, DOCX i CSS s pomoću kojih vizualiziramo svoj sadržaj i on je najčešće skriven od korisnika. Deskriptivni jezici su, primjerice, HTML i XML s pomoću kojih opisujemo podatke. Proceduralni jezici poput LaTeX-a i PostScripta zovu se tako jer uključuju 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 upućujemo kakav on izgled treba poprimiti, nego samo konstatiramo njegovu „naslovnost“. Za tu se svrhu služimo prezentacijskim jezikom – CSS-om. U svojoj ranoj fazi HTML je služio i za jednu i za drugu primjenu, tj. on je bio i prezentacijski i deskriptivni, ali se razvojem tehnologije i shvaćanjem potrebe odvajanja izgleda od sadržaja to dokinulo. I danas u HTML-u postoje oznake koje su upućivale 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 način pretvara pojmovnost naslova u prikaz u određenome fontu i veličini.
Jezika za obilježavanje ima mnoštvo i njihov se broj povećava. Široko rasprostranjeni jezici za obilježavanje jesu i JMBG, OIB, automobilske registracijske pločice itd. Oni su formativni i strukturirani zapisi o građanima ili vozilima u kojima su sažetom sintaksom navedena važna njihova svojstva. Za jezike za obilježavanje važno je da imaju dogovoreni skup obilježja i definiranu sintaksu.
U primjeru HTML-a kao jezika za obilježavanje sav je tekst okružen oznakama (eng. tags ili tagovima) koje ga strukturno opisuju.
Kodiranje, skriptiranje i programiranje Razlika kodiranja, skriptiranja i programiranja postoji iako se često terminološki ne provodi pa se govori o „programiranju stranica u HTML-u“.
Programiraju se instrukcije u želji da predvidimo moguće ishode i sljedove izvršavanja. Tipični 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 sadržaja i prikaza Razlika sadržaja (content) i prikaza (layout) u svijetu HTML-a i CSS vrlo je izrađena i treba voditi računa da se ona svlada. Ona uvjetuje gdje završava HTML i počinje CSS. U ranoj fazi razvoja HTML-a on je imao ulogu i opisa strukture stranice i grafičkoga uređenja. Uvidjelo se da to nije dobar put i da se mora odvojiti jedno od drugoga te da mora postojati zasebni jezik za grafičko oblikovanje.
Danas je popularno govoriti o semantičkome webu, tj. o naglasku na ukodiravanju semantičkih podataka o svemu za što je potrebno dati dodatnu obavijest, a što je računalno iskoristivo. To je naglasak na webu koji je okrenut sadržaju i koji „zna“ što će sa značenjem. Semantički web započinje sa semantičkim oznakama i kodiranju značenjskih podataka, počevši od atributa alt pa sve do optimizacije stranice za tražilice.
2013 © T. Stojanov: Skripta – UHC stranica 9
Željeli bismo da treće aplikacije koje rade s našim stranicama što „pravilnije“ obrađuju građu (npr. servisi Readability, InstaPaper itd.), da osobe oštećena vida također mogu pristupati našemu tekstu, da podržavamo izmjenjivost sadržaja među web-servisima i aplikacijama, da tražilice dobro indeksiraju sadržaj itd.
Nasuprot semantičkim oznakama, ekranske oznake pripadaju kodu HTML-a koji se sve više napuštaju. Neke od njih su: (ukošeno), (podebljano), ili (prekriženo), (uvećano), (umanjeno), (podvučeno) i dr. Sve te oznake rade ono što bi trebale – čine da nam riječi imaju izgled kako mi to želimo, međutim to je isključivo ekranska perspektiva bez značenja. Odgovarajući semantički obojeni elementi jesu:
•
…
– razne vrste naslova prema kojima tražilice semantički indeksiraju dokument • – ukošena slova • – podebljana slova • – skraćenice •
– adrese • – kratice • – definicija • – promjenjivica • ili – navod • – kod Drugim riječima, sve ove oznake značenjski opisuju vrstu teksta koji okružuju (određuju da je riječ o kodu, citatu, kratici itd.). Događalo se da su se, primjerice, oznake pogrešno koristile. Budući da je dotični element tekst prikazivao na određeni vizualni način, počelo ga se koristiti i za druge primjere kada nije bilo riječ o navodu. Semantičkim oznakama pripadaju i navodnici koji bi se trebali obilježavati elementom . Oni su semantički jer daju dodatni podatak o navodnicima. Naime, jezici se međusobno razlikuju po tipu navodnika. Kada se učitavaju stranice čiji je tekst obilježen ovim oznakama, korisnik će vidjeti one navodnike čiji je jezik postavljen kao radni u prebirniku. Tako će oznaka navodnika biti različito prikazana ovisno o hrvatskome, francuskome ili engleskome jezičnom sučelju. Tip navodnika može se i zadati atributom lang gdje kao vrijednost može biti postavljena dvoslovna oznaka jezika. – umjesto vrijednosti fr, može se staviti us, uk, hr itd. 2013 © T. Stojanov: Skripta – UHC stranica 10 Nastavak Datoteka s kodom u HTML-u ima nastavak .html ili .htm. Ako nismo u mogućnosti stvorenoj datoteci promijeniti nastavak, obratite pozornost da se u operativnome sustavu Windows promijeni zadano svojstvo neprikazivanja nastavaka. O HTML-u HTML označuje HyperText Markup Language ili „jezik za obilježavanje 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 računalnim pojmovima (npr. Hyper Links, Hyper Reference) u želji da se što je moguće više razlikuje od „običnoga“ teksta, poveznice ili referencije. Nastavak dokumenta u HTML-u je html ili htm. Svaki dokument u HTML-u tekstualna je datoteka i uređuje se u uređivaču teksta. (Na vježbama 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 pomoći (eng. help files) u formatu CHM (Microsoft Compiled HTML). Riječ je o sada već napuštenome formatu koji je izmislio Microsoft za potrebe pisanja priručnika o radu s određenom tehnologijom. Naslijedio ga je drugi jezik za obilježavanje 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 sadržaj, indeks, tražilicu te druge funkcije. Mogli bismo govoriti o CHM-u kao o ranoj fazi razvoja e-knjige. 2013 © T. Stojanov: Skripta – UHC 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 način da ih opisuju pa ih možemo nazvati metapodatcima. U zaglavlju se navode brojni podatci o samoj mrežnoj stranici, autoru, kodnoj prikazbi, ključnim riječima itd. Ono što je navedeno među 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 početni i završni član (npr. oznakom započinje odlomak, a završava). Jednostruke su oznake, primjerice, i koje zbog svoje naravi ne okružuju 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 piše uvijek unutar početnoga člana oznake. Atribuirana oznaka označuje 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 pomoću kojega prebirnik zna koji jezik može očekivati. Doctype određuje je li riječ o HTML-u, XHTML-u, XML-u, SGML-u te u kojoj je inačici kod pisan. Doctype je zapravo poseban jezik za obilježavanje 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 najkorišteniji i odnosi se na sintaksu koja ne isključuje valjanost starih oznaka i elemenata. Primjerice, tranzicijski mod dopušta i dalje korištenje nepreporučenih elemenata 2013 © T. Stojanov: Skripta – UHC stranica 12 , , itd. Ona se smatra „prijelaznom“ prema striktnoj ili „čistoj“ sintaksi i ponajprije je izmišljen radi razloga kompatibilnosti prema starome kodu. Striktni mod ne dopušta valjanost oznaka, elemenata ili sintakse koja nije podudarna s njegovim standardom. Ovaj je mod onaj koji se preporučuje 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 način gradnje web-stranice s pomoću višestrukih okvira ili dokumenata u HTML-u. Više o tome u zasebnome poglavlju. XHTML ima identične tipove dokumenta kao i HTML 4, ali se sintaksa ponešto razlikuje. Kao što se vidi, svaki XHTML dokument započinje s osnovnom deklaracijom koja potječe iz svijeta XML-a, a po čemu se vidi da je XHTML zapravo XML dokument. Prvi redak određuje inačicu XML-a kojom je XTHML pisan i koja mu je znakovna prikazba. Drugi redak određuje tip dokumenta i koja je adresa datoteke prema kojoj se taj jezik usklađuje. Jezici HTML 4 i XHTML podržavaju različite modove, ali ih HTML5 više nema. 2013 © T. Stojanov: Skripta – UHC stranica 13 HTML i XHTML U trenutku faze standardizacije jezika HTML kada su kulminirali problemi međusobne neusklađenosti prebirnika u prikazu istoga HTML koda i paralelnome razvoju jezika, nastala je ideja o „višoj i striktninijoj“ razini jezika HTML. Jedno od rješenja bilo je strože postaviti sintaktička 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. Među ostalim, XHTML je definirao da vrijednost atributa mora biti u navodnicima, da se elementi pišu malim slovima, da se oznake moraju zatvarati itd. XML je jezik za prijenos sadržaja, ali je bio zamišljen i kao metajezik za druge jezike. XHTML je trebao biti njegov prvi primjer jezika nastaloga na uzoru XML-a. XHTML 1.0 zamišljen 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 započeti s razvojem od inačice 1.0 pa nadalje. Inačica 1.1 tako je bila još striktnija, isključen mu je tranzicijski mod, a u planu je bio i razvoj jezika XHTML 2.0 koji je trebao biti vrlo različit jezik od 1.1. Međutim, njegov je razvoj kasnio, a što je odgovaralo onima kojima su željeli nastaviti razvijati jezik na drugim osnovama (npr. Opera koja je započela sa svojim radom, a kojoj su se pridružile i druge kompanije koje su stvorili konzorcij WHATWG). Iz tih se inicijativa razvio HTML5. Svaki se HTML 4.01 može automatski pretvoriti u XHTML bilo preko web-sučelja 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 sljedeće stvari: Da bismo stranicu učinili minimalnom stranicom pisanoj u HTML5, moramo dodati deklaraciju i znakovnu prikazbu: 2013 © T. Stojanov: Skripta – UHC stranica 14 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 najčešćih su: 1. Podatak o ključnim riječima i opisu stranice. 2. Podatak o autoru ili vremenu uređivanja stranice. 3. Podatak o aplikaciji koja je generirala kod. 4. Podatak o kodnome prikazu teksta. 5. Podatak o automatskome osvježivanju stranice. Vrijednost contenta izražena je u sekundama. 6. Podatak o preusmjerivanju stranice i koliko brzo. Blokni i redčani elementi Svi se elementi u HTML-u dijele na dvije vrste – blokne (block-element) i redčane (inline-element). Blokni se elementi prikazuju u bloku, tj. za svoj prikaz traže vlastiti redak (npr. , , , ), a redčani se prikazuju u nastavku, tj. linearno (npr. , , ). Okviri (frameovi) Okvir predstavlja strukturu više stranica u HTML-u koji se međusobno slažu na način da se više stranica u HTML-u istovremeno prikazuju unutar jedne stranice. Više okvira čini skup okvira (eng. frameset). Da bismo radili s okvirima, moramo odrediti skup okvira. Odnos među njima postavlja se s pomoću postotaka ili piksela. Stranica koja određuje kako se okviri prikazuje ne sadržava , nego samo definiciju okvira. 2013 © T. Stojanov: Skripta – UHC 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 međusobnu 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 moguće je postaviti zvjezdicu (*) koja govori o tome da dotični okvir zauzima onoliko prostora koliko je preostalo u odnosu na druge okvire i ukupnu trenutačnu razlučivost ekrana. Želimo li zaključati položaj okvira i onemogućiti ručno pomicanje, koristimo sljedeću sintaksu: Uvid u kod određenoga okvira postižemo desnim klikom miša iznad njega i odabirom This frame > View frame source. Iako se izradba mrežnih stranica s pomoću okvira smatra zastarjelim dizajnom, korištenje unutarnjih okvira ili iframeova potpuno je standardno i rabe se kad god ubacujemo elemente sa stranica YouTube ili Google Maps. Vježba s okvirima: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_cols. 2013 © T. Stojanov: Skripta – UHC stranica 16 Dva su način izgradnje skupa okvira: gniježđenjem (frameset unutar frameseta) ili višestrukim framesetom (dvije ili više stranica određuju frameset). Unutarnji okvir ili iframe određuje se unutar , a ne unutar frameseta. Njegov atribut src definira stranicu koja se treba učitati u njemu. Obratite pozornost da element iframe nema sadržaja i da je prazan. Komentari Komentari u HTML-u služe za istu svrhu kao i u bilo kojem drugom jeziku za kodiranje, programiranje ili skriptiranje – za pisanje bilježaka autora koda. Komentiranjem postižemo veću razumljivost i snalaženje u kodu, osobito pri vraćanju na taj dio koda, ali i za jednu drugu pragmatičnu funkciju: komentiranjem, naime, postižemo da dio koda koji okružimo učinimo da se ne izvršava čime si olakšavamo testiranje i ispravljanje pogrešaka pri kodiranju. Komentiranje se vrši s pomoći oznaka , a može se komentirati jedan redak ili više njih. Poveznice Poveznice ili linkovi (eng. links) dijele se na apsolutne i relativne. Apsolutne poveznice su one koje upućuju na jedinstvenu adresu bez obzira upućuju li na mrežnu ili lokalnu adresu. Klikni za posjet stranicama TVZ-a Lokalna datoteka Relativne poveznice su one koje upućuju na sadržaj u odnosu na datoteku odakle se kreće. Druge se povezane („linkane“) datoteke mogu naći u istoj mapi, u mapi iznad ili u mapi ispod one odakle se kreće. – relativna poveznica za dokument u istoj mapi – relativna poveznica za dokument u nadređenoj mapi – relativna poveznica za dokument u podređenoj mapi 2013 Produkcijska poveznica radi se s pomoću znaka ljestve (#), Tako obilježen tekst ponaša se u našim produkcijskim uvjetima kao prava poveznica iako nas ne vodi nigdje klikom na nju. Otvaranje stranice u novome prozoru (ili kartici) prebirnika radi se s pomoću atributa target="_blank". Poveznica 2013 © T. Stojanov: Skripta – UHC stranica 17 Poveznice ne moraju uvijek otvarati novu mrežnu stranicu, mogu otvarati i klijent za rad s e-poštom ako odredimo da klikom na poveznicu želimo da posjetitelji pošalju poruku. To je, primjerice, često u podnožju stranice gdje ostavljamo adresu e-pošte za određenu vrstu kontakta. Gornja sintaksa, osim što upisuje adresu e-pošte [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 sintaktičku uporabu znakova za odvajanje (? i &). Poveznica za preuzimanje također se smatra vrstom poveznice. Ako se umjesto nastavka html stavi nastavak, primjerice, mp3 ili docx, prebirnik će klikom na poveznicu započeti preuzimanje (eng. download). Preuzimanje pjesme. Sljedeću podvrstu poveznica čine fragmenti ili sidrišta. 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 sadržaj, indeks, fusnote itd.). Poveznica se ostvaruje znakom ljestve (#), a mjesto na koje ide obilježeno 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 među različitim okvirima, sintaksa jest sljedeća 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 međusobno „linkaju“ s pomoću atributa target, taj se podatak mora prvo deklarirati u framesetu kao atribut name="xy". Primjer deklaracije frameseta s atributom name: 2013 © T. Stojanov: Skripta – UHC 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 grafički simbol koji se sprema u oznakama (eng. bookmarks) stranice. Nastavak oznake može biti u ICO, GIF ili PNG u razlučivostima 16x16, 32x32 ili 48x48 u 8-bitnoj, 24 bitnoj ili 32-bitnoj dubini boje. Izradba ikone je jednostavna jer ne uključuje grafičku 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 ishodišna točka ili toča razlučivosti 0x0 na računalnome ili televizijskome ekranu nalazi se u gornjemu lijevom kutu. To znači 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 više o tome govori se u području web-dizajna, a ne kodiranja mrežnih stranica. Najčešći format slika je JPEG, a on može imati više 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 Obratite pozornost da ako slici veličine 3456x2304 piksela damo da se prikazuje u okviru 20x22 piksela, ta će slika imati male prikazne dimenzije, ali će se učitavati i dalje izvorna slika. Taj je način rada sa slikama nepreporučljiv zbog svoje neoptimiziranosti. Atributima width, height, align, valign, border i drugima moguće je dodatno urediti sliku, ali se ovaj način rada ne preporučuje. Suvremeni standard propisuje da se sva grafička obradba slika mora uređivati s pomoću CSS-a, a ne starim HTML-ovskim atributima. Atributi alt i title Atributi alt i title razlikuju se po tome što je alt značenje, a title ekranski prikaz. Ono što navedemo pod titleom prikazat će se na ekranu nakon što neko vrijeme zadržimo pokazivač miša nad nekim sadržajem (slikom, poveznicom itd.), a tekst pod atributom alt predstavlja njegov opis. Atribut alt obvezatan je za validaciju stranice, pa makar bio naveden bez sadržaja (alt=""). 2013 © T. Stojanov: Skripta – UHC stranica 20 Slike se postavljaju kao poveznice na način da ih se okruži elementom . Liste Liste u HTML-u služe za popisivanje ili nabrajanje nekih članova. Liste mogu biti uređene (kada je među njima uređeni poredak, eng. ordered ili ol), neuređene (kada poredak među č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 neuređenih lista. Preporučuje se izgled lista obraditi CSS-om. ● – disc ○ – circle ■ – square Uređena lista izgleda ovako: Prvo Drugo Treće 2013 © T. Stojanov: Skripta – UHC stranica 21 Uređenoj listi možemo postaviti atribut type čija vrijednost određuje tip pobrojavanja. Ono može biti arapskim brojkama, malim ili velikim rimskim brojkama, te malim ili velikim slovima abecede. Prvo Drugo Treće Element može imati i atribut start čija vrijednost određuje od kojega će člana pobrojavanje započeti. Sljedeći primjer pokazuje da će stavke liste započeti s velikim rimskim brojem VII. Neuređena lista izgleda ovako: Prvo Drugo Treće Definicijska lista dodatno određuje stavku liste s elementom . Ta je lista izvorno zamišljena kao strukturni opis nekoga rječnika ili pojmovnika. Enchanting Poboljšavanje svojstava Tailoring Krojenje Jewelcrafting Draguljarstvo Liste se mogu gnijezditi (liste unutar lista). Prva stavka Ubačena stavka 1 Ubačena stavka 2 Druga stavka Odlomci Tekst se u HTML-u upisuje u elementu koji označuje paragraf. Bez obzira što se u tekstu može nalaziti višestrukih bjelina ili praznih redaka, prebirnici će višak praznih mjesta reducirati i prikazati tekst s minimalnim brojem praznoga prostora. To je svojstvo značajno za sve jezike za obilježavanje. 2013 © T. Stojanov: Skripta – UHC stranica 22 Međutim, želimo li doista prikazati prazan prostor, umjesto odlomka trebamo postaviti koji određuje da se dotični tekst ne formatira. Ovako to izgleda u prebirniku: Želimo li izbjeći da nam se neki tekst ne lomi na kraju retka, koristimo HTML-ovu oznaku za neprelamajući razmak (non-breaking space). To se rabi kod titula, novčanih vrijednosti, jediničnih mjera itd. Uočite na donjoj slici da se titule nisu odvajale od imena i prezimena. 2013 © T. Stojanov: Skripta – UHC stranica 23 Prikaz hrvatskih grafema Da bismo dobili prikaz znakova kakav očekujemo, bez obzira odakle netko učitavao naše stranice i s koje tipkovnice ili jezičnoga područja, moramo uskladiti sljedeće 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: 2013 © T. Stojanov: Skripta – UHC stranica 24 HTML5 zaglavlje: 4. definirani font u prebirniku 5. font instaliran na OS-u 2013 © T. Stojanov: Skripta – UHC stranica 25 6. font definiran u datoteci s kodom u CSS-u Upravo zbog široke raširenosti nekoliko fontova (npr. Verdana, Arial, Helvetica, Times i dr.), oni se najčešće rabe na prikaz mrežnih tekstova. Vrlo je loš odabir prinuđenje posjetitelja naših stranica da instalira font koji se nama sviđa i u kojem smo kodirali naš izgled. Zadana znakovna prikazba je unikod i to UTF-8. Tablice Zbog nedostatka drugih načina pozicioniranja elemenata na stranici, u ranoj fazi razvoja weba tablice su bile korištene posve pogrešno – umjesto da služe isključivo za ono za što su i namijenjene, tj. za prikaz sadržaja u tabličnome obliku (npr. popis studenata i njihove evidencije i ocjena), tablice su se koristile za layout, tj. za raspoređivanje elemenata na ekranu. Drugim riječima, širina se ekrana zamislila kao velika tablica te smo određeno polje definirali na način da se prikazuje u dijelu ekrana i u njega upisali svoj sadržaj. Iako je ova tehnika pogrešna, brojne stranice još uvijek koriste ovaj način 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 pomoći sljedećih elemenata: , (table row) i , (table heading), (table definition). Element je glavni kontejner koji okuplja sve tablične 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 određuje se redak, a rabimo polje u retku. Imamo li potrebe za metapoljima u tablici, npr. za opisom što se u kojem stupcu definira, umjesto . Ovako to izgleda u praksi: 2013 © T. Stojanov: Skripta – UHC stranica 26 Tablični elementi imaju brojne atribute. Neki od njih koji se odnose na grafičko oblikovanje zamjenjuju se CSS-om. U nastavku navodimo neke od njih. Poput poveznica, slika i drugih strukturnih elemenata, tablice također imaju atribuciju i <alt>. • <border> – određivanje okvira tablici • <bgcolor> – određivanje pozadinske boje tablice • <width> – određivanje širine tablice • <height> – određivanje visine tablice • <align> – određivanje vodoravnoga poravnavanja tablice • <valign> – određivanje okomitoga poravnavanja tablice • <background> – određivanje pozadinske slike tablice • <cellpadding> – određivanje odmaka teksta od ruba polja • <cellspacing> – određivanje odmaka polja među sobom 2013 © T. Stojanov: Skripta – UHC stranica 27 Uočite da se tablicama ne može definirati visina u postotcima ako se postavi HTML ili XHTML doctype. Tablice po svojem ustroju nisu uvijek pravilne pa moraju postojati i atributi s pomoću kojih spajamo vodoravna (rowspan) ili okomita (colspan) polja tablice. Brojčana 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 briše. 2013 © T. Stojanov: Skripta – UHC stranica 28 Kod ovih nepravilnih tablica važno je zapamtiti da si uvijek moramo postaviti pitanje „koliko ova tablica ima redaka i stupaca“. To nije uvijek moguće odgovoriti iz prve, ali nam je taj odgovor ključan u pisanju koda. Pomoći će nam iscrtkavanje nevidljivih bridova polja olovkom čime će doći do našega 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 sučelje za odgovor našim posjetiteljima. Da bi prebirnik ispravno shvatio da je riječ o obrascu, moramo postaviti glavni kontejner <form>. Obrazac može biti tekstualni (u jednome ili u više redaka), tipkovni (tipka za slanje i poništavanje rezultata), padajući izbornik ili radiobuttoni i checkboxovi. Padajući izbornik može imati jedan ili više odabira, a može se podesiti i prikaz više od jednoga retka (zadano je jedan redak). Radiobuttoni i checkboxovi nemaju adekvatan prijevod na hrvatski pa se služimo engleskim nazivljem. Radiobuttoni imaju svojstvo samo jednoga odabira od više ponuđenih, za razliku od checkboxova gdje je moguće odabrati više ponuđenih. Oni se međusobno razlikuju i izgledom – prvi su okrugli, a drugi su četvrtasti. 2013 © T. Stojanov: Skripta – UHC stranica 29 Višestruki izbor padajućega izbornika radi se s pomoću sljedećega koda: <select multiple="multiple"> Visina padajućega izbornika: 2013 © T. Stojanov: Skripta – UHC stranica 30 <select size="size"> Onemogućen izbor: <select disable="disable"> 2013 © T. Stojanov: Skripta – UHC stranica 31 drugo poglavlje CSS 2.1 2013 © T. Stojanov: Skripta – UHC stranica 32 O CSS-u Jezik za obilježavanje CSS znači Cascading Style Sheets. Dijeli se na dvije inačice – 2.1 i 3 koje se nazivaju level 2, revision 1. U ovome dijelu bavimo se isključivo CSS-om 2.1 koji je, unatoč postojanju inačice 3, još uvijek u širokoj uporabi. Ne možemo govoriti da je zastario ili lošiji u odnosu na inačicu 3 jer je njegov sljedbenik još uvijek u razvoju i nije standardiziran. Inačica 1.0 izišla je 1996. godine, a 2.1 postojao je W3C Recommendation tek u lipnju 2011. godine. CSS znači „slijedni stilski obrazac“, a naziv zahvaljuje svojemu svojstvu određenosti prioriteta u prikazu budući da CSS-ovi obilježivači na raznim razinama i različitim prioritetima mogu oblikovati isto mjesto. CSS je usmjeren za prikaz (X)HTML-a, ali ne nužno samo njega nego i bilo kojeg drugog jezika za obilježavanje (npr. XML). Budući da je preuzima funkciju grafičkoga oblikovanja sadržaja, (X)HTML-u ostaje ono za što je prvotno i zamišljen – za opis strukture elemenata. Radimo li u striktnom modu HTML-a 4.1 ili XHTML-a 1.0, njegova je uporaba obvezatna. Odjeljivanjem sadržaja od izgleda generira se manje koda, a on je bitno pregledniji te ga je lakše naknadno uređivati. Svaki se element (X)HTML-a može modificirati CSS-om čime možemo govoriti o unverzalnosti CSS-ovih obilježivača (za razliku od HTML-ovih atributa). Popisi obilježivača (selectors) je podugačak i on se ne mora učiti napamet, ali se mora znati za što služi i kako se upotrebljava. U ovim se skriptama oni neće taksonomski nabrajati, nego će se ukazati na osnovnu sintaksu i mogućnosti, a studentima se ostavlja da dodatne informacije pronađu na tutorijalu iz CSS na stranicama W3Schoolsa http://www.w3schools.com/css/. Zbog svoje univerzalnosti obilježivači su primjenjivi za brojna mjesta tako da je učenje time jednostavnije – svojstvo padding, margin, align može imati i odlomak, div, slika, naslov itd. CSS neke mrežne stranice pronalazi se na sljedeći način: prvo treba otići u opciju view page source, zatim treba pronaći 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 može 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 Budući da istome elementu možemo na raznim mjestima odrediti izgled, moraju postojati prioriteti izvršavanja. Općenito pravilo jest da što je obilježivač specifičniji (tj. niži), ima veći prioritet. Kada bismo se slikovito izrazili, onda bismo rekli da je „pravilo fakulteta jače od pravila UN-a“. 1. Prebirnički stilski obrazac (user agent style sheet) – onaj koji je zadan u prebirniku, npr. rezultira podebljanim slovima, kosim… – prioritet peti 2. Korisnički 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 treći („normalni css“) 4. Autorski important s. o. (author important s. s.) – ono što autor definira važnim s elementom important – prioritet drugi 5. Korisnički important s. o. (user important s. s.) – ono što korisnik definira važnim s elementom important – prioritet prvi 2013 © T. Stojanov: Skripta – UHC stranica 35 Po mjestu definiranja izgleda, prioriteti su poslagani na sljedeći način: 1. prebirničke zadane vrijednosti (browser default) 2. vanjski CSS 3. CSS unutar kontejnera <head> 4. unutar (X)HTML retka (inline CSS) CSS media types Osim za prebirnike CSS je predviđen da uredi prikaz sadržaja i na pisaču, projektoru, televizoru, dlanovnicima itd. Ti se detalji određuju 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 najčešće naziva „inačicom za ispis“ upravo je CSS koji je oblikovan na način optimiziran za pisač (crno-bijeli prikaz, format A4 itd.). 2013 © T. Stojanov: Skripta – UHC stranica 36 Sintaksa Osnovna sintaksa CSS-a jest sljedeća: obilježivač {svojstvo: vrijednost;} selector {property: value;} Na primjeru HTML-ova elementa i obilježivača s kojim odabiremo vrstu fonta: p {font-family: verdana;} Svaki obilježivač mora završavati znakom točka-zarez čak i kada je u retku deklariran samo jedno svojstvo. Naziv obilježivača ne smije započinjati brojkom. Obilježja (atribucije) mogu se nizati u retke prigodom čega je višak bjelina i redaka nevažan. h1 { margin-left: 10pt; font-family: helvetica; text-align: center; } Gore navedena sintaksa kaže da će naslov biti udaljen od lijeve margine 10 točaka, da je biti ispisan fontom Helvetica, te da će biti centriran. Imamo li vrijednosti koje u sebi sadržavaju bjelinu, moraju se zapisivati unutar navodnika. h1 {font-family: "times new roman"} Obilježivači i elementi mogu se grupirati: h3,li,p {color:purple;} ili h3, li, p {color: purple;} Stilovi se mogu dodavati i atributima elemenata. Sljedeći redak kaže: 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"] znači da se traži atribut alt koji ima dio sadržaja „mala“ i koja je unutar elementa a. Jednoredni komentari se u CSS-u pišu na sljedeći način: /* Ovo je komentar u CSS-u */ Pišemo li višeredčane komentare: /* Početak, sredina i kraj višeredačnog komentara */ Klase i identifikatori Razlika klase i identifikatora jest što se klasa primjenjuje kao definirani stilski obrazac za brojne i generičke članove koji mogu posegnuti za njime, dok su identifikatori jedinstveni i pojedinačni slučajevi uređivanja stila. Mnogi se dijelovi mrežne stranice uređuju samo na jednome mjestu i na identični način – zaglavlje, meni, navigacija itd. HTML5 je uveo dodatne jedinstvene elemente za sve ove strukturno-sadržajne elemente pa tako sada imamo <footer>, <header>, <nav>, <section> itd. Klasa se ostvaruje sintaktičkim operatorom točke (.), a identifikator ljestvama (#). U CSS-u klasa se ovako piše: h1.desno {text-align: right;} Ovo znači 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 identičan način: <h1 class="desno">Veliki naslov udesno</h1> 2013 © T. Stojanov: Skripta – UHC stranica 38 Identifikatori imaju identičnu sintaksu samo što umjesto znaka točke pišemo 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 značenje, već kojima korisnik pridaje funkcionalnost. Oni se smatraju gradivnim materijalima kojima možemo posegnuti u izgradnji stranice baš kao što graditelji mogu odabrati razne vrste blokova u zidanju. Razlika među njima isključivo je u kategoriji jesu li blokni (block) ili redčani (inline). Slikovito rečeno, zamislimo da graditelji imaju dvije vrste greda – jedne koje se polažu vodoravno i druge koje se postavljaju okomito. Po tome bi span bila vodoravna, a div okomita greda. Element span služi za redčano grupiranje ili atribuiranje. Element div služi za blokno grupiranje i atribuiranje. Njihovi atributi mogu biti razni, npr.: <div style="…"> <div class="…"> <div id="…"> <div title="…"> Element div češće se koristi zbog svoje naravi da grupira kod i da dijeli sastavnice web-stranice. Budući da nam je potreban za strukturu stranice, u koderskome žargonu postoji izraz divitis koji označuje prekomjerno korištenje elemenata div (primjerice, svaka bi se tablica mogla preurediti da mu gradivni dio bude <div>). Najčešće ga se prepoznaje kada imamo toliko elemenata div da se više ne možemo snaći među njima i odrediti za što nam koji služi. Budući da se elementi div mogu postaviti bilo gdje na ekranu, moguće je da se preklapaju, odnosno da im se odredi visina ili širina iz kojih njihov sadržaj može izlaziti, a što može utjecati na konačan estetski dojam o stranici. 2013 © T. Stojanov: Skripta – UHC stranica 39 Poveznice u CSS-u CSS je obogatio oblikovanje poveznica. Novo je a:hover iza kojega određujemo stil kada mišem prijeđemo preko poveznice čime se na jednostavan način otvara važan dio dizajna mrežne 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 mogućnosti pa se jednostavnim zahvatima mogu ostvariti dobar estetski dojam o našim stranicama. Sljedeći kod ostvaruje i fokus polja u kojem upisujemo podatke. 2013 © T. Stojanov: Skripta – UHC stranica 40 2013 © T. Stojanov: Skripta – UHC stranica 41 Pokazivači U CSS-u možemo utjecati na izgled pokazivača (cursors) u određenim situacijama. Sintaksa je vrlo jednostavna i određuje se obilježivačem cursor i jednoj od vrijednosti. Jedinice U (X)HTML-u imali smo vrlo ograničen način izražavanja jediničnih mjera. U CSS-u nudi se cijeli niz jedinica od kojih svaka ima svoju primjenu (preslika sa stranica W3Schools). Najčešće korištene jedinice su postotak (%), piksel (px), točka (pt) i em. Em je relativna jedinica slična postotku i koja se prikazuje ovisno o veličini fonta. 2013 © T. Stojanov: Skripta – UHC 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 podržane (od IE 9+, FF 3+, Opera 10+ itd.) gdje se RGB- u pridodaje vrijednost prozirnosti (transparentnosti), tj. alpha ili opacity. Vrijednosti koje prozirnost može imati jesu od 0.0 (potpuno prozirno) do 1.0 (potpuno neprozirno). Model kutije Model kutije ili box-model jest slikoviti prikaz i način kako se uređuje prostor oko sadržaja kodiranoga u HTML-u kroz jezik CSS. Kad god imamo različit prikaz istoga HTML-a i narušene odnose među strukturnim elementima stranice najčešće ima uzroke u modelu kutije i neoptimiziranosti za određeni prebirnik. Model kutije definira odnos između 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 sljedeće slike vidimo da se pozadinska boja odnosi na sadržaj, popunu i obrub, ali ne i na rubove. Zbog svojstva odmicanja sadržaja od obruba, za popunu ili padding govori se kao o unutarnjim marginama. Kada bismo imali definiran okvir sa sljedećim dimenzijama, koliko bi naš okvir bio ukupno širok i visok? 2013 © T. Stojanov: Skripta – UHC stranica 43 Obrubi (borders) U CSS-u obruba ima različitih oblika, a u nastavku se prikazuje njihova sintaksa i izgled. 2013 © T. Stojanov: Skripta – UHC stranica 44 Vrsta crte određen je obilježivačem border-style. Obrubi se ne moraju nužno uređivati za sve strane (gornji, donji, lijevi i desni), nego se može odrediti samo za jednu od njih. Osim što obrubu možemo urediti vrstu crte (border-style), možemo odrediti i debljinu (border- width) te boju (border-color). Vrijednosti obilježivača border-width mogu biti izražene riječima thin, medium, thick ili izraženo u jediničnim mjerama. Vrijednosti obilježivača border-color mogu biti izražene riječima (npr. red, blue, yellow itd.), heksadekadsko ili RGB-om. Model sata Želimo li urediti boju naših obruba, umjesto deklariranja u više redaka, kod se može bitno skratiti. Tako se umjesto sljedećega: border-color-top: red; border-color-right: green; border-color-bottom: blue; border-color-bottom: yellow; može zapisati i ovako: {border-color: red green blue yellow;} Skraćivanje sintaktičkoga zapisa ostvaruje se standardiziranjem poretka čitanja boja u odnosu na stranice obruba. Kao model je poslužio sat gdje se kazaljka kreće od 12 sati (gore) prema 3 sata (desno), zatim prema 6 sati (dolje) i na kraju do 9 sati (lijevo). To znači 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 moguće i drugačije odrediti – ne moramo imati sva četiri obruba u posve različitim bojama. U gornjem primjeru pokazali smo što se događa 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 način kao što se model sata primjenjuje kod modifikacije boje obruba, tako je i kod uređivanja 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 2013 © T. Stojanov: Skripta – UHC stranica 46 Skraćivanje sintakse može biti i još izraženije. Umjesto: border-width: 10px; border-style: solid; border-color: blue; možemo zapisati i: border: 10px solid blue; Pritom valja napomenuti da je poredak bitan te da je podatak o styleu (solid) bitan. Rubovi (margins) Uređivanje rubova ili margina radi se na isti način kao što smo opisali s obrubima. Jedina je razlika u tome što rubovi nemaju pozadinsku boju. 2013 © T. Stojanov: Skripta – UHC stranica 47 Popuna (paddings) Situacija sa sintaksom vezano za popunu (padding) identična je s obrubom i rubom. Model kutije Internet Explorera Internet Explorer ima svoj način kako računa modelom kutije, a koji se razlikuje od svih drugih prebirnika. Budući da je ovo važan čimbenik na koji moramo obratiti pozornost da bi nam stranica bila ispravno prikazana, moramo znati više o njemu i kako ga zaobići. Ovaj se problem manifestira samo ako nije deklariran doctype (jer onda IE računa po svom zadanom načinu). Primjer različitosti u izgledu vidi se u nastavku: 1. Mozilla Firefox 2. Chrome 2013 © T. Stojanov: Skripta – UHC stranica 48 3. Opera 4. Internet Explorer Razlika je u tome što IE popunu i obrub pribraja širini sadržaja. Više tehničkih podataka o ovome fenomenu može se naći na sljedećoj poveznici: http://tinyurl.com/w322t. Uređivanje lista Spomenuli smo da (X)HTML nema velike mogućnosti za uređivanje lista. U CSS-u s pomoću sintakse list-style-type i vrijednostima none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin itd. možemo odrediti tip pobrojavanja stavki. 2013 © T. Stojanov: Skripta – UHC stranica 49 Želimo li postaviti svoju sliku umjesto pretpostavljenih grafičkih uzoraka, to činimo na sljedeći način: Skraćivanje zapisa sintakse fonta Budući da font, kao i neki drugi obilježivači, imaju brojna sintaktička proširenja, zapis se može 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; } Možemo zapisati i ovako: 2013 © T. Stojanov: Skripta – UHC stranica 50 h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans- serif; } Uređivanje tablica Obilježivači border-style i border-width određuju vrstu i širinu crte posve nalik na obrube. Ono što je specifično za tablicu jest border-spacing koji radi razmak elementa <table> od elemenata <td>. Za border-spacing vrijedi model sata. Također, možemo utjecati da se neko polje prikaže ili ne prikaže s pomoću obilježivača empty- cells: show|hide; Tablicama možemo odrediti i njegov naslov. To se radi sa caption-side s vrijednostima top (zadano), left, right ili buttom. S pomoću obilježivača table-layout i vrijednostima automatic (zadano) i fixed tablici možemo fiksirati širinu i odrediti da je širina polja zaključana, odnosno da se prilagođava sadržaju. 2013 © T. Stojanov: Skripta – UHC stranica 51 Dimenzioniranje Dimenzioniranje služi za određivanje visina i širina. Obilježivači 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 među redcima Razmak među redcima ili visina retka određen 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 može biti blokni ili redčani. Obilježivač display: block pretvara redčani u blokni (npr. da poveznice budu u vlastitim redcima), a display: inline blokni u redčani (npr. da se stavke liste prikažu u istome retku). Jedna od čestih uporaba promjene bloknih elemenata u redčane jest radi stvaranja navigacijske liste. Stavke navigacijske liste često se rade s pomoću 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 obilježivača display: inline; naša navigacija dobiva sljedeći izgled: Treba upozoriti jedan važan aspekt pretvaranja redčanoga elementa u blokni: dok nam je prije u redčanome obliku poveznica bila riječ, sada u bloknome obliku cijeli pravokutnik postaje površina poveznice. 2013 © T. Stojanov: Skripta – UHC stranica 53 Nakon promjene da poveznice postanu blokne: Plutanje Plutanje (float) tehnika je pozicioniranja strukturnih elemenata stranice. Bloknost i redčanost zadaju „normalni“ (tj. linearni) tijek prikazivanja elemenata, a to možemo narušiti s plutanjem. Plutanje je vrlo često u tiskanome tekstu gdje se često zbog slika ili dodatnih sadržaja ubacuju okviri na raznim mjestima. Uočite mnoštvo nelinearno prikazanih elemenata na sljedećim stranicama časopisa. 2013 © T. Stojanov: Skripta – UHC stranica 54 Riječ je o tome da imamo mnoštvo dijelova koji se ponašaju kao samostalne cjeline i koje su ubačene u drugo tijelo teksta. Snalaženje pri čitanju podrazumijeva da vidimo koji tekst predstavlja cjelinu, te da vizualno razdvojimo jednu strukturu od druge. Tehnika plutanja smješta element u odnosu na nadređeni element koji utječe 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 međusobno itd. Elementi mogu plutati samo lijevo i desno, ne može se ostvariti okomito plutanje. Vrlo je važno shvatiti da plutanje ne govori samo kako se koji element treba postaviti u odnosu na nadređeni element, nego i kako se elementi koji slijede postavljaju prema njemu. Želimo li spriječiti da plutajući elementi utječu na sljedeće, odnosno da se sljedeći elementi ne poravnavaju u odnosu na plutajući, rabimo sintaksu clear: both; Slijedi primjer koda gdje blokni elementi međusobno ne plutaju. 2013 © T. Stojanov: Skripta – UHC stranica 55 U nastavku je prikaz kontejnera div kojemu je određeno da pluta lijevo. U odnosu na nadređeni element (tj. body), <div> se postavio lijevo, a njegov sljedeći element prinuđen je da mu dođe zdesna. 2013 © T. Stojanov: Skripta – UHC stranica 56 Slijedi primjer slučaja da <div> pluta lijevo, ali da nakon sebe ne utječe na druge elemente (clear: both;). U odnosu na nadređeni element (body), <div> se lijevo postavio, a njegov sljedeći element prikazuje se „slobodno“, tj. po prikazu koji je zadan ili koji je naslijeđen. Ovako izgleda desno plutanje kontejnera <div>. U odnosu na nadređeni element (body), <div> se desno postavio, a njegov sljedeći element prinuđen je da mu dođe slijeva (jer ne može doći zdesna). 2013 © T. Stojanov: Skripta – UHC stranica 57 Ovo je primjer desnoga plutanja kontejnera <div>, ali sa „čišćenjem“ plutanja nakon sebe. U odnosu na nadređeni element (body), <div> se desno postavio, a njegov sljedeći element prikazuje se „slobodno“, tj. po prikazu koji je zadan ili koji je naslijeđen (a to je u sljedećemu retku). U nastavku je prikaz slaganja teksta i slike desnim plutanjem slike. 2013 © T. Stojanov: Skripta – UHC stranica 58 Ovako izgleda lijevo plutanje slike s tekstom uz manje ukrašavanje. Iako se to možda ne čini na prvi pogled, tehnika plutanja smatra se naprednijom operacijom uređivanja elemenata na stranici te ju je potrebno izučiti i izvježbati („plutanje se mora naučiti baš kao i plivanje“). Važno 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 mogući nepredvidljivi rezultati. Neki autori napisali su da je koncept plutanja „jedno od najneintuitivnijih pojmova u CSS-u te da se pogrešno shvaća. Problem nije u plutanju, već kako se primjenjuje.“ Pogrešno je pokušavati da svi elementi plutaju u odnosu na sve druge. Također, obratite pozornost na to da se plutati može jedino ako se nalazimo unutar nečega što nas drži na okupu (inače ćemo „otplutati“). Poveznice na dobre materijale za daljnje učenje 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: 2013 © T. Stojanov: Skripta – UHC stranica 59 2013 © T. Stojanov: Skripta – UHC stranica 60 2013 © T. Stojanov: Skripta – UHC stranica 61 uoči! Primjer plutanja elemenata tipičnoga dizajna: 2013 © T. Stojanov: Skripta – UHC 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. 2013 © T. Stojanov: Skripta – UHC stranica 63 Treći <div> odnosi se na glavni sadržaj i dodatni (sporedni) sadržaj – on pluta desno u odnosu na „Poveznice“, širina 520px. Četvrti <div> odnosi se na poveznice – on pluta lijevo u odnosu na <div> koji obuhvaća „Sadržaj“ i „Dodatni“ te ima širinu 200px. Peti <div> je glavni sadržaj – on pluta lijevo u odnosu na „Dodatni“ i ima širinu 340px. Šesti <div> odnosi se na dodatni sadržaj – on pluta desno u odnosu na „Sadržaj“ i ima širinu 180px. 2013 © T. Stojanov: Skripta – UHC stranica 64 Sedmi <div> odnosi se na zaglavlje koje ima poništeno plutanje s obilježivačem clear: both;. Širina mu nije izražena, naveden je samo padding čine se dobiva visina i širina. Pozicioniranje Pozicioniranje je druga tehnika postavljanja elemenata na ekranu. Pozicionirati se može statično (zadano svojstvo koje se primjenjuje ako nije navedena vrijednost static), relativno (smještanje u odnosu na neki drugi element; vrijednost relative), apsolutno (smještanje u odnosu na cijelu stranicu; vrijednost absolute) i fiksno (smještanje elementa koji je uvijek na istome mjestu bez obzira na klizanje stranice; vrijednost fixed). Apsolutno pozicioniranje (position: absolute) s obilježivačima top, right, bottom i left i njihovim vrijednostima u jediničnim mjerama označuje da se neki element točno postavlja u određeni prostor na ekranu. Obratite pozornost da obilježivači top, right, bottom i left funkcioniraju samo za apsolutno i relativno pozicioniranje. U donjem primjeru naslov <h2> nalazit će se točno na 50. pikselu s vrha i 50. pikselu slijeva. 2013 © T. Stojanov: Skripta – UHC stranica 65 Uočite da apsolutnim pozicioniranjem možemo element učiniti 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 nešto smjestite u donji desni dio vašega širokokutnoga ekrana, to se neće vidjeti na malim razlučivostima na mobitelima. 2013 © T. Stojanov: Skripta – UHC 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 identična apsolutnome pozicioniranju (position: relative;) s obilježivačima top, right, bottom i left te vrijednostima izraženima u jediničnim mjerama. Relativno se pozicioniranje primarno koristi za fina podešavanja elemenata, ne za dizajn stranice kao takve (plutanja i margine imaju veći značaj za to). U donjem primjeru drugi smo okvir postavili 50 piksela s vrha i 50 piksela slijeva u odnosu na točku gdje se on morao zadano prikazati. Taj je pomak označen crvenom strelicom. 2013 © T. Stojanov: Skripta – UHC stranica 67 Važno je napomenuti da je prostor odakle se nešto 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 postići efekt slike koja se ne „skrola“. 2013 © T. Stojanov: Skripta – UHC stranica 68 U slučaju preklapanja elemenata, a želimo utjecati na njihovu vidljivost, obilježivačem z-index određujemo vrijednosti što će ići u pozadinu, a što će biti vidljivo. Njegove vrijednosti su izražene brojčano – što je veći broj, indeks je veći i prikaz ima prioritet. Zadana je vrijednost 0, a ono obilježava da se elementi ne preklapaju. 2013 © T. Stojanov: Skripta – UHC stranica 69 2013 © T. Stojanov: Skripta – UHC stranica 70 Z-indeks vrijedi samo za one elemente koji imaju postavljeno pozicioniranje. Pozicioniranje se može određivati i za okomito poravnavanje s pomoću obilježivača 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 obilježivača Pojmovi dijete (child), potomak (descentant) i brat (sibling) iz svijeta jezika za obilježavanje kao što su (X)HTML i XML mogu stvoriti zabunu, ali ih treba razumjeti za potrebe kombiniranja obilježja te za njihovu primjenu u CSS-u, a dalje u HTML DOM, XML DOM itd. Prema sljedećoj shemi kažemo da: 2013 © T. Stojanov: Skripta – UHC stranica 71 body ima dva djeteta (child) i oni se označuju znakom „veće od“ (>) body ima 13 potomaka (descendant) i oni se označuju znakom bjeline ( ) em je stariji brat od strong (sibling) i on se označuje znakom plusa (+) U nastavku ćemo u kodu pokazati sva tri primjera. Sintaksa p > a znači da samo djeca od imaju navedeno svojstvo, tj. samo one poveznice koje su izravno podređene odlomku. U ovome primjeru sintaksa p a znači da svi potomci imaju navedeno svojstvo, tj. sve poveznice koje su u odlomcima. 2013 © T. Stojanov: Skripta – UHC stranica 72 Sintaksa p + a označuje <a> koji je prvi brat nakon , tj. samo prva poveznica nakon odlomka. Moguće je imati i višestruko kombiniranje obilježivača. body > div > a .desno p, .lijevo p, ul {color: blue;} Sintaktički operator > podržan je od tek od IE 7, a + od IE 9. Sveopći obilježivač Sveopći (univerzalni) obilježivač obilježuje se znakom zvjezdice (*), a njime se poništavaju zadane vrijednosti prebirnika (najčešće padding i margin) u cilju da se osiguramo da ćemo imati isti izgled stranice budući da svi prebirnici koriste neke svoje vlastite vrijednosti. * {margin: 0; padding: 0;} 2013 © T. Stojanov: Skripta – UHC stranica 73 Pseudoklase i pseudoelementi Pseudoklasi i pseudoelementi su „klase i elementi koji to nisu“, a odnose se na dinamički sadržaj, najčešće za poveznice. Obilježuju se dvotočkom. a:link a:visited a:focus a:hover a:active CSS3 je dovršio razvoj i standardizaciju modula obilježivača i donio dosta novosti kod pseudoklasa i pseudoelemenata, a ovdje navodimo samo dio gradiva koji se odnosi na prikaz odlomka , na status tekstualnoga polja <focus> i na uređivanje 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 sadržaja odlomka • p:after poslije sadržaja odlomka input:focus, textarea:focus {background: #ffc;} tr:hover { background-color: #3d80df; color: #fff; } 2013 © T. Stojanov: Skripta – UHC stranica 74 Uvjetovani komentari za IE Microsoft je razvio sintaksu prebirničkih komentara koji vrijede samo za Internet Explorer, a koji su nam vrlo korisni. Budući da su brojne inačice IE-a međusobno različite, imamo potrebu znati koju inačicu korisnik koristi da bismo mu isporučili njemu prilagođen CSS.  Ostali prebirnici, dakle, ignorirat će ovaj kod i smatrati ga običnim komentarom. Proširena sintaksa jest sljedeća:      Primjer korištenja u praksi:  Naglašavanje autorstva u CSS-u Spomenuli smo da nije moguće „zaštititi“ svoj dizajn pisan u CSS-u. Svakoj se stranici može vidjeti kod u HTML-u i CSS-u. Želimo li raditi autorske dizajne, morali bismo kodirati mrežne stranice u nekom drugom jeziku (npr. Flash i drugi jezici). Ono što možemo napraviti jest skrenuti pozornost na svoje autorstvo tako da datoteku s kodom u CSS-u učinimo za korak ili dva dalji od očiju posjetitelja. Ono što želimo postići jest ostaviti trag o sebi nalik na prikaz sa slike koristeći @import koji učitava kod u CSS-u. 2013 © T. Stojanov: Skripta – UHC stranica 76 treće poglavlje HTML5 2013 © T. Stojanov: Skripta – UHC stranica 77 O HTML5 Godine 1997. završen 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 proširivanje HTML 4.0 teško jednako kao i konvertiranje 4.0 u XML. Predložen je novi početak HTML-a utemeljenim na skupvima XML oznaka, a to se drži početkom XHTML-a u godini 1998. Tri godine nakon toga u 2001. objavljen je nacrt specifikacije XHTML 1.1. Striktnost u tadašnjem razvoju XHTML-a uvjetovana je istraživanjima koja su pokazala da 99,9% mrežnih stranica sadržava barem jednu pogrešku u kodiranju. Budući da prebirnici prikazuju stranice bez obzira na pogreške, više se nitko nije trudio poštivati standarde i ispravljati greške. Striktni mod XHTML-a trebao je riješiti taj problem. Godine 2004. Mozilla i Opera uz neke druge zainteresirane strane predložile su evoluciju HTML 4 sa sedam značajki (inzistiranje na sukladnosti, toleranciji na pogreške…). W3C nije podržao tu inicijativu u glasovanju, te je izjavljeno da se ne planira raditi na novome standardu pored onih koji se trenutačno 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 potječe naziv HTML5. Godine 2009. radna grupa za XHTML je obustavljena. Neki taj potez smatraju pogrešnim jer tvrde da je bit XHTML njegova strogoća te da je to ono što webu treba. Tvrdi se da nije zdravo prikazivati sadržaj stranica koje su pune pogrešaka, te da ih nitko ne ispravlja, a da autori nisu ni svjesni da ih čine. Zanimljivo je uočiti 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). Završetak standardizacije, kako se najavljuje, ne očekuje se za još nekoliko 5 godina. Trenutačno je fazi razvoja Candidate Recommendation nakon čega slijedi Proposed Recommendation i W3C Recommendation. Zadnja inačica HTML5 može se vidjeti na ovoj poveznici: http://www.whatwg.org/specs/web- apps/current-work/. Valja upozoriti da budući da se moduli stalno nadograđuju, treba pripaziti imaju li prebirnici podršku za određenu tehnologiju. Polazište HTML5 jesu: • neovisnost o softveru ili hardveru • smanjenje potrebe za vanjskim dodatcima (pluginovima) • nove značajke 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 naiđe na pogrešku. Validacija HTML5 nalazi se na ovim adresama, a ona je eksperimentalna jer se jezik stalno nadograđuje: • http://html5.validator.nu/ • http://validator.w3.org/ 2013 © T. Stojanov: Skripta – UHC stranica 78 HTML5 ne dopušta rad s okvirima, ali dopušta iframeove. Uz element <iframe> rabi se i <object> te imaju identičnu primjenu. Pitanje je kako se sada rade sidrišta u različitim okvirima ako više nema frameseta? Najvažnije značajke u HTML5 jesu: 1. HTML5 video: <video> 2. HTML5 audio: <audio> 3. uvođenje crtaće površine: <canvas> 4. Drag-and-Drop 5. lokalna pohrana 6. Web-radnici 7. podrška za izvanmrežni rad 8. geolokacija 9. prošireni HTML obrasci 10. novi semantički elementi HTML5 video Element kojim se poziva HTML5 video jest <video>. Do sada se video mogao gledati isključivo s pomoću dodataka (plugins) kao što su Adobe Flash, Apple QuickTime, MS Silverlight i RealMedia. Stari prebirnici koji ne podržavaju 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 videoisječci ubacuju se na sljedeći način: 2013 © T. Stojanov: Skripta – UHC stranica 80 Ova sintaksa obuhvaća da smo neki videoisječak pretvorili u različite formate i postavili ih sve čime smo izbjegli mogućnost da određeni prebirnik neće moći učitati željeli materijal. Logika prioriteta kaže da će prebirnici učitati prvi video koji će moći dekodirati. S ovim se veže i bug na iOS-u na iPadu gdje MP4 mora biti deklariran prvi jer se u suprotnome video neće moći prikazati. Atribut controls daje prebirničku videonavigaciju (traku te tipke play i stop). Očekuje 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 drži 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 Nažalost, još uvijek nije dogovoren zajednički i standardni kodek zbog čega smo prinuđeni više videodatoteka s različitim kodecima i upisivati sintaksu koju smo gore naveli. Pretvorba video iz jednoga u drugi kodek je vrlo jednostavna i može se odraditi preko mreže: http://video.online-convert.com/. HTML5 audio Dosad se audio implementirao primarno kroz Flash koji je tipično 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 podržavaju. 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? Način je vrlo sličan ubacivanju videodatoteka s atributom controls i potrebom konvertiranja u različite formate. 2013 © T. Stojanov: Skripta – UHC stranica 81 MP3 MP3 označuje MPEG-1 layer 3 i nije isto što i MPEG-3. Audiodatoteke s ovim kodekom spremaju se isključivo s nastavkom .mp3 i on je tzv. lossy-kodek, a to znači da ima gubitak kvalitete pri kodiranju. Kodek je pod vlasničkim pravima i zaštićen je patentima (Fraunhofer IIS i ini). Izrazito je raširen, popularan i prihvaćen, a koristi ga primarno i Flash. Smatra se sinonimom glazbe na računalu. Međutim, rad s MP3 može biti skup. Primjerice, distribuiramo li računalnu igru s više od 5000 distribucija koja u sebi koristi MP3 datoteke moramo platiti 2500 $ naknade. Programeri koji ugrade MP3 u Flashu isključeni su iz naplate. MP3 nije predviđeni kodek za element <video>. Mrežna pretvorba audiosadržaja moguće je napraviti na stranici http://audio.online-convert.com/. AAC AAC znači MPEG-4 Advanced Audio Codec i može se pohraniti u raznim formatima: .mp4, .m4a, .3gp, .aac i dr. Dizajniran je da bude nasljednik MP3 i kao i on, također je riječ o lossy-kodeku. Vlasnik patentnih prava ja Apple i nije ga moguće koristiti besplatno. Ovo je zadani kodek na iOS-u, PS3 itd. Stručnjaci ga smatraju najkvalitetnijim formatom: • veći 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 mogućnost hardverskoga dekodiranja Veliki mu je nedostatak zaštićenost 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. Sličan je MP3 po veličini 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 raširen (rijetke radiopostaje i tek mali dio računalnih igara ima audiosadržaj kodiran u ovome kodeku). Ipak, očekuje se veći zamah jer ga je Google prihvatio u formatu WebM. Crtaća površina canvas HTML5 uveo je element <canvas> kojim se ostvaruje polje za izvršavanje crtaćih mogućnosti JavaScripta. <canvas id="crtanje" width="200" height="100"></canvas> Lokalna pohrana Lokalna pohrana znači da web-stranice mogu spremati veće količine podataka na korisničko računalo i kasnije ih preuzimati. Koncept je sličan kolačićima, ali s većim mogućnostima (kolačići ili cookiji ograničene su veličine i prebirnik ih šalje svaki puta kada zatraži novu stranicu, a što predstavlja nepotrebno trošenje vremena i resursa). Tim se podatcima pristupa i manipulira preko JavaScripta. Svi koji mogu fizički pristupiti računalu, mogu pregledavati i mijenjati podatke u HTML5 lokalnoj pohrani. Lokalna pohrana može biti i tekstualna, ali i kao baza ili registar s ključevima i vrijednostima. Svaka web-stranica može čitati i uređivati samo svoje vrijednosti, ne i tuđe. Podatci se mogu spremati s obzirom na vrijeme isteka trajanja podataka ili bez vremenskoga ograničenja. 2013 © T. Stojanov: Skripta – UHC stranica 83 Web-radnici Web-radnici (web-workers) omogućavaju višenitno izvršavanje JavaScripta što znači pokretanje više različitih JavaScriptnih zadataka u pozadini, odvojeno od korisničkoga sučelja. Ostale značajke HTML5 HTML5 je omogućio podršku za izvanmrežni rad web-aplikacija što će puno značiti za sve one koji često koriste webmail, Google Docs i druge servise. Razvoj geolokacije predstavlja mogućnost prebirnika da pročita našu lokaciju s GPS-a te da omogući web-aplikacijama da ju koriste. Zatim, HTML obrasci bit će bitno prošireni. Definira se deset novih tipova unosa – za pretraživanje, brojke, doseg, boje, telefonske brojeve, web-adrese, adrese e-pošte i nadnevak. <input type="search"> <input type="number"> <input type="range"> <input type="color"> <input type="tel"> <input type="url"> <input type="email"> <input type="date"> Također, dodaje se i cijeli niz novih semantičkih elemenata (umjesto nesemantičkoga <div>) kao što su <article>, <summary>, <figure>, <footer>, <nav>, <section> itd. Mikropodatci predstavljaju ubacivanje dodatne semantike u tekst radi bolje pretraživosti i indeksabilnosti. 2013 © T. Stojanov: Skripta – UHC stranica 84 Google Maps u HTML-u Da bismo dodali navigaciju posjetiteljima naše 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. 2013 © T. Stojanov: Skripta – UHC stranica 85 2013 © T. Stojanov: Skripta – UHC stranica 86 četvrto poglavlje CSS3 2013 © T. Stojanov: Skripta – UHC stranica 87 O CSS3 Pred jezik CSS3 postavljaju se visoki zahtjevi jer mora odgovoriti na potrebe suvremenih korisnika – stupanj raširenosti weba, jaka konkurencija među proizvođačima prebirnika i njihove brze nadogradnje, nove i redefinirane tehnologije, mobilno, tabletno i TV računalstvo, 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 očekuje i da ima mogućnosti osnovne obradbe fotografije, da zamijeni uporabu JavaScripta na nekim mjestima, da konkurira Flashu, da se pomakne iz svijeta kodiranja u svijet programiranja. Razvoj je započeo u 1999. Do ožujka 2001. radna grupa W3C-a objavila je 40-ak modula. Do svibnja 2012. objavljen je 51 modul. Moduli se razvijaju nezavisno (npr. obilježivači, pozadine, boje itd.). Za prikaz CSS-a zaduženi 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 može se vidjeti trenutačni status svih modula u razvoju. U ožujku 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 budućnosti: https://demos.mozilla.org/. Obilježivači u CSS3 Pored postojećih kombinacija obilježivača E F (kombinator nasljednika ili descendant combinator: „obilježi F koji je nasljednik od E“), E > F (kombinator djeteta ili child combinator: „obilježi F koji je dijete od E“), E + F (kombinator susjednoga brata ili adjecent sibling combinator: „obilježi F kojeg neposredno pretiče E i koji imaju zajedničkoga roditelja), CSS3 uveo je i novu sintaksu. Sintaksa E ~ F označuje kombinator općega brata ili general sibling combinator: „obilježi F kojega pretiče E“. h1 ~ p {color: red;} 2013 © T. Stojanov: Skripta – UHC stranica 88 Podrška u prebirnicima: CSS3 uveo je i podršku za regularne izraze u obilježivače: • E[href^="http://"] – element E čiji atribut href počinje sa stringom "http://" • E[href$=".txt"] – element E čiji atribut href završava sa stringom ".txt" • E[title*="poveznica"] – element E čiji atribut title sadržava string "poveznica“ (osjetljivo na veličinu slova!) Podrška novih obilježivača: Prebirnički prefiksi Budući da je jezik još uvijek u razvoju, svi prebirnici imaju svoje prefikse koji se dodaju sintaksi radi razloga testiranja dotične tehnologije i razvoja novih rješenja. Na taj način također signaliziramo da dotični obilježivač još nije standardiziran i da će nekada izgled varirati od prebirnika do prebirnika, ali da proizvođač jamči da će tako napisan obilježivač ispravno funkcionirati u njegovu prebirniku. 2013 © T. Stojanov: Skripta – UHC stranica 89 Prebirnički prefiksi uvedeni su i da se spriječi loša praksa iz prošlosti. Naime, Internet Explorer 5 požurio je s implementacijom modela kutije prije nego ga je W3C standardizirao, a što je imalo za posljedicu brojne poteškoće o čijim posljedicama i danas razgovaramo (vidi poglavlje o modelu kutije). Proizvođačima je na ovaj način pušteno da testiraju svoje nestandardne obilježivače, a kada se implementacija uredi, prefiksi će se brisati i imat ćemo svi isti obilježivač. Zaobljivanje uglova i sjenčanje Kritike dizajnu staroga CSS-a bile su, među ostalim, da je „previše šiljast“. Razvile su se brojne tehnike zaobljivanja uglova, a u CSS-u je stvar bitno pojednostavljena – uveden je obilježivač koji to radi za nas. border-radius: 25px Također, rad sa slikovnim sjenama u CSS 2.1 pretpostavljao je tehniku korištenja slike sjene koja se postavljala na marginu glavne slike. U CSS3 imamo obilježivač koji to bitno pojednostavljuje i radi umjesto nas. box-shadow: 5px 5px 0 gray Sjenčanje teksta jednako je jednostavno: text-shadow: 5px 5px 5px #f00 Prozirnost CSS3 uvodi mogućnost obradbe fotografije uvođenjem prozirnosti (transparentnosti). Dosad smo morali sliku prethodno obraditi, a ovako sada imamo mogućnost i dinamičke promjene kroz kod. Četvrta vrijednost RGBA omogućuje prozirnost – 0 je potpuno prozirno, a 1 neprozirno. 2013 © T. Stojanov: Skripta – UHC stranica 90 Valja razlikovati prozirnost preko RGB-a u gornjemu primjeru i opacityja u donjem. Uočite da su riječi „treća površina“ u donjem primjeru izblijedjele što znači da opacity radi prozirnost svega, a ne samo boja. 2013 © T. Stojanov: Skripta – UHC stranica 91 Internet Explorer 6-8 ne podržavaju prozirnost pa za njega moramo pribjegavati drugačijim tehnikama. Rješenje je http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ i generiranje koda s pomoću filtra koje IE koristi. 2013 © T. Stojanov: Skripta – UHC stranica 92 Prebirnici Engleski izraz browser zapravo znači „prebiranje“ pa se on prevodi u hrvatski u doslovnome značenju kao „prebirnik“. Dosadašnji uvriježeni termin „preglednik“ prije bi se odnosio na viewer. Prebirnici igraju veliku ulogu pri učenju HTML-a i CSS-a jer (još uvijek) predstavljaju mjesto na koje moramo posebno obraćati pozornost. Naime, zbog naslijeđenih razloga i problema nejedinstvena prikaza istoga koda u različitim prebirnicima, kadšto moramo pisati više koda u CSS-u od kojih se jedan odnosi na jedan prebirnik ili razlučivost, a drugi na drugi prebirnik i razlučivost. Želimo li raditi mrežne stranice koje će biti vidljive svima i na način na koji mi želimo da one budu vidljive, moramo se prilagoditi različitim praksama i standardnima. Prebirnici su više od običnih ljuski (shell) za prebiranje po internetu. U njihov se razvoj ulaže mnogo pa je i očekivano da je konkurencija među njima tako izražena. Očekuje se da će prebirnici imati sve važniju ulogu u našim operativnim sustavima, a moguće je i da postanu operativni sustavi kao takvi (web OS). Prebirnici su postali i igraće infrastrukture (cloud gaming) kao i nositelji uredskih aplikacija (npr. Google Docs, MS Office 365). Razlike među njima postoje pa korisnici odabiru prema svojim kriterijima. Mi se na kolegiju primarno služimo Mozillom Firefox kao predstavnikom prebirnika koji je široko prihvaćen u akademskoj zajednici. Testiranje mrežnih stranica Velik je broj web-servisa koji testiraju mrežne stranice, ali među njima bismo izdvojili nekoliko najpoznatijih. 1. http://acid3.acidtests.org/ – testira podržanost i usklađenost s internetskim standardima 2. http://tools.pingdom.com/ – brzina učitavanja 2013 © T. Stojanov: Skripta – UHC stranica 93 3. http://validator.w3.org/ – podržanost i usklađenost s internetskim standardima 4. http://nibbler.silktide.com/ – razni testovi 2013 © T. Stojanov: Skripta – UHC stranica 94 5. http://gtmetrix.com/ – razni testovi 2013 © T. Stojanov: Skripta – UHC stranica 95 Literatura Knjige • Mark Pilgrim: Dive Into HTML 5 (http://diveintohtml5.org/) • Mark Pilgrim: HTML 5. Spreman za uporabu. IT Expert & O’Reilly, Dobar Plan 2010. (prijevod na hrvatski naslova HTML 5. Up and Running) • CSS Mastery: napredna Web rješenja, O’Reilly, 2006., 280 str. (prevedeno na hrvatski) • CSS Cookbook, O’Reilly, 3. izd, 2009., 736 str. • CSS: The Definite Guide, O’Reilly, 3. izd., 2006. • CSS: The Missing Manual, O’Reilly, 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 Mjesečni časopisi 1. Mreža – zadovoljavajuća kvaliteta priloga, okrenutost poslovnome sektoru, teme široko informatičke, često infrastrukturne, rjeđe o web- dizajnu i razvoju weba 2. Vidi – okrenutost webu, prepoznatljivost i tradicija u radu s dizajnom, „širi“ i inovativni pristup (portal, web-aplikacija, godišnja 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) 2013 © T. Stojanov: Skripta – UHC stranica 96 </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = '814f3a9df17664753ef1c384587bfa6c'; var endPage = 1; var totalPage = 96; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/814f3a9df17664753ef1c384587bfa6c-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>