Com certeza você já viu ou ouviu falar dessas quatro letrinhas, mas não sabe ou não lembra o que ela é e qual a sua importância para o mundo de hoje, pois bem, neste artigo iremos descobrir um pouco sobre essa incrível tecnologia, como ela contribui com nossa querida era da informação e talvez ao final vejamos algo interessante com ela.
Pois bem, chega de papo e vamos para o que de fato interessa.
HTML (acrônimo para HyperText Markup Language, que em bom português significa "Linguagem de Marcação de Hipertexto"), é uma linguagem de Marcação — veremos no futuro os tipos de linguagens e como diferenciar os tais — usada principalmente no desenvolvimento de páginas web. Documentos HTML — como são chamados os arquivos .html — são interpretados pelo navegador tais como Chrome, Edge e etc.
O HTML nasceu, como várias outras tecnologias, com a finalidade de resolver um certo problema em um certo contexto, que neste caso foi um problema de Tim Berners Lee de comunicação e da disseminação das pesquisas que ele e seu grupo de colegas faziam, entres eles e outros.
A linguagem ganhou notoriedade e maior importância quando passou a ser usada na rede pública da época, assim ajudando na construção da Internet que conhecemos e usamos diariamente hoje.
Como já vimos, o HTML é a liguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.
Ok, já conhecemos um pouco da história dela e para que serve, vamos agora ver alguns exemplos de como funciona?
O HTML é uma linguagem baseada em marcação, isto é, para tudo que quisermos colocar em um documento HTML, antes precisaremos "marcar" o elemento para mostrar quais elemento a página exibe e como deve exibir. Por exemplo, um título que deve ficar um pouco maior que o restante do texto, aquele titulo da manchete ou artigo, marcamos com uma tag H1, exemplo:
<h1>Nosso incrível título aqui</h1>
Perceba que nosso título está entre duas marcações específicas, tais marcações são chamadas de TAG, elas sempre devem ser abertas, antes da informação, e fechadas logo após. No nosso exemplo abrimos com <h1> e fechamos com </h1>.
Tudo certo até agora? Então vamos continuar.
Como já é de se imaginar, no HTML também, nem tudo é igual a tudo, este modelo de tag que vimos agora, é o tipo de tag com filhos, é o mais comum, porém não o único. Neste tipo de tag/elemento sempre vai ser do modelo <tag>...filhos</tag>, com o tipo de tag Self-Closing, isto é, tags de auto fechamento, a estrutura fica um pouquinho diferente, exemplo:
<img />
Ok até agora? Certo. Veremos então a estrutura básica de um documento.
Todo documento HTML tem uma estrutura parecida, não há segredos. Vejamos abaixo:
- Na primeira linha temos o elemento DOCTYPE, que apesar de não ser uma tag, é importante, porém opcional a partir da versão 5 do HTML,. Este elemento informa aos navegadores com qual versão do HTML estamos trabalhando, e como ele deve se comporta com nosso documento. Apesar de não mais obrigatório, a ausência dele pode fazer com que alguns navegadores não se comporte adequadamente e de maneira precisa.
- Na linha 3 temos de fato o início do nosso documento com a abertura da tag
html, ao lado do nome da tag temos o atributolangque não vamos falar agora sobre, por enquanto só precisamos saber que este atributo diz ao navegador, leitores de tela e afins, que estamos trabalhando em certo idioma, neste exemplo, Português Brasil. - Logo após a tag
htmltemos a taghead, nela indicaremos todas as informações sobre nosso site que o navegador precisa pra poder continuar, tais como: o título do documento, isto é, o nome que que o navegador deve mostrar no topo da guia, ou quando salvarmos nos favoritos; e também a tabela de caracteres que o browser deve usar para renderizar os textos. Também não se preocupe com isso agora. - A tag
titleé uma das mais importantes não só para ter uma "boa aparência", mas também para SEO — falaremos sobre, no futuro —. É, aqui onde realmente definimos o nome da nossa página. É usada em sistemas de buscas para mostrar seu site bonitinho com o nome da página bem arrumadinho nas buscas. - Agora, logo após o fechamento da tag
head, abrimos a tagbody, e é nela que colocaremos todo nosso código HTML do restante da página.
Opa, parece que este post ficou bem extenso. Que tal continuarmos no próximo e já montarmos nossa primeira página? Ook.