Médiá v HTML (obrázky, hudba, videá)

V tejto časti online tutoriálu jazyka HTML sa pozrieme na to, ako pracovať s médiami na webe, ako vložiť na web obrázok, hudbu či video.

• Obrázky

• Obrázky cez element picture

• Obrázky ako klikacie mapy

• Zvuk

• Video

• MIME klasifikácia súborov

Obrázky v HTML (tag img)

Ako sme si stručne predstavili v úvodnej kapitole HTML tutoriálu, pre vloženie obrázku na stránku stačí použiť tag img s atribútom src, v ktorom treba zadať cestu k obrázku. Cesta k obrázku môže byť:

• relatívna vzhľadom na aktuálny priečinok, kde je stránka (HTML dokument)
• absolútna, teda celá cesta k obrázku (v prípade webu napr. v tvare https://www.eduself.sk/obrazok.jpg, v prípade lokálneho počítača s operačným systémom Windows napr. C:\obrazky\obrazok.jpg

Všimnite si, že tag img je nepárový (to znamená, že nemá ukončujúci tag). V takom prípade môžeme na konci otváracieho tagu pridať rovno aj znak ukončenia (nie je to nutné, ale zvykne sa to robiť).

Tu je môj obrázok: <img src="https://www.eduself.sk/banner.gif" />

Na formátovanie obrázku v HTML dokumente môžeme použiť atribúty:

• atribút alt: alternatívny text opisujúci obrázok pre prípady, keď sa obrázok nenačíta (resp. v prípade, keď sa obrázok nepodarí načítať alebo to zariadenie neumožňuje)
• atribút title: text, ktorý sa zobrazí pri prejdení myšou (rovnako ako pri hypertextových odkazoch)
• atribút width: nastavenie šírky obrázka
• atribút height: nastavenie výšky obrázka
• atribút style: pre vloženie CSS pravidiel na pokročilé štýlovanie obrázku

Tu je môj roztiahnutý obrázok s okrajmi zelenej farby pomocou atribútu <em>style</em> <br> 
<img 
  src="https://www.eduself.sk/banner.gif" 
  alt="ikonka webu" 
  width="100px" 
  height="30px" 
  style="border: 12px solid green"
  title="toto je logo webu eduself.sk" />

<br>A tu je ešte jeden bez atribútov okrem cesty: <img src="https://www.eduself.sk/banner.gif" />

Doteraz sme nastavovali rozmery obrázkov pomocou HTML atribútov (width a height). Rozmery obrázku však vieme zadefinovať pomocou CSS pravidiel, ktoré pridáme do atribútu style. Ak chceme pridať viac CSS pravidiel, stačí ich oddeľovať bodkočiarkou.

<p>Tu je môj roztiahnutý obrázok s okrajmi zelenej farby pomocou atribútu <em>style</em>, kde sú zároveň aj rozmery obrázkov uvedené pomocou pravidiel CSS<br> </p>
<img 
  src="https://www.eduself.sk/banner.gif" 
  alt="ikonka" 
  style="border: 12px solid green; height: 30px; width:100px"
  title="toto je logo webu eduself.sk" />

Výsledok je presne rovnaký, ako v ukážke predtým (rozmery obrázku sú nastavené na výšku s hodnotou 30px a šírku s hodnotou 100px).

V novších verziách jazyka HTML sa odporúča všetky vlastnosti týkajúce sa vizuálnej stránky definovať pomocou CSS. Viac o použití jazyka CSS na štýlovanie HTML dokumentov nájdete v kapitole Úvod do CSS

Zarovnanie HTML obrázkov na okraj

Ako ste si isto všimli, obrázky sa zobrazujú v tom istom riadku ako zvyšný obsah. To znamená, že tag img je vložený tag (angl. inline) a nie blokový. Zaberá preto najmenší možný priestor, a to často spôsobuje, že obrázok zasahuje do textu a celkovo je webová stránka kvôli tomu neprehľadná.
Ak chceme, aby sa obrázok zobrazoval mimo hlavného textu, potrebujeme zmeniť jeho pozíciu. Keďže zmena pozície obrázku je vizuálna zmena, odporúča sa opäť použiť pravidlá CSS
Ak nechceme, aby sa obrázok zobrazoval priamo v texte, ale na jeho okraji, môžeme pridať do atribútu style pravidlo pre zmenu pozicovania float s hodnotou left alebo right podľa toho, či chceme obrázok zarovnať doľava alebo doprava.
Ak chceme pridať okolo obrázka trošku miesta, vieme na to použiť CSS pravidlo na pridanie okrajov margin

<img src="https://www.eduself.sk/banner.gif" alt="ikonka" style="float: left;  margin: 4px;" title="obrázok vľavo" />
<img src="https://www.eduself.sk/banner.gif" alt="ikonka" style="float: right; margin: 4px;" title="obrázok vpravo" />
<p>
  Toto je dlhý text v našom HTML tutoriáli, ktorý sa zobrazí medzi obrázkami vďaka tomu, že obrázky majú pomocou CSS pravidiel nastavené zarovnanie doľava resp. doprava. V rámci tohto HTML tutoriálu si tu ukazujeme situáciu, keď chceme, aby boli obrázky po okrajoch textu. Hovorí sa tomu tiež plávajúci obrázok (z angl. float), keďže obrázok pláva okolo textu :)
</p>

Pridanie popisu k obrázku (tag figure)

Ak chceme pridať popis k obrázku, môžeme na to využiť obaľovací element figure, do ktorého vložíme obrázok spolu s popisom obrázku v tagu figcaption

<figure>
  <img src="https://www.eduself.sk/banner.gif" alt="ikonka">
  <figcaption>Obr.1 - ikonka eduself.sk</figcaption>
</figure>

Ak by sme chceli nastaviť obrázok ako plávajúci, musíme použiť parameter float pre obaľujúci element figure, aby bol aj popis obrázku súčasťou plávajúceho elementu.

<figure style="float:left; text-align:center; border: 3px solid green;">
  <img src="https://www.eduself.sk/banner.gif" alt="ikonka">
  <figcaption>Obr.1 - ikonka eduself.sk</figcaption>
</figure>
Toto je dlhý text, ktorý sa zobrazí napravo od obrázku, lebo obrázok má nastavené obtekanie doľava. Pomocou CSS pravidiel v atribúte <strong>style</strong> sme tiež upravili zarovnanie textu na stred, pridali zelený okraj s hrúbkou 3 pixely, aby bolo všetko pekné a prehľadné :)

Prečo uvádzať rozmery obrázku v HTML tagu?

V poslednej ukážke sme nenastavili rozmery obrázkov ani HTML tagmi, ani pravidlami CSS. V takomto prípade sa obrázok vykreslí v jeho skutočnej veľkosti. Treba si však uvedomiť, že obrázok je samostatný dokument (dokument typu obrázok, napr. vo formáte jpg alebo png), a nie je súčasť HTML dokumentu. To znamená, že sa pri načítaní webovej stránky najskôr načíta HTML stránka (HTML dokument napísaný v jazyku HTML), a keď sa v tomto dokumente nachádza odkaz na obrázok, potom sa stiahne aj ten (resp. všetky ďalšie dokumenty, na ktoré sa odkazuje). Keď je na jednej stránke viac veľkých obrázkov, alebo má návštevník pomalšie pripojenie k internetu, načítanie obrázkov môže chvíľu trvať (pri veľkých obrázkoch dlhú chvíľu). Preto sa odporúča uviesť rozmery obrázku v každom prípade, aby sa pri vykresľovaní HTML stránky rezervovalo miesto na obrázok, kým sa celý zobrazí.
V opačnom prípade sa môže stať, že po načítaní obrázku dôjde k posunutiu textu pri čítaní, a to nie je veľmi príjemný efekt :)

Obrázková mapa v HTML (tag map)

Ak chceme použiť obrázok ako hypertextový odkaz, stačí element pre obrázok img vložiť do elementu pre hypertextový odkaz a.

<a href="https://www.eduself.sk/banner.gif" target="_blank" title="otvor obrázok v novom okne">
  <img src="https://www.eduself.sk/banner.gif" />
</a>

Zaujímavou možnosťou pri práci s obrázkom je tzv. obrázková mapa (angl. image map). Vďaka nej vieme obrázok rozdeliť na menšie oblasti a pre každú oblasť nastaviť hypertextový odkaz na nejaký zdroj. Stačí tag img použiť v kombinácii s tagom map:

• Do tagu img pridať odkaz na obrázkovú mapu cez atribút usemap, ktorého hodnota bude názov mapy so znakom #

• Vytvoriť element map s atribútom name, ktorý bude mať ako hodnotu tento názov mapy

