| HTML5 | |
|---|---|
 HTML5 logo | |
| Originalni naziv: | engleski:HTML5 |
| Izgovara se: | ha-te-em-el pet |
| Model: | |
| Pojavio se: | [2008]. |
| Autor(i): | WWW konzorcijum |
| Dijalekti: | XHTML |
| Sajt: | w3 |
HTML (engleski:HyperText Markup Language) jezik je osnova svakeveb stranice, uz pomoć koga se prezentuje izgled i sadržaj iste. Omogućavaformatiranje stranice, obradu slika, teksta i još mnogo toga.Konzorcijum za veb (engleski:World Wide Web Consortium) (W3C) je zadužen za određivanjestandarda,[1] ovo je neophodno zato što ne bi bilo moguće pregledavati bilo koju stranicu u bilo kom pretraživaču.
HTML5 je predlog novih standarda koji nam pružaju nove mogućnosti, kao i da isprave i nadomeste neke dosadašnje nedostatke. Radi se o novoj verziji HTML-a, koja donosi niz novina i mogućnosti koje do sada nisu bile dostupne koristiti za izraduveb sajtova bez dodatnih dodataka (engleski:plugin), kao što suFlash,Java i Silverlight. HTML5 predstavlja evoluciju HTML 4.01 standarda, a ne zamenu.
Ne možemo početi priču o HTML5 bez pomena najzaslužnijih ljudi, kao i bez osvrta na prethodne verzije i do danas utvrđenih standarda.
Najzaslužniji za razvoj HTML-a 5 jeTim Berners-Lee. Sve je počelo još 1980. godine, dok je Tim Berners-Lee radio po ugovoru uCERN-u (engleski: The European Organization for Nuclear Research). Predložio jeprototip sistema za istraživače u CERN-u, uz pomoć koga bi mogli da koriste i deledokumente. 1989. godine, Tim Berners-Lee je napisao rad kojim predlažehipertekst (engleski:hypertext)[2] sistem baziran naInternetu. U drugoj polovini 1990. godine specificirao je HTML i napisaosoftver i zaserver i za pretraživač. Te iste godine Tim Berners-Lee iinženjer informatike u CERN-uRobert Cailliau, su sarađivali i zajedno zahtevali sredstva, ali projekat nije formalno usvojen od strane CERN-a. U svojim ličnimbeleškama iz 1990. godine Tim Berners-Lee je nabrojao[3] neke od mnogih oblasti gde se hipertekst koristi, a kao prvu je stavioenciklopediju. Prvi pisani javni dostupni dokument o HTML-u je bio dokument pod nazivom „HTML Tags“. Objavio ga je Tim Berbers-Lee u drugoj polovini 1991. godine.[4] U ovom dokumentu je opisano 20 elemenata, koji su sačinjavali relativno jednostavan dizajn HTML-a.[5]
HTML je skraćenica odHyperText Markup Language koji veb pretraživači koriste dainterpretiraju i slože tekst, slike i ostale materijale na veb strani. Početne karakteristike za svaki element HTML-a je definisan u pretraživaču, a ove karakteristike se mogu dopuniti i izmeniti korišćenjemCSS-a. Tim Berners-Lee je smatrao HTML kao primenuSGML-a (engleski:Standard Generalized Markup Language). Formalno je definisan kao takav od straneIETF-a(engleski:Internet Engineering Task Force) radom iz sredine 1993. godine, koji je bio predlog prvespecifikacije HTML-a: "Hypertext Markup Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, koja je uključivala SGML Document Type Definition da definiše pravila, tj.gramatiku.[6] Pri kraju 1993. godine,Dave Raggett je predložio standardizaciju većimplementiranih elemenata kao što sutabele iforme. 1994. godine je Beerners-Lee osnovao W3C naMasačusetskom tehnološkom institutu (engleski: Massachusetts Institute of Technology), koji je usvojen kao standard prema kojem će sve veb stranice u budućnosti raditi na isti način.[7]Posle isticanja HTML-a sa dopunama, na početku 1994. godine IETF je osnovao HTML radnu grupu (engleski:HTML Working Group), koja je 1995. godine završila „HTML 2.0“, prvu HTML specifikaciju sa namerom da se na njoj temelje[8] sva dalja usavršavanja i izmene. HTML 2.0 je uključioideje iz HTML-a, kao i iz HTML-a sa dopunama, ali sa osnovnom namerom da se razlikuje od prethodnih verzija. Budući razvoj pod okriljem IETF-a je prekinut zbogsukoba interesa.
Od 1996. godine HTML specifikacija je održavana, dopunjavana od strane tvoraca komercijalnih softvera, kao i od strane W3C-a,[9] čiji je osnivač Tim Berners-Lee. 2000. godine HTML postajeinternacionalni standard (ISO/IEC 15445:2000). HTML 4.01 je objavljen krajem 1999. godine, sa dopunom je objavljena još jedna verzija 2001. godine.
2004. godine se počinje sa radom na HTML5. Ovom projektu se uz W3C priključila iWHATWG (engleski:Web Hypertext Application Technology Working Group) 2007. Godine.[10] Mnogi su mislili da će WHATWG nestati kao samostalnaorganizacija, ali se zadržala kao takva i nastavila rad na specifikaciji HTML-a 5. Trenutno postoje dve paralelne verzije HTML-a 5, jedna službena na kojoj radi W3C, i neslužbena na kojoj rade stručnjaci izApplea,Mozille,Opere iGooglea, koji imaju veliki uticaj na razvoj Interneta, iako iza sebe nemaju formalnu organizaciju kao što je W3C. Ipak, urednici HTML-a 5 specifikacije za oba tima su isti ljudi, što znači da grupe međusobno sarađuju i da će na kraju ipak postojati jedan standard. Urednici HTML 5 specifikacije suIan Hickson iz Googlea iDavid Hyatt koji radi za Apple.
Iako je WHATWG počeo sam da razvija HTML 5, može se reći da je HTML 5 proizvod saradnje W3C-a i WHATWG-a. HTML5 je još uvek u fazi razvoja, a standardizacija se očekuje 2014. godine, po procenama W3C-a. Kao peta verzija HTML-a osnovni cilj je bio unapređenje ovog jezika, kao i podrška za najnovije multimedijalne sadržaje. Pri tome jecross-platform, tako da nije bitno da li se dokument pregleda pomoćutableta,smartphonea,netbooka, sve dok postoji podrška za HTML5 na pretraživaču.[11]
HTML5 je namenjen da prevaziđe ne samo HTML4, negoXHTML1 iHTML DOM.[12] WHATWG je radio na veb formama iaplikacijama, dok je W3C radio na XHTML 2.0. 2006. godine su počeli zajedničku saradnju, tako da se HTML5 može smatrati mešavinom karakteristika i specifikacija HTML-a i XHTML-a. Ovome je doprinela zajednička praksa, kao i mnoge greške u postojećim veb dokumentima[13] Ovo je takođe i pokušaj da se definiše jedinstvenimarkup jezik, koji se može pisati i u HTML-u i u XHTML-u. Ovo uključuje detaljne procesnemodele da bi ohrabrilo jošinteroperabilnih implementacija. To proširuje, unapređuje i racionalizuje označavanje dokumenata, kao što je omogućen iAPI (engleski: Application Programming Interfaces), za kompleksne veb aplikacije[12] Neki od novih elemenata suvideo, audio,canvas, kao i mnogi drugi, o kojima će biti reč kasnije. Pored novih elemenata ne možemo a da ne pomenemointegracijuSVG (engleski: Scalable Vector Graphics) sadržaja, koji zamenjuje upotrebu ‘’object’’ taga. Oveinovacije olakšavaju rukovanje multimedijalnim igrafičkim sadržajem na veb-u bez dodatnihplugin-ova i API-a. Neki od elemenata su promenjeni, neki izbačeni, sve u cilju pojednostavljenja organizacije i strukture dokumenta.
Na razvoju HTML-a 5 pored pokretača projekta, uključeni su i stručnjaci iz svih većih pretraživača, da bi svojim iskustvom i znanjem doprineli boljem i uspešnijem razvoju. Neke od ideja i principa kojima se vode ljudi koji učestvuju u razvoju HTML-a 5 su:
| <article> | Definišečlanak |
| <aside> | Definiše sadržaj, pored sadržaja same stranice |
| <bdi> | Izoluje deo teksta koji bi mogao biti formatiran drugačije, u odnosu na tekst izvan njega |
| <command> | Definiše komandno dugme koje korisnik može da pozove |
| <details> | Definiše dodatne detalje koje korisnik može da vidi ili da sakrije |
| <summary> | Definiše vidljiv naslov za<details> element |
| <figure> | Navodi samostojeći sadržaj, kao što suilustracije,dijagrami,fotografije,spiskovi kodova, itd. |
| <figcaption> | Definiše naslov za<figure> element |
| <footer> | Definišefooter za dokument ili odeljak |
| <header> | Definišeheader za dokument ili odeljak |
| <mark> | Definiše označeni tekst |
| <meter> | Definišeskalarno merenje u okviru poznatog opsega (manometar) |
| <nav> | Definišenavigacione linkove (hiperveza) |
| <progress> | Predstavlja napredak nekog zadatka |
| <ruby> | Definišerubyanotaciju (za istočnoazijsku tipografiju) |
| <rt> | Definiše objašnjenje/izgovor karaktera (za istočnoazijsku tipografiju) |
| <rp> | Definiše šta da pokaže u pretrazivacima koji ne podržavajuruby anotacije |
| <section> | Definiše odeljak u dokumentu |
| <time> | Definiše datum/vreme |
| <wbr> | Definiše mogući prekid linije(engleski: line-break) |
| <audio> | Definiše zvučni sadržaj |
| <video> | Definiše video ilifilm |
| <source> | Definiše veze ka datotekama za<video> i<audio>, koje mogu biti u različitim formatima |
| <embed> | Definišecontainer za spoljnu primenu interaktivnih sadržaja (engleski: plug-in) |
| <track> | Definiše tekstualne trake za<video> i<audio> |
Atributcontrol na<audio> i<video> elementima dodaje kontrole kao što su play/pause, kao i mogućnost kontrole jačine zvuka.[21] Atributautoplay omogućuje automatsku reprodukciju sadržaja po njegovom preuzimanju.<video> element poseduje iposter koji predstavlja link na sliku koja se prikazuje na samom elementu pre reprodukcije; u slučaju da ovaj atribut nije prisutan, prikazuje se prviengleski:frame samog video snimka.
<source> element omogućava da audio i video datoteke budu na različitim lokacijama i u različitim formatima, a pretraživač će otvoriti prvi format koji podržava.[22] Preporuka je da se zbog razlika u kompatibilnosti i video kodecima dodaju izvori ka više datoteka u različitim formatima, kao i da se prikaže poruka sa linkovima ka samim audio i video datotekama kako bi posetioci mogli da pristupe sadržaju u slučaju da njihovi pretraživači ne podržavaju HTML5 audio i video.[23]
Pre HTML5 nije postojao standard za reprodukciju audio datoteka na veb stranama, već se ona vršila uz pomoćplugin-ova (Flash).[24] HTML5 kao jedno od unapređenja sadrži<audio> element, kojim je definisan način za postavljanje i reprodukciju audio snimaka na veb stranama.[25]
<audiocontrols><sourcesrc="song.ogg"type="audio/ogg"/><sourcesrc="song.mp3"type="audio/mpeg"/><p>Your browser does not support HTML5 audio.</p><p>Download:<atype="audio/ogg"href="song.ogg">Ogg</a> |<atype="audio/mpeg"href="song.mp3">MP3</a></p></audio>
Pre HTML5 standarda nije postojao standard za postavljanja videa na veb stranama,[26] pa su za pregled video snimaka bili potrebni razni dodaci,Apple QuickTime,RealPlayer iliAdobe Flash.[27] Najveći problem je u usaglašavanju formata. Implementacije HTML5 u pretraživačima podržavaju.ogg,.mpeg4 i.webM.[28]
<videowidth="320"height="240"controls><sourcesrc="movie.mp4"type="video/mp4"/><sourcesrc="movie.ogg"type="video/ogg"/><p>Your browser does not support the HTML5 video.</p><p>Download:<atype="video/mp4"href="movie.mp4">MP4</a> |<atype="video/ogg"href="movie.ogg">Ogg</a></p></video>
Do pojave HTML5 standarda, postojalo je samo par osnovnih tipova kontrola na formularima (text,checkbox,radio button,popup list itd.), koji su u trenutku u kome su definisani bili dovoljni. Međutim, sa brzom ekspanizijom interneta, kako po broju korisnika, tako i po količini servisa i aplikacija, formulari su postajale sve korišćeniji, a potrebe sve veće.[29]
| <datalist> | precizira listu unapred definisanih opcija za<input> element, što omogućuje dodavanje tzv.AutoComplete funkcionalnosti na elementima formulara; korisnici će videti padajuću listu unapred definisanih opcija dok unose podatke |
| <keygen> | svrha elementa je da obezbedi siguran način za proveru identiteta korisnika |
| <output> | element prikazuje rezultat neke operacije nad formularom[30] |
HTML5 uvodi nekoliko novih atributa za<form> i<input>:
| autocomplete | uključuje ili isključuje automatsko popunjavanje polja za sve kontrole na formularu |
| novalidate | uključuje ili isključuje validaciju za sve kontrole na formularu |
| autocomplete | uključuje ili isključuje automatsko popunjavanje za datu kontrolu |
| autofocus | postavlja kursor za unos teksta u polje sa ovim atributom; može ga imati samo jedan element na stranici |
| form,formaction,formenctype,formmethod,formnovalidate,formtarget | omogućuju da se kontroli dodele svojstva formulara, bez potrebe da se sam elementi nalazi u okviru formulara; ovi atributi imaju identično ponašanje kao atributi istog imena na<form> elementu. |
| height iwidth | definišu dimenzije kontrole |
| list | definiše vezu na<datalist> element iz kojeg će uzimati vrednosti |
| min imax | definiše najmanju i najveću vrednost za kontrole tipa "number" i "range" |
| pattern | regularni izraz po kojem se vrši provera vrednosti polja* |
| placeholder | predstavlja tekst koji se nalazi u polju do unosa, uglavnom predstavljen sivom bojom, koji se najčešće koristi kao vizuelni ključ o svrsi polja ili tipu/formatu sadržaja |
| required | označava polje koje obavezno mora imati vrednost* |
| step | definiše korak povećanja vrednosti za kontrole tipa "number" i "range" |
| * pretraživač zaustavlja slanje formulara ukoliko uslovi nisu zadovoljeni | |
HTML5 uvovi pregršt novih tipova elemenata u veb formama, što u mnogome olakšava unos različitih tipova podataka i njihovu proveru.[33]
| color | boja u heksadecimalnom zapisu (npr.#FF00FF) |
| date,time,datetime,datetime-local,month,week | različiti formati datuma i vremena |
| adresa elektronske pošte (npr.example@example.com) | |
| number | brojna vrednost |
| range | opseg brojnih vrednosti |
| search | pretraga; nema funkcionalne razlike u odnosu na obično teksualno polje, ali se vizuelno razlikuje i nudi mogućnost pamćenja prethodno traženih termina |
| tel | broj telefona |
| url | veb adresa (npr.http://example.com/) |
Do nedavno,veb programeri su bili ograničeni na CSS i JavaScript kod stvaranjaanimacija i vizuelnih efekata za svoje veb stranice, ili prinuđeni da koristeplugin-ove kao što je Flash. Sa dodatkom novihtehnologija kao što su Canvas elementi, Web GL i SVG slike, više nema potrebe za ovim. Čak sada imamo i nove mogućnosti, novefunkcije koje možemo koristiti za grafiku na vebu:[35]
Naravno, nijedna od ovih novih tehnologija ne bi bile od koristi da se brzo ne izvršavaju. JavaScriptengine su postali dovoljno brzi za pokretanje3D igara i zamanipulaciju videom u realnom vremenu. Programeri iskorišćavaju ove olakšice, poplava HTML grafičkih radova se pojavljuje na vebu, od implementacije starih 2D grafičkihalgoritama do najnovijih tehnika stvorenih specijalno za moderni veb.[11]
Drag and drop se veoma često koriste. Predstavlja opciju „hvatanja“ i „puštanja“ objekta na određenu lokaciju. U HTML5drag and drop je deo standarda i bilo koji element može biti premeštan na taj način.[36][37]
Sledeći elementi koji su se koristili u HTML4 su uklonjeni u HTML5:[38]
HTML5Veb skladištenje (engleski:Web storage) isesija (engleski: session) skladištenja je najjednostavniji nivo veb skladištenja koji skladišti podatke za trenutnu sesiju – drugim rečima, sve dok je tab pretraživača ili prozor otvoren. Ovo možda i nije najbolje rešenje budući da specifikacije ostavljaju otvorenu mogućnost pretraživaču da sačuva ove podatke tokom ponovnog pokretanja.[39]Svaki dokument dobijasessionStorage objekat uz nekoliko glavnih funkcija a podaci suklonovi trenutnih vrednosti. Prave prednosti dolaze sa pristupomlocalStorage objektu koji je sličansessionStorage objektu ali se ponaša potpuno drugačije. Tamo gdesessionStorage zaboravlja,localStorage pamti. Podaci bi trebalo da budu sačuvani čak i nakon što se prozori zatvore i računar isključi.[40]
Veb radnik (engleski:Web worker) je JavaScript skripta definisana od strane W3C-a i WHATWG-a koju izvršava HTML strana u pozadini, nezavisno od ostalihuser-interface skipti koje se takođe mogu izvršavati od strane iste HTML strane. W3C i WHATWG su zamislili JavaScript radnike kao skriptu koju ne prekidajuuser-interface skripte, skripte koje odgovaraju na klik miša ili druge interakcije korisnika. Neprekidanje rada JavaScript radnika od strane korisničkih aktivnosti omogućava veb stranama da ostanu dostupne u trenutku izvršenja dugih procesa u pozadini. Najjednostavnija primena je u tome da se izvršavaju zahtevni procesi u pozadini bez prekidanja korisničkog interfejsa. W3C i WHATWG trenutno rade na definisanju API-a za veb radnike.[41]
Od sve većeg značaja je dostupnost veb aplikacija kada smooffline. Svi pretraživači imaju svoje mehanizme za keširanje, ali oni su nepouzdani i neće raditi onako kako želimo. SaApplicationCache interfejsom HTML 5 pokušava da reši neke neprijatnosti koje se mogu desiti kada smooffline.[42]
Korišćenje keš interfejsa nam pruža tri prednosti:
AppCache omogućava programerima da odrede koje fajlove će pretraživač keširati, a koje ne, za njihovu dostupnost kada je korisnikoffline. Aplikacija će se učitati i raditi kako treba, čak iako korisnik osveži stranicu.[42]
HTML5 događaji slanja na server (engleski: Server-Sent Events) omogućavaju veb stranici da se automatski nadogradjuje (engleski: update) sa servera. To je bilo moguće i ranije, ali je prvo veb stranica morala da pita da li su noviupdate-ovi dostupni. Sa SSEupdate stiže automatski.[44]
EventSource objekat se koristi da bi se primila SSEnotifikacija.
U ovom poglavlju ćemo videti koji nivo podrške za HTML 5 nam pružaju najpopularniji veb pretraživači. HTML 5 se veoma brzo menja i veb pretraživači podržavaju sve veći broj njegovih funkcionalnosti. U sledećoj tablici je prikazana trenutna podrška veb pretraživača za HTML 5 (Tabela 3).[46][47][48][49]
| Chrome | Firefox | Explorer | Opera | Safari | |
| Canvas | Da | Da | Da | Da | Da |
| Video element | Da | Da | Da | Da | Ne |
| Local storage | Da | Da | Da | Da | Da |
| Offline apps | Da | Da | Ne | Da | Da |
| HTML5 forms | Delimično | Delimično | Ne | Da | Delimično |
| Drag and Drop | Da | Da | Da | Ne | Da |
