Aula de XHTML

1.026 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
1.026
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
48
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

×