Xhtml

XHTMLEXTENSIBLE HYPERTEXT MARKUP LANGUAGE

O que é XHTML?

Em poucas palavras, o XHTML é uma espécie de junção entre o

HTML e o XML. O XML é uma especificação bastante rígida:

quando os navegadores encontram um erro no HTML comum,

como uma tag sem o , o erro é "consertado"

automaticamente e, com isso, o usuário geralmente consegue

visualizar a página normalmente; já com o XML, um erro desse tipo

faz a aplicação parar.

O que é XHTML?

Além disso, cada navegador conserta o erro à sua maneira, o que

significa que o que você vê funcionando em um dispositivo pode

virar bagunça em outro. Desta forma, ao combinar HTML com

XML, o XHTML resultante é a garantia de que seu site será exibido

exatamente como você o desenvolveu, independente do

dispositivo. Isso evita o uso de hacks para corrigir problemas de

exibição em determinados navegadores e ainda deixa seu código

organizado para atualizações futuras.

ENTEDENDO HTML E XHTML

Todo conteúdo da Web necessita seguir um padrão. Atualmente a

codificação padrão é o XHTML.

Algumas razões para aprender e utilizar o XHTML:

• XHTML é o padrão de marcação atual, substituindo a HTML;

• Utilização de regras de sintaxe mais precisas e rigorosas;

• Aumento significativo da acessibilidade aos sites criados seguindo

os padrões;

• Facilidade de manutenção e atualização;

• Possibilidade de utilizar o mesmo código para diversos clientes Web além do navegador: PDAs, celulares e outros dispositivos móveis.

Hipertexto e Hiperlink

Normalmente, definimos hipertexto relacionando texto em formato

digital, podendo ser agregado a ele outros tipos de informações,

como outros blocos de textos, palavras, imagens ou sons, sendo

que o acesso aos outros elementos dá-se através de hiperlinks.

HTML (Hypertext Markup

Language)

Linguagem de Marcação de Hipertexto.

A linguagem HTML é utilizada para marcar textos através de

elementos e atributos. Um texto marcado com esta linguagem é

chamado de hipertexto HTML.

Documentos HTML podem ser interpretados por navegadores.

Desde a versão 4.01 do HTML a aparência não é responsabilidade

do HTML.

XHTML (EXtensible Hypertext Markup

Language)

XHTML é uma Linguagem Extensível de Marcação para Hipertexto e

que se destina a escrever documentos web com a funcionalidade

adicional de ser compatível com as aplicações XML.

