Capítulo 02: O Esqueleto do Castelo (Estrutura Básica) 🦴🏰
Neste capítulo, vamos entender o que significam aquelas tags estranhas que vimos no capítulo anterior, usando o tema Anatomia do Castelo!
📖 A Estrutura Básica
Todo documento HTML precisa de uma estrutura padrão para que o navegador entenda o que está acontecendo. É como a fundação de um castelo.
<!DOCTYPE html>: Avisa ao navegador que estamos usando a versão mais moderna do HTML (HTML5).<html>: A tag que envolve todo o documento.<head>: A “cabeça” do documento. Contém informações invisíveis para o usuário (metadados), como o título da aba do navegador.<body>: O “corpo” do documento. É aqui que fica tudo o que aparece na tela (textos, imagens, botões).
📖 Exemplo Guiado: Dissecando o Código
Veja o código do capítulo anterior novamente:
<!DOCTYPE html>
<html lang="pt-br"> <!-- Define a linguagem -->
<head>
<meta charset="UTF-8"> <!-- Suporta acentos -->
<title>Título na Aba</title>
</head>
<body>
<!-- Tudo aqui aparece na tela -->
</body>
</html>📊 Ilustração Visual: Hierarquia de Tags
graph TD A["html"] --> B["head"] A --> C["body"] B --> D["title"] C --> E["h1, p, img..."]
🛠️ Prática Obrigatória 1: Criando a Fundação
Crie um arquivo chamado fundacao.html. Escreva a estrutura básica completa. No título da aba (<title>), coloque “Fundação do Castelo”. No corpo, deixe em branco por enquanto!
🔑 Gabarito de Código
Prática 1: fundacao.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Fundação do Castelo</title>
</head>
<body>
</body>
</html>📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo X) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
- ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
- No Microsoft Teams:
- Copie o link do seu repositório.
- Cole na tarefa correspondente no Teams.
- Clique em Entregar.