Apostila de XHTML

( Curso Introdutrio)

Verso 0.2a 7 de maro de 2005 - Verso - Rascunho -

Prof. Luis Rodrigo de O. Gonalves

E-mail:luisrodrigoog@yahoo.com.br site: http://www.lrodrigo.cjb.net

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 1 de 33

Introduo
De onde veio XHTML? Quando o W3C definiu os parmetros da quarta verso do HTML
(HyperText Markup Language) em 1997, os profissionais ficaram satisfeitos com o resultado final e o adotaram sem problemas como a base definitiva de programao para a criao de pginas na Web. Depois de trs anos, a linguagem sofre o que parece ser sua maior evoluo com a adio de aplicaes da metalinguagem XML (EXtensible Markup Language). Nasce ento o XHTML 1.0, a nova linguagem-base para criao de pginas Web que rene todas as qualidades do HTML com os recursos do XML, destinado para substituir, aos poucos, o HyperText 4.0. Todas as linguagens de marcao da web so baseadas em SGML, uma metalnguagem complexa e complicada projetada para mquinas com a finalidade de servir de base para criao de outras linguagens. O SGML foi usado criar XML (Extensible Markup Language), tambm uma metalinguagem, porm bem mais simples. Com XML voc cria suas prprias tags e atributos para escrever seu documento web. Isto significa que voc quem cria sua linguagem de marcao. XHTML foi criado dentro deste conceito e por isso uma aplicao XML. As tags e atributos do XHTML foram criadas ("inventadas") aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras. XHTML uma linguagem de marcao bastante familiar para quem conhece HTML e a transformao de um documento existente de HTML para XHTML uma tarefa bem simples. A juno das duas linguagens resultou no XHTML (EXtensible HyperText Markup Language), uma linguagem quase igual ao HTML original, o que facilita muito aos programadores, que esto acostumados com todas as tags e cdigos desde que foi criada, mas que capaz de apresentar a "flexibilidade" da linguagem XML de levar seu contedo registrado nela para outras plataformas. Graas proximidade do XHTML 1.0 com seu antecessor, o HTML 4.0, os elementos XML podem ser inseridos nas pginas HTML j existentes, adicionando as novas tags e elementos originados da nova linguagem, gerando infinitas novas possibilidades para o futuro da Web em termos de divulgao de contedo e de aperfeioamento da programao.

Qual a finalidade do XHTML? XHTML a sigla em ingls para EXtensible HyperText Markup
Language que em portugus resulta em Linguagem de Marcao para Hipertexto Extensvel, uma aplicao XML, escrita para substituir o HTML e nada mais do que um HTML "puro, claro e limpo".

Quais as vantagens de se usar XHTML? Em primeiro lugar a compatibilidade da linguagem

XHTML com as futuras aplicaes de usurios, garantindo desde j que as criaes XHTML conservar-seo estveis por longos anos. A tendncia que futuras verses de brownsers e agentes de usurios em geral, deixem de suportar elementos e atributos j em desuso ("deprecated") segundo as recomendaes da W3C, bem assim como antigos e ultrapassados esquemas e esboos do HTML. XHTML a linguagem da web do futuro desde j a disposio de projetistas e desenvolvedores web.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 2 de 33

Ele um cdigo consistente que dispensa uso de "truques" e "hacks" para contornar "bugs". Editar um cdigo existente uma tarefa bem simples por se tratar de uma escrita limpa e evidente. O tempo de carga de uma pgina XHTML mais rpido pois os browsers tem a interpretar uma pgina limpa sem ter que interpretar e decidir sobre renderizao de erros de cdigo. Uma pgina XHTML mais acessvel aos browsers e aplicaes de usurio padro incrementando a interoperabilidade e a portabilidade dos documentos web. Uma pgina XHTML totalmente compatvel com todas as aplicaes de usurios para HTML, antigas e j ultrapassadas.

XHTML uma "Web Standard"? XHTML 1.0 uma recomendao da W3C e sua verso
atual data de 26 de janeiro de 2000. Isto significa que trata-se de uma linguagem estvel, oficialmente especificada pela W3C, tendo sido projetada e revisada pelos seus membros e uma "Web Standard".

2) Regras Bsicas do XHTML

O XML s funciona quando todas as tags estiverem bem fechadas, no HTML diferente, as vezes deixamos tags abertas, e ele funcionava normalmente. Para se fazer um XHTML vlido, devemos: Fechar todas as tags: No devemos esquecer de fechar todas as tags: <p></p>, <b></b>, etc... E no devemos esquecer de forma alguma de fechar as tags nicas, ou seja, ao invs de <br> escrevemos <br></br>, ou na forma simplificada: <br />.

Use letras minsculas: Quem nunca viu um cdigo fonte de um documento HTML escrito assim: <A HREF="http://tags.com.letras.minsculas/" TARGET="_BLANK"> </A>

Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minscula!

No esquea das "aspas": Esta regra bem simples. Todos os atributos XHTML devem conter "ASPAS".

Atributo name: O antigo atributo NAME foi substitudo pelo atributo ID. Como os clientes, ainda utilizam antigos browsers, voc pode sem problema utilizar as duas formas juntas. Por exemplo: <img src="imagem.gif" id="imagem" name="imagem" />

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 3 de 33

Atributos sem valor: No devemos esquecer tambm os atributos que escrevemos sem valor, por exemplo:

ERRADO: <option selected> <frame noresize> <input checked> <input readonly> CERTO: <option selected="selected"> <frame noresize="noresize"> <input checked="checked"> <input readonly="readonly">

Se voc est migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha., ele uma ferramenta para validar e consertar cdigos HTML, voc pode escolher qual a verso do HTML quer validar, uma das opes a XHTML. Caso j esteja escrevendo um XHTML e quer que seu cdigo fique livre de erros, o TIDY pode arruma-lo . Ele foi originalmente desenvolvido por Dave Raggett e hoje mantido por um projeto de cdigo aberto: SourceForge, por um grupo de voluntrios. Os documentos devem ser bem formados: Um documento diz-se bem formado quando est estruturado de acordo com as regras definidas nas Recomendaes para XML 1.0 [ XML ]. Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>. A estrutura bsica do documento deve ser conforme abaixo: <html> <head> ... </head> <body> ... </body> </html>

O atributo lang: Use o atributo lang para definir a lngua em que foi escrito o documento e o

atributo xml:lang para definir a verso do XML.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 4 de 33

3) XHTML - Conceitos Bsicos

Todos os documentos XHTML podem ser divididos em duas partes bsicas: o cabealho e o corpo; assim como duas especiais: a declarao da verso e a declarao do tipo do documento. O cabealho possui informaes sobre o documento em si, seus principais componentes so: Elemento Descrio Deve ser o primeiro elemento do cabealho, informa o texto que aparece na barra de ttulo do navegador; Contem informaes sobre o contedo do documento; Elemento utilizado para realizar a ligao entre os documentos e as pginas contendo as folhas de estilo; Informaes sobre as folhas de estilo usadas em um determinado documento; Espao utilizado para insero de cdigo, por exemplo: java script; Especifica o endereo do documento XHMTL Obrigatri o S

<title> </title>

<meta> <meta>

<link> </link>

<style> <style> <object> </object> <script> <script> <base> <base>

N N N

A declarao de verso, que informa verso da linguagem XML que ser utilizada na descrio do documento, tambm faz parte do cabealho, sua funo determinar com ser o processo de codificao do texto (encoding), por exemplo: <?xml version=1.0 encoding=iso-8859-1?>

J a declarao do tipo do documento (DOCTYPE), que informa a DTD e que deve ser utilizada para validar o documento apresentado outra declarao que integra o cabealho. A seguir temos um exemplo desta linha: <!DOCTYPE html PUBLIC -//w3c/DTD XHTML 1.0 Transitional //EN http://www.w3.org/TR/xhtml1-transational.dtd

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 5 de 33

O Doctype (Document Type Definition, vulgo DTD) a primeira linha de um arquivo XHTML, para que o documento possa ser validado, uma vez que, ela serve para informar ao browser o tipo de documento a ser visualizado. Existem 3 tipos bsicos: Strict: sado quando se deseja um cdigo100% XHTML e sem erros:

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

Transitional: o modo mais usado, pois utilizado na migrao do HTML para o XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset: usado quando se utiliza FRAMES em um site:

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

A segunda e principal parte do documento o corpo, nele so inseridos os elementos de marcao , os principais elementos do corpo do documento so descritos a seguir.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 6 de 33

2.1) Elementos bsicos do corpo do documento

Como j foi dito o corpo do texto formado pelas tags de formatao, utilizadas estruturao das informaes a serem exibidas, destes elementos de marcao podemos destacar os elementos de bloco que so marcadores destinados tanto a estruturao quanto ao estilo da pgina: Elementos de Blocos Nome Marcador Descrio um dos marcadores mais utilizados, sua representao depende do navegador, mas normalmente representado por um espao antes e depois do pargrafo; Utilizado com folhas de estilo na especificao de blocos e texto; Introduzem ttulos no documento, podem ser de seis nneis (1 at 6), seu tamanho de fonte varia de 24 10 ptos;

Pargrafo

<p> </p>

Diviso

<div> </div>

Ttulos

<hn> </hn>

Blockquete

Utilizados para criao de citaes, que inserem uma <bloquete> linha antes e depois do texto, assim como um nvel de </bloquete> identao; <pre> </pre> Utilizado para preservar a formatao do texto, no interpretando seu contedo

Preserve

Exemplo 01:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> XHTML : Testando os elementos Hn </title> </head> <body> <h1> Nivel 1 </h1> <h2> Nivel 2 </h2> <h3> Nivel 3 </h3> <h4> Nivel 4 </h4> <h5> Nivel 5 </h5> <h6> Nivel 6 </h6> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 7 de 33

Exemplo 02:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> XHTML : Exemplo 02 </title> </head> <body> <p> Isto &#233; um par&#225;grafo</p> <div> Esta &#233; a primeira div </div> <div> J&#225; esta &#233; a segunda </div> <div> E finalmente esta &#233; a ultima </div> <p> E outro par&#225;grafo</p> <blockquote> "Este agora &#233; um bloco de cita&#231;&#227;o, pequeno mais &#233;"</blockquote> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 8 de 33

Exemplo 03:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> XHTML : Exemplo 02 </title> </head> <body> <p> Este &#233; um par&#225;grafo com mais de uma linha, contudo parace ser tudo em uma !!! </p> <pre> Este &#233; um par&#225;grafo com mais de uma linha, que &#233; exibido corretamente !!! </pre> </body> </html>

Um outro conjunto de elementos so os descritivos de linha: Elementos Descritivos de Linha Nome Citao Cdigo Definio nfase Span Forte Marcador <cite> </cite> <code> </code> <dfn> </dfn> <em> </em> <span> </span> <strong> </strong> Fonte em itlico Fonte mono-espaada Fonte em itlico e negrito Fonte em itlico Usado para dimensionar parte do texto, normalmente est relacionado com algum estilo de uma folha de estilo; Fonte em negrito Descrio

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 9 de 33

Exemplo 04:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XTHML : Exemplo 04 </title> </head> <body> <div>Exemplo de <cite> uma citcao </cite>.</div> <div>Exemplo de <code> um codigo </code></div> <div>Exemplo de <em> um texto com emfase </em>.</div> <div>Exemplo de <span>de um span </span></div> <div>Exemplo de <strong>de um texto forte</strong>.</div> </body> </html>

J os elementos de estilo de linha permitem introduzir estilos somente nas mdias visuais, como navegadores, sendo desaconselhado seu uso quando se busca compatibilidade com outras mdias, seus exemplares bsicos so: Elementos de Estilo de Linha Nome Grande Small Negrito Itlico Riscado Subscrito Sobrescrito Sublinhado Teclado True-Type Marcador <big> </big> <small> </small> <b> </b> <i> </i> <strike> </strike>   <u> </u> <kbd> </kbd> <tt> </tt> Descrio Fonte maior que o padro Fonte menor que o padro Texto em negrito Texto em itlico Texto riscado ao meio Texto subscrito Texto sobrescrito Texto Sublinhado Texto nono-espaado, como se tivesse sido escrito na mquina de escrever Texto nono-espaado

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 10 de 33

Exemplo 05:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XTHML : Exemplo 05 </title> </head> <body> <div> Texto em <b> negrito </b>.</div> <div> Texto <big> maior que o padrao </big>.</div> <div> Texto em <i> italico</i> .</div> <div> Texto da <kbd> maquina de escrever </kbd>.</div> <div> Texto <u> sublinhado </u>.</div> <div> Texto <strike> Riscado</strike>.</div> <div> Texto <small> menor que o padrao </small>.</div> <div> Texto _subscrito.</div> <div> Texto ^sobrescrito.</div> <div> Texto em <tt> true-type .</tt> </div> </body> </html>

Alm destes podemos utilizar outros dois elementos de estilo, o primeiro o <br /> utilizado para inserir uma quebra de linha, e o segundo o <hr /> utilizado para inserir uma linha horizontal na apresentao do documento;

2.2 Elementos de Listas

O XHTML d suporte a trs tipos de listas: ordenadas, no ordenada e de definio. As listas no ordenadas so criadas fazendo-se uso do marcador <ul> </ul>, e dos elemento <li> </li>. Este tipo de lista pode, atravs do atributo type, apresentar trs tipos de marcadores: um circulo vazio (circle), um circulo cheio (disc) e um quadrado (square). Assim como pode possuir vrios nveis, ou seja, uma lista dentro da outra. Logo abaixo temos um exemplo da utilizao destes marcadores. As listas ordenadas possuem elementos que so numerados, o marcador utilizado o <ol> </ol> e para definio de cada sub-elemento o <li> </li>. O tipo de numerao pode ser alterado com o uso do atributo type, o qual pode assumir os valores: 1 (arbico), a, A (alfabtico), i e I (romano). No Exemplo 07, podemos ter uma idia de seu uso. J as listas de definio podem ser utilizadas na definio de termos, o marcador utilizados o <dl> </dl>, o marcador a ser utilizado no texto a ser definido o <dt> </dt> e a definio dos termos feita atravs do marcador <dd> </dd>.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 11 de 33

Exemplo06:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 04</title> </head> <body> <hr /> <h1> Exemplo de uso de Listas n&#227;o ordenadas</h1> <hr /> <br /> <b> Primeira Lista </b> <ul> <li type="circle"> Primeiro Item </li> <li type="circle"> Segundo Item </li> </ul> <br /> <i> Segunda Lista</i> <ul type="disk"> <li> Primeiro Item </li> <li> Segundo Item </li> </ul> <u> Terceira Lista </u> <ul type="square"> <li> Primeiro Item</li> <li> Segundo Item </li> </ul> _{Quarta Lista} <ul type="circle"> <li> Item 1 <ul type="disk"> <li> Item 1.1</li> <li> Item 1.2</li> </ul> </li> <li> Item 2 <ul type="square" > <li> Item 2.1 </li> <li> Item 2.2 </li> </ul> </li> <li> Item 3</li> </ul> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 12 de 33

Exemplo 07:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 07</title> </head> <body> <h1> Exemplo de uso de Listas ordenadas</h1> <b> Primeira Lista </b> <ol type="1"> <li> Primeiro Item </li> <li> Segundo Item </li> </ol> <i> Segunda Lista</i> <ol type="a"> <li> Primeiro Item </li> <li> Segundo Item </li> </ol> <u> Terceira Lista </u> <ol type="A"> <li> Primeiro Item</li> <li> Segundo Item </li> </ol> _{Quarta Lista} <ol type="i"> <li> Item 1 <ol type="I"> <li> Item 1.1</li> <li> Item 1.2</li> </ol> </li> <li> Item 2 <ol type="I" > <li> Item 2.1 </li> <li> Item 2.2 </li> </ol> </li> <li> Item 3</li> </ol> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 13 de 33

Exemplo 08:

2.3) Atributos
Os atributos so utilizados para complementar a personalizao dos componentes, seja com relao a seu comportamento ou quanto a sua apresentao. Estes atributos so inseridos sempre nos marcadores de abertura e os valores atribudos a eles devem estar entre aspas dupla. Dentre os atributos podemos destacar os atributos universais, os quais podem ser utilizados por qualquer marcador existente na linguagem. Atributos Universais Atributo id class title Descrio Identifica unicamente os elementos dentro dos documentos XHTML; Especifica a classe a que um elemento pertence; Especifica um ttulo que pode ser utilizados para nomear o elemento; Especifica o estilo de exibio do elemento. Sua sintaxe : style style: [propriedade1]:[valor1]; [propriedade2:[valor2]; ....

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 14 de 33

Outra famlia de atributos a de apresentao, cuja maioria das opes foram migradas para as folhas de estilo, e cujo uso direto no documento XHTML deve ser evitado: Atributos de Apresentao Elemento --Atributo align color font-size div font-family backgound-color margin backgound bgcolor text body link vlink alink align hr noshade size width size font color face basefont Descrio alinhamento horizontal, pode seguintes valores: left, right e center cor da fonte tamanho da fonte tipo da fonte cor de fundo do texto margem a ser inserida em toda volta do texto imagem de fundo; cor de fundo; cor do texto da pgina; cor dos textos dos links no visitados; cor dos textos dos links j visitados; cor dos textos dos links que esto sendo chamados. alinhamento com relao ao documento, assume os valores: left, right e center; impede o uso de sombra na linha; espessura da linha; largura da linha em relao a pgina assume valores de 1 5 cor da fonte fonte a ser utilizada mesmas propriedades do elemento font, mas cujos valores especificam a formatao de todos os elementos da pgina. assumir os

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 15 de 33

2.4) Ligaes
As ligaes hipertexto so figuras ou trechos de textos que quando clicados, ou acionados, redirecionam o navegador ou leitor XHML um outro documento, ou a outro ponto do documento atual. Neste contexto h o conceito de pgina de origem, na qual existe a ligao, e apgina destino, para a qual a ligao aponta. Em XHTML existem as ligaes absolutas, normalmente utilizada para documentos em outros servidores, e as ligaes relativas, utilizadas para referenciar pginas que esto hospedadas no mesmo servidor que a pgina de origem. O elemento <a> </a> utilizado para criar as ligaes nos documentos, que so feitas atravs do uso do atributo href, cujo valor o endereo de destino da ligao.: <a href=endereo de destino> texto da ligao </a>

Uma ligao relativa pode se parecer com: <a href=../aulas-ambiente-internet.xhtml> Notas de aulas </a>

... e uma ligao absoluta: <a href=http://www.lrodrigo.cjb.net/estacio/aulas-ambiente-internet.xhtml> Notas de aulas </a>

onde: http:// o nome do protocolo utilizado, e poderia ser substitudo por ftp:// ou mailto: dependendo da necessidade; www.lrodrigo.cjb.net o endereo do servidor a ser acessado; /estacio/aulas-ambiente-internet.xhtml o endereo da pgina, dentro do servidor. Outro atributo que pode ser utilizado pelo elemento <a> o name, utilizado na criao de ancoras dentro do mesmo documento. Assim uma ligao pode apontar para o mesmo documento no qual foi inserida: <a name=nome> Texto da ancora <a>

Para referenciar um ancora no mesmo documento podemos usar: <a href=#ancora> Texto da ligao <a>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 16 de 33

Para referenciar um ancora em outro documento: <a href=endereo do documento#ancora> Texto da ligao <a>

Uma opo ao atributo name, mas que s funciona no navegadores mais recentes o atributo id presente na maioria dos elemento do XHTML, por exemplo: <h6 id=ambiente_internet> Material da disciplina Ambientes Internet </h6>

Para definir uma ligao no mesmo documento para este elemento poderamos utilizar: <a href=ambiente_internet> Tenha acesso ao material das aulas <a>

Exemplo de uso:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 09</title> </head> <body> <h1> Exemplo de uso de Ligaes Hipertexto </h1> <p> Menu :</p> <p> [-] <a href="#uteis">Links teis</a></p> <p> [-] <a href="#busca">Sites de Busca</a></p> <p> [-] <a href="#ref">Referencias</a></p> <p> <a name="uteis">Links teis :</a> </p> <p> | <a href="http://www.yahoo.com.br">http://www.ig.com.br</a> | <a href="http://www.bol.com.br">http://www.bol.com.br</a> | <a href="http://www.gmail.com">http://www.gmail.com</a> | <a href="http://www.hotmail.com">http://www.hotmail.com</a> | </p> <p> <a name="busca">Sites de Busca :</a> </p> <p> | <a href="http://www.google.com.br">http://www.google.com.br</a> | <a href="http://www.yahoo.com.br">http://www.yahoo.com.br</a> | <a href="http://www.altavista.com.br">http://www.altavista.com.br</a> | <a href="http://www.cade.com.br">http://www.cade.com.br</a> |</p> <p> <a name="ref">Referencias :</a> </p> <p> | <a href="http://www.openoffice.org.br/saite/">Open Office</a> | <a href="http://www.debian.org/">Debian Linux</a> | <a href="http://www.suse.com"> SuSe Linux</a> | </p> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 17 de 33

2.5) Manipulando Imagens

Atualmente os navegadores aceitam trs formatos de figuras: GIF, JPEG e PNG, que podem ser includas nas pginas atravs do elemento <ing />. Este elemento possui o atributo alt, que deve ser utilizado para fornecer um texto alternativo quando a imagem no puder ser visualizada, j o atributo src deve ser utilizado para indicar a localizao da figura. Por exemplo: <ing src=../papagaio.jpg alt=charge do papagaio />

Alm destes, o elemento ing possui os seguintes atributos: Atributos Atributo longdec width height vspace Valor -----pixels, percentagem pixels, percentagem pixels, percentagem Descrio aponta para um arquivo texto, que possui uma descrio para a imagem. define o comprimento da imagem define o altura da imagem espao vertical a ser deixado ao redor da imagem

(descontinuado)

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 18 de 33

(descontinuado)

hspace align

pixels, percentagem right, left, top, middle, botton pixels

espao horizontal a ser deixado ao redor da imagem posiciona a figura da pgina. define a espessura da borda

(descontinuado)

(descontinuado)

border

Exemplo de uso:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 10</title> </head> <body> <h1> Exemplo de uso de Figuras</h1> <p> Figura com alinhamento padro: <img src="galho2.jpg" width="100" border="0" />, "middle" <img src="galho2.jpg" width="100" border="0" align="middle" />, "texttop" <img src="galho2.jpg" width="100" border="0" align="texttop"/>. </p> <p> Borda = 0 <img src="galho2.jpg" width="100" border="0" align="middle" />, borda = 1 <img src="galho2.jpg" width="100" border="1" align="middle" />, borda = 2 <img src="galho2.jpg" width="100" border="2" align="middle" />. </p> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 19 de 33

2.6) Manipulando Tabelas

Em XHTML todas as tabelas devem possuir um ttulo, cabealho, corpo e roda-p. O elemento <table> </table> o responsvel pela manuteno das tabelas nesta linguagem. Na construo de uma tabela podemos utilizar os seguintes elemento para definir suas partes: Atributos Elemento <table> </table> <caption> </caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody> <tr> </tr> <td> </td> Descrio delimita o tabela e seus elementos elemento opcional que indica o ttulo da tabela delimita o cabealho da tabela delimita o roda-p da tabela delimita o corpo da tabela delimita as linhas da tabela delimita as colunas da tabela

Uma clula pode se estender por mais de uma coluna, para isto deve ser utilizado o atributo colspan seguido do nmero de colunas que a clula deve se expandir. Caso a clula tenha de ocupar mais de uma linha o atributo a ser utilizado o rowspan, ambos os atributos devem ser inseridos dentro de uma declarao <td> </td>. Uma tabela possui alguns atributos importantes dos quais podemos destacar: Atributos Atributo border frame rules cellspacing cellpading bgcolor align Valor pixels Descrio espessura da linha do desenho da borda da tabela

void, above, below, lhs, rhs, informa qual rea deve ser desenhada hsides, vsides, box, border em torno da tabela. none, all, groups, row, cols pixels pixels nome da cor, cdigo hexadecimal left, right informa como as linhas entre as clulas sero desenhadas espaamento entre as clulas espaamento entre o contedo da clula e sua borda define a cor de fundo da tabela, da linha ou da clula define o alinhamento da tabela dentro do documento

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 20 de 33

Exemplo de uso de tabelas :

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 11</title> </head> <body> <h1> Exemplo de uso de Tabelas </h1> <br /> <table border="1"> <caption> Ttulo da Tabela </caption> <thead> Cabealho da Tabela </thead> <tbody> <tr> <td>Linha 1 Coluna 1</td> <td>Linha 1 Coluna 2</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td>Linha 2 Coluna 3</td> </tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> <td>Linha 3 Coluna 3</td> </tr> </tbody> <tfoot> Rodap da tabela </tfoot> </table> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 21 de 33

Exemplo de uso de tabelas com unio de clulas:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 12</title> </head> <body> <h1> Exemplo de uso de Tabelas</h1> <br /> <table border="1"> <caption> Ttulo da Tabela</caption> <thead> Cabealho da Tabela </thead> <tbody> <tr> <td colspan="2">Linha 1 Coluna 1</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td rowspan="2">Linha 2 Coluna 3</td> </tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> </tr> </tbody> <tfoot> Rodap da tabela </tfoot> </table> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 22 de 33

Exemplo de uso de alguns dos atributos das tabelas:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 13</title> </head> <body> <h1> Exemplo de uso de Tabelas </h1> <br /> <table border="1" frame="box" rules="groups" bgcolor="#00C0C0" > <caption> Ttulo da Tabela</caption> <thead> Cabealho da Tabela </thead> <tbody> <tr> <td colspan="2">Linha 1 Coluna 1</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td rowspan="2">Linha 2 Coluna 3</td> </tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> </tr> </tbody> <tfoot> Rodap da tabela </tfoot> </table> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 23 de 33

2.7) Trabalhando com Frames

Os frames, ou quadros, permitem que uma pgina possa ser dividida em vrias partes, cada uma carregando outra pgina. Mesmo no tendo seu uso indicado no XHTML, eles continuam sendo largamente empregados. Dependendo da resoluo do monitor, o cliente pode ter problemas em visualizar uma pgina que faa uso de frames. Para a criao de uma pgina com frames devemos utilizar dois elementos: <frameset> </frameset> e o <frame> </frame>, o primeiro define as sesses do documento e o segundo o contedo de cada sesso. O elemento frameset possui os seguintes atributos: Atributos Atributo cols Valor pixels, relaes e percentagem, coringa pixels, relaes e percentagem, coringa Descrio informa a quantidade e o tamanho das colunas

rows

informa a quantidade e o tamanho das linhas

O elemento frame possui os seguintes atributos: Atributos Atributo src id Valor endereo nome Descrio informa a localizao do arquivo XHTML a ser carregado informa o nome do frame, a ser utilizado pelo atributo target de uma ligao informa se deve ser includa as barras de rolagem quando a pgina no cabe por inteiro no frame especifica a espessura da borda do frame impede que o usurio redimensione um frame espao a ser deixado entre a parte superior e inferior do frame espao a ser deixado entre o lado esquerdo e direito do frame

scrolling frameborder noresize marginheight margintwidth

yes, no pixels noresize pixels pixels

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 24 de 33

Para um melhor uso dos frames, podemos utilizar as ligaes para alterar o seu contedo a medida que o usurio clica nos hiperlinks, para tal temos de definir onde a ligao deve abrir o documento, isto feito atravs do atributo target. Os possveis valores para este atributo so: Atributos Valor _self _blank _parent _top nome Descrio uma nova pgina ser carregada no frame atual uma nova pgina ser carregada em uma nova janela uma nova pgina ser carregada no frame pai uma nova pgina ser carregada nesta janela, substituindo a pgina atual que usa frames informa o nome do frame no qual a pgina deve ser carregada

Exemplo de uma pgina com a definio do frameset:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 14</title> </head> <body> <frameset rows="80px,80%" > <frame src="exemplo14-top.xhtml" noresize="noresize" name="topo" id="topo" marginwidth="10" marginheight="10" scrolling="no" /> <frameset cols="130px,80%" > <frame src="exemplo14-esq.xhtml" name="esq" id="esq" noresize="noresize" scrolling="no" marginwidth="10" marginheight="10" /> <frame src="exemplo14-dir.xhtml" name="dir" id="dir" noresize="noresize" scrolling="no" marginwidth="10" marginheight="10" /> </frameset> </frameset> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 25 de 33

Exemplo de uma pgina com do frame topo :

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 14</title> </head> <body> <p align="center"> <img src="tux2.gif" align="middle" height="50" border="0" /> [ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ] <img src="tux1.gif" align="middle" height="50" border="0" /> </p> </body> </html>

Exemplo de uma pgina com do frame esq :

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 14</title> </head> <body> <p align="center"> <img src="papagaio-direita.gif" height="200" border="0" /> </p> </body> </html>

Exemplo de uma pgina com do frame dir :

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 14</title> </head> <body> <br /> <br /> <p align="center"> <img src="linuxrodrigo-limpo.gif" width="400" border="0" align="center" /> </p> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 26 de 33

Resultado obtido no navegador

Contudo a forma indicada de se trabalhar com frames no XHTML atravs do uso dos iframes, os quais no necessitam da declarao dos frameset. Eles so normalmente conhecidos como frames de linha e possuem a sintaxe:

<iframe src=pagina a ser carregada> Texto a ser apresentado caso o browser no seja compatvel </iframe>

Exemplo de uso:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> XHTML Exemplo 15 </title> </head> <body> <p> <img src="top.jpg" width="750" height="161" border="0" /> </p> <iframe height="250" width="750" align="center" scrolling="no" marginheight="10" marginwidth="10" src="exemplo14-dir.xhtml"> Texto a ser utilizado por navegadores que no suportam iframe </iframe> <p align="center"> <img src="tux2.gif" align="middle" height="50" border="0" /> [ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ] <img src="tux1.gif" align="middle" height="50" border="0" /> </p> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 27 de 33

2.8) Trabalhando com Formulrios

Os formulrios so utilizados para o envio de informaes ao servidor ou para a interao da pgina com o usurio atravs do uso de java scripts. Os dados do formulrio sero tratados somente quando ocorrer sua submisso, que pode ser realizada atravs do boto de submit. Os valores inseridos nos formulrios so retornados em pares, onde a primeira parte o nome do elemento e a segunda o valor atribudo, sendo que eles so separados uns dos outros pelo sinal de igual (=) ; Os dados podem ser submetidos atravs de dois mtodos GET e POST. No mtodo GET os dados sero anexados URL e enviados ao servidor, j o mtodo POST envia os dados junto com as demais informaes contidas no cabealho do HTTP. Ao contrrio do POST que pode manipula qualquer quantidade de informaes, o GET fica limitado pelo tamanho mximo permitido para uma URL, alm disto o GET menos seguro, mas seu uso permite o reenvio de um formulrio sem que o mesmo seja re-digitado Para a construo dos formulrios devemos fazer uso do elemento <form> </form>, que possui os seguintes atributos: Atributos Atributo Valor Descrio Informa o endereo da pgina que ir tratar as informaes do formulrio. O endereo no precisa ser uma pgina, pode ser um endereo de e-mail (mailto:e-mail@dominio.com.br) especifica o mtodo de envio das informaes

action

endereo

method

GET, POST

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 28 de 33

name target enctype

nome frame text/plain

especifica o nome do formulrio, uma pgina pode possuir mais de um formulrio informa o nome do frame que tratar os dados do formulrio informa o mtodo de codificao utilizado no envio dos dados

Para armazenar as informaes fornecidas pelo usurio podemos fazer uso do elemento <input / > , que possui os seguintes atributos: Atributos Atributo name value disabled type Valor nome valor disabled tipo Descrio especifica o nome do elemento especifica o contedo inicial do elemento informa que um elemento manipulado pelo usurio informa o tipo do elemento no pode ser

Os principais tipos do elemento input so : caixa que pode ser utilizada para insero de informaes [texto] caixa utilizada para digitao de senhas, ou campos que no devem ser lidos por terceiros [texto] caixa para digitao do nome de um arquivo, conta ainda como um boto para realizar a busca do elemento [texto] cria um boto que ao ser clicado submete o contedo do formulrio [boto] cria um boto que ao ser clicado restaura os campos ao seu valor default [boto] cria um boto que pode ser associado a um java script insere uma imagem [boto] insere uma caixa de seleo, que permite a seleo de mais de uma elemento ao mesmo tempo [seleo] inserida uma caixa de seleo, que no permite selees mltiplas [seleo] insere campos ocultos, que no so exibidos, mas que podem ser utilizados para o armazenamento temporrio de informaes

text password

file

submit reset input button image checkbox

radio

hidden

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 29 de 33

O elemento INPUT do tipo texto, possui os atributos: Atributos Atributo width maxlenght readonly Valor numeral numeral readonly Descrio quantidade mxima de caracteres largura mxima do elemento o contedo da caixa no pode ser alterada

O elemento INPUT do tipo boto, possui o atributo: Atributos Atributo disabled Valor true Descrio utilizado para desabilitar um determinado boto

O elemento INPUT do tipo seleo, possui o atributo: Atributos Atributo checked Valor checked Descrio especifica quais elementos esto marcados como selecionado

Outro elemento de insero de informao o textarea ( <textarea> </textarea> ), que permite a digitao de vrias linhas, seus atributos so: Atributos Atributo cols rows id Valor numeral numeral nome Descrio quantidade de caracteres por linha quantidade de linha na caixa identificao do elemento

Para a criao de uma lista para seleo (combo box) devemos utilizar o elemento select ( <select> </select> ), que delimita a lista, e o elemento option ( <option> </option> ) utilizado na definio de cada item da lista.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 30 de 33

Exemplo de Uso de formulrios:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Exemplo 16</title> </head> <body> <br /><br /> <h1> Exemplo de uso de formulrios: </h1> <form action="exemplo16.xhtml" method="post" name="form01"> Nome......: <input type="text" id="nome" name="nome" /><br /><br /> Endereo: <input type="text" id="endereco" name="endereco" readonly="true" /> <br /><br /> E-mail....: <input type="text" id="mail" name="mail" /><br /><br /> Telefone.: <input type="text" id="tel" name="tel" /><br /><br /> Senha.....: <input type="password" name="senha" id="senha" /><br /><br /> Curriculo: <input type="file" id="cv" name="cv" /> <br /><br /> Idade .....: <input type="radio" name="idade" id="idade" value="maior" /> Maior de Idade | <input type="radio" name="idade" id="idade" value="menor"/> Menor de Idade <br /><br /> Sistema Operacional: <input type="checkbox" name="so" id="so" value="linux" /> Linux | <input type="checkbox" name="so" id="so" value="bsd" /> BSD | <input type="checkbox" name="so" id="so" value="aix" /> AIX | <input type="checkbox" name="so" id="so" value="solaris" /> Solaris | <input type="checkbox" name="so" id="so" value="macos" /> MacOS | <input type="checkbox" name="so" id="so" value="outro" /> Outro <br /><br /> Estado Civil : <select name="civil" id="civil"> <option> Casado </option> <option> Solteiro </option> </select> <br /><br /> <input type="submit" name="enviar" id="enviar" value="Enviar" /> <input type="reset" name="cancelar" id="cancelar" value="Cancelar" /> <input type="button" name="validar" id="validar" value="Validar" /> <input type="image" name="validar2" id="validar2" src="alinux.jpg" /> </form> </body> </html>

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 31 de 33

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 32 de 33

Referncias
[1] Referncia de XHTML 1.0 (www.w3schools.com/xhtml/xhtml_reference.asp); [2] Tutorial da W3C (www.w3schools.com/w3c); [3] W3Schools (www.w3schools.com/default.asp); [4] .WebSemntica (www.comciencia.br/reportagens/internet/net08.htm). [5] Manual e XHTML em ingls (http://www.htmlstaff.org/xhtmlmanual/Cover.html) [6] Apostila XHTML, Prof. Jos Celso Freire Junior, Universidade Estadual Paulista, Ano de 2003

Ferramentas
[1] Para saber se seu documento XHTML vlido: http://validator.w3.org [2] TIDY: http://tidy.sourceforge.net ou www.w3.org/People/Raggett/tidy.

Prof. Lus Rodrigo de Oliveira Gonalves luisrodrigoog@yahoo.com.br http://www.lrodrigo.cjb.net

Pgina 33 de 33