Nauč sa HTML od základov – 3. diel: Obrázky a médiá v HTML

V tejto časti sa naučíme, ako do webovej stránky pridať obrázky a ďalšie médiá, ako sú videá a zvukové súbory. Tieto prvky sú nevyhnutné pre vytváranie vizuálne atraktívnych a multimediálnych webových stránok. Pridanie obrázkov a médií je jednoduché, ak viete používať správne HTML značky a atribúty.

Pridávanie obrázkov v HTML

Na pridanie obrázka na webovú stránku používame značku <img>. Táto značka je samo uzatváracia, čo znamená, že nevyžaduje koncovú značku. Obrázky môžu pochádzať z rôznych zdrojov, vrátane súborov uložených na serveri alebo z externých URL adries.

Základná syntax:

<img src="obrazok.jpg" alt="Popis obrázku" width="500" height="300">

• src (source): Toto je cesta k obrázku. Môže to byť buď relatívna cesta (ak je obrázok uložený na vašom serveri) alebo absolútna URL adresa (ak obrázok pochádza z iného webu).
• alt (alternatívny text): Tento text sa zobrazí, ak sa obrázok nepodarí načítať. Tiež je dôležitý pre prístupnosť, pretože pomáha čítačkám obrazovky prečítať alternatívny popis obrázka pre používateľov so zrakovým postihnutím.
• width a height: Určujú šírku a výšku obrázka v pixeloch. Je dôležité zvoliť správne rozmery, aby obrázok na stránke vyzeral správne.

Príklad:

<img src="https://www.example.com/images/moj-obrazok.jpg" alt="Moja fotka" width="400" height="300">

Tento obrázok je načítaný z externej URL a jeho rozmery sú nastavené na 400×300 pixelov.

Tipy:

• Optimalizujte obrázky: Obrázky by mali byť optimalizované pre web, aby sa rýchlo načítali. Používajte vhodné formáty, ako sú JPEG pre fotografie a PNG pre grafiku alebo obrázky s transparentným pozadím.
• Zabezpečenie prístupnosti: Vždy používajte atribút alt, aby ste zabezpečili, že vaša stránka bude prístupná aj používateľom, ktorí nemôžu vidieť obrázky.

Vkladanie videí do HTML

Okrem obrázkov môžete na webovú stránku vložiť aj videá pomocou značky <video>. Video môže byť uložené na vašom serveri alebo vložené pomocou externých služieb, ako je YouTube alebo Vimeo.

Základná syntax:

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Váš prehliadač nepodporuje video tag.
</video>

• controls: Tento atribút pridáva základné ovládacie prvky pre prehrávanie, ako sú tlačidlá na spustenie, pozastavenie a ovládanie hlasitosti.
• width: Určuje šírku videa.
• <source>: Definuje cestu k video súboru a jeho formát. V tomto prípade je video v MP4 formáte, čo je jeden z najbežnejších formátov pre web.

Príklad:

<video controls width="600">
  <source src="https://www.example.com/video/moje-video.mp4" type="video/mp4">
  Váš prehliadač nepodporuje video tag.
</video>

Toto video bude mať šírku 600 pixelov a obsahuje ovládacie prvky na prehrávanie.

Tipy:

• Podporované formáty: Pre web je najlepšie používať formát MP4, ktorý podporujú všetky moderné prehliadače.
• Ovládacie prvky: Atribút controls umožňuje používateľom jednoducho prehrávať alebo pozastaviť video bez potreby pridania vlastných ovládacích prvkov.

Pridávanie zvukových súborov

Ak chcete na stránku pridať zvuk, môžete použiť značku <audio>. Funguje podobne ako <video> a tiež obsahuje atribút controls pre prehrávanie zvuku.

Základná syntax:

<audio controls>
  <source src="zvuk.mp3" type="audio/mpeg">
  Váš prehliadač nepodporuje audio tag.
</audio>

Príklad:

<audio controls>
  <source src="https://www.example.com/audio/moj-zvuk.mp3" type="audio/mpeg">
  Váš prehliadač nepodporuje prehrávanie zvukových súborov.
</audio>

Zvukové súbory by mali byť vo formáte MP3, čo je najbežnejší a najkompatibilnejší formát pre prehrávanie na webe.

Vkladanie YouTube videí

Ak nechcete ukladať video priamo na svoj server, môžete ho jednoducho vložiť z platformy YouTube. Na to použijete značku <iframe>, ktorá umožňuje vložiť video pomocou externej URL adresy.

Príklad:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

• src: Odkaz na YouTube video. Nahradíte videoID ID konkrétneho videa z URL adresy YouTube.
• allowfullscreen: Umožňuje používateľovi rozšíriť video na celú obrazovku.

Úloha pre vás

Na základe toho, čo ste sa naučili v tomto dieli, vytvorte HTML stránku, ktorá bude obsahovať nasledujúce prvky:

• Obrázok s alternatívnym textom a nastavenými rozmermi.
• Vložené video s ovládacími prvkami a pridanou šírkou.
• Zvukový súbor s možnosťou prehrávania.
• Vložené video z YouTube.

Príklad:

<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="UTF-8">
  <title>Médiá na mojej stránke</title>
</head>
<body>

  <h1>Médiá na mojej stránke</h1>

  <h2>Obrázok</h2>
  <img src="https://www.example.com/images/moja-fotka.jpg" alt="Moja fotka" width="400">

  <h2>Video</h2>
  <video controls width="600">
    <source src="https://www.example.com/video/moje-video.mp4" type="video/mp4">
    Váš prehliadač nepodporuje video tag.
  </video>

  <h2>Zvuk</h2>
  <audio controls>
    <source src="https://www.example.com/audio/moj-zvuk.mp3" type="audio/mpeg">
    Váš prehliadač nepodporuje prehrávanie zvukových súborov.
  </audio>

  <h2>Video z YouTube</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/videoID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</body>
</html>

Záver 3. časti

V tejto časti sme sa naučili, ako do HTML dokumentov pridávať obrázky, videá a zvukové súbory. Obrázky a multimédiá sú dôležitou súčasťou webového obsahu, ktorá môže stránke pridať vizuálnu a funkčnú hodnotu. V ďalšej časti sa budeme venovať odkazom a vytváraniu navigácie na stránkach.

Pokračujte v seriáli:

• 4. diel: Odkazy a navigácia v HTML.

Tým, že ste sa naučili pridávať médiá, získali ste ďalší základný nástroj pre tvorbu webových stránok. Experimentujte s rôznymi formátmi a naučte sa, ako môžete obohatiť svoje weby vizuálne príťažlivými a interaktívnymi prvkami.