Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Contagem Regressiva 2024

A ÚLTIMA OFERTA DO ANO

Desenvolvimento Front-end HTML

O que é HTML?

No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura.

há 2 anos 1 mês

Formação Base para desenvolvedor
Conheça a formação em detalhes

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…”:

Imagem explicando como abrir uma pasta no Visual Studio Code

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

Imagem explicando como criar uma nova paste dentro do Explorador de Arquivos

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:

Imagem mostrando a pasta criada aberta no Visual Studio Code

Por fim, vamos criar nosso arquivo html:

Imagem explicando como criar um arquivo html

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

Imagem definindo um nome para o arquivo html

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.

Imagem com o arquivo html aberto no Visual Studio Code

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:

Imagem mostrando onde abrir o Iniciar do Windows

Em seguida, digitamos Explorador de Arquivos:

Imagem Iniciar do Windows pesquisando Explorador de Arquivos

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

Imagem explicando como buscar a pasta do nosso arquivo html

Quando clicamos, seremos direcionados para dentro da nossa pasta:

Imagem mostrando como abrir o arquivo HTML no navegador

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:

Imagem de exemplo de código html com um título escrito Olá Mundo e um parágrafo escrito Esse é o meu primeiro documento HTML que desenvolvi através da Escola online para desenvolvedores TreinaWeb

É 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.

HTML5 + CSS3 - Formulários
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.

icone html contendo de fundo uma imagem com códigos de programação

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.

Autor(a) do artigo

Rafael Oliveira
Rafael Oliveira

Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária.

Todos os artigos

Artigos relacionados Ver todos