HTML5

HTML5
HTML5 logo
Оригинални назив	енгл. HTML
Изговара се	ha-te-em-el pet
Појавио се	[2008].
Аутор(и)	WWW konzorcijum
Дијалекти	XHTML
Веб-сајт	w3.org/html5/

HTML (енгл. HyperText Markup Language) jezik je osnova svake veb stranice, uz pomoć koga se prezentuje izgled i sadržaj iste. Omogućava formatiranje stranice, obradu slika, teksta i još mnogo toga. Konzorcijum za veb (енгл. World Wide Web Consortium) (W3C) je zadužen za određivanje standarda, ovo je neophodno iz razloga što ne bi bilo moguće pregledavati bilo koju stranicu u bilo kom pretraživaču. HTML 5 je reč koja se sve češće pominje u IT svetu. HTML 5 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 nam donosi niz novosti i mogućnosti koje do sada nismo mogli koristiti za izradu veb sajtova bez dodatnih dodataka (енгл. plugin), kao što je na primer Flash. HTML 5 možemo više smatrati evoluciom HTML 4.01, nego zamenom. Uz dodatna poboljšanja, olakšavanja nekih aspekata, definisanjem nedefinisanog, novim mogućnostima, HTML 5 će svakako obeležiti period pred nama.

Istorija

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 je Tim Berners-Lee. Sve je počelo još 1980. godine, dok je Tim Berners-Lee radio po ugovoru u CERN-u (енгл. The European Organization for Nuclear Research). Predložio je prototip sistema za istraživače u CERN-u, uz pomoć koga bi mogli da koriste i dele dokumente. 1989. godine, Tim Berners-Lee je napisao rad kojim predlaže hipertekst (енгл. hypertext) sistem baziran na Internetu. U drugoj polovini 1990. godine specificirao je HTML i napisao softver i za server i za pretraživač. Te iste godine Tim Berners-Lee i inženjer informatike u CERN-u Robert Cailliau, su sarađivali i zajedno zahtevali sredstva, ali projekat nije formalno usvojen od strane CERN-a. U svojim ličnim beleškama iz 1990. godine Tim Berners-Lee je nabrojao neke od mnogih oblasti gde se hipertekst koristi, a kao prvu je stavio enciklopediju. 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.U ovom dokumentu je opisano 20 elemenata, koji su sačinjavali relativno jednostavan dizajn HTML-a. HTML je skraćenica od HyperText Markup Language koji veb pretraživači koriste da interpretiraju 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šćenjem CSS-a. Tim Berners-Lee je smatrao HTML kao primenu SGML-a (енгл. Standard Generalized Markup Language). Formalno je definisan kao takav od strane IETF-a(енгл. Internet Engineering Task Force) radom iz sredine 1993. godine, koji je bio predlog prve specifikacije 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 . Pri kraju 1993. godine, Dave Raggett je predložio standardizaciju već implementiranih elemenata kao što su tabele i forme. 1994. godine je Beerners-Lee osnovao W3C na Masačusetskom tehnološkom institutu (енгл. Massachusetts Institute of Technology), koji je usvojen kao standard prema kojem će sve veb stranice u budućnosti raditi na isti način. Posle isticanja HTML-a sa dopunama, na početku 1994. godine IETF je osnovao HTML radnu grupu (енгл. HTML Working Group), koja je 1995. godine završila „HTML 2.0“, prvu HTML specifikaciju sa namerom da se na njoj temelje sva dalja usavršavanja i izmene. HTML 2.0 je uključio ideje 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 zbog sukoba interesa. Od 1996. godine HTML specifikacija je održavana, dopunjavana od strane tvoraca komercijalnih softvera, kao i od strane W3C-a, čiji je osnivač Tim Berners-Lee. 2000. godine HTML postaje internacionalni 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 i WHATWG (енгл. Web Hypertext Application Technology Working Group) 2007. Godine. Mnogi su mislili da će WHATWG nestati kao samostalna organizacija, 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 iz Applea, Mozille, Opere i Googlea, 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 su Ian Hickson iz Googlea i David Hyatt koji radi za Apple.

