ARCHIV

HTML 5 II. - Ako začať s tvorbou HTML 5 dokumentu

Tento článok je pokračovaním seriálu o HTML 5. Pokiaľ ste ešte nečítali prvú časť a chcete vedieť viac o tom, čo to HTML 5 je a aké výhody/zmeny obsahuje, tak vám odporúčam prečítať si aj prvý diel seriálu – http://www.linuxsoft.cz/article.php?id_article=1994. Tento diel sa bude venovať základnej konštrukcii dokumentu HTML 5, čiže definíciou, kostrou a tiež si vysvetlíme ako používať značky pre VIDEO a AUDIO a ktoré formáty videa a zvuku sú podporované.

9.10.2013 00:00 | Stanislav Kubík | Články autora | přečteno 46647×

Ako začať s tvorbou HTML 5 dokumentu

Tvorba HTML 5 dokumentu sa od ostatných verzií HTML nijako neodlišuje. Pokiaľ ste už tvorili v HTML niečo predtým, tak isto viete, že na vytvorenie jednoduchej, ale aj zložitejšej stránky nepotrebujete nič iné ako nejaký textový editor. Najlepšie je používať textový editor určený pre tvorbu HTML, ktorý podporuje zvýrazňovanie (resp. IDE). Ja osobne používam v Ubuntu nástroj joe, ktorý je dostupný pre terminál, alebo gedit v grafickom rozhraní.Vytvoreným súborom, ktoré obsahujú jazyk HTML 5 sa dáva prípona .html (existujú aj iné prípony pre HTML, ale s tým vás teraz nebudem pliesť, pretože pri základe nie sú vôbec podstatné).

Základná kostra webovej stránky

Keď už máte otvorený ten správny editor, ktorý budete používať pri tvorbe, tak si teraz ukážeme ako vyzerá základná kostra webovej stránky. <!DOCTYPE html> <html lang=“sk“> <head> <meta charset=“UTF-8“ /> <title></title> </head> <body> Sem sa píše kód stránky! </body> </html>
Toto je tá najzákladnejšia kostra stránky vytvorenej pomocou HTML 5, ktorá potom okrem kódu medzi značkami <body></body> môže obsahovať ešte aj iné veci, ako napr. popis stránky, autora, pripojenie CSS, JavaScript a iných dokumentov v hlavičke kostri.
Teraz si postupne vysvetlíme, čo jednotlivé definície v kostre znamenajú. Začnime teda úplne hore!

<!DOCTYPE html> - definuje typ dokumentu a hovorí prehliadaču (keďže jazyk HTML je spracovaný prehliadačom narozdiel napr. od PHP), že dokument HTML, ktorý práve číta
je HTML 5.
Táto definícia dokumentu, je narozdiel od predchádzajúcich verzií „super“ krátka a asi prvá, ktorú viem osobne z pamäti napísať. Pre príklad uvediem, že verzia HTML 4 používa definíciu
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN“
“ http://www.w3.org/TR/html4/strict.dtd “>
<html lang=“sk“> - touto značkou začíname kód našej stránky a mal by byť v každom HTML dokumente. Obsahuje tiež atribút lang=“sk“, ktorý hovorí prehliadaču o tom, že v kóde medzi jednotlivými značkami je použitý jazyk slovenský a prehliadač sa podľa toho môže zariadiť (pomáha to napr. pri preklade stránok pomocou nástroja Google Translate, ktorý ponúka preklad, ktorý automaticky rozlíši jazyk). Takže je dobré keď tento atribút vyplníme podľa kódu daného jazyka, ktorý môžete nájsť tu - http://www.w3schools.com/tags/ref_language_codes.asp.
Táto začiatočná značka musí byť ukončená koncovou značkou, ktorá vyzerá takto - </html>
<head> - táto značka musí byť tiež ukončená koncovou značkou - </head>. Tieto dve značky vymedzujú hlavičku dokumentu (nie stránky!!!). Medzi tieto značky sa vkladajú ďalšie iné, ktoré určujú napr. znakovú sadu <meta charset=“UTF-8“ /> (UTF-8, ISO atď.), pričom táto značka sa radí medzi meta značky, ktoré nemajú koncovú značku a preto je dobrým zvykom, pred koncový znak > vložiť lomítko /. Titulok stránky <title></title>, ktorý sa vám bude zobrazovať na lište prehliadača a rovnako sa bude stránka volať aj vo vyhladávačoch. a značky, ktoré vkladajú CSS, JavaScript súbory a veľa ďalších značiek.
<body> - táto značka vymedzuje telo dokumentu (nie stránky!!!), môže obsahovať takmer všetky existujúce značky HTML 5 a vkladá sa medzi ňu a končovú </body> značku kód stránky, ktorý sa bude zobrazovať v prehliadači.
Teraz, keď už viete ako vytvoriť základnú kostru stránky, tak si ukážeme, ako do nej vložíme obsah, pričom použijeme nové značky, ktoré obsahuje jazyk HTML 5 a budú to značky <video> a <audio>.

Video a zvuk v HTML 5

