Pular para conteúdo

Aula 08 - Projeto HTML 🏛️

Objetivo

Objetivo: Consolidar todos os conhecimentos adquiridos no Módulo 2 para construir a estrutura completa e semântica de uma Landing Page (Página de Destino) profissional, focando na organização e acessibilidade do código.

1. O Desafio: Era uma Vez uma Empresa... 🏢

Imagine que você foi contratado para criar a página inicial de uma startup tecnológica. Seu objetivo hoje não é a beleza (isso faremos com CSS depois!), mas sim a estrutura impecável.

Requisitos do Projeto:

  • Layout totalmente semântico.
  • Navegação funcional.
  • Uso de imagens e SVGs.
  • Uma tabela de serviços ou preços.
  • Um formulário de contato.

2. Planejamento do Layout 📐

Antes de codar, precisamos planejar o "esqueleto" do nosso site.

📊 Estrutura Proposta

graph TD
    BODY[body] --> H[header]
    BODY --> M[main]
    BODY --> F[footer]
    H --> NAV[nav]
    M --> S1[section: Sobre]
    M --> S2[section: Serviços]
    M --> S3[section: Contato]
    S2 --> TAB[table: Preços]
    S3 --> FOR[form: Contato]

3. Passo a Passo do Desenvolvimento 🚀

Etapa 1: O Esqueleto Mínimo

Crie o arquivo index.html e gere o boilerplate. Lembre-se do lang="pt-br" e do UTF-8.

Etapa 2: O Cabeçalho (<header>)

Adicione o logo (um SVG ou texto <h1>) e um menu de navegação (<nav>) com links internos para as seções da página.

Etapa 3: O Conteúdo Principal (<main>)

Divida o conteúdo em seções claras: * Hero Section: Um título cativante e uma descrição breve. * Serviços: Use uma tabela para mostrar o que a empresa oferece. * Equipe: Use uma lista para listar os fundadores. * Inscrição: Um formulário para capturar o e-mail do cliente.

Adicione informações de copyright e links para redes sociais em uma lista.

4. Checklist de Qualidade ✅

Antes de dar o projeto como concluído no terminal:

$ # Verificando o código...
$ # 1. Todas as imagens possuem atributo 'alt'?
$ # 2. O formulário possui labels conectados aos inputs?
$ # 3. Existe apenas um 'h1' na página?
$ # 4. A hierarquia de títulos (h2, h3) está correta?

[!IMPORTANT] A semântica não é apenas "organização", é empatia com quem usa tecnologias assistivas e inteligência para os motores de busca.

5. Mini-Projeto: Landing Page "Tech Solutions" 🎨

Este é o seu grande momento!

  1. Crie uma pasta chamada projeto-html.
  2. Dentro dela, crie as pastas assets e o arquivo index.html.
  3. Implemente a estrutura planejada acima.
  4. Dica: Use o site Unsplash ou Pexels para buscar imagens reais para o seu projeto.
  5. Desafio Extra: No seu formulário, use pelo menos 5 tipos diferentes de input (text, email, tel, date, select).

6. Exercícios de Revisão do Módulo 📝

  1. Qual a tag que representa o conteúdo único de uma página?
  2. Por que o alt em imagens e o label em formulários são obrigatórios para acessibilidade?
  3. O que define se um conteúdo deve ser um article ou uma section?
  4. Qual a diferença entre um link interno e um link externo?
  5. Qual tag de tabela deve ser usada para os títulos das colunas?

Fim do Módulo 2! 🎉 Prepare-se, pois na próxima aula entraremos no mundo das cores e formas com o Introdução ao CSS! 🖌️