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

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ů

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

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

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

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