Módulo 3: Listas e Links
2. Resumo da Aula Anterior
No módulo anterior, dominaste a hierarquia de textos. Aprendeste que um h1 é a manchete e o p é o corpo. Agora que já sabes escrever o conteúdo, vamos aprender a organizá-lo em listas e a criar pontes para outras páginas.
3. O Que Vais Aprender Hoje
Esta aula é sobre organização e interatividade. Vais aprender a:
- ✅ Criar listas de itens (unordenadas
ule ordenadasol). - ✅ Dominar o elemento mais importante da web: o Link (
a). - ✅ Criar menus de navegação simples mas profissionais.
- ✅ Usar âncoras para saltar para partes específicas da página.
4. Teoria: A Organização e a Conectividade
Listas: A Base da Ordem
O HTML oferece duas formas principais de listar coisas. A escolha depende da **semântica** (do significado):
- Listas Não Ordenadas (
<ul>): Significa "Unordered List". Usamos quando a ordem não altera o resultado. Exemplo: Uma lista de compras ou um menu de topo. Os itens aparecem com "bolinhas" (bullets). - Listas Ordenadas (
<ol>): Significa "Ordered List". Usamos quando há uma sequência lógica. Exemplo: Passos de uma receita ou um Top 10. O browser numera automaticamente (1, 2, 3...).
Truque de Especialista: Podes aninhar listas! Uma lista pode ter outra lista dentro de um dos seus itens (li).
⚓ Analogia: O GPS da Web
Imagina que o teu site é uma biblioteca gigante:
- O Link (
<a>): É a placa que diz "Vá para o Corredor 4". Sem ele, o utilizador ficaria preso numa só sala. - O Atributo
href: É a morada escrita na placa. Se falhares a morada, a placa não leva a lado nenhum. - O Atributo
target="_blank": É como se a placa te desse um segundo par de olhos. Abres o novo livro sem largar o que estás a ler atualmente.
Âncoras Internas (IDs)
Sabes quando clicas num link e a página "escorrega" lá para baixo sozinha? Isso faz-se com IDs. Tu dás um nome a uma secção (ex: <section id="precos">) e crias um link para ela usando o cardinal (ex: <a href="#precos">Ver Preços</a>).
5. Exemplos de Código
Exemplo 1: Listas Complexas (Aninhadas)
<ul>
<li>Frutas
<ul>
<li>Maçã</li>
<li>Banana</li>
</ul>
</li>
<li>Legumes</li>
</ul>Exemplo 2: O Link Profissional
<!-- Link Externo -->
<a href="https://google.com" target="_blank">Pesquisar</a>
<!-- Link Interno com ID -->
<a href="#rodape">Ir para o fim</a>6. Agora é a Tua Vez! (Guia de Execução)
Vamos criar um índice interativo para uma página. Segue estes passos:
- Preparação: No teu
index.html, cria uma lista ordenada (ol). - Itens do Índice: Adiciona dois itens: "Minha História" e "Meus Projetos".
- Navegação: Envolve o texto desses itens em links (
a) que apontam para#historiae#projetos. - Os Destinos: Mais abaixo, cria dois títulos
h2. Dá ao primeiro o atributoid="historia"e ao segundoid="projetos". - Preenchimento: Escreve um pequeno parágrafo por baixo de cada título.
- Teste: Guarda e clica nos itens da lista lá em cima. Vê a página a saltar para as secções certas!
💡 Dica: Se a página for muito curta, o "salto" pode ser pouco visível. Adiciona muito texto ou espaços para testar melhor!
7. Verificação de Conhecimento
Mostra que és o mestre das listas e dos links. Responde com atenção!
8. Resumo do Que Aprendemos
- 📌 UL para menus e listas comuns; OL para passos e rankings.
- 📌 Todo o item de lista deve ser envolvido por LI.
- 📌 O atributo href é o destino secreto do link.
- 📌 IDs permitem criar navegação dentro da mesma página.
9. Desafios Práticos
Desafio 1: O Ranking Invertido
Descobre como fazer uma lista ordenada que começa do número 10 para baixo (10, 9, 8...).
Desafio 2: Link de Email
Sabias que podes criar um link que abre automaticamente o programa de email do utilizador?
Desafio 3: O Menu Vertical
Cria um pequeno código HTML que represente a barra lateral de um site com 3 páginas fictícias.