Elektronski fakultet u Nišu

Katedra za računarstvo i informatiku

Profesor:
Prof. Dr Milena Stanković

Asistent:
Ivan Petković

Predmet:
Internet Tehnologije

HTML5

Studenti:
Miloš Mitić 12988
 HTML5

Sadržaj:

1. Uvod 3

2. Istorija 3

3. Š ta je HTML5? 4

4. Osnovni principi 5

5. Novi elementi i karakteristika 6

5.1 Multimedia 6
5.2 Grafika 8
5.3 Aplikacije 10
5.4 Forme, strukture i semantički elementi 13
5.5 CSS3 u HTML5 20

6. Podrška pretraživača 21

7. Zaključak 22

8. Literatura 23

2
 HTML5

1. Uvod

HTML (Hyper Text Markup Language) jezik je osnova svake web stranice, uz pomoć koga se
prezentuje izgled i sadržaj iste. Omogućava formatiranje stranice, obradu slika, teksta i još mnogo toga.
W3C (World Wide Web Consortium) je zadužen za odredjivanje standarda, ovo je neophodno iz
razloga što ne bi bilo moguće pregledjivati 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
web sajtova bez dodatnih plugin-ova, 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.

2. 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 utvrdjenih standarda.
Na početku priče o najzaslužnijim ljudima za razvoj pre svega Web-a, a zatim i HTML-a, ne
možemo a da ne stavimo velikim slovima ime čoveka koji je svakako najzaslužniji za sve ono što danas
koristimo iz ove oblasti. Njegovo ime 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
saradjivali 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 document o HTML-u je bio dokument
pod nazivom „HTML Tags“. Objavio ga je Tim Berbers-Lee u drugoj polovini 1991. 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 web pretraživači koriste da
interpretiraju i slože tekst, slike i ostali materijal na web 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).
3
 HTML5

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
Massachusetts Institute of Technology (MIT), koji je usvojen kao standard prema kojem će sve web
stranice u budućnosti raditi na isti način.
Posle isticanja HTML sa dopunama, na početku 1994 godine IETF je osnovao 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, kao i iz HTML sa dopunama,
ali sa osnovnom namerom da se razlikuje od predhodnih verzija. Budući razvoj pod okriljem IETF-a je
prekinut zbog sukoba interesa.
Od 1996 godine HTML specifikacija je održavana, dopunjivana od strane tvoraca komercijalnih
softvera, kao i od strane W3C (World Wide Web Consortium), č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 jos 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 5.
Trenutno postoje dve paralelne verzije HTML 5, jedna službena na kojoj radi W3C i neslužbenu na kojoj
rade stručnjaci iz Applea, Mozille, Opere i Googlea, koji imaju velik utjecaj na razvoj Interneta, iako iza
sebe nemaju formalnu organizaciju kao što je W3C. Ipak, urednici HTML 5 specifikacije za oba tima su isti
ljudi, što znači da grupe međusobno sarađuju i da ćemo na kraju ipak imati jedan standard. Urednici
HTML 5 specifikacije su Ian Hickson iz Googlea i David Hyatt koji radi za Apple.

3. Šta je HTML5?

Iako je W3C počeo sam da razvija HTML5-icu, može se reći da je HTML5 proizvod saradnje W3
Konzorciuma i WHATWG. HTML5 je još uvek u fazi razvoja, tako da njegovu standardizaciju možemo
očekivati 2014 godine, po procenama W3 Konzorciuma. Kao peta verzija HTML-a osnovni cilj je bio
unapredjenje ovog 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 prevazidje ne samo HTML4, nego XHTML1 i HTML DOM. WHATWG je
radial na web 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.

4
 HTML5

Ovome je doprinela zajednička praksa, kao i mnoge greške u postojećim web dokumentima, ovo je
takodje 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,
unapredjuje i racionalizuje označavanje dokumenata, kao što je omogućen i API (application
programming interfaces), za kompleksne web aplikacije.
Neki od novih elemenata su video, audio, canvas, kao i mnogo drugih, 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 web-u bez dodatnih plugin-ova i API-a. Neki od elemenata su promenjeni, neki
izbačeni, sve u cilju pojednostavljenja organizacije structure dokumenta.

4. Osnovni principi

Na razvoju HTML5 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 HTML5 su:

 Nove karakteristike treba da se baziraju na HTML, CSS, DOM 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 uredjaja na kome se koristi
 Proces razvoja treba biti dostupan javnosti

