Este post é voltado para você que não tem ideia do que é HTML, CSS ou JavaScript, mas gostaria de realizar um hello world em web.
Entendendo o navegador
Basicamente, o navegador é um programa que interpreta HTML, CSS e JavaScript, e transforma código em algo gráfico e fácil de ser entendido.
Como funciona a web?
De forma muito básica, quando você acessa uma url qualquer, uma requisição é feita do lado do Cliente (seu navegador), e chega até o seu destino que é no Servidor. O Servidor por sua vez identifica a requisição, autentica (se for necessário) e devolve a informação no formato de HTML para o Cliente, que por sua vez interpreta o HTML e exibe a página para o usuário.
Então, como o navegador consegue interpretar HTML, ele consegue interpretar também um arquivo com a extensão .html! Vamos para os testes então?
Escolhendo seu editor de código
Basicamente, é possível você usar o bloco de notas que já vem no sistema operacional que você usa, mas geralmente eles não possuem Syntax Highlight (coloração diferenciada para facilitar a leitura de código), então é mais recomendado usar um editor de código.
Opções de editor de código
- Sublime Text 3 - https://www.sublimetext.com/3
- Atom - https://atom.io/
- Visual Studio Code - https://code.visualstudio.com/download
- Notepad++ - https://notepad-plus-plus.org/download/v7.6.3.html
De longe o Sublime Text 3 é meu editor preferido, abre projetos e arquivos de forma rápida e raramente trava. Ele sozinho não faz muita mágica, mas ao instalar o Package Control (mais detalhes aqui), você pode instalar uma infinidade de plugins que agilizam seu desenvolvimento de uma forma inacreditavel! Segue aqui um post com alguns plugins favoritos que costumo usar. A única desvantagem é que de vez em quando abre um popup para comprar a licença. Comprando a licença o popup para de aparecer, mas as funcionalidades pagando ou não pagando são as mesmas.
Criando um arquivo .html
Usando o editor novo, clique em New File (Novo arquivo), depois selecione Salvar como (Save as) ou digite Ctrl + S e salve seu arquivo com um nome qualquer, com a extensão .html
Agora vamos ao código!
Agora podemos criar algum código nesse novo arquivo.
Você pode inserir o seguinte código:
Salve seu arquivo, clique nele com o botão direito do mouse, e escolha Abrir com, e selecione seu navegador favorito. Uma vez feito isto, o navegador irá exibir a sua página, interpretando o HTML que você colou no arquivo!
Entendendo o HTML
Você deve ter reparado que existem tags que abrem e que fecham. Por exemplo, a tag <head> e a tag </head> marcam a sessão head, que contém meta informações que não são exibidos na página. A tag title diz qual vai ser o titulo exibido na aba do navegador, a tag meta pode conter varias informações, no caso do exemplo, qual o encoding usado pelo navegador para essa página (no caso, UTF-8, que reconhece acentos)
A tag body marca a sessão onde haverão coisas que aparecerão na página em si. A tag h1 marca um cabeçalho, de nível 1 (para títulos principais). Experimente mudar para h2, h3 ou h4 por exemplo!
Já o <!DOCTYPE html> marca uma informação importante para o navegador, dizendo a ele que o código abaixo é em HTML5.
Identação
Reparou que há pequenos espaços em branco na frente de algumas linhas? Esses espaços em branco são chamados de identação, e são muito importante para leitura e melhor compreensão quando estiver codando, assim como para outras pessoas que forem ler seu código. Elas indicam que tudo que tem um certo espaço em quantidade igual está dentro de uma tag mais externa. É muito importante se habituar a escrever código bem identado desde o início. O código HTML no caso vai funcionar mesmo se não estiver identado, mas a boa prática é que ele seja identado para ajudar na manutenção do código. Veja o exemplo abaixo:
No exemplo, existe uma tag div, que contém uma tag ul, que por sua vez contém as tags li. Note que é possível observar rapidamente a hierarquia de pertencimento de cada uma delas.
Pratique muito!
Agora é questão de praticar! Crie seu próprio blog, crie uma loja para vender alguma coisa, crie um site sobre algum assunto e treine as diferentes tags, e estude pra que cada uma delas serve. Com o tempo você irá saber de cor o que cada uma delas faz.