infoNauta

Linguagem de Marcação de Hipertexto - HTML

Publicado em: 30/10/2015
Atualizado em em: 21/09/2017

Por: Sergio Mari Jr.

Comentários: 0

HTML é a abreviação de HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. Tecnicamente não é uma linguagem de programação, mas sim uma linguagem de marcação, utilizada para informar ao browser o papel semântico de cada bloco de informação encontrado no conteúdo.

O surgimento desta linguagem e dos softwares chamados Browsers ou Navegadores deu início à chamada World Wide Web, ou simplesmente Web, que é um dos serviços que funcionam dentro da internet, que já existia desde a década de 1960.

É importante que façamos bem claramente a distinção entre Internet (que é a rede mundial de computadores) e a Web (que é um dos serviços a que temos acesso por meio da internet).

A Web é um serviço de disponibilização de informações na forma de páginas interligadas, que acessamos por meio de um programa navegador.

HISTÓRICO DE VERSÕES DO HTML

O HTML foi criado por Tim Berners-Lee entre 1989 e 1990 e sua primeira especificação se tornou pública em 1991.

Atualmente ele se encontra em sua oitava versão pública, conhecida como HTML 5.

A evolução do HTML é coordenada por um consórcio internacional de empresas de tecnologia chamado de W3C (World Wide Web Consortium). Suas equipes trabalham para aprimorar constantemente as linguagens utilizadas para a construção de páginas e sistemas para a web.

Até 1999 a evolução do HTML seguiu uma mesma linha, saindo da sua versão inicial, até chegar à versão 4.01.

Depois disso o W3C optou por lançar uma outra especificação de linguagem que buscava conferir ao HTML a mesma sintaxe de uma outra linguagem, o XML. Essa nova linguagem passou a se chamar xHTML e teve até o momento duas versões:

Mais recentemente foi retomado o desenvolvimento da especificação inicial e foi lançada a quinta versão do HTML.

Atualmente é possível trabalhar com o HTML 4.01, com o xHTML 1.1 e com o HTML 5, porém, devido a seus enormes avanços, o HTML 5 tem se tornado a principal linguagem utilizada pelos desenvolvedores.

SINTAXE BÁSICA

Essencialmente o HTML funciona por meio da adição de “etiquetas” (tags) de marcação ao longo do conteúdo de uma página.

Início da etiqueta (sem a barra):

<tag>

Fim da etiqueta (com a barra):

</tag>

Essas etiquetas são utilizadas para demarcar títulos, parágrafos, listas ordenadas, listas não ordenadas, tabelas, formulários... Também são usadas para informar ênfases em uma determinada palavra, como por exemplo, em negrito ou itálico. O HTML é utilizado também para a criação de hiperlinks entre uma página e outra.

Exemplo de demarcação de parágrafo:

<p>Bem vindo.</p>

Além disso, as tags podem conter atributos, que acrescentam informação e complementam a marcação que se pretende fazer. Os atributos são declarados na abertura da tag, da seguinte maneira:

<tag atributo1=”valor” atributo2=”valor”> ...
</tag>

Atente para essa sintaxe básica para a inclusão de atributos. Ele sempre é seguido do sinal de igual (=) e o seu valor vem entre aspas.

ESTRUTURA BÁSICA DO DOCUMENTO

Um documento HTML 5 é composto de uma estrutura básica formada por três elementos: doctype, head e body.

A) Doctype

O DOCTYPE, ou tipo de documento, deve aparecer na primeira linha do código. Ele determina a versão do HTML que está sendo utilizada. Esta informação é fundamental para que os navegadores interpretem o documento de maneira correta.

Para cada versão do HTML há um padrão para declaração do Doctype, sendo que os mais comuns são:

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">

xHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">

HTML 5:

<!DOCTYPE html>

Perceba que o Doctype do HTML 5 é bem mais simples que os anteriores.

B) Tag HTML

Após o Doctype, um documento HTML indica onde a marcação inicia e onde ela termina.

Sendo assim, na primeira linha após o Doctype, ele deve iniciar a tag HTML. Essa tag deve ainda conter um atributo que determina qual o idioma principal utilizado no documento:

<html lang="pt-br"quot;>

E, na última linha do documento, encerrar a tag HTML:

</html>

C) Head

Entre as tags <html> e </html> o documento é dividido em duas seções – HEAD e BODY, que correspondem ao cabeçalho e ao corpo do arquivo.

A seção Head contém informações que são importantes para a composição documento mas que não são exibidas para o usuário na tela do navegador. Fazem parte da seção Head:

Meta-informação são dispositivos que ajudam a compreender o que será encontrado no documento. Servem principalmente para a catalogação e indexação das páginas e por isso são muito utilizadas pelos sites de busca.

A primeira meta-informação que deve aparecer na seção Head é a definição do charset, ou seja, do conjunto de caracteres utilizados para compor o documento. Essa declaração é obrigatória e é fundamental para que o documento seja exibido sem problemas de acentuação, por exemplo.

As duas opções mais comuns para codificação de caracteres de documentos em português, que são o “iso-8859-1” e o “utf-8”.

Exemplo:

<head> <meta charset="UTF-8">
</head>

Logo abaixo da declaração charset deve aparecer o título do documento. Para isso existe uma tag específica chamada TITLE, que deve ser utilizada da seguinte maneira:

<title>Título do documento</title>

C) Body

A seção Body corresponde ao corpo do documento. É nessa área do código que deve aparecer todo o conteúdo da página que ficará visível para o visitante na tela do navegador.

Imagine que você queria criar uma página HTML com seu nome e um breve currículo seu. Utilizando-se todos os elementos vistos até aqui ela ficaria assim:

<!DOCTYPE html>
<html lang="pt-br">
<head> <meta charset="UTF-8"> <title>Título do documento</title>
</head>
<body> <p>Seu nome</p> <p>Seu currículo</p>
</body>
</html>

Comentários

Seja o primeiro a comentar!

Faça seu comentário

Repita os caracteres no campo abaixo:



adobe artigo científico banco central bitmap cabernet sauvignon cedilha comunicação digital comportamento do consumidor concorrência cultura da internet custo demanda desejo diferenciação email marketing endomarketing estratégia facebook forças competitivas gestão estratégica google html illustrator imagens digitais indesign inovação instagram inteligência coletiva internet jornalismo linkedin livrista lucro macroambiente marca mark-up marketing marketing de conteúdo marketing digital merlot michael porter microambiente moeda comemorativa motivação mídia mídia digital mídias sociais necessidade numismática olimpiadas 2016 orkut photoshop php planejamento planejamento estratégico preço produto programação promoção propaganda propagação viral publicidade real redes sociais relações públicas relevância reputação rio 2016 seo twitter valor vinho walter longo youtube