SlideShare uma empresa Scribd logo
XHTML
XHTML
 HTML
 XML
DIFERENÇAS ENTRE XHTML E HTML
 Documentos devem ser bem formados
 Todas as Tags devem ser escritas com letras
minúsculas
 Tags devem estar convenientemente aninhadas
 Uso de Tags de fechamento é obrigatório
 Elementos vazios devem ser fechados
 Diferença na sintaxe dos atributos
DOCUMENTOS DEVEM SER BEM FORMADOS
 HTML navegadores interpretam e resolvem erros
de marcação.
 Em XHTML não são admitidos erros na marcação
 Estrutura Básica – elemento raiz <html>
 <html>
 <head>
 …
 </head>
 <body>
 …
 </body>
 </html>
TODAS AS TAGS DEVEM SER ESCRITAS COM
LETRAS MINÚSCULAS
 XML é sensível ao tamanho da caixa de fonte, logo
XHTML também é.
 Uso obrigatório de letras minúsculas
 Errado:
 <DIV><P> Aqui um texto</P></DIV>
 Certo:
 <div><p>Aqui um texto</p></div>
TAGS DEVEM SER CONVENIENTEMENTE
ANINHADAS
 A primeira tag a ser aberta é a última a ser fechada, a
segunda é a penúltima e assim por diante.
 Certo:
 <div><p><em>Aqui um texto enfatizado</em></p></div>
 Errado:
 <div><em><p>Aqui um texto enfatizado</em></p></div>
USO DE TAGS DE FECHAMENTO É
OBRIGATORIO
 Em HTML é possível omitir a tag de fechamento de
determinados elementos, tais como para as tags
<p><li>. XML não permite omissão de qualquer tag de
fechamento. Todo elemento tem que ter tag de
fechamento.
 Errado:
 <p>Um paragráfo.
 <li>Um item de lista.
 Certo:
 <p>Um paragráfo.</p>
 <li>Um item de lista</li>
ELEMENTOS VAZIOS DEVEM SER FECHADOS
 Elementos vazios devem ter uma tag de fechamento, ou a
tag de abertura deve terminar com />
 Errado:
 <br>
 <hr>
 <img src=“imagem.jpg” alt=“minha imagem”>
 Certo: (Opção 1 – usar tag de fechamento)
 <br></br>
 <hr></hr>
 <img src=“imagem.jpg” alt=“minha imagem”></img>
 Certo: (Opção 2 – usar tag de fechamento)
 <br />
 <hr />
 <img src=“imagem.jpg” alt=“minha imagem” />
DIFERENÇA NA SINTAXE DOS ATRIBUTOS
 Nomes de Atributos
 Errado:
 <td ROWSPAN=“3”>
 Certo:
 <td rowspan=“3”>
 Valores dos atributos
 Errado:
 <td rowspan=3>
 Certo:
 <td rowspan=“3”>
 Sintaxe para atributos
 Errado
 <input checked />
 Certo:
 <input checked=“checked” />
ELEMENTOS OBRIGATÓRIOS EM UM
DOCUMENTO XHTML
 É obrigatória a declaração do DOCTYPE, assim
como das tags <html><head><title><body>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
PARA QUE SERVE O DOCTYPE?
 Serve para indicar a entidade normativa da
linguagem, o caminho para o navegador encontrar as
diretrizes que regulamentam a sintaxe e as entidades
válidas no documento e baseado nelas, renderizar o
documento.
TIPOS DE DOCTYPE
 São três tipos de DOCTYPE para XHTML:
Strict, Transitional e Frameset.
 Strict:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 Transitional:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 Frameset
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
MODELO DE DOCUMENTO XHTML
 <?xml version=“1.0” encoding=“UTF-8” ?
 <XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC “-
//W3C//DTD XHTML; 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt-
br” lang=“pt-br”>
<head>
<title>Viação São José | horários de ônibus</title>
…metatags,estilos,scripts
</head>
<body>
… Conteúdo da página
</body>
</html>
ELEMENTO META
 Este elemento destina-se a fornecer informações
adicionais sobre o documento.
 A sintaxe para escrever um elemento meta, consiste em
duas partes. A primeira define um nome para o
metadado e a segunda para seu conteúdo. O nome é
definido pelo seu atributo name ou http-equiv e o
conteúdo pelo atributo content.
 <meta name=“author” content=“Fulano da Silva” />
EXEMPLOS DE ELEMENTOS META
 Informar o tipo de conteúdo do documento é texto HTML
e a codificação é UTF-8:
 <meta http-equiv=“Content-Type” content=“text/html”
charset=“UTF-8” />
 Para informar que o idioma principal do documento é o
português:
 <meta name=“language” content=“pt-br” />
 Para descrever o conteúdo de suas páginas usa-se:
 <meta name=“description” content=“Tutoriais sobre
CSS, XHTML, HTML, acessibilidade e padões web.” />
EXEMPLOS DE ELEMENTOS META
 Para relacionar as palavras-chave do conteúdo do documento
usa-se:
 <meta name=“keywords”
content=“css, html, xhtml, webstandards, xml.” />
 Para informar aos robôs de busca que os conteúdos da
página podem ser indexados e os links devem ser seguidose
examinados use:
 <meta name=“robots” content=“all” />
CARACTERES E ENTIDADES
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt-br” lang=“pt-
br”>
<head>
<title>Titulo do Template</title>
<meta name=“description” content=“Meu template para XHTML 1.0
Transitional.” />
<meta name=“keywords” content=“relação de palavras chave”
/>
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
<meta name=“language” content=“pt-br” />
<meta name=“author” content=“Meu nome” />
</head>
<body>
… Conteúdo da página
</body>
</html>
CODIFICAÇÃO DE CARACTERES
 Iso-8859-1
 Utf-8
CODIFICAÇÃO DE CARACTERES
 Primeiro caso:
 Bloco de Notas
 UTF-8 na tag meta
 ANSI
 Segundo caso:
 Bloco de Notas
 Iso-8859-1 na tag meta
 UTF-8
 Terceiro caso:
 Bloco de Notas
 UTF-8 na tag meta
 UTF-8
PRIMEIRO CASO
SEGUNDO CASO
TERCEIRO CASO
VALIDANDO SEU TEMPLATE W3C
 http://validator.w3.org/#validate_by_upload+with_o
ptions

Mais conteúdo relacionado

Mais procurados

Aula 09
Aula 09Aula 09
Aula 04
Aula 04Aula 04
Aula 03
Aula 03Aula 03
Html aula 1
Html aula 1Html aula 1
Html aula 1
Sedu
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Aula 05
Aula 05Aula 05
HTML básico
HTML básicoHTML básico
HTML básico
Karen Sica
 
Html Básico
Html BásicoHtml Básico
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
Sergio Finamore
 
Html básico
Html básicoHtml básico
Html básico
Devmedia
 
Aula02 webdesign
Aula02 webdesignAula02 webdesign
Aula 07
Aula 07Aula 07
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
Herbet Ferreira Rodrigues
 
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLAula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
Messias Batista
 
HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1
Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
Israel Messias
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
Pablo Sanches
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
Willian Magalhães
 
Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03
Leandro Rezende
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
Vasco Ferreira
 

Mais procurados (20)

Aula 09
Aula 09Aula 09
Aula 09
 
Aula 04
Aula 04Aula 04
Aula 04
 
Aula 03
Aula 03Aula 03
Aula 03
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Aula 05
Aula 05Aula 05
Aula 05
 
HTML básico
HTML básicoHTML básico
HTML básico
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
Html básico
Html básicoHtml básico
Html básico
 
Aula02 webdesign
Aula02 webdesignAula02 webdesign
Aula02 webdesign
 
Aula 07
Aula 07Aula 07
Aula 07
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLAula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
 
HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 

Destaque

Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBAWeb design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
Matheus Brito
 
Aula 02 introudção a computação
Aula 02 introudção a computaçãoAula 02 introudção a computação
Aula 02 introudção a computação
Matheus Brito
 
Aula 04 software
Aula 04 softwareAula 04 software
Aula 04 software
Matheus Brito
 
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
Eduardo Grizendi
 
Unidade iii tipos de softwares
Unidade iii   tipos de softwaresUnidade iii   tipos de softwares
Unidade iii tipos de softwares
Daniel Moura
 
Tipos de software
Tipos de softwareTipos de software
Tipos de software
Henrique Fonseca
 
Aula 01 introdução a computação
Aula 01 introdução a computaçãoAula 01 introdução a computação
Aula 01 introdução a computação
Matheus Brito
 
Tipos de Licença de Softwares
Tipos de Licença de SoftwaresTipos de Licença de Softwares
Tipos de Licença de Softwares
Lucas Castejon
 

