Aula de XHTML

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

VALIDANDO SEU TEMPLATE W3C
 http://validator.w3.org/#validate_by_upload+with_o
ptions

Aula de XHTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Aula de XHTML

Similaire à Aula de XHTML (20)

Aula de XHTML