Como criar uma página web básica?

Criar uma página web básica pode parecer um pouco complicado à primeira vista, mas com algumas etapas simples, é possível fazê-lo facilmente usando um editor de códigos. Vamos ver um passo a passo básico.

Passo 1: Instale um editor de códigos

Existem muitos editores de texto ou códigos que podem ser usados para escrever os comandos de programação. Desde o bloco de notas simples do Windows até outros bem avançados. O editor de códigos que eu recomendo e que a maioria dos programadores utiliza é o VS Code (Visual Studio Code).

Se você ainda não tiver o VS Code instalado, você pode baixá-lo gratuitamente a partir do site oficial. Acesse o site e escolha a opção de download compatível com o seu sistema operacional.

Passo 2: Crie um arquivo HTML

Abra o VS Code e crie um novo arquivo. Para fazer isso, clique em "File" (Arquivo) no menu superior e selecione "New File" (Novo Arquivo). Em seguida, salve o arquivo como "index.html". Certifique-se de usar a extensão .html ao salvar o arquivo para indicar que é um arquivo HTML.

Passo 3: Escreva o código HTML

Agora, você precisa escrever o código HTML dentro do arquivo "index.html". O HTML é uma linguagem de marcação que define a estrutura e o conteúdo de uma página web. Você pode aprender mais sobre HTML lendo este outro artigo ou assistindo meu curso completo e gratuito de HTML. O VS Code possui um atalho para criar uma estrutura básica. Basta digitar "!" (ponto de exclamação) e dar um enter na sugestão que ele preenche para você. Você pode digitar "html5" também que ele faz algo semelhante. Aqui, vamos usar um exemplo simples:

<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    <h1>Título Principal</h1>
    <p>Parágrafo de Texto.</p>
  </body>
</html>
    

Este código cria uma página web básica com um título, um cabeçalho principal e um parágrafo de texto. O título aparecerá na guia do navegador, enquanto o cabeçalho e o parágrafo aparecerão no corpo da página.

Passo 4: Visualize a página web

Para ver como a página web se parece, primeiro salve o arquivo. Você pode fazer isso teclando CTRL + S ou indo em cima no menu "Arquivo (file)" "Salvar (save)". Na aba extensões do VS Code procure por "Live Server" uma extensão que auxilia para vermos as modificações da nossa página em tempo real. Instale essa extensão. Após feito isso volte na sua página index.html e veja que bem abaixo no canto direito aparecerá um botão escrito "Go Live". Clique nesse botão. Dessa forma você poderá ver como ficou a página.

Outra opção é ir até a pasta onde você criou o projeto, clicar com botão direito sobre o arquivo e escolher "Abrir Com..." e selecionar um navegador qualquer

E isso é tudo! Estas são as etapas básicas para criar uma página web simples usando o VS Code. A partir daqui, você pode continuar aprendendo HTML e adicionando mais elementos à sua página web.