Padrões de
Implementação de
   Interfaces
Um pouquinho de História...


Em 1989,
Tim Berners-Lee criou a
World Wide Web.
Lançamento oficial foi em
6 de agosto de 199...
World Wide Web

   Sistema de documentos de hipertexto interligados.

   A navegação entre páginas web, se dá por links.

...
World Wide Web Consortium




                           “   To lead the World Wide Web to its full
                      ...
WaSP
   Web Standards Projects


   Grupo formado em 1998
para promover os Padrões Web
Padrões
                   XML
XHTML      DOM
                 HTML
  WSDL   CSS
                 SVG
  SOAP     RDF
Nova Proposta


Divisão em Camadas
Padrão HTML

           SGML


      base do padrão XML
 (Extensible Markup Language)

1997 - W3C endossou o HTML 4
Padrão XHTML

     eXtensible HyperText Markup Language

documentos web compatíveis com aplicações XML


        2000 - en...
XHTML é baseado em XML


   HTML4 = XHTML1
Documentos são lidos,
     visualizados e editados
em qualquer ferramenta XML
Interoperabilidade
É possível criar novas
    marcações (tags)
Há compatibilidade com
  diversos navegadores
Acessibilidade
Código mais limpo
Melhores resultados nos
  mecanismos de busca
Arquivo Menor:
Carregamento mais rápido,
      economia de banda
Facilidade de manutenção
Diferenças entre
 HTML e XHTML
Documentos devem ser
   bem formatados
<html>
  <head>
    <title> </title>
  </head>

  <body>
    <p> ... </p>
  </body>

</html>                regra obrigató...
Tags em letras
 minúsculas
proibido em XHTML
<div>           <DIV>
 <p>texto</p>    <P>texto</P>
</div>          </DIV>
Tags devem ser
  aninhadas
 corretamente
proibido em XHTML
<div>              <div>
 <p>                <p>
  <em>               <em>
    Texto              Texto
...
Uso de tags de
 fechamento
proibido em XHTML
<p>
 Um parágrafo       <p>
</p>                 Um parágrafo

<li>                <li>
 Um item de list...
Elementos vazios
(órfãos) devem ser fechados
<br />
<hr />                      proibido em XHTML
<img src=”imagem.gif”
alt=”minha imagem” />
                         ...
Sintaxe dos
 atributos
Nome dos atributos
<td rowspan=”3”   <td ROWSPAN=”3”
Valores dos atributos
<td rowspan=”3”   <td rowspan=3
Sintaxe para atributos
<input checked=”checked” />        <input checked />
<input realonly=”readonly” />      <input readonly />
<textarea multi...
Pontos de âncoras
<a name=”topo”>Início</a>

(Para HTML)


<a id=”topo”>Início</a>

(Para XHTML)



<a id=”topo” name=”topo”>Início</a>
(Par...
Atributo alt para
    imagens
regra obrigatória


<img src=”imagem.gif” alt=”minha imagem” />
(Para XHTML)




<img src=”imagem.gif” alt=”     ” />

(Pa...
Código gerado
 por editores
Editores WYSIWYG
        “O que você vê é o que você tem”



onmouseover=function()     onMouseOver=function()
Codificação de caracteres
      reservados
Entidades HTML


Comércio &amp; Exportação   Comércio & Exportação
Entidades HTML
Caractere   Nome da Entidade   Descrição em inglês

    “            &quot;              quotation mark

  ...
Exemplo
Código
Esta apresenta&ccedil;&atilde;o &eacute; sobre padr&otild;es web.




Visual
Esta apresentação é sobre padr...
Documento XHTML
<!DOCTYPE blablablablabla>
<html xmlns=”http://www.w3c.org/1999/xhtml”
xml:lang=”pt-br” lang=”pt-br”>
  <head>
     <title...
DOCTYPE
Document Type Definition


     Especifica a sintaxe e a
   gramática SGML usada para a
  linguagem de marcação XHTML
DOCTYPE Strict
Mais rígida das declarações:

       itens de apresentação dentro dos elementos
       <div align=”center”>...
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
DOCTYPE Transitional
 Declarações mais flexíveis que a anterior:

          itens de apresentação dentro dos elementos
    ...
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transiti...
Web Semântica
Semântica

É a parte da
linguística que
estuda o
significado das
palavras.
XHTML
Marcação semântica




Tags são usadas
considerando seu
significado,
destino e função
Alguns Elementos
<h1> <h2> .... até <h6> para cabeçalhos
<p> para parágrafos
<strong> para maior importância
<small> para ...
Ferramenta certa
para o trabalho certo
CSS
Cascading Style Sheet
Sintaxe CSS

Composta por
seletor e declaração



seletor {
 propriedade : valor;
 }
seletor { propriedade: valor; }


seletor: é o alvo da regra CSS

declaração: parâmetros de estilização

propriedade: cara...
seletor { propriedade: valor; }


       Elemento <p> - parágrafo

   p {
    color: #000000;
    background-color: #ff000...
Agrupamento de
  Seletores
h1 { color: red; }
 h2 { color: red; }
 p { color: red; }

agrupando...


h1, h2, p { color: red; }
Classe x Id
Classe

Seletor de classificação
                                            ID
Vários elementos          Seletor de identi...
Seletor Classe
<h4 class=”titulo”>
 Cabeçalho nível 4
</h4>



h4.titulo { color: red; }

.titulo { color: red; }
Seletor Classe
 outro exemplo
<p class=”introducao”>
 Texto de introdução da minha notícia.
</p>

p.introducao {
 color: black;
 font-size: 12px;
 width...
Seletor ID
<div id=”principal”></div>

<div id=”secundario”></div>


div#principal { color: black; }

#principal { color: black; }

#...
Seletor
Composto
<div id=”principal”>
 <p class=”descricao”>
  <strong>Nome do produto</strong>
  Descrição do produto.
 </p>
</div>


div#...
Vincular
Folhas de Estilo
Inline

<p style=”width:200px; color:red;
background-color:#ccc; font-size:1.8em;”>
  Texto com estilo inline.
</p>
Incorporado
...
<head>
...
 <style type=”text/css”media=”screen”>
   body {
    margin: 0;
    padding: 0;
    font-size: ...
Arquivo Linkado
...
<head>
...
 <link rel=”stylesheet” type=”text/css”
 href=”estilo.css” media=”all” />

</head>
<body>
....
Arquivo Importado
...
<head>
...
 <style type=”text/css”>
  @import url(“estilos.css” screen;
 </style>

</head>
<body>
...
Validadores W3C
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://htmlplayground.com/
Acessibilidade
Boa marcação de
 Conteúdo para
 Leitores de Tela
Referências
http://www.w3c.br/
http://www.w3.org/TR/xhtml1/
http://jigsaw.w3.org/css-validator/
http://www.w3.org/Style/CS...
XHTML Básico
XHTML Básico
XHTML Básico
XHTML Básico
Upcoming SlideShare
Loading in...5
×

XHTML Básico

3,566

Published on

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,566
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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/

×