10.1. fejezet¶

Iframe-ek¶

Az <iframe>...</iframe> taggel beszúrhatunk a weboldalunkra egy úgynevezett lebegőkeretet (inline frame, röviden iframe). Ezekben a lebegőkeretekben lehetőségünk van megnyitni egy másik weboldalt.

Az <iframe> tag fontosabb attribútumai:

src: a megnyitni kívánt weboldal URL-je
width: a keret szélessége (pixelben)
height: a keret magassága (pixelben).

Példa: Szúrjuk be a TTIK honlapját a weboldalunkra egy 600x600-as iframe-ben!

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Iframe példa</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <iframe src="https://sci.u-szeged.hu/" width="600" height="600"></iframe>
  </body>
</html>

Multimédia elemek¶

A HTML5 szabvány alapértelmezés szerint támogatja a multimédiás tartalmak (hangfájlok, videók) beágyazását a weboldalon belül.

Az <audio>...</audio> taggel hangállományokat helyezhetünk el egy weboldalon. A tagnek adható controls attribútummal vezérlőgombokat adhatunk a beágyazott hangfájlnak (pl. elindítás és hangerő szabályozása gombok).

A <source/> páratlan tag segítségével több alternatív hangállományt is megadhatunk. Ezek közül a böngésző a legelső, általa felismerhetőt fogja beágyazni a weboldalra. A tag két fontos attribútuma:

src: a beágyazni kívánt hangfájl elérési útvonala
type: az állomány MIME-típusa.

Hangállományok esetén a type attribútummal megadott MIME-típus az audio/mpeg, audio/ogg vagy audio/wav értékek valamelyike lehet.

Példa: Hangállomány beágyazása egy weboldalra

<h2>A kedvenc zeném</h2>
<audio controls>
  <source src="powerwolf.mp3" type="audio/mpeg"/>
  <source src="greenday.wav" type="audio/wav"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a hangállományok beágyazását.
</audio>

A kód kimenete

A <video>...</video> tag videóállományok beágyazására szolgál. A controls attribútumot itt is használhatjuk vezérlőgombok megjelenítésére. A width és height attribútumokkal megadható a beágyazott videó szélessége és magassága (pixelben).

Több alternatív videóállomány megadására a korábban tárgyalt <source/> taget használjuk. A tag type attribútumával megadható MIME-típus a video/mp4, video/ogg vagy video/webm értékek valamelyike lehet.

Példa: Videóállomány beágyazása egy weboldalra

<h2>A kedvenc videóm</h2>
<video controls width="360">
  <source src="allstar.mp4" type="video/mp4"/>
  <source src="rickroll.ogg" type="video/ogg"/>
  Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a videóállományok beágyazását.
</video>

A kód kimenete

Canvas¶

A <canvas>...</canvas> tagpár egy téglalap alakú vászon beszúrására szolgál, amelyre JavaScript segítségével rajzokat, animációkat és játékokat készíthetünk. A width és height attribútumokkal szabályozhatjuk a vászon szélességét és magasságát.

Ahhoz, hogy egy vászonra rajzolni tudjunk, szükséges a JavaScript ismerete, ami már túlmutat ennek a kurzusnak a tananyagán (viszont például a Multimédia kurzus tárgyalja a canvas-alapú JavaScriptet).

Példa: Egy egyszerű canvas-es ábra elkészítése

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Canvas példa</title>
    <meta charset="UTF-8"/>
    <style>
     #vaszon { border: 3px solid black; }
    </style>
  </head>
  <body>
    <canvas id="vaszon" width="200" height="200">
      Ez a szöveg akkor jelenik meg, ha a böngésző nem támogatja a canvas taget.
    </canvas>
    <script>
      // Itt adjuk meg a JavaScript kódot, ami a canvas-re rajzol...
      var ctx = document.getElementById("vaszon").getContext("2d");
      ctx.fillStyle = "red";
      ctx.fillRect(20, 20, 95, 95);
      ctx.fillStyle = "blue";
      ctx.fillRect(50, 50, 95, 95);
      ctx.fillStyle = "green";
      ctx.fillRect(80, 80, 95, 95);
    </script>
  </body>
</html>

A kód kimenete

HTML Image Map¶

Az image map (képtérkép) segítségével egyetlen képet több kattintható területre oszthatunk, amelyek különböző interakciókat válthatnak ki, például különböző oldalak vagy hivatkozások megnyitását. Az image map-ek lehetővé teszik, hogy komplex elrendezésű képeink is funkcionálisak legyenek.

Az image map létrehozásához a következő lépéseket kell követnünk: 1. Hozzuk létre az <img> elemet, amelyre az image map-ot alkalmazzuk. 2. Készítsük el a <map> elemet a kattintható területek definiálásához. 3. A <map> elemen belül határozzuk meg a különböző területeket a <area> elemmel.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map Példa</title>
</head>
<body>
    <h2>Képtérkép Példa</h2>
    <img src="https://www.w3schools.com/html/img_splines.jpg" alt="Képtérkép" usemap="#képmap">

    <map name="képmap">
        <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://hu.wikipedia.org/wiki/Sz%C3%A1m%C3%ADt%C3%B3g%C3%A9p">
        <area shape="circle" coords="337,300,44" alt="Phone" href="https://hu.wikipedia.org/wiki/Mobiltelefon">
        <area shape="poly" coords="372,53,432,63,432,125,372,135" alt="Cup" href="https://hu.wikipedia.org/wiki/K%C3%A1v%C3%A9scs%C3%A9sze">
    </map>
</body>
</html>

<img src="..." usemap="#képmap">: Az <img> elem azt a képet tartalmazza, amelyen a képtérkép alkalmazva lesz. A usemap attribútum határozza meg az image map azonosítóját.
<map name="képmap">: A <map> elem a képterületet definiálja, és a name attribútumával azonosítható. Az <img> elem usemap attribútuma hivatkozik erre a névre.
<area shape="..." coords="..." href="...">: Az <area> elemek határozzák meg a különböző kattintható területeket a képen. A shape attribútum meghatározza a terület alakját (rect - téglalap, circle - kör, poly - poligon). A coords attribútum definiálja az alakzat koordinátáit a képen. A href attribútum az URL-t jelöli, amelyre kattintva az adott terület elnavigál.

HTML picture elem¶

A HTML <picture> elem egy erőteljes és rugalmas eszköz, amely lehetőséget biztosít különböző képek betöltésére különböző eszközök és képernyőméretek alapján. A <picture> elem segít abban, hogy a weboldal reszponzív és optimalizált maradjon, mivel csak a legmegfelelőbb képet tölti be a látogató eszközének megfelelően.

A <picture> elemben egy vagy több <source> elem és egy alapértelmezett <img> elem található. A <source> elemek attribútumai határozzák meg, hogy melyik kép jelenjen meg bizonyos feltételek teljesülése esetén.

<picture>
  <source srcset="elso-kep.png" media="(min-width: 800px)">
  <source srcset="masodik-kep.png" media="(min-width: 400px)">
  <img src="alapkep.png" alt="Leírás a képről">
</picture>

Tulajdonságaik és Használatuk * <source> elem: * srcset: Meghatározza a képfájlt, amely betöltődik. * media: Media query alkalmazása, hogy mikor használja a megadott képet. * <img> elem: * src: Az alapértelmezett kép forrása, amely betöltődik, ha egyetlen media query sem teljesül. * alt: Alternatív szöveg, amely megjelenik a kép helyett, ha az nem érhető el.

Utolsó frissítés: 2024-07-22 15:35:59