● Entender os tipos de listas no HTML;
● Usar e combinar listas ordenadas, não ordenadas e de definição;
● Criar menus e submenus com listas aninhadas;
● Aprender estrutura semântica de menus de navegação;
● Aplicar boas práticas de acessibilidade e organização.
Existem três tipos básicos de listas no HTML:
Não ordenada → <ul> → Itens sem sequência (usam marcadores).
Ordenada → <ol> → Itens numerados (1, 2, 3…).
De definição → <dl> → Usada para pares de termo e descrição.
🔸 Define lista de itens com marcadores (bullets).
Cada item é criado com <li> (list item).
<h3>Linguagens que estudaremos</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
🔹 Resultado:
● HTML
● CSS
● JavaScript
Você pode mudar o formato do marcador (com CSS depois).
Usada quando há sequência de passos, etapas ou ranking.
<h3>Passos para criar uma página web</h3>
<ol>
<li>Planejar o conteúdo</li>
<li>Escrever o HTML</li>
<li>Estilizar com CSS</li>
<li>Adicionar interatividade com JS</li>
</ol>
🔹 Resultado:
1. Planejar o conteúdo
2. Escrever o HTML
3. Estilizar com CSS
4. Adicionar interatividade com JS
O atributo type altera o marcador ou numeração:
1 → Números (padrão)
A → Letras maiúsculas
a → Letras minúsculas
I → Algarismos romanos (maiúsculos)
i → Algarismos romanos (minúsculos)
<ol type="A">
<li>Front-end</li>
<li>Back-end</li>
<li>Full Stack</li>
</ol>
📝 Também é possível definir o número inicial com start="5".
Usada para glossários, vocabulários ou pares de termo e descrição.
<h3>Glossário de Termos</h3>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação para estruturar páginas web.</dd>
<dt>CSS</dt>
<dd>Folhas de estilo responsáveis pela aparência visual das páginas.</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação para adicionar interatividade.</dd>
</dl>
🔹 <dt> → termo;
🔹 <dd> → descrição do termo.
Podemos criar listas dentro de listas, formando hierarquias.
<h3>Áreas da Programação</h3>
<ul>
<li>Desenvolvimento Web
<ul>
<li>Front-end</li>
<li>Back-end</li>
</ul>
</li>
<li>Desenvolvimento Mobile
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</li>
</ul>
🔹 Repare que colocamos uma <ul> dentro de uma <li>.
🔹 Ideal para menus com submenus.
Menus em HTML são criados geralmente a partir de listas, dentro de uma <nav>.
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
🔹 Os links servem como itens de navegação.
🔹 Com CSS, você pode transformá-lo em uma barra horizontal ou vertical elegante.
Podemos usar listas aninhadas para menus com mais níveis:
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Cursos</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
Essa estrutura é semântica e limpa.
Com CSS e JavaScript, é possível criar menus dropdown a partir disso.
Você também pode usar listas para criar botões sociais ou ícones organizados.
<ul>
<li><a href="https://instagram.com">Instagram</a></li>
<li><a href="https://facebook.com">Facebook</a></li>
<li><a href="https://twitter.com">Twitter</a></li>
</ul>
<style>
nav ul {
list-style-type: none; /* remove marcadores */
display: flex;
gap: 20px;
background: #f0f0f0;
padding: 10px;
}
nav li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
nav li a:hover {
color: #0077cc;
}
</style>
💬 Com isso, você tem um menu moderno e horizontal.
Later, pode ser aprimorado para menus responsivos (hambúrguer) no CSS avançado.
1. Use listas para conjuntos de itens relacionados (não apenas layout).
2. Sempre mantenha a semântica correta (ul ou ol conforme o contexto).
3. Adicione descrições com títulos (h2, h3, etc.) quando necessário.
4. Use links descritivos (evite “Clique aqui”).
5. Combine menus de lista com tags semânticas como <nav>.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Menu com Listas</title>
<style>
nav {
background-color: #222;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li ul {
display: none;
position: absolute;
top: 30px;
left: 0;
background: #333;
list-style: none;
padding: 10px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
padding: 5px 0;
}
</style>
</head>
<body>
<header>
<h1>Site de Cursos</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li>
<a href="#">Cursos</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
</body>
</html>
👉 Esse menu é totalmente semântico, organizado e acessível.
Com CSS adicional, pode ser refinado para visualizações móveis e responsivas.
Crie um arquivo chamado listas_e_menus.html contendo:
1. Uma lista ordenada com as etapas de criação de um site;
2. Uma lista de definição com três termos e descrições;
3. Um menu de navegação completo com submenus;
4. Estilize o menu com CSS para remover marcadores e mudar a cor do hover;
5. Inclua um título <h1> e uma breve introdução explicando a função das listas.
Crie um menu lateral vertical com ícones svg (use imagens pequenas dentro dos <li>).
Hoje você aprendeu:
● Os três tipos principais de listas (ordenadas, não ordenadas e de definição);
● A aninhá-las para criar hierarquias e menus;
● Como estruturar menus de navegação com listas e <nav>;
● Como aplicar boas práticas e semântica adequada;
Como transformar listas simples em menus interativos e acessíveis.
Na Aula 11, entraremos em Tabelas e Estruturas Responsivas com HTML e CSS,
entendendo como ajustar elementos e componentes para diferentes tamanhos de tela e dispositivos móveis.
● Compreender o conceito de layout e responsividade;
● Aplicar estrutura HTML semântica preparada para design flexível;
● Aprender o uso correto da meta tag viewport;
● Criar uma estrutura de página base com cabeçalho, conteúdo, barra lateral e rodapé;
● Introduzir propriedades CSS fundamentais para ajuste de layout;
Montar um protótipo de site responsivo simples.
➡️ Layout significa a forma como os elementos de uma página estão posicionados — cabeçalho, menus, conteúdo, rodapés etc.
➡️ Responsividade é a capacidade da página se adaptar automaticamente a diferentes telas (computadores, tablets, celulares).
Hoje, usuários acessam sites de múltiplos dispositivos. Portanto, é essencial criar páginas flexíveis e adaptáveis, sem perder legibilidade ou usabilidade.
O primeiro passo para um site responsivo é adicionar a meta tag viewport dentro do <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ela informa ao navegador que:
● a largura da página deve se ajustar à largura da tela do dispositivo (width=device-width);
● e o zoom inicial deve ser 100% (initial-scale=1.0).
Sem ela, o site pode parecer "encolhido" ou ampliado no celular.
Uma página HTML responsiva básica é composta por:
● <header> → Cabeçalho (logo e menu principal)
● <nav> → Menu de navegação
● <main> → Conteúdo principal
● <aside> → Painel lateral (opcional)
● <footer> → Rodapé
💡 Estrutura exemplo:
<body>
<header>Cabeçalho</header>
<nav>Menu</nav>
<main>Conteúdo principal</main>
<aside>Barra lateral</aside>
<footer>Rodapé</footer>
</body>
Vamos usar CSS para transformar essa estrutura em um layout visual.
💡 Exemplo prático:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Responsivo</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 15px;
}
nav {
background-color: #555;
color: white;
padding: 10px;
text-align: center;
}
main {
float: left;
width: 70%;
padding: 20px;
}
aside {
float: right;
width: 25%;
background-color: #f0f0f0;
padding: 20px;
}
footer {
clear: both;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Meu Site Responsivo</h1>
</header>
<nav>
<a href="#">Início</a> |
<a href="#">Serviços</a> |
<a href="#">Contato</a>
</nav>
<main>
<h2>Bem-vindo!</h2>
<p>Este é um exemplo de página com layout organizado em áreas principais.</p>
</main>
<aside>
<h3>Notícias</h3>
<p>Aqui vão informações adicionais, links e widgets.</p>
</aside>
<footer>
<p>© 2024 - Curso HTML do Zero ao Avançado</p>
</footer>
</body>
</html>
🔹 Aqui usamos float para criar colunas lado a lado — uma técnica tradicional.
Na sequência, você aprenderá como substituir isso por Flexbox e Grid, de forma mais moderna.
Para ajustar o layout em telas menores, usamos media queries, que definem “regras condicionais” conforme o tamanho da tela.
💡 Exemplo de ajuste para celular:
@media (max-width: 768px) {
main, aside {
width: 100%;
float: none;
}
nav a {
display: block;
padding: 10px;
}
}
🔹 Isso faz com que:
● main e aside se alinhem verticalmente em vez de lado a lado;
o menu se reordene em blocos verticais (ideal para celulares).
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Responsivo Completo</title>
<style>
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
}
header, footer {
background: #333;
color: #fff;
text-align: center;
padding: 15px;
}
nav {
background: #555;
text-align: center;
}
nav a {
text-decoration: none;
color: white;
padding: 10px 20px;
display: inline-block;
}
nav a:hover {
background: #777;
}
main {
float: left;
width: 70%;
padding: 20px;
}
aside {
float: right;
width: 30%;
background: #f4f4f4;
padding: 20px;
}
footer {
clear: both;
}
@media (max-width: 768px) {
main, aside {
width: 100%;
float: none;
}
nav a {
display: block;
border-top: 1px solid #666;
}
}
</style>
</head>
<body>
<header>
<h1>Exemplo de Layout Responsivo</h1>
</header>
<nav>
<a href="#">Início</a>
<a href="#">Serviços</a>
<a href="#">Portfólio</a>
<a href="#">Contato</a>
</nav>
<main>
<h2>Conteúdo Principal</h2>
<p>Este layout ajusta automaticamente sua largura e a ordem dos elementos dependendo do tamanho da tela. Experimente redimensionar a janela!</p>
</main>
<aside>
<h3>Lateral</h3>
<p>Conteúdo adicional, links ou anúncios podem ser colocados aqui.</p>
</aside>
<footer>
<p>Curso HTML do Zero ao Avançado © 2024</p>
</footer>
</body>
</html>
● Em telas grandes, os elementos ficam lado a lado (float e width em porcentagem);
● Em telas pequenas, o @media redefine tudo para formato coluna única;
● As porcentagens tornam a estrutura fluida em vez de fixa;
● A meta viewport garante escala adequada no mobile.
1. Sempre inclua a meta viewport.
2. Use unidades relativas (%, em, rem, vh, vw) em vez de pixels fixos.
3. Estruture o HTML semânticamente — ajuda na indexação e acessibilidade.
4. Pense mobile-first: desenhe primeiro para telas pequenas e depois expanda.
5. Evite elementos muito largos e imagens pesadas.
6. Teste em múltiplas resoluções (mobile, tablet e desktop).
Crie um arquivo layout_responsivo.html contendo:
1. Estrutura HTML com <header>, <nav>, <main>, <aside> e <footer>;
2. Adicione pelo menos três links no menu e duas seções no conteúdo principal;
3. Aplique formatação básica de layout com CSS;
4. Adicione media queries para reorganizar o conteúdo em telas menores (até 768px);
5. Inclua a meta viewport.
Substitua a técnica de float por Flexbox para dominar layouts modernos (aprenderemos em detalhes nas próximas aulas de CSS).
Hoje você aprendeu:
● Como estruturar um layout semântico em HTML;
● Como preparar uma página responsiva com a meta viewport;
● A organizar seções usando CSS básico e media queries;
● A criar layouts adaptativos para desktop e dispositivos móveis.
Na Aula 12, daremos início ao CSS Moderno: Introdução ao Flexbox e Grid Layout,
para criar estruturas ainda mais poderosas, limpas e flexíveis.
● Entender a diferença entre Flexbox e Grid;
● Utilizar Flexbox para criar layouts unidimensionais (linhas ou colunas);
● Utilizar Grid para criar layouts bidimensionais (linhas e colunas);
● Montar páginas completas e responsivas com poucos comandos CSS;
● Aprender boas práticas e estratégias modernas de layout.
💡 Flexbox (Flexible Box Layout) é um sistema para organizar elementos em linha ou coluna, adaptando automaticamente o espaço disponível.
➡️ É ideal para menus, cards, barras de navegação e rodapés.
A ideia central é:
Declarar um contêiner como display: flex; e definir como seus filhos se alinham.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
background: #f2f2f2;
padding: 10px;
}
.item {
background: #0077cc;
color: white;
padding: 20px;
margin: 10px;
flex: 1;
text-align: center;
}
● display: flex → ativa o modo flexível no contêiner;
● flex: 1 → faz com que todos os itens se distribuam igualmente no espaço;
● Os itens se tornam responsivos automaticamente, sem precisar calcular larguras.
Por padrão, o Flexbox organiza os elementos em linha (row).
Mas podemos mudar isso:
row (padrão) → itens em linha horizontal
row-reverse → inverte a ordem horizontal
column → itens em coluna vertical
column-reverse → inverte a ordem vertical
.container {
display: flex;
flex-direction: column;
}
Com Flexbox é fácil centralizar elementos no eixo horizontal e vertical — algo que antes exigia muitos truques.
justify-content → alinha no eixo principal (horizontal por padrão)
align-items → alinha no eixo transversal (vertical por padrão)
align-content → alinha várias linhas (quando há quebra)
.container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Centraliza verticalmente */
height: 300px;
background: #ddd;
}
Antes, usávamos margin-right para espaçar elementos — agora basta usar gap:
💡 Exemplo:
.container {
display: flex;
gap: 20px;
}
✅ gap funciona em Flexbox e Grid!
<header class="navbar">
<div class="logo">MeuSite</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #222;
color: white;
padding: 10px 20px;
}
.navbar ul {
display: flex;
gap: 20px;
list-style: none;
}
.navbar a {
color: white;
text-decoration: none;
}
🔹 space-between cria espaço entre os itens laterais (logo e menu).
🔹 align-items: center centraliza verticalmente.
💡 Grid Layout é uma ferramenta para criar layouts bidimensionais (linhas e colunas).
Diferente do Flexbox, ele não trabalha só com um eixo — é perfeito para grades complexas, dashboards, e páginas estruturadas.
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item {
background: #0077cc;
color: white;
padding: 30px;
text-align: center;
}
● display: grid → ativa o modo Grid;
● grid-template-columns → define colunas (duas colunas iguais 1fr 1fr);
● gap → espaço entre os itens;
● 1fr significa “uma fração do espaço disponível”.
💡 Exemplo com 3 colunas fixas e 2 linhas automáticas:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto auto;
gap: 15px;
}
💬 Isso cria uma estrutura perfeita para sidebar + conteúdo + publicidade.
Podemos indicar em que linha e coluna cada elemento vai:
.item1 {
grid-column: 1 / 3; /* ocupa duas colunas */
grid-row: 1 / 2; /* fica na primeira linha */
}
🔹 Isso cria layouts flexíveis e controlados sem precisar usar floats ou posições absolutas!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout com Grid</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header { grid-area: header; background: #333; color: white; text-align: center; padding: 10px; }
nav { grid-area: nav; background: #444; color: white; padding: 10px; }
main { grid-area: main; padding: 20px; background: #f9f9f9; }
aside { grid-area: aside; background: #eee; padding: 10px; }
footer { grid-area: footer; background: #333; color: white; text-align: center; padding: 10px; }
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header><h1>Site com Grid</h1></header>
<nav>Menu lateral</nav>
<main>Área principal de conteúdo</main>
<aside>Barra lateral</aside>
<footer>Rodapé</footer>
</div>
</body>
</html>
🔹 Esse layout usa grid-template-areas — uma forma elegante de definir o mapa do conteúdo.
🔹 O media query reorganiza o layout para telas pequenas, empilhando uma área sobre a outra.
Layout em uma única dimensão (linha ou coluna) → Flexbox
Layout com duas dimensões (linhas e colunas) → Grid
Menu de navegação, cards, botões alinhados → Flexbox
Estrutura principal de página → Grid
Alinhamentos internos (centro, fim, etc.) → Flexbox
Layout completo de site → Grid + Flexbox combinados
💬 Dica: frequentemente usamos Grid para o esqueleto e Flexbox para o conteúdo interno.
Crie um arquivo layout_moderno.html contendo:
1. Estrutura HTML com header, menu, conteúdo e rodapé;
2. Use Flexbox para o menu superior (itens alinhados lado a lado);
3. Use CSS Grid para compor o layout principal da página;
4. Adicione media queries que reorganizem tudo para telas menores;
5. Mantenha margens, espaçamentos e cores consistentes.
✅ Desafio Extra:
Crie um conjunto de cards responsivos (3 por linha no desktop, 1 por linha no celular) usando Flexbox ou Grid.
Hoje você aprendeu:
● A diferença entre Flexbox e Grid;
● A criar layouts modernos, limpos e responsivos com poucas linhas de CSS;
● A organizar conteúdo facilmente sem usar float;
● Boas práticas para combinar Flexbox e Grid em um site profissional.
Na Aula 13, entraremos em Formatação Visual Avançada com CSS — Cores, Fontes e Espaçamento,
aprendendo a deixar seus layouts verdadeiramente atraentes e harmônicos.
💻 Aula 13: 👉 Formatação Visual Avançada com CSS: Cores, Fontes e Espaçamento.
💻 Aula 14: 👉 Interatividade e Pseudo-classes do CSS: Hover, Active, Focus e Muito Mais.
💻 Aula 15: 👉 Animações e Efeitos Avançados no CSS: Transform, Transition e Keyframes.
📚 Adquira Nosso Livro Impresso