Qual é o código para criar um site? HTML, CSS e JavaScript para quem não programa

O código de um site são três linguagens que todo navegador entende: HTML, CSS e JavaScript. Não importa se o site foi feito no Wix, no WordPress ou escrito à mão: o que chega ao celular de quem visita é sempre esse trio. Entender o papel de cada um ajuda a conversar com quem faz o seu site, a revisar o que uma IA entregou e a saber quando uma página simples basta.

O que cada linguagem faz numa página?

HTML monta a estrutura. Ele diz o que é título, o que é parágrafo, onde entra uma imagem e para onde vai cada link. Sem HTML não existe página. Um navegador consegue mostrar um arquivo só com HTML, sem nada mais, com a aparência padrão: letra preta, fundo branco, tudo empilhado.

CSS define a aparência. Cores, fontes, espaçamento, colunas e o jeito como a página se reorganiza no celular ficam no CSS. O mesmo HTML com CSS diferentes vira duas páginas que não se parecem em nada.

JavaScript cuida da interação. É ele que faz a página reagir ao que a pessoa faz ou ao momento em que ela visita: abrir um menu, calcular um valor, validar um formulário antes do envio. Muitas páginas simples não precisam de JavaScript nenhum.

Dois sites que fiz mostram onde o JavaScript entra. Na prévia de site que montei para a Barbearia Dom Rocha, em Guarulhos, o horário da semana mostra se a barbearia está aberta ou fechada naquele momento. A página é a mesma para todo mundo, então quem confere a hora é um código que roda no navegador de quem visita. No site da Retiro Entulhos, a pessoa informa quantos sacos de entulho tem, o andar e o endereço, e vê o preço na hora. A tabela e os textos são HTML e CSS; a conta que muda o preço enquanto a pessoa preenche é JavaScript.

Qual é o código mínimo de uma página?

Uma página completa cabe num arquivo chamado index.html. Este é o mínimo que eu considero aceitável para uma página de negócio local:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nome do negócio | Cidade</title>
    <meta name="description" content="O que você faz, para quem e onde.">
    <style>
      body { font-family: sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
      .botao { display: inline-block; padding: .8rem 1.2rem; background: #f26b1d; color: #fff; text-decoration: none; }
    </style>
  </head>
  <body>
    <h1>Nome do negócio</h1>
    <p>O que você faz, em uma frase.</p>
    <a class="botao" href="https://wa.me/55DDDNUMERO">Chamar no WhatsApp</a>
  </body>
</html>

Linha por linha, o que importa:

• lang="pt-BR" avisa ao navegador e ao Google o idioma da página.
• meta charset="utf-8" garante que acentos apareçam certos.
• meta name="viewport" faz a página se ajustar à tela do celular. Sem ela, o celular mostra a página encolhida, como se fosse um computador.
• title e meta name="description" são o título e o resumo que costumam aparecer no resultado do Google.
• O bloco style é o CSS. Num site maior, ele vai para um arquivo separado.
• h1 é o título principal. Use um por página.
• O link do WhatsApp usa o endereço wa.me com o número completo, com o código do país e o DDD.

Esse arquivo abre em qualquer navegador e já pode ir para a internet. Daqui para cima, o trabalho é de conteúdo: o texto certo, as fotos, as perguntas que o cliente faz antes de chamar.

WordPress, Wix e construtores também usam esse código?

Usam. O que muda é quem escreve o HTML e quando.

No WordPress, um programa em PHP roda no servidor a cada visita, busca o texto no banco de dados e monta o HTML na hora. O site da ClickNick Store, feito em WordPress com Elementor, e o da Planet Tecnologia Solar e Piscinas funcionam assim. Quem edita mexe no painel e nunca vê o código, mas o navegador do visitante recebe HTML, CSS e JavaScript do mesmo jeito.

Nos construtores com editor visual, como o Wix, você arrasta blocos e a plataforma gera o código por você. Você não tem acesso direto a ele, e por isso o site fica preso à plataforma.

Num site estático, o HTML fica pronto antes de ir ao ar. Os sites da Retiro Entulhos e da Barbearia Dom Rocha foram feitos com o Astro, uma ferramenta que gera os arquivos de cada página na hora de publicar. O servidor só entrega arquivos prontos, sem banco de dados, e por isso a página carrega rápido e cabe em hospedagens gratuitas. A comparação entre esse formato e o WordPress, critério por critério, está em site WordPress ou sob medida, e as opções de criador de sites estão em qual é o melhor criador de sites.

Como colocar o código no ar?

Um arquivo no seu computador só existe para você. Para o site aparecer para os outros, são dois passos.

1. Hospedagem. É o serviço que guarda os arquivos e os entrega a quem abre o endereço. Um site estático pode ficar no plano gratuito do Cloudflare Pages: pela documentação da Cloudflare, as visitas aos arquivos estáticos são grátis, e os limites ficam em outro lugar, como 500 publicações por mês e 20 mil arquivos por site. As outras opções e o que olhar antes de contratar estão em hospedagem de site.
2. Domínio. É o endereço com o nome do negócio. Em outubro de 2026, o .com.br custava R$ 40 por ano no Registro.br. Registre no seu CPF ou CNPJ; o passo a passo está em domínio próprio.

Com o domínio apontado para a hospedagem, a página que você viu no seu navegador passa a abrir no celular de qualquer pessoa.

Onde a inteligência artificial entra?

A IA escreve o código a partir de uma descrição em português. No Claude, até no plano gratuito, você descreve a página e ele entrega o HTML, o CSS e o JavaScript, com o resultado ao lado da conversa para testar e pedir ajustes. Para um site com várias páginas em arquivos no seu computador, o Claude Code, dos planos pagos, cria e edita os arquivos do projeto. Os detalhes estão em o Claude.ai cria um site?, e o caminho completo sem gastar está em como criar um site 100% gratuito.

Eu desenvolvo com a ajuda do Claude, e o código sai rápido. A revisão é que leva tempo. Antes de publicar uma página feita por IA, confira:

• se ela abre bem no celular, sem rolagem para os lados;
• se o título e a descrição dizem o que o negócio faz e onde atende;
• se o número do WhatsApp, o endereço e o horário estão certos;
• se cada imagem tem um texto alternativo que descreve o que ela mostra;
• se o texto vale só para o seu negócio ou serviria para qualquer concorrente.

O último item é o que a IA mais erra. Ela escreve um texto correto e genérico, porque não conhece os seus clientes.

Preciso aprender a programar para ter um site?

Para uma página simples, não. Uma IA ou um construtor escrevem o código, e você cuida do conteúdo. Ler HTML no nível do exemplo acima já ajuda bastante: você entende o que está pedindo, encontra um telefone errado sozinho e conversa melhor com quem faz o site.

O código passa a exigir um profissional quando o site precisa guardar ou processar informação. Formulário que envia e-mail, pagamento, área com login e pedido gravado num banco de dados pedem uma parte que roda no servidor, com cuidados de segurança e de privacidade. No site da Retiro Entulhos, por exemplo, cada pedido fica gravado, gera e-mail para o cliente e para a empresa e aparece num painel em que o dono muda preços e regiões atendidas. Essa parte vai muito além do trio HTML, CSS e JavaScript.

Se o seu caso é uma página que apresenta o negócio e leva o cliente ao WhatsApp, o código cabe num arquivo. Se você ainda está decidindo o formato, o guia de os 7 tipos de sites ajuda a enquadrar o seu caso.