Projeto HTML: construa uma página de perfil completa

O projeto final é uma página de perfil construída apenas com decisões de HTML: documento válido, hierarquia, navegação, regiões semânticas e formulário. Você vai planejar primeiro, implementar em partes e revisar por evidências, não pela sensação de que “parece pronto”.

Pense numa pequena exposição sobre você. Antes de decorar as paredes, a gente decide a entrada, a ordem das salas, as placas e onde visitantes deixam contato. No HTML, o documento é o espaço; títulos e regiões formam o percurso; links são atalhos; o formulário coleta uma mensagem. O limite é importante: essa planta não define cores, colunas nem animações. CSS e JavaScript poderão acrescentar apresentação e comportamento sem mudar o significado básico.

Desenhe o conteúdo com palavras

Escreva primeiro uma lista simples:

Nome e profissão
Navegação: Sobre, Habilidades, Contato
Sobre: um parágrafo
Habilidades: uma lista
Contato: e-mail do visitante
Rodapé: identificação do projeto

Esse rascunho impede que você escolha tags apenas conforme elas aparecem no editor. Agora mapeie o conteúdo: introdução em header, links principais em nav, conteúdo único em main, cada assunto em section e informação final em footer.

Construa uma seção por vez

Comece pela introdução e navegação:

<header>
  <h1>Ana Lima</h1>
  <p>Estudante de desenvolvimento web</p>
  <nav aria-label="Principal">
    <a href="#sobre">Sobre</a>
    <a href="#habilidades">Habilidades</a>
    <a href="#contato">Contato</a>
  </nav>
</header>

Cada href aponta para um id que ainda será criado. Esse é um contrato pequeno: se o link diz #habilidades, a seção precisa ter id="habilidades". Depois adicione o conteúdo principal:

<main>
  <section id="sobre">
    <h2>Sobre</h2>
    <p>Gosto de transformar ideias em páginas compreensíveis.</p>
  </section>

  <section id="habilidades">
    <h2>Habilidades em construção</h2>
    <ul>
      <li>HTML semântico</li>
      <li>Acessibilidade</li>
      <li>Organização de conteúdo</li>
    </ul>
  </section>
</main>

Salve e teste os links antes de criar o formulário. Cada clique deve levar ao título correto. Trabalhar em mudanças pequenas facilita encontrar o ponto que quebrou.

Adicione contato sem fingir um servidor

Esta versão coleta apenas o e-mail:

<section id="contato">
  <h2>Contato</h2>
  <form>
    <label for="email">Seu e-mail</label>
    <input id="email" name="email" type="email" required>
    <button type="submit">Preparar contato</button>
  </form>
</section>

Sem action de um serviço real, não prometa que a mensagem será entregue. No laboratório, o JavaScript impede o envio justamente para manter a prática local e segura. Num projeto posterior, uma API receberá e validará os dados novamente.

Revise como uma pessoa que não escreveu o código

Faça quatro passagens. Primeiro, leia apenas os títulos e confirme que não há saltos sem motivo. Segundo, use Tab para percorrer links, campos e botão. Terceiro, clique em cada item da navegação. Quarto, envie o formulário vazio e com um e-mail inválido para observar a validação.

Abra também o painel de estrutura ou acessibilidade das ferramentas do navegador. Confirme que existe um conteúdo principal, que os títulos aparecem na ordem esperada e que o campo tem um nome acessível. Essa inspeção liga a marcação escrita à árvore que outras tecnologias realmente consomem.

Por fim, copie a marcação completa para o validador do W3C. Corrija erros, mas leia cada mensagem antes: o objetivo é reconhecer a regra, não apenas fazer o aviso desaparecer. Validação não mede se sua descrição é clara; revise também o texto e o alt de qualquer imagem que adicionar.

Personalize o laboratório sem remover os critérios. Quando o status mostrar as seções e os links esperados, os controles tiverem nomes claros e o documento for válido, você concluiu a base estrutural. O próximo curso usará CSS para trabalhar a aparência sem desmontar essa fundação.