5
 HTML5

5. Novi elementi i karakteristike

HTML 5 je definitivno standard koji će prilično brzo promeniti pogled na Internet, doprineti
lakšem i bržem razvoju ozbiljnih aplikacija, omogućiti apsolutnim početnicima da jednostavno kreiraju
sve aktualne komponente na web stranicama, pa čak i one malo zahtjevnije. Kada govorim o HTML 5
standardu, ne govorim samo o HTML-u, već u o nizu tehnologija implementiranih pod navedenim
imenom. Tu su pre svega CSS i JS (JavaScript), ali i sve ono novo i zanimljivo što donosi HTML 5.

5.1 Multimedia

 Audio

Do sada nije postojao standard za preslušavanje audio fajlova na web strain. Danas se većina audio
fajlova preslušava preko plugin-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 web
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 play, 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. Na slici 1 je prikazana realizacija audio elementa.

Slika 1. Audio element – Google Chrome

6
 HTML5

 Video
Kao i sa audio elementom, isti je slučaj i sa video elementom, do sada nije postojao standard za
postavljanja videa na web stranama. Do sada su vam bili potrebni razni dodaci (plug-ins), Apple
QuickTime, RealPlayer ili Adobe Flash, koji su ugradjeni 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. HTML 5 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, stim što za
razliku od audio elementa nije loše navesti širinu i visinu videa koji će se prikazati u pretraživaču, kako bi
prilikom učitavanja pretraživač rezervisao proctor. Izmedju krajnjih elemenata možemo navesti tekst
koji će se korisnicima prikazati u koliko njihov pretraživač ne podržava video element. Na slici 2 je
prikazana realizacija video elementa.

Slika 2. Video element – Google Chrome

7
 HTML5

5.2 Grafika

Do nedavno, web programeri su bili ograničeni na CSS i JavaScript kod stvaranja animacija i
vizuelnih efekata za svoje web stranice, ili prinudjeni 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 šta više
sad imamo i nove mogućnosti, nove funkcije koje možemo koristiti za grafiku na web-u:

 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
“engines” su postali dovoljno brzi za pokretanje 3D igara i za manipulaciju videom u realnom vremenu.
Programer iskorišćavaju ove olakšice, poplava HTML grafičkih radova se pojavljuje na web-u, od
implementacije starih 2D grafičkih algoritama do najnovijih tehnika stvorenih specijalno za moderni web.

 2D Canvas

HTML5 Canvas elementi koriste JavaScript za crtanje raznih oblika na web strain. Canvas
pretstavlja “platno”, pravougaonik nad kojim imamo potpunu kontrolu, kontrolišemo svaki piksel. Canvas
element ima nekoliko metoda za crtanje putanja, pravougaonih figura, krugova, krivi, karaktera kao i za
dodavanje slika.

<canvas id="canvas" width="838" height="220"></canvas>

<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

Ovo je primer jednog Canvas elementa u čijem početnom tagu navodimo njegov id, kao i dimenzije
Canvas elementa kojim manipulišemo. Kako Canvas element nema crtačkih sposobnosti, za to se koristi

8
 HTML5

JavaScript. U skripti navodimo oblike ili putanje koje želimo da iscrtamo, obojimo, kao i druga
podešavanja za naše grafičke radove. Na slici 3 je prikazana realizacija prethodnog koda.

Slika 3. Canvas element

 WebGL

WebGL (Web-based Graphics Library) je biblioteka koja unapredjuje sposobnosti JavaScript-a.

Omogućava kompatabilnim pretraživačima prikaz interaktivnih 3D animacija. Sastavni je deo Canvas
elementa koji omogućava 3D kompjutersku grafiku bez korišćenja plugin-ova, pristupa mu se preko DOM
interfejsa. WebGL je zasnovan na OpenGL ES 2.0 i omogućava API za 3D grafiku. Evo dela koda jedne 3D
animacije:

<canvas id="canvas" width="838" height="220"></canvas>

<script>
var gl = document.getElementById(“canvas”).getCintext(“experimental-webgl”);
gl.viewport(0, 0, canvas.width, canvas.height);
...

</script>

 SVG

SVG (Scalable Vector Graphics) je jezik za opisivanje 2D vektorske grafike. Koristi se za definisanje
grafike na web-u koja se bazira na vektorima, definiše i grafiku u XML format. SVG grafika ne gubi na
kvalitetu u koliko se zumira ili promeni veličina. Svaki element i atribut se može animirati. SVG saradjuje
is a ostalim W3C standardima kao što su DOM i XSL. Evo jednostavnog primera koda:

