HTML para iniciantes: cria a tua primeira página web

Todas as páginas que vês na internet, das mais simples às mais complexas, têm uma coisa em comum: são construídas com HTML. Se queres aprender a criar sites, é aqui que começas. Neste guia vais criar a tua primeira página, entender cada parte e perceber o que fazer a seguir.

O que é o HTML

HTML significa HyperText Markup Language, ou "linguagem de marcação de hipertexto". Não é uma linguagem de programação: não toma decisões nem faz contas. Serve para descrever a estrutura de uma página: isto é um título, isto é um parágrafo, isto é uma imagem, isto é uma ligação.

O navegador lê esse ficheiro e mostra a página. Para trabalhar só precisas de um editor de texto e de um navegador.

O que precisas para começar

1. Um editor de código gratuito, como o Visual Studio Code (serve também o Bloco de Notas).
2. Um navegador (Chrome, Firefox, Edge).
3. Uma pasta para guardares os teus ficheiros.

A tua primeira página

Cria um ficheiro chamado index.html e escreve:

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A minha primeira página</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Esta é a minha primeira página web.</p>
</body>
</html>

Abre o ficheiro no navegador (duplo clique). A tua página já existe.

Como ler este código

• <!doctype html> diz ao navegador que é HTML moderno.
• <html lang="pt"> é a raiz da página e indica o idioma, o que ajuda leitores de ecrã e motores de busca.
• <head> guarda informação que não aparece na página, como o título do separador.
• <body> guarda tudo o que o visitante vê.

Cada elemento tem uma etiqueta de abertura (<p>) e uma de fecho (</p>). O texto fica no meio.

As etiquetas mais usadas

• Títulos: <h1> a <h6>. Usa um só <h1> por página, para o assunto principal.
• Parágrafo: <p>.
• Ligação: <a href="https://exemplo.com">texto da ligação</a>.
• Imagem: <img src="foto.jpg" alt="descrição da foto">.
• Listas: <ul> (com marcas) ou <ol> (numerada), com <li> para cada item.
• Secções: <header>, <nav>, <main>, <section>, <footer>.

O atributo alt: pequeno, mas importante

Em cada imagem, escreve um alt que descreva o que a imagem mostra. Ajuda pessoas que usam leitores de ecrã e dá contexto aos motores de busca quando a imagem não carrega.

Estrutura semântica: escrever com significado

Em vez de usares apenas blocos genéricos, usa etiquetas com significado. Uma página bem estruturada fica assim:

<body>
  <header>
    <h1>O meu portfólio</h1>
    <nav>
      <a href="#projetos">Projetos</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>
  <main>
    <section id="projetos">
      <h2>Projetos</h2>
      <p>Aqui vão os meus trabalhos.</p>
    </section>
  </main>
  <footer>
    <p>© 2026 O meu nome</p>
  </footer>
</body>

Isto torna a página mais fácil de manter, mais acessível e mais clara para os motores de busca.

Erros comuns de quem começa

• Esquecer de fechar uma etiqueta.
• Gravar o ficheiro com o nome errado (por exemplo, index.html.txt).
• Usar títulos só para aumentar o tamanho do texto. Os títulos servem para estruturar; o tamanho resolve-se com CSS.
• Esquecer o lang e o charset, o que pode estragar acentos e cedilhas.

O que aprender a seguir

O HTML dá estrutura, mas a página ainda é "crua". O passo seguinte é o CSS, que trata de cores, tipos de letra e disposição. Depois vem o JavaScript, para dar interação.

Se preferes ter um site profissional sem estudar tudo isto, podes sempre contar com a nossa equipa para criar o teu site.