Um iframe HTML é usado para exibir uma página da web dentro de uma página da web.

 

Sintaxe de iframe HTML
A <iframe>tag HTML especifica um quadro embutido.

 

Um quadro embutido é usado para incorporar outro documento no documento HTML atual.

 

Sintaxe

<iframe src=”url” title=”description”>

Dica: É uma boa prática sempre incluir um titleatributo para o <iframe>. Isso é usado pelos leitores de tela para ler qual é o conteúdo do iframe.

 

Iframe – definir altura e largura
Use os atributos height e width para especificar o tamanho do iframe.

A altura e a largura são especificadas em pixels por padrão:

Exemplo
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

 

Vou   abrir minha página https://www.joemaster.com.br em uma iframe, veja como fica:

Ou você pode adicionar o style atributo e usar o CSS height e as width propriedades:

 

Exemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

 

 

Assim você define o tamanho do iframe.

 

Veja mais estilos

Iframe – Remover a borda
Por padrão, um iframe tem uma borda ao redor.

Para remover a borda, adicione o style atributo e use a border propriedade CSS :

 

Exemplo
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

 

e pode mudar a cor e a borda.

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

 

*caso não apareça conforme falei, é por causa das minhas configurações do css do site, ai abra abaixo para testar

 

<iframe title="Iframe Example" src="https://www.joemaster.com.br" width="300" height="200"></iframe><hr>
<iframe style="height: 200px; width: 300px;" title="Joel" src="https://www.joemaster.com.br"></iframe><hr>
<iframe style="border: none; height: 200px; width: 300px;" title="Joel" src="https://www.joemaster.com.br"></iframe><hr>
<iframe style="border: 2px solid red; height: 200px; width: 300px;" title="Joel" src="https://www.joemaster.com.br"></iframe>

 

Iframe – destino para um link

Um iframe pode ser usado como o quadro de destino para um link.

O target atributo do link deve se referir ao name atributo do iframe:

 

Exemplo

about:blank = não abre nada, só em branco

<iframe src="about:blank" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.joemaster.com.br"  target="iframe_a">Abrir na iframe</a></p>

<iframe src="about:blank" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.joemaster.com.br"  target="iframe_a">Abrir na iframe</a></p>

 

Resumo do capítulo

A <iframe>tag HTML especifica um quadro embutido
O src atributo define o URL da página a incorporar
Sempre inclua um title atributo (para leitores de tela)
Os atributos height e width especificam o tamanho do iframe
Use border:none; para remover a borda ao redor do iframe

Categoria: curso html | Tags: aprenda, códigos, editores, html, html5, introdução, tags, tutorial | Postado por joemaster em 01/jul/2020

Próximo >> JavaScript em HTML