Módulo 1: O Esqueleto HTML
2. Resumo da Aula Anterior
Na aula anterior (Preparacção), preparámos o nosso ambiente. Instalaste o VS Code, o Live Server e criaste a tua primeira pasta de projeto. Agora tens tudo pronto para começar a escrever código!
3. O Que Vais Aprender Hoje
Nesta aula, vais aprender a criar a estrutura fundamental de qualquer página web. Vamos explorar:
- ✅ A estrutura mínima obrigatória de um ficheiro HTML.
- ✅ Para que serve o
<head>e o<body>. - ✅ A importância do
<!DOCTYPE html>e metadados.
4. Teoria: A Anatomia de uma Página Web
HTML (HyperText Markup Language) não é uma linguagem de programação, mas sim de marcação. Imagina que estás a etiquetar uma encomenda: dizes o que é o título, o que é um parágrafo e o que são as instruções.
A Trindade Estrutural
Qualquer site no mundo, do Google ao Facebook, começa com estas três partes fundamentais:
- <!DOCTYPE html>: A certidão de nascimento. Diz ao browser: "Atenção, eu sou um documento HTML5 moderno!". Sem isto, o browser pode entrar em modo de compatibilidade antigo e estragar o design.
- <head>: O cérebro invisível. Aqui guardamos tudo o que o browser precisa de saber mas o utilizador não vê: título da aba, links para CSS, codificação de caracteres (UTF-8) e SEO.
- <body>: O corpo visível. Tudo o que escreveres aqui dentro aparecerá na janela branca do navegador para o utilizador ver.
🏠 Analogia: A Construção de uma Casa
Pensa no HTML como a estrutura bruta de uma casa:
- HTML: Os alicerces e as vigas de aço. Sem eles, a casa cai.
- <head>: A planta da casa e o contrato de propriedade (importante, mas guardado numa pasta, não colado na parede).
- <body>: As paredes, janelas e mobília que as pessoas usam e veem.
Tags: A Linguagem das Etiquetas
As tags são como parênteses especiais. Quase todas têm uma abertura <tag> e um fecho </tag>. O que estiver lá dentro herda o "significado" dessa etiqueta.
5. Exemplos de Código
Exemplo 1: O Mínimo Absoluto
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Título da Aba</title>
</head>
<body>
O conteúdo vai aqui.
</body>
</html>Exemplo 2: Tags de Texto Básicas
<h1>Isto é um título gigante</h1>
<p>Isto é um parágrafo de texto normal.</p>6. Agora é a Tua Vez! (Passo a Passo)
Vamos criar o teu primeiro ficheiro HTML real. Segue estas instruções rigorosamente:
- Criar Ficheiro: No VS Code, cria um novo ficheiro chamado
aula1.html. - Atalho Mágico: Digita apenas um ponto de exclamação
!e pressiona a tecla TAB ou Enter. O VS Code vai gerar a estrutura base para ti automaticamente (isto chama-se Emmet). - Personalizar: Localiza a tag
<title>e muda o texto lá dentro para "O Meu Primeiro Site". - Escrever Conteúdo: Vai para dentro do
<body>. Escreve<h1>Bem-vindo ao Meu Futuro!</h1>. - Visualizar: Clica com o botão direito no ficheiro e escolhe "Open with Live Server". Se tudo estiver certo, verás o teu título no navegador!
💡 Dica: Se vires símbolos estranhos em vez de acentos, verifica se a tag <meta charset="UTF-8"> está presente no head!
7. Verificação de Conhecimento
Agora que exploraste a estrutura detalhada, vamos ver se dominas o básico do esqueleto HTML.
8. Resumo do Que Aprendemos
- 📌 HTML não é programação, é marcação de conteúdo.
- 📌 <!DOCTYPE> avisa o browser que usamos tecnologias modernas.
- 📌 <head> guarda as configurações (invisível).
- 📌 <body> guarda o conteúdo visual (visível).
- 📌 UTF-8 garante que os nossos acentos portugueses funcionam.
9. Desafios Práticos
Desafio 1: O Título Secreto
Altera o título da aba do navegador para "Experiência Secreta".
Desafio 2: O Parágrafo Perdido
Adiciona um parágrafo (<p>) abaixo do título com o texto "Estou a aprender HTML!".
Desafio 3: A Estrutura Corrompida
O código abaixo tem um erro grave. Consegues descobrir qual é?
<html>
<body>
<h1>Erro!</h1>
</body>
<head>
<title>Site</title>
</head>
</html>