Apostila XHTML

Ricardo Terra (rterrabh [at] gmail.com) Outubro, 2008
XHTML
Ricardo Terra
rterrabh [at] gmail.com
XHTML 1

Ricardo Terra (rterrabh [at] gmail.com) Outubro, 2008XHTML 2
CV
Nome: Ricardo Terra
Email: rterrabh [at] gmail.com
www: ricardoterra.com.br
Twitter: rterrabh
Lattes: lattes.cnpq.br/ 0162081093970868
Ph.D. (UFMG/UWaterloo),
Post-Ph.D. (INRIA/Université Lille 1)
Background
Acadêmico: UFLA (desde 2014), UFSJ (1 ano), FUMEC (3 anos), UNIPAC (1 ano), FAMINAS (3 anos)
Profissional: DBA Eng. (1 ano), Synos (2 anos), Stefanini (1 ano)

Introdução ao XHTML
n  O que é?
q  XHTML significa EXtensible HyperText Markup Language
q  XHTML objetiva substituir HTML
q  XHTML é quase idêntico ao HTML 4.01
q  XHTML é uma versão mais restrita e limpa do HTML
q  XHTML é HTML definido como um XML
q  XHTML é uma recomendação W3C
n  Se tornou uma recomendação em Janeiro de 2000
n  Em síntese, XHTML é uma combinação de HTML e XML
q  isto é, todos os elementos no HTML 4.01 com a sintaxe do XML

Introdução ao XHTML
n  XHTML é definido como a última versão do HTML
q  Irá gradualmente substituir o HTML
n  Todos os navegadores suportam XHTML
q  XHTML é compatível com HTML 4.01
n  Até mesmo o site do W3Schools foi convertido para XHTML

Motivação
n  Muitas páginas na Internet contêm HTML "ruim"
n  O seguinte código HTML funciona bem se você visualizá-lo em um
navegador, mesmo pelo fato de ele não seguir as regras HTML:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>

Motivação
n  XML é uma linguagem de marcação em que tudo tem que ser
marcado corretamente, o que resulta em documentos bem
formados
n  XML foi desenvolvida para descrever dados e a HTML foi
desenvolvida para apresentar dados
n  Atualmente, existem diversas tecnologias de navegadores, alguns
deles funcionam em computadores, mas alguns em celulares,
palms e hand helds. Alguns equipamentos não tem recursos ou
poder de interpretar uma linguagem de marcação "ruim"

Motivação
n  Entretanto, combinar HTML e XML, e suas forças, nós conseguimos
uma linguagem de marcação que é útil agora e futuramente:
XHTML
n  Páginas XHTML podem ser lidas por todos os dispositivos
habilitados para XML
n  Enquanto toda a Internet atualiza para navegadores com suporte à
XML, XHTML concede a oportunidade de escrever documentos
bem formados agora, que funcionam em todos os navegadores e
que serão sempre compatíveis com os anteriores

Diferenças entre HTML e XHTML
n  XHTML não é muito diferente do HTML
q  a partir de agora, você deve começar a escrever as marcações (tags)
sempre em minúsculas e sempre fechar toda marcação aberta
n  Diferenças mais importantes:
q  Elementos XHTML devem sempre ser propriamente aninhados
q  Elementos XHTML devem sempre ser fechados
q  Elementos XHTML devem sempre estar em minúsculo
q  Documentos XHTML devem possuir somente um elemento raiz
n  Estrutura básica de um documento XHTML:
<html>
<head> ... </head>
<body> ... </body>
</html>

Erros comuns: aninhamento
n  Errado:
<b><i>This text is bold and italic</b></i>
n  Certo:
<b><i>This text is bold and italic</i></b>

Erros comuns: fechamento
n  Errado:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
n  Certo:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

n  Errado:
<p>This is a paragraph
<p>This is another paragraph
n  Certo:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

n  Errado:
Quebra de linha: <br>
Linha horizontal: <hr>
Imagem: <img src="happy.gif" alt="Happy face">
n  Certo:
Quebra de linha : <br />
Linha horizontal : <hr />
Imagem: <img src="happy.gif" alt="Happy face" />

Erros comuns: escrita dos elementos
n  Errado:
<BODY>
<P>This is a paragraph</P>
</BODY>
n  Certo:
<body>
<p>This is a paragraph</p>
</body>

Erros comuns: escrita dos atributos
n  Errado:
<table WIDTH="100%">
n  Certo:
<table width="100%">

Erros comuns: uso de aspas
n  Errado:
<table width=100%>
n  Certo:
<table width="100%">

Erros comuns: minimização de atrib.
n  Errado:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
n  Certo:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

Erros comuns: minimização de atrib.
n  A lista abaixo refere-se aos atributos minimizados em HTML e como
devem ser corretamente escritos em XHTML:

Uso de id ao invés de name
n  HTML 4.01 define um atributo name para os elementos a, applet,
frame, iframe, img e map. Em XHTML o atributo name está
descontinuado. Deve ser usado o atributo id
n  Errado:
q  <img src="picture.gif" name="picture1" />
n  Certo:
q  <img src="picture.gif" id="picture1" />

Compatibilidade
n  Para funcionar com navegadores antigos por um tempo, deve-se
utilizar tanto name quanto id com valores idênticos. Observe:
q  <img src="picture.gif" id="picture1" name="picture1" />
n  Para fazer seu XHTML compatível com os navegadores atuais,
deve-se adicionar um espaço extra antes do fechamento da
marcação "/>". Observe:
q  <a href="terra.html"/>
para
q  <a href="terra.html" />

Elementos XHTML obrigatórios
n  Todos os documentos XHTML devem ter uma declaração
DOCTYPE. Os elementos html, head e body devem estar
presentes e o elemento title deve estar presente dentro no
elemento head
q  <!DOCTYPE tipo do documento vem aqui>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título vem aqui</title>
</head>
<body>
</body>
</html>

XHTML DTD
n  O padrão XHTML define três DTDs
q  O mais comum é o XHTML Transitional
n  O XHTML é vinculado ao DTD pela declaração DOCTYPE e esta
deve estar na primeira linha do XHTML
n  A declaração DOCTYPE define o tipo do documento, por exemplo:
q  <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML DTD
n  Os três DTDs:
q  DTD especifica a sintaxe de uma página web em SGML
q  DTD é utilizado por aplicações SGML, tal como HTML, para especificar
regras a serem aplicadas nas marcações de documentos de um tipo
particular, incluindo o conjunto de elementos e declarações de entidade
q  XHTML é especificado em um DTD
q  Um XHTML DTD descreve de forma precisa, em uma linguagem lida
pelo computador (computer-readable), a gramática e sintaxe permitida
de marcações XHTML
n  Atualmente, existem 3 XHTML DTDs:
q  STRICT, TRANSITIONAL e FRAMESET

XHTML DTD
n  XHTML 1.0 Strict
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
q  Inclui elementos e atributos que não estão descontinuados ou que não
aparecem em framesets
q  Use quando realmente quiser marcações limpas, livre de desordem de
apresentação. Use ela em conjunto com CSS (Cascading Style Sheets)

XHTML DTD
n  XHTML 1.0 Transitional
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 -
transitional.dtd">
q  Inclui tudo do Strict, mais elementos e atributos descontinuados
q  Use quando necessitar tirar vantagens de características de
apresentação do HTML e quando você quiser suportar navegadores que
não entendam CSS

XHTML DTD
n  XHTML 1.0 Frameset
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
" h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 -
frameset.dtd">
q  Inclui tudo do Transitional, mais frames
q  Use quanto quiser usar frames HTML para particionar a janela do
navegador em dois ou mais frames