9
 HTML5
<html>
<svg>
<circle id=”myCircle” class=”important” cx=”50%” cy=”50%” r=”100”
fill=”url(myGradient)”
onmousedown=”alert(‘Hello’);” />
</svg>
</html>

Kao što se vidi u prethodnom primeru vrlo jednostavno možemo imati funkcionalnu sličicu kruga,
na čijoj površini, klikom miša dobijamo alert poruku “Hello”. Na slici 4 je prikazana realizacija koda.

Slika 4. SVG

5.3 Aplikacije

HTML 5 je na ovom polju učinio ozbiljan pomak i stvaranje web aplikacija učinio lakšim nego ikad.
Buduće web aplikacije odlikovaće se nekim od sledećih karakteristika:

 Lokalno skladištenje podataka

 Lokalni pristup fajlovima
 Lokalna SQL baza podataka
 Aplikacije sa keširanjem podataka
 JavaScript “radnici” (workers)
 XHTMLHttpRequest 2

1
 HTML5

 Lokalno skladištenje podataka

Od samog početka Web pretaživač je bio namenjen da bude klijent u najosnovnijem smislu reči.
Trebao je da prikazuje informacije koje je preuzeo sa udaljenog servera i ne bi radio ništa osim onoga što
mu server govori da radi. Programeri su veoma brzo otkrili ova ograničenja pa su obezbedili i mogućnost
da se nešto podataka ostavi i sa strane. Nakon toga kreatori su ovom tekstu dali zanimljiv naziv, „kolačić“,
ali ni to nije rešilo problem. Kolačići su došli u centar pažnje kada je javnost počela da se pita kako je
moguće pratiti svaki njihov potez. Nakon toga korisnici su zatražili mogućnost brisanja kolačića koju su
na kraju i dobili što je ograničilo mogućnosti programerima. Na kraju su nastali problemi sa
specifikacijama. Kolačići se nisu skladištili samo u računaru – oni su bili slati nazad do servera.
Napredni Web programeri znaju da nema nikakve svrhe od korišćenja većine od tih 4.096 bajtova
zbog toga što prihvatanje suviše velike količine podatka dovodi do velikih troškova ali i zagušenosti. Tim
koji stoji iza HTML5 standarda odabrao je da reši ove probleme i dizajnira osnovu za konačnu pobedu
sofvera baziranog na pretraživaču pružajući JavaScript programeru mogućnost da uskladišti praktične
količine podataka na lokalnom računaru.
To jednostavno može biti cache ali može biti i mnogo više. Napredniji programeri mogu omogućiti
korisnicima da lokalno uskladište svoje Web strane, podržavajući poslednju veliku karakteristiku desktop
softvera pružajući pristup disku pa tako više nema potrebe za instaliranjem bilo kakvog softvera.
HTML5 Web skladištenje i sesija skladištenja je najjednostavniji nivo Web 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 sesionStorage objekt uz nekoliko glavnih funkcija a podaci su klonovi
trenutnih vrednosti. Prave prednosti dolaze sa pristupm 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.
HTML5 sa sobom donosi veliki broj mogućnosti ali i veliki broj odluka koje dizajneri pretraživača
moraju da donesu. Tek tada će korisnici moći da odrede koje su to karakteristike koje su im neophodne,
koji je nivo privatnosti i fleksibilnosti koji im odgovara kao i koji je to način na koji se Web efektivno
može koristiti. Ipak, odgovori na sva ova pitanja predstavljaju daleku budućnost.

 Lokalni pristup fajlovima

HTML5 konačno pruža standardan način za interakciju sa lokalnim fajlovima, uz pomoć File API
specifikacije. Kao primer svojih mogućnosti, File API se može upotrebiti za pregled neke slike dok se ona
šalje serveru, ili da dozvoli aplikaciji da sačuva referencu fajla dok je korisnik offline. Može se koristiti
logika sa strane korisnika (client-side logic) za proveru poklapanja ekstenzije upload-ovanog fajla ili da
se ograniči veličina fajla koja se može upload-ovati.
Specifikacija pruža nekoliko interfejsa za pristupanje lokalnim fajlovima:
 File – individualni fajl; pruža nam informacije kao što su ime, veličina, referenca do file
