Aula 05

Introdução ao uso da tag <div> no HTML

O que é <div>?

A tag <div> é usada para agrupar elementos em um bloco único. Você pode colocar dentro dela textos, imagens, listas, tabelas, botões, e o que mais precisar.

Ela não tem valor visual por si só, mas é essencial para organizar o conteúdo de um site, aplicar estilos com CSS e preparar páginas com seções diferentes.

O que significa div?

A palavra "div" vem de "division", que significa divisão em inglês.
Ou seja, você usa <div> para criar divisões ou blocos de conteúdo dentro da página.

Exemplo básico com CSS aplicado diretamente

<!DOCTYPE html>

<head>

<title>Exemplo com div</title>

</head>

<body>

<h2>Seção de Boas-Vindas</h2>

<p>Este texto está dentro de uma div. Podemos aplicar estilos a ele como cor de fundo, borda e espaçamento.</p>

</div>

</body>

</html>

O que esse código faz?

<div> cria um bloco que agrupa o título e o parágrafo.
background-color: lightgray; coloca um fundo cinza.
padding: 20px; adiciona espaço interno (entre o texto e a borda).
border: 1px solid black; desenha uma borda preta ao redor do bloco.

Hora do exercício! 🏋️🔥

Exercícios práticos

📄 Exercício 1 – Caixa simples de conteúdo

Crie uma <div> com:

Fundo azul claro
Um título <h3> com seu nome
Um parágrafo explicando o que você aprendeu hoje
Uma borda preta e padding de 15px

📄 Exercício 2 – Duas seções com estilos diferentes

Crie duas <div>s empilhadas:

A primeira com fundo amarelo, texto centralizado e título “Sobre mim”
A segunda com fundo branco, parágrafo alinhado à esquerda e borda cinza

📄 Exercício 3 – Espaçamento entre blocos

Adicione margin-bottom: 20px; entre as divs criadas no exercício 2.

Desafio! 👺

<!DOCTYPE html>

<head>

<title>Contato Pessoal</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

background-color: #f9f9f9;

}

.cabecalho {

background-color: #e0e0e0;

text-align: center;

padding: 20px;

}

.formulario {

background-color: #ffffff;

width: 90%;

max-width: 500px;

margin: 20px auto;

padding: 25px;

border: 1px solid #ccc;

border-radius: 5px;

}

.formulario h3 {

margin-top: 0;

}

.formulario label {

display: block;

margin-bottom: 5px;

font-weight: bold;

}

.formulario input,

.formulario textarea {

width: 100%;

padding: 8px;

margin-bottom: 15px;

border: 1px solid #aaa;

border-radius: 4px;

}

.formulario button {

background-color: #4CAF50;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;

border-radius: 4px;

}

.formulario button:hover {

background-color: #45a049;

}

.rodape {

background-color: #333;

color: white;

text-align: center;

padding: 15px;

margin-top: 40px;

}

</style>

</head>

<body>

<h2>João da Silva</h2>

<p>Estudante de Web Design – essa é minha página de contato.</p>

</div>

<h3>Fale comigo</h3>

<form>

<label for="mensagem">Mensagem:</label>

<button type="submit">Enviar</button>

</form>

</div>

</div>

</body>

</html>

🎯 Instruções para os alunos

Crie um arquivo chamado contato.html.
Copie a estrutura base acima e substitua pelo seu nome e informações.
Personalize o estilo como quiser (cores, tamanhos, fontes, bordas...).
Certifique-se de que a página funcione bem em tela cheia e em dispositivos menores.

🟡 O que significa o ponto (.) no CSS?

No CSS, o ponto (.) é usado para selecionar elementos por classe.

✅ Exemplo:

.formulario {

background-color: white;

}

Esse código diz:
"Aplique background-color: white a qualquer elemento HTML que tenha class="formulario"."

🔹 Quando usar uma classe (.)?

Quando vários elementos vão compartilhar o mesmo estilo.
Quando você quer organizar e reutilizar estilos em partes específicas da página.