XHTML
XHTML
 HTML
 XML
DIFERENÇAS ENTRE XHTML E HTML
 Documentos devem ser bem formados
 Todas as Tags devem ser escritas com letras
minúsculas...
DOCUMENTOS DEVEM SER BEM FORMADOS
 HTML navegadores interpretam e resolvem erros
de marcação.
 Em XHTML não são admitido...
TODAS AS TAGS DEVEM SER ESCRITAS COM
LETRAS MINÚSCULAS
 XML é sensível ao tamanho da caixa de fonte, logo
XHTML também é....
TAGS DEVEM SER CONVENIENTEMENTE
ANINHADAS
 A primeira tag a ser aberta é a última a ser fechada, a
segunda é a penúltima ...
USO DE TAGS DE FECHAMENTO É
OBRIGATORIO
 Em HTML é possível omitir a tag de fechamento de
determinados elementos, tais co...
ELEMENTOS VAZIOS DEVEM SER FECHADOS
 Elementos vazios devem ter uma tag de fechamento, ou a
tag de abertura deve terminar...
DIFERENÇA NA SINTAXE DOS ATRIBUTOS
 Nomes de Atributos
 Errado:
 <td ROWSPAN=“3”>
 Certo:
 <td rowspan=“3”>
 Valores...
 Sintaxe para atributos
 Errado
 <input checked />
 Certo:
 <input checked=“checked” />
ELEMENTOS OBRIGATÓRIOS EM UM
DOCUMENTO XHTML
 É obrigatória a declaração do DOCTYPE, assim
como das tags <html><head><tit...
PARA QUE SERVE O DOCTYPE?
 Serve para indicar a entidade normativa da
linguagem, o caminho para o navegador encontrar as
...
TIPOS DE DOCTYPE
 São três tipos de DOCTYPE para XHTML:
Strict, Transitional e Frameset.
 Strict:
 <!DOCTYPE HTML PUBLI...
MODELO DE DOCUMENTO XHTML
 <?xml version=“1.0” encoding=“UTF-8” ?
 <XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC “-
//W...
ELEMENTO META
 Este elemento destina-se a fornecer informações
adicionais sobre o documento.
 A sintaxe para escrever um...
EXEMPLOS DE ELEMENTOS META
 Informar o tipo de conteúdo do documento é texto HTML
e a codificação é UTF-8:
 <meta http-e...
EXEMPLOS DE ELEMENTOS META
 Para relacionar as palavras-chave do conteúdo do documento
usa-se:
 <meta name=“keywords”
co...
CARACTERES E ENTIDADES
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/x...
CODIFICAÇÃO DE CARACTERES
 Iso-8859-1
 Utf-8
CODIFICAÇÃO DE CARACTERES
 Primeiro caso:
 Bloco de Notas
 UTF-8 na tag meta
 ANSI
 Segundo caso:
 Bloco de Notas
 ...
PRIMEIRO CASO
SEGUNDO CASO
TERCEIRO CASO
VALIDANDO SEU TEMPLATE W3C
 http://validator.w3.org/#validate_by_upload+with_o
ptions
Próximos SlideShares
Carregando em…5
×

Aula de XHTML

985 visualizações

Publicada em

Aula de XHTML - IFBA - Desenvolvimento Web

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
985
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
46
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula de XHTML

  1. 1. XHTML
  2. 2. XHTML  HTML  XML
  3. 3. DIFERENÇAS ENTRE XHTML E HTML  Documentos devem ser bem formados  Todas as Tags devem ser escritas com letras minúsculas  Tags devem estar convenientemente aninhadas  Uso de Tags de fechamento é obrigatório  Elementos vazios devem ser fechados  Diferença na sintaxe dos atributos
  4. 4. DOCUMENTOS DEVEM SER BEM FORMADOS  HTML navegadores interpretam e resolvem erros de marcação.  Em XHTML não são admitidos erros na marcação  Estrutura Básica – elemento raiz <html>  <html>  <head>  …  </head>  <body>  …  </body>  </html>
  5. 5. TODAS AS TAGS DEVEM SER ESCRITAS COM LETRAS MINÚSCULAS  XML é sensível ao tamanho da caixa de fonte, logo XHTML também é.  Uso obrigatório de letras minúsculas  Errado:  <DIV><P> Aqui um texto</P></DIV>  Certo:  <div><p>Aqui um texto</p></div>
  6. 6. TAGS DEVEM SER CONVENIENTEMENTE ANINHADAS  A primeira tag a ser aberta é a última a ser fechada, a segunda é a penúltima e assim por diante.  Certo:  <div><p><em>Aqui um texto enfatizado</em></p></div>  Errado:  <div><em><p>Aqui um texto enfatizado</em></p></div>
  7. 7. USO DE TAGS DE FECHAMENTO É OBRIGATORIO  Em HTML é possível omitir a tag de fechamento de determinados elementos, tais como para as tags <p><li>. XML não permite omissão de qualquer tag de fechamento. Todo elemento tem que ter tag de fechamento.  Errado:  <p>Um paragráfo.  <li>Um item de lista.  Certo:  <p>Um paragráfo.</p>  <li>Um item de lista</li>
  8. 8. ELEMENTOS VAZIOS DEVEM SER FECHADOS  Elementos vazios devem ter uma tag de fechamento, ou a tag de abertura deve terminar com />  Errado:  <br>  <hr>  <img src=“imagem.jpg” alt=“minha imagem”>  Certo: (Opção 1 – usar tag de fechamento)  <br></br>  <hr></hr>  <img src=“imagem.jpg” alt=“minha imagem”></img>  Certo: (Opção 2 – usar tag de fechamento)  <br />  <hr />  <img src=“imagem.jpg” alt=“minha imagem” />
  9. 9. DIFERENÇA NA SINTAXE DOS ATRIBUTOS  Nomes de Atributos  Errado:  <td ROWSPAN=“3”>  Certo:  <td rowspan=“3”>  Valores dos atributos  Errado:  <td rowspan=3>  Certo:  <td rowspan=“3”>
  10. 10.  Sintaxe para atributos  Errado  <input checked />  Certo:  <input checked=“checked” />
  11. 11. ELEMENTOS OBRIGATÓRIOS EM UM DOCUMENTO XHTML  É obrigatória a declaração do DOCTYPE, assim como das tags <html><head><title><body>  <!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">
  12. 12. PARA QUE SERVE O DOCTYPE?  Serve para indicar a entidade normativa da linguagem, o caminho para o navegador encontrar as diretrizes que regulamentam a sintaxe e as entidades válidas no documento e baseado nelas, renderizar o documento.
  13. 13. TIPOS DE DOCTYPE  São três tipos de DOCTYPE para XHTML: Strict, Transitional e Frameset.  Strict:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">  Transitional:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  Frameset  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  14. 14. MODELO DE DOCUMENTO XHTML  <?xml version=“1.0” encoding=“UTF-8” ?  <XHTML; 1.0 Transitional <!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 xml:lang=“pt- br” lang=“pt-br”> <head> <title>Viação São José | horários de ônibus</title> …metatags,estilos,scripts </head> <body> … Conteúdo da página </body> </html>
  15. 15. ELEMENTO META  Este elemento destina-se a fornecer informações adicionais sobre o documento.  A sintaxe para escrever um elemento meta, consiste em duas partes. A primeira define um nome para o metadado e a segunda para seu conteúdo. O nome é definido pelo seu atributo name ou http-equiv e o conteúdo pelo atributo content.  <meta name=“author” content=“Fulano da Silva” />
  16. 16. EXEMPLOS DE ELEMENTOS META  Informar o tipo de conteúdo do documento é texto HTML e a codificação é UTF-8:  <meta http-equiv=“Content-Type” content=“text/html” charset=“UTF-8” />  Para informar que o idioma principal do documento é o português:  <meta name=“language” content=“pt-br” />  Para descrever o conteúdo de suas páginas usa-se:  <meta name=“description” content=“Tutoriais sobre CSS, XHTML, HTML, acessibilidade e padões web.” />
  17. 17. EXEMPLOS DE ELEMENTOS META  Para relacionar as palavras-chave do conteúdo do documento usa-se:  <meta name=“keywords” content=“css, html, xhtml, webstandards, xml.” />  Para informar aos robôs de busca que os conteúdos da página podem ser indexados e os links devem ser seguidose examinados use:  <meta name=“robots” content=“all” />
  18. 18. CARACTERES E ENTIDADES  <!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 xml:lang=“pt-br” lang=“pt- br”> <head> <title>Titulo do Template</title> <meta name=“description” content=“Meu template para XHTML 1.0 Transitional.” /> <meta name=“keywords” content=“relação de palavras chave” /> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <meta name=“language” content=“pt-br” /> <meta name=“author” content=“Meu nome” /> </head> <body> … Conteúdo da página </body> </html>
  19. 19. CODIFICAÇÃO DE CARACTERES  Iso-8859-1  Utf-8
  20. 20. CODIFICAÇÃO DE CARACTERES  Primeiro caso:  Bloco de Notas  UTF-8 na tag meta  ANSI  Segundo caso:  Bloco de Notas  Iso-8859-1 na tag meta  UTF-8  Terceiro caso:  Bloco de Notas  UTF-8 na tag meta  UTF-8
  21. 21. PRIMEIRO CASO
  22. 22. SEGUNDO CASO
  23. 23. TERCEIRO CASO
  24. 24. VALIDANDO SEU TEMPLATE W3C  http://validator.w3.org/#validate_by_upload+with_o ptions

×