Resumo de mídias em HTML
<img>
A tag <img> é usada para incorporar uma imagem em uma página HTML. As imagens não são tecnicamente inseridas em uma página da web, mas sim vinculadas a páginas da web. Essa tag cria um espaço de retenção para a imagem referenciada.
A tag <img> tem dois atributos obrigatórios:
src - Especifica o caminho para a imagem
alt - Especifica um texto alternativo para a imagem, se a imagem por algum motivo não puder ser exibida
Sempre especifique a largura e a altura de uma imagem, caso contrário a página pode piscar enquanto a imagem é carregada.
Para vincular uma imagem a outro documento, basta aninhar a tag <img> dentro de uma tag <a>
Atributos da tag <img>:
- width: "200", se utilizar sozinho vai escalar a imagem de forma dinâmica entre largura e altura.
- height: "200", em conjunto com width vai forçar a largura e altura definido podendo distorcer a imagem.
- title: quando passamos o mouse em cima mostra o titulo.
- sizes: Especifica tamanhos de imagem para diferentes layouts de página.
- srcset: Especifica uma lista de arquivos de imagem para usar em diferentes situações.
Exemplo de uso sizes e srcset:
<img srcset="img-300w.jpg 300w,
img-400w.jpg 400w,
img-600w.jpg 600w,
img-800w.jpg 800w"
sizes="(max-width: 799px) 100vw, (min-width: 800px) 800px"
src="img-800w.jpg">
<!--Este exemplo é excelente para utilizar imagens de tamanhos diferentes e tornando responsivo-->
Observações: Arquivos de imagem svg não perdem resolução.
<audio>
A tag <audio> é usada para incorporar conteúdo de som em um documento, como música ou outros fluxos de áudio, pode contém uma ou mais tags com diferentes fontes de áudio, logo o navegador escolherá a primeira fonte compatível.
O texto entre as tags <audio> e </audio> só será exibido em navegadores que não suportam o elemento <audio>.
Existem três formatos de áudio suportados em HTML: MP3, WAV e OGG.
Atributos tag <audio>:
- autoplay: toca o som automáticamente ao carregar o navegador;
- controls: mostra os botões de controle de volume, velocidade e tempo.
- tag filha:
- source:
- atributo tag <source>: src, ou seja caminho do arquivo de áudio;
Exemplo de código:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video>
A tag <video> é usada para incorporar conteúdo de vídeo em um documento, como um clipe de filme ou outros fluxos de vídeo, podendo conter uma ou mais tags com diferentes fontes de vídeo, então o navegador escolherá a primeira fonte compatível.
O texto entre as tags <video> e </video> só será exibido em navegadores que não suportam o elemento <video>.
Existem três formatos de vídeo suportados em HTML: MP4, WebM e OGG.
Atributos tag <video>:
- autoplay: começa o vídeo automáticamente ao carregar o navegador;
- controls: mostra os botões de controle de volume, velocidade e tempo.
- tag filha:
- source:
- atributo: src, ou seja caminho do arquivo de vídeo;
Exemplo de código
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<track>
Este elemento é usado para especificar legendas, arquivos de legenda ou outros arquivos contendo texto, que devem estar visíveis quando a mídia estiver sendo reproduzida.
As trilhas são formatadas no formato WebVTT (arquivo.vtt), então é necessário além do arquivo de áudio ou vídeo, mais o arquivo vtt que é a legenda.
Exemplo de código:
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
O atributo kind com valor descriptions pode ser usado como uma narração do que acontece para acessibilidade, então o texto colocado servirá de narração pelos equipamentos adaptados.
<iframe>
A tag <iframe> especifica um quadro embutido, que é usado para incorporar outro documento no documento HTML atual.
Podemos usar o CSS para estilizar o <iframe>.
É uma boa prática sempre incluir um atributo de título para o <iframe>. Isso é usado por leitores de tela para ler qual é o conteúdo do <iframe>.
Exemplo de código:
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>
