Úvod do iframe v HTML
Prvky iframe v HTML nejsou nic jiného než vložené rámečky, které se používají jako dokument HTML k přidání dalšího dokumentu HTML. Většinou se používá na webových stránkách nebo v procesech vývoje webových stránek k zahrnutí jiného obsahu prostřednictvím jiného zdroje, jako jsou reklamy na této webové stránce.
Většina webových designérů používá Iframe k prezentaci interaktivních aplikací na webových stránkách nebo na webových stránkách. Je to možné pomocí javaScript nebo pomocí cílového atributu v HTML.
Hlavním účelem Iframe je zobrazit webovou stránku na jiné webové stránce. Vložený rámeček by měl být zobrazen pomocí značky s názvem
- Náš Iframe je také možné určit určitou výšku a šířku ve formátu pixelů takto:
- Ve výše uvedené syntaxi budou všechny věci stejné, navíc můžeme určit výšku a šířku ve formátu pixelů definujících jako
Příklad:
- V níže uvedené syntaxi je uvedena další metoda pro definování výšky a šířky prvku iframe pomocí hodnot prostřednictvím CSS:
- Všechny věci jsou stejné jako výše, pouze se mění specifikace.
Příklad:
- Do prvku iframe bude přidána ještě jedna funkce: můžeme odstranit již definované ohraničení do rámce pomocí vlastnosti border none. Syntaxe je následující:
- S pomocí CSS je také možné dělat s hranicí mnoho věcí, jako je změna velikosti hranice, použití nějaké barvy na hranici, atd.
Iframe lze použít jako cíl odkazu pomocí syntaxe:
- Do výše uvedené syntaxe je src naše normální URL, zde je cílovým atributem odkazu, který bude odkazovat na atribut jména v naší značce iframe.
Příklad:
Atribut značky iframes
Do prvků iframe jsou použity různé značky atributů:
- Src: Tento atribut se používá k vložení souboru, který musí být zahrnut do rámce. Adresa URL určuje cílovou webovou stránku, která se má načíst do prvku iframe.
- Název: Název je atribut, který se používá k přiřazení nějakého identifikačního názvu k rámci. Nejužitečnější je, když vytváříte jeden odkaz pro otevření další webové stránky.
- allowfullscreen: Tento atribut umožňuje zobrazit rámeček do formátu plné šířky. takže musíme tuto hodnotu nastavit na true
- Frameborder: Toto je užitečný atribut, který vám umožní ukázat ohraničení nebo nezobrazit ohraničení rámečku. Hodnota 1 je ukázat ohraničení a 0 nezobrazovat ohraničení rámečku.
- Marginwidth: Umožňuje definovat mezeru mezi levou a pravou stranou rámu
- Marginheight: Umožňuje definovat mezeru mezi horní a dolní částí rámu.
- Posouvání: Tyto atributy slouží k ovládání toho, zda se bude posuvný rámeček zobrazovat v rámečku. zahrnuty jsou hodnoty „ano“ nebo „ne“ nebo „auto“.
- Výška: Slouží k definování výšky rámu. Počasí v% nebo v pixelech
- Šířka: Sloužila k definování šířky rámu. Počasí v% nebo v pixelech
- Longdesc: Pomocí tohoto atributu můžete propojit další stránku, která má dlouhý popis obsahu vašeho rámečku.
Příklady prvků iframe v HTML
Zde je několik příkladů prvků iframe v HTML, které jsou vysvětleny níže:
Příklad č. 1
Podívejme se na jeden příklad, ve kterém si ukážeme, jak vytvořit iframe se specifickou výškou a šířkou.
Kód:
Ukázka HTML prvků iframe
Zde zobrazujeme příklad prvku iframe, který obsahuje specifc výšku a šířku ve formátu pixelů
Výstup:
Příklad č. 2
Podívejme se na další příklad, ve kterém si ukážeme, jak vytvořit iframe se specifickou výškou a šířkou. V tomto příkladu však určujeme výšku a šířku pomocí CSS. Zde vidíme, že posuvník je upravován podle velikosti obsahu.
Kód:
Ukázka HTML prvků iframe
Zde zobrazujeme příklad prvku iframe, který obsahuje specifc výšku a šířku ve formátu pixelů
Výstup:
Příklad č. 3
Zde uvažujeme jeden příklad, do kterého přidáme ohraničení do prvku iframe přidáním dalších vlastností CSS k zobrazení změny velikosti hranice, změny barvy okraje atd. Takže můžeme přidat co nejvíce styl našeho iframe.
Kód:
Ukázka HTML prvků iframe
Zde zobrazujeme příklad prvku iframe, který obsahuje hranici s některými dalšími vlastnostmi CSS
Výstup:
Příklad č. 4
Podívejme se na další příklad, ve kterém se chystáme ukázat, jak cílový atribut otevírá odkaz na webovou stránku pomocí prvku iframe.
Kód:
Ukázkový cíl iframe pro odkaz
EDUCBA
Když se cíl odkazu shoduje s názvem prvku iframe, odkaz se otevře v prvku iframe.
Výstup:
Cílový výstup:
Jak je uvedeno výše Příklad jsme schopni kliknout na cílový odkaz EDUCBA, takže se otevře následující webová stránka uvedená níže.
Závěr
Ze všech výše uvedených informací došlo k závěru, že iframe je vložený rámec, který obsahuje další dokument HTML do sebe. Považoval se za nejvýkonnější prvek HTML pro účely návrhu webových stránek. S jeho pomocí můžete také přidat nějaký obsah z jiného zdroje. Používá různé druhy HTML atributů, jako jsou globální atributy, atributy událostí, některé související stránky atd.
Doporučené články
Toto je průvodce iframe v HTML. Zde diskutujeme syntaxi, atribut značky iframe v HTML spolu s různými příklady a implementací kódu. Další informace naleznete také v následujících článcích -
- Příkazy pro selen
- Rámce HTML
- HTML textový odkaz
- Vytvořit tabulky v HTML