Como funciona a web e a tua primeira página

Descobre o que acontece quando escreves um endereço no browser e constrói a base do teu site.

O que acontece quando abres um site

Quando escreves algo como www.myschool.com no browser, isto é o que acontece:

O browser envia uma mensagem pela internet a um servidor – o computador onde o site vive: «Olá, envia-me a página!»
O servidor responde e envia ficheiros – texto, imagens, código.
O browser desenha a página no teu ecrã com esses ficheiros.

Os ficheiros que o servidor envia estão escritos numa linguagem chamada HTML. E é exatamente isso que vais aprender. Por agora o teu site não estará num servidor – vive no teu computador, e vamos pô-lo online na última lição.

Escolhe o teu projeto

Antes de escreveres uma linha, decide o quê estás a construir. Vais trabalhar num destes projetos durante todo o nível:

🏫 O site da minha escola – horário, ementa, eventos, professores
🙋 O meu site pessoal – sobre mim, o que gosto, as minhas criações
🌍 Um diário de viagens – viagens, fotos, memórias
⚽ O site de um clube desportivo – equipa, jogos, treinos

Escolheste? Ótimo. As tarefas de cada lição cobrem os quatro projetos – encontra só o teu.

Vou mostrar-te: o esqueleto com que cada página na Terra começa

Cada página web – da tua à do YouTube – começa com exatamente o mesmo esqueleto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Traduzamos isto para português simples:

Código	O que diz ao browser
`<!doctype html>`	«Atenção, uma página HTML está a começar!»
`<html lang="en">`	«Tudo o que está dentro é uma página, e está em inglês.»
`<head>` … `</head>`	«Aqui está informação sobre a página.» Os visitantes não a veem.
`<meta charset="UTF-8">`	«Podem haver caracteres especiais aqui, prepara-te.»
`<title>` … `</title>`	O nome da página – mostrado no separador do browser.
`<body>` … `</body>`	«Tudo o que o visitante vê mesmo começa aqui.» Todo o teu conteúdo vai aqui.

Repara como funcionam as etiquetas: <h1> abre algo e </h1> (com a barra) fecha outra vez. O que está entre elas pertence a essa etiqueta. Como parênteses.

Agora és tu 💪

Abre a tua pasta my-website (do Nível de Preparação) no VS Code e abre o ficheiro index.html dentro dela. Apaga o que lá está e escreve o esqueleto da página do exemplo acima.
Muda o <title> e o <h1> para combinar com o teu projeto e adiciona um parágrafo <p> abaixo do título com uma frase sobre o que é o teu site.
Guarda (Ctrl+S) e abre index.html no browser (ou atualiza a página com F5).

Não tens a certeza? Aqui estão soluções para cada projeto:

🏫 Solução: O site da minha escola

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Solução: O meu site pessoal

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Solução: Diário de viagens

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Solução: Site de clube desportivo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Verifica tu: O separador do browser mostra o nome do teu site e a página mostra o teu título e frase. Se sim – a pedra fundamental está assente!

O que ficas a saber desta lição

Um site = ficheiros que um servidor envia a um browser. O browser desenha uma página a partir deles.
Cada página tem o mesmo esqueleto: <head> (informação sobre a página) e <body> (conteúdo visível).
As etiquetas abrem como <isto> e fecham como </isto>.