Olá! Se você leu o post anterior O Boom da Internet, sabe que dei início a uma série de matérias ensinando a criar um site. Dando continuidade a isso, vou falar nesse post sobre o famoso HTML, que é a base de todo Website que você já acessou em toda a sua vida.
O que é HTML?
Sendo bem sucinto, HTML é uma sigla que significa HyperText Markup Language (em tradução livre, Linguagem de Marcação de Hipertexto). É com ela que começamos nossa jornada, porque ela é com ela que criamos cada elemento que se vê em qualquer site e a primeira parte a ser desenvolvida.
Como o meu interesse é explicar como criar um site, não vou me ater a origem da linguagem ou versões anteriores. Vou apenas explicar do que é composta e exemplificar criando uma marcação simples para o nosso projeto.
Ela é composta por marcações (não me diga?) que são chamadas de Tag's, cada tag é composta do nome da Tag entre < e > (símbolo menor que) e o seu oposto (maior que). E, de modo geral, devem ser fechadas com uma forma parecida mas que contém uma / (barra) logo antes do nome da Tag assim </nomeDaTag>.
Segue um exemplo da primeira Tag padrão (com exceção do <!doctype> que não é bem uma Tag HTML) de toda página web: <html></html>
Um pouco sobre o ramo
Atualmente a linguagem encontra-se na versão 5 como você deve saber. De fato, muita coisa tem mudado muito rapidamente no HTML5. Isso porque é difícil chegar a um consenso sobre melhores práticas de como escrever seu código, o que causa muita divergência de opiniões. O que leva os desenvolvedores a loucura diariamente, tanto os de Websites como os de WebBrowsers ( navegadores ), tirando o sono de muita gente com estudo e mais estudo.
Eu acho que esse é um dos motivos da valorização do trabalho atualmente - não chega nem perto de ser o principal, que é o fato de o mercado está cada vez maior e a procura de gente qualificada para empregar. Então se você é preguiçoso ou não gosta de ler, provavelmente está entrando no ramo de trabalho errado...
A marcação básica
Como quero que o artigo abranja desde quem já saca alguma coisa até quem não sabe a diferença de monitor e teclado, vou ser bem detalhista. Os códigos a seguir, devem ser digitados em um editor de textos. Eu indico o notepad++, que é leve, prático e destaca o código (depois de salvar o arquivo) evidenciando os erros e ajudando na manutenção do mesmo, mas caso você não saiba, cada sistema operacional já vem com um instalado, o windows por ex. vem com o Notepad.
No geral, cada página é um arquivo HTML (nem sempre isso acontece, como é o caso de alguns sistemas com linguagem dinâmica) e a Homepage (página inicial ) normalmente tem o nome de index.html. Isso ocorre pois os navegadores buscam esse arquivo por default (padão) quando você procura por um diretório.
Vamos criar nossa primeira página? Para isso basta digitar o seguinte código e salvá-lo com o nome index.html. É importante explicar que o que vêm depois do ponto em um arquivo é sua extensão e diz qual o tipo de arquivo.
<!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
Agora explicando o código, a primeira linha é o doctype ou seja tipo de documento e é extremamente importante, pois informa aos browsers do que se trata o arquivo. Nas versões anteriores do HTML era extenso e complicado agora é muito mais simples.
A segunda é a Tag HTML que deve abranger todo o seu código HTML sempre e nela encontramos a propriedade LANG que informa ao navegador em que língua se encontra o site.
Se formos escrever uma citação, em inglês por exemplo, deveremos usar a Tag CITE com a propriedade LANG informando que se trata de um texto em inglês, dessa forma:
<cite lang="en-us"></cite>
Importante: em HTML propriedades devem sempre conter seus valores entre aspas.
A HEAD é a cabeça do código, onde se encontram informações mais detalhadas sobre o documento, que no nosso caso são a Tag META que tem uma propriedade chamada CHARSET que diz o tipo de caractér usado é UTF8 e a Tag TITLE ( título ), o título é o que você vê em azul quando faz suas pesquisas no google, e também o que aparece escrito na aba do seu navegador.
E finalmente nós chegamos na parte que abriga o conteúdo do Website, a Tag BODY (que significa corpo, o que faz todo o sentido).
Bom como o assunto ficou meio prolongado vou dividir a matéria em duas partes. Então iremos criar nossa Homepage na próxima matéria com mais detalhes e ainda assim, sem deixar o texto longo de mais e chato pra vocês.
Curta a página da Visual no Facebook e siga a nossa página no Google+, se tem alguma dúvida ou deseja contribuir com algo, fique à vontade e deixe seu comentário.
Até a próxima!