Módulo 4: Imagens e Multimédia

2. Resumo da Aula Anterior

No último módulo, aprendeste a criar a teia de conexões do teu site com Links e a organizar dados com Listas. Agora, vamos deixar de ver apenas texto azul e preto e vamos dar cor e vida à tua página!

3. O Que Vais Aprender Hoje

A web moderna é visual. Nesta aula, vais dominar as ferramentas visuais:

✅ Como inserir imagens de forma correta (img).
✅ A importância crucial da acessibilidade (alt).
✅ Diferenças entre formatos (WebP, SVG, PNG, JPG).
✅ Como agrupar imagens e legendas com figure.
✅ Introdução ao Áudio e Vídeo nativos.

4. Teoria: A Ilustração da Informação

O Elemento <img>

A tag de imagem é especial por dois motivos: ela é vazia (empty), ou seja, não tem tag de fecho, e ela é um elemento de **substituição** (o browser troca a tag pelo ficheiro que tu indicares no src).

A Trindade dos Atributos

src (Source): O caminho para o ficheiro. Pode ser local (imagem.jpg) ou um link externo (URL).
alt (Alternative Text): Atributo **obrigatório** por lei e por boas práticas. Se a imagem não carregar, ou se um cego estiver a navegar, este texto descreve o que lá está.
loading="lazy": Um truque de performance! Diz ao browser para só carregar a imagem quando o utilizador estiver prestes a vê-la no scroll.

🖼️ Analogia: O Formato Ideal

Nem todas as imagens são iguais:

JPG/JPEG: Como uma fotografia revelada. Ótima para cores complexas, mas perde qualidade se for muito comprimida.
PNG: Como um adesivo (sticker). Permite ter fundos transparentes.
SVG: Como um desenho técnico. Não importa o quanto aumentes o zoom, nunca fica "pixelizado". Perfeito para logótipos e ícones.
WebP: A estrela atual. É muito leve e mantém uma qualidade excelente. É o que deves tentar usar sempre.

Semântica Visual: figure e figcaption

Muitas vezes, uma imagem precisa de contexto. Em vez de apenas colocares um parágrafo por baixo, deves usar o par <figure> e <figcaption>. Isto avisa o Google e os leitores de ecrã que aquele texto é especificamente a descrição daquela imagem.

5. Exemplos de Código

Exemplo 1: Imagem com Acessibilidade Plena
                    <img
  src="paisagem-alentejo.webp"
  alt="Campo de trigo dourado sob um céu azul no Alentejo"
  width="800"
  height="450"
  loading="lazy">
                

Exemplo 2: A Galeria Semântica
                    <figure>
  <img src="codigo.png" alt="Ecrã do VS Code com código HTML">
  <figcaption>Figura 1: A estrutura básica de um projeto web.</figcaption>
</figure>
                

6. Agora é a Tua Vez! (Construindo a Tua Galeria)

Vamos criar uma secção de "Destaque" com imagem e legenda. Segue estes passos:

Escolha: Procura um link de uma imagem qualquer na internet ou usa uma foto que tenhas no teu computador.
Estrutura: Cria um elemento <section> e dá-lhe um <h2> com o título "Minha Foto de Destaque".
Inserção: Coloca uma <figure> abaixo do título.
A Imagem: Insere a <img>. Lembra-te de escrever um alt que realmente descreva o que o utilizador está a ver.
O Texto: Adiciona uma <figcaption> com a fonte da imagem ou uma breve explicação histórica.
Toque Final: Adiciona o atributo loading="lazy" para mostrares que já dominas a performance!

7. Verificação de Conhecimento

Teste os seus conhecimentos sobre multimédia. Lembra-te: o detalhe faz o profissional!

Carregando quiz...

8. Resumo do Que Aprendemos

📌 A tag <img> não tem fecho (self-closing).
📌 O alt é vital para acessibilidade e SEO.
📌 SVG é para ícones; WebP/JPG para fotos.
📌 figure e figcaption agrupam imagem e texto semanticamente.
📌 controls é o atributo que ativa o player em áudio e vídeo.

9. Desafios Práticos

Desafio 1: O Vídeo do YouTube

Como é que se coloca um vídeo do YouTube no site? (Dica: O YouTube dá-te um elemento chamado iframe).

Desafio 2: Acessibilidade de Ícones

Se tiveres uma imagem de uma lupa que serve de botão de pesquisa, o que deve estar no alt?

Desafio 3: Favicon

Descobre como se chama o ícone pequeno que aparece na aba do navegador ao lado do título.