Bevezetés az iframe-be HTML-ben

A HTML iframe-jei nem más, mint a beépített keretek, amelyeket HTML-dokumentumként használnak egy újabb HTML-dokumentum hozzáadására. Leginkább a weboldalakban vagy a webfejlesztési folyamatokban használják más tartalmak beillesztésére más forrásból, például az adott weboldalon található hirdetések révén.

A legtöbb webdesigner az Iframe-t használja interaktív alkalmazások bemutatására a weboldalon vagy a weblapokon. JavaScript használatával vagy a cél attribútum HTML-ben történő felhasználásával tette lehetővé.

Az Iframe fő célja egy weboldal megjelenítése egy másik weboldalon belül. A beépített keretet úgynevezett címkével kell megjeleníteni

  • Az is lehetséges, hogy az Iframe-nek bizonyos meghatározott magasságot és szélességet adjunk meg pixel formátumban, az alábbiak szerint:
  • A fenti szintaxisban minden dolog azonos lesz, emellett meghatározhatjuk a magasságot és szélességet pixel formátumban,

Példa:

  • Az alábbiakban bemutatjuk még egy módszert az iframe magasságának és szélességének meghatározására CSS-en keresztüli értékek felhasználásával:
  • Minden dolog ugyanaz, mint a fentiekben, csak az értékek meghatározása során változtat.

Példa:

  • Még egy szolgáltatás hozzáadódik az iframe-hez, azaz a határok nélküli tulajdonság használatával eltávolíthatjuk a már meghatározott határokat a keretből. Ennek szintaxisa a következő:
  • A CSS segítségével sokféle dolgot meg lehet csinálni a szegéllyel, például megváltoztathatja a szegély méretét, alkalmazhat valamilyen színt a szegélyre stb.

Az iframe felhasználható hivatkozás célként a szintaxis használatával:

  • A fenti szintaxisba az src a szokásos URL, itt a link cél attribútuma, amely hivatkozási név attribútumra hivatkozik iframe címkénkben.

Példa:

Iframes Tag Attribútum

Az Iframe-kben különböző attribútumcímkék használhatók, amelyek a következők:

  • Src: Ez az attribútum a keretbe beillesztendő fájl beszúrására szolgál. Az URL megadja az iframe keretbe betöltendő céloldalt.
  • Név: A név egy olyan attribútum, amelyet valamilyen azonosító név megadására használnak a kerethez. A leghasznosabb abban az esetben, ha egy linket hoz létre egy másik weboldal megnyitásához.
  • allowfullscreen: Ez az attribútum lehetővé teszi, hogy a keretet teljes szélességű formátumban jelenítse meg. tehát ezt a funkciót valódi értékre kell állítani
  • Keretkeret: Ez egy hasznos attribútum, amely lehetővé teszi, hogy megmutatja a szegélyt, vagy nem jelenítse meg a szegélyt a kerethez. Az 1. érték a 0 és a 0 szegély megjelenítését jelenti, hogy a keret ne jelenjen meg.
  • Margószélesség: Lehetővé teszi a tér meghatározását a keret bal és jobb oldala között
  • Marginheight: Lehetővé teszi a tér meghatározását a keret felső és alsó része között.
  • Görgetés: Ezek az attribútumok annak ellenőrzésére szolgálnak, hogy a görgetősáv megjelenik-e a keretben, vagy sem. a benne szereplő értékek „igen” vagy „nem” vagy „automatikus”.
  • Magasság: A keret magasságát határozta meg. Időjárás% -ban vagy pixelben
  • Szélesség: A keret szélességének meghatározására szolgál. Időjárás% -ban vagy pixelben
  • Longdesc: Ennek az attribútumnak a segítségével összekapcsolhat egy oldalt egy oldallal, amely a keret tartalmának hosszú leírását tartalmazza.

Példák iframe-ekre a HTML-ben

Íme néhány példa a HTML iframe-eire, amelyeket az alábbiakban ismertetünk:

1. példa

Nézzük meg egy példát, amelyben megmutatjuk, hogyan lehet létrehozni egy adott magasságú és szélességű iframe-t.

Kód:

HTML Iframes Demo


Itt mutatunk példát az Iframe-re, amely tartalmazza a megadott magasságot és szélességet pixel formátumban

Kimenet:

2. példa

Fontoljuk meg egy másik példát, amelyben megmutatjuk, hogyan hozzunk létre egy meghatározott magasságú és szélességű iframe-t. Ebben a példában azonban a CSS-en keresztül meghatározzuk a magasságot és a szélességet. Itt láthatjuk, hogy a görgetősáv a tartalom méretéhez igazodik.

Kód:

HTML Iframes Demo


Itt mutatunk példát az Iframe-re, amely tartalmazza a megadott magasságot és szélességet pixel formátumban

Kimenet:

3. példa

Itt egy olyan példát mérlegelünk, amelybe az iframe-hez keretet adunk hozzá, hozzáadva néhány további CSS-tulajdonságot a szegély méretének megváltozására, a szegély színének megváltozására stb., Tehát annyi stílus az iframe-hez.

Kód:

HTML Iframes Demo


Itt példákat mutatunk az Iframe-re, amely néhány további CSS-tulajdonsággal határol

Kimenet:

4. példa

Fontoljuk meg egy másik példát, amelyben megmutatjuk, hogy a cél attribútum hogyan nyithat meg egy weboldal linkjét iframe segítségével.

Kód:

Iframe Demo-cél egy linkre


EDUCBA

Ha egy link célja megegyezik egy iframe nevével, akkor a link megnyílik az iframe-ben.

Kimenet:

Tervszerű termelés:

A fenti példában látható módon kattinthatunk az EDUCBA cél linkre, így megnyílik a következő, alább látható weboldal.

Következtetés

A fenti információk alapján arra a következtetésre jutott, hogy az iframe egy inline keret, amely magában foglal egy másik HTML dokumentumot. Ez a webes tervezés szempontjából a legerősebb HTML elem. Segítségével más forrásból is hozzáadhat tartalmat. Különböző típusú HTML attribútumokat használ, mint például a globális attribútumok, az esemény attribútumai, néhány kapcsolódó oldal stb.

Ajánlott cikkek

Ez egy útmutató az Iframes-hez HTML-ben. Itt tárgyaljuk az iframe-ek szintaxisát, tag-attribútumát HTML-ben, a különféle példákkal és a kód megvalósításával kapcsolatban. A következő cikkeket is megnézheti további információkért -

  1. Szelén parancsok
  2. HTML keretek
  3. HTML szöveges link
  4. Készítsen táblázatokat HTML-ben

Kategória:

Webfejlesztő eszközök