SGML (Standard Generalized

Markup Language

Todas as linguagens de marcação da Web são baseadas em SGML

(SGML - Linguagem de Marcação Generalizada Padrão), uma

metalinguagem complexa, projetada com a finalidade de servir de

base para a criação de outras linguagens. SGML foi usada para criar

XML (Extensible Markup Language - Linguagem de Marcação

Extensível), também uma metalinguagem, porém, simplificada.

XML

Com XML, é possível definir novas tags e novos atributos

para escrever um documento Web, permitindo ao

usuário criar sua própria linguagem de marcação.

XHTML foi criada dentro deste conceito e, por isso, é

uma aplicação XML.

DTD: Document Type Definition

Um padrão que define as partes de um

documento, e descrevem como eles podem ou

não ser usados, o que pode ser colocado em

seus interiores, esse são ou não elementos

obrigatórios do documento.

Descreve com precisão a sintaxe e a gramática

da linguagem de marcação XHMTL.

As 3 Definições de Tipo de

Documento

Há atualmente 3 tipos de documentos XHTML:

STRICT

TRANSITIONAL

FRAMESET

XHTML 1.0 Strict

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHMTL 1.0 Strict//EM”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Use esta quando você quer realmente uma marcação

limpa, livre da confusão da apresentação. Use junto

com Folhas de Estilo em Cascata (Cascading Style

Sheets).

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

XHTML 1.0 Transitional

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHMTL 1.0 Transitional//EM”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasnsitional.dtd>

Use esta quando você precisa tirar vantagem das

características de apresentação da HTML e quando

você quer dar suporte aos navegadores que não

entendem Folhas de Estilo em Cascata.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasnsitional.dtd

XHTML 1.0 Frameset

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHMTL 1.0 Frameset//EM”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>

Use esta quando você quer usar Frames (molduras)

HTML para particionar a janela do navegador em duas

ou mais molduras (frames).

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

As diferenças do XHTML na prática

O assunto é extenso, mas vamos abordar alguns pontos aqui. A

primeira diferença é que todas as tags devem ser fechadas. No

HTML, para separar um parágrafo do outro, se você simplesmente

colocar um entre eles, o navegador irá aceitar. Como isso, na

verdade, está errado, o código não será validado no XHTML: um

parágrafo deve vir entre um e um , como manda a boa e

velha organização.

Exemplo 1

Certo



Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Nam

quis nunc at diam euismod

rhoncus.



Aliquam auctor laoreet dui. Nulla

arcu arcu, placerat ut, consectetuer

et, tempus eu, urna.

Errado



Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Nam

quis nunc at diam euismod rhoncus.



Aliquam auctor laoreet dui. Nulla

arcu arcu, placerat ut, consectetuer

et, tempus eu, urna

As diferenças do XHTML na prática

Alguns elementos têm tag de fechamento, como e ,

 e , etc. Em elementos sem tag de fechamento,

usa-se uma barra no final, como , <hr /> e <img ... />;

Uma coisa que costuma dar trabalho é o fato de que todas as tags

e atributos deverem estar em letras minúsculas; (XHTML é case-

sensitive)

Isso também vale para códigos de JavaScript: OnMouseOver deve

ser substituído por onmouseover, por exemplo.

Exemplo 2

Certo

Lorem 

ipsum dolor sit amet,

consectetuer adipiscing elit.

A última tag aberta deve ser a primeira

a ser fechada.

Errado

Lorem

ipsum dolor sit

amet, consectetuer adipiscing

elit.

Os valores de atributos devem

estar entre aspas

Todos os valores de atributo devem ser declarados entre aspas,

mesmo aqueles valores com caracteres númericos.

CORRETO: valores de atributo entre aspas

<td rowspan="3">

INCORRETO: valores de atributos sem uso de aspas

<td rowspan=3>

Elementos vazios

Inclua um espaço antes de / > (barra-sinal de maior) nos elementos vazios. Por

exemplo, , <hr /> e <img src="karen.jpg" alt="Karen" />. Use a sintaxe de tag

simplificada para elementos vazios. Por exemplo , ao invés de 

permitido em XML mas que traz resultados inesperados em certas aplicações de

usuário.

O Atributo id substitui o Atributo

name A HTML 4.01 define um atributo name para os elementos a, applet, frame,

iframe, img, e map. Na XHTML o atributo name está desaprovado. Use id no

lugar.

Errado

<img src=“imagem.gif” name=“imagem1” />

Correto

<img src=“imagem.gif” id=“imagem1” />

Observação: Para inter-operar com navegadores mais antigos por enquanto,

você deve usar tanto o name quanto o id, com valores de atributo idênticos,

assim:

<img src=“imagem.gif” id=“imagem1” name=“imagem1” />

O atributo alt para imagens

Em XHTML o uso do atributo alt para imagens é obrigatório

<img src="imagem.gif" alt ="minha_imagem " />

Se tratar-se de uma imagem decorativa pode-se usar o atributo alt

vazio:

<img src="imagem.gif" alt =" " />

Separadores de blocos de códigos

É comum o uso de uma sequência de caracteres dentro da

marcação de comentários (  ) para visualmente separar

trechos do código com a finalidade de facilitar sua posterior leitura e manutenção.

Não use a clássica sequência de caracteres ------, para conseguir

este efeito.

Alguns agentes de usuário mais antigos podem ter dificuldades na

interpretação desta sequência.

Use por exemplo a sequência ====, ., ou xxxxxx

Separadores de blocos de códigos

Errado:





código XHTML do menu



Certo:





código XHTML> do menu

Elementos obrigatórios em XHTML

Todos os documentos XHTML devem

ter uma declaração DOCTYPE. Os

elementos html, head e body devem

estar presentes, e o title deve estar

presente dentro do elemento head.

<!DOCTYPE O Tipo-de-documento vai aqui>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>O título vai aqui</title>

</head>

<body>

O corpo do texto vai aqui

</body>

</html>

Observações

Observação: A declaração DOCTYPE não é em si uma parte do documento

XHTML. Ela não é um elemento XHTML, e ela não deve ter uma tag de

fechamento.

Observação: O atributo xmlns dentro da tag <html> é requerido na XHTML.

Entretanto, o validador no w3.org não acusa quando este atributo está faltando

num documento XHTML. Isto é porque "xmlns=http://www.w3.org/1999/xhtml" é um

valor fixo e será adicionado à tag <html> mesmo se você não o incluir.

Como um site deve ser convertido

para XHTML

Para converter um site Web de HTML para XHTML, você

deve estar familiarizado com as regras de sintaxe da

XHTML dos capítulos anteriores.

Validação do documento XHTML

W3C disponibiliza um validador gratuito para

documentos XHTML. Ali, você digita o URL ou o caminho

para o arquivo no seu HD e um robô analisa o

documento fornecendo um relatório completo e

detalhado das não conformidades por ventura

existentes. É uma ferramenta excelente para você usar

durante a elaboração ou migração do seu documento

para XHTML. Serve como um verdadeiro revisor do

código que você cria. Abaixo o link para o validador:

Validador XHTML do W3C

http://validator.w3.org/

Xhtml

Education

Transcript of Xhtml