Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
Conteúdo
XHTML - Por quê? .......................................................................................................................... 2
Porque XHTML?.............................................................................................................................. 2
Diferenças Entre XHTML e HTML ....................................................................................................... 3
Como Preparar-se para a XHTML ................................................................................................... 3
As Diferenças Mais Importantes: ............................................................................................... 3
Os Elementos Devem Estar Devidamente Aninhados ................................................................... 3
Os Documentos Devem Estar Bem-formados................................................................................ 4
Os Nomes de Tags Devem Estar em Letras Minúsculas ................................................................. 4
Todos os Elementos XHTML Devem Ser Fechados ........................................................................ 5
Elementos Vazios Devem também Ser Fechados .......................................................................... 5
A Sintaxe da XHTML ........................................................................................................................... 6
Mais Algumas Regras de Sintaxe XHTML: ...................................................................................... 6
Nomes de Atributo Devem Estar em Letras Minúsculas................................................................ 6
Valores de Atributos Devem Estar Entre Aspas ............................................................................. 6
A Minimização de Atributos É Proibida.......................................................................................... 7
O Atributo id substitui o Atributo name ........................................................................................ 7
O Atributo Lang .............................................................................................................................. 8
Elementos Obrigatórios em XHTML ............................................................................................... 8
A DTD XHTML ..................................................................................................................................... 9
A <!DOCTYPE> é Obrigatória .......................................................................................................... 9
Um Exemplo em XHTML................................................................................................................. 9
As 3 Definições de Tipo de Documento ........................................................................................... 10
Há atualmente 3 tipos de documentos XHTML: .......................................................................... 10
XHTML 1.0 Strict ....................................................................................................................... 11
XHTML 1.0 Transitional ............................................................................................................ 11
XHTML 1.0 Frameset ................................................................................................................ 11
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
XHTML - Por quê?
A XHTML é uma combinação de HTML e XML (eXtensible Markup Language).
A XHTML consiste de todos os elementos da HTML 4.01 combinados com a sintaxe da
XML.
Porque XHTML?
Nós chegamos a um ponto em que muitas páginas na WWW contém "má" HTML.
O seguinte código HTML funciona bem se você o vê num navegador, mesmo que ele não
siga as regras da HTML:
<html>
<head>
<title>Isto é má HTML</title>
<body>
<h1>Má HTML
</body>
A XML é uma linguagem de marcação onde tudo tem que ser marcado corretamente, o que
resulta em documentos "bem-formados" ("well-formed").
A XML foi projetada para descrever dados e a HTML foi projetada para exibir dados.
O mercado de hoje consiste de diferentes tecnologias de navegadores, alguns navegadores
rodam a internet em computadores, e alguns navegadores rodam a internet em telefones
móveis e portáteis. Estes últimos mencionados não têm os recursos ou potência para
interpretar uma "má" linguagem de marcação.
Assim - combinando a HTML e a XML, e suas forças, obtivemos uma linguagem de
marcação que é útil agora e será no futuro - a XHTML.
As páginas XHTML podem ser lidas por todos os aparelhos capazes de ler XML E
enquanto aguarda pelo resto do mundo atualizar-se aos navegadores que suportam a XML,
a XHTML dá a você a oportunidade de escrever documentos "bem-formados" agora, que
funcionam em todos os navegadores e que é compatível com os navegadores anteriores!
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
Diferenças Entre XHTML e HTML
Você pode preparar-se para a XHTML começando a escrever HTML estrita.
Como Preparar-se para a XHTML
A XHTML é a próxima geração da HTML, mas levará certamente algum tempo até que os
navegadores e outros produtos de software estejam prontos para ela.
Neste meio-tempo há algumas coisas importantes que você pode fazer para preparar-se
para ela. Como você irá aprender neste tutorial, a XHTML não é muito diferente da HTML
4.01, portanto, trazer o seu código aos padrões da 4.01 é um início muito bom.
Além disso, você deve começar AGORA a escrever o seu código HTML em letras
minúsculas, e NUNCA adquirir o mau hábito de pular as tags de fechamento como </p>.
Feliz codificação!
As Diferenças Mais Importantes:
Os elementos XHTML devem estar devidamente aninhados
Os documentos XHTML devem estar bem-formados
Os nomes das tags devem estar em letras minúsculas
Todos os elementos XHTML devem ser fechados
Os Elementos Devem Estar Devidamente Aninhados
Na HTML alguns elementos podem estar indevidamente aninhados uns dentro dos outros
como estes:
<b><i>Este texto está em negrito e itálico</b></i>
Na XHTML todos os elementos devem estar devidamente aninhados uns dentro dos outros
como estes:
<b><i>Este texto está em negrito e itálico</i></b>
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
Observação: Uma falha comum em listas aninhadas é esquecer que a lista interna deve
estar dentro de um elemento li, assim:
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
<li>Leite</li>
</ul>
Este é o correto:
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
Observe que inserimos uma tag </li> após a tag </ul> no exemplo com o código "correto".
Os Documentos Devem Estar Bem-formados
Todos os elementos XHTML devem estar aninhados dentro do elemento raiz <html>.
Todos os outros elementos podem ter sub elementos (children [filhos]). Os sub elementos
devem estar em pares e corretamente aninhados dentro de seu elemento pai (parent). A
estrutura básica do documento é:
<html>
<head> ... </head>
<body> ... </body>
</html>
Os Nomes de Tags Devem Estar em Letras Minúsculas
Isto é porque os documentos XHTML são aplicações XML. A XML é sensível à caixa
(letras maiúsculas e minúsculas são diferenciadas). Tags como <br> e <BR> são
interpretadas como tags diferentes.
Isto está errado:
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
<BODY>
<P>Este é um parágrafo</P>
</BODY>
Isto está correto:
<body>
<p>Este é um parágrafo</p>
</body>
Todos os Elementos XHTML Devem Ser Fechados
Elementos não vazios devem ter uma tag de fechamento.
Isto está errado:
<p>Este é um parágrafo
<p>Este é outro parágrafo
Isto está correto:
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
Elementos Vazios Devem também Ser Fechados
Elementos vazios devem ou ter uma tag de fechamento ou a tag de abertura deve
terminar com />.
Isto está errado:
Esta é uma quebra<br>
Aqui vem um filete horizontal:<hr>
Aqui está uma imagem <img src="happy.gif" alt="Rosto feliz">
Isto está correto:
Esta é uma quebra<br />
Aqui vem um filete horizontal:<hr />
Aqui está uma imagem <img src="happy.gif" alt="Rosto feliz" />
Observação de Compatibilidade IMPORTANTE:
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
Para tornar a sua XHTML compatível com os navegadores de hoje, você deve adicionar
um espaço extra antes do símbolo "/" assim: <br />, e assim: <hr />.
A Sintaxe da XHTML
Escrever XHTML demanda uma sintaxe HTML limpa.
Mais Algumas Regras de Sintaxe XHTML:
Nomes de atributo devem estar em letras minúsculas
Valores de atributo devem estar entre aspas
A minimização de atributo é proibida
O atributo id substitui o atributo name
A DTD XHTML define elementos obrigatórios
Nomes de Atributo Devem Estar em Letras Minúsculas
Isto está errado:
<table WIDTH="100%">
Isto está correto:
<table width="100%">
Valores de Atributos Devem Estar Entre Aspas
Isto está errado:
<table width=100%>
Isto está correto:
<table width="100%">
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
A Minimização de Atributos É Proibida
Isto está errado:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
Isto está correto:
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Aqui está um alista de atributos minimizados em HTML e como eles devem ser escritos
em XHTML:
HTML
compact
checked
declare
readonly
disabled
selected
defer
ismap
nohref
noshade
nowrap
multiple
noresize
XHTML
compact="compact"
checked="checked"
declare="declare"
readonly="readonly"
disabled="disabled"
selected="selected"
defer="defer"
ismap="ismap"
nohref="nohref"
noshade="noshade"
nowrap="nowrap"
multiple="multiple"
noresize="noresize"
O Atributo id substitui o Atributo name
A HTML 4.01 define um atributo name para os elementos a, applet, frame, iframe, img, e
map. Na XHTML o atributo name está desaprovado. Use id em vez.
Isto está errado:
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
<img src="picture.gif" name="picture1" />
Isto está correto:
<img src="picture.gif" id="picture1" />
Observação: Para inter-operar com navegadores mais antigos por enquanto, você deve
usar tanto o name quanto o id, com valores de atributo idênticos, assim:
<img src="picture.gif" id="picture1" name="picture1" />
Observação de Compatibilidade IMPORTANT:
Para tornar sua XHTML compatível com os navegadores de hoje, você deve adicionar um
espaço extra antes do símbolo "/".
O Atributo Lang
O atributo lang aplica-se a quase todos os elementos XHTML. Ele especifica a linguagem
do conteúdo dentro de um elemento.
Se você usar o atributo lang num elemento, você deve adicionar o atributo xml:lang, assim:
<div lang="no" xml:lang="no">Heia Norge!</div>
Elementos Obrigatórios em XHTML
Todos os documentos XHTML devem ter uma declaração DOCTYPE. Os elementos html,
head e body devem estar presentes, e o title deve estar presente dentro do elemento head.
Este é um modelo de documento XHTML mínimo:
<!DOCTYPE O Tipo-de-documento vai aqui>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>O título vai aqui</title>
</head>
<body>
O corpo do texto vai aqui
</body>
</html>
Observação: A declaração DOCTYPE não é em si uma parte do documento XHTML. Ela
não é um elemento XHTML, e ela não deve ter uma tag de fechamento.
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
Observação: O atributo xmlns dentro da tag <html> é requerido na XHTML. Entretanto, o
validador no w3.org não acusa quando este atributo está faltando num documento
XHTML. Isto é porque "xmlns=http://www.w3.org/1999/xhtml" é um valor fixo e será
adicionado à tag <html> mesmo se você não o incluir.
Você aprenderá mais sobre a definição de tipo de documento XHTML no próximo
capítulo.
A DTD XHTML
O padrão XHTML define três Document Type Definitions (Definições de Tipos de
Documentos).
A mais comum é a XHTML Transitional.
A <!DOCTYPE> é Obrigatória
Um documento XHTML consiste de três partes principais:
DOCTYPE
Head
Body
A estrutura básica do documento é:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
A declaração DOCTYPE deve sempre estar na primeira linha em um documento XHTML.
Um Exemplo em XHTML
Este é um documento XHTML simples (mínimo):
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>documento simples</title>
</head>
<body>
<p>um simples parágrafo</p>
</body>
</html>
A declaração DOCTYPE define o tipo do documento:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
O resto do documento parece com HTML:
<html>
<head>
<title>documento simples</title>
</head>
<body>
<p>um simples parágrafo</p>
</body>
</html>
As 3 Definições de Tipo de Documento
A DTD especifica a sintaxe de uma página web em SGML.
A DTD é usada por aplicações SGML, tais como HTML, para especificar regras que se
aplicam à marcação de documentos de um tipo particular, incluindo um conjunto de
declarações de elementos e de entidades.
A XHTML é especificada em uma definição de tipo de documento SGML ou 'DTD'.
Uma DTD XHTML descreve de forma precisa em linguagem legível ao computador, a
sintaxe e a gramática permitida da marcação XHTML.
Há atualmente 3 tipos de documentos XHTML:
STRICT
TRANSITIONAL
FRAMESET
A XHTML 1.0 especifica três tipos de documentos XML document que correspondem as
três DTDs: Strict, Transitional, and Frameset.
Traduzido e adaptado de W3schools.com
Apostila de XHTML – Curso de Internet – Professor Rinaldo
Demétrio
XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use esta quando você quer realmente uma marcação limpa, livre da confusão da
apresentação. Use junto com Folhas de Estilo em Cascata (Cascading Style Sheets).
XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use esta quando você precisa tirar vantagem das características de apresentação da HTML
e quando você quer dar suporte aos navegadores que não entendem Folhas de Estilo em
Cascata.
XHTML 1.0 Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use esta quando você quer usar Frames (molduras) HTML para particionar a janela do
navegador em duas ou mais molduras (frames).
Traduzido e adaptado de W3schools.com
Download
