ХТМЛ5

ХТМЛ5
ХТМЛ5 лого
Оригинални назив	енгл. HTML5
Изговара се	ха-те-ем-ел пет
Појавио се	28. октобар 2014. год. (2014-10-28)
Аутор(и)	WWW конзорцијум
Дијалекти	XHTML
Веб-сајт	w3.org/html5/

ХТМЛ (енгл. HyperText Markup Language) језик је основа сваке веб странице, уз помоћ кога се презентује изглед и садржај исте. Омогућава форматирање странице, обраду слика, текста и још много тога. Конзорцијум за веб (енгл. World Wide Web Consortium) (W3Ц) је задужен за одређивање стандарда, ово је неопходно зато што не би било могуће прегледати било коју страницу у било ком претраживачу.

ХТМЛ5 је предлог нових стандарда који нам пружају нове могућности, као и да исправе и надоместе неке досадашње недостатке. Ради се о новој верзији ХТМЛ-а, која доноси низ новина и могућности које до сада нису биле доступне користити за израду веб сајтова без додатних додатака (енгл. plugin), као што су Фласх, Јава и Силверлигхт. ХТМЛ5 представља еволуцију ХТМЛ 4.01 стандарда, а не замену.

Историја

Не можемо почети причу о ХТМЛ5 без помена најзаслужнијих људи, као и без осврта на претходне верзије и до данас утврђених стандарда.

Најзаслужнији за развој ХТМЛ-а 5 је Тим Бернерс-Ли. Све је почело још 1980. године, док је Тим Бернерс-Ли радио по уговору у ЦЕРН-у (енгл. The European Organization for Nuclear Research). Предложио је прототип система за истраживаче у ЦЕРН-у, уз помоћ кога би могли да користе и деле документе. 1989. године, Тим Бернерс-Ли је написао рад којим предлаже хипертекст (енгл. hypertext) систем базиран на Интернету. У другој половини 1990. године специфицирао је ХТМЛ и написао софтвер и за сервер и за претраживач. Те исте године Тим Бернерс-Лее и инжењер информатике у ЦЕРН-у Робер Кајо, су сарађивали и заједно захтевали средства, али пројекат није формално усвојен од стране ЦЕРН-а. У својим личним белешкама из 1990. године Тим Бернерс-Ли је набројао неке од многих области где се хипертекст користи, а као прву је ставио енциклопедију. Први писани јавни доступни документ о ХТМЛ-у је био документ под називом „ХТМЛ Тагс“. Објавио га је Тим Берберс-Ли у другој половини 1991. године. У овом документу је описано 20 елемената, који су сачињавали релативно једноставан дизајн ХТМЛ-а.

ХТМЛ је скраћеница од ХyперТеxт Маркуп Лангуаге који веб претраживачи користе да интерпретирају и сложе текст, слике и остале материјале на веб страни. Почетне карактеристике за сваки елемент ХТМЛ-а је дефинисан у претраживачу, а ове карактеристике се могу допунити и изменити коришћењем ЦСС-а. Тим Бернерс-Лее је сматрао ХТМЛ као примену СГМЛ-а (енгл. Standard Generalized Markup Language). Формално је дефинисан као такав од стране ИЕТФ-а(енгл. Internet Engineering Task Force) радом из средине 1993. године, који је био предлог прве спецификације ХТМЛ-а: "Хyпертеxт Маркуп Лангуаге (ХТМЛ)" Интернет-Драфт бy Бернерс-Лее анд Дан Цонноллy, која је укључивала СГМЛ Доцумент Тyпе Дефинитион да дефинише правила, тј. граматику. При крају 1993. године, Даве Раггетт је предложио стандардизацију већ имплементираних елемената као што су табеле и форме. 1994. године је Беернерс-Ли основао W3Ц на Масачусетском технолошком институту (енгл. Massachusetts Institute of Technology), који је усвојен као стандард према којем ће све веб странице у будућности радити на исти начин. После истицања ХТМЛ-а са допунама, на почетку 1994. године ИЕТФ је основао ХТМЛ радну групу (енгл. HTML Working Group), која је 1995. године завршила „ХТМЛ 2.0“, прву ХТМЛ спецификацију са намером да се на њој темеље сва даља усавршавања и измене. ХТМЛ 2.0 је укључио идеје из ХТМЛ-а, као и из ХТМЛ-а са допунама, али са основном намером да се разликује од претходних верзија. Будући развој под окриљем ИЕТФ-а је прекинут због сукоба интереса.

