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 a y oddělené čárkou) a pravá dolní (taktéž x a y) 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 a y středu a poloměr. Např. střed x=35, y=40 a poloměr 120: 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š.