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...



10.9.2013 12:00 | Stanislav Kubík | přečteno 15343×

Č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:

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

1 2 3 4

<aside>

definuje obsah , ktorý je odlišný od obsahu stránky

5 6 7 8 9

<audio>

definuje zvukový obsah

10 11 12 13 14

<bdi>

izoluje časť textu , ktorá môže byť formátovaná v rozdieľnom smere , ako ostatný text

15 16 17 18 19

<canvas>

vykresľuje grafiku ( potrebný JavaScript )

20 21 22 23 24

<command>

definuje prikazové tlačítko , ktoré môže užívateľ vyvolať

25 26 27 28 29

<datalist>

definuje zoznam predvolených možností pre pole <input>

30 31 32 33 34

<details>

definuje dodatočné detaily k textu

35 36 37 38 39

<dialog>

definuje dialogové okno

40 41 42 43 44

<embed>

definuje kontajner pre externú aplikáciu

45 46 47 48 49

<figcaption>

definuje titulok elementu <figure>

50 51 52 53 54

<figure>

definuje nezávislý obsah

55 56 57 58 59

<footer>

definuje pätičku dokumentu , sekcie , alebo celej stránky

60 61 62 63 64

<header>

definuje hlavičku dokumentu , sekcie , alebo celej stránky

65 66 67 68 69

<keygen>

definuje kľúč , ktorým budú zašifrované údaje z formulára

70 71 72 73 74

<mark>

zvýrazňuje text

75 76 77 78 79

<meter>

definuje meranie ( postup ) v zadanom rozsahu

80 81 82 83 84

<nav>

definuje odkazy navigácie

85 86 87 88 89

<output>

definuje výsledky kalkulácie

90 91 92 93 94

<progress>

reprezentuje postup úloh

95 96 97 98 99

<rp>

definuje , čo sa zobrazí v prehliadačoch , ktoré nepodporujú ruby anotácie

100 101 102 103 104

<rt>

definuje vysvetlenie / výslovnosť ( pre východoázijskú typografiu )

105 106 107 108 109

<ruby>

definuje ruby anotácie ( pre východoázijskú typografiu )

110 111 112 113 114

<section>

definuje sekcie dokumentu

115 116 117 118 119

<source>

definuje viacero zdrojov pre elementy <video> a <audio>

120 121 122 123 124

<summary>

definuje viditeľné zhrnutie pre element <details>

125 126 127 128 129

<time>

definuje čas / dátum

130 131 132 133 134

<track>

definuje textové stopy pre elementy <video> a <audio>

135 136 137 138 139

<video>

vkladanie video médií

140 141 142 143 144

<wbr>

definuje ukončenie riadku

145 146 147 148 149


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

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.

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=1994