Destaque (8)

Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBAWeb design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 
Aula 02 introudção a computação
Aula 02 introudção a computaçãoAula 02 introudção a computação
Aula 02 introudção a computação
 
Aula 04 software
Aula 04 softwareAula 04 software
Aula 04 software
 
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
Nbt 017 tipologia de software & tipos de licença de software. 2 s 2013
 
Unidade iii tipos de softwares
Unidade iii   tipos de softwaresUnidade iii   tipos de softwares
Unidade iii tipos de softwares
 
Tipos de software
Tipos de softwareTipos de software
Tipos de software
 
Aula 01 introdução a computação
Aula 01 introdução a computaçãoAula 01 introdução a computação
Aula 01 introdução a computação
 
Tipos de Licença de Softwares
Tipos de Licença de SoftwaresTipos de Licença de Softwares
Tipos de Licença de Softwares
 

Semelhante a Aula de XHTML

Xhtml
XhtmlXhtml
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
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
Fabio Moura Pereira
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
Leandro Rezende
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
O que é html
O que é htmlO que é html
O que é html
Eduardo Kiefer
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
Sedu
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
Marco Pinheiro
 
Revisão html e java script
Revisão html e java scriptRevisão html e java script
Revisão html e java script
Maurício Linhares
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
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
 
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
Eduardo Bertolucci
 
XHTML, CSS e Semântica
XHTML, CSS e SemânticaXHTML, CSS e Semântica
XHTML, CSS e Semântica
Amanda Sposito
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
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
LuisFalco8
 
HTML Básico
HTML BásicoHTML Básico
html css js ajax exercícios de programação
html css js ajax exercícios de programaçãohtml css js ajax exercícios de programação
html css js ajax exercícios de programação
BrunoEmanuelJesusPir
 
Html e css
Html e cssHtml e css
Html e css
maxrosan
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 

Semelhante a Aula de XHTML (20)

Xhtml
XhtmlXhtml
Xhtml
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
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
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
O que é html
O que é htmlO que é html
O que é html
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
Revisão html e java script
Revisão html e java scriptRevisão html e java script
Revisão html e java script
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
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
 
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
 
XHTML, CSS e Semântica
XHTML, CSS e SemânticaXHTML, CSS e Semântica
XHTML, CSS e Semântica
 
Curso html
Curso htmlCurso html
Curso html
 
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
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
html css js ajax exercícios de programação
html css js ajax exercícios de programaçãohtml css js ajax exercícios de programação
html css js ajax exercícios de programação
 
Html e css
Html e cssHtml e css
Html e css
 
Html completo
Html completoHtml completo
Html completo
 

