XHtml

554 views
488 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
554
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XHtml

  1. 1. Unifesp - Cursos de Verão 2010Luiz GustavoSoares@luizgrs
  2. 2. XHTML?AcessoTagsAtributos<tags>EntidadesFuturoReferência
  3. 3. HTML + XMLeXtensible HyperText Markup LanguageXMLW3CTexto bem organizado
  4. 4. Transitional;Strict;Frameset;
  5. 5. Camadas;Função;Interação;
  6. 6. Browsers;Móvel;Leitores de Tela;Crawlers;
  7. 7. Principais Elementos ;Marcam;Semântica;Tudo que abre fecha;Abriu antes fecha depois;
  8. 8. <body> <span> <ul> <div><img> <p> <head > <thead> <h5><h1> <ol> <table>
  9. 9. Características;Propriedades;Minúsculos;
  10. 10. id <div id=“peixe”></div>class <div class=“botao”></div>style <div style=“color:#F00;”></div>title <div title=“Clique Aqui”></div>
  11. 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Título</title></head><body></body>
  12. 12. Pontos importantes do documento;Links para outros documentos;
  13. 13. Hypertext Reference; Destino do link;<a href=“http://www.google.com”>Google</a>
  14. 14. Nome da âncora; Bookmark;<a name=“cap1”>Cap&iacute;tulo 1</a>
  15. 15. Onde abrir o link;<a href=“http://www.google.com” target=“_blank”>Google</a>
  16. 16. Imagem;
  17. 17. Source; Imagem que será exibida;<img src=“smiley_feliz.gif” />
  18. 18. Texto Alternativo;<img src=“smiley_feliz.gif” alt=“: D” /> : D
  19. 19. Parágrafos;<p>Texto do par&aacute;grafo</p>
  20. 20. Seções, divisões; Agrupamento;<div><p>Par&aacute;grafo 1</p><p>Par&aacute;grafo 2</p></div>
  21. 21. Tabela;Dados, estatísticas,...
  22. 22. Linhas da tabela;
  23. 23. Células da tabela;
  24. 24. <table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
  25. 25. Numérico; Espaço entre células;<table cellspacing=“0”><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
  26. 26. Células da tabela;Semântica!
  27. 27. colspan Numérico Mesclar colunas;
  28. 28. <tr><td colspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
  29. 29. rowspan Numérico Mesclar linhas;
  30. 30. <tr><td rowspan="2"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
  31. 31. <tr><td rowspan="2“ colspan=“2”></td><td></td><td></td></tr><tr><td></td><td></td></tr>
  32. 32. Agrupar cabeçalho;<table><thead><tr><th>Nome</th><th>Idade</th></tr></thead></table>
  33. 33. Agrupar conteúdo;<table><tbody><tr><td>Luiz</td><td>22</td></tr></tbody></table>
  34. 34. Agrupar o rodapé; Deve aparecer antes do <tbody>!<table><tfoot><tr><td>Média Idade</td><td>22</td></tr></tfoot><tbody>...</tbody>
  35. 35. Título da tabela; Deve ser primeiro filho da <table>!<table><caption>Estudantes</caption><tbody>...</tbody></table>
  36. 36. <table><caption>Estudantes</caption><thead><tr><th>Nome</th><th>Idade</th></tr></thead><tfoot><tr><td>Média:</td><td>21</td></tr></tfoot><tbody><tr><td>Luiz Gustavo</td><td>22</td></tr><tr><td>Bozo</td><td>20</td></tr></tbody></table>
  37. 37. Cabeçalho;<h1>T&iacute;tulo Principal</h1><h2>Sub-t&iacute;tulo</h2><h3>...</h3>
  38. 38. Lista de itens sem ordenação;<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
  39. 39. Lista de itens ordenados;<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ol>
  40. 40. Colher informações do usuário;<input />
  41. 41. buttoncheckboxfilehiddenpassword
  42. 42. radioresetsubmittextimage
  43. 43. Numérico; Máximo de caracteres;<input type=“text” maxlength=“10” />
  44. 44. Somente Leitura;<input type=“text” readonly=“readonly” />
  45. 45. Marcado;<input type=“radio” checked=“checked” />
  46. 46. Caminho da Imagem;<input type=“image” src=“search.gif” />
  47. 47. Texto Alternativo;<input type=“image” src=“search.gif” alt=“Search” />
  48. 48. Valor contido ou representado pelo campo;<input type=“...” value=“texto” />
  49. 49. Identifica o campo ao submetê-lo;<input type=“...” name=“nome” />
  50. 50. Desabilita os campos;<input type=“...” disabled=“disabled” />
  51. 51. Ordem do foco;<input type=“...” tabindex=“0” />
  52. 52. Lista de Opções;<select><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
  53. 53. Itens visíveis simultaneamente;<select size=“2”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
  54. 54. Selecionar mais de uma opção;<select multiple=“multiple”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
  55. 55. Não permite modificações;<select disabled=“disabled”><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>
  56. 56. Valor representado pela opção;<select><option value=“1”>Item 1</option><option value=“2”>Item 2</option><option value=“3”>Item 3</option></select>
  57. 57. Selecionado;<select><option>Item 1</option><option>Item 2</option><option selected=“selected”>Item 3</option></select>
  58. 58. Agrupa <option>s;<select><optgroup label=“Terrestre”><option>Carro</option><option>Velotrol</option></optgroup><optgroup label=“A&eacute;reo”><option>Avi&atilde;o</option><option>Helic&oacute;ptero</option></optgroup>
  59. 59. Caixa de texto para várias linhas;<textarea rows=“3” cols=“10”></textarea>
  60. 60. cols Colunas de texto visíveis;rows Linhas de texto visíveis;
  61. 61. Atributos que definem simplesmenteaparência?
  62. 62. Agrupa campos de um formulário;<fieldset><legend>Requisitante</legend><label..>Nome:</label><input type=“text” /><label..>Idade:</label><input type=“text” /></fieldset><fieldset><legend>Cônjuge</legend><label..>Nome:</label><input type=“text” /><label..>Idade:</label><input type=“text” />
  63. 63. Formulário; Contém campos;<form><input … /><input … /></form>
  64. 64. URL que receberá os dados;<form action=“pagina.html”><input … /><input … /></form>
  65. 65. Como transmitir os dados; get post<form action=“pagina.html” method=“get” ><input … /><input … /></form>
  66. 66. Como os dados serão codificados; application/x-www-form-urlencoded multipart/form-data text/plain <form action=“pagina.html” enctype=“multipart/form- data” ><input … /><input … /></form>
  67. 67. Rótulos de campos de formulário;<label>Nome:</label> <input type=“text” />
  68. 68. A qual campo o label está ligado;<label for=“txtnome”>Nome:</label> <inputtype=“text” id=“txtnome” />
  69. 69. Caracteres Reservados;Difíceis de digitar;Símbolos;
  70. 70. Caracter Núm. Entidade Nome Entidade Descrição" " &quot; quotation mark ' &apos; (IE não) apostrophe& & &amp; ampersand< < &lt; less-than> > &gt; greater-thanÅ Å &Aring; capital a, ringÆ Æ &AElig; capital aeÇ Ç &Ccedil; capital c, cedillaÈ È &Egrave; capital e, grave accent¿ ¿ &iquest; inverted question mark♣ ♣ &clubs; club‰ ‰ &permil; per milleζ ζ &zeta; zeta
  71. 71. <video><canvas><input type=“email|range” />, required;<audio><progress>
  72. 72. www.w3c.orghttp://www.w3schools.com/www.maujor.com
  73. 73. Luiz GustavoSoares@luizgrshttp://luizsoares.netluiz@luizsoares.

×