Como inserir imagens, vídeos e áudios no HTML.
Bem-vindo(a) ao post no blog.
🖼️ Inserindo Imagens no HTML
A tag <img> é responsável por exibir imagens. Ela é autofechável (não precisa de uma tag de fechamento) e possui alguns atributos essenciais.
📜 Estrutura básica:
<img src="imagens/logo.png" alt="Logotipo da empresa">
Veja os atributo e funções
src → Caminho da imagem (URL ou arquivo local).
alt → Texto alternativo para descrição acessível (obrigatório).
width / height → Define dimensões da imagem (em pixels).
title → Exibe uma dica quando o mouse passa sobre a imagem.
Exemplo prático:
<img src="imagens/logo-curso.png" alt="Logotipo do Site Academy Code Christ">
<img src="caminho/da/imagem.jpg" alt="Descrição da imagem">
🧠 Lembre-se:
⚠️Atenção:
🎨 3. Formatos de Imagem e Quando Usar e Vantagem Desvantagem
.jpg/.jpeg → Fotos e imagens com gradientes → Leve, compatível → Perde qualidade em compressão
.png → Imagens com transparência → qualidade e transparência → Arquivos mais pesados
.gif → Pequenas animações → Movimento leve → Limitado a 256 cores
.svg → Ícones e gráficos vetoriais → Escala infinita e leve → Pouco usado para fotos
.webp → Geral (últimas gerações) → Melhor compressão e qualidade → Nem todos os
navegadores antigos suportam.
💬 Melhor prática:
Use SVG para ícones e logos, e WEBP para fotos otimizadas.
📂 Os caminhos Relativos e Absolutos
Existem duas formas de indicar onde o arquivo está:
Relativo → "imagens/foto.jpg" → Caminho dentro da estrutura do projeto local.
Absoluto →"https://example.com/imagens/foto.jpg" → Caminho externo absoluto (ex.hospedado na internet).
⚙️ Largura e Altura (width / height)
<img src="imagens/banner.jpg" alt="Banner do site" width="400" height="200">
⚠️Atenção:
width= largura, que foi de "400"
💡 Dica importante:
Evite distorcer a proporção entre largura e altura, isso pode deixar a imagem deformada. É mais comum e recomendado controlar o tamanho via CSS, como:
<img src="imagens/foto.jpg" alt="Foto de exemplo" style="width:50%;">
🧩 Usando o atributo title
O atributo title é opcional e exibe uma dica quando o usuário passa o mouse por cima da imagem. Exemplo:
<img src="imagens/html-logo.png" alt="Logo HTML" title="HTML: Linguagem de marcação de hipertexto">
1. Use sempre alt para descrever a imagem.
2. Otimize o tamanho do arquivo (para não deixar o site lento).
3. Utilize formatos adequados: .jpg, .png, .svg, .gif, .webp.
4. Dê nomes de arquivos descritivos — exemplo: banner-principal.jpg ao invés de img001.jpg.
🌄 4. Inserindo Figura com Legenda (<figure> e <figcaption>)
Essas tags ajudam a agrupar imagens e legendas de forma semântica.
💡 Exemplo prático:
<figure>
<img src="imagens/code.jpg" alt="Tela com código de desenvolvimento web">
<figcaption>Imagem ilustrativa de um desenvolvedor trabalhando em HTML</figcaption>
</figure>
<figure> → agrupa a imagem e a legenda.
<figcaption> → descreve o conteúdo visual.
🎥 Inserindo Vídeos em HTML
A tag <video> é semelhante ao áudio.
Permite exibir vídeos locais ou hospedados externamente.
📜 Estrutura básica:
<video src="midia/video.mp4" controls></video>
Vamos entender suas funções e atributos:
width, height → Define o tamanho do player.
controls → Mostra controles (play, pause, etc.).
poster → Define uma imagem de capa (thumbnail) antes de começar.
autoplay, loop, muted, preload → Funcionam da mesma forma que no <audio>.
💡 Exemplo avançado:
<video width="640" height="360" controls poster="imagens/thumb.jpg">
<source src="midia/aula.mp4" type="video/mp4">
<source src="midia/aula.webm" type="video/webm">
Seu navegador não suporta vídeos HTML5.
</video>
🔹 Use múltiplos formatos para garantir compatibilidade.
🔹 O atributo poster cria uma “thumbnail” até o vídeo começar.O HTML5 introduziu a tag <video>, que permite exibir vídeos diretamente no navegador sem plugins externos. Veja a estrutura básica:
<video src="videos/aula.mp4" width="640" height="360" controls></video>
Vamos entender suas funções e atributos:
src → Caminho do vídeo (local ou online).
controls → Exibe botões de controle (play, pause, volume etc.).
autoplay → Faz o vídeo iniciar automaticamente.
loop → Faz o vídeo reiniciar automaticamente após terminar.
muted → Inicia o vídeo sem som.
poster → Define uma imagem de capa antes de o vídeo iniciar.
💡 Exemplo completo:
<video width="500" controls poster="imagens/thumb.png">
<source src="videos/meu_video.mp4" type="video/mp4">
<source src="videos/meu_video.ogv" type="video/ogg">
Seu navegador não suporta vídeos.
</video>
🔎 Veja como fica no VScode
 |