Specifikacije

• HTML 2.0 — (RFC 1866)
• HTML 3.2 — 14 januar 1997,
• HTML 4.0 — 18. decembar 1997,
• HTML 4.01 (manje izmene) — 24. decembar 1999,
• ISO/IEC 15445:2000 („ISO HTML“, bazirano na HTML 4.01 Strict) — 15. maj 2000.
• HTML 5 — 22. januar 2008 (još uvek u razvoju)

Šta je HTML5?

Iako je W3C 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, tako da njegovu standardizaciju možemo očekivati 2014. godine, po procenama W3C-a. Kao peta verzija HTML-a osnovni cilj je bio unapređenje ovog programskog jezika, kao i podrška za najnovije multimedijalne sadržaje, a pri tome je cross-platform, tako da nije bitno da li koristite tablet, smartphone, netbook ili Smart TV, bitno je da vaš pretraživač podržava HTML5. HTML5 je namenjen da prevaziđe ne samo HTML4, nego XHTML1 i HTML DOM . WHATWG je radio na veb formama i aplikacijama, 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 Ovo je takođe i pokušaj da se definiše jedinstveni markup jezik, koji se može pisati i u HTML-u i u XHTML-u. Ovo uključuje detaljne procesne modele da bi ohrabrilo još interoperabilnih implementacija. To proširuje, unapređuje i racionalizuje označavanje dokumenata, kao što je omogućen i API (енгл. Application Programming Interfaces), za kompleksne veb aplikacijeNeki od novih elemenata su video, audio, canvas, kao i mnogi drugi, o kojima će biti reč kasnije. Pored novih elemenata ne možemo a da ne pomenemo integraciju SVG (енгл. Scalable Vector Graphics) sadržaja, koji zamenjuje upotrebu ‘’object’’ taga. Ove inovacije olakšavaju rukovanje multimedijalnim i grafičkim sadržajem na veb-u bez dodatnih plugin-ova i API-a. Neki od elemenata su promenjeni, neki izbačeni, sve u cilju pojednostavljenja organizacije i strukture dokumenta.

Osnovni principi

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:

• Nove karakteristike treba da se baziraju na HTML-u, CSS-u, DOM-u i JavaScript-u
• Smanjiti potrebu za eksternim plugin-ovima (Flash)
• Bolja obrada grešaka
• Više tagova koji bi zamenili skripte
• HTML5 bi trebalo da ne zavisi od uređaja na kome se koristi
• Proces razvoja treba biti dostupan javnosti

Novi elementi i karakteristike

Strukturni i semantički elementi

• Novi strukturni elementi (Tabela 1.)

