Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Beágyazott elemek /<iframe> – Beágyazott keret

Beágyazott elemek (II. rész)

<iframe> – Beágyazott keret

Mire használjuk?

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:

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
Interaktív 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.

Vissza a tartalomjegyzékhez

Beágyazott keret létrehozása az srcdoc paraméter megadásával

Példa
Interaktív 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:

Példa - SVG állomány beágyazása

Interaktív példa
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.

Az SVG állományt tetszőleges méretben felnagyíthatjuk anélkül, hogy a minősége romlana, nem mint a raszergrafikus állományok esetén.

Flash lejátszó letöltése

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.

Egy SVG alapú animációt látunk, amelyben egy háló pontjait megragadhatjuk, és ettől a teljes háló pontjai elmozdulnak.

Flash lejátszó letöltése

SVG animáció

Példa - Youtube videó beágyazása

Interaktív példa
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:

A <param> tag paraméterei:

Példa
Interaktív 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.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

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.