O que é HTML?

Neste artigo, veremos um pouco da história do HTML e qual sua função no mundo da programação.

Certamente vocês já ouviram falar nesta ferramenta, mas, ficaram se perguntando o que é HTML, para que é utilizado, como criar seu primeiro exemplo e outros detalhes. Bom, neste artigo, iremos conhecer um pouco sobre cada um desses tópicos.

O que é?

O HTML (HyperText Markup Language), em português, Linguagem de Marcação de Hipertexto, nada mais é do que um componente básico e principal para o desenvolvimento de uma página.

Em outras palavras, uma linguagem de marcação é um conjunto de códigos que nós aplicamos em um documento, para que no mesmo seja possível definir o formato, maneiras de exibições e alguns padrões. Essas marcações, são conhecidas também como tags. Para ficar mais compreensível, irei mostrar um breve exemplo de uma marcação muito utilizada em um documento HTML.

<h1>
	Aprendendo HTML na TreinaWeb
</h1>

Para que a gente consiga adicionar um título em um documento, e esse mesmo título seja reconhecido como tal para os navegadores, basta utilizarmos a tag h1. Sendo assim, iremos obter o nosso h1, o título principal do texto ou documento.

Uma de suas características mais importantes, é permitir criar links, denominados como HyperLink, onde podemos ter acesso ao clicar. Mas como nós fazemos para realizar esse código? Bom, é bem simples, basta utilizarmos a tag de âncora, como é chamada, sendo ela, a tag a seguida de um “href”, que seria a referência/link do site que queremos adicionar. Observe o exemplo a seguir:

<a href="https://www.treinaweb.com.br/">Clique aqui para acessar o site da TreinaWeb</a>

Quando clicarmos na frase “Clique aqui para acessar o site da TreinaWeb”, seremos direcionados automaticamente para o site da TreinaWeb.

Contudo, podemos dizer que, é através do HTML onde iremos criar o “esqueleto” da nossa página, por ele nos permitir adicionar links, imagens, textos, vídeos, entre outros elementos onde os mesmos estarão trabalhando em conjunto, e futuramente, estilizá-los utilizando outras ferramentas que trabalham em conjunto com o HTML.

Como surgiu?

O HTML foi criado na década de 90 por Timothy John Berners-Lee, um britânico com formação em física e ciência da computação. Inicialmente, sua principal ideia era facilitar o compartilhamento de documentos e pesquisas para instituições próximas.

Mas, com o decorrer dos anos, e o avanço da tecnologia, os desenvolvedores passaram a observar uma necessidade de criar atualizações para o mesmo, a fim de melhorar a sua função, chegando no que possuímos hoje, HTML5, sendo “5” a sua atual versão.

Visual Studio Code

Antes de irmos para a próxima etapa, que é entender e, desenvolver a estrutura do HTML, temos que saber que, para isso, utilizamos o Visual Studio Code. Para entender mais sobre essa ferramente, acesse o artigo Visual Studio Code, o que é e por que devo usar?.

Estrutura do HTML

Assim como as linguagens de programação, o HTML também possui uma estrutura que deve ser seguida para podermos desenvolver o nosso site. Essa estrutura é composta por tags, e cada uma delas contém o seu sentido e são indispensáveis.

Agora vamos entender o passo a passo de como deve ser montada essa estrutura.

Primeiramente, vamos abrir nosso Visual Studio Code e na aba “File”, iremos clicar em “Open Folder…”:

Ao clicarmos em Open Folder, irá abrir o Explorador de Arquivos, lá nós iremos criar uma pasta e definir um nome para ela:

Agora que já conseguimos definir o nome da nossa pasta como “Estrutura HTML”, vamos clicar em “Selecionar Pasta”. Após isso, nosso Visual Studio Code irá abrir com a pasta selecionada:

Por fim, vamos criar nosso arquivo html:

Quando clicamos nessa “folha” com um sinal de +, abrimos um espaço para definir o tipo de arquivo que queremos:

Nesse espaço podemos colocar o nome que acharmos melhor, mas, por padrão, definimos como index. Observe que após a gente digitar index, devemos colocar .html, dessa forma o Visual Studio Code irá entender que o nosso arquivo é HTML.