• Do tagu map pridať oblasti, na ktoré sa má kliknutím presmerovať: elementy area

<img src="https://www.eduself.sk/banner.gif" usemap="#moja_mapa" />
<map name="moja_mapa">
  <area shape="rect" coords="0,0,50,40" target="_blank" alt="kvizy 1" title="kvízy z informatiky" href="https://www.eduself.sk/otazky-informatika">
  <area shape="rect" coords="40,0,100,100" target="_blank" alt="kvizy 2" title="kvízy z tvorby softvéru" href="https://www.eduself.sk/otazky-tvorba-softveru">
</map>

Atribútom shape určujeme tvar oblasti, v atribúte coords zadávame súradnice.

K dispozícii máme 4 typy tvarov:

• rect (z angličtiny rectangle) - tvar obdĺžnika, ktorý má 4 súradnice: prvé dve sú pre začiatočný bod, druhé dve pre koncový bod
• circle (z angličtiny circle) - tvar kruhu, ktorý má 3 súradnice: prvé dve sú pre stredný bod kružnice a tretí je polomer okolo tohto bodu
• poly (z angličtiny polygon) - tvar polygónu resp. ľubovoľný tvar charakterizovaný množinou bodov
• default celá oblasť obrázku (resp. zvyšná oblasť, ktorá nebola pokrytá inými tvarmi)

Poznámka ku klikacím mapám v HTML: Klikacie mapy sa dnes používajú len ojedinele, postupne ich nahrádza použitie vektorovej grafiky pomocou SVG.

Obrázky v HTML (tag picture)

Doteraz sme venovali pozornosť HTML tagu img. Na vkladanie obrázkov do HTML dokumentov však vieme použiť aj tag picture. Ide o nový tag, ktorý rozširuje možnosti spravovania obrázkov na webe.
Tag picture je len obaľovací tag, v ktorom môže byť zabalených viacero odkazov na obrázky pomocou tagov source. Pre zachovanie spätnej kompatibility sa medzi zdroje zvykne dávať aj tag img, keby sa stránka zobrazovala na zariadení, ktoré tag picture ešte nepodporuje.

<picture>
  <source srcset="https://www.eduself.sk/banner.png" />
  <source srcset="https://www.eduself.sk/banner.gif" />
  <img src="https://www.eduself.sk/banner.gif" />
</picture>

Dôvod, prečo sa udáva viacero zdrojov je najčastejšie ten, že dnes existuje množstvo zariadení, pomocou ktorých si návštevníci web zobrazujú (počítače, tablety, mobily, rôzne čítačky...). Každé zariadenie môže mať inú veľkosť displeja či používať rôzny pomer strán (na výšku, na šírku). Tento tag slúži na to, aby sa načítal ten obrázok, ktorý je najvhodnejší na základe zariadenia používateľa.
Zariadenie teda číta zoznam zdrojov od prvého po posledný, a načíta prvý, ktorý vyhovuje jeho požiadavkám.

Zvuk na HTML stránke (tag audio)

Na pripojenie zvukového záznamu do HTML stránky vieme použiť tag audio, do ktorého stačí vložiť zoznam súborov s audiozáznamom pomocou tagov source.
Opäť platí, že zariadenie sa pokúsi prehrať prvý súbor, ktorý je podporovaný. Ak nie je možné na zariadení prehrávať zvuk, zobrazí sa textová informácia uvedená na konci.

<audio controls>
  <source src="/uploads/tutorials/hi.ogg" type="audio/ogg">
  <source src="/uploads/tutorials/hi.mp3" type="audio/mpeg">
  Vaše zariadenie nepodporuje prehrávanie zvuku na stránke.
</audio>

<audio controls>
  <source src="/uploads/tutorials/good+day.ogg" type="audio/ogg">
  <source src="/uploads/tutorials/good+day.mp3" type="audio/mpeg">
  Vaše zariadenie nepodporuje prehrávanie zvuku na stránke.
</audio>

Pri vkladaní zvuku na HTML stránku vieme využiť pre tieto dva tagy niekoľko parametrov:

• controls zobrazenie panelu prehrávača

• autoplay automatické spustenie prehrávania

• muted stlmenie hlasitosti

• src cesta k súboru (absolútna alebo relatívna)

• type MIME typ súboru (typ súboru podľa klasifikácie MIME)

Video v HTML (tag video)

