XHTML Básico

3,806 views
3,698 views

Published on

Introdução ao desenvolvimento de páginas web com utilizando os padrões XHTML e CSS.

Published in: Technology

XHTML Básico

  1. 1. Padrões de Implementação de Interfaces
  2. 2. Um pouquinho de História... Em 1989, Tim Berners-Lee criou a World Wide Web. Lançamento oficial foi em 6 de agosto de 1991.
  3. 3. World Wide Web Sistema de documentos de hipertexto interligados. A navegação entre páginas web, se dá por links. É de tecnologia aberta e gratuita.
  4. 4. World Wide Web Consortium “ To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. ” Tim Berners-Lee, Diretor da W3C e inventor da criado em 1994 World Wide Web
  5. 5. WaSP Web Standards Projects Grupo formado em 1998 para promover os Padrões Web
  6. 6. Padrões XML XHTML DOM HTML WSDL CSS SVG SOAP RDF
  7. 7. Nova Proposta Divisão em Camadas
  8. 8. Padrão HTML SGML base do padrão XML (Extensible Markup Language) 1997 - W3C endossou o HTML 4
  9. 9. Padrão XHTML eXtensible HyperText Markup Language documentos web compatíveis com aplicações XML 2000 - endossado o XHTML 1.0 2001 - endossado o XHTML 1.1
  10. 10. XHTML é baseado em XML HTML4 = XHTML1
  11. 11. Documentos são lidos, visualizados e editados em qualquer ferramenta XML
  12. 12. Interoperabilidade
  13. 13. É possível criar novas marcações (tags)
  14. 14. Há compatibilidade com diversos navegadores
  15. 15. Acessibilidade
  16. 16. Código mais limpo
  17. 17. Melhores resultados nos mecanismos de busca
  18. 18. Arquivo Menor: Carregamento mais rápido, economia de banda
  19. 19. Facilidade de manutenção
  20. 20. Diferenças entre HTML e XHTML
  21. 21. Documentos devem ser bem formatados
  22. 22. <html> <head> <title> </title> </head> <body> <p> ... </p> </body> </html> regra obrigatória
  23. 23. Tags em letras minúsculas
  24. 24. proibido em XHTML <div> <DIV> <p>texto</p> <P>texto</P> </div> </DIV>
  25. 25. Tags devem ser aninhadas corretamente
  26. 26. proibido em XHTML <div> <div> <p> <p> <em> <em> Texto Texto enfatizado enfatizado </em> </p> </p> </em> </div> </div>
  27. 27. Uso de tags de fechamento
  28. 28. proibido em XHTML <p> Um parágrafo <p> </p> Um parágrafo <li> <li> Um item de lista Um item de lista </li>
  29. 29. Elementos vazios (órfãos) devem ser fechados
  30. 30. <br /> <hr /> proibido em XHTML <img src=”imagem.gif” alt=”minha imagem” /> <br> <hr> ou <img src=”imagem.gif” alt=”minha imagem”> <br></br> <hr></hr> <img src=”imagem.gif” alt=”minha imagem”></img>
  31. 31. Sintaxe dos atributos
  32. 32. Nome dos atributos
  33. 33. <td rowspan=”3” <td ROWSPAN=”3”
  34. 34. Valores dos atributos
  35. 35. <td rowspan=”3” <td rowspan=3
  36. 36. Sintaxe para atributos
  37. 37. <input checked=”checked” /> <input checked /> <input realonly=”readonly” /> <input readonly /> <textarea multiple=”multiple” /> <textarea multiple /> ... ...
  38. 38. Pontos de âncoras
  39. 39. <a name=”topo”>Início</a> (Para HTML) <a id=”topo”>Início</a> (Para XHTML) <a id=”topo” name=”topo”>Início</a> (Para compatibilidade com navegadores antigos)
  40. 40. Atributo alt para imagens
  41. 41. regra obrigatória <img src=”imagem.gif” alt=”minha imagem” /> (Para XHTML) <img src=”imagem.gif” alt=” ” /> (Para imagem que decorativa que não transmita informação)
  42. 42. Código gerado por editores
  43. 43. Editores WYSIWYG “O que você vê é o que você tem” onmouseover=function() onMouseOver=function()
  44. 44. Codificação de caracteres reservados
  45. 45. Entidades HTML Comércio &amp; Exportação Comércio & Exportação
  46. 46. Entidades HTML Caractere Nome da Entidade Descrição em inglês “ &quot; quotation mark ‘ &apos; apostrophe » &raquo; angle quotation mark (right) < &lt; less-than > &gt; more-than ó &oacute; small a, acute accent ã &atilde; small a, tilde À &Agrave; big a, grave accent ê &ecirc; small e, circumflex accent ç &ccedil; small c, cedilla
  47. 47. Exemplo Código Esta apresenta&ccedil;&atilde;o &eacute; sobre padr&otild;es web. Visual Esta apresentação é sobre padrões web.
  48. 48. Documento XHTML
  49. 49. <!DOCTYPE blablablablabla> <html xmlns=”http://www.w3c.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”> <head> <title>Título do documento</title> </head> <body> Conteúdo do documento </body> </html>
  50. 50. DOCTYPE Document Type Definition Especifica a sintaxe e a gramática SGML usada para a linguagem de marcação XHTML
  51. 51. DOCTYPE Strict Mais rígida das declarações: itens de apresentação dentro dos elementos <div align=”center”></div> elementos em desuso <u></u> Marcação de conteúdo totalmente independente da apresentação
  52. 52. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
  53. 53. DOCTYPE Transitional Declarações mais flexíveis que a anterior: itens de apresentação dentro dos elementos <div align=”center”></div> elementos em desuso <u></u> Destinado para navegadores sem suporte a CSS
  54. 54. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  55. 55. Web Semântica
  56. 56. Semântica É a parte da linguística que estuda o significado das palavras.
  57. 57. XHTML Marcação semântica Tags são usadas considerando seu significado, destino e função
  58. 58. Alguns Elementos <h1> <h2> .... até <h6> para cabeçalhos <p> para parágrafos <strong> para maior importância <small> para menor importância <em> para enfatizar <ul> para lista sem ordenação <ol> para lista ordenada <li> para item de lista <table> para dados tabulares <div> e <span> não tem valor semântico
  59. 59. Ferramenta certa para o trabalho certo
  60. 60. CSS Cascading Style Sheet
  61. 61. Sintaxe CSS Composta por seletor e declaração seletor { propriedade : valor; }
  62. 62. seletor { propriedade: valor; } seletor: é o alvo da regra CSS declaração: parâmetros de estilização propriedade: característica a ser estilizada valor: quantificação ou qualificação da propriedade
  63. 63. seletor { propriedade: valor; } Elemento <p> - parágrafo p { color: #000000; background-color: #ff0000; font-style: italic; text-align: center; }
  64. 64. Agrupamento de Seletores
  65. 65. h1 { color: red; } h2 { color: red; } p { color: red; } agrupando... h1, h2, p { color: red; }
  66. 66. Classe x Id
  67. 67. Classe Seletor de classificação ID Vários elementos Seletor de identificação podem ter a mesma classe Somente um elemento pode ter aquele id Não tem tanta especificidade Mais específico
  68. 68. Seletor Classe
  69. 69. <h4 class=”titulo”> Cabeçalho nível 4 </h4> h4.titulo { color: red; } .titulo { color: red; }
  70. 70. Seletor Classe outro exemplo
  71. 71. <p class=”introducao”> Texto de introdução da minha notícia. </p> p.introducao { color: black; font-size: 12px; width: 500px; margin: 10px 5px; } p.artigo { color: gray; font-size: 13px; } <p class=”introducao artigo”> Texto de introdução do meu artigo. </p>
  72. 72. Seletor ID
  73. 73. <div id=”principal”></div> <div id=”secundario”></div> div#principal { color: black; } #principal { color: black; } #secundario { color: red; }
  74. 74. Seletor Composto
  75. 75. <div id=”principal”> <p class=”descricao”> <strong>Nome do produto</strong> Descrição do produto. </p> </div> div#principal { color: black; font-style: normal; } p.descricao{ font-size: 13px; } p.descricao strong { font-size: 14px; color: #005A9C; }
  76. 76. Vincular Folhas de Estilo
  77. 77. Inline <p style=”width:200px; color:red; background-color:#ccc; font-size:1.8em;”> Texto com estilo inline. </p>
  78. 78. Incorporado ... <head> ... <style type=”text/css”media=”screen”> body { margin: 0; padding: 0; font-size: 80%; color: black; background-color: white; } ... outras regras ... </style> </head> ...
  79. 79. Arquivo Linkado ... <head> ... <link rel=”stylesheet” type=”text/css” href=”estilo.css” media=”all” /> </head> <body> ...
  80. 80. Arquivo Importado ... <head> ... <style type=”text/css”> @import url(“estilos.css” screen; </style> </head> <body> ...
  81. 81. Validadores W3C
  82. 82. http://validator.w3.org/
  83. 83. http://jigsaw.w3.org/css-validator/
  84. 84. http://htmlplayground.com/
  85. 85. Acessibilidade
  86. 86. Boa marcação de Conteúdo para Leitores de Tela
  87. 87. Referências http://www.w3c.br/ http://www.w3.org/TR/xhtml1/ http://jigsaw.w3.org/css-validator/ http://www.w3.org/Style/CSS/#support http://www.maujor.com/w3c/xhtml10_2ed.html http://www.acessibilidade.net/ http://www.acesso.umic.pt/w3/TR/WCAG20/ http://www.acessibilidadelegal.com/ http://acessodigital.net/

×