Bom, agora que já entendemos e definimos nosso arquivo html, de fato, vamos partir para o desenvolvimento da estrutura.

Desenvolvendo a estrutura HTML

Inicialmente, devemos dizer qual tipo de documento queremos utilizar, nesse caso, HTML, para isso, basta digitarmos:

<!DOCTYPE html>

Em seguida, definimos em qual idioma o navegador irá ler nossa página:

<!DOCTYPE html>
<html lang="pt-BR">

Observe que a tag html foi aberta e não foi fechada, pois só faremos isso no final do nosso documento.

Logo após definir o idioma, adicionamos a tag head, que nada mais é do que a cabeça do documento. Ela é composta por uma tag meta e um title. Veja a seguir:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">

A função da meta charset="UTF-8", falando de uma maneira bem sucinta, é fazer com que os navegadores saibam como renderizar e apresentar os textos com caracteres especiais incluídos no nosso documento.

Em seguida, adicionamos o elemento title e fechamos a tag head.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura HTML</title>
</head>

title nada mais é do que o título que a nossa página terá.

Após fechar a tag head, chegamos na última tag do HTML, sendo ela, o body:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura HTML</title>
</head>
<body>
   
</body>

A tag body é o corpo do HTML, nele nós colocamos todo o conteúdo desejado. Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura HTML</title>
</head>
<body>
    <p>
		Podemos adicionar um parágrafo através da tag p, o mesmo
		será apresentado no navegador.
	</p>
</body>

Por fim, basta fecharmos a tag html.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura HTML</title>
</head>
<body>
    <h1>Olá Mundo!</h1>
	<p>Esse é o meu primeiro documento HTML que desenvolvi através da Escola online
	   para desenvolvedores, <a href="https://www.treinaweb.com.br/">TreinaWeb!</a>
	</p>.
</body>
</html>

Visualizando o arquivo no navegador

Para que a gente consiga visualizar o documento no navegador, devemos seguir os seguintes passos.

Primeiro, iremos abrir nosso Explorador de Arquivos, para isso, vamos clicar no nosso Iniciar do Windows, que fica localizado no canto inferior esquerdo da nossa tela:

Em seguida, digitamos Explorador de Arquivos:

Ao abrir, vamos pesquisar o nome da nossa pasta que definimos anteriormente:

Quando clicamos, seremos direcionados para dentro da nossa pasta:

O meu navegador é o Opera, mas isso não faz diferença nenhuma, basta a gente clicar nesse arquivo, que irá abrir o nosso navegador com o nosso documento, dessa forma:

É muito importante observar que só irá mostrar o que eu escrevi dentro da tag a, no caso, TreinaWeb, o link que irá direcionar o usuário não aparece.

Como os navegadores leem o HTML?

Para conseguirmos entender essa questão de uma maneira mais breve e objetiva, basta sabermos que cada navegador possui um motor de análise e renderização de HTML. Sua função é analisar todo o documento, tag por tag, imagem por imagem, entre outros elementos contidos em nosso documento e, renderizar, ou seja, exibir os conteúdos solicitados na tela do navegador.

Mas, não podemos inserir os códigos, textos, e tudo que for necessário em nosso documento, e disponibilizar para os usuários acessarem. Existe algo chamado Acessibilidade no HTML.

Curso HTML5 + CSS3 - Formulários

Conhecer o curso

Quando chegou a versão atual do HTML?

O HTML vem evoluindo desde seu lançamento, a versão 5 chegou em 2015, tendo suas variantes, HTML 5.1 e, atualmente, HTML 5.2, lançado em 2017.

Sua principal vantagem é permitir que os desenvolvedores tenham maior flexibilidade na hora de projetar sites.

Conclusão

Portanto, para podermos desenvolver um site com mais autoridade, é de suma importância entender o HTML.

Além disso, sem o mesmo, não seria possível obter sites onde os navegadores consigam ler, interpretar e renderizar todos os códigos para que assim, possamos visualizar o que foi feito, de fato.