HTML5, elementos incorporados - parte 2

Muitas vezes em nossos documentos HTML Devemos enriquecer o conteúdo e não se trata mais de adicionar uma imagem, mas também de fazê-lo no nível da mídia em geral, para isso devemos incluir conteúdos de outras páginas, incluir vídeos, etc. Para fazer isso, veremos como incorporar outros tipos de elementos além de imagens.
Para incluir conteúdo HTML, usaremos o elemento iframe, Este elemento nos permite incluir uma página diferente da atual em nosso documento, os atributos que possui são os seguintes:

• src
• srcdoc
• inhame
• largura
• altura
• caixa de areia
• desatado

Vejamos um exemplo de nível de código de como implementar um iframe em um documento HTML5:

 Exemplo

Frutas que eu gosto
Atividades que eu gosto

Neste exemplo, vemos como usamos alguns elementos para para gerar links com os quais podemos carregar um documento diferente dentro do iframe, dentro dele vemos atributos como inhame que indica o nome do elemento, como largura Y altura que nos permitem definir o tamanho do elemento.
Vamos ver como fica este exemplo quando o executamos em nosso navegador:

Em HTML5, temos dois novos atributosVamos ver o primeiro desatado, este atributo nos permite mostrar o iframe como se fosse parte integrante do nosso documento, ou seja, um usuário não perceberia que está vendo um conteúdo que não pertence ao site, o segundo atributo, caixa de areia, isso nos ajuda a evitar que os seguintes atributos funcionem dentro do documento que é aberto no iframe:

• scripts
• formulários
• plugins
• links para outros documentos

Os valores que o atributo pode assumir caixa de areia são os seguintes:

• allow-forms: Permite o uso de formulários.
• allow-scripts: Ele permite o uso de scripts, como javascript.
• allow-top-navigation: Ele ativa os links para que eles possam substituir o documento atual do qual o iframe ou também abrir novas guias e janelas.
• permitir a mesma origem: Permite o conteúdo do iframe ser tratado como se tivesse sido gerado no mesmo documento que faz a chamada.

Este elemento nos permite incorporar objetos em nosso documento HTML, como um vídeo de YouTube, Vejamos um exemplo disso:

 Exemplo 

Como podemos ver no exemplo, temos o atributo src que indica a fonte do objeto a ser incorporado, então o modelo que nos diz que tipo de objeto é, bem como o largura e ele altura para definir o tamanho do nosso elemento.
Este elemento é bastante útil para continuar a enriquecer nossas páginas, agora não só com outros documentos e imagens, mas também com vídeos e conteúdos em flash.
Com isso terminamos este tutorial, já devemos ser capazes de produzir documentos HTML enriquecidos, que se ajustam à imagem que possamos ter em mente de como deve ser a nossa página, seja para mostrar imagens ou vídeos de diferentes tipos de fontes.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo