A beágyazott keret nem más, mint egy adott méretű terület, amelyben egy külső weblapot tudunk megjeleníteni.
A tag paraméterei:
globális attribútumok
src: a megjelenítendő állomány webcíme.
width: a beágyazott keret vízszintes mérete.
height: a beágyazott keret függőleges mérete.
srcdoc: a keretben megjelenő tartalom közvetlen megadása HTML kódokkal.
name: nevet adhatunk a beágyazott keretnek, hogy hivatkozhassunk rá.
sandbox: az iframe-be betöltött dokumentumra vonatkozó megszorításokat ill. engedélyeket lehet megadni benne. Például: szkriptek futtatása (pl. JavaScript), tartalom betöltése az oldalról ami a taget tartalmazza, űrlapok elküldése, és így tovább.
seamless: új logikai típusú attribútum, melynek beállításával elérhetjük, hogy a keret tartalma úgy jelenjen meg, mintha a szülő dokumentum közvetlen része lenne. (Nem látszik szegély a beágyazott keret körül.
allowfullscreen: logikai attribútum, mellyel megadhatjuk, hogy a beágyazott oldal megjelenhet-e teljes képernyőn.
Megjegyzés
Az egyes böngészők egyedi attribútumokat is bevezettek, de ezekkel tananyagunban nem foglalkozunk, a szabványban szereplő paraméterekre koncentrálunk.
Beágyazott keret létrehozása az src paraméter megadásával
Példa
Magyarázat
Ebben a példában egy 400x400-as beágyazott keretet hoztunk létre, amelybe a wikipedia oldalát töltöttük be.
Beágyazott keret létrehozása az srcdoc paraméter megadásával
Példa
Magyarázat
Ebben a példában egy 400x400-as beágyazott keretet hoztunk létre, amelynek a tartalmát nem az src paraméterrel adtuk meg, hanem az srcdoc paraméterrel. Láthatjuk, hogy ebben a paraméterben nem egy webcímet, hanem magát a HTML kódot kell elhelyezni.
<embed> – külső tartalom beágyazása
Mire használjuk?
Az embed külső tartalom beágyazására szolgáló tag. Ez lehet akár Flash vagy más (interaktív) alkalmazás (tipikusan nem HTML-állomány).
A tag paraméterei:
globális attribútumok
src: a beágyazandó tartalom webcíme.
type: a beágyazandó tartalom mime-típusa.
width: a beágyazandó tartalom szélessége.
height: a beágyazandó tartalom magassága
Példa - SVG állomány beágyazása
Magyarázat
Ebben a példában a HTML5 logóját ágyaztuk be, amely SVG formátumú. Megadtuk a kívánt szélességet (width) és típusát (image/svg+xml) is.
SVG állomány nagyítása
Az SVG-eben rejlő lehetőségeket akár animáció készítésére is ki lehet használni.
SVG animáció
Példa - Youtube videó beágyazása
Magyarázat
Ebben a példában egy Youtube videót ágyaztunk be az <embed> tag segítségével. Megadtuk a videó szélességét és magasságát, valamit a mime-típusát is.
<object> és <param>– Objektum beágyazására
Mire használjuk?
Külső erőforrás beillesztésére, amely lehet egy kép, egy beágyazott böngészési környezet, vagy egy olyan erőforrás, amelynek lejátszásához valamilyen plug-in szükséges. Ezen objektumnak a <param> tag használatával tudunk paramétert adni.
Az <object> tag paraméterei:
globális attribútumok
data: az objektum webcíme.
type: az objektum mime-típusa.
typemustmatch:logikai attribútum. Ha szerepeltetjük, akkor az objektum csak akkor fog funkcionálni, ha a type paraméterben megadott mime típus ténylegesen megegyezik a letöltött elem tartalom típusával.
name: az objektumnak egyedi nevet adhatunk.
usemap:az objektumhoz tartozhat képtérkép, ennek az azonosítóját tudjuk itt megadni.
form: ha az objektum egy űrlaphoz tartozik, akkor az űrlap nevét kell ide írni.
width:az objektum szélessége.
height: az objektum magassága.
A <param> tag paraméterei:
globális attribútumok
name: a paraméter neve.
value: a paraméter értéke.
Példa
Magyarázat
Ebben az példában az <object> taggel illesztettünk be egy Youtube-videót, amelynek a <param> taggel adtuk meg a paramétereit.
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg. A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.