Од 1996. године ХТМЛ спецификација је одржавана, допуњавана од стране твораца комерцијалних софтвера, као и од стране W3Ц-а, чији је оснивач Тим Бернерс-Ли. 2000. године ХТМЛ постаје интернационални стандард (ИСО/ИЕЦ 15445:2000). ХТМЛ 4.01 је објављен крајем 1999. године, са допуном је објављена још једна верзија 2001. године.

2004. године се почиње са радом на ХТМЛ5. Овом пројекту се уз W3Ц прикључила и WХАТWГ (енгл. Web Hypertext Application Technology Working Group) 2007. Године. Многи су мислили да ће WХАТWГ нестати као самостална организација, али се задржала као таква и наставила рад на спецификацији ХТМЛ-а 5. Тренутно постоје две паралелне верзије ХТМЛ-а 5, једна службена на којој ради W3Ц, и неслужбена на којој раде стручњаци из Епла, Мозиле, Опере и Гугла, који имају велики утицај на развој Интернета, иако иза себе немају формалну организацију као што је W3Ц. Ипак, уредници ХТМЛ-а 5 спецификације за оба тима су исти људи, што значи да групе међусобно сарађују и да ће на крају ипак постојати један стандард. Уредници ХТМЛ 5 спецификације су Иан Хиксон из Гугла и Дејвид Хајат који ради за Епл.

Спецификације

• HTML 2.0 – (RFC 1996)
• HTML 3.2 – 14 јануар 1997,
• HTML 4.0 – 18. децембар 1997,
• HTML 4.01 (мање измене) – 24. децембар 1999,
• ISO/IEC 15445:2000 („ISO HTML“, базирано на HTML 4.01 Strict) – 15. мај 2000.
• HTML5 – 22. јануар 2008 (још увек у развоју)

Шта је ХТМЛ5?

Иако је WХАТWГ почео сам да развија ХТМЛ 5, може се рећи да је ХТМЛ 5 производ сарадње W3Ц-а и WХАТWГ-а. ХТМЛ5 је још увек у фази развоја, а стандардизација се очекује 2014. године, по проценама W3Ц-а. Као пета верзија ХТМЛ-а основни циљ је био унапређење овог језика, као и подршка за најновије мултимедијалне садржаје. При томе је цросс-платформ, тако да није битно да ли се документ прегледа помоћу таблета, паметног телефона, нетбоока, све док постоји подршка за ХТМЛ5 на претраживачу.

ХТМЛ5 је намењен да превазиђе не само ХТМЛ4, него XХТМЛ1 и ХТМЛ ДОМ. WХАТWГ је радио на веб формама и апликацијама, док је W3Ц радио на XХТМЛ 2.0. 2006. године су почели заједничку сарадњу, тако да се ХТМЛ5 може сматрати мешавином карактеристика и спецификација ХТМЛ-а и XХТМЛ-а. Овоме је допринела заједничка пракса, као и многе грешке у постојећим веб документима Ово је такође и покушај да се дефинише јединствени маркуп језик, који се може писати и у ХТМЛ-у и у XХТМЛ-у. Ово укључује детаљне процесне моделе да би охрабрило још интероперабилних имплементација. То проширује, унапређује и рационализује означавање докумената, као што је омогућен и АПИ (енгл. Application Programming Interfaces), за комплексне веб апликације Неки од нових елемената су видео, аудио, цанвас, као и многи други, о којима ће бити реч касније. Поред нових елемената не можемо а да не поменемо интеграцију СВГ (енгл. Scalable Vector Graphics) садржаја, који замењује употребу ‘’објецт” тага. Ове иновације олакшавају руковање мултимедијалним и графичким садржајем на веб-у без додатних плугин-ова и АПИ-а. Неки од елемената су промењени, неки избачени, све у циљу поједностављења организације и структуре документа.

Основни принципи

На развоју ХТМЛ-а 5 поред покретача пројекта, укључени су и стручњаци из свих већих претраживача, да би својим искуством и знањем допринели бољем и успешнијем развоју. Неке од идеја и принципа којима се воде људи који учествују у развоју ХТМЛ-а 5 су:

• Нове карактеристике треба да се базирају на ХТМЛ-у, ЦСС-у, ДОМ-у и ЈаваСцрипту
• Смањити потребу за екстерним плугин-овима (Фласх)
• Боља обрада грешака
• Више тагова који би заменили скрипте
• ХТМЛ5 би требало да не зависи од уређаја на коме се користи
• Процес развоја треба бити доступан јавности

Нови елементи и карактеристике

Структурни и семантички елементи

Нови структурни елементи

<артицле>	Дефинише чланак
<асиде>	Дефинише садржај, поред садржаја саме странице
	Изолује део текста који би могао бити форматиран другачије, у односу на текст изван њега
