por: Matheus Cardoso -16/11/2021
Olá InfoLibertos e InfoLibertas! Como vocês estão?
Se você trabalha ou tem familiaridade com tecnologia e internet, provavelmente já ouviu falar sobre HTML. Mas afinal, o que é esse tal de HTML?
Neste post você verá o quão simples ele é, boa leitura!
O que é HTML?
Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText Markup Language, traduzindo ao português: Linguagem de Marcação de Hipertexto. O HTML é o componente básico da web, ele permite inserir o conteúdo e estabelecer a estrutura básica de um website. Portanto, ele serve para dar significado e organizar as informações de uma página na web. Sem isso, o navegador não saberia exibir textos como elementos ou carregar imagens e outros conteúdos.
Os hipertextos são conjuntos de elementos conectados. Esses podem ser palavras, imagens, vídeos, documento, etc. Quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.
Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento. Essa estrutura é estabelecida através do HTML. No inicio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página.
Como funciona o HTML
Através de um documento HTML, ou seja, um documento com a extensão .html ou .htm., o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox).
Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo uma para cada página do website.
O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.
O que são tags
Através de qualquer editor de texto, como o Sublime Text, o NotePad++ ou até mesmo o bloco de notas, é possível criar um documento com a extensão .html que será renderizado pelos navegadores.
Conforme explicado anteriormente, este documento consiste em uma série de tags. As tags são códigos que definem toda a estrutura da página, tais como o seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A maioria dos elementos do documento HTML são compostos por uma estrutura de abertura e uma de fachamento, como <tag> e </tag>. Há também tags de estrutura única, como a tag <br/> que realiza uma quebra de linha.
Digamos que você queria escrever um paragrafo, chamamos então a tag <p>, escrevemos o paragrafo e finalmente fechamos a tag com </p>:
<p>Meu primeiro paragrafo.</p>
Dessa forma, ao salvar o arquivo com a extensão .html e abri-lo em um navegador, você verá o parágrafo escrito na tela do navegador.
Principais tags do HTML
Atualmente existem mais de 140 tags, mas algumas delas quase não são utilizadas. Dentre as mais utilizadas temos:
<head> – local para declarar todas informações, como título e metadados da sua página;
<title> – define o título;
<body> – local para declarar todos os elementos que irão compor o corpo da página;
<h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância;
<p> – Tag para definir um parágrafo.+;
<a> – Tag de link, junto ao atributo href=”” é responsável pela principal característica da web;
<header> – define um cabeçalho;
<section> – define uma seção;
<article> – define um artigo;
<div> – define uma divisão;
<footer> – define um rodapé;
<nav> – define uma área de navegação (como menus);
<table> – define uma tabela;
<ol> – define uma lista ordenada;
<ul> – define uma lista não ordenada;
<li> – define o item de uma lista;
<form> – define um formulário;
<input> – define os campos do formulário;
<textarea> – define uma área para o usuário digitar um texto;
<button> – define um botão;
<img> – permite inserir uma imagem no seu documento.
A estrutura básica de um documento HTML
Agora que já sabemos como funciona e quais as suas principais tags, vamos entender como é formado a estrutura básica de um documento HTML.
O documento deve conter uma declaração informando o doctype, que no caso do HTML5, basta declarar com o elemento <!DOCTYPE html>. Após isso iniciamos nosso documento com a tag <html> que deverá ser fechada ao final do documento com </html>. Posteriormente, nosso documento deverá ter um elemento <head> que receberá todas as informações básicas da sua página, como o título, links de elementos externos, metadados, etc. Declaramos então um título para página através da tag <title>. Finalmente abrimos então a tag <body> que consiste no corpo do nosso documento, onde ficarão todos os elementos que serão renderizados na tela do navegador. Dessa forma, temos a estrutura básica do nosso documento html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Onde aprender HTML?
REFERÊNCIA BIBLIOGRÁFICA:
Hostinger.com.br. In: __________. “O que é HTML? ”: Linguagem HTML. Barueri/SP: 16 de Novembro de 2021.
Wikipedia a enciclopédia Livre. In: __________. “HTML”: Linguagens de programação. Barueri/SP: Wikipédia a enciclopédia livre. 16 de Novembro de 2021.
Comentários
Postar um comentário