Imagens com alternativa e legenda

Neste capítulo você vai incorporar uma imagem local e escrever uma alternativa útil.

Seu ponto de partida

Estude depois do capítulo 11. O exemplo deste capítulo é 12-imagens, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

O arquivo e seu caminho

Img incorpora uma imagem. Src aponta para o arquivo; alt informa sua alternativa textual. A referência usa cartões de identificação fictícios já presentes no volume. Eles mostram iniciais, não fotografias de pessoas.

Width e height informam as dimensões originais e ajudam o navegador a reservar espaço. O CSS permite que a imagem encolha quando necessário. Não use uma URL remota como único recurso do exercício.

Faça no seu exemplo

Confira palestrantes.html.

<img src="assets/imagens/ana.png" alt="Cartão azul de Ana com as iniciais AR" width="400" height="400">

Mude uma coisa e preveja

Troque somente o src por assets/imagens/bruno.png e ajuste o alt para corresponder.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A imagem muda para o cartão verde com as iniciais BC.

Se não acontecer

Se falhar, confira o nome real. Não existe imagem incorporada só porque seu nome foi escrito no HTML.

A alternativa depende do contexto

Alt descreve a função da imagem no contexto. Evite começar com Imagem de quando isso não acrescenta informação. Uma imagem puramente decorativa pode ter alt=""; não retire alt para conseguir esse efeito.

Quando o texto próximo já oferece toda a informação e o cartão não acrescenta algo necessário, alt vazio também pode ser adequado para evitar repetição. Nesta prática usamos uma alternativa curta para reconhecer o recurso e as iniciais da pessoa fictícia.

Faça no seu exemplo

Confira o alt e a legenda do primeiro cartão.

<figure>
  <img src="assets/imagens/ana.png" alt="Cartão azul de Ana com as iniciais AR" width="400" height="400">
  <figcaption>Ana. Conteúdo fictício para estudo.</figcaption>
</figure>

Mude uma coisa e preveja

Troque somente a legenda por Ana apresenta primeiros passos em HTML.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A legenda visível muda; alt continua oferecendo a alternativa.

Se não acontecer

Figcaption não substitui automaticamente alt. Cada um atende a um contexto de leitura.

Uma imagem respeita sua proporção

Max-width:100% impede a imagem de ultrapassar seu contêiner. Height:auto preserva a proporção. Object-fit:cover pode recortar uma imagem numa caixa fixa; não use esse recorte quando uma parte essencial precisa aparecer.

Na referência, os cartões mantêm formato quadrado. Uma imagem grande não precisa ser mostrada na largura original para existir com boa qualidade.

Faça no seu exemplo

Confira a regra de img.

img { max-width: 100%; height: auto; }
.retrato { max-width: 12rem; }

Mude uma coisa e preveja

Troque somente o limite de retrato por 9rem.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O cartão encolhe sem distorcer.

Se não acontecer

Se ficar achatado, investigue height fixa conflitante. Restaure auto.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Corrija um caminho errado de imagem.

2. Explique alt e figcaption.

3. Teste a página estreita.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Compare src com pasta e nome reais.

2. Alt é alternativa; figcaption é legenda visível.

3. A imagem cabe e preserva sua proporção.

Quando seguir

Você abre imagens locais e justifica sua alternativa. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 12-imagens, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section><section aria-labelledby="beneficios"><h2 id="beneficios">O que você encontra</h2><ul class="beneficios"><li>Explicações curtas</li><li>Exemplos para alterar</li><li>Tempo para conferir</li></ul><h2>Seu percurso de prática</h2><ol><li>Abra a página.</li><li>Mude uma coisa.</li><li>Confira o resultado.</li></ol></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }
body { font-family: Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { line-height: 1.3; }
* { box-sizing: border-box; }
body { margin: 0; padding-inline: 1rem; }
header, main, footer { max-width: 64rem; margin-inline: auto; }
header, footer { padding: 1.5rem 0; }
main { padding: 1.5rem; background: white; border-radius: .6rem; }
section { margin-block: 1.5rem; }
.cartao { border: 1px solid #a6b8c3; padding: 1rem; border-radius: .4rem; }
.destaques { display: flex; flex-wrap: wrap; gap: 1rem; }
.destaques > .cartao { flex: 1 1 16rem; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
[aria-current=page] { font-weight: 700; }
@media (max-width: 40rem) { main { padding: 1rem; } }
.hero { background: #e4f0f5; padding: 1.5rem; border-radius: .6rem; }
header { background-color: #e4f0f5; background-image: linear-gradient(120deg, #e4f0f5, #f5eee0); padding-inline: 1rem; }
.beneficios { list-style-type: disc; padding-inline-start: 1.5rem; }
.beneficios li { margin-block: .4rem; }
img { max-width: 100%; height: auto; }
.retrato { max-width: 12rem; }
figure { margin-inline: 0; }