<цомманд>	Дефинише командно дугме које корисник може да позове
<детаилс>	Дефинише додатне детаље које корисник може да види или да сакрије
<суммарy>	Дефинише видљив наслов за <детаилс> елемент
<фигуре>	Наводи самостојећи садржај, као што су илустрације, дијаграми, фотографије, спискови кодова, итд.
<фигцаптион>	Дефинише наслов за <фигуре> елемент
<фоотер>	Дефинише фоотер за документ или одељак
<хеадер>	Дефинише хеадер за документ или одељак
	Дефинише означени текст
<метер>	Дефинише скаларно мерење у оквиру познатог опсега (манометар)
<нав>	Дефинише навигационе линкове (хипервеза)
<прогресс>	Представља напредак неког задатка
	Дефинише рубy анотацију (за источноазијску типографију)
	Дефинише објашњење/изговор карактера (за источноазијску типографију)
	Дефинише шта да покаже у претразивацима који не подржавају рубy анотације
<сецтион>	Дефинише одељак у документу
	Дефинише датум/време
	Дефинише могући прекид линије(енгл. line-break)

Медијски елементи

Нови медијски елементи

<аудио>	Дефинише звучни садржај
<видео>	Дефинише видео или филм
<source>	Дефинише везе ка датотекама за <video> и <audio>, које могу бити у различитим форматима
<ембед>	Дефинише цонтаинер за спољну примену интерактивних садржаја (енгл. plug-in)
<трацк>	Дефинише текстуалне траке за <video> и <audio>

Атрибут цонтрол на <аудио> и <видео> елементима додаје контроле као што су play/pause, као и могућност контроле јачине звука. Атрибут аутоплаy омогућује аутоматску репродукцију садржаја по његовом преузимању. <видео> елемент поседује и постер који представља линк на слику која се приказује на самом елементу пре репродукције; у случају да овај атрибут није присутан, приказује се први фрејм самог видео снимка.

<source> елемент омогућава да аудио и видео датотеке буду на различитим локацијама и у различитим форматима, а претраживач ће отворити први формат који подржава. Препорука је да се због разлика у компатибилности и видео кодецима додају извори ка више датотека у различитим форматима, као и да се прикаже порука са линковима ка самим аудио и видео датотекама како би посетиоци могли да приступе садржају у случају да њихови претраживачи не подржавају ХТМЛ5 аудио и видео.

Аудио

Пре ХТМЛ5 није постојао стандард за репродукцију аудио датотека на веб странама, већ се она вршила уз помоћ плугин-ова (Фласх). ХТМЛ5 као једно од унапређења садржи <аудио> елемент, којим је дефинисан начин за постављање и репродукцију аудио снимака на веб странама.

<audio controls>
	<source src="song.ogg" type="audio/ogg" />
	<source src="song.mp3" type="audio/mpeg" />
	<p>Your browser does not support HTML5 audio.</p>
	<p>Download:
		<a type="audio/ogg" href="song.ogg">Ogg</a> |
		<a type="audio/mpeg" href="song.mp3">MP3</a>
	</p>
</audio>

Видео

Пре ХТМЛ5 стандарда није постојао стандард за постављања видеа на веб странама, па су за преглед видео снимака били потребни разни додаци, Аппле QуицкТиме, РеалПлаyер или Адобе Фласх. Највећи проблем је у усаглашавању формата. Имплементације ХТМЛ5 у претраживачима подржавају .огг, .мпег4 и .wебМ.

<video width="320" height="240" controls>
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg" />
	<p>Your browser does not support the HTML5 video.</p>
	<p>Download:
		<a type="video/mp4" href="movie.mp4">MP4</a> |
		<a type="video/ogg" href="movie.ogg">Ogg</a>
	</p>
</video>

Формулари

До појаве ХТМЛ5 стандарда, постојало је само пар основних типова контрола на формуларима (теxт, цхецкбоx, радио буттон, попуп лист итд.), који су у тренутку у коме су дефинисани били довољни. Међутим, са брзом експанизијом интернета, како по броју корисника, тако и по количини сервиса и апликација, формулари су постајале све коришћенији, а потребе све веће.

Елементи

<даталист>	прецизира листу унапред дефинисаних опција за <инпут> елемент, што омогућује додавање тзв. АутоЦомплете функционалности на елементима формулара; корисници ће видети падајућу листу унапред дефинисаних опција док уносе податке
<кеyген>	сврха елемента је да обезбеди сигуран начин за проверу идентитета корисника
<оутпут>	елемент приказује резултат неке операције над формуларом

