HTML: Incorporar Páginas Web

Introdução

A tag <iframe> é utilizada para embutir uma página web dentro de outra página web. Neste laboratório, você aprenderá como usar a tag <iframe> para exibir outra página web dentro da sua página web atual.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionando a tag <iframe> ao seu arquivo HTML

Para adicionar um <iframe> ao seu arquivo HTML, você precisa usar as tags de abertura e fechamento <iframe> e incluir o atributo src, que especifica a URL da página web a ser exibida. Aqui está um exemplo de uma tag <iframe>:

<iframe src="https://www.example.com"></iframe>

Definindo a Altura e Largura do <iframe>

Você pode usar os atributos height (altura) e width (largura) para ajustar o tamanho do <iframe> de acordo com suas necessidades. Os atributos height e width aceitam valores em pixels, porcentagem ou em. Aqui está um exemplo:

<iframe src="https://www.example.com" height="500" width="500"></iframe>

Controlando as Funcionalidades de Exibição com os Atributos sandbox e allow

Você pode usar os atributos sandbox (sandbox) e allow (permitir) para controlar várias funcionalidades do <iframe>, como permitir a exibição em tela cheia, habilitar a execução de scripts dentro do <iframe>. Aqui está um exemplo:

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

Usando Conteúdo Alternativo

É recomendado que as tags <iframe> sejam usadas com um conteúdo alternativo (alternativo) a ser exibido caso o navegador não suporte inline frames (frames embutidos). Você pode adicionar o texto alternativo entre as tags de abertura e fechamento <iframe>, que será exibido se a tag <iframe> não for suportada. Aqui está um exemplo:

<iframe src="https://www.example.com" height="500" width="500"
  >Seu navegador não suporta inline frames.</iframe
>

Resumo

Parabéns! Você aprendeu como usar a tag <iframe> para exibir outra página web dentro da sua página web atual. Lembre-se de definir o atributo src para a URL da página web que você deseja exibir e usar os atributos height (altura) e width (largura) para ajustar a exibição de acordo com suas necessidades. Você também pode usar os atributos sandbox e allow para controlar várias funcionalidades do <iframe>. Além disso, certifique-se de incluir conteúdo alternativo para navegadores que não suportam a tag <iframe>.