HTML – Hyper Text Markup Language

O que é X/HTML?

HTML é uma linguagem para escrever páginas web e significa Hyper Text Markup Language (Linguagem de Marcação de HiperTexto), foi desenvolvida por Tim Berners-Lee. HTML não é uma linguagem de programação, e sim uma linguagem de marcação, isto é, um conjunto de marcações (etiquetas/tags) para descrever as páginas HTML.

  • Hyper Text: Pode ser explicado como um conjunto de informações organizada em blocos de textos, imagens, sons e videos cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links;
  • Mark-up: As marcações que definem o conteúdo (blocos de textos, imagens, sons e videos) e sua disposição dentro de um documento HTML;
  • Language: Um conjunto de palavras reservadas e regras como usá-las.

Portanto, HTML é utilizado para apresentar conteúdo na Internet no formato “página Web”. O navegador Web (Browser) é capaz de interpretar/ler as tags HTML e desenhar o conteúdo. As tags informam ao browser a estrutura e o significado da página HTML, isto é, diz ao browser como apresentar o texto, qual é o título da página, qual formatação de fonte usar, cores de fundo, onde as imagens devem ser exibidas, etc.

A XHTML é um reformulação da linguagem HTML baseada na XML (Extensible Markup Language). Um documento XHTML possui alguns elementos novos, mas é praticamente igual a um documento HTML, pois ambas linguagens utilizam o mesmo o mesmo conjunto de elementos.

Cada navegador pode interpretar alguma característica do XHTML de forma diferente (o que gera grandes problemas). O W3C é a organização responsável por manter o padrão do XHTML entre os navegadores, tentando mininizar as divergências de interpretação do XHTML por cada navegador.

Normalmente uma página XHTML é hospedada em servidor e pode ser acessada por uma URL (endereço) mediante a solicitação de um navegador em um outro computador. O navegador cliente envia (através da Internet) uma solicitação de informações ao computador servidor. O servidor processa o pedido e retorna para o cliente (através da Internet) as informações de solicitação em formato XHTML, e é exibido o conteúdo. Os documentos XHTML ficam armazenados dentro de um aplicativo chamado de Servidor Web instalado num servidor.

Funcionamento do servidor Web

Funcionamento do servidor Web

Um documento XHTML nada mais é que um arquivo texto comum (ASCII). E pode ser escrito com o uso de um editor de textos comum (Edit, E , Norton Editor, Notepad, …) e tem a terminação .htm ou .html. Exemplo: http://www.meusite.com.br/listaprodutos.html.

Existem atualmente várias ferramentas/aplicativos que facilitam a produção de documentos, dentre eles podemos destacar os editores WYSIWYG (What you see is what you get): Dreamweaver, VisualStudio…

Como é uma Tag XHTML?

As tag XHTML são rótulo ou marcações que indicam ao navegador como o conteúdo deve ser apresentado. Diversas tag são disponibilizadas pela linguagem XHTML, e cada uma tem uma funcionalidade específica. As tags têm o mesmo formato: começam com um sinal de menor “<“ e acabam com um sinal de maior “>”, e normalmente vêm em pares, como <nometag> e </nometag> A primeira tag do par é de chamada tag de início, a segunda tag é a tag final. Observe que tag final existe o caractere / (barra), o que indica o fechamento da instrução.

Exemplos:

  • <b>Este texto será exibido em negrito</b>
  • <i>Este texto será exibido em itálico</i>
  • <h1>Este texto é um título</h1>

As tags podem ser aninhadas dentro de outras tags. Exemplo: <i><b>Texto</b></i>. Não é possível sair inventando suas próprias tags, pois elas devem ser compatíveis com a linguagem XHTML.

Além das tags de pares existem as tags órfãs, ou seja, não possui um par para fechá-la.

Exemplos:

  • <br />
  • <hr />

Algumas tags apresentam atributos, que são informações adicionais sobre as tags. Um exemplo é a tag para definição de hiperlinks, <a>…</a>, que possui o atributo href e tem como valor o endereço de destino, e o atributo target que mantém uma informação sobre a janela que abrirá a página referenciada no atributo href.

Exemplo: <a href=http://www.andremenegassi.wordpress.com>Clique aqui</a>

Todas tags e seus atributos devem SEMPRE  estar em caracteres minúsculo para a versão XHTML, a versão a HTML permite misturar caracteres minúsculos e maiúsculos.

Anatomia de um documento XHTML

Todo documento HTML deve possuir a seguinte anatomia:

<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
Conteúdo da página

</body>
</html>

  • <html></html>: Marca o início e o final do documento XHTML;
  • <head></head>: É o cabeçalho do documento. As informações contidas aqui não serão exibidas na página após renderizada pelo navegador. Comumente usando para definir o título do documento e informações de metadados;
  • <title></title>: Sempre deve estar aninhada dentro das tags <head></head> e define o texto que será mostrado na barra de título do navegador;
  • <body></body>: É nesta área que o conteúdo do documento é definido.

