O jeito mais fácil de começar a aprender desenvolvimento web é criando uma página que você possa ver em seu navegador, seja ele Chrome, Firefox, ou até mesmo no Edge. Esse é um processo bem simples que leva apenas um minuto. Não precisa pagar nada, nem se registrar em site algum, e nem mesmo instalar nada. Basta apenas:
- Abrir um editor de texto simples.
- Copiar e colar um código HTML.
- Salvar o arquivo com a extensão
.html. - Abrir esse arquivo em seu navegador.
Dependendo do seu nível de conhecimento técnico, esses 4 simples passos podem parecer complicados, mas fique tranquilo—eu irei explicar como tudo funciona direitinho neste artigo.
Passo Zero: Entenda o Objetivo
Antes de tudo, é importante entender como páginas web e navegadores de internet funcionam. Quando um navegador de internet acessa uma página na web através de sua URL, o navegador "baixa" a página e a exibe. Essa página é um arquivo HTML.
Isto é, existe um arquivo HTML que sai do servidor lá na internet e vai para o seu computador, mas quando o navegador faz o download desse arquivo, ele não salva o arquivo na sua pasta de downloads, ele simplesmente exibe o arquivo diretamente.
Com isso, não é necessário ter um website para criar uma página, basta apenas criar o arquivo HTML e seu navegador será capaz de abrir ele mesmo se estiver salvo em seu disco rígido e não na internet.
Como é o Arquivo HTML?
O arquivo HTML é um arquivo de texto simples contendo código fonte HTML. Todo código fonte escrito por seres humanos é escrito em texto simples. Texto simples é um formato que costuma ser salvo com a extensão de arquivo .txt e pode ser escrito com o programa Bloco de Notas que vem instalado no Windows. O código fonte de uma página HTML seria desse jeito:
<!doctype html>
<meta charset="utf-8">
<title>Minha primeira página HTML</title>
<h1>Minha primeira página</h1>
<p>Estou aprendendo HTML!Se você conseguir salvar esse texto simples corretamente, só de fazer isso você terá criado sua primeira página HTML e poderá abrir ela em seu navegador.
É importante notar que programas de edição de texto para impressão, como o Microsoft Word, que possuem a habilidade de escrever texto colorido, adicionar tabelas, imagens, etc., não são chamados de "texto simples" mas sim de "texto rico" (e.g. extensão .doc). Este é um formato de arquivo completamente diferente. Se você usar o Microsoft Word para escrever código HTML, o navegador não conseguirá abrir a página, já que o arquivo não estará em um formato que ele é capaz de entender.
Primeiro Passo: Abra um Editor de Código
Agora que já entendemos o que é para fazer, vamos começar pelo primeiro passo: abrir um programa que salve arquivos em texto simples.
No Windows, o Bloco de Notas (Notepad, pronunciado "nóti-pédi") que já vem instalado no sistema é capaz de salvar esse tipo de arquivo. Porém, o Bloco de Notas não é um editor próprio e especializado para código fonte. Simplesmente ocorre que ele é capaz de salvar arquivos no mesmo formato.
Para o Windows, um editor de código fonte simples e gratuito é o Notepad++ (Notepad Plus Plus, ou NPP). Esse Notepad++ não tem nada haver com o Notepad da Microsoft, só tem um nome parecido mesmo.
Um dos editores de código mais populares atualmente seria o Visual Studio Code (VSCode), que também é gratuito. Esse editor é ótimo para projetos complexos, porém como é necessário um pouco de configuração no começo e só queremos salvar um único arquivo, nesse tutorial faria mais sentido usar o Notepad ou Notepad++.
Para sistemas Linux, como o Ubuntu, Mint, Fedora, etc., existem vários editores de código disponíveis em seus respectivos gerenciadores de pacotes. O GEdit é um deles, parte da Gnome, que costuma vir instalado em Linux desktop.
Nesse artigo eu vou mostrar como que fazer com o bloco de notas normal mesmo, já que é o mais simples.
Segundo Passo: Copie e Cole o Código
Uma vez aberto o editor de código, vamos precisar colocar dentro dele o código (o texto) que queremos salvar. Você pode simplesmente digitar o código abaixo se quiser, mas é mas fácil copiar e colar.
<!doctype html>
<meta charset="utf-8">
<title>Minha primeira página HTML</title>
<h1>Minha primeira página</h1>
<p>Estou aprendendo HTML!Para copiar e colar o código acima, clique no começo do código com o botão esquerdo do mouse, e, mantendo o botão segurado, arraste o curso do mouse até o final do código. Com isso o texto ficará selecionado. Para copiar o texto selecionar, segure a tecla Ctrl e pressiona a tecla C (atalho de teclado Ctrl+C), ou clique com o botão direito na seleção, o que abrirá um menu de contexto onde haverá a opção "Copiar." O texto copiado fica salvo temporariamente no que é chamado de "área de transferência" (Clipboard). Após copiar o texto, abra o o editor de texto e pressiona Ctrl+V para colar, ou clique no menu Editar -> Colar.
Feito isso corretamente, o texto aparecerá da maneira acima. Caso não conseguir, o jeito é digitar mesmo.
Terceiro Passo: Salvar o Arquivo HTML
Agora que o código está dentro do editor, iremos salvar o arquivo com a extensão .html. Se você nunca programou nada no Windows, você precisará fazer certas coisas que não é comum de se fazer.
Primeiro, clique no menu Arquivo -> Salvar ou Salvar como.... A caixa de diálogo para salvar o arquivo irá aparecer. Se salvarmos o arquivo normalmente, ele será salvo com a extensão .txt, que NÃO É extensão que queremos.
Na caixa onde se digita o nome do arquivo, iremos digitar pagina.html. Observe que temos um ponto final (.) no nome do arquivo. O que vem depois do ponto final é chamado de extensão. Logo, pagina.txt tem a extensão txt, enquanto pagina.html tem a extensão html. Programas de computador usam a extensão do arquivo para determinar o tipo do arquivo e saber o que fazer com ele. Mesmo que os dados (os bits e bytes) salvos no arquivo sejam os mesmos, um arquivo .txt será aberto por padrão no Bloco de Notas, enquanto um arquivo .html será aberto por padrão no seu navegador de Internet. É sempre uma boa ideia usar a extensão apropriada.
Um detalhe: no Bloco de Notas, quando você salva um arquivo, você pode selecionar a "codificação" (encoding) do texto. Essa codificação refere ao formato dos bits e bytes e quais caracteres eles representam. No formato ANSI, acentos não são salvos. Isto é, "página" fica salva como "pagina" sem acento. Se houver esse problema, é só salvar de novo com a codificação UTF-8. Embora esse é um problema que possa ocorrer no Notepad do Windows, todo programa de edição de texto simples sempre usa uma codificação ao salvar e abrir arquivos de texto. Apenas ocorre que a maioria deles salva como UTF-8 por padrão hoje em dia.
Revendo os passos: escolha uma pasta onde quer salvar o arquivo, digite como nome do arquivo pagina.html, selecione a codificação UTF-8 se for necessário, e aperte o botão salvar. Se você fizer isso corretamente, o aquivo será salvo e você poderá velo na pasta onde você o salvou.
O ícone do arquivo depende do programa padrão configurado para abrir ele. Mais importante é o fato que salvamos a página como pagina.html mas apenas a palavra pagina sem .html aprece no gerenciador de arquivos.
Isso ocorre no Windows por que ele vem configurado por padrão para esconder extensões de arquivos conhecidos. Arquivos .html são categorizados como "conhecidos" para o Windows, já que qualquer navegador sabe abrir eles, includindo o Edge que vem instalado no Windows.
Embora não seja necessário mudar a configuração para exibir as extensões de arquivo, é uma boa ideia fazer isso, já que no desenvolvimento web (e de software em geral) fazemos uso da extensão para distinguir a linguagem usada em um arquivo de código fonte. Arquivos HTML teriam a extensão .html, mas os arquivos CSS terão .css, e os arquivos de Javascript terão .js. Esses arquivos são todos escritos, editados, e salvos da mesma forma que o arquivo HTML que fizemos. A única diferença entre eles é a extensão. Logo, para desenvolvedores, não faz sentido esconder a extensão dos arquivos.
Onde fica a configuração para exibir as extensões depende da versão do Windows.
- Em todas as versões do Windows, você digitaria no menu Iniciar ou na caixa de pesquisar programas a frase "Opções de Pasta," (Folder Options), para abrir uma janela de configurações. Nessa janela, na aba "Ver" (View), há em meio a várias caixas de seleção a opção "Esconder extensões de tipos de arquivos conhecidos" (Hide extensions for known file types). Desmarque essa opção e clique em OK.
- No Windows 8, 10, e 11, também é possível ir no Explorador de Arquivos (File Explorer), clicar no menu "Exibir" (View), no grupo "Exibir/ocultar" (Show/Hide), e marcar a opção "Extensões de nome de arquivo" (File name extensions).
Ao fazer isso, o gerenciador de arquivos passará a exibir o nome do arquivo por completo, incluindo a extensão.
Existe um motivo pelo qual o Windows não exibe as extensões por padrão!
Quando as extensões são exibidas, e você tenta renomear um arquivo, você poderá renomear a extensão também. É possível até botar um nome sem extensão alguma. Se você mudar a extensão do arquivo, o explorador de arquivos não saberá qual o tipo do arquivo e com isso clicar duas vezes no arquivo não funcionará corretamente.
Por exemplo, se você mudar um .jpg para .txt, o explorador de arquivos mandará o bloco de notas abrir a imagem, pois é ele que está encarregado da extensão .txt por padrão. Isso não funcionará, já que o bloco de notas não é um programa capaz de abrir imagens.
Se você renomear a extensão de um arquivo sem querer e não lembrar a extensão original, é possível des-renomear o arquivo através do atalho de teclado CTRL+Z.
Quarto Passo: Abrir o Arquivo HTML em Seu Navegador
Se você fez tudo certinho agora só falta abrir o arquivo HTML em seu navegador. Se o navegador estiver configurado como o programa padrão para arquivos .html, o que é bem possível, basta clicar duas vezes no arquivo pagina.html para abrir a página nele. Mas caso não esteja, por via das dúvidas, vou explicar um outro método: arrastar e soltar.
Primeiro, abra o seu navegador de internet. Se já estiver aberta com alguma página sendo exibida, abra uma nova aba (tab). Isso é importante já que algumas páginas na internet podem interferir com a função que iremos usar agora. Mova a janela para um lado do monitor. Basta clicar na barra no topo da janela e arrastar para um lado. Se estiver tendo problema, basta apertar a tecla do Windows (que fica entre o Ctrl e o Alt), e a seta para esquerda ou para direita. Se mesmo assim não conseguir, não tem problema, há outro modo de fazer também. De qualquer jeito, deixe essa janela do navegador para lá e abra o explorador de arquivos. Navegue até a pasta onde você salvou pagina.html. Clique no arquivo com o botão esquerdo e mantenha ele pressionado, e arraste o arquivo para a janela do navegador. Solte o arquivo no navegador e o navegador abrirá a página. Se ambas janelas estiverem maximizadas, você pode arrastar o arquivo para a barra de tarefas, sobre o ícone do navegador, para fazer que usa janela apareça.
Se isso não der certo a última opção é abrir o navegador e aperta a tecla de atalho Ctrl+O, e rezar para isso abrir uma caixa de diálogo para você escolher um arquivo para abrir.
Se você conseguir abrir o arquivo, você verá a página sua primeira página HTML no navegador em toda sua glória de 1 cabeçalho e 1 parágrafo.
Deu tudo certo? Deu sim? Então...
Que seja a primeira de muitas!
Infelizmente para você de agora em diante as coisas só vão ficar mais complicadas. Embora esse tutorial tenha usado o simples bloco de notas que vem instalado no Windows, usar esse programa para programar É UMA PÉSSIMA IDEIA!.Tente ao quanto antes baixar e se familiarizar com o Notepad++ (e um dia com o VSCode), já que são programas especializados para escrever código.
Duas funções que você irá precisar deles serão:
- Realce de Sintaxe (Syntax Highlighting): embora não haja como especificar a cor de parte de um texto no formato de texto simples, editores de código exibem o texto colorido, mudando a cor de partes do texto de acordo com seu significado baseado na linguagem do código fonte.
- Suporte a indentação usando a tecla de tabulação (tecla tab, pronunciada "tébi"), que fica em cima da tecla Caps Lock. Desenvolvedores usam indentações para organizar o texto no código fonte. Para essa página simples indentações não foram necessárias, mas para qualquer coisa um pouquinho mais complexa elas serão usadas.
Arquivos para Download
Segue abaixo um link para baixar uma pasta zipada com a pagina.html salva corretamente com código correto, caso precisar.
Deixe um comentário