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

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

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

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ů

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ář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

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

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

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