Introdução aos iframes em HTML

Iframes em HTML nada mais são do que quadros embutidos que são usados ​​como um documento HTML para adicionar outro documento HTML. É usado principalmente em páginas da web ou processos de desenvolvimento da web para incluir algum outro conteúdo através de outra fonte, como anúncios nessa página da web.

A maioria dos web designers usa o Iframe para apresentar aplicativos interativos no site ou em páginas da web. Isso é possível usando javaScript ou o atributo target em HTML.

O principal objetivo do Iframe é exibir uma página da web dentro de outra página da web. O quadro embutido deve ser exibido usando uma tag chamada

  • Também é possível atribuir altura e largura específicas ao nosso Iframe no formato de pixels da seguinte maneira:
  • Na sintaxe acima, tudo seguirá o mesmo, além disso, podemos especificar altura e largura no formato de pixels, definindo como

Exemplo:

  • Mais um método para definir altura e largura para o iframe usando valores por meio de CSS é mostrado na sintaxe abaixo:
  • Todas as coisas são as mesmas que acima, apenas alterando os valores especificados.

Exemplo:

  • Mais um recurso é adicionado ao iframe: podemos remover as bordas já definidas do quadro usando a propriedade border none. A sintaxe para isso é a seguinte:
  • Com a ajuda do CSS, também é possível fazer muitas coisas com a borda, como alterar o tamanho da borda, aplicar alguma cor à borda, etc.

O iframe pode ser usado como destino para um link usando a sintaxe:

  • Na sintaxe acima, src é o nosso URL normal, aqui o atributo de destino do link vai se referir ao atributo de nome em nossa tag iframe.

Exemplo:

Atributo de tag Iframes

Existem tags de atributo diferentes que são usadas nos Iframes:

  • Src: esse atributo é usado para inserir arquivos que precisam ser incluídos no quadro. URL especifica a página da web de destino a ser carregada em um iframe.
  • Nome: Nome é um atributo usado para dar algum nome de identificação ao quadro. É mais útil onde você está criando um link para abrir outra página da web.
  • allowfullscreen: esse atributo permite exibir seu quadro no formato de largura total. então temos que definir o valor true para que aconteça essa função
  • Borda do quadro: esse é um atributo útil que permite mostrar borda ou não para o quadro. O valor 1 é mostrar a borda e 0 para não mostrar a borda do quadro.
  • Largura da margem: permite definir o espaço entre os lados esquerdo e direito do quadro
  • Altura da margem: permite definir o espaço entre a parte superior e inferior do quadro.
  • Rolagem: esses atributos são usados ​​para controlar se a barra de rolagem será exibida ou não no quadro. os valores incluídos são 'yes' ou 'no' ou 'auto'.
  • Altura: usado para definir a altura do quadro. Clima em% ou em pixels
  • Largura: usado para definir a largura do quadro. Clima em% ou em pixels
  • Longdesc: Com a ajuda desse atributo, você poderá vincular outra página a uma descrição longa do conteúdo do seu quadro.

Exemplos de iframes em HTML

Aqui estão alguns exemplos de iframes em HTML, que são explicados abaixo:

Exemplo 1

Vamos considerar um exemplo no qual mostraremos como criar um iframe com uma altura e largura específicas.

Código:

Demonstração de iframes em HTML


Aqui estamos mostrando um exemplo de Iframe que contém Altura e largura específicas no formato de pixels

Resultado:

Exemplo 2

Vamos considerar outro exemplo no qual mostraremos como criar um iframe com uma altura e largura específicas. Mas neste exemplo, estamos especificando altura e largura através do CSS. Aqui podemos ver a barra de rolagem sendo ajustada conforme o tamanho do conteúdo.

Código:

Demonstração de iframes em HTML


Aqui estamos mostrando um exemplo de Iframe que contém Altura e largura específicas no formato de pixels

Resultado:

Exemplo 3

Aqui estamos considerando um exemplo no qual adicionaremos uma borda ao iframe, adicionando algumas propriedades CSS extras para mostrar uma alteração no tamanho da borda, alteração na cor da borda, etc. Para que possamos adicionar o máximo estilo ao nosso iframe.

Código:

Demonstração de iframes em HTML


Aqui estamos mostrando um exemplo de Iframe que contém borda com algumas propriedades CSS adicionais

Resultado:

Exemplo 4

Vamos considerar outro exemplo no qual vamos mostrar como o atributo target abre um link de uma página da Web usando um iframe.

Código:

Demo-iframe alvo para um link


EDUCBA

Quando o destino de um link corresponde ao nome de um iframe, o link será aberto no iframe.

Resultado:

Saída alvo:

Como mostra o exemplo acima, podemos clicar no link de destino EDUCBA para abrir a próxima página da web mostrada abaixo.

Conclusão

De todas as informações acima, concluiu que o iframe é um quadro embutido que inclui outro documento HTML. É considerado o elemento HTML mais poderoso para fins de design da web. Com a ajuda, você também pode adicionar conteúdo de outra fonte. Ele usa diferentes tipos de atributos HTML, como Atributos Globais, Atributos de Eventos, algumas páginas relacionadas etc.

Artigos recomendados

Este é um guia para os Iframes em HTML. Aqui discutimos a sintaxe, o atributo tag dos iframes em HTML, juntamente com os vários exemplos e implementação de código. Você também pode consultar os seguintes artigos para saber mais -

  1. Comandos Selênio
  2. Quadros HTML
  3. Link de texto HTML
  4. Criar tabelas em HTML

Categoria:

Ferramentas de Desenvolvimento Web