Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora.

Transcrição

1 Guia de Consulta Rápida XHTML Juliano Niederauer Novatec Editora

2 Guia de Consulta Rápida XHTML de Juliano Niederauer Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora. ISBN: Novatec Editora Ltda. Rua Cons. Moreira de Barros 1084 Conj São Paulo - SP Brasil Tel.: (0xx11) Fax: (0xx11) novatec@novateceditora.com.br Site: 2

3 Sumário Sumário Conceitos básicos... 5 O que é XHTML?... 5 Diferenças entre HTML e XHTML... 7 Os problemas da HTML... 7 Mudanças na sintaxe... 8 Relação entre HTML, XML e XHTML Antecedentes da XHTML O que acontecerá com a HTML? Por que mudar para a XHTML? Componentes de um documento XHTML Marcação: conteúdo ou exibição? Declaração XML DTDs...13 Classificações da XHTML XHTML Transitional XHTML Strict XHTML Frameset Elementos Atributos Entidades Namespaces Exemplos de documentos XHTML Convertendo HTML para XHTML Tradução manual ou mecânica? Conversão manual Conversão automática Utilizando o HTML Tidy HTML Tidy para DOS HTML Tidy para Windows HTML Tidy on-line Browsers e compatibilidade Ferramentas de desenvolvimento XHTML Quais são as opções?...30 Editores dedicados à XHTML Criando um documento com o Mozquito Boa formação e validade de um documento Estilo CSS em um documento XHTML O que é CSS? Sintaxe e exemplos de folhas de estilo Usando folhas de estilo XSL O que é XSL? Etapas da XSL - Transformação e formatação Quando usar folhas de estilo XSL? Aplicando XSLT a um documento XML Algumas ferramentas XSLT Saxon Xselerator MSXML da Microsoft

4 Sumário XHTML Modularização da XHTML DTD e módulos da XHTML Diferenças em relação à XHTML Strict Elementos e atributos da XHTML Alguns atributos comuns Eventos intrínsecos Eventos Window...52 Eventos elemento Form Eventos de teclado Eventos de mouse Lista dos elementos da XHTML Lista das propriedades CSS Background Bordas Classificação Conteúdo Contornos Dimensões Espaçamento Fontes Listas e marcadores Margens Posicionamento Tabelas Texto Lista dos elementos da XSLT Informações adicionais Versão da XHTML utilizada no Guia Links relacionados Comentários e sugestões Índice Remissivo

5 Conceitos básicos Conceitos básicos O que é XHTML? A XHTML é uma reformulação da linguagem HTML (Hypertext Markup Language) baseada na XML (Extensible Markup Language). Em termos de sintaxe, a XHTML não é tão tolerante como a HTML. Isso ocorre porque a XHTML utiliza as rígidas regras de XML para realizar as marcações em um documento. HTML e XHTML são linguagens bastante parecidas. Um documento XHTML é quase idêntico a um documento HTML, visto que ambas as linguagens utilizam o mesmo conjunto de elementos. No entanto, um documento XHTML possui alguns componentes adicionais, que veremos no decorrer deste guia. Como exemplo, considere o seguinte documento HTML: <html> <head> <title>guia de XHTML</title> </head> <body> <img border= 0" src= novatec.gif > xhtml - Guia de Consulta Rápida Publicado pela Novatec Editora </body> </html> Agora observe como ficaria esse documento na linguagem XHTML: <?xml version= 1.0"?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= > <head> <title>guia de XHTML</title> </head> <body> <img border= 0" src= novatec.gif /> xhtml - Guia de Consulta Rápida Publicado pela Novatec Editora </body> </html> Algumas mudanças podem ser facilmente percebidas ao comparar os dois documentos, como, por exemplo, a inserção das declarações XML e DOCTYPE. 5