V predchádzajúcich jazykoch ste na zobrazenie videa a pridanie zvuku na svoju stránku potrebovali nejaký nástroj, ktorý vyžadoval inštaláciu doplnkov na zobrazovanie prehrávača pre vašu hudbu a video. No HTML 5 prichádza s riešením a má implementované vlastné nástroje na prehrávanie videa a hudby a tak už návštevník stránky nepotrebuje inštalovať žiadne doplnky a obsah sa im zobrazí korektne.Najprv si poviem použiť značku <video>, povieme si aké formáty podporuje a potom sa presunieme na značku <audio> a jej formáty.

Video

Video súbory do HTML 5 pridáme nasledovne:<video width=“320“ height=“240“ controls> <source src=“videosubor.mp4“ type=“video/mp4“> <source src=“videosubor.ogg“ type=“video/ogg“> Tvoj prehliadač nepodporuje značku video. </video>
V prvom riadku kódu vidíte, že značka obsahuje aj atribúty width (šírka), height (výška) a controls. Tieto atribúty slúžia na nastavenie šírky a výšky videa (prehrávača) a controls hovorí, aby sa v prehrávači zobrazilo aj ovládanie.
V druhom a treťom riadku vidíte source (zdroje), pričom sú určené až dva formáty. Kludne ich môže byť aj viac, pretože prehliadač sám určí vhodný formát a ten začne prehrávať. Pokiaľ prehliadač nepodporuje ani jeden z formátov, tak sa vypíše chybová hláška pod zdrojmi videa. V súčasnosti sú 3 podporované formáty videa:
MP4 - podporuje - Internet Explorer, Chrome, Firefox, Safari
WebM - podporuje - Chrome, Firefox, Opera
Ogg- podporuje - Chrome, Firefox, Opera
Keď sa pozriete na túto podporu u prehliadačov, tak zistíte, že keď chcete aby vaše video videli užívatelia všetkých prehliadačov, tak musíte video pridať minimálne v dvoch formátoch. Takže dúfajme, že sa táto podpora jednotlivých formátov zmení.
Pri určovaní zdroja videa musíme určiť aj typ zdroja type. Pre MP4 (video/mp4), pre WebM (video/webm) a pre Ogg (video/ogg).
Značka <video> obsahuje aj ďalšie atribúty, ktoré môžete použiť. Tu je prehľad všetkých:

Atribút:	Hodnota:	Popis:
autoplay	autoplay	Nastaví, že video sa spustí automaticky ako bude pripravené.
controls	controls	Nastaví, že sa zobrazí ovládanie prehrávača (hlasitosť, spustiť/zastaviť...)
height	pixely	Nastaví výšku prehrávača v pixeloch.
width	pixely	Nastaví šírku prehrávača v pixeloch.
loop	loop	Nastaví, že sa video stopa bude automaticky opakovať po skončení.
muted	muted	Nastaví, že sa bude video prehrávať bez zvuku.
poster	URL	Nastaví obrázok, ktorý sa zobrazí keď sa video načítava.
preload	auto metadata none	Nastaví, kedy sa má začať video načítavať.
src	URL	Nastaví URL zdroj videa.

Audio

Audio súbor pridáme do HTML 5 nasledovne:< audio controls> <source src=“videosubor. ogg“ type=“ audio/ ogg“> <source src=“videosubor. mp4“ type=“ audio/ mpeg“> Tvoj prehliadač nepodporuje značku audio. </ audio>
Podobne ako pri značke pre video je aj tu na prvom riadku v značke atribút controls, aby sa v prehrávači zobrazilo ovládanie. Ďalej sú zdroje definované podobne ako pre video. Opäť si môžeme všimnúť, že sú definované aj tu dva audio súbory. Prehliadače podporujú tieto formáty zvuku:
MP3 - podporuje - Internet Explorer, Chrome, Firefox, Safari
Wav - podporuje - Chrome, Firefox, Safari, Opera
Ogg - podporuje - Chrome, Firefox, Opera
Definície typov zdroja sú nasledovné. Pre MP3 (audio/mpeg), pre Ogg (audio/ogg) a pre Wav (audio/wav).
Značka < audio > obsahuje aj ďalšie atribúty, ktoré môžete použiť. Tu je prehľad všetkých:

Atribút:	Hodnota:	Popis:
autoplay	autoplay	Nastaví, že hudba/zvuk sa spustí automaticky ako bude pripravené.
controls	controls	Nastaví, že sa zobrazí ovládanie prehrávača (hlasitosť, spustiť/zastaviť...)
loop	loop	Nastaví, že sa audio stopa bude automaticky opakovať po skončení.
muted	muted	Nastaví, že audio nebude mať zvuk.
preload	auto metadata none	Nastaví, kedy sa má začať audio načítavať.
src	URL	Nastaví URL zdroj audia.

Teraz by ste už mali vedieť ako definovať a vytvoriť dokument HTML 5 a jeho základnú kostru, ktorú má každý HTML dokument. Tiež by ste mali už vedieť ako používať mocné značky jazyka audio a video, ktoré budú onedlho držať v šachu doplnky ako Adobe Flash Player. Určite sa môžete tešiť na ďalšie pokračovanie tohto seriálu, pokiaľ sa ho podarí vydať. Práve tam vás naučíme, ako prekonávať priepasti medzi HTML 4 a HTML 5.

Verze pro tisk


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ů

Rozšířené vyhledávání

Linux News

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