APRENDENDO HTML, a linguagem da WEB.

No post anterior apresentei a vocês o funcionamento de uma página web e os

conceitos por trás de seu funcionamento. Comecei explicando o que é Internet
e World Wide Web. Expliquei o funcionamento básico de redes de
computadores e falei também o que é um servidor DNS. Expliquei também
como se dá o processo da obtenção da página web desde o estabelecimento da
conexão entre o cliente e servidor, as requisições e respostas HTTP e o
processo de exibição de uma página web.

Pode ter parecido um pouco extenso introduzir estes conceitos, mas acredito

que eles serão bastante importantes a medida que avançamos.

Introdução

Antes de começar a introduzir algumas definições e conceitos, gostaria que

olhassem e analisassem, por alguns segundos, a imagem abaixo de uma

página web e tentassem identificar quais elementos vêem.

Pois bem, você deve ter identificado facilmente vários elementos de texto.

Você conseguiu identificar o título, o texto do artigo, os destaques no texto,

imagens entre outros elementos.

Tudo o que você identificou visualmente e de maneira corriqueira, as

máquinas possuem uma certa dificuldade para identificar.

Marcação e Semântica
O HTML ou HyperText Markup Language é uma linguagem de

marcação utilizada para construir páginas web. Ela foi criada por Tim

Berners-Lee (o também criador da World Wide Web) e é responsável

pela estrutura e semântica de uma página web.

Quando me refiro a estrutura, estou querendo dizer como é a disposição e

a organização dos elementos na página web (pense na estrutura de uma casa,

como estão dispostos os cômodos, onde são as colunas, paredes e lajes, por

exemplo). E, quando me refiro a semântica, estou querendo dizer qual é

o significado de cada elemento na página web (se é um título, um parágrafo,

uma seção de navegação, uma imagem ou um formulário, por exemplo).

Note que em algum momento falei sobre fonte, cor, borda ou alinhamento dos

elementos na página web. Isto porque a responsabilidade de apresentação ou

de como a página irá se parecer é do CSS (linguagem para definição de

estilos) e não do HTML. Falaremos do CSS mais tarde!

Definir a estrutura e a semântica adequada é muito importante para

a acessibilidade de uma página web. As informações existentes nas páginas

web são consumidas por pessoas (como você), por robôs (como os

mecanismos de busca do Google ou do Bing) e por outros dispositivos (como

leitores de telas para pessoas com deficiência visual). A acessibilidade é

importante pois ela permite ampliar o alcance da sua informação e, por este

motivo, você desenvolvedor web deve se preocupar com isso!

 Sintaxe do HTML

O HTML é formado por tags (rótulos ou etiquetas, em português) que são

responsáveis por marcar o conteúdo existente na página definindo

sua estrutura e/ou semântica.

As tags são definidas dentro de colchetes angulares (ou sinais de menor e

maior, como preferir) como em <nomedatag>. Existem tags de abertura e tags

de fechamento que delimitam o conteúdo a ser marcado sendo que as tags de

fechamento iniciam com uma barra como

em <nomedatag>conteúdo</nomedatag>. O conjunto das tags de abertura e

fechamento e o seu conteúdo é geralmente chamado de elemento HTML.

Veja alguns exemplos abaixo:

<titulo>Viajando pela Europa</titulo>

<paragrafo>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

sed fringilla dolor. Integer tempor odio vitae massa malesuada porttitor. Sed

vitae lorem sed odio tempus consequat ac eu mi.</paragrafo>

Note que no exemplo anterior as tags foram utilizadas para indicar que o texto

"Viajando pela Europa" trata-se de um título e que o texto "Lorem ipsum..."

trata-se de um parágrafo. Estes textos poderiam muito bem estar sem as tags,

mas daí seria difícil identificar o significado de cada um deles (principalmente

se não for um ser humano).

 As tags também possuem atributos que definem as características do

elemento. Os atributos são definidos sempre nas tags de abertura no

formato atributo="valor" separados por espaço e com o valor entre aspas

duplas como em <nomedatag atributo1="valor1"

atributo2="valor2">conteúdo</nomedatag>.

Veja alguns exemplos abaixo:

<link url="http://www.wikipedia.org">Visitar a Wikipedia</link>

<imagem caminho="imagens/madri.png" texto-descritivo="Região central da

cidade de Madri na Espanha">

Note que no exemplo anterior a tag link foi utilizada para indicar que o texto

"Visitar a Wikipedia" trata-se de um link e que, quando clicado, você é

levado(a) até a página principal da Wikipedia. Neste caso, o atributo url desta

tag contem o endereço da Wikipedia como valor.

Ainda no exemplo anterior, a tag imagem possui o atributo caminho que indica

onde encontra-se a imagem e o atributo texto-descritivo que refere-se a um

texto explicativo da imagem.

Você pode ter notado que a tag imagem não possui uma tag de fechamento.

Isso acontece pois nem todas as tags precisam delimitar um conteúdo. Este é o

caso da tag imagem e de muitas outras que veremos mais para frente.

Veja este outro exemplo:

<artigo>
 <titulo>O que levar para uma viagem?</titulo>

<paragrafo>

Os itens indispensáveis para levar em uma viagem são:

<lista>

<item>Escova de dentes</item>

<item>Máquina fotográfica</item>

<item>Livro</item>

...

</lista>

</paragrafo>

...

</artigo>

Observando o exemplo, notamos que as tags titulo e paragrafo estão dentro

da tag artigo e que são filhas diretas dela. Ambas as tags podem ser

consideradas tags irmãs. Note ainda que dentro da tag paragrafo temos um

fragmento de texto e outra tag lista que contém outras tags item.

Esta relação entre as tags de conter ou estar contida em é chamada

de aninhamento. Este conceito é importante pois as tags mais internas são as

que devem ser fechadas primeiro e assim por diante. Perceba que o exemplo

anterior foi apresentado com recuos que, além de facilitar a leitura nos ajuda

a identificar onde cada tag aberta deve ser fechada. Esses recuos são

chamados de indentação.

Código Interativo

Clique em 'Reproduzir' para assistir o exemplo.

Veja abaixo outro exemplo com uma representação visual do aninhamento de

tags HTML para ilustrar o conceito:

A estrutura de um documento HTML

Antes de me aprofundar e explorar as tags existentes no HTML, explicarei a

estrutura básica de um documento HTML.

Um documento HTML trata-se de um arquivo de texto puro salvo com a

extensão .html, como em pagina-inicial.html. Ele pode ser criado através de

um editor de texto simples (como o Bloco de Notas no Windows, o Text Edit

 no Mac ou o Gedit no Linux, por exemplo) e é exibido por um navegador

web.

A estrutura básica de um documento HTML se parece com o seguinte:

<!doctype html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<title>Pensando na Web</title>

</head>

<body>

...

</body>

</html>

O elemento html representa a raiz de um documento HTML e deve ser o

primeiro elemento deste documento. É recomendável que o

elemento html defina um atributo lang informando seu idioma (por

exemplo, pt-br para documentos que tenham como idioma o português

brasileiro).

O elemento html deve conter os elementos head e body. O

elemento head contém os metadados do documento HTML. Esses metadados

são informações sobre o próprio documento HTML como o título, o autor e a

codificação de caracteres. As referências para scripts e estilos também devem

estar no head. Já o elemento body contém o conteúdo principal do documento,

ou seja, o corpo da página web que é visualizado no navegador.

O elemento head deve conter o elemento meta com o atributo charset que

define qual codificação de caracteres será utilizada na página. A codificação

mais utilizada é a utf-8. Note que o elemento meta não possui tag de

fechamento.

O elemento head deve conter também o elemento title que representa o título

ou o nome do documento. Ele normalmente é exibido na barra de título do

navegador e é o elemento destacado nos resultados de mecanismos de busca.

A instrução <!doctype html> diz como o navegador deve se comportar ao

renderizar a página web. Neste caso, ele indica que deve ser utilizada a versão

mais recente do HTML, o HTML5.

Conhecendo as tags do HTML

Os exemplos de tags apresentados anteriormente são nomes fictícios de tags

que utilizei para facilitar o aprendizado. Não se preocupe, pois os nomes das

tags oficiais do HTML também são fáceis de se lembrar.

Assim como boa parte das linguagens de programação, o HTML foi

construído em cima do idioma inglês e as tags e seus atributos possuem

palavras neste idioma ou que são derivadas dele. E, com um pouquinho de

conhecimento em inglês, será mais fácil lembrar os nomes das tags.

Tags elementares
 Falei sobre algumas tags quando apresentei a estrutura básica de um

documento HTML. Agora, vou dar algumas dicas que vão te ajudar a lembrar

o nome e a utilização destas e de outras tags.

Lembre-se que html é o elemento raiz e que deve conter os

elementos head (ou header, que em português significa cabeçalho) e body (que

em português significa corpo) que definem o "cabeçalho" e o corpo do

documento HTML.

Dentro do elemento head deve conter os elementos meta (ou metadata, que em

português significa metadados) e title (que em português significa título) que

definem os metadados e o título do documento HTML.

Quando associamos as tags ao significado de seus nomes fica mais fácil de

lembrar tanto o nome quanto a utilização das tags.

Tags de texto

As tags mais simples e talvez as mais utilizadas são as tags de texto. Através

delas definimos títulos, parágrafos, ênfases no texto, citações entre outros.

Utilizamos as tags h1, h2, h3, h4, h5 e h6 (ou heading, que em português

significa título) para adicionar títulos ao conteúdo da página. O

elemento h1 representa o título principal ou de maior importância e o h6 o

de menor importância.
<h1>Título</h1>
<h2>Subtítulo</h2>

...

<h6>Título com menor importância</h6>

Utilizamos a tag p (ou paragraph, que em português significa parágrafo) para

adicionar parágrafos.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed

fringilla dolor. Integer tempor odio vitae massa malesuada porttitor. Sed

vitae lorem sed odio tempus consequat ac eu mi.</p>

Utilizamos as tags strong e em (ou emphasis, que em português significa

ênfase) para adicionar ênfase em determinadas palavras no texto.

<p>Lorem ipsum <em>dolor</em> sit amet, consectetur <strong>adipiscing

elit</strong>. Vivamus sed fringilla dolor. Integer tempor odio vitae massa

malesuada porttitor. Sed vitae lorem sed odio tempus consequat ac eu mi.</p>

Utilizamos a tag blockquote (ou quote, que em português significa citação)

para adicionar o conteúdo de outra fonte como uma citação.

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus

sed fringilla dolor. Integer tempor odio vitae massa malesuada porttitor. Sed

vitae lorem sed odio tempus consequat ac eu mi.</blockquote>

E utilizamos a tag br (ou break row, que em português significa quebra de

linha) para adicionar quebras de linha ao texto. Note que a tag br não possui

a tag de fechamento pois ela apenas indica onde será a quebra de linha não

necessitando delimitar um conteúdo qualquer.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vivamus sed

fringilla dolor. Integer tempor odio vitae massa malesuada porttitor. Sed

vitae lorem sed odio tempus consequat ac eu mi.</p>

 Veja o exemplo abaixo que demonstra a utilização das tags de texto numa

situação real:

Observando o exemplo, notamos que cada elemento possui

uma característica visual diferente. Isso acontece porque os navegadores

possuem uma forma de renderização padrão para cada elemento HTML. Na

verdade, não precisamos nos preocupar com a renderização padrão dos

navegadores pois quase sempre utilizaremos folhas de estilos para

adicionarmos características visuais às nossas páginas web. O que devemos

estar sempre atentos é sobre a semântica dos elementos utilizados.

Agora veja o mesmo exemplo anterior com a utilização de folhas de estilos:

Tags de links e imagens

Os links são utilizados desde o início da web para interligar as páginas

permitindo a navegação entre elas ou entre seções de uma mesma página.

Utilizamos a tag a (ou anchor, que em português significa âncora) para

adicionar uma âncora ou link. Este elemento é utilizado sempre com o

atributo href que indica para onde o link nos levará.

<p>Para mais informações visite a <a

href="http://www.wikipedia.org">Wikipedia</a>.</p>

Utilizamos a tag img (ou image, que em português significa imagem) para

adicionar uma imagem. Este elemento é utilizado sempre com o

 atributo src (ou source, que em português significa fonte ou origem) para

indicar a localização da imagem.

<img src="../imagens/centro-madri.png" alt="Região central da cidade de

Madri">

Note que img também não possui tag de fechamento. O motivo é o mesmo das

outras tags apresentadas anteriormente. Note ainda que foi adicionado o

atributo alt (ou alternative text, que em português significa texto alternativo)

para adicionar um texto alternativo para ser usado quando a imagem não

puder ser exibida por quaisquer que sejam os motivos.

Veja o exemplo abaixo que demonstra a utilização das tags de link e imagem

numa situação real:

Introdução sobre CSS

Até agora aprendemos diversos conceitos sobre HTML. Sabemos que ela é

uma linguagem de marcação e que define semântica ao conteúdo da página

web. Vimos como é sua sintaxe, como é a estrutura básica de uma página web

e conhecemos algumas tags bastante utilizadas. Ainda que nos reste ver

diversas outras tags, fiz esta pausa para explicar sobre folha de estilos.

A linguagem CSS é responsável pela apresentação de uma página web, de

como a página irá se parecer. É através dela que definimos fontes, cores,

layouts, bordas, alinhamentos, margens, enchimentos e até animações. Num

 passado esquecido, isso era feito através do próprio HTML mas hoje esta

abordagem é considerada uma má prática e não deve ser utilizada.

Os estilos são aplicados aos elementos HTML através de regras. Uma regra é

composta pelo seletor e por um conjunto de declarações dentro de chaves e

separadas por ponto-e-vírgula. Uma declaração é formada por

uma propriedade e o seu valor associado separados por dois-pontos.

Um seletor permite identificar quais elementos que a regra será aplicada.

Veja o exemplo abaixo que demonstra a definição de estilos em CSS:

body {

font-family: Arial, Helvetica, sans-serif;

}
h1 {

color: #333;

font-size: 28px;

margin: 0;

padding: 0;

No exemplo anterior foram criadas duas regras. Na primeira, o seletor indica

que a regra será aplicada para o elemento body. Esta regra possui

uma declaração que define qual família de fontes será utilizada para este

elemento. Para isso utilizamos a propriedade font-family com

o valor Arial, Helvetica, sans-serif.

Na segunda regra, o seletor indica que a regra será aplicada para todos os

elementos h1. Esta regra possui quatro declarações que definem a cor,

o tamanho da fonte, a margem e o enchimento que serão utilizadas para

estes elementos.

Conclusão

Após esta introdução é possível compreender a importância da linguagem

HTML. Ela é responsável pela estrutura e semântica das páginas web e,

junto com as linguagens CSS e JavaScript, formam a base para a web atual.

São através delas que bilhões de páginas web são disponibilizadas no mundo

todo.
Alguns conceitos e funcionalidades ainda precisam ser apresentados para

concluirmos o entendimento sobre a linguagem HTML. O seu domínio é de

grande importância para as pessoas envolvidas com desenvolvimento web.

Bons estudos! ;)
 Compartilhe:
  Twitter

  Facebook

  E-mail

  Permalink
Permalink Copiado

 Começando na Web
Marcel dos Santos
https://twitter.com/marcelgsantos

Desenvolvedor web interessado em HTML, CSS, JavaScript, Elm, PHP, Laravel,

Symfony, FP, Linux e código aberto. Formado em SI pela EACH-USP,

organizador do FEMUG-SP e evangelista PHPSP. Curte viajar!





 Ver Comentários

Próximo Artigo
O que há de novo no PHP 7.4?

19 de Junho de 2019

Artigo Anterior
Como funciona a Internet e a World Wide Web

24 de Julho de 2014

Copyright © Pensando na Web 2021 • Todos direitos reservados.

Publicado utilizando Ghost.