6 Conceitos básicos Outras mudanças, que talvez você não tenha percebido, são decorrentes das regras da linguagem XML, como, por exemplo, o acréscimo de um espaço e uma barra (/) antes da tag de fechamento de um elemento vazio. Por exemplo: <img border= 0" src= novatec.gif /> Outra exigência das regras da XML é a correta identação dos elementos, ou seja, a última tag aberta deve ser a primeira a ser fechada. Por exemplo, não seria correto escrever: isto é um teste A forma correta seria: isto é um teste Perceba também que em um documento XHTML, ao contrário de um documento HTML, os elementos não-vazios, ou seja, aqueles que possuem uma tag de abertura e uma de fechamento, não podem ter nenhuma delas omitidas. Como exemplo, considere o seguinte documento HTML, que está malformado. <html> <head> <title>guia de XHTML</title> <body> <h1>isto é um teste </body> Observe que os elementos html, head e h1 não apresentam suas tags de fechamento, </html>, </head> e </h1>. Se esse documento fosse escrito em linguagem XHTML, essas tags deveriam ser acrescentadas, resultando no seguinte documento: <?xml version= 1.0"?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= > <html> <head> <title>guia de XHTML</title> </head> <body> <h1>isto é um teste</h1> </body> </html> Neste guia você verá com mais detalhes essas e outras diferenças entre a HTML e a XHTML, assim como os componentes de um documento XHTML, a lista de elementos e diversos outros recursos que essa linguagem nos possibilita utilizar. 6

7 Diferenças entre HTML e XHTML Os problemas da HTML Conceitos básicos As limitações da HTML levaram o W3C a partir para uma próxima etapa no desenvolvimento de linguagens de marcação, criando a XHTML. Essa nova linguagem consiste em uma reformulação da HTML 4.01 baseada na XML 1.0, que hoje é bastante utilizada por permitir a criação de marcação padronizada, além de fazer a separação entre marcação e exibição. Com isso são resolvidos os problemas existentes na HTML, como os listados a seguir: Código desnecessário: geralmente quem desenvolve um documento HTML, em vez de utilizar folhas de estilo para orientar a exibição, faz isso por meio de tags de formatação (como, por exemplo, a tag ), o que muitas vezes torna o código repetitivo. Isso causa um aumento desnecessário no tamanho do documento e, conseqüentemente, ele demorará mais para ser carregado. Exibição em outras plataformas: como já vimos no início desse guia, é importante usar a marcação apenas para descrever o conteúdo, e não para orientar a exibição. Dessa forma, além de estarmos eliminando código desnecessário, estamos tornando o documento altamente portável, visto que podem ser criadas várias folhas de estilo para orientar a exibição desse documento em diversas plataformas, como, por exemplo, em dispositivos portáteis. Portanto, o objetivo da XHTML é ser uma linguagem multiplataforma. Dificuldade na descrição dos dados: a HTML não se preocupa em descrever os tipos de dados contidos nos documentos, o que torna difícil a recuperação e a troca desses dados. Elementos incluídos por fabricantes de browsers: os desenvolvedores de páginas HTML se deparam com elementos criados pelas próprias empresas que fabricam os programas navegadores, como o Internet Explorer e o Netscape. Visando à conquista de um maior número de usuários, essas empresas acabaram introduzindo seus próprios elementos à HTML, o que dificultou ainda mais a criação de um documento que seja exibido corretamente em diferentes browsers. 7

8 Conceitos básicos Mudanças na sintaxe Agora que você já conhece as limitações da HTML, chegou a hora de conhecer as regras básicas de sintaxe que deverão ser utilizadas na criação dos seus documentos XHTML. Mais adiante veremos regras específicas da XHTML, mas como um documento XHTML também é um documento XML, ele deve aderir às seguintes regras da XML: Todo documento deve possuir um elemento-raiz, no qual estarão contidos todos os outros elementos. Na XHTML, o elemento html é o elemento-raiz, pois entre as tags <html> e </html> estão incluídos os demais elementos do documento. Os nomes dos elementos e atributos devem ser escritos com letras minúsculas. Por exemplo, deve-se usar <body>, e não <BODY>, que era permitido na HTML. A ordem de fechamento das tags tem de ser a inversa da ordem de abertura, ou seja, a última tag que foi aberta deve ser a primeira a ser fechada. Veja um exemplo: Errado: texto em negrito Correto: texto em negrito Todas os elementos que não são vazios devem apresentar uma tag inicial e uma tag final. Exemplo: Errado: isto é um parágrafo Correto: isto é um parágrafo Todos os elementos vazios devem possuir uma barra antes do caractere de fechamento da tag (>). Por questões de compatibilidade, também é recomendável a inserção de um espaço em branco entre a barra e o nome do elemento. Exemplos: <img src= figura.gif /> Os valores dos atributos devem estar entre aspas ou apóstrofos. Exemplo: Errado: <img src=figura.gif /> Correto: <img src= figura.gif /> Ao contrário da HTML, na XHTML os pares atributo/valor não podem ser minimizados, ou seja, não se pode isolar um atributo quando ele possui um único valor. Exemplo: Errado: <input type= checkbox name= caixa checked /> Correto: <input type= checkbox name= caixa checked= checked /> 8

