Lekce 10 - Multimédia v HTML 5
V minulé lekci, Textové tagy v HTML II. část, jsme si ukázali textové tagy, mezi které
patří třeba <wbr>
, <br>
,
<ruby>
,<rt>
, <em>
,
<strong>
, <samp>
, <var>
a další.
Co by to byl web bez obrázků? Obrázky vkládáme do HTML pomocí tagu
<img>
, který si nyní projdeme.
<img>
Tag <img>
(jako image =
obrázek) je nepárový a obsahuje několik atributů:
- src - Cesta k souboru s obrázkem. Dobrou praktikou je mít
všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalším
obsahem (např.
images/
). - srcset - Podobný atributu
src
, ale využije pokaždé jiné rozlišení obrázku (např. na mobilech malé,timpádem nemusí stahovat větší objem dat). Nevýhodou je, že musíme mít na serveru několik těchto obrázků v různé velikosti. Více o tom pojednává lekce na responzivní design, kde se tato problematika probírá do hloubky. - alt - Krátký popis toho, co je na obrázku (alternativní
text). Atribut
alt
bývá často vynecháván, ale to je chyba. Hraje totiž svou roli např. ve vyhledávačích obrázků (Google images) nebo v hlasových čtečkách.
Kód vložení obrázku na stránku bude tedy následující:
<img src="images/ironman.png" alt="IronMan" />
Výsledek:
Musíme si uvědomit, že až budou stránky pro veřejnost na internetu, stažení obrázku bude nějakou dobu trvat. Je tedy vhodné použít úsporné formáty jako jsou JPEG nebo PNG, kde má výsledný obrázek malou velikost díky kompresi. JPEG se zpravidla používá na velké obrázky a fotky, PNG na ikony, nákresy a obrázky, kde jsou jednobarevné plochy. Rozhodně se vyhněte formátu BMP, který je bezkompresní nebo formátu GIF, který poškozuje paletu. Také existuje formát SVG pro vektorovou grafiku, kde ji použít můžete, použijte ji
K nastavení rozměrů je možné využít atributy:
- width pro šířku obrázku v pixelech a
- height pro výšku obrázku také v pixelech.
Hodnoty můžeme zadat buď číslem (např. width="64"
) a budou
označovat velikost v pixelech nebo procenty (např. width="50%"
).
Pokud je zadán jen jeden atribut, další se dopočítá tak, aby souhlasil
poměr stran. Opět si však musíme uvědomit, že obrázek by měl být na
webu v té velikosti, ve které se bude zobrazovat. Měli bychom ho tedy
zmenšit např. v Photoshopu a nenahrávat ho na web
veliký a až poté si ho zmenšit v HTML. Prohlížeč potom musí načíst
celý velký obrázek, zmenšit ho a až potom ho zobrazit. To bude jistě
chvíli trvat.
Obrázková mapa
Obrázek můžeme použít i jako tzv. obrázkovou mapu. Tím zaktivníme některé jeho části jako odkazy. To může být užitečné, protože jinak bychom obrázek museli ručně rozřezat na více menších, ty obalit odkazy a poté složit v původní, větší obrázek.
ismap
Jako první můžeme jednoduše odeslat serveru souřadnice, na které uživatel na obrázku klikl. Použijeme k tomu atribut
- ismap - Pokud je atribut přítomen (s libovolnou hodnotou,
např.
ismap
nebo prázdnou), jsou po kliknutí na obrázek odeslány souřadnice kliknutí na server. Hovoříme o serverové mapě, protože si souřadnice zpracujeme a vyhodnotíme na serveru.
V kódu by to vypadalo takto:
<h2>Klikněte na planetu pro další podrobnosti</h2> <a href="mapa.php"> <img src="images/slunecni_soustava.png" ismap="ismap" alt="Mapa sluneční soustavy" /> </a>
Souřadnice jsou po kliknutí na obrázek odeslány na server jako URL query
string (neboli jako parametr GET
, který budeme probírat u
formulářů). Je potom jen na serveru, jak si je zpracuje a jak pozná, která
oblast byla označena.
<map>
Tag <map>
umožňuje definovat mapu na obrázku přímo na
straně klienta. Na obrázku definujeme několik oblastí s různými tvary a ty
budou rovnou fungovat jako odkazy. Atribut má jen jeden a povinný:
- name - Specifikuje jméno mapy, pomocí kterému ji poté přiřadíme obrázku.
Souvisí s tagem <area>
, který si teď také
projdeme.
<area>
Tag <area>
označuje jednu oblast na mapě (obrázku).
Typicky se jedná o různé tvary, které zaktivní určité části obrázku,
které poté fungují jako odkazy. Má několik atributů:
- alt - Alternativní text k oblasti obrázku, který známe
už z tagu
<img>
. - coords - Souřadnice oblasti.
- href - Odkaz na stránku, která se otevře po kliknutí na oblast.
- hreflang - Kód jazyka stránky.
- media - Možnost specifikovat zařízení, pro které je výsledná stránka optimalizovaná.
- rel - Vztah mezi aktuálním a cílovým dokumentem,
stejné, jako u tagu
<a>
. - shape - Tvar oblasti, na výběr máme:
- default - Celý obrázek.
- rect - Obdélník, hodnoty souřadnic jdou po sobě - levá
horní (souřadnice
x
ay
oddělené čárkou) a pravá dolní (taktéžx
ay
) vzdálenost od levého/horního okraje obrázku. Př.:16, 16, 50, 50
- circle - Kruh, souřadnice určíme jako souřadnice
x
ay
středu a poloměr. Např. středx=35
,y=40
a poloměr120
:35, 40, 120
- poly - Mnohoúhelník, určíme souřadnice jednotlivých
bodů, např.:
200, 16, 272, 16, 360, 250, ...
- target - Kde se má cílový dokument otevřít, jako u
odkazu (tag
<a>
, který probereme později). - type - mime typ cílového URL.
Mapu k obrázku přiřadíme pomocí atributu usemap
:
<img src="ptak.jpg" width="400" height="241" usemap="#map" alt="Pták" /> <map name="map"> <area shape="circle"coords="8,12,224" title="První odkaz" alt="První odkaz" href="#prvni" /> <area shape="rect" coords="180,159,398,238" title="Druhý odkaz" alt="Druhý odkaz" href="#druhy" /> <area shape="circle" coords="180,10,200" title="Třetí odkaz" alt="Třetí odkaz" href="#treti" /> </map>
Můžeme si to vyzkoušet níže:
Pokud najedeme na obrázek, zobrazí se nám jeden z odkazů (většinou
vlevo dole v prohlížeči, případně vpravo). Na konci URL by mělo být
#první
, #druhy
, a nebo #treti
.
<canvas>
Tag <canvas>
umožňuje do HTML dokumentu vložit
kreslící plátno. Samotné kreslení se potom provádí skripty (většinou JavaScriptem). HTML jako takové plátno pouze poskytuje a
samo na něj nemůže kreslit.
O použití JavaScriptu pro kreslení na <canvas>
pojednává článek Canvas aneb grafika
JavaScriptem.
Rozdíl mezi plátnem a obrázkem je samozřejmě ten, že plátno se
vykresluje v reálném čase bez obnovení stránky. Přes HTML
<canvas>
fungují hry, grafy, animace apod.
Atributy
Plátno canvasu může obsahovat následující atributy:
- height - Výška plátna v pixelech.
- width - Šířka plátna v pixelech.
Ukázka použití
Tato ukázka bude pro neznalce JavaScriptu asi obtížná. Nejprve získáme
plátno z HTML dokumentu, získáme jeho kontext. Poté vyplníme čtverec o
velikosti strany a = 100
na pozici 20, 20
(souřadnice
x
je vždy první, poté y
). Poté vymažeme vevnitř
toho čtverce pole o rozměrech 80×80px
a poté tam vykreslíme
obrys:
<canvas id="canvas"></canvas> <script type="text/javascript"> let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); // Vyplní čtverec context.fillRect(20, 20, 100, 100); // Vymažeme vevnitř toho čtverce pole context.clearRect(30, 30, 80, 80); // A vykreslíme si tam obrys context.strokeRect(40, 40, 60, 60); </script>
Výsledek:
<embed>
Pro vytvoření obrázkové mapy můžeme použít i automatizované
programy. Touto funkcí disponuje např. GIMP
(filtry -> www -> obrázková mapa
).
Tag <embed>
se v HTML 5 používá k vložení externí
aplikace nebo plug-inu. Často se používá k vložení Flash aplikace. Stejné
funkcionality dosáhneme i tagem <object>
.
Dnes už se tag <embed>
příliš
nepoužívá a je doporučené využívat spíše tag
<object>
. Tak samo Flash aplikace se již téměř
nepoužívají.
Atributy
U tagu <embed>
máme atributy:
- height - Výška aplikace v pixelech.
- src - URL adresa aplikace (souboru).
- type - MIME typ obsahu.
- width - Šířka aplikace v pixelech.
Ukázka použití
Ukážeme si to na jednoduchém příkladu hodin v Adobe Flash Player:
<embed src="hodiny.swf" />
Pokud Flash nainstalovaný máme, uvidíme hodiny:
Pokud ne, máme zde alespoň screen hodin:
Flash je často ve výchozím nastavení prohlížeče z bezpečnostních důvodů zablokován, je třeba ho v nastavení prohlížeče nejdříve zapnout.
<object>
Tag <object>
se v HTML 5 používá k vložení
multimediální aplikace do HTML dokumentu. Nejčastěji se jedná o Flashové a
Java aplikace, ale můžeme vložit i jiné dokumenty, např. PDF nebo dokonce
další HTML stránku.
Tag <object>
je párový a obaluje alternativní obsah,
který se zobrazí v případě, že daný prohlížeč element nepodporuje.
Atributy
Tag má následující atributy:
- data - URL vkládaného obsahu.
- form - ID formuláře, do kterého element patří, atribut není povinný.
- name - Název objektu.
- type - Specifikuje MIME typ vkládaného obsahu.
- usemap - Umožňuje připojit k objektu (podobně jako u
obrázku, viz tag
<img>
) klikací mapu. - width - Šířka objektu v pixelech.
- height - Výška objektu v pixelech.
Vloženým objektům můžeme předávat parametry pomocí elementu
<param>
, který si jako poslední teď projdeme.
<param>
Umožňuje vkládat atributy do objektu, které se následně předají vkládané aplikaci:
<object type="application/x-shockwave-flash" data="hodiny.swf" width="200" height="200"> <param name="WMode" value="Transparent">
Atributy
Tag <param>
má následující atributy:
- name - Název parametru.
- value - Specifikuje hodnotu parametru.
Výsledek (potřeba mít nainstalovaný Adobe Flash):
Nebo pokud Flash nemáte, výsledek máme zase na screenu :
Všimněte si, že jsme pomocí elementu <param>
předali
aplikaci informaci, aby se vykreslovala s průhledným pozadím
("value=Transparent"
).
V další lekci, Multimédia v HTML II. část, si ukážeme tagy k tvorbě multimédií, mezi
které patří <source>
, <track>
,
<video>
, atributy src
, type
,
media
a plno dalších.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 60x (2.8 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML5