DS & II

capitulo_06_midia

Leitura de 2 min

Capítulo 06: Visões e Sons do Reino (Imagens e Mídia) 🖼️🎵

Neste capítulo, vamos aprender a adicionar imagens, áudios e vídeos em nossas páginas, usando o tema Pinturas e Mensagens Holográficas!

📖 Imagens (<img>)

Para exibir uma imagem no HTML, usamos a tag <img>. Ela não tem tag de fechamento e precisa de dois atributos principais:

  • src: O caminho do arquivo ou URL da imagem.
  • alt: Um texto alternativo que aparece se a imagem falhar (e serve para acessibilidade).

<img src="imagem.jpg" alt="Descrição da imagem">

📖 Áudio e Vídeo (<audio> e <video>)

Para mídias, o HTML5 trouxe tags muito fáceis de usar. Ambas precisam do atributo controls para que o usuário possa dar play/pause.

<audio src="musica.mp3" controls></audio>
<video src="video.mp4" controls width="400"></video>

📖 Exemplo Guiado: Galeria do Castelo

Vamos criar uma página com mídia.

  1. Crie o arquivo galeria.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Galeria do Castelo</title>
</head>
<body>
    <h1>Visões do Reino</h1>
    
    <!-- Imagem da Internet -->
    <img src="https://picsum.photos/400/200" alt="Paisagem aleatória">
 
    <h2>Sons da Floresta</h2>
    <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls></audio>
</body>
</html>

📊 Ilustração Visual: Tags de Mídia

graph TD
    A[Mídia] --> B["img (Imagem)"]
    A --> C["audio (Som)"]
    A --> D["video (Filme)"]

🛠️ Prática Obrigatória 1: Sua Pintura

Crie um arquivo chamado minha_pintura.html. Coloque um título “Minha Obra de Arte” e exiba uma imagem de sua preferência (pode usar o link https://picsum.photos/300 para uma imagem aleatória). Não esqueça do atributo alt!

🔑 Gabarito de Código

Prática 1: minha_pintura.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Minha Pintura</title>
</head>
<body>
    <h1>Minha Obra de Arte</h1>
    <img src="https://picsum.photos/300" alt="Uma imagem aleatória bonita">
</body>
</html>

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks