LINUXSOFT.cz Přeskoč levou lištu

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



10.9.2013 12:00 | Stanislav Kubík | Články autora | přečteno 15747×

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

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

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

> Poslední diskuze

31.7.2023 14:13 / Linda Graham
iPhone Services

30.11.2022 9:32 / Kyle McDermott
Hosting download unavailable

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

Více ...

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