Curso de HTML / Criar um pequeno site com várias páginas

Um pequeno site multipágina reúne a estrutura do documento, áreas semânticas, links e formulários. Neste projeto, você vai criar páginas Início, Sobre e Contato na mesma pasta, navegar entre elas e verificar o resultado. HTML sozinho não pode receber nem armazenar mensagens de contato, então o formulário aqui é uma demonstração de entrada, não um serviço de contato funcional.

Prepare os arquivos

Crie uma nova pasta e salve esses três arquivos de texto simples em UTF-8 dentro dela. Os nomes dos arquivos devem corresponder exatamente aos valores href do menu. Primeiro compare como os caminhos relativos são resolvidos a partir dos locais dos arquivos em Links: caminhos, Fragmentos de página e Email.

small-site/

  index.html

  about.html

  contact.html

Certifique-se de que o editor não adicionou outra extensão como .txt. Manter os três arquivos juntos permite que o href="about.html" encontre a página Sobre usando um caminho relativo. Se você mover um arquivo mais tarde para outra pasta, atualize os links relevantes. Termine primeiro a versão apenas em texto; depois você pode adicionar as imagens que tem permissão para usar, com um texto alternativo apropriado.

Crie a página inicial

Salve o documento completo a seguir com o nome index.html. Use os mesmos três destinos de menu em cada página. Os papéis de header, nav e main seguem o layout semântico em Estruturar uma página com elementos semânticos.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Início | Pequeno Jardim</title>
  <meta name="description" content="Página inicial do site de exercício Pequeno Jardim, com links para a apresentação e um exercício de formulário de contato.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navegação principal">
      <a href="index.html" aria-current="page">Início</a>
      <a href="about.html">Sobre</a>
      <a href="contact.html">Contato</a>
    </nav>
  </header>
  <main>
    <h1>Pequeno Jardim</h1>
    <p>Um pequeno guia para pessoas que estão começando a cultivar plantas.</p>
  </main>
  <footer><p>Site de exercício Pequeno Jardim</p></footer>
</body>
</html>

A abertura de index.html deve exibir um menu e o título « Pequeno Jardim ». Os links Sobre e Contato não funcionarão até que você crie os arquivos correspondentes na mesma pasta. O h1 aqui pertence à página de exemplo, não a este tutorial.

Crie as páginas Sobre e Contato

Salve o documento completo a seguir com o nome about.html. Ele mantém os mesmos destinos do menu enquanto dá à página Sobre seu próprio título, descrição e estado atual do menu. A distinção entre inspecionar os valores GET e receber mensagens segue a explicação da requisição em Estrutura do formulário e GET vs. POST.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sobre | Pequeno Jardim</title>
  <meta name="description" content="Apresentação do site de exercício Pequeno Jardim, destinado a pessoas que estão começando a cultivar plantas.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navegação principal">
      <a href="index.html">Início</a>
      <a href="about.html" aria-current="page">Sobre</a>
      <a href="contact.html">Contato</a>
    </nav>
  </header>
  <main>
    <h1>Sobre</h1>
    <p>Pequeno Jardim é um site de exercícios para pessoas que estão começando a cultivar plantas.</p>
  </main>
  <footer><p>Site de exercício Pequeno Jardim</p></footer>
</body>
</html>

Salve o documento completo a seguir com o nome contact.html. O formulário de prática envia seus valores para o documento atual usando GET; ele não encaminha uma mensagem a um destinatário.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contato | Pequeno Jardim</title>
  <meta name="description" content="Pratique digitar e validar um nome e uma mensagem de teste, sem enviar uma solicitação de contato real.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navegação principal">
      <a href="index.html">Início</a>
      <a href="about.html">Sobre</a>
      <a href="contact.html" aria-current="page">Contato</a>
    </nav>
  </header>
  <main>
    <h1>Exercício de formulário de contato</h1>
    <p>Este exemplo não envia nenhuma mensagem. Use apenas texto de teste.</p>
    <form method="get">
      <p><label for="visitor-name">Nome</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Mensagem</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Revisar os valores inseridos</button>
    </form>
  </main>
  <footer><p>Site de exercício Pequeno Jardim</p></footer>
</body>
</html>

Cada bloco é um documento completo, então salve-o como um arquivo inteiro em vez de colocar outro html ou main dentro de uma cópia existente. Mantenha os mesmos destinos de menu, mas coloque aria-current="page" apenas no link que representa este documento.

"Revisar os valores inseridos" não envia mensagem para ninguém. O navegador verifica os campos obrigatórios e submete ao documento atual usando GET. Teste apenas com texto de preenchimento, pois os valores enviados podem aparecer na URL. Um serviço de contato real requer um gerenciador do lado do servidor, proteções de privacidade, controles anti-spam e uma resposta clara de sucesso ou falha.

Use esta tabela para comparar as telas concluídas. O link atual aparece em negrito, enquanto aria-current comunica seu status independentemente desse tratamento visual.

Verifique os critérios de realização e as extensões opcionais

Complete a versão básica antes de adicionar uma extensão de cada vez: uma lista útil em Sobre, uma imagem com um texto alternativo apropriado ou informações opcionais em um elemento details. Repita as verificações de navegação, sintaxe e teclado após cada adição para que um novo problema possa estar relacionado a uma única alteração.

Ao atualizar um menu compartilhado, atualize as três cópias, mas coloque aria-current no link apropriado em cada uma delas. Reteste os caminhos relativos após a publicação: a capitalização do nome do arquivo e o diretório de publicação podem diferir do ambiente local.

Verifique o site finalizado

1. Abra index.html e confirme que cada link do menu abre o arquivo correto.
2. A partir de Sobre e Contato, navegue também para as outras duas páginas; não teste apenas o menu da página inicial.
3. Verifique se cada título de aba e h1 visível descrevem esta página.
4. Use Tab para acessar cada link e controle do campo de contato.
5. Tente enviar campos vazios, depois insira valores de teste e observe a URL.
6. Verifique cada arquivo com o Nu HTML Checker, corrija os erros e, em seguida, verifique novamente.

Se um link falhar, verifique primeiro o nome do arquivo e o caminho relativo. Ao modificar um menu compartilhado, atualize as três cópias. À medida que um site se desenvolve, torna-se importante manter consistentemente a marcação repetida. Neste exercício, espera-se um formulário que não envie realmente uma mensagem; o objetivo é construir e verificar a interface HTML. Separe os resultados do validador do comportamento real usando as instruções de Encontrar erros e validar um documento HTML.