ARCHIV

HTML 5 I. - Úvod do HTML 5

V tomto článku sa budem venovať novej verzii tohoto značkovacieho jazyka, ktorý už máme medzi sebou nejaký ten mesiac a však jeho podpora nie je stopercentná a predpokladám, že ani nebude. Tento jazyk je ešte stále v rozvoji a tak ešte neexistujú ani presné štandardy a špecifikácie, o ktoré sa stará W3C (World Wide Web Consortium), ale to nie je dôvod, prečo tento jazyk nepoužívať. Hlavne keď nám prináša toľko vylepšení a vychytávok. Tak začnime pekne od začiatku...

Čo to je HTML5

Jazyk HTML5 sa vyvinul z predchádzajúcich verzií jazyka HTML, pričom sa snaží prispôsobiť dnešným (súčasným) požiadavkám a potrebám. Do jazyku sa presunulo veľa vlastnostností, ktoré sa za tie roky stali overenými, od jeho predchodcov. Pokiaľ ste sa venovali HTML, tak vám musím oznámiť, že poznáte už podstatnú časť HTML5. Tí, čo bažíte po učení nezúfajte a tí čo ste leniví, tak sa neľakajte. Jazyk HTML5 vám prináša mnoho výhod a novej syntaxe, ktorú si budete musieť osvojiť, keď budete chcieť písať sémantický (alebo aj čistý) kód. No táto nová syntax vás zbaví mnohých zbytočných zápisov! Ako som už spomenul vyššie, jazyk HTML5 nemá ešte podporu u všetkých zariadení a prehliadačov, ale veľká časť je spätne kompatibilná, čo bolo aj kľúčovou vlastnosťou návrhu tohoto jazyka.
Jazyk HTML5 prináša veľa nových funkcií, pričom niektoré z nich sú veľmi jednoduché, napríklad doplnkové elementy pre popis obsahu:

• article (článok)

• section (časť)

• figure (obrázok)

• a ďalšie , ktoré uvediem neskôr ...

Iné funkcie, ktoré sú trošku zložitejšie, pomáhajú pri tvorbe webových aplikácií. No na využitie týchto, budete musieť dôkladne preniknúť do jadra HTML5.
Čo je však veľmi dôležité, jazyk HTML5 zavádza podporu prehrávania zvukových a video súborov priamo cez webový prehliadač, bez využitia nejakého plug-inu (napr. Adobe Flash Player, alebo QuickTime).

Prehľad nových značiek (tagov)

Značka	Popis	Podpora v prehliadačoch
<article>	definuje článok
<aside>	definuje obsah , ktorý je odlišný od obsahu stránky
<audio>	definuje zvukový obsah
<bdi>	izoluje časť textu , ktorá môže byť formátovaná v rozdieľnom smere , ako ostatný text
<canvas>	vykresľuje grafiku ( potrebný JavaScript )
<command>	definuje prikazové tlačítko , ktoré môže užívateľ vyvolať
<datalist>	definuje zoznam predvolených možností pre pole <input>
<details>	definuje dodatočné detaily k textu
<dialog>	definuje dialogové okno
<embed>	definuje kontajner pre externú aplikáciu
<figcaption>	definuje titulok elementu <figure>
<figure>	definuje nezávislý obsah
<footer>	definuje pätičku dokumentu , sekcie , alebo celej stránky
<header>	definuje hlavičku dokumentu , sekcie , alebo celej stránky
<keygen>	definuje kľúč , ktorým budú zašifrované údaje z formulára
<mark>	zvýrazňuje text
<meter>	definuje meranie ( postup ) v zadanom rozsahu
<nav>	definuje odkazy navigácie
<output>	definuje výsledky kalkulácie
<progress>	reprezentuje postup úloh
<rp>	definuje , čo sa zobrazí v prehliadačoch , ktoré nepodporujú ruby anotácie
<rt>	definuje vysvetlenie / výslovnosť ( pre východoázijskú typografiu )
<ruby>	definuje ruby anotácie ( pre východoázijskú typografiu )
<section>	definuje sekcie dokumentu
<source>	definuje viacero zdrojov pre elementy <video> a <audio>
<summary>	definuje viditeľné zhrnutie pre element <details>
<time>	definuje čas / dátum
<track>	definuje textové stopy pre elementy <video> a <audio>
<video>	vkladanie video médií
<wbr>	definuje ukončenie riadku

Tabuľka je platná pre internetové prehliadače:
Internet Explorer (verzia 8)
Opera (verzia 15)
Safari (verzia 5.1.7)
Mozilla Firefox (verzia 18)
Google Chrome (verzia 23)
Pozor! V novších verziách môže byť podpora jednotlivých elementov rôzna.

Značky (tagy), ktoré už HTML5 nepodporuje

• <acronym>

• <applet>

• <basefont>

• <big>

• <center>

• <dir>

• <font>

• <frame>

• <frameset>

• <noframes>

• <strike>

• <tt>

Tieto značky sa už v HTML5 nepoužívajú, pretože pravidlá sa upravili tak, aby sa pre formátovanie objektov HTML5 viac používalo CSS a tým sa otvorili dvere aj novému CSS3, ktoré v kombinácii s HTML5 dokáže veci dosiaľ v HTML a CSS nemožné len použitím týchto dvoch jazykov!
Ako nahradiť niektoré nepoužívané značky?
<applet>
Túto značku (tag), môžete nahradiť značkou, ktorá v HTML5 podporovaná je a tou je značka
<object>.
Takže kód bude vyzerať nejak takto:
<object width="400" height="400" data="helloworld.swf"></object>
<center>
Značku <center>, ktorá už v HTML5 nemá podporu môžete nahradiť pomocou CSS. Tu máte spôsob, ako si nahradiť značku center v CSS a centrovať text:
. center {width: 100%; text-align: center;} → toto použijete vo vašom CSS súbore
<div class=”center”><p>Nejaký vycentrovaný text!</p></div> → toto môže použiť kdekoľvek vo vašom HTML súbore
<acronym>
Túto značku jednoducho nahradíte novou značkou <abbr> a to nasledovným spôsobom:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<frame>
Značku môžete nahradiť viacerými spôsobmi. A to pomocou <div>, alebo jednoduchšou cestou pomocou <iframe> (ktorý si potom tiež môžete upraviť pomocou triedy CSS). Jednoduchý príklad použitia značky <iframe>:
<iframe src="http://www.linuxsoft.cz"></iframe>

Takže teraz už približne viete, ako vznikol HTML5 a čo nové priniesol, samozrejme to nie je ani zďaleka všetko, no k tomu sa dostaneme v pokračovaní tohto seriálu.

Ďalšia časť seriálu:
2. časť - Začíname s HTML 5
V tejto časti seriálu nájdete!
- deklarácia HTML5
- základná kostra stránky
- test niektorých nových tagov, ktoré uľahčujú napr. prácu s videom a zvukom (<video>;<audio>)
- podporované formáty
Tak nezabudnite sledovať tento seriál a isto sa niečo nové naučíte, alebo sa vám HTML5 dostane lepšie pod kožu.

Verze pro tisk