Introdução ao HTML

Esta é uma pequena introdução à linguagem de marcação HTML, de uma forma explicativa, demonstrativa e clara. O objetivo não é que o leitor, ao término da leitura, seja um desenvolvedor web. Mas sim, que tenha um contato inicial que desperte o seu interesse em estudar essa tecnologia por conta própria.



O que é HTML?

HTML (abreviação de HyperText Markup Language) é uma linguagem utilizada para definir o conteúdo de uma página web. Foi desenvolvida por Tim Berners-Lee e posteriormente publicada em 1993. Em português, significa: Linguagem de Marcação de Hipertexto.

O "hipertexto" (hypertext) refere-se às ligações (links) estabelecidas entre as páginas web, que nos permitem navegar a uma página de um site, a um outro site ou ainda a uma determinada parte de uma página. A diferença entre uma página e um site, é que geralmente um site reúne um conjunto de páginas, como uma que iremos criar em HTML.

A "marcação" (markup) é utilizada para envolver elementos presentes na página, para que sejam formatados ao serem exibidos no navegador. Algumas marcações não envolvem elementos em si, mas denotam um significado. Tudo isso ficará mais claro nos tópicos a seguir.

Criando seu Primeiro Documento HTML

Primeiramente, abra um editor de texto como o bloco de notas. Dentro dele, coloque esse poema:
Lápide 1
epitáfio para o corpo

Aqui jaz um grande poeta.
Nada deixou escrito.
Este silêncio, acredito,
são suas obras completas.
- Paulo Leminski

Agora salve o documento em algum local, como sua área de trabalho, com algum nome de sua preferência. Mas não deixe no final a extensão .txt, que indica um documento de texto. Salve com a extensão .html, que indica nosso documento de hipertexto. Exemplo: Poema.html.


Parabéns! Você criou seu primeiro documento HTML. Provavelmente está se perguntando: como visualizo o documento? Se você possui um navegador como o Internet Explorer, Edge, Firefox, Chrome ou outro instalado em seu computador, basta clicar duas vezes no arquivo que o navegador abrirá e o exibirá em uma página em branco.

Se tudo deu certo, provavelmente você estará visualizando algo como isso:
Lápide 1 epitáfio para o corpo Aqui jaz um grande poeta. Nada deixou escrito. Este silêncio, acredito, são suas obras completas. - Paulo Leminski 

Isso acontece porque não fizemos a formatação do documento utilizando marcação. Aprenderemos a seguir.

Formatando o Documento

Um documento escrito em HTML possui uma estrutura que contém três partes principais:
  • html: é o elemento raiz de uma página HTML.
  • head: região que contém detalhes sobre a página, algumas formatações e informações não visíveis.
  • body: corpo do documento, onde haverá o seu conteúdo que será exibido.

Veja a representação abaixo:

<html>
<head>
informações
</head>

<body>
conteúdo
</body>
</html>

Note que a linguagem é bem simples. Iniciamos uma marcação (tag) delimitada pelos sinais de menor e maior (< >), inserimos algo dentro e depois fechamos a marcação utilizando a mesma sintaxe, mas com uma barra depois do sinal de menor; a barra indica o fechamento da marcação.

Existe uma tag importante que deve ser inserida no início de todo documento HTML, que é a <!DOCTYPE html> e esta não tem fechamento. Logo, nosso esqueleto se parecerá com isso:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Parágrafos

Nosso poema será inserido dentro do bloco body. Para inserir um parágrafo, use a tag <p>, do inglês paragraph. Ficará algo aproximadamente assim em seu Poema.html:

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <p>Lápide 1</p>
  <p>epitáfio para o corpo</p>

  <p>Aqui jaz um grande poeta.</p>
  <p>Nada deixou escrito.</p>
  <p>Este silêncio, acredito,</p>
  <p>são suas obras completas.</p>
  <p>- Paulo Leminski</p>
 </body>
</html>
O resultado deverá ser algo assim:
Lápide 1
epitáfio para o corpo
Aqui jaz um grande poeta.
Nada deixou escrito.
Este silêncio, acredito,
são suas obras completas.
- Paulo Leminski

Quebra de linha, negrito e itálico

Note que a linha vazia entre os parágrafos não foi dada como quebra de linha na visualização da página no navegador. A quebra de linha é obtida pela tag <br>, do inglês break.

Outras duas formatações importantes são o título e subtítulo. O título, nós deixaremos em negrito (bold, por isso <b>) e o subtítulo em itálico (<i>, de italic).


<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <p><b>Lápide 1</b></p>
  <p><i>epitáfio para o corpo</i></p>
  <br>
  <p>Aqui jaz um grande poeta.</p>
  <p>Nada deixou escrito.</p>
  <p>Este silêncio, acredito,</p>
  <p>são suas obras completas.</p>
  <p>- Paulo Leminski</p>
 </body>
</html>

Cabeçalho

Você deve ter notado que as letras acentuadas estão com caracteres estranhos, não é verdade? Isso acontece porque precisamos especificar uma codificação de caracteres chamada UTF-8, no cabeçalho do documento. Basta inserir a seguinte tag dentro do <head>:
<meta charset="UTF-8" />

Você ainda pode inserir outras informações dentro do cabeçalho, como o título da página:
<title>Poema de Paulo Leminski</title>

E a versão final de nossa página terá um código assim:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Poema de Paulo Leminski</title>
 </head>
 <body>
  <p><b>Lápide 1</b></p>
  <p><i>epitáfio para o corpo</i></p>
  <br>
  <p>Aqui jaz um grande poeta.</p>
  <p>Nada deixou escrito.</p>
  <p>Este silêncio, acredito,</p>
  <p>são suas obras completas.</p>
  <p>- Paulo Leminski</p>
 </body>
</html>
Por fim, o que será apresentado terá a seguinte aparência:
Lápide 1
epitáfio para o corpo

Aqui jaz um grande poeta.
Nada deixou escrito.
Este silêncio, acredito,
são suas obras completas.
- Paulo Leminski

Esse processo da transformação do código que criamos ao que é apresentado, nós chamamos de renderização. O código em HTML foi renderizado com a formatação que especificamos.

O que você aprendeu

Vimos que HTML é uma linguagem de marcação de hipertexto, utilizada para definir o conteúdo de páginas web. Aprendemos, especificamente, que:
  • Hipertexto está relacionado a navegabilidade estabelecida em uma página web através de ligações (links).
  • Marcação (markup) é a maneira que utilizamos a linguagem para especificar uma formatação no documento HTML, para apresentação no navegador.
  • Um documento HTML contém três principais partes:
    • html: é o elemento raiz de uma página HTML.
    • head: contém informações sobre a página e algumas formatações.
    • body: contém o conteúdo da página que será exibido.
  • Algumas tags (marcações) são importantes, como:
    • <!DOCTYPE html>: indica que arquivo é um documento HTML.
    • <p>: indica que o seu conteúdo é um parágrafo.
    • <br>: indica quebra de linha.
    • <b>: indica negrito.
    • <i>: indica itálico.
    • <meta charset="UTF-8" />: essa meta informação significa que o conjunto de caracteres do documento utiliza codificação UTF-8, que suporta nossos caracteres acentuados como à, ê, ü etc.
    • <title>: indica o título da página que aparecerá no navegador.

Para aprender mais

HTML é uma linguagem simples. Se souber usar as marcações de forma adequada, poderá construir bons textos como os que você faz no Word ou construir uma página web como essa da imagem abaixo.

Você pode visualizar essa página através desse link.


Observação: todo esse tutorial foi escrito em HTML. O site também, mas com uma variação chamada XHTML.


A HTML ainda é utilizada em conjunto com duas outras linguagens:
  • CSS (Cascading Style Sheets), que permite dar cor, formato e efeitos visuais na apresentação de elementos HTML e
  • JavaScript, uma linguagem de programação que permite manipular os elementos HTML e adicionar funcionalidades a eles.

Recomendamos a leitura desses materiais para se aprofundar mais:


Referências
F. BEN. Responsive Web Design with HTML5 and CSS3. 2 ed. Birmingham: Packet, 2015. 286 p.

WEB D2. A Brief History of HTML. Disponível em <https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.html>. Acesso em 12 jan. 2018.

MDN WEB DOCS. HTML | MDN. Disponível em <https://developer.mozilla.org/pt-BR/docs/Web/HTML >. Acesso em 12 jan. 2018.

W3SCHOOL. W3Schools Online Web Tutorials. Disponível em <https://www.w3schools.com/default.asp>. Acesso em 12 jan. 2018.


Para citar esse artigo:

Clederson Cruz -

Comentários

Postar um comentário