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.
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ť:
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:
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
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>
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é :)
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 :)
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:
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.
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.
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)
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)
Š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>
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
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/">
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)
Formát súboru | MIME typ |
---|---|
MP3 | audio/mpeg |
OGG | audio/ogg |
WAV | audio/wav |
Tabuľka odporúčaných audio a video formátov pre web
Formát súboru | MIME typ |
---|---|
MP4 | video/mp4 |
WEBM | video/webm |
OGG | video/ogg |
V tejto kapitole HTML tutoriálu zameraného na médiá a multimédiá sme sa naučili:
Ako vkladať obrázky do HTML pomocou tagu img
Ako vieme štýlovať obrázky na webe pomocou CSS a atribútu style
Ako používať v HTML obrázky kombinácii s klikacou mapou map
Vkladanie obrázkov na web pomocou tagu picture
Ako vložiť do HTML stránky hudbu či video pomocou tagov audio a video
Ako vložiť do HTML stránky video z portálov typu youtube cez iframe
Aké poznáme typy multimediálnych súborov a ich klasifikáciu podľa MIME