Capítulo 8: Imagens e Galerias

Trabalhando com Imagens

Imagens na Web: As imagens tornam as páginas web mais atrativas e informativas. Aprender a adicionar e organizar imagens é fundamental para criar sites interessantes e profissionais!

Nesta aula, vamos aprender a adicionar imagens aos nossos sites e criar belas galerias organizadas.

Tag <img>

Inserir imagens individuais com atributos src e alt

Tag <figcaption>

Adicionar legendas descritivas às imagens

CSS para Posicionamento

Centralizar e organizar imagens com display e margin

Galerias Responsivas

Criar layouts que se adaptam a diferentes tamanhos de tela

1. Inserindo uma Imagem - Tag <img>

A tag <img> é usada para adicionar imagens ao site. É uma tag que não precisa de fechamento!

src = "caminho da imagem" - onde está localizada a imagem

alt = "descrição" - texto alternativo para acessibilidade

width/height = controla o tamanho da imagem

<h2>Bioma da Caatinga</h2>

<p>A Caatinga é um bioma exclusivamente brasileiro...</p>

<img src="https://live.staticflickr.com/65535/54074544692_a9d53bdb20_o.png%22%20alt=%22bioma%22" alt="bioma"" 
     alt="Mapa do bioma Caatinga" 
     width="300" 
     height="200">
            

Mapa do bioma Caatinga.Fonte: Flickr

2. Organizando com <figure> e <figcaption>

Para organizar melhor, usamos <figure> como container e <figcaption> para legendas.

<figure>
  <img src="mandacaru.jpg" 
       alt="Mandacaru florindo" 
       width="250" 
       height="200"
       style="display: block; margin: auto;">
  <figcaption style="text-align: center; font-size: 16px;">
    Mandacaru - símbolo da resistência da Caatinga
  </figcaption>
</figure>
            

Como fica na prática:

Mandacaru - símbolo da resistência da Caatinga Fonte: Flickr

3. Centralizando Imagens com CSS

Para centralizar uma imagem, usamos CSS inline com algumas propriedades especiais:

display: block; - transforma a imagem em elemento de bloco

margin: auto; - centraliza automaticamente

text-align: center; - centraliza o texto da legenda

Dica de CSS: O display: block é necessário porque imagens são elementos "inline" por padrão, e elementos inline não respondem ao margin: auto!

4. Criando uma Galeria de Imagens

Para múltiplas imagens, criamos uma estrutura organizada usando classes CSS:

<h2>Animais da Caatinga</h2>

<section class="image-grid">
  <figure class="image-item">
    <img src="sagui.jpg" alt="Sagui">
    <figcaption>Sagui-do-nordeste</figcaption>
  </figure>
  
  <figure class="image-item">
    <img src="https://live.staticflickr.com/65535/54075877840_65e7c82b39_n.jpg" alt="asaBranca" alt="Asa-branca">
    <figcaption>Asa-branca</figcaption>
  </figure>
  
  <figure class="image-item">
    <img src="https://live.staticflickr.com/65535/54074544482_dc412fd949_o.jpg" alt="tatuBola" alt="Tatu-bola">
    <figcaption>Tatu-bola</figcaption>
  </figure>
</section>
            

Como fica na prática:

Animais da Caatinga

5. CSS para Galerias Responsivas

Usando CSS no <head>, podemos criar layouts que se adaptam ao tamanho da tela:

<head>
  <style>
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 20px;
    }
    
    .image-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .image-item img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
  </style>
</head>
            

CSS Grid vs Flexbox:

Grid: Perfeito para layouts bidimensionais (linhas e colunas)
Flexbox: Ideal para layouts unidimensionais (uma direção)

🎯 Prepare-se para os Exercícios!

Agora você vai praticar:

Exercício 1: Imagem simples centralizada com legenda
Exercício 2: Duas imagens organizadas com flexbox
Exercício 3: Galeria responsiva completa com CSS Grid

Prática: Criando Galerias de Imagens

Vamos praticar adicionando imagens dos animais da Caatinga aos nossos sites!

Aula Atual: Imagem Simples
💡 Dica: Use imagens representativas para tornar o conteúdo mais atrativo!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.