handle-ra.
 FileList – niz-kao sekvenca File objekata.
 Blob – Dozvoljava deljenje fajla na bajtove.
1
 HTML5

Kada se koristi u kombinaciji sa gore navedenim strukturama podataka, FileReader interfejs se

može koristiti za asinhrono čitanje fajlova kroz poznate JavaScript „rukovaoce“ (handlers)dogadjajima.
Dakle, moguće je nadgledati proces čitanja, „hvatanje“ grešaka i prekinuti kada se učitavanje završi. Ovaj
API na mnogo načina podseća na XMLHttpRequest model događaja.
Evo deo koda koji proverava da li naš pretraživač podržava File API:

// Check for the various File API support.

if (window.File && window.FileReader && window.FileList && window.Blob) {
// All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}

 Aplikacije sa keširanjem podataka

Od sve većeg značaja je dostupnost web 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.

 Speed – 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.

 JavaScript “radnici” (workers)

Web Workers je JavaScript skripta definisana od strane W3C i WHATWG koju izvršava HTML
strana u pozadini, nezavisno od ostalih user-interface skipti koje se takodje 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 web 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
web “radnike”.

1
 HTML5

 XHTMLHttpRequest 2

XMLHttpRequest je API dostupan u jezicima za pisanje skripti za web pretraživače kao što je
JavaScript. Koristi se za slanje HTTP ili HTTPS zahteva direktno web serverima, čiji se odgovori vraćaju u
skriptu. Podaci sa server se mogu primiti kao XML ili običan tekst. Podaci iy odgovora se mogu direktno
koristiti u DOM-u trenutno aktivnog dokumenta u prozoru pretraživača bez učitavanja dokumenta nove
web strane. Dodaci koji se nalaze u odgovorima se takodje mogu razvijati i na klijent strain. Na primer,
ako je odgovor formatiran od strane web server kao JSON, može se lako konvertovati u podatke klijentske
strane za dalju upotrebu.
XMLHttpRequest ima veliku ulogu u Ajax web programerskoj tehnici, trenutno se koristi od strane
mnogih web sajtova za implementacuju dinamičkih web aplikacija. Kao primer primene su aplikacije kao
Gmail, Google Maps, Facebook i mnoge druge.
XMLHttpRequest 2 je novi pokušaj da se definiše bolja specifikacija XMLHttpRequest. Ovo je još
uvek nacrt specifikacije i biće potrebno mnogo truda dok se ne smatra potpunom. Ali i sada sadrži mnoge
aspekte koji su vredni komentara.

5.4 Forme, strukturni i semantički elementi

Za početak priče je najbolje pogledati strukturu nove HTML 5 stranice. Bez dodatnih klasa i
objekata.

Slika 5. Struktura stranice

1
 HTML5

 Novi strukturni elementi

<header>

Header element sadrži informacije o sekciji ili stranici. Tu možete staviti sve, od osnovnih
informacija (logo,delatnost,kontakt) do cele tabele sadržaja.

<header>
<h1>Dobrodošli na Moj WebSajt</h1>
<p>Sve što Vas zanima o webu na jednommestu</p>
</header>

<nav>

Nav element je rezerviran za deo dokumenta koji sadrži linkove prema drugim stranicama ili
odredjenim delovima iste stranice. Ne treba sve linkove na strani staviti u <nav> element, već samo
glavnu navigaciju.

<nav>
<a href="/html/">HTML</a> |
<a href="/html5/">HTML5</a> |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>

<section>

Element <section> je veoma sličan <div> elementu i koristi za definisanje odredjenih delova
strane kao što su vesti i reklame.

<section>
<h1>W3C</h1>
<p>Organizacija koja definiše standardie na internetu</p>
</section>

1
 HTML5

<article>

Article element predstavlja deo stranice gde se nalaze stvari kao što su članci, komentari ili sličan
sadržaj.

<article>
<h3>HTML5 tehnologija budućnosti</h3>
<p>Vreme je da se upoznate sa novinama...</p>
</article>

<aside>

Predstavlja sadržaje vezane uz glavno područje dokumenta. Obično sadrže elemente kao što su
povezani članci, tag oblaci,citati itd.

<aside>
<h4>Web Sajt</h4>
Neophodan u današnjemem poslovanju...
</aside>

<footer>

Footer element služi za označavanje podnožja strane, ne samo trenutne stranice, već svakog dela
te stranice. Dakle, vrlo verovatno da ćete koristi element <footer> više puta unutar jedne stranice.

<footer>Copyright © 2010 Moj WebSajt</footer>

Kada pogledate ove nove elemente, oni izgledaju kao da su samo zamena za div id, i na neki način,
to je istina. Ali razlika je u tome što elemente kao što su <header/> i <footer/>možete koristiti više puta
na jednoj stranici gde se oni ponašaju više kao klase i drugi HTML elemenati koje možete koristiti iznova i
iznova.
Elementi kao što su <header/> i <footer/> nisu predvidjeni da predstavljaju samo vrh i dno
trenutne stranice, već se koriste da predstave <header/> i <footer/> svakog dela dokumenta, kao što kod
tabela koristimo <thead/> i <tfoot/>. Prednosti korišćenja ovih strukturnih elemenata je uglavnom zbog
činjenice da su vrlo dobro definisani i pružaju sjajan način za strukturu dokumenta.

1
 HTML5

 Forme

Tokom izrade web 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...), 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.
Danas, na primer, po registraciji na neku od drštvenih mreža očekuje vas par dodatnih koraka i
popunjavanje na desetine podataka. Ti podaci uglavnom su različitog tipa, počev od imena i prezimena,
potom mail adrese, web sajta, pa sve do datuma rođenja, omiljene boje itd. Najčešće korišćena
komponenta web formi bila je textbox koja je mogla imati jedno jedino ograničenje, maksimalni uneti broj
karaktera. A bilo ih je potrebno mnogo više. Samo oni koji su pisali skripte za pomenutu validaciju
podataka u formama znaju koliko je to zamoran posao.
HTML5 donosi pregršt novih tipova elemenata u web formama i u mnogome olakšava njihovu
validaciju. Bez velike potrebe za javascript-om, regularnim izrazima ili CSS validacijom sada ćete moći da
pravite složene, a opet dovoljno sigurne i ozbiljne forme. Evo spiska novih tipova:

 color
 datalist
 date
 datetime
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

U narednim primerima ću predstaviti svaki od elemenata posebno. U ovom trenutku najbogatiju

vizuelnu podršku HTML5 formama ima Opera, mada iz Microsoft-a najavljuju da će u sledećoj verziji
Internet Explorer-a akcenat biti baš na HTML5 standardu. Zato, primeri i screenshot-ovi koji slede biće iz
Opere (verzija 11).
Za početak, data je jednostavna forma za unos osnovnih podataka o osobi. Verujem da već prvim
pogledom na zaista kratak kod, zaključujete gde su napravljene ključne promene. To je atribut type.
Očigledno da sada za unos svih najpotrebnijih informacija imamo posebne tipove: name, email, url,
tel. Pored ovoga, za prvo polje, primećujete atribut placeholder, čija je namena da postavi dodatne
informacije koje se klikom na polje gube (najčešće informacije koje pomažu korisniku u slučaju
nedoumica kod unosa).

1
 HTML5

Slika 6. Novi Form elementi, Opera 11

<form>
<label for=”name”>Name:</label>
<input type=”text” name”name” id=”name” placeholder=”First and Last” required
autofocus/>
<br />
<label for”email”>Email:</label>
<input type”email” name=”email” id=”email” id=”email” required/>
<br />
<label for=”url”>Your URL:</label>
<input type=”url” name=”url” id=”url” />
<br />
<label for=”phone”>Telephone:</label>
<input type=”tel” name=”phone” id=”phone” required/>
<form>

Samim navođenjem tipa polja, oslobodili smo se potrebe za proverom validnosti podataka. Ipak,
da bi bili sigurni da li su podaci uopšte uneti, potrebno je da pored svih polja koja su zahtevana stavimo
ključnu reč required. U slučaju da korisnik proba da uradi submit forme a da pritom nije uneo neki od
obaveznih podataka biće mu prikazano upozorenje “This is a required field”. Isti je slučaj kada su uneti
podaci neispravni npr. neisprvana email adresa, “Please enter a valid email adress”.

Slika 7. Ključna reč "required"

1
 HTML5

Dalje, navedeni su primeri za tipove number, range, color i primer za kombinaciju elementa
tipa text sa listom ponuđenih mogućnosti. U elementimu tipa number nije moguće uneti nijedan drugi
karakter osim cifre. Posebno, ukoliko su vrednosti ograničene između minimalne i maksimalne nije
moguće izaći van tog okvira. Pre definisanja novog standarda, za ovako nešto bilo vam je potrebno mnogo
dosadnog i uvek istog programiranja. Komponentarange služi za intuitivniji odabir vrednosti između dve
predefinisane. Ispod slike je i kod koji prati sliku.

