Xhtml

XHTML
EXTENSIBLE 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).

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.

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).

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

Xhtml

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

En vedette

En vedette (17)

Similaire à Xhtml

Similaire à Xhtml (20)

Plus de Escola de Informática Evolutime; Colégio Pio XII

Plus de Escola de Informática Evolutime; Colégio Pio XII (20)

Dernier

Dernier (20)

Xhtml

Notes de l'éditeur