Xhtml

215 visualizações

Publicada em

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide
  • http://codigofonte.uol.com.br/artigos/10-tags-html-que-voce-nao-conhecia
  • http://www.infowester.com/xhtml.php
  • http://www.plasmadesign.com.br/stupidtables/20semanticmarkup.html
    http://www.clem.ufba.br/tuts/xhtml/c05.htm
    http://www.maujor.com/w3c/xhtml10_2ed.html
  • http://books.google.com.br/books?id=BUmXBAAAQBAJ&pg=PA17&lpg=PA17&dq=regras+de+uso+de+xhtml&source=bl&ots=kGSJ5-9x_j&sig=LJWdM9skpdzTYQToJEs32Ma8w48&hl=pt-BR&sa=X&ei=baFrVNb7OYSogwTb6ILwBA&ved=0CEAQ6AEwBQ#v=onepage&q&f=false
  • Xhtml

    1. 1. XHTML EXTENSIBLE HYPERTEXT MARKUP LANGUAGE
    2. 2. 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 <p> sem o </p>, 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.
    3. 3. 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.
    4. 4. 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.
    5. 5. 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.
    6. 6. 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.
    7. 7. 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.
    8. 8. 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.
    9. 9. 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.
    10. 10. 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.
    11. 11. As 3 Definições de Tipo de Documento  Há atualmente 3 tipos de documentos XHTML:  STRICT  TRANSITIONAL  FRAMESET
    12. 12. 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).
    13. 13. 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.
    14. 14. 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).
    15. 15. 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 <p> 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 <p> e um </p>, como manda a boa e velha organização.
    16. 16. Exemplo 1  Certo <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus.</p> <p> Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna.</p>  Errado <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus. <p> Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna
    17. 17. As diferenças do XHTML na prática  Alguns elementos têm tag de fechamento, como <p> e </p>, <strong> e </strong>, etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como <br />, <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.
    18. 18. Exemplo 2  Certo <p>Lorem <strong class="estilo"> ipsum dolor sit amet</strong>, consectetuer adipiscing elit.</p>  A última tag aberta deve ser a primeira a ser fechada.  Errado <P>Lorem <B CLASS="estilo">ipsum dolor sit amet</b>, consectetuer adipiscing elit.</P>
    19. 19. 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>
    20. 20. Elementos vazios  Inclua um espaço antes de / > (barra-sinal de maior) nos elementos vazios. Por exemplo, <br />, <hr /> e <img src="karen.jpg" alt="Karen" />. Use a sintaxe de tag simplificada para elementos vazios. Por exemplo <br />, ao invés de <br></br> permitido em XML mas que traz resultados inesperados em certas aplicações de usuário.
    21. 21. 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” />
    22. 22. 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 =" " />
    23. 23. 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
    24. 24. Separadores de blocos de códigos  Errado:  <!-- Aqui começa o menu -->  <!-- -------------------------------------------- -->  código XHTML do menu  <!-- -------------------------------------------- -->  Certo:  <!-- Aqui começa o menu -->  <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->  código XHTML> do menu  <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
    25. 25. 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>
    26. 26. 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.
    27. 27. 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.
    28. 28. 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

    ×