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 | czytane 46867×

RELATED ARTICLES KOMENTARZE

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.

KOMENTARZE

Nie ma komentarzy dla tej pozycji.

Tylko zarejestrowani użytkownicy mogą dopisywać komentarze.

Szukanie oprogramowania

Latest aktual Distributions

1.	Pacman linux Download: 5100x
2.	FreeBSD Download: 9312x
3.	PCLinuxOS-2010 Download: 8803x
4.	alcolix Download: 11194x
5.	Onebase Linux Download: 9912x
6.	Novell Linux Desktop Download: 0x
7.	KateOS Download: 6461x

Latest aktual Software

1.	xinetd Download: 2624x
2.	RDGS Download: 937x
3.	spkg Download: 5248x
4.	LinPacker Download: 10396x
5.	VFU File Manager Download: 3397x
6.	LeftHand Mała Księgowość Download: 7490x
7.	MISU pyFotoResize Download: 3092x
8.	Lefthand CRM Download: 3760x
9.	MetadataExtractor Download: 0x
10.	RCP100 Download: 3375x
11.	Predaj softveru Download: 0x
12.	MSH Free Autoresponder Download: 0x

linuxsoft.cz | Design: www.megadesign.cz