Úvod do HTML5

Úvod do HTML5

Prehľad prinesených noviniek:

Popisnejší zdrojový kódhtml5 prináša nové príkazy na vytvorenie
štruktúry webovej stránky, ktoré definujú záhlavie, zápätie, časť
s navigáciou, postranné panely, články a pod.

Lepšie aplikáciepodpora bohatších a interaktívnejších
aplikácií – od ovládacích prvkov ActiveX až po FLASH. HTML5 ponúka možnosti,
ktoré v niektorých prípadoch úplne vylučujú potrebu používania cudzích
technológií.

Posielanie správ medzi dokumentmiwebové aplikácie nám bránia
používať skripty na jednej doméne ovplyvňujúce skripty  v rámci inej domény. Vďaka tomuto zákazu
sú koncoví používatelia chránení pred skriptovaním medzi webovými stránkami,
ktoré sa používali k vykonávaniu rôznych škodlivostí nič netušiacim
návštevníkom webu. HTML5 obsahuje riešenie, ktoré je  bezpečné a ľahko sa aplikuje.

Úložisko pre klientao HTML5 uvažujeme ako o webovej
technológií, ale po pridaní API pre webové úložisko a webové SQL databázy
je možné vytvárať aplikácie v prehliadači, ktoré dokážu ukladať dáta na
strane klienta.

Lepšie používateľské rozhranieje to dôležitá časť  webovej aplikácie. K úprave tabuliek
alebo zaoblených rohov sa používali knižnice JavaScriptu, čím sa pridávali
ďalšie rozsiahle kódy. Použitím HTML5 a CSS3 dochádza podstatne
k zredukovaniu kódov, k prehľadnosti a jednoduchosti.

Lepšie formuláreniektoré elementy formulárov, ako sú  kalendáre, posuvné jazdce alebo pipety pre
výber farby, bol potrebný JavaScript. Všetky tieto prvky je možné definovať
pomocou HTML5, podobne aj roletové ponuky, zaškrtávacie políčka
a prepínače.

 Vylepšená prístupnosťpoužívaním nových elementov HTML5 jasnejšie
popisujeme obsah pre rôzne čítačky obrazoviek, uľahčujeme spracovávanie obsahu.
Napr. navigačné menu stránky je možné nájsť ľahšie, pokiaľ je umiestnené v elemente
< nav> namiesto < div> alebo zoznamu < ul> resp. < ol>.

Pokročilé selektoryCSS3 obsahuje selektory, ktoré umožňujú
definovať párne a nepárne riadky tabuľky, dokážu identifikovať všetky
vybraté zaškrtávacie políčka, alebo dokonca posledný odsek textu a pod.
To všetko je možné dosiahnuť použitím menšieho počtu zdrojového kódu. 

Vizuálne efektyCSS3 umožňuje pridávať napr. odtiene pre obrázky
alebo rôzne priestorové efekty bez nutnosti pridávania nejakého kódu.

Spätná kompatibilitahtml5 funguje vo všetkých prehliadačoch,
dokonca aj v IE6. Kód je možné validovať pomocou W3C. Deklarácia typu
dokumentu, na akú sme boli zvyklí pri XHTML dokumente je obmedzená na
jednoduchý zápis v tvare < !
DOCTYPE html>
. Túto deklaráciu umiestnime do dokumentu a používame
HTML5. Náš dokument bude následne validovaný podľa štandardov HTML5.


Čo zo značkami z verzie XHTML?

Programátori, ktorí ovládajú
príkazy XHTML ich môžu samozrejme naďalej používať aj vo verzii HTML5.  Dokument HTML5 bude validným, či už budeme
používať syntax a spôsoby zápisu príkazov z xhtml alebo html5.  

Internet Explorer

Tento webový prehliadač má
v súčasnosti ešte stále širokú základňu používateľov. Žiaľ, od verzie 8
a nižšie podporujú HTML5 a CSS3 veľmi slabo. Verzia 9 situáciu
zlepšuje, ale stále to nie je 100% podpora. Webová stránka sa v IE bude
samozrejme zobrazovať, ale nebude fungovať presne tak, akoby fungovala
v Google Chrom alebo Firefox.
 

Zavrhnuté značky a príkazy:

HTML5 prináša kopec nových
elementov, ale niektoré zavrhuje a vôbec sa nepoužívajú. Ide o tieto
značky:

  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

niektoré z týchto značiek sú
zastarané. Mimo týchto značiek bola ešte odstránená podpora rámcov (frames).

 

V neplatnosti sú aj tieto
elementy:

  •  aling
  •  ling, vlink, aling a textové atribúty
    v elemente < body>
  •  bgcolor
  •  height a width
  •  hspace a vspace
  • cellpadding, cellspacing, border v elemente
    < table>< /table>


Nové štrukturálne značky a atribúty:

< header>

Definuje oblasť záhlavia webovej
stránky aj jeho časti [podpora v Ch5, FF3.6, IE8, S4, O10]

< footer>

Definuje oblasť zapätia webovej
stránky aj jeho časti [podpora v Ch5, FF3.6, IE8, S4, O10]

< selection>

Definuje logickú oblasť  webovej stránky aj jej časti [podpora v Ch5,
FF3.6, IE8, S4, O10]

< article>

Definuje článok alebo kompletnú
časť obsahu [podpora v Ch5, FF3.6, IE8, S4, O10]

< aside>

Definuje sekundárnu alebo
príbuznú časť obsahu [podpora v Ch5, FF3.6, IE8, S4, O10]

< meter>

Popisuje mieru v rámci
obsahu [podpora v Ch5, FF3.6, IE8, S4, O10]

< progress>

Ovláda zobrazenie reálneho
časového priebehu vzhľadom k cieľu 

[podpora v Ch5, FF3.6, IE8, S4,
O10]

Rubriky: