Mídia HTML

Os mapas de imagem tornaram clicáveis regiões de uma única figura. Mídia na web é mais ampla: imagens estáticas, som, imagens em movimento e, às vezes, páginas aninhadas ou players hospedados. O HTML oferece tags específicas para que os navegadores exibam ou reproduzam esses recursos com controles e ganchos de acessibilidade. Esta sessão é o seu mapa antes de Video, Audio, YouTube e Plug-ins aprofundarem.

O que “mídia” significa aqui

Na linguagem cotidiana do curso, mídia significa conteúdo que não é só parágrafos e títulos — fotos, ícones, clips de voz, demos e embeds. Usar o elemento certo ajuda o navegador a expor a UI nativa de reprodução, baixar o tipo de recurso adequado e dar à tecnologia assistiva um papel mais claro do que um <div> misterioso cheio de scripts.

Resposta direta

• Imagens → img (e às vezes picture para vários arquivos)
• Som → audio
• Filmes e clips → video
• Navegação aninhada (mapas, players de outros sites) → frequentemente iframe
  Prefira o elemento correspondente à tarefa. Dê aos usuários controls em audio e video, a menos que você tenha um player personalizado sólido e acessível. Quando a mídia carrega informação importante, planeje alternativa textual, legendas ou transcrição.

Blocos de construção em um olhar

Um pequeno amostrador

Você já conhece img. Aqui está como audio e video ficam ao lado dele em uma primeira página de prática — os caminhos são exemplos; use arquivos que você realmente tem quando tentar em casa.

Lendo o amostrador

• img ainda precisa de src e alt significativo
• audio e video usam src (ou filhos source aninhados em lições posteriores) e se beneficiam de controls
• width em video pode reservar espaço de layout enquanto o arquivo carrega
• Arquivos vazios ou caminhos errados falham como outros ativos — verifique pastas cedo

Controles são hábito de iniciante

O atributo controls pede ao navegador para mostrar play, pause e a UI relacionada. Reproduzir som automaticamente sem ação clara do usuário costuma ser bloqueado e geralmente irrita. Comece com controles visíveis. Players personalizados vêm depois se um projeto realmente precisar deles.

Escolhendo a ferramenta certa

• Podcast ou nota de voz → audio
• Gravação de tela ou clip → video
• Foto ou diagrama → img / picture
• Widget de mapa ou página de player de terceiros → frequentemente iframe (com consciência de desempenho e segurança)
  Não force um vídeo em uma tag de imagem, nem um app externo inteiro em um blob misterioso de scripts, quando existe um elemento nativo.

Acessibilidade e significado

Se a mídia ensina algo, planeje como uma pessoa que não pode ouvir ou ver ainda obtém a ideia: alt para imagens informativas, legendas para vídeo falado, transcrições para áudio longo. Movimento decorativo sem informação não deve prender o foco nem iniciar alto sozinho. Lições especializadas posteriores vão mais fundo; fixe o hábito agora.

Custos do iframe (prévia)

iframe incorpora outro contexto de navegação. Isso é poderoso para mapas e players hospedados, e também traz scripts, cookies e peso de layout de outra página para a sua. Use quando o aninhamento é o objetivo real — não como padrão para cada arquivo de mídia que você hospeda. Tags nativas audio / video / img continuam mais simples para seus próprios arquivos.

Como as próximas lições se encaixam

Depois deste mapa: Video e Audio ensinam atributos, várias fontes e hábitos práticos de arquivo. Plug-ins e YouTube cobrem padrões mais antigos ou hospedados. Iframe aprofunda a incorporação. Trate esta página como o diretório; trate aquelas como as oficinas.

Pratique no seu editor

1. Pela tabela, diga qual elemento escolheria para um arquivo de podcast (audio).
2. Adicione um img a uma página de prática com alt claro (você já sabe).
3. Se tiver um mp3 ou mp4 pequeno, adicione audio ou video com controls.
4. Escreva uma linha nas notas: “legendas/transcrições para conteúdo falado.”
5. Folheie os títulos das próximas sessões de mídia para o roteiro ficar familiar.

Erros fáceis

• Reproduzir som automaticamente sem controles ou gesto claro do usuário
• Incorporar vídeos enormes sem pensar no tamanho e sem plano de texto alternativo
• Usar iframe para cada arquivo quando audio/video/img nativos bastariam
• Esquecer que iframes importam custos de segurança e desempenho de outra página
• Tratar esta visão geral como “suficiente para sempre” e pular as lições especializadas quando você realmente publica mídia

Resumo

• Mídia HTML cobre imagens, áudio, vídeo e embeds
• Prefira o elemento correspondente à tarefa
• Dê controles aos usuários e planeje alternativas quando a mídia carrega significado
• Tags nativas para seus próprios arquivos; iframe quando você realmente aninha outra página ou player hospedado
• As próximas lições especializam cada tipo — esta página é o mapa