Divisões
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 25 de 60.
Imagine que você queira dividir sua página da web em blocos para organizar seu conteúdo. No HTML, você pode usar uma div para agrupar elementos.
As tags div são ótimas para criar layouts e separar seções.
Aqui está a sintaxe básica:
<div>
<!-- Content goes here -->
</div>Você pode adicionar outros elementos HTML dentro de um div, como parágrafos, títulos, imagens e até mesmo outros elementos div.
Aqui está um exemplo de como usar tags div para criar um layout simples com um cabeçalho, área de conteúdo principal e rodapé:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>
Desafio
FácilCrie 3 elementos div, colocados um após o outro no seu documento HTML.
Dentro de cada div, adicione uma tag p que contenha o nome de um filme que você goste.
Folha de consulta
Use tags div para agrupar elementos e organizar o conteúdo em blocos:
<div>
<!-- O conteúdo vai aqui -->
</div>Você pode aninhar outros elementos HTML dentro de uma div, incluindo parágrafos, títulos, imagens e outros elementos div:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé