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

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ů

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

8.5.2016 17:19 /Redakce Linuxsoft.cz
PR: Dne 26.5.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í, cloudové služby, infrastruktura cloudu, efektivní využití cloudu, možné nástrahy cloudů a jak se jim vyhnout
Přidat komentář

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

> Poslední diskuze

19.9.2016 21:04 / Marek Schoř
Poděkování

1.9.2016 13:07 / Walker
hardwood floor refinishing

12.8.2016 11:51 / Josef Zapletal
Jak udělat HTML/Javascript swiping gallery do mobilu?

8.8.2016 14:58 / Adams
fairies for hire

28.7.2016 15:51 / pepan
Re: NetBeans vs Eclipse

Více ...

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