Resultado após renderização pelo navegador:

Primeiras Tags

As tags abaixo devem ser usadas dentro dos pares de tags <body></body>:

  • <h[valor]> … </h[valor]>: Para demarcar títulos e subtítulos dentro do documento,  sendo que [valor] deve ser um valor entre 1(um) e 6(seis). À medida que o valor aumenta o texto diminui;
  • <br />: O texto em um documento HTML não faz quebras de linha automáticas. Essas devem ser inseridas utilizando-se tags <br />;
  • <p> … </p>: Estes pares de tag criam parágrafos no texto do corpo do documento, gerando uma quebra de linha com espaçamento maior que a da tag <br/>;
  • <b> … </b>: Coloca em negrito o texto entre as tags;
  • <i> … </i>: Coloca em itálico o texto entre as tags;
  • <u> … </u>: Sublinha o texto entre as tags;
  • <sub> … </sub>: Texto Subscrito;
  • <sup> … </sup>: Texto Sobrescrito.
  • <pre> … </pre>: Texto pré-formatado.
  • <blockquote> … </blockquote>: Citações no texto.
  • <address> … </addres>: Inforrmações de contato.

Conjunto de caracteres (charset)

Um conjunto de caracteres nada mais é que um repertório de caracteres suportados por um documento XHTML. O conjunto de caracteres padrão de documentos XHTML é o UNICODE, isto significa que navegadores comportam-se por padrão (internamente) com uso da codificação UNICODE.

A definição do conjuto de caracteres do site é importante para que não ocorra problemas de interpretação dos caracteres pelos navegadores, principalmente relacionados a visualização do site em outro país que utiliza uma tabela de caracteres diferentes.

O conjunto de caracteres mais completo é o UTF-8 (Unicode Transformation Format). Na sessão head do documento XHTML podemos definir qual conjunto de caracteres o navegador deverá utilizar ao interpretar o documento HTML.

Exemplo:

<head>
<title>Título</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>

Veja mais detalhes sobre tabelas de conjuntos de caracteres em http://www.w3schools.com/tags/ref_charactersets.asp.

Entidades XHTML

Alguns caracteres são reservados do dicionário do XHTML. Por exemplo, você não pode usar os sinais < e > dentro do texto, pois o navegador pode se confundir com tags de marcação. Outra a situação é o uso de alguns caracteres especiais e caracteres com acentuação.

Para essa situação podemos substituir esses caracteres por entidades XHTML, que quando processadas pelo navegador represetam o caractere desejado:

Exemplo:

  • espaço: &nbsp;
  • <: &lt;
  • >: &gt;
  • ©: &copy;
  • ç: &ccedil;

Veja mais um monte de entidades em http://www.w3schools.com/tags/ref_entities.asp.

 

DOCTYPE

A declaração DOCTYPE indica qual versão do HTML ou XHTML o documento foi escrito, importante para que o navegador saiba como interpretar as tags contidas nele.  Ela deve ser a primeira instrução do documento  e não deve ser confundida com uma tag XHTML, pois a mesma é escrita com caracteres maiúsculos.

A declaração DOCTYPE deve sempre estar no formato <!DOCTYPE html [PUBLIC “fpi” “catálogo”]>, sendo fpi (Formal Public Identifiers) a versão do XHTML utilizada de acordo com o W3C, e catálogo a URL informando o endereço do local onde se encontra o arquivo de catálogo (DTD – Document Type Definition) com as regras de validação conforme a versão do informada no fpi.

Os DOCTYPES para a versão 4 do HTML e 1 do XHTML disponíveis nas recomendações do W3C são:

  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset
  • XHTML 1.1

O DOCTYPE Strict é o mais rígido e permite um código mais limpo. Não são permitidos erros de estruturas e de apresentação, o uso de CSS também é obrigatório, e não são permitidos o uso de frames.

O DOCTYPE Transitional é mais flexível e deve ser usado para permitir uma navegação por browsers mais antigos ou que não suportam CSS por exemplo.  É também conhecido como DOCTYPE Loose (frouxo).

O DOCTYPE Frameset deverá ser usado para documentos que fizer o uso de frames.

Exemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>….

O site do W3Schools disponibilida uma tabela com as tags XHTML suportadas pelos DOCTYPE citados. Importante para construir páginas Web dentro dos padrões adotados. Confira a tabela em: http://www.w3schools.com/tags/ref_html_dtd.asp ou http://www.w3.org/QA/2002/04/valid-dtd-list.html.

A declaração DOCTYPE para o HTML 5 está simplificada até seu lançamento oficial:

<!DOCTYPE html>
<html>
<html>
<head>….

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *