A tua primeira página web a funcionar

No fim desta aula vais ter uma pasta de projeto no teu computador, um ficheiro index.html escrito por ti e o teu nome a aparecer no navegador. É o primeiro tijolo da página pessoal que vais publicar na aula 6.

O que vais construir neste curso

Uma página pessoal simples: o teu nome, uma fotografia, um texto sobre ti, três projetos ou interesses e uma forma de contacto. Vai ficar bem num computador e num telemóvel e vai ter um endereço público que podes pôr no CV ou enviar a quem quiseres.

Para isso usas duas linguagens:

• HTML diz o que é cada coisa: isto é um título, isto é um parágrafo, isto é uma imagem.
• CSS diz como cada coisa aparece: cores, tipos de letra, espaços, colunas.

Uma página HTML é só um ficheiro de texto que o navegador sabe ler. Não pagas nada.

As duas ferramentas

• Um editor de texto para código. Recomendamos o Visual Studio Code (VS Code): é gratuito e funciona em Windows, macOS e Linux. Se não o puderes instalar, qualquer editor de texto simples serve. Nunca uses o Word: acrescenta formatação escondida que estraga o ficheiro.
• Um navegador. Chrome, Firefox, Edge ou Safari. Vais ter o ficheiro aberto no editor e no navegador ao mesmo tempo.

Preparar a pasta do projeto

1. Cria a pasta

Em Documentos, cria uma pasta chamada minha-pagina. Regra para todos os nomes de ficheiros e pastas deste curso: minúsculas, sem espaços e sem acentos. Usa hífenes em vez de espaços. Na internet, Foto.JPG e foto.jpg podem ser ficheiros diferentes.

2. Mostra as extensões

No Windows, as extensões (.html, .txt) vêm escondidas. Procura nas opções de visualização do Explorador de Ficheiros a opção para mostrar as extensões dos nomes de ficheiro e ativa-a. No macOS, procura a opção equivalente nas definições do Finder. Assim evitas o erro clássico de criar index.html.txt.

3. Abre a pasta no editor

No VS Code, usa a opção de abrir pasta e escolhe minha-pagina. Cria um ficheiro novo chamado index.html. O nome index.html não é ao acaso: é o ficheiro que os servidores mostram por omissão quando alguém visita o endereço.

A estrutura mínima de um documento HTML

Escreve (ou copia) isto para o index.html e guarda:

<!DOCTYPE html>
<html lang="pt-PT">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ana Costa - Página pessoal</title>
</head>
<body>
  <h1>Ana Costa</h1>
  <p>Olá! Esta é a minha primeira página web.</p>
</body>
</html>

Troca "Ana Costa" pelo teu nome. Agora, linha a linha:

• A declaração DOCTYPE, sempre na primeira linha, diz que é HTML moderno.
• A etiqueta html envolve tudo. O atributo lang="pt-PT" indica a língua, o que ajuda leitores de ecrã e tradutores automáticos.
• A etiqueta head guarda informação sobre a página que não aparece no corpo: codificação, título, ligação ao CSS (aula 4).
• O charset="UTF-8" garante que "ç", "ã" e "é" aparecem bem.
• A linha viewport prepara a página para telemóveis. Voltas a ela na aula 6.
• A etiqueta title é o texto do separador do navegador e dos resultados de pesquisa.
• A etiqueta body contém tudo o que se vê.

Quase todas as etiquetas abrem e fecham: a de fecho tem uma barra antes do nome. O que está entre as duas é o conteúdo. As etiquetas encaixam umas dentro das outras como caixas, e fecham pela ordem inversa à que abriram. A indentação não muda nada para o navegador, mas deixa-te ver as caixas.

Abrir no navegador e o ciclo de trabalho

Faz duplo clique no index.html ou arrasta-o para uma janela do navegador. Deves ver o teu nome em letra grande e a frase por baixo. O endereço começa por file://: a página ainda só existe no teu computador.

O ciclo que vais repetir centenas de vezes:

1. Alterar no editor.
2. Guardar (Ctrl+S no Windows e Linux, Cmd+S no Mac).
3. Atualizar o navegador (F5 ou Cmd+R).

Erros comuns

• Não aparece a alteração: esqueceste-te de guardar.
• Abre como texto com as etiquetas à vista: o ficheiro chama-se index.html.txt. Mostra as extensões e muda o nome.
• Acentos estranhos, como "Página": falta a linha charset ou o ficheiro não foi guardado em UTF-8. O VS Code usa UTF-8 por omissão.
• Metade da página desapareceu: uma etiqueta ficou por fechar. Procura o par de cada abertura.

Exercício

1. Instala o VS Code (ou abre o teu editor) e cria a pasta minha-pagina com o ficheiro index.html.
2. Escreve a estrutura mínima com o teu nome no título do separador e no h1.
3. Acrescenta um segundo parágrafo com uma frase sobre o que fazes, guarda e atualiza o navegador.
4. Apaga de propósito a etiqueta de fecho do h1, guarda, vê o que acontece e repõe-na.

Como sabes que correu bem: ao abrires o index.html no navegador vês o teu nome em destaque, dois parágrafos com acentos corretos e o separador mostra o título que escreveste.