Como criar um site em HTML passo a passo

O que é HTML

HTML é a linguagem de marcação que descreve a estrutura de uma página. Ela diz o que é título, parágrafo, imagem e link. O navegador lê essas marcações e monta a página na tela.

Segundo a MDN, a referência de desenvolvimento web, uma página HTML começa com o doctype e tem um elemento raiz chamado html. Dentro dele ficam o head, com informações sobre a página, e o body, com o conteúdo visível.

HTML organiza o conteúdo, mas não define a aparência. Cores, espaços e tamanhos vêm do CSS, que também é um padrão aberto mantido pelo W3C. Por isso, quem aprende HTML costuma aprender CSS logo em seguida.

O que você precisa

Você precisa de um editor de texto e de um navegador. O bloco de notas do Windows serve para começar. Editores gratuitos também funcionam e mostram as cores do código, o que facilita a leitura.

Crie uma pasta no computador e dê a ela um nome simples, como site. Todos os arquivos do projeto ficam dentro dela. Assim, as imagens e as páginas encontram umas às outras sem caminhos complicados.

Ao salvar, escolha a opção Todos os arquivos no campo de tipo. Sem essa escolha, o bloco de notas pode salvar o arquivo como texto puro, com a extensão .txt.

Passo a passo: a primeira página

1. Crie a pasta site e abra o bloco de notas dentro dela.
2. Escreva a estrutura básica da página:

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Meu primeiro site</title>
</head>
<body>
  <h1>Olá, mundo</h1>
  <p>Este é o meu primeiro parágrafo.</p>
</body>
</html>

3. Salve o arquivo na pasta site com o nome index.html e a opção Todos os arquivos escolhida.
4. Dê um duplo clique no arquivo. O navegador abre a página com o título na aba.

Cada parte tem uma função. O doctype avisa o navegador que a página é HTML. A tag html envolve tudo. O head guarda o título da aba e a codificação de caracteres. O body contém o que o visitante vê.

Como dar estilo com CSS

Para mudar a aparência, coloque um bloco style dentro do head. Nele você escreve regras que dizem o que mudar em cada elemento, como a cor do título ou o alinhamento de um parágrafo.

<style>
  body { background-color: #f5f5f5; font-family: Arial, sans-serif; }
  h1 { color: #1d4ed8; text-align: center; }
  p { text-align: justify; }
</style>

Cada linha tem três partes: o seletor, que escolhe o elemento, a propriedade, como color, e o valor, como #1d4ed8. Uma regra no style vale para todos os elementos que ela seleciona, então você não precisa repetir o estilo em cada tag.

Para incluir uma imagem, use a tag img com o caminho do arquivo e um texto alternativo. O atributo alt descreve a imagem para quem não a vê. O atributo align, muito usado em tutoriais antigos, foi substituído pelo CSS.

Erros comuns

• Salvar como .txt. O arquivo abre como texto puro e nada aparece formatado. Confira a extensão antes de abrir.
• Esquecer de fechar uma tag. O navegador tenta corrigir o erro, e a página pode sair torta. Cada tag aberta precisa de fechamento, com a barra antes do nome.
• Acentos quebrados. Confirme se a linha meta charset com utf-8 está dentro do head.
• Imagem que não aparece. Confira o nome do arquivo e a pasta. O caminho é relativo ao arquivo HTML.
• Editar e não ver a mudança. Salve o arquivo e recarregue a página no navegador com F5.

Quando a página estiver pronta

Quando a página estiver pronta, ela precisa de uma hospedagem para aparecer na internet. Um site feito só com HTML e CSS sobe em qualquer hospedagem que aceite arquivos estáticos. Antes de publicar, teste em celular e em computador.

Para entender como o site chega até o visitante, a resposta completa organiza os temas de internet em uma leitura só. Outras dúvidas de tecnologia estão na categoria resposta. Para ver o panorama do MundoBlá, comece pela resposta.

Em outros Mundos

Para quem quer um site sem escrever código, veja como criar um site no WordPress do zero, do Mundo Marketing.