9 Conceitos básicos Como a XHTML está baseada nas regras da XML, os documentos XHTML deverão respeitar todas as regras que foram citadas neste tópico. Além disso, a própria XHTML apresenta algumas regras específicas, que são listadas a seguir: Uma declaração opcional (mas recomendada) em um documento XHTML é a declaração XML, para indicar ao processador que ele está tratando um documento XML. Essa declaração contém informações sobre a versão da XML e opcionalmente sobre o tipo de codificação utilizada. Para inserir a declaração XML, bastar digitar na primeira linha de seu documento: <?xml version= 1.0"?> Em um documento XML, quando for necessária a utilização de uma DTD, a declaração DOCTYPE deve aparecer no início do documento, referenciando a DTD a ser utilizada. No caso da XHTML, já vimos no tópico sobre DTDs como fazer essa referência. Exemplo: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > Na XHTML, o elemento-raiz, ou seja, aquele que contém todos os outros elementos, é o html. Além disso, esse elemento possui um atributo de uso obrigatório, o xmlns, que tem por função referenciar um namespace XML. Para saber mais sobre namespaces leia o tópico Componentes de um documento XHTML. O namespace para a XHTML deve ser referenciado da seguinte forma: <html xmlns= > É obrigatório o uso dos elementos head, title e body em um documento XHTML. No caso de um documento que utiliza frames, o elemento body deve ser substituído pelo elemento frameset. 9

10 Conceitos básicos Relação entre HTML, XML e XHTML 10 HTML é a famosa linguagem de marcação utilizada na criação de páginas Web. Essa linguagem é baseada em tags, normalmente utilizadas para indicar a um browser como apresentar graficamente as diversas partes de um documento. XML é uma linguagem mais flexível, pois ela permite que você crie os seus próprios conjuntos de elementos de marcação. A XML busca executar o que seria a verdadeira função de uma linguagem de marcação: descrever o conteúdo de um documento, e não como ele deve ser exibido. Com as marcações personalizadas da XML, torna-se possível a estruturação dos dados, que posteriormente poderão ser recuperados facilmente e utilizados de diversas maneiras. XHTML é uma aplicação ou um vocabulário XML. Logo, todos os documentos XHTML também são documentos XML. O conjunto de elementos da XHTML é constituído dos mesmos 90 elementos da HTML Essa é a relação básica entre as três linguagens: a XHTML utiliza o conjunto de elementos da HTML em combinação com o conjunto de regras da XML, o que torna a XHTML um vocabulário da XML. Antecedentes da XHTML Antes do surgimento da XHTML foram criadas quatro versões da linguagem HTML: 2.0, 3.2, 4.0 e 4.01, tendo sido a primeira versão, criada em Com o passar do tempo, ocorreu que os fabricantes dos browsers, Microsoft e Netscape, começaram a criar elementos específicos que somente seus próprios browsers eram capazes de identificar. Isso dificultava a criação de páginas Web que fossem compatíveis entre diferentes browsers. Em janeiro de 2000, veio a recomendação da XHTML 1.0, que, segundo o W3C, foi a primeira grande mudança na linguagem HTML desde 1997, quando foi lançada a HTML 4.0. O que acontecerá com a HTML? Se a XHTML é o futuro da Web, isso quer dizer que a HTML vai desaparecer? A XHTML vai substituir a HTML? Minhas páginas Web ficarão obsoletas? Não se preocupe... a HTML não vai desaparecer da noite para o dia, até porque existem bilhões de páginas criadas com essa linguagem. Portanto, não há motivo para esse tipo de preocupação, pois a HTML não vai deixar de existir. No entanto, ao longo do tempo você perceberá os benefícios que a XHTML (e a XML) nos proporciona no que diz respeito a criação e gerenciamento de informações. Além disso, o W3C (World Wide Web Consortium) não criará novas versões da HTML como linguagem de marcação independente.