Pre vloženie videa na HTML stránku vieme použiť tag video, do ktorého stačí vložiť zoznam video súborov pomocou tagov source.
Opäť platí, že zariadenie sa pokúsi prehrať prvý súbor, ktorý je podporovaný. Ak nie je možné v zariadení prehrávať video súbory, zobrazí sa textová informácia uvedená na konci.

<video width="300" height="150" controls>
  <source src="/uploads/tutorials/video.ogg" type="video/ogg">
  <source src="/uploads/tutorials/video.mp4" type="video/mp4">
  Vaše zariadenie nepodporuje prehrávanie videa na stránke.
</video>

Pri vkladaní videa na HTML stránku vieme využiť pre tieto tagy niekoľko parametrov:

• width šírka videa

• height výška videa

• autoplay automatické spustenie prehrávania

• muted stlmenie hlasitosti

• src cesta k súboru (absolútna alebo relatívna)

• type MIME typ súboru (typ súboru podľa klasifikácie MIME)

Youtube video v HTML (tag iframe)

Špeciálnym typom vkladania videí do HTML dokumentov je linkovanie z externých videoportálov ako sú Youtube či Vimeo.
Tie sa zvyčajne vkladajú pomocou tagu iframe (vnorený rámec). HTML kód pre vloženie videa na stránku je zvyčajne dostupný priamo pod videom. Napr. portál YouTube používa takýto formát:

<iframe 
  width="460" height="315" 
  src="https://www.youtube.com/embed/xrBfGDiUyck"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe><br>

Ako pridať titulky do videa či zvuku na stránke?

Na vkladanie titulkov do videa slúži tag track. Ide o súbory vo formáte WebVTT (s príponou .vtt), v ktorých sa uchovávajú informácie spolu s časovým údajom, kedy sa majú zobrazovať. Rovnako je ich možné použiť aj pre audiozáznamy.

<video width="300" height="170" controls>
  <source src="/uploads/tutorials/video.ogg" type="video/ogg">
  <source src="/uploads/tutorials/video.mp4" type="video/mp4">
  <track default kind="captions" srclang="sk" src="/uploads/tutorials/video_sk.vtt" />
  <track kind="captions" srclang="en" src="/uploads/tutorials/video_en.vtt" />
  Vaše zariadenie nepodporuje prehrávanie videa na stránke.
</video>

K dispozícii je niekoľko atribútov:

• kind: typ dát. Možné hodnoty:

  • captions nadpisy

  • chapters kapitoly

  • descriptions popisy

  • metadata metadáta

  • subtitles titulky

• src: cesta k súboru

• srclang: jazyk

• label: označenie súboru

V rámci tohto tutoriálu sa nebudeme bližšie venovať titulkom k videám. Podrobnejšie informácie o používaní súborov uchovávajúcich časové údaje k médiám nájdete na stránkach mozila.org

Ďalšie vnorené multimediálne objekty (tagy object, embed)

Videá a iný multimediálny obsah je možné vkladať aj pomocou tagov object a embed. Lepšie povedané, tieto tagy slúžia aj na vloženie iných dokumentov, nemusí ísť len o médiá, ale napríklad aj HTML dokument. V minulosti sa takto vkladali napríklad flash či java applety. Tie sa dnes už veľmi nepoužívajú. Pre úplnosť však uvádzame aj tieto tagy, keďže sa s nimi môžeme občas stretnúť.

Tag object je párový.

<object width="50%" height="200px" data="https://www.eduself.sk/"></object>

Tag embed je nepárový.

<embed width="50%" height="200px" src="https://www.eduself.sk/">

Čo je MIME klasifikácia?

MIME: (z angl. Multipurpose Internet Mail Extensions) je zoznam typov súborov, ktoré sa bežne používajú pri online komunikácii. Kategórie MIME značiek sa skladajú z dvoch názvov oddelených lomítkom. Audio súbory majú prvý názov "audio" a za lomítkom je typ audio súboru, napr.: audio/mp3, audio/ogg, audio/mpeg a pod. Táto informácia slúži pre prehliadače, aby vedeli aký kodek majú použiť na spustenie súboru. Viac informácií o MIME nájdete na stránke: zoznam MIME typov (mozilla.org)

Tabuľka odporúčaných audio formátov pre web (MIME)

Tabuľka odporúčaných audio a video formátov pre web

HTML médiá - zhrnutie tutoriálu