Web Semântica<br />HTML e CSS<br />
O que é?<br />A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não some...
Por quê seguir?<br />Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse ...
Mas e o HTML e o XHTML?<br />HTML é uma linguagem de marcação utilizada para produzir páginas na Web.<br />XHTML é uma ref...
Como criar?<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr...
Usando a herança<br />Documentos HTML são hierarquicamente estruturados.<br />Há um ancestral, o elemento de nível mais al...
Utilizando a semântica<br />Para construir uma página em XHTML, devem se seguir os padrões W3C.<br />Exemplo: <br /><ul><l...
Todo valor dos atributos devem estar entre “” (alt=”Olá”),
As tags simples devem ser fechadas com “/>” (<imgsrc=”foto.gif” alt=”eu” />).</li></li></ul><li>Utilizando a semântica<br ...
CSS, por que usar?<br />A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, a ap...
Como usar CSS<br />A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abai...
Como usar CSS<br />É comum, iniciar a folha de estilo com uma marcação de reset, para igualar as propriedades em todos os ...
Posicionamento em CSS<br />Todo o comportamento da CSS, depende de como o html foi marcado.<br />Para posicionarmos elemen...
Posicionamento em CSS<br />Position:absolute, posiciona o elemento na página de acordo com as cordenadas de top, left, rig...
Exemplo de CSS<br />/*atribuindo caracteristica para a tag <h1></h1>*/<br />h1{<br />color:#008000;<br />font-weight: bold...
Exemplo de CSS<br />/*atribuindo caracteristica para a tag <body>*/<br />body {<br />background-color:#87ceeb;<br />backgr...
Exemplo de CSS<br />/*definindo uma classe para atribuir uma caracteristica diferente ao texto em determinada parte*/<br /...
Upcoming SlideShare
Loading in …5
×

XHTML, CSS e Semântica

1,906 views
1,748 views

Published on

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

No Downloads
Views
Total views
1,906
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XHTML, CSS e Semântica

  1. 1. Web Semântica<br />HTML e CSS<br />
  2. 2. O que é?<br />A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas.<br />Seu objetivo é melhorar a Web através de padrões e ferramentas que tornem seu conteúdo claro e de fácil manutenção.<br />
  3. 3. Por quê seguir?<br />Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse organizada de uma maneira sensata.<br />
  4. 4. Mas e o HTML e o XHTML?<br />HTML é uma linguagem de marcação utilizada para produzir páginas na Web.<br />XHTML é uma reformulação do HTML 4, baseada em xml.<br />É um processo de padronização para a exibição das páginas em diversos dispositivos.<br />
  5. 5. Como criar?<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><htmlxmlns="http://www.w3.org/1999/xhtml"> <br /><head> <br /><metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><title>Hello World</title><br /> </head> <br /><body> </body><br /> </html><br />
  6. 6. Usando a herança<br />Documentos HTML são hierarquicamente estruturados.<br />Há um ancestral, o elemento de nível mais alto (pai) do qual os demais elementos (filhos) são descendentes. <br />Os elementos filhos herdam as características do elemento pai. Por exemplo: cores e tamanhos de letras.<br />Assim numa folha de estilos as regras de estilo CSS para o elemento pai serão herdadas pelos elementos filhos. <br />A herança é passada do elemento pai para os filhos e estes se tiverem filhos também herdarão e assim por diante, seguindo a herança até o elemento de menor nível.<br />
  7. 7. Utilizando a semântica<br />Para construir uma página em XHTML, devem se seguir os padrões W3C.<br />Exemplo: <br /><ul><li>Todas as tags e seus atributos devem ser escritos em letra minúscula.
  8. 8. Todo valor dos atributos devem estar entre “” (alt=”Olá”),
  9. 9. As tags simples devem ser fechadas com “/>” (<imgsrc=”foto.gif” alt=”eu” />).</li></li></ul><li>Utilizando a semântica<br />Devemos ainda lembrar que, para todo tipo de conteúdo inserido na página existe umaatag específica.<br />Para o título principal do site, usamos <h1><br />Para títulos secundários, <h3><br />Todo texto deve ser inserido dentro da tag <p> e/ou <span><br />Para links utilizamos < a href=“” title=“”></a><br />Lista de tags:<br />http://www.w3schools.com/tags/default.asp<br />
  10. 10. CSS, por que usar?<br />A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, a apresentação do documento.<br />Ou seja, o html marca, o css transforma.<br />
  11. 11. Como usar CSS<br />A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo:<br />seletor {propriedade: valor;}<br />Ex: p {font-size:10px;}<br />A regra acima, aplica tamanho de 10px a todos os elementos <p> contidos dentro da página html.<br />
  12. 12. Como usar CSS<br />É comum, iniciar a folha de estilo com uma marcação de reset, para igualar as propriedades em todos os browsers.<br />Ex: *{margin:0; padding:0; font-family:Arial;}<br />A utilização de classes nos elementos HTML é aconselhada, pois torna-se mais fácil o acesso a determinada tag.<br />A força de um ID, é maior ao de uma class, na cascata da CSS.<br />
  13. 13. Posicionamento em CSS<br />Todo o comportamento da CSS, depende de como o html foi marcado.<br />Para posicionarmos elementos na tela, existem básicamente dois meios.<br />Position:absolute e position:relative(default)<br />
  14. 14. Posicionamento em CSS<br />Position:absolute, posiciona o elemento na página de acordo com as cordenadas de top, left, right e/ou bottom, dependendo da herança do elemento pai;<br />Position:relative, posiciona o elemento a esquerda ou direita, dependendo da herança do elemento pai.<br />Utiliza-se clear:both para limpar a herança do float.<br />
  15. 15. Exemplo de CSS<br />/*atribuindo caracteristica para a tag <h1></h1>*/<br />h1{<br />color:#008000;<br />font-weight: bold;<br />}<br />
  16. 16. Exemplo de CSS<br />/*atribuindo caracteristica para a tag <body>*/<br />body {<br />background-color:#87ceeb;<br />background-image:url('imagem/fundo.jpg');<br />background-repeat:no-repeat;<br /> /*para a imagem de fundo não repetir (no-repeat), <br />para repetir só na horizontal(repeat-x), <br />para repetir na vertical (repeat-y)*/<br />background-attachment:fixed;<br /> /*para a imagem de fundo ficar "fixa" sem repetir*/<br />}<br />
  17. 17. Exemplo de CSS<br />/*definindo uma classe para atribuir uma caracteristica diferente ao texto em determinada parte*/<br />.pazul {<br />color:#0000ff;<br />font-size:16px;<br />font-style:italic;<br />text-align:center;<br />font-family:arial;<br />}<br />
  18. 18. Bibliografia<br />http://www.pinceladasdaweb.com.br/blog/2006/05/17/o-que-e-a-web-semantica/<br />http://www.tableless.com.br/a-web-semantica<br />https://addons.mozilla.org/en-US/firefox/addon/249/<br />http://www.maujor.com<br />

×