Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

2,022 views

Published on

Published in: Technology
  • Be the first to comment

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 />

×