🎥 Imagens e Multimídia

HTML oferece tags para incorporar imagens, vídeos, áudios e outros conteúdos na sua página.

1. Imagens (<img>)

A tag <img> é usada para exibir imagens. Seus atributos mais importantes são src (caminho da imagem) e alt (texto alternativo para acessibilidade).

<img src="https://via.placeholder.com/300x100" alt="Placeholder de uma imagem retangular">
Placeholder de uma imagem retangular

2. Vídeo (<video>)

A tag <video> permite incorporar vídeos. O atributo controls exibe os controles padrão (play, volume, etc.). A tag <source> especifica o arquivo de vídeo.

<video controls width="320">
  <source src="movie.mp4" type="video/mp4">
  Seu navegador não suporta a tag de vídeo.
</video>

(Abaixo, um exemplo funcional seria exibido se o arquivo "movie.mp4" existisse)

3. Áudio (<audio>)

Similar ao vídeo, a tag <audio> incorpora arquivos de som. O atributo controls também é essencial para a interação do usuário.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Seu navegador não suporta a tag de áudio.
</audio>

(Abaixo, um exemplo funcional seria exibido se o arquivo "audio.mp3" existisse)

4. Iframe (<iframe>)

A tag <iframe> cria um "quadro" dentro da sua página para exibir outro documento HTML, como um mapa do Google ou um vídeo do YouTube.

<!-- Exemplo incorporando um mapa do Google Maps -->
<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.197550539229!2d-46.65657118502224!3d-23.56135938468276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c8da0aa315%3A0xd59f9431f2c9776a!2sAv.%20Paulista%2C%20S%C3%A3o%20Paulo%20-%20SP!5e0!3m2!1spt-BR!2sbr!4v1670000000000!5m2!1spt-BR!2sbr" 
  width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>