Como criar um site simples usando apenas um editor de texto

Aprenda a criar um site básico do zero usando apenas um editor de texto simples, sem precisar de programas complicados.

  1. Preparando o ambiente de trabalho. Primeiro, abra o editor de texto do seu computador. No Windows, use o Bloco de Notas. No Mac, use o TextEdit (configure para texto simples). Crie uma pasta no desktop chamada 'MeuSite' onde vamos salvar todos os arquivos. Dentro desta pasta, você vai criar os arquivos da sua página web. Certifique-se de que tem um navegador instalado (Chrome, Firefox ou Safari) para testar o site.
  2. Criando a estrutura básica HTML. No editor de texto, digite a estrutura básica: <!DOCTYPE html> na primeira linha, depois <html> para abrir a página. Dentro, crie duas seções principais: <head> onde ficam informações invisíveis como o título, e <body> onde fica o conteúdo visível. No head, adicione <title>Meu Primeiro Site</title>. No body, escreva <h1>Bem-vindos ao meu site!</h1> e <p>Esta é minha primeira página web.</p>. Termine fechando todas as tags: </body> e </html>.
  3. Salvando o arquivo corretamente. Salve o arquivo na pasta 'MeuSite' com o nome 'index.html'. É muito importante usar a extensão '.html' e não '.txt'. Se estiver no Windows, no Bloco de Notas, escolha 'Salvar como', mude o tipo de arquivo para 'Todos os arquivos' e digite 'index.html' com aspas. Este será o arquivo principal do seu site.
  4. Testando seu site no navegador. Vá até a pasta 'MeuSite' no seu computador e clique duas vezes no arquivo 'index.html'. O arquivo deve abrir no seu navegador e mostrar sua página web! Você verá o título na aba do navegador e o conteúdo na página. Se algo não aparecer como esperado, volte ao editor de texto e verifique se todas as tags foram fechadas corretamente.
  5. Adicionando mais conteúdo. Agora você pode enriquecer sua página. Adicione mais parágrafos com <p>, listas com <ul> e <li>, e links com <a href=''>. Para adicionar uma imagem, use <img src='nome-da-imagem.jpg'>. Experimente diferentes tamanhos de títulos: <h1>, <h2>, <h3>. A cada mudança, salve o arquivo e atualize a página no navegador (F5) para ver o resultado.
  6. Adicionando estilo com CSS básico. Para deixar o site mais bonito, adicione estilos. No <head>, coloque <style> e dentro dele escreva regras como: body { font-family: Arial; background-color: lightblue; } h1 { color: navy; text-align: center; }. Feche com </style>. Isso mudará a fonte, cor de fundo e centralizará o título. Experimente diferentes cores e estilos.