11 Todos os desenvolvimentos futuros serão baseados na XHTML. Portanto, a tendência é que, com o passar do tempo, as pessoas e organizações passem a usar a XHTML em vez da popular, mas limitada, HTML. Por que mudar para a XHTML? Conceitos básicos O maior benefício da mudança de HTML para a XHTML é que estaremos adquirindo todo o poder da XML. Esse guia não se destina a dar explicações detalhadas sobre XML, mas se você ainda não está familiarizado com a XML, vale a pena consultar alguns livros ou sites sobre o assunto, para descobrir todos os benefícios que os recursos da XML podem lhe trazer. Duas boas fontes de consulta são o site e o guia de XML da Novatec Editora. Então, você já pôde perceber que as principais vantagens de mudar para a XHTML estão relacionadas diretamente com a XML: Documentos XHTML também são documentos XML, o que permite sua edição e processamento em ferramentas XML. Em um documento XHTML podem ser utilizadas diversas tecnologias que foram desenvolvidas para trabalhar em conjunto com a XML, como, por exemplo, o vínculo avançado (XLink), folhas de estilo que convertem documento XML e consultas a documentos XML. Documentos XHTML suportam aplicações (como scripts ou applets) que funcionam com o HTML Document Model e com o XML Document Model. Existe um processo-padrão para a criação de documentos XHTML. Isso elimina aquele problema da criação de novos elementos para um browser específico, fazendo com que um documento funcione igualmente em diversas plataformas e browsers. A criação de padrões permitirá a exibição de páginas Web em plataformas, como telefones celulares, carros, PDAs, televisores, desktops etc. Se você estiver pensando que não tem qualquer interesse em criar páginas para serem vistas em outras plataformas, é bom ir mudando de idéia. Especialistas prevêem que em um futuro bem próximo mais da metade dos usuários de desktop visualizará páginas da Web em outras plataformas. 11

12 Componentes de um documento XHTML Componentes de um documento XHTML Marcação: conteúdo ou exibição? 12 Acostume-se a usar a marcação apenas para descrever o conteúdo e a estrutura de seu documento. É importante que seja feita a separação entre marcação e exibição. O objetivo da marcação sempre foi descrever os dados existentes nos documentos, e não especificar como esses dados devem ser exibidos. Visando à criação de documentos mais portáveis entre diversas plataformas, é fundamental usar a marcação para descrever apenas estrutura e conteúdo, e não para formatação. Para descrever a formatação existem as chamadas folhas de estilo, que veremos mais adiante nesse guia. Lembre-se de que os documentos XML e XHTML são escritos em forma de texto puro (ASCII). O texto é a linguagem universal, entendida por todos os computadores. Se você aplicar tags de marcação para orientar a exibição, estará restringindo a correta exibição de uma página a determinado mecanismo. Se você usar tags de marcação para descrever apenas o conteúdo do documento, poderá criar diversas folhas de estilo para orientar a exibição desse documento em diversos dispositivos. Dessa forma o documento se torna altamente portável, podendo ser visualizado em um browser com resolução de 800x600 pixels, na tela de um telefone celular, de um Palm top etc. Levando em consideração todos esses aspectos, o correto seria que a XHTML não incluísse elementos para formatação dos dados, e deixasse essa tarefa para as folhas de estilo. No entanto, como a primeira versão (XHTML 1.0) representa uma transição da HTML para o conjunto de vocabulários da XML, ela ainda inclui os mesmos elementos de formatação da HTML 4.01, e para facilitar a transição ela apresenta três classificações: XHTML-1.0-Transitional XHTML-1.0-Strict XHTML-1.0-Frameset A classificação XHTML-1.0-Transitional ainda inclui os elementos de formatação da HTML, o que não ocorre na classificação XHTML-1.0-Strict. Para saber mais sobre cada uma das classificações leia o tópico seguinte, sobre DTDs. A partir da XHTML 1.1, os elementos de formatação tornam-se ultrapassados, e as folhas de estilo passam a ser responsáveis pelo controle da exibição. Ou seja, a especificação XHTML 1.1, que será abordada mais adiante nesse guia, está baseada na classificação XHTML-1.0-Strict. A XHTML 2.0 e as futuras versões também deverão estar baseadas nessa idéia.