Referência XHTML 1.0
n  Para tirar qualquer dúvida sobre marcações (sintaxe, utilização, etc)
e para saber quais marcações estão disponíveis em qual DTD, a
W3CSchools disponibiliza uma página de referência do XHTML 1.0:
q  http://www.w3schools.com/tags/default.asp
n  Realmente muito útil

XHTML Como validar?
n  Para converter um web site de HTML para XHTML, você deve estar
familiarizado com as regras de sintaxe XHTML vistas. Convém
salientar que os seguintes passos são indispensáveis:
q  Adicionar a definição DOCTYPE
n  Strict é mesmo restrita, talvez Transitional seja uma boa solução
q  Sempre utilizar marcações e nomes de atributos em minúsculas
q  Sempre utilizar aspas nos atributos
q  Marcações vazias devem ser fechadas
n  Exemplo: <br> à <br />

XHTML Como validar?
n  Página de validação W3C
q  http://validator.w3.org/
n  Nesta página você pode validar:
q  uma URL existente
q  um código XHTML diretamente
q  submeter um XHTML para validação
n  Caso use Firefox, pode baixar o add-on chamado Web Developer
q  http://chrispederick.com/work/web-developer/
q  Assim, basta ir em Tools ! Validate HTML

XHTML Modular
n  Para alguns propósitos, o XHTML é enorme e complexo, contudo,
para outros propósitos, ele é muito simples
n  Por separar o XHTML em módulos, o W3C cria um conjunto
pequeno e bem definido de elementos XHTML que podem ser
usados separadamente por pequenos dispositivos ou combinados
com outros padrões XML em aplicações de grande porte e de maior
complexidade

XHTML Modular
n  Com XHTML modular, desenvolvedores podem:
q  Escolher os elementos que serão suportados por um dispositivo usando
padronizados blocos de construção XHTML
q  Adicionar extensão ao XHTML, utilizando XML, sem desviar do padrão
XHTML
q  Simplificar o XHTML para dispositivos como palmtops, telefones
celulares, TV e, até mesmo, eletrodomésticos
q  Estender o XHTML para aplicações complexas adicionando novas
funcionalidades XML (como MathML, SVG, Voice and Multimedia)
q  Definir perfis XHTML como XHTML Basic (um subconjunto de XHTML
para dispositivos móveis)

XHTML Modular
n  W3C separou a definição do XHTML em 28 módulos:

XHTML Atributos padronizados
n  Marcações XHTML têm atributos. Os atributos especiais de cada
marcação podem ser encontrados em:
q  http://www.w3schools.com/tags/default.asp
n  Os atributos a seguir são os atributos core, language e keyboard
que são comuns à todas as marcações (com poucas exceções)
n  Atributos core
q  Inválidos para os seguintes elementos: base, head, html, meta, param,
script, style e title

n  Atributos language
q  Inválidos para os seguintes elementos: base, br, frame, frameset, hr,
iframe, param e script
n  Atributos keyboard
q  Sem exceção

XHTML Atributos de eventos
n  Os atributos a seguir podem ser inseridos em marcações HTML
para definir ações de eventos
n  Eventos de janela
q  Somente válidos nos elementos body e frameset

n  Eventos de formulário
q  Somente válidos em elementos de formulário
n  Eventos de teclado
q  Inválido para os seguinte elementos: base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style e title

n  Eventos de mouse
q  Inválido para os mesmos elementos que não aceitam eventos de
teclado

Referência Bibliográfica
n  SILVA, M. S. Tutorial XHTML. Disponível em: <http://www.maujor.com/
tutorial/xhtml.php>. Acesso em: 03 set. 2008.
n  W3Schools. XHTML Tutorial. Disponível em: <http://www.w3schools.com/
xhtml/default.asp>. Acesso em: 03 set. 2008.

Apostila XHTML

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Apostila XHTML

Semelhante a Apostila XHTML (20)

Mais de Ricardo Terra

Mais de Ricardo Terra (20)

Último

Último (20)

Apostila XHTML