Атрибути

ХТМЛ5 уводи неколико нових атрибута за <форм> и <инпут>:

Нови атрибути за <форм> елементе

аутоцомплете	укључује или искључује аутоматско попуњавање поља за све контроле на формулару
новалидате	укључује или искључује валидацију за све контроле на формулару

Нови атрибути за <инпут> елементе

аутоцомплете	укључује или искључује аутоматско попуњавање за дату контролу
аутофоцус	поставља курсор за унос текста у поље са овим атрибутом; може га имати само један елемент на страници
форм, формацтион, форменцтyпе, формметход, формновалидате, формтаргет	омогућују да се контроли доделе својства формулара, без потребе да се сам елементи налази у оквиру формулара; ови атрибути имају идентично понашање као атрибути истог имена на <форм> елементу.
хеигхт и wидтх	дефинишу димензије контроле
лист	дефинише везу на <даталист> елемент из којег ће узимати вредности
мин и маx	дефинише најмању и највећу вредност за контроле типа "number" и "range"
паттерн	регуларни израз по којем се врши провера вредности поља *
плацехолдер	представља текст који се налази у пољу до уноса, углавном представљен сивом бојом, који се најчешће користи као визуелни кључ о сврси поља или типу/формату садржаја
реqуиред	означава поље које обавезно мора имати вредност *
степ	дефинише корак повећања вредности за контроле типа "number" и "range"
* претраживач зауставља слање формулара уколико услови нису задовољени

Типови контрола

ХТМЛ5 уводи прегршт нових типова елемената у веб формама, што у многоме олакшава унос различитих типова података и њихову проверу.

Нови типови контрола

