SlideShare une entreprise Scribd logo
1  sur  17
Web Semântica HTML e CSS
O que é? 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. Seu objetivo é melhorar a Web através de padrões e ferramentas que tornem seu conteúdo claro e de fácil manutenção.
Por quê seguir? Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse organizada de uma maneira sensata.
Mas e o HTML e o XHTML? HTML é uma linguagem de marcação utilizada para produzir páginas na Web. XHTML é uma reformulação do HTML 4, baseada em xml. É um processo de padronização para a exibição das páginas em diversos dispositivos.
Como criar? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <htmlxmlns="http://www.w3.org/1999/xhtml">  <head>  <metahttp-equiv="Content-Type" content="text/html;  charset=utf-8" />  <title>Hello World</title>  </head>  <body> </body>  </html>
Usando a herança Documentos HTML são hierarquicamente estruturados. Há um ancestral, o elemento de nível mais alto (pai) do qual os demais elementos (filhos) são descendentes.  Os elementos filhos herdam as características do elemento pai. Por exemplo: cores e tamanhos de letras. Assim numa folha de estilos as regras de estilo CSS para o elemento pai serão herdadas pelos elementos filhos.  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.
Utilizando a semântica Para construir uma página em XHTML, devem se seguir os padrões W3C. Exemplo:  ,[object Object]
Todo valor dos atributos devem estar entre “” (alt=”Olá”),
As tags simples devem ser fechadas com “/>” (<imgsrc=”foto.gif” alt=”eu” />).,[object Object]
CSS, por que usar? A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, a apresentação do documento. Ou seja, o html marca, o css transforma.
Como usar CSS A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo: seletor {propriedade: valor;} Ex: p {font-size:10px;} A regra acima, aplica tamanho de 10px a todos os elementos <p> contidos dentro da página html.
Como usar CSS É comum, iniciar a folha de estilo com uma marcação de reset, para igualar as propriedades em todos os browsers. Ex: *{margin:0; padding:0; font-family:Arial;} A utilização de classes nos elementos HTML é aconselhada, pois torna-se mais fácil o acesso a determinada tag. A força de um ID, é maior ao de uma class, na cascata da CSS.
Posicionamento em CSS Todo o comportamento da CSS, depende de como o html foi marcado. Para posicionarmos elementos na tela, existem básicamente dois meios. Position:absolute e position:relative(default)
Posicionamento em CSS 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; Position:relative, posiciona o elemento a esquerda ou direita, dependendo da herança do elemento pai. Utiliza-se clear:both para limpar a herança do float.
Exemplo de CSS /*atribuindo caracteristica para a tag <h1></h1>*/ h1{ color:#008000; font-weight: bold; }
Exemplo de CSS /*atribuindo caracteristica para a tag <body>*/ body { background-color:#87ceeb; background-image:url('imagem/fundo.jpg'); background-repeat:no-repeat;  /*para a imagem de fundo não repetir (no-repeat),  para repetir só na horizontal(repeat-x),  para repetir na vertical (repeat-y)*/ background-attachment:fixed;  /*para a imagem de fundo ficar "fixa" sem repetir*/ }
Exemplo de CSS /*definindo uma classe para atribuir uma caracteristica diferente ao texto em determinada parte*/ .pazul { color:#0000ff; font-size:16px; font-style:italic; text-align:center; font-family:arial; }

Contenu connexe

Tendances

COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLRenato Melo
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
01-Introdução HTML - DDW II
01-Introdução HTML - DDW II01-Introdução HTML - DDW II
01-Introdução HTML - DDW IIEvelyn Ramos
 
HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01Renato Melo
 
Css na Prática - Webdesign - 2020-02
Css na Prática - Webdesign - 2020-02Css na Prática - Webdesign - 2020-02
Css na Prática - Webdesign - 2020-02Renato Melo
 
Css na Prática - Webdesign - 2021-01
Css na Prática - Webdesign - 2021-01Css na Prática - Webdesign - 2021-01
Css na Prática - Webdesign - 2021-01Renato Melo
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantesWelington Carvalho
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01Renato Melo
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1marioreis
 
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Renato Melo
 
Webdesign 02- HTML
Webdesign 02- HTMLWebdesign 02- HTML
Webdesign 02- HTMLRenato Melo
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 

Tendances (18)

Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
Webpages
WebpagesWebpages
Webpages
 
01-Introdução HTML - DDW II
01-Introdução HTML - DDW II01-Introdução HTML - DDW II
01-Introdução HTML - DDW II
 
HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01HTML - Webdesign - 2021-01
HTML - Webdesign - 2021-01
 
Css na Prática - Webdesign - 2020-02
Css na Prática - Webdesign - 2020-02Css na Prática - Webdesign - 2020-02
Css na Prática - Webdesign - 2020-02
 
Css na Prática - Webdesign - 2021-01
Css na Prática - Webdesign - 2021-01Css na Prática - Webdesign - 2021-01
Css na Prática - Webdesign - 2021-01
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
 
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
Html para e-mail marketing - Aula 02 - Webdesign - 2020-01
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Webdesign 02- HTML
Webdesign 02- HTMLWebdesign 02- HTML
Webdesign 02- HTML
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
Aula 2
Aula 2Aula 2
Aula 2
 

Similaire à XHTML, CSS e Semântica

Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTMLNuno Simaria
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSNuno Simaria
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoLuisFalco8
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Eduardo Bertolucci
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Leandro Rezende
 

Similaire à XHTML, CSS e Semântica (20)

Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
W3 c
W3 cW3 c
W3 c
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Css basico
Css basicoCss basico
Css basico
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 

XHTML, CSS e Semântica

  • 2. O que é? 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. Seu objetivo é melhorar a Web através de padrões e ferramentas que tornem seu conteúdo claro e de fácil manutenção.
  • 3. Por quê seguir? Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse organizada de uma maneira sensata.
  • 4. Mas e o HTML e o XHTML? HTML é uma linguagem de marcação utilizada para produzir páginas na Web. XHTML é uma reformulação do HTML 4, baseada em xml. É um processo de padronização para a exibição das páginas em diversos dispositivos.
  • 5. Como criar? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title> </head> <body> </body> </html>
  • 6. Usando a herança Documentos HTML são hierarquicamente estruturados. Há um ancestral, o elemento de nível mais alto (pai) do qual os demais elementos (filhos) são descendentes. Os elementos filhos herdam as características do elemento pai. Por exemplo: cores e tamanhos de letras. Assim numa folha de estilos as regras de estilo CSS para o elemento pai serão herdadas pelos elementos filhos.  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.
  • 7.
  • 8. Todo valor dos atributos devem estar entre “” (alt=”Olá”),
  • 9.
  • 10. CSS, por que usar? A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, a apresentação do documento. Ou seja, o html marca, o css transforma.
  • 11. Como usar CSS A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo: seletor {propriedade: valor;} Ex: p {font-size:10px;} A regra acima, aplica tamanho de 10px a todos os elementos <p> contidos dentro da página html.
  • 12. Como usar CSS É comum, iniciar a folha de estilo com uma marcação de reset, para igualar as propriedades em todos os browsers. Ex: *{margin:0; padding:0; font-family:Arial;} A utilização de classes nos elementos HTML é aconselhada, pois torna-se mais fácil o acesso a determinada tag. A força de um ID, é maior ao de uma class, na cascata da CSS.
  • 13. Posicionamento em CSS Todo o comportamento da CSS, depende de como o html foi marcado. Para posicionarmos elementos na tela, existem básicamente dois meios. Position:absolute e position:relative(default)
  • 14. Posicionamento em CSS 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; Position:relative, posiciona o elemento a esquerda ou direita, dependendo da herança do elemento pai. Utiliza-se clear:both para limpar a herança do float.
  • 15. Exemplo de CSS /*atribuindo caracteristica para a tag <h1></h1>*/ h1{ color:#008000; font-weight: bold; }
  • 16. Exemplo de CSS /*atribuindo caracteristica para a tag <body>*/ body { background-color:#87ceeb; background-image:url('imagem/fundo.jpg'); background-repeat:no-repeat; /*para a imagem de fundo não repetir (no-repeat), para repetir só na horizontal(repeat-x), para repetir na vertical (repeat-y)*/ background-attachment:fixed; /*para a imagem de fundo ficar "fixa" sem repetir*/ }
  • 17. Exemplo de CSS /*definindo uma classe para atribuir uma caracteristica diferente ao texto em determinada parte*/ .pazul { color:#0000ff; font-size:16px; font-style:italic; text-align:center; font-family:arial; }