Embedded Files
💻 Aula: Estruturando um Site com HTML e CSS (Cabeçalho, Conteúdo e Rodapé)
🎯 Objetivos da Aula
Compreender a estrutura básica de uma página HTML.
Identificar e utilizar corretamente as tags <header>, <main>, <footer> e outras essenciais.
Estilizar a página com CSS para aplicar cores, espaçamento e organização visual.
Estimular a criatividade com personalização temática.
🎨 CSS Básico
CSS pode ser colocado dentro da tag <style> no <head>.
Exemplo:
header {
background-color: blue;
color: white;
text-align: center;
}
Outras propriedades úteis:
background-color: cor de fundo
color: cor do texto
text-align: alinhamento
padding: espaço interno
margin: espaço externo
border-radius: bordas arredondadas
width e height: tamanho de elementos
🧪 Modelo Base para os Exercícios
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Site</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
main {
background-color: #ffffff;
padding: 40px;
min-height: 300px;
text-align: center;
}
footer {
background-color: #2c3e50;
color: white;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Bem-vindo ao Meu Site</h1>
</header>
<main>
<p>Este é o conteúdo principal da página.</p>
<img src="https://i.imgur.com/4AiXzf8.jpeg" width="300">
</main>
<footer>
<p>Site criado por Seu Nome</p>
</footer>
</body>
</html>
🧠 Instruções para os Alunos
Use sempre as três partes: <header>, <main>, <footer>
Personalize cores, textos e imagens
Cada exercício propõe uma nova ideia de site
Mantenha a estrutura, mas mude os conteúdos, cores e temas
🧩 10 Exercícios de Personalização
1️⃣ Apresentação Pessoal
Seu nome no cabeçalho
Foto + breve biografia no conteúdo
Rodapé com "Página criada por [Seu Nome]"
2️⃣ Filme Favorito
Nome do filme no cabeçalho
Imagem e resumo do enredo no corpo
Rodapé com diretor e ano
3️⃣ Anime ou Desenho
Nome do anime/desenho no topo
Imagem + descrição dos personagens
Rodapé com plataforma onde é exibido
4️⃣ Produto Fictício
Nome do produto (perfume, livro, bebida, etc.)
Imagem + descrição criativa
Rodapé com preço fictício
5️⃣ Animal de Estimação
Nome do animal no cabeçalho
Foto e curiosidades
Rodapé com frase de carinho
6️⃣ Loja Virtual Fictícia
Nome da loja
Dois produtos com imagem e descrição
Rodapé com “Entregamos em todo o Brasil”
7️⃣ Viagem dos Sonhos
Nome do destino
Imagem e parágrafo explicando por que deseja ir
Rodapé com bandeira ou frase típica do país
8️⃣ Receita Favorita
Nome da receita
Ingredientes e modo de preparo (texto simples)
Rodapé com “Testado e aprovado por [Seu Nome]”
9️⃣ Jogo Eletrônico
Nome do jogo no cabeçalho
Imagem + curiosidades
Rodapé com nome da desenvolvedora
🔟 Página de Agradecimento
"Obrigado!" no cabeçalho
Texto explicando quem está sendo agradecido e por quê
Rodapé com seu nome e data
Google Sites
Report abuse