Slika 8. Još neki Form elementi

<label for="gradYear">Graduation year:</label>
<input type="number" name="gradYear" id="gradYear" min="2000" max="2016"
step="1" />
<br />
<label for="experienceRange">HTML5 Experience Range</label>
<input type="range" name="experienceRange" id="experienceRange" min="1"
max="100" step="1" value="50" />
<span id="rangeValue"></span><span style="color: #666666; font-family: 'Lucida
Grande', Verdana, Helvetica, sans-serif;"><span style="font-size: 11px; white-
space: normal;">
</span></span>

Detalj na koji treba obratiti pažnju je prikaz trenutne vrednosti elementa range. U okviru elementa
brojčani prikaz nije obezbeđen, a kako imam utisak da je to potrebno zbog preciznijeg određivanja
vrednosti, odvojio sam nekoliko minuta i napisao par linija javascript koda kako bih to omogućio:

<script>
var rangeValue = document.getElementById("rangeValue");
var devExperienceRange =
document.getElementById("experienceRange");
devExperienceRange.onchange = function()
{
rangeValue.innerText = this.value;
}
rangeValue.innerHTML = devExperienceRange.value;
</script>

1
 HTML5

Atribut list sa navedenim imenom u okviru običnog tekst elementa, omogućiće vam da kroz
tag datalist ponudite korisniku izbor jedne od opcija. Bitno je napomenuti da korisnik ukoliko to želi
može uneti vrednost različitu od ponuđenih. Ispod slike je i kod koji prati sliku.

Slika 9. Tipovi elemenata list, color

<label for="eyeColor">Eye color:</label>

<input type="text" name="eyeColor" id="eyeColor" list="colors"/>
<datalist id="colors">
<option value="Blue" />
<option value="Black" />
<option value="Green" />
</datalist>
<br />
<label for="bgcolor">Background color:</label>
<input type="color" name="bgcolor" id="bgcolor" value="rgb(128,0,0)" />

Podrazumevanu boju u okviru elementa tipa color navodite preko atributa value.

1
 HTML5

U okviru priče o formama ostalo je da pomenemo nekoliko tipova koji se odnose na unos datuma i
vremena na različite načine. Svaki od načina su predstavljeni kodom koji sledi.

<label for="arrivalDate">Arrival date:</label>

<input type="date" name="arrivalDate" id="arrivalDate" value="2011-01-01"
min="2011-01-01" max="2023-12-31" />
<br />
<label for="arrivalDT">Arrival date/time:</label>
<input type="datetime" name="arrivalDT" id="arrivalDT" value="2011-01-01 09:30:00
UTC" />
<br />
<label for="arrivalDTlocal">Arrival date/time local:</label>
<input type="datetime-local" name="arrivalDTlocal" id="arrivalDTlocal" value="2011-
01-01 09:30:00" />
<br />
<label for="arrivalTime">Arrival time:</label>
<input type="time" name="arrivalTime" id="arrivalTime" value="09:30:00" />
<br />
<label for="birthMonth">Birth month:</label>
<input type="month" name="birthMonth" id="birthMonth" value="1965-04" />
<br />
<label for="vacationWeek">Vacation week:</label>
<input type="week" name="vacationWeek" id="vacationWeek" value="2011-W26" />

5.5 CSS3 u HTML5

CSS3 je podeljen na „modules“. Stara specifikacije je podeljena na manje delove, a neki novi su
dodati. Neki od najvažnijih CSS3 modula su:

 Selectors
 Box Model
 Backgrounds and Borders
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

2
 HTML5

6. Podrška pretraživača

U ovom poglavlju ćemo videti koji nivo podrške za HTML 5 nam pružaju najpopularniji web
pretraživači. HTML 5 se veoma brzo menja i web pretraživači podržavaju sve veći broj njegovih
funkcionalnosti. U sledećoj tablici je prikazana trenutna podrška web pretraživača za HTML 5.

Slika 10. Podrška web pretraživača

Mnoge nove funkcionalnosti HTML-a 5 imaju veliku podržanost ili implementacije bazirane na
web pretraživačima. Poznavanjem korisnika Interneta i mogućnosti njihovih web pretraživača je
značajan faktor prilikom odluke kada iskoristiti specifičnu funkcionalnost HTML-a 5. Kako se
specifikacija HTML-a 5 svakodnevno menja i dopunjuje tako i web pretraživači prate tu promenu i
pružaju podršku za rad sa HTML-om 5. Kako bi ostali u korak sa tim promenama u nastavku teksta su
navedene web stranice na kojima se možemo detaljnije upoznati sa podrškom web pretraživači prema
HTML-u 5.

-http://fmbip.com/
Ovde se može videti podrška za konkretne funkcionalnosti HTML-a 5 kao i CSS-a. Testovi ne obuhvataju
sve novine kao nek, ali radi dobar posao testirajući i Macintosh web pretraživače.

-http://samples.msdn.microsoft.com/ietestcenter/
Ova Microsoft-ova web stranica je jedan od najboljih centara za uporedjivanje podrške web pretraživača
za HTML 5. Ovde se uporedjuju buduće verzije Internet Explorera sa ostalim web pretraživačima. Nivo
detalja, nad kojima se testiranja vrše, je na visokom nivou.

-http://caniuse.com
Ovde možemo filtrirati rezultat i videti listu web pretraživača baziranu na našoj pretrazi. Bilo koju
kategoriju da smo izabrali imali bi smo dodatne linkove na probne (eng. demo) web stranice, članke i test
stranice sa odgovarajućim funkcionalnostima.

-http://html5test.com
Ukoliko želimo testirati naš trenutni web pretraživač, to možemo uraditi posetom ove web stranice. Ova
web stranica će rangirati vaš web pretraživač na osnovu podrške za HTML 5.

2
 HTML5

7. Zaključak

HTML 5 je još uvek u fazi razvoja, što znači da se o ovom standardu i dalje raspravlja na HTML
Working Group i WHATWG mailing-listama. HTML 5 (ponekad nazivan Web Applications 1.0) je
tehnologija koju je razvila WHATWG (Web Hypertext Application Technology Working Group), grupa
koja je nastala spajanjem 3 giganta u pogledu web pretraživača: Mozille, Chrome, Opere i Appleovog
Saffarija. Iako iza standarda stoji W3C (World Wide Web Consortium), glavni nosioci razvoja su Google,
Apple i Mozilla, a tek se kasnije uključio i Microsoft.
Premda će verovatno proteći dosta vremena do konačnog donošenja novog standarda za kreiranje
web stranica, uticaj HTML-a 5 na razvoj Interneta već je i danas značajan. Youtube je već dostupan u
HTML 5 obliku, a njegov primer slede sve brojnije web stranice posebno one koje korisnicima nude video
sadržaj. Kompanije kao što su Google, Apple i Microsoft već pružaju podršku za HTML 5 u svojim
klasičnim i mobilnim pretraživačima. Očekuje se da će se u nekoliko narednih godina konačno definirati
standard za kreiranje web stranica i načina njihovog pregleda od strane korisnika.
Jedan od glavnih razloga zbog kojih je HTML 5 preuzeo vodeću ulogu od XHTML jezika u kreiranju
sadržaja na Internetu je, osim činjenice da omogućava povećanu efikasnost, i da podržava kompatibilnost
s prethodnim verzijama HTML-a. To znači da bilo koji pretraživač koji podržava HTML 5 dokumente,
takođe podržava i dokumente napisane u bilo kojoj prethodnoj verziji HTML-a, što je vrlo značajno s
obzirom da na Internetu postoji vrlo veliki broj ovakvih dokumenata.

2
 HTML5

8. Literatura
 http://w3schools.com/html5/default.asp, poslednja poseta 1/20/2012.
 http://w3schools.com/css3/default.asp, poslednja poseta 1/20/2012.
 http://en.wikipedia.org/wiki/HTML_5, poslednja poseta 1/20/2012.
 http://en.wikipedia.org/wiki/Html, poslednja poseta 1/20/2012.
 http://html5doctor.com, poslednja poseta 1/20/2012.
 http://www.whatwg.org/, poslednja poseta 1/17/2012.
 http://www.html5rocks.com/en/, poslednja poseta 1/17/2012.
 http://en.wikipedia.org/wiki/WebGL, poslednja poseta 1/18/2012.
 http://en.wikipedia.org/wiki/Scalable_Vector_Graphics, poslednja poseta 1/18/20129
 http://msacademic.rs/Blog.aspx?id=225, poslednja poseta 1/20/2012.