Neste artigo, aprenderemos sobre o conteúdo embutido e multimídia em HTML, como imagem, vídeo, áudio e iframe.
Figuras
Existe uma forma de inserir figuras em uma página com o elemento img
. É um elemento de auto-fechamento, ou seja, o elemento <img>
se fecha na tag de abertura.
Entre os atributos possíveis para este elemento, os mais importantes são:
-
src
: significa fonte e é um atributo obrigatório, pois o texto (string) com o URL/link da imagem é indicado aqui. -
alt
: significa texto alternativo e é obrigatório para acessibilidade. Você deve indicar um texto alternativo (descrição) para a imagem no atributoalt
. -
width
: a largura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS. -
height
: a altura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS. -
srcset
: significa conjunto de fontes. Este é um atributo incrível, pois permite usar várias imagens para um elemento, criando uma imagem responsiva.
Geralmente, o adaptável usa dois ou mais arquivos diferentes para a mesma imagem, cada arquivo com um tamanho diferente e para um tamanho de tela de dispositivo diferente. O responsivo geralmente usa o mesmo arquivo, mas altera seu tamanho.
Exemplo:
O tamanho original da imagem é de 200 x 100 pixels (width
é 200 e height
é 100). A proporção é de 2 para 1. Se você indicar width="400"
, sua imagem será de 400 x 200. Mas se você indicar width="400"
e height="300"
, a proporção será alterada, e a imagem aparecerá distorcida. Você entende?
Abaixo, você pode ver um trecho de código:
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" width="100" />
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" height="50" />
Picture
Uma alternativa adaptável à srcset
do elemento img
é o elemento picture
. Neste elemento, você indica diferentes fontes e um elemento img
é usado como fallback.
Veja este exemplo:
<picture>
<source media="(max-width: 799px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" />
<source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=1200" />
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=720" alt="Cristo Redentor" />
</picture>
-
<picture>
: Este é um elemento de contêiner usado para fornecer várias fontes para um elemento<img>
. -
<source>
: Esses elementos são usados dentro do elemento<picture>
para especificar diferentes fontes (imagens) com base em condições de consulta de mídia.
Vídeo
Para incluir um vídeo em sua página, você pode usar o elemento video
. Aqui está um exemplo:
<video src="link-video.mp4" type="video/mp4">
Seu navegador não suporta o elemento <code>video</code>.
</video>
Você pode incluir:
- Trilhas, como vídeos com áudios em diferentes idiomas.
- Largura e altura como o elemento
img
. - Repetição, se o vídeo for reproduzido em um loop.
Mais informações podem ser acessadas em video: O Elemento de Incorporação de Vídeo.
Áudio
Para incluir áudio em uma página, você pode usar o elemento audio
. Aqui está um exemplo:
<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Seu navegador não suporta o elemento <code>audio</code>.
</audio>
Você pode incluir:
- Trilhas, como vídeos com diferentes idiomas.
- Repetição, se o áudio for reproduzido em um loop.
Mais informações podem ser acessadas em audio.
Figure
O elemento figure
é útil quando você precisa inserir conteúdo independente, como imagens, código ou vídeos dentro do seu conteúdo, opcionalmente com uma legenda.
Nesse cenário, o figure
é um bom elemento para usar. Aqui está um exemplo:
<figure>
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />
<figcaption>Cristo Redentor no Brasil.</figcaption>
</figure>
Você pode usar o elemento figure
para vários tipos de conteúdo, não apenas imagens. Ele pode ser usado para vídeos, código e muito mais.
Iframe
Finalmente, você pode incluir conteúdo incorporado, como vídeos do YouTube ou até mesmo outra página da web, usando o elemento iframe
. Este elemento cria um espaço com um contexto individual, funcionando como conteúdo separado dentro da sua página.
Aqui está um exemplo com dois elementos iframe
:
<iframe src="https://www.google.com/webhp?igu=1" width="500" height="400">
<p>Seu navegador não suporta iframes.</p>
</iframe>
<iframe src="page.html" width="400" height="400">
<p>Seu navegador não suporta iframes.</p>
</iframe>
O iframe
permite especificar um URL de um recurso no atributo src
, indicar atributos width
e height
, e fornece uma mensagem de fallback se o navegador não suportar iframes.
Vídeo do Youtube
Outro uso comum para iframes
é incorporar vídeos do YouTube. Aqui está um exemplo:
<iframe width="560" height="315" src="https://www.youtube.com/embed/sYmjU2mYc1o?si=DIANF95yhkCnOjBN" title="Player de Vídeo do YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Este iframe
incorpora um player de vídeo do YouTube com dimensões específicas, URL de origem e várias permissões para habilitar recursos como reprodução automática e modo tela cheia.
Visualizador de PDF
Uma coisa interessante que podemos fazer com um iframe é exibir um PDF (como um Visualizador de PDF) em sua página. Em outras palavras, podemos incorporar um PDF em uma página. O código abaixo mostra essa funcionalidade.
<iframe src="https://www.tutorialspoint.com/html/html_tutorial.pdf" width="400" height="600" frameborder="0" allowfullscreen></iframe>
No entanto, o exemplo acima não funciona porque é comum o servidor indicar que o conteúdo incorporado só funciona se estiver na mesma origem, como o mesmo site. Portanto, se o seu PDF estiver em seu site, está tudo bem, ele funcionará.
Para contornar esse problema, podemos usar o visualizador de documentos do Google, como no exemplo abaixo:
<iframe src="https://docs.google.com/viewerng/viewer?url=https://www.tutorialspoint.com/html/html_tutorial.pdf&embedded=true" frameborder="0" height="500" width="400"></iframe>
Este código será renderizado como na imagem abaixo.
O que Vem Pela Frente
Nos próximos artigos, você explorará listas ordenadas, listas de marcadores e definições, bem como detalhes em HTML. Fique ligado!
Referências
- MDN WEB DOCS. Imagens Responsivas. Acessado em 16 de setembro de 2023.
- WHATWG. HTML Living Standard. Acessado em 16 de setembro de 2023.
Top comments (0)