HTML

A linguagem HTML, acrônimo para Hypertext Marcation Language (Linguagem de Marcação para hipertexto) é, como o nome diz, uma linguagem de marcação. Em um texto, adicionam-se marcas, as chamadas tags HTML.

Um hipertexto é um texto que pode conter, além de imagens, hipermídias, como áudio e vídeo.

Breve Histórico

A linguagem HTML foi criada pelo físico inglês Tim Berners-Lee no início dos anos 1990 como parte do seu trabalho no laboratório CERN.

Principais Versões

Desde sua criação, HTML foi atualizada diversas vezes:

  • Versão HTML 1.0, em 1991. Inspirada na linguagem SGML, Tim especificou a primeira versão de HTML. A linguagem ainda era um produto interno usado pelo CERN.
  • Versão HTML 2.0, em 1995. Primeira especificação de âmbito internacional da linguagem, patrocinada pelo IETF.
  • Versão HTML 3.2, em 1997. Primeira versão desenvolvida e especificada pelo W3C. A W3C é uma organização criada pelo Tim Berners-Lee para promover o desenvolvimento e padronização de tecnologias relacionadas ao compartilhamento de informações via internet.
  • Versão HTML 4.0, em 1997-1998. Melhorias e padronizações definidas pelo W3C.
  • Versão HTML 4.01, em 1999-2000. Primeira versão padronizada pela ISO
  • Versão HTML 5.0, em 2015. Depois de muitos anos com a versão 4.01, a W3C lança a recomendação popularmente conhecida como HTML5. Observação: a proposta inicial da versão HTML5 foi lançada em 2008.
  • Versão HTML 5.1, em 2016. Recomendação W3C.
  • Versão HTML 5.2, em 2017. Recomendação W3C.

Para mais detalhes sobre as características de cada versão, acesse https://en.wikipedia.org/wiki/HTML.

Marcações (tags HTML)

Um documento escrito em HTML, normalmente salvo em um arquivo com extensão .html como em index.html, consiste em um texto (informações que se deseja mostrar ao usuário/leitor) sobre o qual adicionam-se marcações, as chamadas tags HTML.

Considere, como exemplo, que o arquivo index.html contém o seguinte texto:

Cidade: Florianópolis

A cidade de Florianópolis é a capital de Santa Catarina. 
Atualmente possui 500 mil habitantes.

O texto é formado por três frases. A primeira indica a cidade, Florianópolis, e as outras duas dão detalhes da cidade.

Os navegadores (browsers), como o Chrome e o Firefox, são programas de computador capazes de exibir o conteúdo de um arquivo.

Se o conteúdo de um arquivo for um texto como no exemplo então os navegadores exibirão o texto com a seguinte aparência:

Cidade: Florianópolis A cidade de Florianópolis é a capital de Santa Catarina. Atualmente possui 500 mil habitantes.


Adicionando tags HTML ao texto é possível exibir as mesmas informações em um formato que facilite a leitura, destacando as informações mais importantes.

Por exemplo, podemos adicionar as tags (marcações) <h3>, <p> e <b> no texto:

<h3>Cidade: Florianópolis</h3>

<p>A cidade de <b>Florianópolis</b> é a capital de <b>Santa Catarina</b>. 

Atualmente possui <b>500 mil</b> habitantes.</p>


Agora os navegadores exibirão o texto com a seguinte aparência:

Cidade: Florianópolis

A cidade de Florianópolis é a capital de Santa Catarina. Atualmente possui 500 mil habitantes.


A tag <h3> faz com que a frase assuma o papel de cabeçalho no texto por aumentar a fonte e escrever o texto em negrito.

A tag <p> faz com que as duas frases formem um único parágrafo.

A tag <b> faz com que as palavras sejam escritas em negrito, destacando a informação na frase.

Além destas três tags, HTML possui dezenas de outras tags.

Atributos das Marcações

Cada marcação pode conter atributos que possibilitam adicionar informações necessárias ou úteis.

A tag <img>, por exemplo, permite que uma imagem seja inserida no texto. Mas qual imagem? Tipicamente ela está armazenada em um arquivo (formato .jpg, .png, etc). Assim, ao usar a tag <img> é preciso informar, por meio do atributo src o nome do arquivo. Por exemplo, <img src="paisagem.png">.

Página HTML

Uma página HTML nada mais é do que um texto no qual são inseridas marcações. O texto pode estar estruturado de qualquer forma. Há, no entanto, uma estrutura recomendada pois nem todas as marcações podem ser colocadas em qualquer parte do texto.

Estrutura de Uma Página HTML

Uma página HTML5 possui a seguinte estrutura básica:

<!doctype html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

A página é estruturada em duas partes: um cabeçalho (delimitada pela tag <head>) e um corpo (delimitada pela tag <body>). A parte visível para o usuário é o texto que estiver dentro do corpo da página.

Dica: Dispositivos Móveis

Se a aplicação para web que se pretende desenvolver for executada em dispositivos móveis (celular ou tablet) então recomenda-se que as páginas HTML tenham a seguinte estrutura mínima:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Título da janela/aba</title>
  </head>
  <body>
  </body>
</html>

Comentários:

  1. A primeira tag <meta> indica o sistema de codificação dos caracteres presentes na página. Isso garante, por exemplo, que palavras acentuadas (til, crase, acento agudo, etc) sejam exibidas corretamente. A tag é útil mesmo em aplicações para voltadas para dispositivos com tela grande (computadores desktop e notebooks).
  2. A segunda tag <meta> faz com que o conteúdo dentro da tag body seja exibido de forma legível em dispositivos com tela pequena.
  3. A tag <title>, embora não seja essencial, dará o nome para a janela ou aba. Lembre-se que o usuário típico trabalha com várias janelas/abas abertas ao mesmo tempo.

Aplicações para Web e Páginas HTML

Uma aplicação para web é, antes de tudo, um programa de computador. Tipicamente, este programa, quando executado, interage com o usuário mostrando ou solicitando informações. A aparência da aplicação, ou seja, a interface com o usuário é materializada na forma de páginas HTML.

Páginas Estáticas

Páginas estáticas são páginas HTML cujo conteúdo é sempre o mesmo e normalmente estão armazenadas em arquivos com extensão .html. Em outras palavras, o conteúdo é defindo durante o desenvolvimento da aplicação.

Páginas Dinâmicas

Páginas dinâmicas são páginas HTML cujo conteúdo é definido durante a execução da aplicação e é resultado da execução de algum algoritmo. Com isso, o conteúdo pode variar a cada execução do algoritmo.

Resumo

Neste capítulo vimos que:

  • a linguagem HTML é usada para definir textos que são exibidos pelos navegadores (browsers) aos usuários de uma aplicação para web.

  • as marcações (tags) definem tanto elementos semânticos (indicam, por exemplo, que uma palavra ou frase representa uma seção/subseção do texto ou tem um significado mais importante) quanto elementos estéticos (aparência) do texto.

    O grande "defeito" de HTML é exatamente que os elementos semânticos e estéticos são fundidos: ao usar uma marcação em um texto os navegadores, automaticamente, mudam a aparência do texto.

    Na era pré-computador também funcionava assim: textos eram datilografados em máquinas de escrever e o conteúdo e a aparência do texto eram impressos na folha ao mesmo tempo. A única forma de alterar a aparência (estilo tipográfico, tamanho e cor da fonte) era datilografando toda a folha outra vez.

    Com os computadores surgiram os processadores de texto, como o Word e o Libre Office. Agora conteúdo e aparência podem ser definidos separadamente: a cada texto associa-se uma folha de estilos que define a aparência do texto. Alterando-se as definições na folha de estilo altera-se automaticamente a aparência do texto.

    No contexto de aplicações para web, esta possibilidade de separar conteúdo da aparência foi a motivação para a criação da linguagem CSS.

Leitura Obrigatória
Tutorial HTML5
Leitura Sugerida
MarkSheet - ler a parte sobre HTML

results matching ""

    No results matching ""