O teu primeiro ficheiro e pasta para a web

Um site vive numa pasta

Todo o site do mundo é na verdade um monte de ficheiros numa pasta. Vamos preparar o teu.

Cria uma pasta chamada my-website. No ambiente de trabalho, clica com o botão direito → New Folder (no Mac também é New Folder, no Windows é New → Folder) e dá-lhe o nome my-website.
Abre a pasta no VS Code. Lança o VS Code e no menu escolhe File → Open Folder… e encontra a tua pasta my-website. Se o VS Code perguntar se confias nos autores desta pasta, clica Yes, I trust the authors – afinal de contas, o autor és tu!
Cria um ficheiro chamado index.html. No painel esquerdo, passa o rato sobre o nome da pasta e clica no ícone New File (uma página com um sinal de mais). Escreve exatamente: index.html e prime Enter.

💡

Porquê index.html em concreto? É o nome acordado para a página principal de um site. Quando um browser chega a uma pasta, procura primeiro um ficheiro chamado index.html – como entrar na escola e ir direto à tua sala.

Escreve o teu primeiro código

No ficheiro index.html, escreve isto (ou copia com o botão no canto superior direito):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Guarda o ficheiro: Ctrl+S (no Mac, Cmd+S). Guarda frequentemente – um ficheiro por guardar tem um pontinho ao lado do nome no VS Code.

Abre a tua página no browser

Encontra o ficheiro index.html na tua pasta (no ambiente de trabalho → my-website) e faz duplo clique para o abrir. Um browser abre-se e mostra a tua página com as palavras “It works!”.

✅

Verifica tu: Vês um título grande que diz “It works!” no browser. Se sim – já tens uma oficina web a funcionar e podes ir direto ao Nível 1!

💡

Um truque útil: mantém o VS Code e o browser abertos lado a lado. Sempre que mudares algo no código, guarda (Ctrl+S) e prime F5 no browser para atualizar. A tua alteração aparece logo.

O que ficas a saber desta lição

Um site é uma pasta cheia de ficheiros. A tua chama-se my-website.
A página principal de um site chama-se sempre index.html.
O ciclo de trabalho: escrever código → guardar (Ctrl+S) → atualizar o browser (F5). Vais fazer isto vezes sem conta.