| Ob: Deixei as tags afastadas para melhor aprendizado |
🔎 Explicação:
● Usamos várias fontes <source> para compatibilidade entre navegadores;
● A mensagem dentro do <video> aparece caso o navegador não suporte o recurso; O pôster exibe uma miniatura enquanto o vídeo não é iniciado.
📺 Incorporando vídeos de plataformas (YouTube e Vimeo)
Além de arquivos locais, é muito comum incorporar vídeos externos usando o elemento <iframe>. Quando você digitar no VScode ele vai abrir dessa forma:
💡 Exemplo (YouTube):
<iframe width="560" height="315"
src="https://www.youtube.com/embed/3JluqTojuME"
title="Vídeo Tutorial HTML"
frameborder="0"
allowfullscreen>
</iframe>
🧠 Lembre-se:
Vimos o que é o width= É a largura e height= Que é a Altura. Agora apareceu o:
 |
| Ob: Deixei as tags afastadas para melhor aprendizado |
🔖 Dica:
Você pode pegar esse código diretamente no botão "Compartilhar → Incorporar" de qualquer vídeo no YouTube. Exemplo:
🔊 Inserindo Áudios no HTML
A tag <audio> permite incluir sons e músicas diretamente nas páginas.
📜 Estrutura básica:
<audio src="midia/audio.mp3" controls></audio>
Vamos entender suas funções:
src → Caminho ou URL do arquivo de áudio.
controls → Exibe os controles de reprodução (play, pause, volume).
autoplay → Inicia automaticamente (uso cuidadoso — pode ser irritante).
loop → Recomeça automaticamente quando termina.
muted → Começa sem som.
preload → Define como o navegador carrega o áudio (auto, metadata, none).
source= → É a fonte ou a origem.
Dica: Sempre use <source> para oferecer vários formatos compatíveis.
Boa prática: nunca force autoplay em páginas públicas — é melhor permitir o clique do usuário.Assim como os vídeos, o HTML5 permite incorporar áudios nativamente, com a tag <audio> Exemplo:
<source src="audios/podcast_intro.mp3" type="audio/mpeg">
<source src="audios/podcast_intro.ogg" type="audio/ogg">
Seu navegador não suporta reprodução de áudio.
</audio>
Vamos entender suas funções:
controls → Mostra os controles de reprodução
autoplay → Inicia automaticamente
loop → Repete indefinidamente
🎧 Incorporando Áudios Externos (Spotify, SoundCloud, etc.)
Esses serviços fornecem códigos de incorporação semelhantes ao YouTube.
💡 Exemplo (Spotify):
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/track/xyz"
width="300" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media"></iframe>
💬 Sempre verifique as políticas de uso e direitos autorais antes de incorporar conteúdo externo.
🗺️ Incorporando Outras Mídias e Conteúdos Externos.
O HTML permite incorporar outros tipos de elementos, como mapas, documentos e widgets externos. Exemplo: → Mapa do Google.
<iframe
src="https://www.google.com/maps/embed?pb=URL_COMPLETA_GERADA_PELO_GOOGLE"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
📄 Exemplo do outros como: → PDF incorporado
<iframe src="documentos/manual.pdf" width="100%" height="600px"></iframe>
src= É o caminho do arquivo ou página que você quer exibir ou carregar.
⚠️Atenção:
⚙️ Acessibilidade em Multimídia
Para tornar sua página acessível, siga estas boas práticas:
1. Sempre use alt em imagens;
2. Evite autoplay;
3. Inclua legendas e transcrições quando usar áudio ou vídeo;
4. Descreva imagens complexas com <figcaption>;
5. Forneça alternativas textuais ou contextuais (por exemplo, um resumo de um vídeo em texto)
🧱 Exemplo Completo – Página Multimídia Profissional
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Multimídia no HTML</title>
</head>
<body>
<header>
<h1>Galeria Multimídia - Curso HTML</h1>
</header>
<main>
<section>
<h2>Imagem com Legenda</h2>
<figure>
<img src="imagens/html5_logo.png" alt="Logotipo do HTML5" width="200">
<figcaption>O HTML5 é a base da web moderna.</figcaption>
</figure>
</section>
<section>
<h2>Áudio de Exemplo</h2>
<audio controls preload="metadata">
<source src="midia/exemplo.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>
</section>
<section>
<h2>Vídeo Local</h2>
<video width="480" controls poster="imagens/thumb_html.jpg">
<source src="midia/html_intro.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>
</section>
<section>
<h2>Vídeo Externo (YouTube)</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/DLX62G4lc44"
title="Tutorial HTML no YouTube" frameborder="0"
allowfullscreen>
</iframe>
</section>
</main>
<footer>
<p>© 2024 - Curso HTML do Zero ao Avançado</p>
</footer>
</body>
</html>
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
2. Insira uma imagem local com alt e title;
3. Em seguida, adicione um vídeo local com controles e uma imagem pôster;
4. Incorpore um vídeo do YouTube com <iframe>;
5. Adicione um áudio (formato .mp3 ou .ogg) com controles;
6. (Desafio extra) Inclua um mapa incorporado ou um PDF.
/videos
/audios
/documentos
📚 Continue aprendendo HTML:
Como são estruturados os textos em HTML.
Neste post, você vai aprender a utilizar corretamente títulos, parágrafos, quebras de linha, citações e referências, compreendendo como cada tag contribui para a construção de um conteúdo bem estruturado e acessível.
Comentários
Postar um comentário