LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> 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 | Články autora | přečteno 10998×

Č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

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

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

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

1.12.2016 22:13 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 8. prosince od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Sraz bude tentokrát tématický. Bude retro! K vidění budou přístroje jako Psion 5mx nebo Palm Z22. Ze svobodného hardwaru pak Openmoko nebo čtečka WikiReader. Přijďte se i vy pochlubit svými legendami, nebo alespoň na pivo. Moderní hardware má vstup samozřejmě také povolen.
Komentářů: 1

4.9.2016 20:13 /Pavel `Goldenfish' Kysilka
PR: Dne 22.9.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, provozování ERP v cloudu, o hostování různých typů softwaru, ale třeba i o zálohování dat nabízeném podnikům formou služby.
Přidat komentář

1.9.2016 11:27 /Honza Javorek
Česká konference o Pythonu, PyCon CZ, stále hledá přednášející skrz dobrovolné přihlášky. Máte-li zajímavé téma, neváhejte a zkuste jej přihlásit, uzávěrka je již 12. září. Konference letos přijímá i přednášky v češtině a nabízí pomoc s přípravou začínajícím speakerům. Řečníci mají navíc vstup zadarmo! Více na webu.
Přidat komentář

27.8.2016 8:55 /Delujek
Dnes po 4 letech komunitního vývoje vyšla diaspora 0.6.0.0
diaspora* je open-source, distribuovaná sociální síť s důrazem na soukromý
Více v oficiálním blog-postu
Přidat komentář

24.8.2016 6:44 /Ondřej Čečák
Poslední týden CFP LinuxDays 2016; pokud byste rádi přednášeli na LinuxDays 2016 8. a 9. října v Praze, můžete svůj příspěvek přihlásit, následovat bude veřejné hlasování.
Přidat komentář

9.8.2016 22:56 /Petr Ježek
Zařazení souborového systému reiser4 do jádra 4.7 znamená konečně konec patchování jádra jen kvůli možnosti použít reiser4.
Přidat komentář

12.7.2016 13:14 /František Kučera
Spolek OpenAlt zve na 130. distribuovaný sraz příznivců svobodného softwaru a otevřených technologií (hardware, 3D tisk, SDR, DIY, makers…), který se bude konat ve čtvrtek 21. července od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

11.7.2016 16:53 /Redakce Linuxsoft.cz
Konference LinuxDays hledá přednášející. Přihlášky poběží do konce prázdnin, v září bude hlasování a program. Více na https://www.linuxdays.cz/2016/cfp/.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

7.12.2016 8:10 / Hamon
scottish cottages

4.12.2016 22:54 / František Kučera
Dárek

9.11.2016 7:42 / Mane
hardwood floor waxing

8.11.2016 13:38 / Mira
Konfigurace maldet na Centos serveru

2.11.2016 11:06 / Warlock
Odkaz v PHP

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2016) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze