Pular para conteúdo

Aula 02 - Documento HTML Mínimo 🏗️

Objetivo

Objetivo: Entender a estrutura base de todo site moderno e escrever as suas primeiras linhas de código HTML5, compreendendo o papel de cada tag fundamental.

1. O que é HTML? 🤔

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto).

  • Não é uma linguagem de programação: Ela não tem lógica de "se" ou "faça enquanto".
  • É uma linguagem de marcação: Ela usa "etiquetas" (tags) para dizer ao navegador o que cada parte do conteúdo é (um título, um parágrafo, uma imagem).

2. A Anatomia de uma Tag 🦴

A maioria das tags HTML funciona como "recipientes" com uma abertura e um fechamento:

<p class="texto-bonito">Olá, Mundo!</p>
  • <p>: Tag de abertura.
  • class="texto-bonito": Atributo (dá informações extras à tag).
  • Olá, Mundo!: Conteúdo.
  • </p>: Tag de fechamento (notou a barra /?).

3. A Estrutura Básica (O Boilerplate) 📜

Todo arquivo HTML deve começar com uma estrutura padrão. Imagine que é o "esqueleto" do site.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Site</title>
</head>
<body>
    <h1>Olá, Web!</h1>
    <p>Este é o meu primeiro documento HTML5.</p>
</body>
</html>

🧩 Entendendo as Partes:

  • <!DOCTYPE html>: Avisa o navegador que estamos usando a versão mais recente (HTML5).
  • <html lang="pt-br">: O elemento raiz que envolve tudo. O atributo lang ajuda os buscadores e tradutores.
  • <head> (Cabeça): Contém Metadados (informações para o navegador e Google, não aparecem na página).
  • <body> (Corpo): É onde fica tudo o que o usuário vê no site.

4. Metadados Essenciais 🧠

Dentro do <head>, temos informações cruciais:

  1. <meta charset="UTF-8">: Garante que acentos (á, õ) e emojis apareçam corretamente.
  2. <meta name="viewport" ...>: Crucial para que o site funcione bem em celulares (Responsividade).
  3. <title>: O texto que aparece na aba do navegador.

5. Prática: Criando sua Primeira Página 🚀

Vamos colocar a mão na massa usando o terminal e o VS Code:

$ mkdir aula-02
$ cd aula-02
$ touch index.html
$ code index.html

[!DICA] No VS Code, digite ! e aperte Tab dentro de um arquivo .html. Ele vai gerar toda a estrutura básica para você automaticamente! Isso se chama Emmet.

6. Mini-Projeto: Perfil Pessoal 👤

  1. Crie um arquivo chamado index.html.
  2. Gere a estrutura básica.
  3. No <body>, use uma tag <h1> para o seu nome.
  4. Use uma tag <p> para escrever uma breve descrição sobre você.
  5. Abra o arquivo no seu navegador (clique duplo no arquivo).

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre as tags <head> e <body>?
  2. Para que serve o atributo lang na tag <html>?

Intermediários

  1. O que acontece se esquecermos de fechar uma tag, como o <title>?
  2. Explique a função do meta charset="UTF-8".

Desafio 🧠

  1. Pesquise e cite 2 tags HTML que não precisam de fechamento (tags auto-contidas).

Próxima Aula: Vamos aprender a organizar o conteúdo com Estrutura e Semântica! 🧱