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 -
- Szelén parancsok
- HTML keretek
- HTML szöveges link
- Készítsen táblázatokat HTML-ben