Imagens e tabelas

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/04-imagens-tabelas/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Incluir uma imagem local e explicar o alt.
• Marcar horários com cabeçalhos de tabela.

Imagens

<img src="imagens/frog.jpg" width="400" alt="Sapo sobre uma superfície rochosa">

alt descreve o que a imagem informa. Se a imagem for só enfeite, alt="" e o significado vai no texto ao lado. Caminho errado: a figura não aparece. A pasta imagens precisa existir ao lado do HTML.

figure e figcaption agrupam imagem e legenda.

Pare e experimente. Copie a tag img. Mude só frog.jpg para ausente.jpg. Preveja o texto alternativo, recarregue, confira e restaure o caminho.

Tabelas

Tabela é para dados em cruzamento, não para desenhar o layout da página.

<table>
  <caption>Horários fictícios da oficina</caption>
  <thead>
    <tr>
      <th scope="col">Dia</th>
      <th scope="col">Abre</th>
      <th scope="col">Fecha</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Terça</th>
      <td>10h</td>
      <td>17h</td>
    </tr>
  </tbody>
</table>

Pare e experimente. Copie a linha de Terça. Mude só 10h para 11h. Preveja qual célula muda, recarregue e confira se os cabeçalhos continuam explicando o horário.

Atividades

1. Como recuperar uma imagem ausente?
2. Quando alt pode ser vazio?
3. Quando uma tabela faz sentido?
4. Como nomear os eixos?

Respostas comentadas

1. Confira a extensão e o caminho relativo ao HTML.
2. Quando a imagem é decorativa ou o texto próximo comunica toda a informação.
3. Quando dados cruzam eixos, como dia e horário.
4. Use th com scope e uma caption que explique o conjunto.

O arquivo completo

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

contato.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contato — Oficina da Lia</title>
  
<style>img,input,select,textarea{max-width:100%;height:auto}fieldset{min-width:0}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}body{overflow-wrap:anywhere}</style></head>
<body>
  <a class="saltar" href="#conteudo">Saltar para o conteúdo</a>
  <header class="topo">
    <p class="marca"><a href="index.html">Oficina da Lia</a></p>
    <nav aria-label="Principal">
      <ul class="menu">
        <li><a href="index.html">Início</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html" aria-current="page">Contato</a></li>
      </ul>
    </nav>
  </header>
  <main id="conteudo" tabindex="-1">
    <h1>Contato</h1>
    <p>Formulário de demonstração. Nada é enviado a um servidor.</p>
    <p>Esta pagina e apenas um destino para conferir o menu. O formulario chega no volume 05.</p>
  </main>
  <footer>
    <p>Oficina da Lia — Olinda, PE. Conteúdo fictício para estudo. Não publique estes arquivos.</p>
  </footer>
</body>
</html>