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, 2008 XHTML 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

q  <!DOCTYPE html

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

q  <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 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

q  <!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 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

Education

Transcript of Apostila XHTML