Pular para conteúdo

Aula 02 - Documento HTML Mínimo 🏗️

O Esqueleto da Web

👋 Olá Novamente!

Hoje vamos aprender a base de tudo o que você vê na internet.

Vamos sair da teoria e começar a escrever código de verdade! 💻

Agenda de Hoje 📅

  1. O que é HTML?
  2. Anatomia de uma Tag
  3. O "Boilerplate" (ESTRUTURA)
  4. Cabeça vs Corpo
  5. Metadados
  6. Nossa Primeira Página

1. O que é HTML? 🤔

  • HyperText Markup Language.
  • É uma linguagem de Marcação, não de programação.
  • Define o significado e a estrutura do conteúdo.

🏗️ Como o HTML funciona?

  • Ele usa "Tags" para identificar elementos.
  • Exemplo: "Isso aqui é um título", "Isso é um parágrafo".

🦴 2. Anatomia de uma Tag

Estrutura Básica 🧱

<tag> Conteúdo </tag>
- <tag>: Abertura - Conteúdo: O que aparece na tela - </tag>: Fechamento (Obrigatório na maioria!)

Atributos 🏷️

Dão informações extras às tags.

<p class="destaque"> Texto </p>
- class: Nome do atributo - "destaque": Valor do atributo

📜 3. A Estrutura Mínima

Todo site começa assim:

O Início 🚀

<!DOCTYPE html>
<html lang="pt-br">
    <!-- Tudo aqui dentro -->
</html>
- <!DOCTYPE html>: Define a versão (HTML5). - <html>: O elemento pai (raiz).

🧠 4. A Cabeça ()

  • Informações para o Navegador / Google.
  • Não aparecem na área branca do site.
  • Configurações, Título da aba, Estilos.

👤 5. O Corpo ()

  • Onde a mágica acontece! ✨
  • Tudo o que o usuário vê e interage.
  • Títulos, Imagens, Parágrafos, Botões.

🧩 Hierarquia Visual

graph TD
    HTML[html] --> HEAD[head - Configurações]
    HTML --> BODY[body - Conteúdo Visível]
    HEAD --> META[meta]
    HEAD --> TITLE[title]
    BODY --> H1[h1]
    BODY --> P[p]

🔍 5. Metadados Importantes

UTF-8 🔠

<meta charset="UTF-8">
- Garante que acentos (á, é, í) funcionem. - Sem isso, teríamos símbolos estranhos!

Viewport 📱

<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Adapta o site para telas de celulares. - Essencial para a Web moderna.

Title 🏷️

<title>Meu Primeiro Site</title>
- O nome que fica na aba do navegador.

💻 6. Mão na Massa!

Atalho Ninja no VS Code 🥷

  1. Crie um arquivo .html.
  2. Digite ! e aperte Enter.
  3. O VS Code gera toda a estrutura para você! ⚡

Resumo da Aula ✅

  • HTML é Marcação.
  • Tags têm abertura e fechamento.
  • <head> = Configurações.
  • <body> = Conteúdo Real.

Desafio de Hoje 🚀

  1. Criar sua pasta de projeto.
  2. Criar o index.html.
  3. Escrever seu nome em um <h1>.
  4. Abrir no navegador!

Próxima Aula 🧱

Estrutura e Semântica

Vamos aprender a organizar o site profissionalmente!

Dúvidas? 🤔

"O código é a poesia do desenvolvedor. Comece a escrever seus primeiros versos hoje."