Como estilizar página externa para incorporar na página principal
O que é um <iframe>?
O elemento <iframe> incorpora um objeto dentro de sua página. Pode ser outra página ou um vídeo. Como exemplo podemos citar o YouTube que já fornece o código de incorporação pronto.
Nesta mesma página estamos usando quatro páginas externas: cabeçalho, lateral esquerda, lateral direita e rodapé. Quando eu acrescento ou retiro alguma coisa da página nativa ela será icorporada atualizada.
A sintaxe do iframe html
Basta utilizar a tag <iframe> na sua página <HTML>
Veja o exemplo abaixo:
Para incorporar a página acima utilizamos o seguinte código:
<iframe src="https://www.gospellife.com.br"></iframe>
A maioria dos navegadores suportam o elemento <iframe>.
Versões mais antigas encontram dificuldades.
Acrescente uma mensagem para o usuário caso o navegador que ele estiver usando não suporte esse elemento. Por exemplo: "Seu navegador não encontra suporte para este recurso"
Para incluir esta mensagem basta utilizar o código abaxo
<iframe src="https://www.gospellife.com.br">Seu navegador não encontra suporte para este recurso</iframe>
Atributos
O <iframe> suporta bem os abritutos globais e os atributos de eventos.
Alguns atributos não são mais suportados
Veja alguns deles:
O atributo SRC
Na figura inicial utilizamos o atributo para incluir a página incial do Ministério Vida Evangélica
Atributo de largura e altura
Podemos utilizar o CSS para modificar as medidas do <iframe>:
As tags utilizadas são: Para largura <width> e para altura <height>
Vamos aproveitar o iframe do início e alterar suas dimesões
Na primeira figura utilizamos uma cópia de tela que posui a largura de 1366px e altura de 768px. Nós alteramos a largura para 640px de largura e altura para 366px.
Na segunda figura não especificamos nenhuma media. O navegador assume largura e altura mínimas padrão.
Vamos atribuir medidas iguais a primeira figura e observar o resultado.O atributo allowfullscreen
Este atributo permite a utilização de tela cheia como é o caso do youtube. Sem esse atributo o usuário não consegue alterar para tela cheia.
O atributo frame border
Esse atributo pode ser definido como true se o quadro é permitido para ser colocado em modo de tela cheia. Se isto não estiver definido, o elemento não pode ser colocado em modo de tela cheia.
Para mais informações consulte a documentação da w3schools e da developer.mozilla.org