Como criar um site em HTML puro do zero, passo a passo

O que você precisa antes de começar

Você precisa de três coisas: um editor de texto, um navegador e, na hora de publicar, uma conta no GitHub e outra na Cloudflare. As duas contas têm plano grátis. O domínio próprio, se você quiser um, é pago à parte.

Repositório é a pasta do projeto guardada no GitHub. Segundo a documentação do GitHub, o Git é um sistema de controle de versão que rastreia as mudanças nos arquivos. Cada registro dessas mudanças se chama commit.

Passo a passo: do arquivo vazio ao site no ar

1. Crie uma pasta chamada meu-site no computador.
2. Dentro dela, crie o arquivo index.html com a estrutura básica (veja a próxima seção).
3. Crie a pasta css com o arquivo style.css e ligue esse arquivo no head.
4. Abra o index.html no navegador e ajuste até ficar como você quer.
5. Teste em largura de celular com as ferramentas do desenvolvedor do navegador.
6. Envie a pasta para um repositório novo no GitHub.
7. Conecte o repositório ao Cloudflare Pages e publique.

Cada etapa leva poucos minutos quando o conteúdo está pronto. O que mais demora é escrever os textos e escolher as fotos, não o código.

A estrutura básica de um documento HTML5

Toda página HTML segue o mesmo esqueleto. A MDN explica cada parte: o doctype no topo, o elemento html que envolve tudo, o head com informações que o visitante não vê e o body com o conteúdo visível.

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Padaria Exemplo | Pães artesanais</title>
    <meta name="description" content="Pães artesanais feitos todo dia.">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="index.html">Início</a>
        <a href="sobre.html">Sobre</a>
        <a href="contato.html">Contato</a>
      </nav>
    </header>
    <main>
      <h1>Pães artesanais no seu bairro</h1>
      <p>Fornada nova toda manhã.</p>
    </main>
    <footer>
      <p>Padaria Exemplo</p>
    </footer>
    <script src="js/main.js" defer></script>
  </body>
</html>

O meta charset com utf-8 faz acento e cedilha aparecerem certos. Segundo a MDN, não existe motivo para deixar de declarar a codificação. O lang com pt-BR avisa leitores de tela e buscadores que o texto está em português.

A meta viewport é obrigatória. A MDN explica que, sem ela, navegadores de celular desenham a página numa largura virtual de cerca de 980 pixels e encolhem tudo. Aí o texto fica minúsculo e as suas regras para tela pequena nem chegam a valer.

As tags header, nav, main e footer dão sentido às partes da página. Elas ajudam o leitor de tela a pular direto para o conteúdo e deixam o código mais fácil de manter.

Como organizar as pastas do site

Uma estrutura simples evita caminho quebrado e facilita a publicação. A Cloudflare procura o index.html na raiz da pasta publicada, então ele fica no topo.

meu-site/
  index.html
  sobre.html
  contato.html
  css/
    style.css
  js/
    main.js
  img/
    fachada.webp

Use nomes curtos, em minúsculas, sem acento e sem espaço. Um arquivo chamado "Foto Fachada.JPG" funciona no seu computador e pode falhar no servidor.

Como dar estilo com CSS pensando no celular primeiro

O CSS define cores, fontes, espaços e colunas. A MDN recomenda começar com uma coluna para telas estreitas e só abrir mais colunas quando houver espaço. Essa abordagem se chama mobile first.

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #1f2937; }
main { max-width: 70ch; margin: 0 auto; padding: 1rem; }
img { max-width: 100%; height: auto; }
nav a { display: inline-block; padding: 0.75rem; }

@media (width >= 48rem) {
  .servicos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
}

A regra de imagem com max-width 100% impede que a foto passe da largura da tela. A media query só aplica as três colunas quando a janela tem largura suficiente. Para ir além, leia o guia de site responsivo e acessível.

Um pouco de JavaScript, só quando precisa

Um site institucional funciona sem JavaScript. Ele entra quando a página precisa reagir ao visitante, como abrir o menu em tela pequena.

const botao = document.querySelector(".menu-botao");
const menu = document.querySelector("nav");
botao.addEventListener("click", () => {
  const aberto = menu.classList.toggle("aberto");
  botao.setAttribute("aria-expanded", aberto);
});

O atributo defer na tag script faz o navegador carregar o arquivo sem travar a leitura da página. O aria-expanded avisa ao leitor de tela se o menu está aberto ou fechado.

Como publicar no GitHub e na Cloudflare

Publicar é o passo que mais assusta quem começa, e é o mais curto. A documentação da Cloudflare descreve o caminho para um site sem framework.

1. Crie um repositório vazio no GitHub.
2. Na pasta do site, rode git init, git add, git commit e git push para enviar os arquivos.
3. No painel da Cloudflare, abra Workers & Pages e escolha criar uma aplicação.
4. Na aba Pages, importe o repositório do GitHub.
5. Em comando de build, use exit 0, porque não há nada para compilar.
6. Em pasta de saída, informe a pasta onde está o index.html.
7. Publique. O site ganha um endereço com final pages.dev.

Depois disso, cada novo envio ao repositório gera uma nova publicação. A página de limites do Pages informa 500 builds por mês, até 20.000 arquivos por site e arquivos de até 25 MiB no plano grátis. A mesma documentação da Cloudflare recomenda começar projetos novos pelo Workers, que também serve arquivos estáticos. Os detalhes estão em Cloudflare Pages e em como usar o GitHub para criar sites.

O GitHub Pages é outra opção para publicar. A documentação do GitHub, porém, diz que ele não serve como hospedagem grátis para tocar um negócio online. Para site de empresa, use a Cloudflare ou uma hospedagem paga.

Erros comuns de quem está começando

Antes de publicar, abra cada página no celular de verdade, clique em todos os links e leia os textos em voz alta. Erro de digitação no telefone de contato custa cliente.

Quando o HTML puro não é o melhor caminho

HTML puro serve bem para site institucional, página de serviço, cardápio, portfólio e landing page. Ele fica rápido, tem pouca coisa para atacar e não depende de plugin. O código é seu e muda de lugar quando você quiser.

O cenário muda quando o site precisa de área de login, carrinho de compras ou centenas de páginas que outra pessoa vai editar todo dia. Aí um sistema com painel, como o WordPress bem cuidado, ou uma loja virtual pronta, pode fazer mais sentido. Repetir menu e rodapé em dezenas de arquivos também cansa: nesse ponto, um gerador de site estático resolve.

O pilar criar sites sem WordPress compara os caminhos. Se a dúvida é sobre o que vem antes do código, a resposta sobre o que é preciso para criar um site lista domínio, conteúdo e hospedagem. O índice completo do tema está na resposta do Mundo Criação de Sites, e o panorama do portal começa pela resposta.

Não quer fazer sozinho?

A gente cria o seu site em HTML puro sem cobrar pela criação. A condição é contratar uma hospedagem de sites da HostGator em ciclo anual pelo link do MundoBlá e depois chamar no WhatsApp. O MundoBlá recebe uma comissão da HostGator quando você contrata pelo link, sem custo extra para você.

Hospedagem e domínio você paga direto à HostGator. O escopo do site é combinado no WhatsApp antes de começar, e o código fica guardado no GitHub.

Em outros Mundos

Se você quer ir além do HTML e aprender a programar, o Mundo Programação reúne guias de linguagens e lógica para iniciantes.