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-jewidth
: 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!
1 2 3 4 5 6 7 8 9 10 |
|
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 útvonalatype
: 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
1 2 3 4 5 6 |
|
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
1 2 3 4 5 6 |
|
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
<img src="..." usemap="#képmap">
: Az<img>
elem azt a képet tartalmazza, amelyen a képtérkép alkalmazva lesz. Ausemap
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 aname
attribútumával azonosítható. Az<img>
elemusemap
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. Ashape
attribútum meghatározza a terület alakját (rect
- téglalap,circle
- kör,poly
- poligon). Acoords
attribútum definiálja az alakzat koordinátáit a képen. Ahref
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.
1 2 3 4 5 |
|
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.