📚Módulo 4

🎯 Objetivos da Aula

●     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.

🧩 1. Estrutura e Tipos de Listas no HTML

Existem três tipos básicos de listas no HTML:

Tipo                                       Tag                                         Função

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.

Lista Não Ordenada (<ul>)

🔸 Define lista de itens com marcadores (bullets).
  Cada item é criado com <li> (list item).

💡 Exemplo:

<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).

🔹 3. Lista Ordenada (<ol>)

Usada quando há sequência de passos, etapas ou ranking.

💡 Exemplo:

<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

⚙️ Personalizando o tipo de numeração

O atributo type altera o marcador ou numeração:

Valor de type              Resultado

1                     →                 Números (padrão)

A                    →                 Letras maiúsculas

a                     →                 Letras minúsculas

I                     →                 Algarismos romanos (maiúsculos)

i                     →                 Algarismos romanos (minúsculos)

💡 Exemplo:

<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".

🔹 4. Lista de Definição (<dl>, <dt>, <dd>)

Usada para glossários, vocabulários ou pares de termo e descrição.

💡 Exemplo:

<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.

🧱 5. Listas Aninhadas (sublistas)

Podemos criar listas dentro de listas, formando hierarquias.

💡 Exemplo:

<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.

🧭 6. Criando um Menu Navegável com Listas

Menus em HTML são criados geralmente a partir de listas, dentro de uma <nav>.

💡 Exemplo:

<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.

🌐 7. Submenus (menus suspensos)

Podemos usar listas aninhadas para menus com mais níveis:

💡 Exemplo:

<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.

🧩 8. Lista de Ícones e Links Sociais

Você também pode usar listas para criar botões sociais ou ícones organizados.

💡 Exemplo:

<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>

🎨 9. Estilizando Listas e Menus com CSS

<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.

🧠 10. Boas Práticas para Listas e Menus

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>.

💻 Exercício Prático 10

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.

✅ Desafio Extra:

 Crie um menu lateral vertical com ícones svg (use imagens pequenas dentro dos <li>). 

💬 Conclusão da Aula

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. 

🔜 Próxima aula:

  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.

⚙️ Layouts e Design Responsivo

🎯 Objetivos da Aula

●     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. 

🧩 1. O que é Layout e Responsividade?

➡️ 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.

⚙️ 2. Meta Tag Viewport

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.

🧱 3. Estrutura base de um layout moderno

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>

🧠 5. Responsividade com Media Queries (introdução ao CSS adaptativo)

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). 

🔍 7. Entendendo o funcionamento

●     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.

🧠 8. Boas práticas de layout responsivo

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).

💻 Exercício Prático 11

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.

✅ Desafio Extra:

 Substitua a técnica de float por Flexbox para dominar layouts modernos (aprenderemos em detalhes nas próximas aulas de CSS). 

💬 Conclusão da Aula

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.

🔜 Próxima aula:

  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.

⚙️ Layouts e Design Responsivo

🎯 Objetivos da Aula

●     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.

🧩 1. O que é Flexbox e por que ele é importante

💡 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.

🧱 2. Estrutura básica do Flexbox

📜 Exemplo simples:

<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;

}

🔍 Explicando:

●     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.

🧭 3. Direção dos elementos (flex-direction)

Por padrão, o Flexbox organiza os elementos em linha (row).
  Mas podemos mudar isso:

Valor                                         Efeito

row (padrão)       →           itens em linha horizontal

row-reverse         →          inverte a ordem horizontal

column                  →          itens em coluna vertical

column-reverse  →         inverte a ordem vertical

💡 Exemplo:

.container {

  display: flex;

  flex-direction: column;

}

⚖️ 4. Alinhando com Flexbox

Com Flexbox é fácil centralizar elementos no eixo horizontal e vertical — algo que antes exigia muitos truques.

📦 Principais propriedades:

Propriedade                                Efeito

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)

💡 Exemplo:

.container {

  display: flex;

  justify-content: center;   /* Centraliza horizontalmente */

  align-items: center;   /* Centraliza verticalmente */

  height: 300px;

  background: #ddd;

}

🧩 5. Espaço entre itens com Gap

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!

💡 6. Layout prático com Flexbox — Barra de Navegação

<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.

🧱 7. O que é CSS Grid Layout

💡 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.

🧩 8. Estrutura básica de um Grid

<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;

}

🔎 Explicando:

●     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”.

🧠 9. Definindo Linhas e Colunas com Controle Total

💡 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.

🧩 10. Posicionando Itens Especificamente no Grid

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!

🧠 12. Flexbox vs. Grid — Quando Usar Cada um

Situação                                                                                    Escolha Ideal

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.

💻 Exercício Prático 12

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.

💬 Conclusão da Aula

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.

🔜 Próxima Aula:

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.