Your SlideShare is downloading. ×
XHTML Básico
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

XHTML Básico

3,469
views

Published on

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

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

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,469
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Padrões de Implementação de Interfaces
  • 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. 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. 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. WaSP Web Standards Projects Grupo formado em 1998 para promover os Padrões Web
  • 6. Padrões XML XHTML DOM HTML WSDL CSS SVG SOAP RDF
  • 7. Nova Proposta Divisão em Camadas
  • 8. Padrão HTML SGML base do padrão XML (Extensible Markup Language) 1997 - W3C endossou o HTML 4
  • 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. XHTML é baseado em XML HTML4 = XHTML1
  • 11. Documentos são lidos, visualizados e editados em qualquer ferramenta XML
  • 12. Interoperabilidade
  • 13. É possível criar novas marcações (tags)
  • 14. Há compatibilidade com diversos navegadores
  • 15. Acessibilidade
  • 16. Código mais limpo
  • 17. Melhores resultados nos mecanismos de busca
  • 18. Arquivo Menor: Carregamento mais rápido, economia de banda
  • 19. Facilidade de manutenção
  • 20. Diferenças entre HTML e XHTML
  • 21. Documentos devem ser bem formatados
  • 22. <html> <head> <title> </title> </head> <body> <p> ... </p> </body> </html> regra obrigatória
  • 23. Tags em letras minúsculas
  • 24. proibido em XHTML <div> <DIV> <p>texto</p> <P>texto</P> </div> </DIV>
  • 25. Tags devem ser aninhadas corretamente
  • 26. proibido em XHTML <div> <div> <p> <p> <em> <em> Texto Texto enfatizado enfatizado </em> </p> </p> </em> </div> </div>
  • 27. Uso de tags de fechamento
  • 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. Elementos vazios (órfãos) devem ser fechados
  • 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. Sintaxe dos atributos
  • 32. Nome dos atributos
  • 33. <td rowspan=”3” <td ROWSPAN=”3”
  • 34. Valores dos atributos
  • 35. <td rowspan=”3” <td rowspan=3
  • 36. Sintaxe para atributos
  • 37. <input checked=”checked” /> <input checked /> <input realonly=”readonly” /> <input readonly /> <textarea multiple=”multiple” /> <textarea multiple /> ... ...
  • 38. Pontos de âncoras
  • 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. Atributo alt para imagens
  • 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. Código gerado por editores
  • 43. Editores WYSIWYG “O que você vê é o que você tem” onmouseover=function() onMouseOver=function()
  • 44. Codificação de caracteres reservados
  • 45. Entidades HTML Comércio &amp; Exportação Comércio & Exportação
  • 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. Exemplo Código Esta apresenta&ccedil;&atilde;o &eacute; sobre padr&otild;es web. Visual Esta apresentação é sobre padrões web.
  • 48. Documento XHTML
  • 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. DOCTYPE Document Type Definition Especifica a sintaxe e a gramática SGML usada para a linguagem de marcação XHTML
  • 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
  • 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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  • 55. Web Semântica
  • 56. Semântica É a parte da linguística que estuda o significado das palavras.
  • 57. XHTML Marcação semântica Tags são usadas considerando seu significado, destino e função
  • 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. Ferramenta certa para o trabalho certo
  • 60. CSS Cascading Style Sheet
  • 61. Sintaxe CSS Composta por seletor e declaração seletor { propriedade : valor; }
  • 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. seletor { propriedade: valor; } Elemento <p> - parágrafo p { color: #000000; background-color: #ff0000; font-style: italic; text-align: center; }
  • 64. Agrupamento de Seletores
  • 65. h1 { color: red; } h2 { color: red; } p { color: red; } agrupando... h1, h2, p { color: red; }
  • 66. Classe x Id
  • 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. Seletor Classe
  • 69. <h4 class=”titulo”> Cabeçalho nível 4 </h4> h4.titulo { color: red; } .titulo { color: red; }
  • 70. Seletor Classe outro exemplo
  • 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. Seletor ID
  • 73. <div id=”principal”></div> <div id=”secundario”></div> div#principal { color: black; } #principal { color: black; } #secundario { color: red; }
  • 74. Seletor Composto
  • 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. Vincular Folhas de Estilo
  • 77. Inline <p style=”width:200px; color:red; background-color:#ccc; font-size:1.8em;”> Texto com estilo inline. </p>
  • 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. Arquivo Linkado ... <head> ... <link rel=”stylesheet” type=”text/css” href=”estilo.css” media=”all” /> </head> <body> ...
  • 80. Arquivo Importado ... <head> ... <style type=”text/css”> @import url(“estilos.css” screen; </style> </head> <body> ...
  • 81. Validadores W3C
  • 82. http://validator.w3.org/
  • 83. http://jigsaw.w3.org/css-validator/
  • 84. http://htmlplayground.com/
  • 85. Acessibilidade
  • 86. Boa marcação de Conteúdo para Leitores de Tela
  • 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/