Curso IT Fundamentos HTML 014_Multimídia e conteúdo incorporado

Multimídia e conteúdo incorporado Uso de tags de áudio e vídeo no HTML5 Aplicação de conteúdo incorporado, como mapas, incorporação de páginas web, etc.

Imagens

As imagens são um tipo de mídia muito importante que pode melhorar a experiência do usuário, tornando a transmissão de informações mais intuitiva e vívida. Em HTML, usamos a tag <img> para inserir imagens. A tag <img> é uma tag vazia auto-fechante, ou seja, não tem tag de fechamento. O endereço da imagem é especificado através do atributo src (source) da tag <img>.

Exemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descrição da imagem">

Efeito:

O elemento de imagem também pode incluir os seguintes atributos:

• width: Especifica a largura da imagem.
• height: Especifica a altura da imagem.
• align: Especifica o alinhamento da imagem.
• border: Especifica a borda da imagem.
• hspace: Especifica o espaçamento horizontal entre a imagem e os elementos circundantes.
• vspace: Especifica o espaçamento vertical entre a imagem e os elementos circundantes.
• ismap: Especifica se a imagem é uma imagem de mapa.

Definir o tamanho da imagem

Podemos definir a largura e altura da imagem através dos atributos width e height da tag <img>. O valor desses dois atributos pode ser um valor de pixel específico ou uma porcentagem.

Exemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descrição da imagem" width="100" height="100" align="center" border="1">

Efeito:

Definir texto alternativo

O texto alternativo (alt text) é usado para exibição quando a imagem não pode ser carregada, e também é usado por leitores de tela para ler o conteúdo da imagem, ajudando pessoas com deficiência visual a entender a imagem. Definimos o texto alternativo através do atributo alt da tag <img>.

Exemplo:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Exibir este texto quando a imagem não for encontrada">

Efeito:

Link de imagem

As imagens também podem ser usadas como hiperlinks. Basta colocar a tag <img> dentro da tag <a> para criar um link de imagem.

Exemplo:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Descrição da imagem" width="100" height="100" align="center" border="5">
3
</a>

Efeito:

[!Resumo]

• Os atributos width e height definem a largura e altura da imagem. O valor desses dois atributos pode ser um valor de pixel específico ou uma porcentagem.
• Se você definir a largura e altura da imagem simultaneamente e a proporção desses dois valores não for consistente com a proporção da imagem em si, a imagem pode ser esticada ou comprimida, causando deformação.
• Se o link da imagem tiver uma borda definida, a borda terá a mesma cor do hiperlink por padrão.

Vídeo

O elemento de vídeo HTML é usado para incorporar vídeos em páginas web. A tag do elemento de vídeo é <video>.

Exemplo:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Efeito:

O elemento de vídeo também pode incluir os seguintes atributos:

• width: Especifica a largura do vídeo.
• height: Especifica a altura do vídeo.
• poster: Especifica o quadro de pôster do vídeo.
• autoplay: Especifica se o vídeo deve ser reproduzido automaticamente durante o carregamento.
• loop: Especifica se o vídeo deve ser reproduzido em loop.
• muted: Especifica se o vídeo deve estar mudo.
• preload: Especifica se o vídeo deve ser pré-carregado durante o carregamento.

Exemplo:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Este exemplo contém um elemento de vídeo. A URL do arquivo de vídeo está definida como mp4.mp4, largura definida como 400 pixels, altura definida como 300 pixels, quadro de pôster definido como zhaojian-avatar.png, reprodução automática definida como true, reprodução em loop definida como true, mudo definido como true, pré-carregamento definido como auto.

Efeito:

Uma solução de vídeo HTML muito abrangente (não recomendado)

O exemplo a seguir usa 4 formatos de vídeo diferentes. O elemento <video> do HTML 5 tentará reproduzir o vídeo em um dos formatos mp4, ogg ou webm. Se todos falharem, ele voltará ao elemento <embed>.

Exemplo:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Resumo]

• O elemento <source> fornece uma opção de backup. Se o navegador não suportar esse formato, ele tentará reproduzir o arquivo de vídeo especificado pelo segundo elemento <source>.

