Módulo 2: Textos e Títulos
2. Resumo da Aula Anterior
No módulo anterior, aprendeste a criar o esqueleto da página (`html`, `head`, `body`). Hoje vamos começar a "mobilar" a casa, adicionando conteúdo textual estruturado.
3. O Que Vais Aprender Hoje
Nesta aula, vais dominar a arte de escrever para a web. Vamos ver:
- ✅ A hierarquia de títulos (
h1ah6). - ✅ Como criar parágrafos (
p) e quebras de linha (br). - ✅ A diferença entre negrito visual e semântico.
4. Teoria: A Arquitetura do Texto na Web
Hierarquia e Semântica: No HTML, as tags não servem apenas para mudar o tamanho da letra. Elas dizem ao navegador e ao Google **o que os dados representam**. Um <h1> diz: "Isto é o mais importante desta página".
A Árvore de Títulos (h1 a h6)
Imagina um livro: tens o título do livro (H1), os capítulos (H2), as sub-secções dos capítulos (H3) e assim por diante. Regra de Ouro: Nunca saltes níveis. Não passes de um H1 para um H3 apenas porque achas que o H2 é "grande demais". Se o tamanho não te agrada, mudaremos isso mais tarde com CSS.
📰 Analogia: O Jornal Diário
Pensa num jornal físico para entender a estrutura:
- <h1>: A Manchete Principal da Capa. (Ex: "A Terra foi salva!"). Existe apenas UMA por página.
- <h2>: Títulos de grandes secções (Ex: "Economia", "Mundo", "Desporto").
- <h3>: Títulos de artigos específicos dentro de cada secção.
- <p>: O corpo da notícia, dividido em parágrafos para ser fácil de ler.
Parágrafos e Quebras Forçadas
O navegador ignora espaços e "enters" no teu código. Se escreveres um texto com 10 linhas no Notepad mas não usares tags, o browser mostrará tudo colado numa linha gigante.
- <p>: Define um parágrafo. O browser adiciona automaticamente um espaço (margem) antes e depois.
- <br>: Significa "Break". Força o texto a ir para a linha de baixo sem criar um novo parágrafo. Usa isto com moderação (ex: moradas ou poesia).
Semântica: O Significado sobre o Estilo
Antigamente usava-se <b> para negrito (bold). Hoje, usamos <strong>. Porquê? Porque <strong> diz ao leitor de ecrã para cegos: "Lê isto com mais ênfase, isto é importante!". O mesmo acontece com <em> (itálico semântico).
5. Exemplos de Código
Exemplo 1: Estrutura de Títulos Correta
<h1>O Meu Blog de Viagens</h1>
<h2>Viagem a Portugal</h2>
<h3>Gastronomia em Lisboa</h3>
<p>A comida em Lisboa é fantástica...</p>Exemplo 2: O Uso do <br>
<p>
Rua dos Programadores, 123<br>
Lisboa, Portugal<br>
1000-001
</p>6. Agora é a Tua Vez! (Passo a Passo)
Vamos criar uma notícia de última hora estruturada profissionalmente. Segue estes passos:
- Limpeza: Abre o teu ficheiro `index.html` e apaga tudo o que estiver dentro do
<body>. - A Manchete: Cria um
<h1>com o texto "DESCOBERTA HISTÓRICA". Este é o tema central. - O Subtítulo: Logo abaixo, cria um
<h2>com: "Cientistas encontram água líquida em Marte". - O Conteúdo: Escreve um parágrafo
<p>explicando que a descoberta foi feita por um robot da NASA ontem à tarde. - A Ênfase: Dentro desse parágrafo, envolve a palavra "ontem à tarde" com a tag
<strong>para destacares a urgência da notícia. - Informação Extra: Cria um segundo parágrafo e usa
<em>para escrever uma citação: "Isto muda tudo o que sabemos", disse o diretor da missão.
💡 Dica: Guarda o ficheiro e faz "Refresh" no navegador para veres o resultado!
7. Verificação de Conhecimento
Testa o que aprendeste na teoria detalhada acima. As explicações ajudam-te a fixar os conceitos!
8. Resumo do Que Aprendemos
- 📌 <h1> só deve haver um por página.
- 📌 <p> cria blocos de texto (parágrafos).
- 📌 <br> força uma quebra de linha simples.
- 📌 Usa <strong> para coisas importantes, não apenas para pôr negrito.
9. Desafios Práticos
Desafio 1: O Poema
Escreve quatro versos de um poema. Eles devem aparecer em linhas separadas, mas pertencer ao mesmo parágrafo.
Desafio 2: Receita de Bolo
Cria uma estrutura para uma receita: Título do Bolo (H1), Ingredientes (H2) e Preparacção (H2).
Desafio 3: O Erro de Hierarquia
O que está errado neste código?
<h1>Meu Blog</h1>
<h4>Postagem do dia</h4>
<p>Hoje acordei feliz.</p>