Sua Primeira Página Web

Chegou a hora! Vamos criar sua primeira página web de verdade.

O que é HTML?

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

Não se assuste com o nome. HTML é simplesmente uma forma de dizer ao navegador: "Ei, isso aqui é um título, isso é um parágrafo, isso é uma imagem..."

HTML estrutura o conteúdo. É o esqueleto da página.

Como funciona?

HTML usa tags (etiquetas) para marcar elementos:

html

<tag>conteúdo</tag>

A maioria das tags tem:

Tag de abertura: <tag>
Conteúdo no meio
Tag de fechamento: </tag>

Sua primeira página

Crie um arquivo chamado index.html na sua pasta de projetos:

html

<!DOCTYPE html><html><head>    <title>Minha Primeira Página</title></head><body>    <h1>Olá, Mundo!</h1>    <p>Esta é minha primeira página web.</p>    <p>Estou aprendendo a programar!</p></body></html>

Salve e abra com Live Server. 🎉

Entendendo cada parte

`<!DOCTYPE html>`

Diz ao navegador que é um documento HTML5 (versão atual).

`<html>`

Tag que envolve TODO o conteúdo da página.

`<head>`

Informações sobre a página (não aparecem na tela):

Título da aba
Links para CSS
Metadados

`<title>`

O texto que aparece na aba do navegador.

`<body>`

Tudo que APARECE na página vai aqui dentro.

`<h1>`

Título principal. O "h" vem de "heading" (cabeçalho).

`<p>`

Parágrafo de texto. O "p" vem de "paragraph".

Estrutura visual

<!DOCTYPE html>
<html>
├── <head>
│   └── <title>Título da aba</title>
└── <body>
    ├── <h1>Título visível</h1>
    └── <p>Parágrafo visível</p>
</body>
</html>

Praticando

Modifique sua página:

html

<!DOCTYPE html><html><head>    <title>Sobre Mim</title></head><body>    <h1>Oi! Eu sou [seu nome]</h1>    <p>Estou aprendendo programação em 2026.</p>    <p>Meu objetivo é me tornar um desenvolvedor.</p>    <h2>Minhas metas:</h2>    <p>Aprender HTML, CSS e JavaScript!</p></body></html>

Tags de título (h1 a h6)

Existem 6 níveis de título:

html

<h1>Título Principal (maior)</h1><h2>Subtítulo</h2><h3>Sub-subtítulo</h3><h4>Nível 4</h4><h5>Nível 5</h5><h6>Nível 6 (menor)</h6>

Use h1 para o título principal (só um por página). Use h2 para seções. Use h3 para subseções.

Visualizando mudanças

Com o Live Server, toda vez que você salva (Ctrl+S), a página atualiza automaticamente!

Experimente:

Mude o texto do h1
Salve
Veja a mudança no navegador

É assim que programadores trabalham: escreve, salva, vê resultado, repete.

Erro comum

Esqueceu de fechar uma tag?

html

<!-- Errado --><h1>Título<p>Parágrafo</p> <!-- Certo --><h1>Título</h1><p>Parágrafo</p>

O navegador tenta "adivinhar" mas pode dar resultados estranhos. Sempre feche suas tags!

Exercício

Crie uma página sobre-mim.html com:

Seu nome como h1
Uma descrição sua em um parágrafo
Um h2 "Hobbies"
Pelo menos 2 parágrafos sobre seus hobbies

Resumo

✅ HTML estrutura o conteúdo da página
✅ Tags marcam elementos (<tag>conteúdo</tag>)
✅ <head> = informações invisíveis
✅ <body> = conteúdo visível
✅ <h1> a <h6> = títulos
✅ <p> = parágrafos

Na próxima aula, vamos aprender mais tags HTML para estruturar páginas completas! 🚀