Aula 07

💡Organizando a Página com Múltiplas <div>

🎯 Objetivo da aula:

Aprender a dividir visualmente uma página usando várias <div>s para representar partes como cabeçalho, conteúdo e rodapé. Os alunos vão estilizar cada parte separadamente com CSS interno, entendendo melhor como estruturar uma página simples.

🧩 O que é essa organização com múltiplas <div>s?

Cada parte da página pode ser dividida em blocos usando <div>, por exemplo:

<div class="cabecalho"> → onde fica o título e o nome do site
<div class="conteudo"> → o que será exibido no centro da tela
<div class="rodape"> → informações finais (ex: direitos autorais)

Essa é a base de qualquer site moderno, mesmo os mais complexos!

🧾 Código exemplo explicativo

<!DOCTYPE html>

<head>

<title>Página Estruturada com div</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

}

.cabecalho {

background-color: #007BFF;

color: white;

text-align: center;

padding: 20px;

}

.conteudo {

background-color: #f4f4f4;

padding: 30px;

}

.rodape {

background-color: #333;

color: white;

text-align: center;

padding: 15px;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>Portal do Aluno</h1>

<p>Bem-vindo à sua página de estudos</p>

</div>

<h2>Sobre o curso</h2>

<p>Você está aprendendo HTML e CSS para construir páginas incríveis!</p>

</div>

</div>

</body>

</html>

🛠️ Exercícios simples

Copie o código acima e façam alterações pontuais, para entenderem a função de cada <div>.

🔹 Exercício 1 – Modificar o cabeçalho

Altere o texto da <div class="cabecalho"> para o nome do aluno e a frase “Meu primeiro site organizado”.

🔹 Exercício 2 – Editar o conteúdo

Na <div class="conteudo">, adicione um parágrafo com uma pequena descrição sobre você e use um <h2> com o título “Sobre mim”.

🔹 Exercício 3 – Mudar o rodapé

Na <div class="rodape">, troque o texto para:
“Criado por [seu nome] – Projeto da aula 7”.

Desafio! 👺

🎯 Desafio final – Página “Minha Bio”

Crie uma página chamada minha_bio.html com as seguintes seções, usando três <div>s separadas:

✅ Cabeçalho:

Fundo com a cor de preferência
Texto branco
Título com seu nome
Subtítulo com sua turma e ano

✅ Conteúdo:

Fundo claro
Parágrafo sobre o que você gosta de fazer
Uma imagem pequena representando você (foto real ou tema que te represente)

✅ Rodapé:

Fundo preto
Texto branco com centralização
Frase final como “Site feito por mim – Aula 7”