Áudio

O elemento <audio> em HTML é usado para incorporar conteúdo de áudio em páginas web.

Exemplo:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Efeito:

O elemento de áudio também pode incluir os seguintes atributos:

• controls: Especifica se os controles de áudio devem ser exibidos, o valor padrão é true.
• autoplay: Especifica se o áudio deve ser reproduzido automaticamente durante o carregamento.
• loop: Especifica se o áudio deve ser reproduzido em loop.
• muted: Especifica se o áudio deve estar mudo.
• preload: Especifica se o áudio deve ser pré-carregado durante o carregamento.

Exemplo:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Este exemplo contém um elemento <audio>. A URL do arquivo de áudio está definida como mp3.mp3, controles de controle definidos como true, reprodução automática definida como true, reprodução em loop definida como true, mudo definido como true, pré-carregamento definido como auto.

Efeito:

Elemento embed

O elemento embed foi introduzido no HTML 4.01. Ele pode incorporar qualquer tipo de recurso, incluindo vídeo, áudio, imagens, Flash, etc. O elemento embed requer que o navegador suporte um plugin específico para ser exibido.

Exemplo:

1
<embed src="URL do recurso" type="tipo do recurso">

[!Resumo]

• O HTML5 introduziu os elementos <video> e <audio> para substituir o elemento <embed>.
• O elemento embed pode incorporar qualquer tipo de recurso, enquanto os elementos <video> e <audio> podem incorporar apenas recursos de vídeo e áudio.
• O elemento embed requer que o navegador suporte um plugin específico para ser exibido, enquanto os elementos <video> e <audio> não requerem.
• O elemento <embed> ainda pode ser usado, mas não é mais recomendado.

Elemento object

O elemento object foi introduzido no HTML 4.01. Ele pode incorporar qualquer tipo de recurso, incluindo vídeo, áudio, imagens, Flash, etc. O elemento object usa o elemento <param> para especificar os atributos do recurso, como largura, altura, cor de fundo, etc.

Exemplo:

1
<object data="URL do recurso" type="tipo do recurso">
2
  <param name="nome do atributo" value="valor do atributo">
3
  ...
4
</object>

Diferenças específicas entre os elementos object e embed:

[!Resumo]

• Se você precisa incorporar qualquer tipo de recurso e o navegador suporta um plugin específico, pode usar o elemento object.
• Se você precisa incorporar apenas um tipo específico de recurso e não precisa que o navegador suporte um plugin específico, pode usar o elemento embed.
• Se você precisa incorporar apenas recursos de vídeo ou áudio, é recomendável usar os elementos <video> ou <audio>.
• Os elementos <video> e <audio> não requerem que o navegador suporte um plugin específico e fornecem funcionalidades mais ricas.

Quadros

O elemento <iframe> é uma tag em HTML usada para aninhar um documento em outro documento. Ele permite aninhar um documento em outro e exibir o conteúdo do documento aninhado. Isso é comumente usado para incorporar outras páginas web, vídeos, mapas, etc.

O elemento <iframe> possui os seguintes atributos:

• O atributo src define a URL da página web ou documento a ser incorporado.
• O atributo width define a largura do elemento <iframe>.
• O atributo height define a altura do elemento <iframe>.
• O atributo frameborder define se a borda do elemento <iframe> é visível.
• O atributo border define a largura da borda do elemento <iframe>.
• O atributo framespacing define o espaçamento entre o elemento <iframe> e seu conteúdo circundante.
• O atributo marginwidth define as margens esquerda e direita do elemento <iframe>.
• O atributo marginheight define as margens superior e inferior do elemento <iframe>.
• O atributo scrolling define se o elemento <iframe> permite rolagem.
• O atributo name define o nome do elemento <iframe>.
• O atributo id define o ID do elemento <iframe>.
• O atributo class define a classe do elemento <iframe>.

Exemplo:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>Elemento iframe HTML</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Este é um iframe que exibe o conteúdo do site zhaojian.net.</p>
9
  </iframe>
10
</body>
11
</html>

Efeito: