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 12032×

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

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

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

> Poslední diskuze

15.12.2017 15:11 / Petit
freehold nj

15.12.2017 15:06 / Petit
nj freehold

5.12.2017 11:50 / Thomas
kitchen renovations

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

Více ...

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