13 Declaração XML Um documento XHTML também é um documento XML. Portanto, devemos fazer essa identificação para que o processador não se perca ao encontrar o documento XHTML. Para isso digite a seguinte linha antes de qualquer outra coisa: <?xml version= 1.0"?> Algumas considerações sobre a declaração XML: É uma declaração opcional. No entanto, se não for encontrada, o documento estará malformado. Isso quer dizer que o documento não estará de acordo com as regras sintáticas da XML, podendo causar erro na hora do processamento. Se for utilizada, a declaração XML deve estar na primeira linha do documento. O número da versão XML deve estar delimitado por aspas ou apóstrofos. Pode-se utilizar a declaração para especificar também a codificação de caracteres utilizada no documento. Exemplo: <?xml version= 1.0" encoding= ISO "?> DTDs Componentes de um documento XHTML Uma DTD ou Document Type Definition (Definição de Tipo de Documento) é um documento que define os elementos, atributos e entidades que fazem parte de um vocabulário XML. É importante destacar que, na verdade, você não usa a XML para escrever seus documentos, e sim para criar suas linguagens de marcação personalizadas (aplicações ou vocabulários XML), com as quais você vai escrever seus documentos. Em uma DTD é definida uma linguagem de marcação, identificando-se quais os elementos que compõem o vocabulário, como os elementos podem ser usados em conjunto, quais atributos podem ser usados com cada elemento, quais as entidades existentes e suas representações etc. Esse conjunto de regras definidas na DTD é chamado de esquema. Comparando um documento a um esquema, pode-se verificar a validade desse documento para o vocabulário XML definido no esquema. Um documento XML não exige o uso de uma DTD, mas é importante utilizá-la para manter a consistência no documento. Para definir qual DTD será usada, deve-se utilizar, no início do documento XHTML, a declaração DOCTYPE. 13

14 Componentes de um documento XHTML Classificações da XHTML 1.0 A seguir são apresentadas as três classificações da XHTML 1.0, e as DTDs que definem cada uma delas: XHTML Transitional Inclui os mesmos elementos da HTML 4.01, e pode ser usada por quem quiser aderir lentamente à XHTML. A XHTML Transitional permite usar a XML e suas tecnologias, como as folhas de estilo e o vínculo avançado (Xlink), além de manter os documentos compatíveis com browsers mais antigos. URL da especificação: Definição da DTD no documento: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > XHTML Strict Não inclui os elementos e atributos de formatação que existiam na HTML A especificação seguinte, a XHTML 1.1, está baseada na XHTML Strict. Portanto, o ideal seria usar a XHTML Strict para descrever o conteúdo dos documentos, e as folhas de estilos para controlar como esse conteúdo será exibido. A XHTML 2.0 e as futuras versões também estarão baseadas nessa idéia. URL da especificação: Definição da DTD no documento: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > XHTML Frameset Deve ser usada caso você queira dividir um documento em frames. Também inclui os elementos da HTML URL da especificação: Definição da DTD no documento: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN > 14

15 Elementos Componentes de um documento XHTML Assim como a linguagem HTML, a XHTML (e a XML) utiliza os mesmos blocos de construção: elementos, atributos e valores. O conjunto dos elementos permitidos está especificado no vocabulário XML, definido na DTD. É importante destacar que as três DTDs da XHTML definem os elementos (e também os atributos) com letras minúsculas. Portanto, para criar documentos XHTML bem-formados, utilize sempre letras minúsculas para escrever elementos e atributos. Os elementos podem conter textos e inclusive outros elementos, e são utilizados para descrever o conteúdo de um documento XHTML. Dois tipos de elementos podem ser encontrados em um documento XHTML: Elementos que descrevem dados: são formados por um par de tags (uma tag de início e uma tag de fim). Exemplos: este é um texto em negrito este é um parágrafo <a href= >Clique aqui</a> Elementos vazios: são formados por apenas uma tag. Não descrevem dados, mas incluem alguma informação no documento. Em XHTML, para representar um elemento vazio deve-se colocar uma barra (/) antes do sinal de fechamento (>) da tag. Exemplos: <hr /> <img src= figura.gif /> Mais adiante nesse guia, no tópico Lista de Elementos, você encontrará a listagem completa dos elementos da XHTML, assim como seus atributos. 15