Aula de XHTML

  • 3. DIFERENÇAS ENTRE XHTML E HTML  Documentos devem ser bem formados  Todas as Tags devem ser escritas com letras minúsculas  Tags devem estar convenientemente aninhadas  Uso de Tags de fechamento é obrigatório  Elementos vazios devem ser fechados  Diferença na sintaxe dos atributos
  • 4. DOCUMENTOS DEVEM SER BEM FORMADOS  HTML navegadores interpretam e resolvem erros de marcação.  Em XHTML não são admitidos erros na marcação  Estrutura Básica – elemento raiz <html>  <html>  <head>  …  </head>  <body>  …  </body>  </html>
  • 5. TODAS AS TAGS DEVEM SER ESCRITAS COM LETRAS MINÚSCULAS  XML é sensível ao tamanho da caixa de fonte, logo XHTML também é.  Uso obrigatório de letras minúsculas  Errado:  <DIV><P> Aqui um texto</P></DIV>  Certo:  <div><p>Aqui um texto</p></div>
  • 6. TAGS DEVEM SER CONVENIENTEMENTE ANINHADAS  A primeira tag a ser aberta é a última a ser fechada, a segunda é a penúltima e assim por diante.  Certo:  <div><p><em>Aqui um texto enfatizado</em></p></div>  Errado:  <div><em><p>Aqui um texto enfatizado</em></p></div>
  • 7. USO DE TAGS DE FECHAMENTO É OBRIGATORIO  Em HTML é possível omitir a tag de fechamento de determinados elementos, tais como para as tags <p><li>. XML não permite omissão de qualquer tag de fechamento. Todo elemento tem que ter tag de fechamento.  Errado:  <p>Um paragráfo.  <li>Um item de lista.  Certo:  <p>Um paragráfo.</p>  <li>Um item de lista</li>
  • 8. ELEMENTOS VAZIOS DEVEM SER FECHADOS  Elementos vazios devem ter uma tag de fechamento, ou a tag de abertura deve terminar com />  Errado:  <br>  <hr>  <img src=“imagem.jpg” alt=“minha imagem”>  Certo: (Opção 1 – usar tag de fechamento)  <br></br>  <hr></hr>  <img src=“imagem.jpg” alt=“minha imagem”></img>  Certo: (Opção 2 – usar tag de fechamento)  <br />  <hr />  <img src=“imagem.jpg” alt=“minha imagem” />
  • 9. DIFERENÇA NA SINTAXE DOS ATRIBUTOS  Nomes de Atributos  Errado:  <td ROWSPAN=“3”>  Certo:  <td rowspan=“3”>  Valores dos atributos  Errado:  <td rowspan=3>  Certo:  <td rowspan=“3”>
  • 10.  Sintaxe para atributos  Errado  <input checked />  Certo:  <input checked=“checked” />
  • 11. ELEMENTOS OBRIGATÓRIOS EM UM DOCUMENTO XHTML  É obrigatória a declaração do DOCTYPE, assim como das tags <html><head><title><body>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">
  • 12. PARA QUE SERVE O DOCTYPE?  Serve para indicar a entidade normativa da linguagem, o caminho para o navegador encontrar as diretrizes que regulamentam a sintaxe e as entidades válidas no documento e baseado nelas, renderizar o documento.
  • 13. TIPOS DE DOCTYPE  São três tipos de DOCTYPE para XHTML: Strict, Transitional e Frameset.  Strict:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">  Transitional:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  Frameset  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • 14. MODELO DE DOCUMENTO XHTML  <?xml version=“1.0” encoding=“UTF-8” ?  <XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC “- //W3C//DTD XHTML; 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt- br” lang=“pt-br”> <head> <title>Viação São José | horários de ônibus</title> …metatags,estilos,scripts </head> <body> … Conteúdo da página </body> </html>
  • 15. ELEMENTO META  Este elemento destina-se a fornecer informações adicionais sobre o documento.  A sintaxe para escrever um elemento meta, consiste em duas partes. A primeira define um nome para o metadado e a segunda para seu conteúdo. O nome é definido pelo seu atributo name ou http-equiv e o conteúdo pelo atributo content.  <meta name=“author” content=“Fulano da Silva” />
  • 16. EXEMPLOS DE ELEMENTOS META  Informar o tipo de conteúdo do documento é texto HTML e a codificação é UTF-8:  <meta http-equiv=“Content-Type” content=“text/html” charset=“UTF-8” />  Para informar que o idioma principal do documento é o português:  <meta name=“language” content=“pt-br” />  Para descrever o conteúdo de suas páginas usa-se:  <meta name=“description” content=“Tutoriais sobre CSS, XHTML, HTML, acessibilidade e padões web.” />
  • 17. EXEMPLOS DE ELEMENTOS META  Para relacionar as palavras-chave do conteúdo do documento usa-se:  <meta name=“keywords” content=“css, html, xhtml, webstandards, xml.” />  Para informar aos robôs de busca que os conteúdos da página podem ser indexados e os links devem ser seguidose examinados use:  <meta name=“robots” content=“all” />
  • 18. CARACTERES E ENTIDADES  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=“pt-br” lang=“pt- br”> <head> <title>Titulo do Template</title> <meta name=“description” content=“Meu template para XHTML 1.0 Transitional.” /> <meta name=“keywords” content=“relação de palavras chave” /> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <meta name=“language” content=“pt-br” /> <meta name=“author” content=“Meu nome” /> </head> <body> … Conteúdo da página </body> </html>
  • 19. CODIFICAÇÃO DE CARACTERES  Iso-8859-1  Utf-8
  • 20. CODIFICAÇÃO DE CARACTERES  Primeiro caso:  Bloco de Notas  UTF-8 na tag meta  ANSI  Segundo caso:  Bloco de Notas  Iso-8859-1 na tag meta  UTF-8  Terceiro caso:  Bloco de Notas  UTF-8 na tag meta  UTF-8
  • 24. VALIDANDO SEU TEMPLATE W3C  http://validator.w3.org/#validate_by_upload+with_o ptions