Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio

Transcrição

1 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 Há atualmente 3 tipos de documentos XHTML: XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset... 11

2 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!

3 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>

4 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.

5 <BODY> <P>Este é um parágrafo</p> </BODY> <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. <p>este é um parágrafo <p>este é outro parágrafo <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 />. Esta é uma quebra<br> Aqui vem um filete horizontal:<hr> Aqui está uma imagem <img src="happy.gif" alt="rosto feliz"> 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:

6 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 <table WIDTH="100%"> <table width="100%"> Valores de Atributos Devem Estar Entre Aspas <table width=100%> <table width="100%">

7 A Minimização de Atributos É Proibida <dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize> <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.

8 <img src="picture.gif" name="picture1" /> <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=" <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.

9 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= é 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"

10 " <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" " 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.

11 XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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" " 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" " Use esta quando você quer usar Frames (molduras) HTML para particionar a janela do navegador em duas ou mais molduras (frames).