Lab. vježba 5 PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić) HTML5
P R O G R A M I R A N J E Z A I N T E R N E T Općenito HTML5 je posljednja verzija HyperText Markup Language-a koji se, kako smo to već naučili, koristi za izgradnju internetskih stranica. Vremenom su korisnici postali sve zahtjevniji te se javila potreba za uvođenjem novih elemenata u HTML standard. U ovoj vježbi cilj je spomenuti i naučiti koristiti neke od njih. HTML5 se pojavio negdje u isto vrijeme kao i CSS3, a interes za njihovim korištenjem sve je veći iz dana u dan. HTML5 rezultat je zajedničkih napora od strane W3C (World Wide Web Consortium) i WHATWG (Web Hypertext Application Technology Working Group). Cilj je smanjiti ovisnost internetske stranice o skriptiranju na strani klijenta, odnosno o Javascriptu, ali i smanjiti ovisnost o alatima poput Adobe Flash Playera. Uvedeno je nekoliko novih HTML elemenata u ovoj verziji, poput <header>, <footer>, <nav>, a ideja je da oni zamijene općenite elemente poput <div> i <span>. Također, uvedeni su i novi elementi za video i zvuk, odnosno <video> i <sound> koji se koriste umjesto <object> elementa. Osim novih elemenata, uvedeno je i nekoliko API-ja koji se mogu koristiti sa JavaScriptom, a kao primjer možemo uzeti: Canvas 2D API Drag-and-Drop Geolokacija Web SQL baze podataka File API Svi ovi API-ji, kao i sam HTML5, neovisni su o uređajima na kojima se izvršavaju. Moguće ga je izvršiti i na uređajima koji troše malo energije, poput pametnih telefona. Ipak, treba voditi računa kako je HTML5 standard relativno mlad pa ga većina internetskih pretraživača i dalje ne podržava u potpunosti. 1
Djelić koda kojim se definira struktura HTML5 stranice: <!DOCTYPE html> <html> <head> <meta name="generator" content="programiranje za Internet" /> <title>naslov HTML5 stranice</title> </head> <body>prva HTML5 stranica</body> </html> Novi HTML5 elementi <! D O C T Y P E > <!DOCTYPE> je specifičan element, odnosno tag koji se definira na početku svake internetske stranice I to prije <html> elementa. Ovaj tag pretraživaču šalje informacije o tome koja se verzija HTML-a koristi. Iako to na prvi pogled izgleda, <!DOCTYPE> nije HTML tag iako da većina pretraživača prihvaća. < H E A D E R > Jedan od novih elemenata uvedenih u HTML5 je <header>. Koristi se za definiranje jednog ili više odjeljaka dokumenta. Preporuča se uz pomoć <header> elementa obuhvatiti uvodne naslove same stranice koji su definirani sa <h1> <h6>, sadržaj stranice, formu za pretraživanje, logo stranice i ostale slične elemente. Voditi računa da element <header> nema nikakve sličnosti sa elementom <head>. Također, nije moguće <header> element postaviti unutar <footer> i <address>, niti unutar drugog <header> elementa. Primjer korištenja ovog elementa: <header> <h1>programiranje za Internet</h1> Laboratorijske vjebe </header> Elementri <header>, <footer> i <nav> trebali bi zamijeniti elemente <div> i <span> u određenim situacijama, te se potiče njihovo korištenje. 2
< F O O T E R > <footer> element koristi se kao suprotnost <header> elementa, i postavlja se na kraj stranice. Ovaj element uglavnom sadrži informacije o autoru, autorskim pravima, kontakt informacijama, i drugim sličnim sadržajima. Ukoliko se kontakt informacije postavljaju unutar <footer> elementa, to se ne bi trebalo raditi direktno, već ih je potrebno porvo postaviti unutar <address> elementa. <footer> <ul> <li>autor</li> <li>mapa stranice</li> <li>pravila koritenja</li> </ul> </footer> < N A V > Još jedan novi element u HTML5, a koji se koristi za definiranje navigacijskih linkova je <nav>. Nije potrebno postaviti sve poveznice (linkove) koje se nalaze na stranici unutar ovog elementa, već samo važnije poveznice koje se uistinu koriste za navođenje po stranici. <nav> <a href="/">pocetna stranica</a> <a href="/blog/">blog</a> <a href="/sitemap.htm">sitemap</a> <a href="/kontakt.htm">kontakt</a> </nav> < A R T I C L E > < S E C T I O N > < H G R O U P > Kako bismo kreirali nezavisnu komponentu na internetskoj stranici koristimo element <article>. Ovo može biti nekakva obavijest, vijest, komentar ili nešto slično. Jedan <article> element uglavnom se sastoji od naslova i paragrafa, a ponekad i <footer> elementa. Element <section> koristi se za semantičko odvajanje dijelova internetske stranice. Semantičko iz razloga što i ljudima i računalu dajemo nekakav smisao za neki dio stranice. Ukoliko želimo koristiti element kojim bismo odvojili dijelove stranice za njihovo vizualno pozicioniranje, onda je potrebno koristiti <div> element. Za grupiranje naslova (headinga, <h1>.. <h6>) sa podnaslovvima, koristi se element <hgroup>. 3
< F I G U R E > < F I G C A P T I O N > Za označavanje jedne ili više slika unutar HTML5 dokumenta, koristimo <figure> element. Njime se definira samostalan sadržaj koji je neovisan o ostatku toka stranice. Ukoliko želimo definirati naslov <figure> elementa, koji će se ispisati ispod slike, onda koristimo <figcaption>: <figure> <img src="slika.jpg" alt="slika1" width="400" height="300"> <figcaption>ovo je prva slika</figcaption> </figure> < C A N V A S > < A U D I O > Novi element <canvas> koristi se za grafiku (crtanje) korištenjem skriptnih jezika poput JavaScript-a. Prije HTML5, audio datoteke bilo je moguće reproducirati samo uz pomoć dodatnih alata poput Adobe Flash Player-a, Apple Quicktime-a i slično. U HTML5 uveden je novi element <audio> čime se riješila podrška nativnog izvođenja audio datoteka unutar pretraživača. <audio controls="controls" loop="loop" autoplay="autoplay" preload="none"> <source src="song.mp3" type="audio/mpeg" /> Vaš pretraživač ne podržava audio element. </audio> Tekst koji se napiše između <audio> i </audio> prikazat će se ukoliko pretraživač ne podržava ovaj element. < V I D E O > Slično kao i audio element, postoji <video> element, a sintaksa za korištenje je vrlo slična. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> < T I M E > < M A R K > <time> element definira dodatna semantička svojstva kao vrijeme ili datum unutar internetske stranice. Ovaj element ne mijenja izgled same stranice, ali ga preglednici i pretraživači mogu koristiti za bolje rezultate. Element <mark> koristi se za označavanje (kao žuti marker) dijelova teksta unutar internetske stranice. 4
Također, uvedeni su i neki novi input elementi koje možemo koristiti sa formama, poput: date datetime datetime-local time month week color email url tel number range search Primjer korištenja nekih od njih: I N P U T T Y P E Rodendan: <input type="date" name="dob"> D A T E I N P U T T Y P E Dan pocetka praznika: <input type="datetime" name="datum_praznika"> D A T E T I M E I N P U T T Y P E Website Address: <input type="url" name="website_address"> U R L 5
< P R O G R E S S > Element <progress> koristi se kao grafički prikaz koliki je dio zadatka obavljen, slično kao što se to prikazuje na desktop aplikacijama. Vrlo često se koristi JavaScript kako bi se definirao postotak posla koji je obavljen. <progress value="23" max="100"></progress> Novi HTML5 elementi Korištenjem HTML5 elemenata: header nav hgroup time section progress mark input type date video footer i na temelju danih resursa, kreirati sljedeću stranicu: 6
7