цолор	боја у хексадецималном запису (нпр. #ФФ00ФФ)
дате, тиме, датетиме, датетиме-лоцал, монтх, wеек	различити формати датума и времена
емаил	адреса електронске поште (нпр. еxампле@еxампле.цом)
нумбер	бројна вредност
ранге	опсег бројних вредности
сеарцх	претрага; нема функционалне разлике у односу на обично тексуално поље, али се визуелно разликује и нуди могућност памћења претходно тражених термина
тел	број телефона
урл	веб адреса (нпр. http://example.com/)

Графика

До недавно, веб програмери су били ограничени на ЦСС и ЈаваСцрипт код стварања анимација и визуелних ефеката за своје веб странице, или принуђени да користе плугин-ове као што је Фласх. Са додатком нових технологија као што су Цанвас елементи, Wеб ГЛ и СВГ слике, више нема потребе за овим. Чак сада имамо и нове могућности, нове функције које можемо користити за графику на вебу:

• 2Д Цанвас
• WебГЛ
• СВГ
• СМИЛ (енгл. Synchronized Multimedia Integration Language)

Наравно, ниједна од ових нових технологија не би биле од користи да се брзо не извршавају. ЈаваСцрипт енгине су постали довољно брзи за покретање 3Д игара и за манипулацију видеом у реалном времену. Програмери искоришћавају ове олакшице, поплава ХТМЛ графичких радова се појављује на вебу, од имплементације старих 2Д графичких алгоритама до најновијих техника створених специјално за модерни веб.

Драг анд дроп

Драг анд дроп се веома често користе. Представља опцију „хватања“ и „пуштања“ објекта на одређену локацију. У ХТМЛ5 драг анд дроп је део стандарда и било који елемент може бити премештан на тај начин.

Избачени елементи из ХТМЛ4

Следећи елементи који су се користили у ХТМЛ4 су уклоњени у ХТМЛ5:

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

Нови објекти

Веб складиштење

ХТМЛ5 Веб складиштење (енгл. Web storage) и сесија (енгл. session) складиштења је најједноставнији ниво веб складиштења који складишти податке за тренутну сесију – другим речима, све док је таб претраживача или прозор отворен. Ово можда и није најбоље решење будући да спецификације остављају отворену могућност претраживачу да сачува ове податке током поновног покретања. Сваки документ добија сессионСтораге објекат уз неколико главних функција а подаци су клонови тренутних вредности. Праве предности долазе са приступом лоцалСтораге објекту који је сличан сессионСтораге објекту али се понаша потпуно другачије. Тамо где сессионСтораге заборавља, лоцалСтораге памти. Подаци би требало да буду сачувани чак и након што се прозори затворе и рачунар искључи.

Веб радници

Веб радник (енгл. Web worker) је ЈаваСцрипт скрипта дефинисана од стране W3Ц-а и WХАТWГ-а коју извршава ХТМЛ страна у позадини, независно од осталих усер-интерфаце скипти које се такође могу извршавати од стране исте ХТМЛ стране. W3Ц и WХАТWГ су замислили ЈаваСцрипт раднике као скрипту коју не прекидају усер-интерфаце скрипте, скрипте које одговарају на клик миша или друге интеракције корисника. Непрекидање рада ЈаваСцрипт радника од стране корисничких активности омогућава веб странама да остану доступне у тренутку извршења дугих процеса у позадини. Најједноставнија примена је у томе да се извршавају захтевни процеси у позадини без прекидања корисничког интерфејса. W3Ц и WХАТWГ тренутно раде на дефинисању АПИ-а за веб раднике.

Апликације са кеширањем података

Од све већег значаја је доступност веб апликација када смо оффлине. Сви претраживачи имају своје механизме за кеширање, али они су непоуздани и неће радити онако како желимо. Са АпплицатионЦацхе интерфејсом ХТМЛ 5 покушава да реши неке непријатности које се могу десити када смо оффлине.

Коришћење кеш интерфејса нам пружа три предности:

• Оффлине претраживање – корисници се могу кретати по вашој страници иако су оффлине.
• Брзина – кеширани подаци су сачувани на локалном диску, тако да се учитавају брже.
• Смањење оптерећења сервер – претраживач скида само податке који су се променили.

АппЦацхе омогућава програмерима да одреде које фајлове ће претраживач кеширати, а које не, за њихову доступност када је корисник оффлине. Апликација ће се учитати и радити како треба, чак иако корисник освежи страницу.

ССЕ

ХТМЛ5 догађаји слања на сервер (енгл. Server-Sent Events) омогућавају веб страници да се аутоматски надоградјује (енгл. update) са сервера. То је било могуће и раније, али је прво веб страница морала да пита да ли су нови упдате-ови доступни. Са ССЕ упдате стиже аутоматски.

• Примање ССЕ нотификације

ЕвентСоурце објекат се користи да би се примила ССЕ нотификација.

1. Креирамо нов ЕвентСоурце објекат, и одређујемо УРЛ странице која шаље упдате.
2. Сваки пут када је упдате примљен, онмессаге догађај се појављује.
3. Када се онмессаге догађај појави, ставити примљене податке у елемент са ид=“ресулт“.

Подршка претраживача

У овом поглављу ћемо видети који ниво подршке за ХТМЛ 5 нам пружају најпопуларнији веб претраживачи. ХТМЛ 5 се веома брзо мења и веб претраживачи подржавају све већи број његових функционалности. У следећој таблици је приказана тренутна подршка веб претраживача за ХТМЛ 5 (Табела 3).

	Цхроме	Фирефоx	Еxплорер	Опера	Сафари
Цанвас	Да	Да	Да	Да	Да
Видео елемент	Да	Да	Да	Да	Не
Лоцал стораге	Да	Да	Да	Да	Да
Оффлине аппс	Да	Да	Не	Да	Да
ХТМЛ5 формс	Делимично	Делимично	Не	Да	Делимично
Драг анд Дроп	Да	Да	Да	Не	Да

Види још

• ХТМЛ
• ЦСС
• СВГ

Литература

• Раггетт, Даве (1998). Раггетт он ХТМЛ 4. Приступљено 14. 5. 2013. 
• Раyмонд, Ериц. „ИЕТФ анд тхе РФЦ Стандардс Процесс”. [[Тхе Арт оф Униx Программинг]]. Архивирано из оригинала 17. 03. 2005. г. Приступљено 19. 05. 2013. 

Спољашње везе

• ХТМЛ5 – актуелна спецификација
• ХТМЛ 4.01 — актуелна спецификација
• Конзорцијум за wеб — организација која је прописала ХТМЛ стандард
• W3Ц валидатор — алат за проверу ХТМЛ докумената
• ХТМЛ5 Боокмаркс Архивирано на сајту Wayback Machine (26. јул 2015) — корисни чланци и белешке
• ХТМЛ5 Центер Архивирано на сајту Wayback Machine (27. април 2015) —ХТМЛ5 центар за помоћ
• ХТМЛ5 Демос — пробне верзије и примери
• Суппорт Архивирано на сајту Wayback Machine (1. март 2014) — тестирање вашег тренутног веб претраживача
• Мобиле ХТМЛ5 — ХТМЛ5 за мобилне телефоне
• ФиндМеБyИП — подршка за конкретне функционалности ХТМЛ-а 5 као и ЦСС-а
• ТестингЦентер — упоређивање подршке веб претраживача за ХТМЛ 5
• ХТМЛ5 Елементс Qуиз — квиз за тестирање познавања ХТМЛ5 елемената