4.4 Imagens

📘 Introdução ao HTML: Inserção de Imagens

As imagens são fundamentais no desenvolvimento de páginas web, pois tornam o conteúdo mais atrativo e informativo. No HTML, usamos a tag <img> para inserir imagens em uma página.

---

🖼️ A Tag <img>

A tag <img> é usada para exibir imagens. Ela não possui tag de fechamento (é uma tag autofechável). Os principais atributos usados com essa tag são:

Atributo	Função
src	Caminho da imagem (source)
alt	Texto alternativo (accessibilidade)
width	Largura da imagem
height	Altura da imagem

📌 Exemplo básico:

<img src="gato.jpg" alt="Um gato deitado" width="300">

• src indica o nome ou o caminho do arquivo de imagem.

• alt é exibido caso a imagem não carregue e também é lido por leitores de tela.

• width e height podem ser definidos em pixels (px) ou porcentagem (%).

---

🗂️ Caminhos para Imagens

Você pode usar:

• Caminho relativo: se a imagem estiver na mesma pasta do HTML

<img src="logo.png" alt="Logo do site">

• Caminho de subpasta:

htmlCopiarEditar<img src="imagens/banner.jpg" alt="Banner principal">

• URL externa (imagem da internet):

<img src="https://exemplo.com/foto.jpg" alt="Foto online">

---

🧩 Exemplo completo

<h2>Galeria de animais</h2>
<img src="cachorro.jpg" alt="Cachorro feliz" width="200">
<img src="gato.jpg" alt="Gato observando" width="200">
<img src="passaro.jpg" alt="Pássaro colorido" width="200">

---

♿ Importância do atributo alt

O atributo alt (texto alternativo):

• Melhora a acessibilidade para leitores de tela

• É exibido quando a imagem não carrega

• Ajuda no SEO (otimização para buscadores)

📌 Exemplo com alt:

htmlCopiarEditar<img src="carro.jpg" alt="Carro vermelho em movimento">

---

❌ O que evitar

• Usar imagens muito pesadas sem redimensionamento.

• Deixar de usar alt.

• Inserir imagens com caminhos incorretos.