Tipos de DOCTYPE para a XHTML

(1)

Aula 07

Profa. Luciana M. Vieira Pöttker

Técnico em Informática para Internet

Pronatec – IFPR – Campus Londrina

Fundamentos de Desenvolvimento

WEB

XHTML – eXtensible HyperText Markup Language

É a nova versão do HTML;

Baseada no XML, segue as mesmas regras,;

Mas é mais fácil de se trabalhar o documento

posteriormente pois possibilita o uso de ferramentas

XML.

20/09/2012 Prof. MSc. Luciana M. Vieira Pöttker 2

Padrões da Internet

Diferenças entre XHTML e HTML

As principais diferenças entre as duas linguagens de

marcação são que em XHTML:

Documentos devem ser bem-formatados;

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ças na sintaxe dos atributos.

Padrões da Internet

Validação de documentos XHTML Declaração DOCTYPE

Declaração que especifica a linguagem de marcação usada no documento, ou, mais precisamente, que determina a DTD (Document Type Declaration) daquela linguagem. Uma DTD especifica as regras que definem um padrão ou formato.

Define os elementos, atributos e valores permitidos, além das condições de encadeamento e sua ocorrência. Ou seja, descreve a sintaxe e a gramática da linguagem de marcação.

A declaração DOCTYPE deve ser a primeira declaração em um documento XHTML.

Padrões da Internet

Tipos de DOCTYPE para a XHTML a)STRICT

Declaração

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Características

Não admite uso de elementos obsoletos; Não admite uso de itens de formatação; Indicado para uso com CSS (Cascading Style Sheets)

Padrões da Internet

Tipos de DOCTYPE para a XHTML

Exemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Documento XHTML</title> </head>

<body>

(2)

Tipos de DOCTYPE para a XHTML b)TRANSITIONAL

Declaração

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Características

Admite uso de elementos obsoletos;

Admite uso de regras de apresentação embutidas em tags.

Tipos de DOCTYPE para a XHTML

b)TRANSITIONAL

Exemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>

Documento XHTML Transitional </body>

</html>

Padrões da Internet

Tipos de DOCTYPE para a XHTML c)FRAMESET

Declaração

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Características

Idêntica a DTD Transitional, acrescida de suporte a frames.

Padrões da Internet

Exemplo – Frameset – Parte 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<frameset rows="80px,80%" > ...

Padrões da Internet

O W3C disponibiliza uma ferramenta para

validação de documentos no endereço

http://validator.w3.org

Padrões da Internet

(3)

Erros Comuns

Não fechar elementos vazios

Errado: <br><hr>

Certo: <br /> <hr />

Erros comuns

Não fechar elementos de conteúdo

Errado: <p> Paragrafo 1 <p> Paragrafo 2

Certo: <p> Paragrafo 1 </p> <p> Paragrafo 2 </p>

Padrões da Internet

Erros comuns

Agrupamento incorreto de elementos

Errado: <td rowspan = 3>

Certo: <td rowspan = “3”> ou <td rowspan = ‘3’>

Padrões da Internet

Erros comuns

Colocar caracteres especiais no documento

Errado: <title> Tom &Jerry </title>

Certo: <title> Tom & Jerry </title>

Padrões da Internet

Erros comuns

Usar o & dentro de URLs

Errado: <a href=“index.php?page=news&style=5”> News </a>

Certo: <a href=“index.php?page=news&style=5”> News </a>

Padrões da Internet

Erros Comuns

Não reconhecer que XHTML é case sensitive

Errado: <BODY> <P ID=“ONE”> O Melhor Site </P><BODY>

(4)

Erros comuns

Errado: <textarea readonly> READ-ONLY </textarea>

Certo: <textarea readonly=“readonly”>READ-ONLY

</textarea>

Recomendações para Acessibilidade

Prover um texto equivalente para todos os elementos

não-textuais

Não usar imagens sem alt ou com alt vazios

Validar o documento para garantir máxima

compatibilidade

Validação do XHTML e CSS

Padrões da Internet

Usar elementos de título para convencionar a

estrutura do documento

<h1> Título do curso </h1>

<h2> Título do módulo </h2>

<h3> Título da seção </h3>

Fazer uso correto de listas e citações

Padrões da Internet

Organize o documento para que possa ser lido sem a

folha de estilo

Garantir que o documento possa ser lido quando java,

javascript ou applet estiverem desabilitados

Tornar possível a navegação com o mouse ou o teclado

Prover uma ordem lógica de navegação com o uso do TAB

Padrões da Internet

Evite o uso de elementos depreciados pelo W3C

Elementos como <font> somente funcionam ainda para garantir a compatibilidade com navegadores antigos

Usar as tags labels (etiquetas) com seus respectivos

elementos dentro de formulário

Padrões da Internet

Folhas de Estilo

Visam separar a apresentação e o conteúdo das

páginas;

As marcações (ex. HTML ou XHTML) definem como

será semântiva do conteúdo e sua estrutura, mas não

(5)

Folhas de Estilo

O estilo deve ser definido em uma folha de estilo

separada, usando uma linguagem como o CSS ou XSL;

O CSS é a folha de estilo mais utilizada na internet.

Folhas de Estilo – Vantagens

A separação da apresentação do conteúdo tem várias

vantagens, e cada vez mais vantagens com uma

melhor adoção e evolução do CSS pelos navegadores

Padrões da Internet

Folhas de Estilo – Velocidade

Sites que utilizam CSS tendem a carregar mais rápido

A primeira página do site normalmente demora um

pouso, pois ele irá carregar o conteúdo e o estilo, mas

nas páginas seguintes, o estilo já estará no cachê do

navegador.

Padrões da Internet

Folhas de Estilo – Manutenção

Guardar todas as informações de estilo em um único

arquivo reduz o tempo gasto com manutenção, além

de evitar erros humanos reduzindo as tarefas de

manutenção

Padrões da Internet

Folhas de Estilo – Acessibilidade

Em navegadores que não aceitam conteúdo gráfico,

como o Lynx, irão ignorar esses CSS, mas o conteúdo

continuará a ser apresentado corretamente

Padrões da Internet

Folhas de Estilo – Acessibilidade

Outro exemplo são os terminais em braile e leitores de

tela, que irão funcionar melhor, pois poderão ignorar

(6)

Folhas de Estilo – Customização

Se a informação de layout estiver toda de forma

externa, um usuário pode escolher por desabilitar o

layout e visualizar somente o conteúdo, além de que

hoje sites já disponibilizam diversas folhas de estilo,

possibilitando que o usuário escolha a que mais

gostar.

Folhas de Estilo – Customização

Os navegadores mais modernos também possibilitam

seus usuários definir suas próprias regras de CSS,

possibilitando, por exemplo, que eles definam suas

próprias cores e fontes para um site.

Padrões da Internet

Folhas de Estilo – Consistência

Como o arquivo de conteúdo contém apenas o

conteúdo de forma semântica que o autor tem a

intenção de mostrar, ele não precisa se preocupar

com a apresentação no momento da composição

Padrões da Internet

Folhas de Estilo – Portabilidade

Um documento pode ser usado em uma mídia

totalmente diferente apenas trocando-se a folha de

estilo.

Padrões da Internet

Folhas de Estilo – Limitações

Apesar do CSS ser um padrão adotado e difundido no

mercado ele ainda possui diversas limitações mas que

estão sendo corrigidas com as novas especificações