Tag	Opis
<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 su ilustracije, dijagrami, fotografije, spiskovi kodova, itd.
<figcaption>	Definiše naslov za <figure> element
<footer>	Definiše footer za dokument ili odeljak
<header>	Definiše header za dokument ili odeljak
<hgroup>	Odredjuje veličinu naslova
<mark>	Definiše označeni tekst
<meter>	Definiše skalarno merenje u okviru poznatog opsega (manometar)
<nav>	Definiše navigacione linkove(hiperveza)
<progress>	Predstavlja napredak nekog zadatka
<ruby>	Definiše ruby anotaciju (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žavaju ruby anotacije
<section>	Definiše odeljak u dokumentu
<time>	Definiše datum/vreme
<wbr>	Definiše mogući prekid linije(енгл. line-break)

Media elementi

• Novi media elementi (Tabela 2.)

Tagovi	Opis
<audio>	Definiše zvučni sadržaj
<video>	Definiše video ili film
<source>	Definiše različite medijske resurse za <video> i <audio>
<embed>	Definiše container za spoljnu primenu interaktivnih sadržaja (енгл. plug-in)
<track>	Definiše tekstualne trake za <video> i <audio>

• Audio

Do sada nije postojao standard za preslušavanje audio datoteka na veb strani. Danas se većina audio fajlova preslušava preko plugi-ova (Flash), tako da svaki od pretraživača može imati različite. HTML5 kao jednu od novina sadrži element <audio>, kojim je definisan standard za audio fajlove na veb stranama .

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
	<source src="song.ogg" type="audio/ogg" />
	<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>

Atribut control dodaje nam audio kontrole kao što su pusti (енгл. play), pauziraj (енгл. pause), kao i mogućnost regulisanja jačine zvuka. Između krajnjih tagova nije na odmet staviti tekst kojim će korisnici biti obavešteni ukoliko njihov pretraživač ne podržava <audio> element. <audio> element omogućava elemente sa različitih izvora, <source> element nam omogućava da naši audio fajlovi budu na različitim lokacijama, a pretraživač će otvoriti prvi format koji podržava.

• Video

Kao i sa audio elementom, isti je slučaj i sa video elementom, do sada nije postojao standard za postavljanja videa na veb stranama. Do sada su vam bili potrebni razni dodaci, Apple QuickTime, RealPlayer ili Adobe Flash, koji su ugrađeni u pretraživače. Podrška za ovaj element je u razvoju, tako da ga ne podržavaju svi pretraživači još uvek, ali se radi na tome. Najveći problem je u usaglašavanju formata. HTML5 podržava .ogg, .mpeg4 i .webM, dok je ostale formate potrebno konvertovati.

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</body>
</html>

Atribut control kao i kod audio elementa nam dodaje opcije za kontrolu nad videom, ali za razliku od audio elementa moguće je navesti širinu i visinu videa koji će se prikazati u pretraživaču, kako bi prilikom učitavanja pretraživač rezervisao prostor. Između krajnjih elemenata možemo navesti tekst koji će se korisnicima prikazati ukoliko njihov pretraživač ne podržava video element.

Forme – Elementi, atributi i input types

Tokom izrade veb stranica samo pravljenje forme nikada nije bio problem koliko validacija unešenih podataka. Na raspolaganju smo imali nekoliko tipova elemenata formi (text, checkbox, radio button, popup list itd.), koji su najverovatnije u trenutku u kome su definisani bili dovoljni, međutim, sa brzom ekspanizijom broja korisnika interneta i tolikom količinom online servisa, forme su postajale sve korišćenije.

• Elementi

HTML5 ima nove elemente forme:

1. <datalist> element precizira listu unapred definisanih opcija za <input> element. On se koristi da obezbedi AutoComplete funkciju na <input> elementima. Korisnici će videti padajuću listu unapred definisanih opcija dok unose podatke.
2. <keygen> svrha elementa je da obezbedi siguran način za proveru identiteta korisnika.
3. <output> element prikazuje rezultat neke kalkulacije.

• Atributi

HTML 5 ima nekoliko novih atributa za <form> i <input>: Novi atributi za <form>:

1. autocomplete
2. novalidate

Novi atributi za <input>:
1.autocomplete 2.autofocus 3.form 4.formaction 5.formenctype 6.formmethod 7.formnovalidate 8.formtarget 9.height and width 10.list 11.min and max 12.multiple 13.pattern (regexp) 14.placeholder 15.required 16.step

• Input types

HTML5 donosi pregršt novih tipova elemenata u veb formama i u mnogome olakšava njihovu validaciju. Bez velike potrebe za javasriptom, regularnim izrazima ili CSS validacijom sada ćete moći da pravite složene, a opet dovoljno sigurne i ozbiljne forme. Evo spiska novih tipova:

1.color 2.datalist 3.date 4.datetime 5.datetime-local 6.email 7.month 8.number 9.range 10.search 11.tel 12.time 13.url 14.week

Grafika

Do nedavno, veb programeri su bili ograničeni na CSS i JavaScript kod stvaranja animacija i vizuelnih efekata za svoje veb stranice, ili prinuđeni da koriste plugin-ove kao što je Flash. Sa dodatkom novih tehnologija kao što su Canvas elementi, Web GL i SVG slike, više nema potrebe za ovim. Čak sada imamo i nove mogućnosti, nove funkcije koje možemo koristiti za grafiku na vebu:

• 2D Canvas
• WebGL
• SVG
• SMIL (енгл. Synchronized Multimedia Integration Language)

Naravno, nijedna od ovih novih tehnologija ne bi bile od koristi da se brzo ne izvršavaju. JavaScript engine su postali dovoljno brzi za pokretanje 3D igara i za manipulaciju videom u realnom vremenu. Programeri iskorišćavaju ove olakšice, poplava HTML grafičkih radova se pojavljuje na vebu, od implementacije starih 2D grafičkih algoritama do najnovijih tehnika stvorenih specijalno za moderni veb.

Drag and drop

Drag and drop se veoma često koriste. Predstavlja opciju „hvatanja“ i „puštanja“ objekta na određenu lokaciju. U HTML5 drag and drop je deo standarda i bilo koji element može biti premeštan na taj način.

Izbačeni elementi iz HTML4

Sledeći elementi koji su se koristili u HTML4 su uklonjeni u HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <dir>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Novi objekti

Veb skladištenje

HTML5 Veb skladištenje (енгл. Web storage) i sesija (енгл. 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. Svaki dokument dobija sessionStorage objekat uz nekoliko glavnih funkcija a podaci su klonovi trenutnih vrednosti. Prave prednosti dolaze sa pristupom localStorage objektu koji je sličan sessionStorage objektu ali se ponaša potpuno drugačije. Tamo gde sessionStorage zaboravlja, localStorage pamti. Podaci bi trebalo da budu sačuvani čak i nakon što se prozori zatvore i računar isključi.

Veb radnici

Veb radnik (енгл. Web worker) je JavaScript skripta definisana od strane W3C-a i WHATWG-a koju izvršava HTML strana u pozadini, nezavisno od ostalih [[user-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 prekidaju user-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.

Aplikacije sa keširanjem podataka

Od sve većeg značaja je dostupnost veb aplikacija kada smo offline. Svi pretraživači imaju svoje mehanizme za keširanje, ali oni su nepouzdani i neće raditi onako kako želimo. Sa ApplicationCache interfejsom HTML 5 pokušava da reši neke neprijatnosti koje se mogu desiti kada smo offline.

Korišćenje keš interfejsa nam pruža tri prednosti:

• Offline pretraživanje – korisnici se mogu kretati po vašoj stranici iako su offline.
• Brzina – keširani podaci su sačuvani na lokalnom disku, tako da se učitavaju brže.
• Smanjenje opterećenja server – pretraživač skida samo podatke koji su se promenili.

AppCache omogućava programerima da odrede koje fajlove će pretraživač keširati, a koje ne, za njihovu dostupnost kada je korisnik offline. Aplikacija će se učitati i raditi kako treba, čak iako korisnik osveži stranicu.

SSE

HTML5 događaji slanja na server (енгл. Server-Sent Events) omogućavaju veb stranici da se automatski nadogradjuje (енгл. update) sa servera. To je bilo moguće i ranije, ali je prvo veb stranica morala da pita da li su novi update-ovi dostupni. Sa SSE update stiže automatski.

• Primanje SSE notifikacije

EventSource objekat se koristi da bi se primila SSE notifikacija.

1. Kreiramo nov EventSource objekat, i određujemo URL stranice koja šalje update.
2. Svaki put kada je update primljen, onmessage događaj se pojavljuje.
3. Kada se onmessage događaj pojavi, staviti primljene podatke u element sa id=“result“.

Podrška pretraživača

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).

	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

Vidi takođe

• HTML
• CSS
• SVG

Reference

Spoljašnje veze

• HTML5 – aktuelna specifikacija
• HTML 4.01 — aktuelna specifikacija
• Konzorcijum za web — organizacija koja je propisala HTML standard
• W3C validator — alat za proveru HTML dokumenata
• HTML5 Bookmarks — korisni članci i beleške
• HTML5 Center —HTML5 centar za pomoć
• HTML5 Demos — probne verzije i primeri
• Support — testiranje vašeg trenutnog veb pretraživača
• Mobile HTML5 — HTML5 za mobilne telefone
• FindMeByIP — podrška za konkretne funkcionalnosti HTML-a 5 kao i CSS-a
• TestingCenter — upoređivanje podrške veb pretraživača za HTML 5