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