O documento discute as principais diferenças entre HTML e XHTML. Apresenta uma introdução sobre o que é XHTML, destacando que se trata de uma padronização praticamente idêntica ao HTML 4.01, mas com algumas diferenças para torná-lo compatível com XML. Também aborda tópicos como sintaxe, validação de documentos XHTML e benefícios do uso de XHTML.
1. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Programa¸˜o para Web
ca
XHTML
Ivo Calado
Instituto Federal de Educa¸˜o, Ciˆncia e Tecnologia de Alagoas
ca e
16 de Abril de 2012
1 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
2. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Roteiro
1 Introdu¸˜o
ca
2 Sintaxe
3 O que temos mais em XHTML?
4 Validando documentos XHTML
2 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
3. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que ´?
e
O que ´?
e
3 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
4. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que ´?
e
O que ´?
e
Trata-se de uma padroniza¸˜o praticamente identica ao
ca
HTML 4.01 com apenas algumas diferen¸as
c
XHTML ´ uma vers˜o mais restrita e limpa do HTML
e a
XHTML foi desenvolvido pela W3C para ajudar
desenvolvedores na transi¸˜o do HTML para XML
ca
Migrando para XHTML, desenvolvedores Web podem fazer
parte do mundo do XML mas mantendo retrocompatibilidade
com o HTML
3 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
5. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que ´?
e
O que ´?
e
Trata-se de uma padroniza¸˜o praticamente identica ao
ca
HTML 4.01 com apenas algumas diferen¸as
c
XHTML ´ uma vers˜o mais restrita e limpa do HTML
e a
XHTML foi desenvolvido pela W3C para ajudar
desenvolvedores na transi¸˜o do HTML para XML
ca
Migrando para XHTML, desenvolvedores Web podem fazer
parte do mundo do XML mas mantendo retrocompatibilidade
com o HTML
Agora, um documento HTML passa a ser definido como uma
aplica¸˜o XML
ca
3 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
6. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Benef´
ıcios
O que ganhamos com o XHTML?
Documentos XHTML est˜o em conformidade com XML.
a
Deste modo podem ser facilmenteo visualizados, editados e
validados por ferramentas de XML
Especialmente util para navegadores de dispositivos
´
embarcados que n˜o podem ficar se preocupando em tentar
a
dar “significado” ` documentos HTML mal formados
a
4 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
7. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Benef´
ıcios
Porque usar XHTML?
Possui uma sintaxe mais r´
ıgida que o HTML
Possibilita a cria¸˜o de p´ginas Web mais consistentes e mais
ca a
bem estruturados que no HTML
P´ginas que seguem o padr˜o XHTML recebem um selo de
a a
qualidade da W3C
5 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
8. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que j´ sabemos...
a
A sintaxe ´ bastante parecida com o HTML
e
6 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
9. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que j´ sabemos...
a
A sintaxe ´ bastante parecida com o HTML
e
Praticamente toda a sintaxe ´ compat´ com o HTML
e ıvel
por´m o inverso n˜o ´ verdadeiro
e a e
H´ diversos pontos que devem ser considerados na sintaxe,
a
como: DOCTYPE, case-sensitive, fechamento de tags,
formata¸˜o de atributos etc
ca
6 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
10. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Exemplo de XHTML
<? xml v e r s i o n=" 1.0 " e n c o d i n g=" UTF -8 " ?>
<!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 / TR / xhtml1 " xml : l a n g=" en "
l a n g=" en ">
<head>
< t i t l e>E v e r y document must h a v e a t i t l e </ t i t l e>
</ head>
<body>
. . . your content goes here . . .
</ body>
</ html>
7 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
11. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
DOCTYPE
Declara¸˜o de DOCTYPE
ca
Em documentos XML ´ comum o uso de documentos dtd ou
e
XMLSchema que possibilitem a valida¸˜o da sintaxe de um
ca
documentos
Neste sentido, devemos identificar no documento XHTML as
regras de valida¸˜o
ca
<!DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0
Transitional // EN "
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional .
dtd ">
8 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
12. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
DOCTYPE
Tipos de arquivos DTD
Existem 3 tipos de arquivos DTD que s˜o o Strict,
a
Transitional e Frameset
A diferen¸a entre os 3 arquivos de valida¸˜o est´ nos atributos
c ca a
aceitos
Dependendo do tipo da p´gina Web (uso ou n˜o de CSS, uso
a a
de frames), deve-se fazer a sele¸˜o do DTD correto
ca
Validadores podem ser utilizados para fazer a sele¸˜o correta
ca
9 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
13. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
DOCTYPE
Tipos de DTD
<!DOCTYPE html
PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN "
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - strict . dtd ">
<!DOCTYPE html
PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN "
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional .
dtd ">
<!DOCTYPE html
PUBLIC " -// W3C // DTD XHTML 1.0 Frameset // EN "
" http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - frameset . dtd ">
10 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
14. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Case sensitive e fechamento de tags
Case sensitive
Enquanto que em HTML podemos fazer algo assim:
<HtML> <HEad> </heAD> </HTML>
em XHTML TODOS os atributos e tags devem ser min´sculos
u
11 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
15. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Case sensitive e fechamento de tags
Case sensitive
Enquanto que em HTML podemos fazer algo assim:
<HtML> <HEad> </heAD> </HTML>
em XHTML TODOS os atributos e tags devem ser min´sculos
u
Exemplo:
<!−− T h i s i s i n v a l i d i n XHTML −−>
<A Href="/ xhtml / xhtml_tutorial . html ">XHTML T u t o r i a l</A>
<!−− C o r r e c t XHTML way o f w r i t i n g t h i s i s a s f o l l o w s −−
>
<a h r e f="/ xhtml / xhtml_tutorial . html ">XHTML T u t o r i a l</a>
11 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
16. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Case sensitive e fechamento de tags
Fechamento de tags
Todas as tags devem ser fechadas
<!−− T h i s i s i n v a l i d i n XHTML −−>
<p>T h i s p a r a g r a p h i s n o t w r i t t e n a c c o r d i n g t o XHTML
syntax .
<!−− T h i s i s a l s o i n v a l i d i n XHTML −−>
<img s r c="/ images / xhtml . gif ">
12 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
17. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Case sensitive e fechamento de tags
Fechamento de tags
Todas as tags devem ser fechadas
<!−− T h i s i s i n v a l i d i n XHTML −−>
<p>T h i s p a r a g r a p h i s n o t w r i t t e n a c c o r d i n g t o XHTML
syntax .
<!−− T h i s i s a l s o i n v a l i d i n XHTML −−>
<img s r c="/ images / xhtml . gif ">
<!−− T h i s i s a l s o v a l i d now −−>
<img s r c="/ images / xhtml . gif " />
12 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
18. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Formata¸˜o de atributos
ca
Formata¸˜o de atributos
ca
Em HTML ´ poss´ um c´digo como esse
e ıvel o
<img s r c="/ images / xhtml . gif " width =250 h e i g h t =50 />
Por´m em XHTML todos os atributos devem estar entre aspas
e
13 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
19. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Formata¸˜o de atributos
ca
Formata¸˜o de atributos
ca
Em HTML ´ poss´ um c´digo como esse
e ıvel o
<img s r c="/ images / xhtml . gif " width =250 h e i g h t =50 />
Por´m em XHTML todos os atributos devem estar entre aspas
e
<img s r c="/ images / xhtml . gif " width=" 250 " h e i g h t=" 50 " />
13 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
20. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Minimiza¸˜o de atributos
ca
Minimiza¸˜o de atributos
ca
Em algumas tags ´ poss´ a utiliza¸˜o de atributos sem valor
e ıvel ca
<o p t i o n s e l e c t e d>
Por´m, atributos sem valor n˜o s˜o poss´ em XML. Deste modo,
e a a ıvel
a seguinte abordagem foi utilizada
<o p t i o n s e l e c t e d=" selected ">
14 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
21. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Atributo id e fechamento de tags
Atributo name e id
Em HTML ´ comum a utiliza¸˜o do atributo name para
e ca
identifica¸˜o do elemento...
ca
15 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
22. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Atributo id e fechamento de tags
Atributo name e id
Em HTML ´ comum a utiliza¸˜o do atributo name para
e ca
identifica¸˜o do elemento...
ca
Por´m, em XHTML o atributo id assume este papel
e
<img s r c="/ images / xhtml . gif " i d=" xhtml_logo " />
15 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
23. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Atributo id e fechamento de tags
Fechamento de tags
Tags em XHTML devem estar corretamente fechadas
<b>< i> T h i s t e x t i s b o l d and i t a l i c </b></ i> (ERRADO)
<b>< i> T h i s t e x t i s b o l d and i t a l i c </ i></b>
16 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
24. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
O que temos mais em XHTML?
Atributos base: class, id, style, title
Atributos de linguagem: dir, lang
Eventos: onload, onchange, onsubmit. Veremos com mais
detalhes em DHTML!
M´dulos: a especifica¸˜o XHTML ´ dividida em diversos
o ca e
m´dulos dependendo da funcionalidade. Ou seja, um
o
dispositivo pode implementar apenas alguns recursos
17 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca
25. Introdu¸˜o
ca Sintaxe O que temos mais em XHTML? Validando documentos XHTML
Validando documentos XHTML
http://www.validome.org/
18 / 18 Ivo Calado IFAL
Programa¸˜o para Web
ca