Pular para conteúdo

Aula 08 - Projeto HTML 🏛️

Consolidando o Conhecimento em HTML5

👋 Olá!

Chegou o grande dia do nosso primeiro projeto completo.

Hoje vamos transformar tudo o que aprendemos em um site real e estruturado! 🚀

Agenda de Hoje 📅

  1. O Que Vamos Construir?
  2. Planejamento (Sitemap)
  3. O Esqueleto do Site
  4. Seções Semânticas
  5. Checklist de Qualidade
  6. Mão na Massa!

🏛️ 1. O Projeto

Uma Landing Page 📄

  • Uma página de destino focada em um objetivo.
  • Vamos criar a estrutura de uma Startup de Tecnologia.

O que será avaliado? ✅

  • Semântica (Tags corretas).
  • Acessibilidade (alt, labels).
  • Organização do código.
  • Hierarquia de títulos.

📐 2. Planejamento

O Sitemap 📊

graph TD
    H[header] --> N[nav]
    M[main] --> S1[section: Hero]
    M --> S2[section: Serviços]
    M --> S3[section: Contato]
    F[footer] --> Info[Info / Social]

🏗️ 3. O Esqueleto (Boilerplate)

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Landing Page Tech</title>
</head>
<body>
  <!-- Conteúdo -->
</body>
</html>

🔝 4. O Cabeçalho (Header)

  • Logo (h1).
  • Menu (nav + ul + li + a).

🏠 5. Conteúdo Principal (Main)

Hero Section ⚡

  • O "cartão de visitas" do site.
  • Título impactante (h1 ou h2).
  • Descrição clara.

Serviços (Table) 📊

  • Use uma tabela para mostrar planos ou serviços.
  • Colunas: Serviço, Descrição, Valor.

Contato (Form) 📥

  • Nome, E-mail e Mensagem.
  • Botão de envio (Submit).

🧩 6. Checklist de Acessibilidade

Imagens 🖼️

  • Todas têm o atributo alt?
  • Descrição clara para quem não vê?

Formulários 📝

  • Todo input tem um <label> correspondente?
  • O id está batendo com o for?

Títulos 👑

  • Existe apenas um h1?
  • A ordem h2 -> h3 -> h4 está lógica?

👨‍💻 7. Dicas de Ouro

  • Comente seu código para se organizar.
  • Recue o código (indentação) corretamente.
  • Use nomes de arquivos em minúsculas.

Resumo do Módulo ✅

  • Fundamentos (Browser, Cliente/Servidor).
  • Estrutura (Boilerplate).
  • Semântica (Tags de significado).
  • Elementos (Listas, Links, Imagens, Tabelas, Forms).

🚀 Desafio Final

Implementar o index.html completo seguindo todas as normas semânticas.

Próxima Aula 🎨

Início do Módulo 3: CSS3

Onde vamos dar estilo, cor e forma a esse esqueleto que criamos hoje!

Dúvidas? 🤔

"A estrutura é a alma da Web. O estilo é o seu corpo emocional."