XHTML Teoria

UNIP
Produção de Páginas Web

Profa. Cristina Ramos (cristina.ramos@unip.br)
XHTML
• XHTML significa EXtensible HyperText Markup Language
• XHTML irá substituir o HTML
• XHTML é quase idêntico ao HTML 4.01
• XHTML é uma versão mais restritiva e “limpa” do HTML
• XHTML é HTML definido como uma aplicação XML
• XHTML é uma recomendação do W3C
• Todos os novos browsers tem suporte para XHTML.
• XHTML é uma combinação de HTML e XML (EXtensible Markup Language).
• XHTML consiste de todos os elementos do HTML 4.01 combinados com a sintaxe
do XML.
Por que XHTML?

Na web muitas páginas contêm HTML de péssima qualidade.
Os browsers tradicionais nos computadores conseguem interpretar essas páginas,
no entanto o mercado atual consiste em uma variedade de tecnologias, destinadas
a acessar a Internet em diferentes aparelhos, tais como celulares e hand helds.
Esses aparelhos não têm a capacidade para interpretar uma linguagem mal
formada.
O XML é uma linguagem onde tudo deve estar corretamente marcado, resultando
em documentos bem formados.
O XML foi criado para descrever dados e o HTML para exibir dados.
Assim, a combinação de HTML e XML, e suas qualidades, resulta em uma
linguagem completa e útil agora e no futuro – o XHTML.
Diferenças:
Elementos do XHTML devem estar corretamente aninhados
Errado:
<b><i>Texto em negrito e itálico</b></i>
Certo:
<b><i>Texto em negrito e itálico</i></b>
UNIP – PRODUÇÃO DE PÁGINAS WEB
Documentos XHTML devem ser bem formados

Estrutura básica do documento:
<html>
<head>
<title> Título do documento </title>
</head>
<body>
<h1> Título do texto </h1>
<p> primeiro parágrafo do texto </p>
<ul>
<li> primeiro texto da lista </li>
<li> segundo texto da lista </li>
<li> terceiro texto da lista </li>
</ul>
</body>
</html>
Os nomes dos tag devem estar em caixa-baixa

XML é “case-sensitive”. Como os documentos XHTML são aplicações XML, tags
como <br> e <BR> são interpretados como tags diferentes.
Errado:
<BODY>
<P>Este é um parágrafo</P>
</BODY>
Certo:
<body>
<p>Este é um parágrafo </p>
</body>
Atributos também devem estar em caixa-baixa

Errado:
<table WIDTH="100%">
Certo:
<table width="100%">
2
Todos os elementos do XHTML devem ser fechados

Errado:
<p>Este é um parágrafo
<p>Este é outro parágrafo
Certo:
<p>Este é um parágrafo </p>
<p>Este é outro parágrafo </p>
Elementos vazios também devem ser fechados

Errado:
Este é um break<br>
Esta é um linha horizontal:<hr>
Esta é uma imagem <img src="imagem.gif" alt="Imagem">
Certo:
Este é um break <br />
Esta é um linha horizontal:<hr />
Esta é uma imagem <img src="imagem.gif" alt="Imagem" />
IMPORTANTE:
Deve existir um espaço antes da barra inclinada ("/") : <br />, e não <br/>
Os valores de atributos devem estar entre aspas

Errado:
<table width=100%>
Certo:
<table width="100%">
3
Não é permitido atributos sem valores

Errado:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
Certo:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Lista de atributos minimizados no HTML e como devem ser redefinidos no

XHTML:
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
O atributo id substitui o atributo name

Errado:
<img src="picture.gif" name="picture1" />
Certo:
<img src="picture.gif" id="picture1" />
4
Nota: Para manter a compatibilidade com browsers antigos, aconselha-se a manter

os 2 atributos com o mesmo valor:
<img src="picture.gif" id="picture1" name="picture1" />
DOCTYPE
Deve-se informar o DOCTYPE (DTD) na primeira linha do documento XHTML
Nota: A declaração DOCTYPE não é propriamente uma parte do documento XHTML,
assim não necessita de um tag de fechamento.
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
Existem 3 tipos de Doctype:

• STRICT
• TRANSITIONAL
• FRAMESET
Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Usada quando o código é 100% XHTML. Não permite marcação de apresentação
como a tag <font>, por exemplo, o que força a separação entre estrutura (XHTML)
e apresentação (CSS).
Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
É o tipo mais utilizado. Permite a utilização de tags e atributos de formatação,
tornando o documento compatível com browsers antigos que não suportam CSS.
5
Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Usado quando se utiliza Frames no site.
Validação
Validar o código XHTML é fundamental, pois diferente de outras linguagens, se o
código contiver erros, o browser não deixará de exibir o documento, nem exibirá
nenhuma informação relativa a incompatibilidades com o código. Simplesmente
tentará exibir o documento à sua maneira, resultando muitas vezes em
formatações ilegíveis ou informações ocultas.
Validar o código é a única maneira de garantir que seu código será exibido
conforme planejado.
Para validar o código você pode usar aplicações online (http://validator.w3.org) ou
o próprio Dreamweaver.

XHTML Teoria

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XHTML Teoria

Uploaded by

Copyright:

Available Formats

UNIP

Produção de Páginas Web

Por que XHTML?

Documentos XHTML devem ser bem formados

Os nomes dos tag devem estar em caixa-baixa

Atributos também devem estar em caixa-baixa

Todos os elementos do XHTML devem ser fechados

Elementos vazios também devem ser fechados

Os valores de atributos devem estar entre aspas

Não é permitido atributos sem valores

Lista de atributos minimizados no HTML e como devem ser redefinidos no

O atributo id substitui o atributo name

Nota: Para manter a compatibilidade com browsers antigos, aconselha-se a manter

Existem 3 tipos de Doctype:

You might also like