Como fazer um site com HTML e CSS (passo a passo completo) | We.Inc
Crie um site completo de uma página com HTML e CSS: estrutura básica, cabeçalho, hero, seções, formulário de contato, rodapé, layout responsivo e publicação, com prévia ao vivo.
Como fazer um site com HTML e CSS
Crie uma pasta com dois arquivos de texto simples: index.html para o conteúdo e styles.css para o visual. Comece o index.html com a estrutura padrão (doctype, html, head, body), vincule a folha de estilo no head, adicione um cabeçalho, as seções principais e um rodapé, e abra o arquivo no navegador. Envie a pasta para qualquer hospedagem estática para publicar.
O site completo em seis passos
Passo
Arquivo
O que você adiciona
1. Estrutura básica
doctype, html lang, head com charset, viewport e title
2. Estrutura
header, nav, main com seções, footer
3. Conteúdo
Títulos, parágrafos, uma imagem com texto alternativo, um formulário
4. Estilo
Fonte, cores, espaçamento, uma largura de conteúdo centralizada
5. Layout
Flexbox no cabeçalho, grid nos cards, uma media query
6. Publicação
Os dois
Envie a pasta para uma hospedagem estática
Este é o site inteiro, não só o primeiro arquivo. Você vai escrever a página de um pequeno negócio, de uma pasta vazia até um layout responsivo, e o construtor abaixo permite digitar o seu próprio nome e dados e ver a página final se atualizar. Cada trecho está completo, então você pode copiar os dois arquivos finais e abri-los na hora.
Crie uma pasta nova no seu computador e, dentro dela, crie index.html e styles.css com qualquer editor de texto simples.
Preencha os campos do construtor abaixo para moldar a página e copie os dois arquivos gerados para a sua pasta.
Clique duas vezes em index.html para abrir no navegador. Edite, salve e atualize para ver cada mudança.
Leia as seções de cada passo para entender o que cada parte do código faz e alterá-lo com segurança.
Quando estiver satisfeito, publique a pasta com uma das opções de hospedagem do final.
Use um editor de código como o VS Code, e não um processador de texto, que adiciona formatação que os navegadores não conseguem ler.
Chame a página inicial de index.html. A maioria das hospedagens serve esse arquivo automaticamente quando alguém visita o endereço da pasta.
Use nomes de arquivo em minúsculas e sem espaços, por exemplo about-us.html, porque muitos servidores diferenciam maiúsculas de minúsculas.
Antes de publicar, confira o resultado na barra de dispositivos das ferramentas de desenvolvedor do navegador, com uma largura estreita de celular.
Passe a página por um validador de HTML. Ele encontra tags não fechadas que os navegadores contornam silenciosamente.
Perguntas frequentes
Preciso pagar alguma coisa para fazer um site em HTML?
Não. Escrever os arquivos só exige um editor de texto e um navegador, ambos gratuitos. Várias hospedagens estáticas têm planos gratuitos para sites pequenos; um domínio próprio costuma ser o único custo, se você quiser um.
Por que preciso da meta tag viewport?
Sem ela, os navegadores de celular montam a página em uma largura grande de desktop e a encolhem, e o texto fica minúsculo. width=device-width diz a eles para usar a largura real da tela, e é isso que faz as media queries funcionarem.
Um site só com HTML pode ter formulário de contato?
O HTML desenha o formulário, mas algo precisa receber o envio. Em uma hospedagem estática, aponte o action do formulário para um serviço de formulários ou para o recurso de formulários da sua hospedagem. Um link mailto: é a alternativa mais simples.
Como adiciono mais páginas?
Crie outro arquivo, como about.html, com o mesmo cabeçalho e rodapé, faça um link para ele com <a href="about.html">About</a> e compartilhe o mesmo styles.css entre eles. Cada página deve ter o seu próprio title e h1.
Devo usar um framework?
Não no primeiro site. HTML e CSS puros carregam rápido, não precisam de etapa de build e ensinam o que todo framework produz por baixo. Recorra a um framework quando precisar de componentes compartilhados em muitas páginas ou de comportamento de aplicativo.
Tags semânticas fazem diferença de verdade
header, nav, main, section e footer não são só nomes mais organizados para div. Leitores de tela os expõem como landmarks entre os quais as pessoas podem saltar, e os buscadores os usam para separar o conteúdo principal dos menus repetidos.
Use um h1 para o assunto da página e um h2 para cada seção. A estrutura de títulos, listada sozinha, deve parecer um sumário.
Um layout que funciona primeiro no celular
Escreva o layout de celular em uma coluna como padrão, já que os blocos se empilham na vertical naturalmente. Depois adicione uma media query com min-width para ativar as colunas quando houver espaço.
Limite a largura de leitura com max-width em um contêiner e centralize com margin-inline: auto. As linhas continuam confortáveis em telas largas sem nenhuma regra extra.
Publicando a sua pasta
Uma hospedagem estática serve os seus arquivos como estão, e é só disso que um site em HTML e CSS precisa. As opções comuns permitem arrastar a pasta para um painel ou conectar um repositório Git para que cada push atualize o site no ar.
Depois de enviar, abra o endereço no ar pelo celular, clique em todos os links e envie o formulário uma vez para confirmar que ele chega até você.
Passo 1: a estrutura básica da página
Toda página HTML começa com as mesmas poucas linhas. O doctype mantém os navegadores no modo padrão, lang diz aos leitores de tela em que idioma falar e a tag viewport faz os celulares usarem a sua largura real.
Ponto de partida do index.html
Salve isto, abra no navegador e você já tem uma página válida com título na aba.
Passos 2 e 3: estrutura e conteúdo
Dentro do body, um header guarda o nome e o menu, main guarda as seções e um footer fecha a página. O resultado ao vivo abaixo ainda não tem estilos, o que mostra como um bom HTML é legível por si só.
Cabeçalho, hero, cards, formulário de contato e rodapé
Edite o texto e o resultado se atualiza. Repare nos rótulos do formulário: clicar em um rótulo coloca o foco no campo dele.
Coloque isto em styles.css, ao lado do index.html. Ele define uma tipografia legível, uma coluna centralizada, um cabeçalho com flex e uma grade de cards que vira três colunas em telas mais largas.
A folha de estilo completa
Envolva o conteúdo de header, main e footer em <div class="wrap"> para centralizá-lo, como faz o resultado do construtor.
Passo 6: publicar
Formas de colocar uma pasta estática no ar
Caminho
Bom para
O que você faz
Hospedagem estática de arrastar e soltar
O seu primeiro site
Envie a pasta pelo painel da hospedagem
Hospedagem estática conectada ao Git
Sites que você vai continuar editando
Faça push para um repositório; a hospedagem publica de novo
Hospedagem compartilhada
Sites que também precisam de e-mail ou PHP
Envie pelo gerenciador de arquivos ou por SFTP para a pasta pública
Um criador de sites
Pular o código por completo
Descreva o site e edite visualmente
Padaria do Porto
Pão de fermentação natural fresquinho, assado antes do sol nascer.
Pão rústico de fermentação natural
Centeio com sementes
Doces de fim de semana
Monte a sua página
Digite o nome do seu negócio, o slogan e três produtos ou serviços. A prévia e os dois arquivos se atualizam enquanto você digita, prontos para copiar.