Issuu on Google+


HTML 5 je novi standard HTML (HyperText Markup Language) in XHTML. Je nadgradnja HTML 4, katerega je do danes uporabljala večina spletnih strani. Sedaj pa počasi strani prehajajo na HTML 5. Naloga HTML 5 je enaka, kot so jo imeli njegovi predhodniki – oblikovanje in predstavitev vsebin na spletu. Ker se HTML 4.01 ni posodobil že od leta 2000, je leta 2004 skupina WHATWG začela z razvojem novega standarda. Kasneje so se skupini pridružili tudi W3C, kateri so opustili razvoj XHTML 2.0. S sodelovanjem WHATWG in W3C je prišlo tudi do nekaj dilem, ali nov standard poimenovati HTML5, ali enostavno samo HTML. HTML 5 nam je prinesel kup novih tagov, slovensko značk. Nekaj pa so jih v HTML5 tudi odstranili. Pri odstranjenih značkah vidimo predvsem zadeve, za katere skrbi CSS in nekaj zastarelih zadev (frames). Tabela novih tagov: <article> Določa članek <aside> Določa vsebino poleg vsebine strani <audio> Opredeljuje zvok vsebine <canvas> Določa grafiko <command> Določa ukazni gumb <datagrid> Določa podatke v seznam/drevo <datalist> Določa podatke v spustni seznam (dropdown) <datatemplate> Določa podatke predloge <details> Določi podrobnosti elementu <dialog> Določi dialog – pogovor <embed> Določa zunanje interaktivne vsebine <eventsource> Določi cilj za dogodke, ki jih pošlje strežnik <figure> Določi skupino medijskih vsebin in njihov napis <footer> Določa nogo za stran ali odsek <header> Določa glavo za stran ali odsek <mark> Določa označeno besedilo <meter> Določa meritve v določenem obnočju <nav> Določa navigacijo (povezave) <nest> Določa “nestingpoint” v datatemplate


<output> <progress> <rule> <selection> <source> <time> <video>

Določa nekatere vrste izhoda Določa napredek katere koli naloge Določa pravila posodabljanja predloge Določa del Določa vir medija Določa čas/datum Določi video

Tabela odstranjenih tagov: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u> <xmp>

Določa kratice Določa vgradnjo applet Sedaj se za to uporablja CSS Določa veliko besedilo Besedilo postavi na center Določa seznam map Določa pisavo, velikost, in barvo Določa podokno/okvir Določa okvirje Določa eno polje za vnos Določa območje za nepodprte ovirje Določa prečrtano besedilo Določa prečrtano besedilo Določa “teletype” pisavo Določa podčrtano besedilo Določa “preformatted” besedilo


V HTML5 smo dobili nekaj novih značk tudi pri vnostnih poljih. Težava se seveda zopet pojavi pri uporabnikih s starim brskalnikom, kateri ne podpira HTML5. Placeholder Placeholder ni type ampak posebna značka, vendar se mi zdi, da jo je vredno omeniti. Ta nova stvaritev je svetlo sivo zapisano besedilo, katero v hipu, ko kliknemo na polje izgine. Če v polje nič ne zapišemo in ga zapustimo, se besedilo pojavi nazaj. Precej bolša zadeva, kot sedaj, ko si za takšen efekt potreboval javascript. Koda: <input type="text" placeholder="Neko besedilo..." />

Search Tip search se uporablja, kot nam že ime pove, pri vnosnih poljih za iskanje. Posebnost je ta, da ko vpišemo nekaj v polje, se nam na desni strani pokaže X, s katerim pobrišemo kar smo napisali. Koda: <input type="search" />


Number Vnosno polje number se uporablja za števila. Če poskusimo v polje vnesti znak ki ni število, ga avtomatsko takoj izbriše. Tako da v to polje lahko dobimo le števila. Prav tako se nam na desni strani pojavi puščica gor/dol za povišanje/znižanje števila. Koda: <input type="number" />

Range Tip range deluje kot drsnik, njegova vrednost je od 0 do 100. Privzeto pa se postavi na 50, razen če mu v kodi določimo drugače. Koda: <input type="range" />

Color Color polje se uporablja za izbiro barve. V polje je potrebno vnesti barvo s kodo, drugače nas polje obvesti o nepravilno izpoljenem polju. Se pravi za črno barvo vnesemo #000000. #000 ne deluje, čeprav se dostikrat uporablja za črno, mora biti # + 6 števil. Koda: <input type="color" />


TEL Tip tel uporabimo, kadar vpisujemo telefonske številke. Največja razlika v tem polju se pojavi na mobilnih napravah in tablicah, kjer uporabljamo virtualno tipkovnico. Kajti odpre se nam numerična tipkovnica namesto qwerty ali qwertz. Koda: <input type="tel" />

URL Tip URL uporabimo, kadar želimo vpisan URL naslov. Ta tip je zelo uporaben, saj sam preveri, ali je res vpisan URL naslov. URL naslov v tem polju se mora začeti s http… če začnemo kar z www, nam obrazec vrne da vpisan URL ni pravilen. Koda: <input type="url" />

Email Tip email je zelo podoben tipu URL, vendar preverja, če je vnešen pravilen email naslov. Koda: <input type="email" />


Video Video uporabimo, ko Ĺželimo na naĹĄo stran dodati videoposnetek. Lahko dodamo tudi polje, v katerem se video predvaja, kar nam pomaga pri oblikovanju same strain, da velikost videa ni prevelika, ter ga lahko prilagajamo dizajnu strain. Koda: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Brskalnik ne podpira formata. </video>

Audio Audio podobno kot video nam ponuja predvajanje zvoÄ?nega posnetka na spletni strani. Koda: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Brskalnik ne podpira formata. </audio>



Html5