11/06/2026

Como criar o teu próprio site — HTML, PHP e upload por FTP

Voltar ao blog

Queres ter o teu próprio site na internet — uma página sobre ti, a tua guild, o teu projeto ou um portefólio simples? Não precisas de WordPress nem de frameworks complicados para começar. Com HTML, um pouco de CSS e, se quiseres, PHP para um formulário de contacto, consegues ter um website funcional em poucas horas.

Este guia mostra como criar essa página no computador e publicá-la por FTP no teu hosting Battlehorns.

Ainda não sabes usar FTP? Começa pelo tutorial Como usar FTP com FileZilla.

Logótipos HTML5, CSS3 e PHP
HTML para estrutura, CSS para estilo, PHP para funcionalidades simples no servidor. Imagem: Wikimedia Commons

O que vais precisar

  • Um plano de hosting com PHP (ex. Battlehorns)
  • Acesso FTP/SFTP ao teu espaço web
  • Um editor de texto (VS Code, Notepad++, ou até o Bloco de Notas)
  • Opcional: cliente FTP como o FileZilla

Visão geral (5 passos)

  1. Criar a estrutura de ficheiros no PC
  2. Escrever o index.html (página principal)
  3. Adicionar estilo com CSS
  4. Opcional: formulário de contacto em PHP
  5. Enviar tudo por FTP para public_html

Passo 1 — Estrutura de pastas no PC

Cria uma pasta no computador, por exemplo meu-site, com esta estrutura:

meu-site/
├── index.html
├── css/
│   └── style.css
├── img/
│   └── logo.png
└── contacto.php   (opcional)

Na pasta img/ podes colocar imagens do teu projeto (logo, capturas, foto de perfil).

Passo 2 — Página principal em HTML

Cria o ficheiro index.html com uma estrutura básica:

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>O Meu Site</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Bem-vindo ao meu site</h1>
    <nav>
      <a href="#sobre">Sobre</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>

  <main>
    <section id="sobre">
      <h2>Sobre mim</h2>
      <p>Este é o meu primeiro website. Aqui partilho informação sobre o meu projeto.</p>
    </section>

    <section id="contacto">
      <h2>Contacto</h2>
      <form action="contacto.php" method="post">
        <label>Nome<br><input type="text" name="nome" required></label><br><br>
        <label>Email<br><input type="email" name="email" required></label><br><br>
        <label>Mensagem<br><textarea name="mensagem" rows="4" required></textarea></label><br><br>
        <button type="submit">Enviar</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 — O Meu Site</p>
  </footer>
</body>
</html>

Dica: guarda sempre com codificação UTF-8 para acentos e caracteres especiais aparecerem corretamente.

Passo 3 — Estilo com CSS

No ficheiro css/style.css, adiciona um visual simples:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}

header {
  border-bottom: 2px solid #0ff;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

nav a {
  color: #0ff;
  margin-right: 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

button {
  background: #0ff;
  color: #000;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1e293b;
  color: #fff;
}

Abre o index.html no browser (duplo clique no ficheiro) para pré-visualizar antes de enviar para o servidor.

Passo 4 — Formulário de contacto em PHP (opcional)

Se o teu hosting tem PHP (os planos Battlehorns têm), podes processar o formulário no servidor. Cria contacto.php:

<?php
$nome = trim($_POST['nome'] ?? '');
$email = trim($_POST['email'] ?? '');
$mensagem = trim($_POST['mensagem'] ?? '');

if ($nome === '' || $email === '' || $mensagem === '') {
  header('Location: index.html?erro=1#contacto');
  exit;
}

$para = 'teu-email@exemplo.com';
$assunto = 'Contacto do site — ' . $nome;
$corpo = "Nome: $nome
Email: $email

Mensagem:
$mensagem";
$cabecalhos = 'From: ' . $email;

if (mail($para, $assunto, $corpo, $cabecalhos)) {
  header('Location: index.html?enviado=1#contacto');
} else {
  header('Location: index.html?erro=1#contacto');
}
exit;
?>

Importante: substitui teu-email@exemplo.com pelo teu email real. A função mail() depende da configuração do servidor — em muitos hostings funciona out-of-the-box; se não, podes usar um serviço de formulários externo (Formspree, etc.) enquanto aprendes.

Para sites só informativos, podes omitir o PHP e usar apenas um link mailto: no HTML.

Passo 5 — Upload por FTP

Com o site pronto no PC, envia os ficheiros para o servidor:

  1. Liga por FTP ao teu hosting (ver tutorial FileZilla)
  2. No servidor, abre a pasta public_html (ou www)
  3. Seleciona todos os ficheiros e pastas do teu meu-site
  4. Arrasta para public_html
  5. Aguarda a transferência completa
Interface FileZilla a transferir ficheiros
Envia index.html, a pasta css/ e img/ para public_html. Imagem: WordPress Developer Handbook

Estrutura no servidor

public_html/
├── index.html      ← página principal (abre em teudominio.com)
├── css/style.css
├── img/logo.png
└── contacto.php

Abre https://teudominio.com no browser. Se vês a tua página, está online.

Problemas comuns

Página em branco ou erro 404

  • Confirma que index.html está em public_html (não dentro de uma subpasta por engano)
  • O nome deve ser exatamente index.html (minúsculas no Linux)

CSS não carrega

  • Verifica o caminho no HTML: href="css/style.css"
  • Confirma que a pasta css/ foi enviada por FTP

Formulário PHP não envia email

  • Testa se PHP está ativo no painel de hosting
  • Verifica logs de erro no painel
  • Alternativa: serviço externo de formulários sem PHP

Próximos passos

Quando dominares o básico, podes evoluir para:

Hosting para o teu primeiro site

A Battlehorns oferece hosting com PHP, bases de dados, SSL e acesso FTP/SFTP — ideal para o teu primeiro projeto web, seja uma página pessoal, site de guild ou portefólio.

Ver planos de hosting  ·  Os meus serviços  ·  Tutorial FTP FileZilla  ·  Suporte

Tutorial adaptado para clientes Battlehorns. HTML, CSS e PHP são tecnologias web standard.

Comentários (0)

Inicia sessão para comentar. Registar

Sem comentários ainda.