Apostila XHTML

unesp
Universidade Estadual Paulista Campus de Guaratinguet
LINGUAGEM XHTML Prof. Jos Celso Freire Junior Departamento de Engenharia Eltrica (Jose-Celso.Freire@feg.unesp.br)
2003
APOSTILA XHTML
Este texto totalmente baseado no livro Beginning XHTML de Boumphrey, F. et alli. da editora Wrox Press Ltd. Assim, exemplos bem como a seqncia do texto so iguais aos exemplos e a seqncia do livro. Este texto deve servir apenas como uma referncia resumida. Para maiores informaes favor consultar o livro.
JCFJ
2002
ndice
Captulo 1 1.1. 1.2. 1.3. 1.4. 1.5. 1.6. 1.6.1 1.6.2 1.7. 1.8. 2.1. 2.2. 2.2.1 2.2.2 2.3. 2.4. 2.5. 3.1. 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.2. 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 Web, HTML e Linguagens de Marcao .............................................................. 1 Web e Internet............................................................................................................... 1 Histria do Web ............................................................................................................ 1 Navegadores ................................................................................................................. 2 Editores de Pginas ....................................................................................................... 3 O Trnsito da Informao ............................................................................................. 4 Linguagem HTML........................................................................................................ 5 Elementos e Marcadores ........................................................................................... 5 Atributos dos Marcadores ......................................................................................... 6 Linguagens de Marcadores ........................................................................................... 6 Tipos de Marcadores..................................................................................................... 8 De HTML a XHTML .......................................................................................... 10 Problemas com HTML ............................................................................................... 10 XML: Conceitos Preliminares .................................................................................... 10 Documentos XML Bem-Formados ........................................................................ 11 Analisadores XML.................................................................................................. 12 XML e HTML: XHTML ............................................................................................ 13 Diferenas entre XHTML e HTML............................................................................ 14 Compatibilidade com Verses Anteriores de Navegadores ....................................... 16 XHTML: Conceitos Bsicos................................................................................ 17 As partes de um documento XHTML .................................................................... 17 Elementos de Bloco Bsicos de XHTML............................................................... 18 Elementos Descritivos em Linha Bsicos de XHTML........................................... 20 Elementos de Estilo em Linha Bsicos de XHTML............................................... 22 Elementos de Estilo sem Estilo............................................................................... 24 Listas ....................................................................................................................... 24 Atributos ................................................................................................................. 27 Ligaes e Objetos Embutidos ................................................................................... 30 Ligaes Hipertexto ................................................................................................ 30 O Elemento <a> ..................................................................................................... 30 Utilizao de Imagens como Ligao Fonte........................................................... 36 Ligaes Utilizando Outros Protocolos .................................................................. 36 Conexo a Outros Elementos.................................................................................. 37 Estruturao de documentos XHTML........................................................................ 17
Captulo 2 -
Captulo 3 -
JCFJ
2002
UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML
3.3. 3.3.1 3.3.2 3.3.3 3.4. 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.6 3.5. 3.5.1
Imagens .......................................................................................................................40 Formatos de Arquivos .............................................................................................40 O Elemento <img> ................................................................................................41 Efeitos em Imagens .................................................................................................46 Tabelas ........................................................................................................................49 Elementos Bsicos de Tabelas ................................................................................50 Diviso de Linhas e Colunas...................................................................................52 Aplicao de Estilos em Tabelas ............................................................................53 Alinhamento da Tabela em Relao ao Documento ...............................................58 Alinhamento Entre Tabelas.....................................................................................60 Alinhamento de Texto em Tabelas .........................................................................62 Frames (Quadros)........................................................................................................63 Conjunto de Frames Dividindo Janelas ...............................................................64 Formulrios ..........................................................................................................75 Interao Cliente/Servidor e Formulrios...................................................................75 Submisso de Formulrios ..........................................................................................76 Elemento <form>......................................................................................................76 Controles em Formulrios...........................................................................................78 Elemento <input>........................................................................................................78 Controle <input> do Tipo Texto .........................................................................79 Controle <input> do Tipo Boto.........................................................................80 Controle <input> do Tipo Button........................................................................81 Controle <input> do Tipo Boto de Rdio ( Radio Button) ................................81 Controle <input> do Tipo Hidden ......................................................................82 Desabilitao de Elementos <input> ..................................................................83 Elemento <textarea> ............................................................................................83 Elementos <select> e <option>.........................................................................83 Folhas de Estilo em Cascata.................................................................................86 Definio Local de Estilos ......................................................................................88 Definio Interna de Estilos ....................................................................................89 Definio Externa de Estilos...................................................................................90 Herana e Propriedades de Folhas de Estilo ...............................................................91 Utilizao de Estilos....................................................................................................91 Estabelecendo a Cor da Fonte do Texto..................................................................91 Criao e Definio de Folhas de Estilo .....................................................................87
Captulo 4 4.1. 4.2. 4.3. 4.4. 4.5. 4.5.1 4.5.2 4.5.3 4.5.4 4.5.5 4.5.6 4.6. 4.7. 5.1. 5.1.1 5.1.2 5.1.3 5.2. 5.3. 5.3.1
Captulo 5 -
JCFJ
2002
5.3.2 5.3.3 5.3.4 5.3.5 5.3.6 5.4. 6.1. 6.1.1 6.1.2 6.2. 6.3. Captulo 6 -
Estabelecendo a Cor das Ligaes Hipertexto........................................................ 93 Estabelecendo a Cor de Fundo ............................................................................... 94 Estabelecendo uma Textura de Fundo .................................................................... 95 Estabelecendo Preenchimento, Bordas e Margens ................................................. 97 Controlando Fontes............................................................................................... 100 Definio de Estilos Prprios ................................................................................... 106 Introduo a XML ............................................................................................. 107 Documentos XML Bem Formados....................................................................... 108 Documentos XML Vlidos ................................................................................... 111 Criando DTDs........................................................................................................... 111 Utilizando Estilos em Documentos XML................................................................. 113 Bibliografia ........................................................................................................ 115 Criao de Documentos XML .................................................................................. 108
Captulo 7 -
JCFJ
2002
ndice de Figuras
Figura 1 Editor Microsoft FrontPage. ...................................................................................................3 Figura 2 Editor Netscape Composer. ....................................................................................................4 Figura 3 Transferncia de Informao ..................................................................................................5 Figura 4 Um Documento HTML Bsico ..............................................................................................5 Figura 5 Elementos e Marcadores.........................................................................................................5 Figura 6 Documento XML como uma rvore ...................................................................................12 Figura 7 Exemplo de Documento XML .............................................................................................12 Figura 8 Exemplos de um mesmo Documento Escrito em HTML e XHTML. .................................15 Figura 9 Apresentao de um mesmo documento HTML e XHTML no IE. .....................................15 Figura 10 Marcadores <p>, <div> e <blocknote> .....................................................................19 Figura 11 Marcadores de Ttulos. .......................................................................................................19 Figura 12 Marcadores <preserve>................................................................................................20 Figura 13 Utilizao dos Elementos Descritivos em Linha Bsicos de XHTML ..............................22 Figura 14 Utilizao dos Elementos de Estilo em Linha Bsicos de XHTML. .................................23 Figura 15 Exemplo de Listas no Ordenadas. ....................................................................................24 Figura 16 Exemplo de Listas no Ordenadas de Diversos Nveis ......................................................25 Figura 17 Exemplo de Listas Ordenadas de Dois Nveis ...................................................................26 Figura 18 Exemplo de Listas de Definio.........................................................................................27 Figura 19 Exemplo Utilizao de Atributos Universais .....................................................................28 Figura 20 Exemplo de Ligaes Relativas no Mesmo Diretrio. .......................................................31 Figura 21 Exemplo de Ligaes Relativas em Diretrios Diferentes.................................................32 Figura 22 Partes de uma URL. ............................................................................................................32 Figura 23 ncoras Destino no mesmo Documento. ...........................................................................34 Figura 24 ncoras Destino em Documentos Diferentes. ...................................................................35 Figura 25 Utilizao da Instruo mailto ........................................................................................37 Figura 26 Utilizao de uma Applet. ..................................................................................................38 Figura 27 Elemento <object> : Incluso de um Arquivo Texto. ....................................................39 Figura 28 Elemento <object> : Incluso de uma Pgina Web........................................................39 Figura 29 Utilizao de uma Imagem. ................................................................................................42 Figura 30 Imagens e os Atributos hspace e vspace. ....................................................................43 Figura 31 Alinhamento Texto/Imagem. ..............................................................................................44 Figura 32 Imagens e os Atributos bottom, middle e top. ........................................................44 Figura 33 Utilizao de Estilos com Imagens. ...................................................................................45 Figura 34 Utilizao de Imagens e Bordas. ........................................................................................46
JCFJ
2002
Figura 35 Coordenadas em uma Imagem. .......................................................................................... 47 Figura 36 Utilizao do Mapeamento de Imagens. ............................................................................ 49 Figura 37 Uma Tabela Simples. ......................................................................................................... 50 Figura 38 Uma Tabela com Ttulo e Cabealhos. .............................................................................. 51 Figura 39 Uma Tabela com Estilos e <thead> , <tfoot> e <tbody>. ....................................... 51 Figura 40 Mesclagem de Colunas em uma Tabela. ............................................................................ 52 Figura 41 Mesclagem de Linhas em uma Tabela. .............................................................................. 52 Figura 42 Tabela com Estilos de Folhas de Estilo e Atributos............................................................ 54 Figura 43 Espaamento em Tabelas. .................................................................................................. 55 Figura 44 Margens em Tabelas. ......................................................................................................... 55 Figura 45 Margens via Folhas de Estilo em Tabelas. ......................................................................... 56 Figura 46 Altura e Largura de Tabelas com Atributos. ...................................................................... 57 Figura 47 Altura e Largura de Tabelas com Atributos e Propriedades. ............................................. 58 Figura 48 Posicionamento de Tabelas com o Atributo align.......................................................... 59 Figura 49 Posicionamento de Tabelas com Folha de Estilo. .............................................................. 60 Figura 50 Posicionamento de uma Tabela em Relao Outra. ........................................................ 61 Figura 51 Alinhamento Vertical do Texto de uma Tabela. ................................................................ 62 Figura 48 Alinhamento Horizontal do Texto de uma Tabela ............................................................. 63 Figura 53 Frames em um Documento XHTML. ................................................................................ 64 Figura 54 Dimensionamento de Frames. ............................................................................................ 66 Figura 55 Frames Aninhas por Definio........................................................................................... 68 Figura 56 Frames Aninhadas por Incluso. ........................................................................................ 68 Figura 57 Documentos XHTML para Definio de Frames. ............................................................. 70 Figura 58 Exemplo de Apontamento de Frames. ............................................................................... 71 Figura 59 Incluso de Frame em um Documento............................................................................... 72 Figura 60 Utilizao do Elemento <noframe> em um Documento................................................ 63 Figura 61 Um Formulrio Simples. .................................................................................................... 78 Figura 62 Formulrio com Controles do Tipo Texto. ......................................................................... 80 Figura 63 Formulrio com Controles do Tipo Boto e Radio Button. ................................................ 82 Figura 64 Formulrio com Elementos <textarea> , <select> e <option> ............................ 84 Figura 65 Definio de Estilos. .......................................................................................................... 87 Figura 66 Definio Local de Estilos. ................................................................................................ 88 Figura 67 Definio Interna de Estilos. .............................................................................................. 89 Figura 68 Definio Externa de Estilos. ............................................................................................. 90 Figura 69 Herana de Estilos. ............................................................................................................. 91 Figura 70 Definio de Cores do Texto.............................................................................................. 92
JCFJ
2002
Figura 71 Definio de Cores do Texto com Valores Hexadecimais. ................................................93 Figura 72 Definio de Cores de Ligaes. ........................................................................................94 Figura 73 Definio de uma Textura. .................................................................................................96 Figura 74 Posicionamento de uma Imagem........................................................................................97 Figura 75 Posicionamento de Preenchimento, Borda e Margem. .......................................................98 Figura 76 Definio das Margens de uma Pgina. .............................................................................98 Figura 77 Definio das Margens Verticais de Elementos. ................................................................99 Figura 78 Indentao de Elementos. .................................................................................................100 Figura 79 Definio do Tamanho de Fontes - 1. ..............................................................................101 Figura 80 Definio do Tamanho de Fontes - 2. ..............................................................................102 Figura 81 Utilizao de Maisculas, Estilo e Negrito para Fontes...................................................103 Figura 82 Espaamento Entre Linhas. ..............................................................................................104 Figura 83 Utilizao de Famlias de Fontes......................................................................................105 Figura 84 Utilizao de Famlias de Fontes Alternativas. ................................................................105 Figura 84 Utilizao de Famlias de Fontes Alternativas. ................................................................106 Figura 86 Documentos XHTML e XML. .........................................................................................107 Figura 87 Visualizao dos Documento XML e XHTML. ..............................................................108 Figura 88 DTD para a Apresentao de Livros ................................................................................112 Figura 89 Folha de Estilos books.css..........................................................................................113 Figura 90 Apresentao de um Documento XHTML com Folha de Estilo. ....................................114
JCFJ
2002
Captulo 1 - Web, HTML e Linguagens de Marcao
Neste captulo sero apresentados os principais conceitos ligados utilizao de linguagens de marcao (Markup Languages) para a construo de pginas WEB. 1.1. Web e Internet Web e Internet so freqentemente confundidos. Internet uma rede de ns interligados (computadores) criada como um projeto do Departamento de Defesa dos EUA nos anos 60. Esta rede, que poderia ser utilizada em caso de um ataque nuclear mesmo que alguns de seus caminhos internos ficassem inoperantes, foi criada como um meio de transferir informao de um lugar para outro, utilizando para tanto um protocolo1 conhecido com TCP/IP (Transmission Control Protocol /Internet Protocol). No Web, quando um usurio diz a um navegador que ele procure uma pgina, primeiramente o navegador ir empacotar os dados que compem a instruo de procura em pacotes (pequenos envelopes de informao) de aproximadamente 200 bytes, utilizando para tanto o protocolo chamado TCP que um protocolo de transporte. Atravs da utilizao deste protocolo o sistema ir dividir a informao em pacotes, envi-los pela rede, receb-los, verific-los e reagrup-los. Antes dos pacotes serem enviados atravs da rede necessrio que se conhea para onde estes pacotes de dados sero enviados. Para isso um segundo protocolo utilizado. O nome deste protocolo HyperText Transfer Protocol HTTP. O protocolo HTTP ir colocar uma etiqueta de endereamento nos pacotes para que esses possam chegar a seu destino. O protocolo HTTP o protocolo utilizado na World Wide Web para transferir informao de um computador para outro. O World Wide Web WWW so os programas que funcionam no Web, que baseado em uma arquitetura Cliente/Servidor, onde o navegador de um usurio o cliente que recupera informaes em uma mquina remota (o servidor) conhecida como servidor Web. No servidor Web so armazenadas as pginas Web e os arquivos sendo acessados. Atravs do protocolo HTTP o servidor Web pode ser encontrado em qualquer lugar da rede por um cliente. 1.2. Histria do Web O Web tem suas origens na escrita, na composio de textos. Esta origem est ligada a forma como um livro estruturado. O conceito inicial de Web esteve relacionado a informaes ligadas eletronicamente. Vanevar Bush em 1940 em um artigo intitulado As We May Think descreveu um sistema deste tipo ao qual ele deu o nome de memex. Ted Nelson foi quem props o termo hipertexto, enquanto Douglas Englebart ligado tambm aos primrdios do Web, pois trabalhou no desenvolvimento do mouse e de hipertextos. O Web como conhecido atualmente tem suas origens no CERN, um Centro de Pesquisa de Fsica de Alta Energia, localizado em Genebra na Sua, onde em 1989 Tim Berners-Lee e Robert Caillau colaboraram na criao de um sistema de informaes interligado que poderia ser acessado pelos diversos computadores de diferentes tipos do CERN. Nesta poca diversas pessoas utilizavam TeX (um sistema de preparao de documentos baseado em uma linguagem) e Postscript para preparar documentos; outras pessoas utilizavam tambm SGML (Standard Generalized Markup Language). Tim Berners-Lee imaginou HTML (HyperText Markup Language) como algo bem mais simples, que poderia ser utilizado fosse em terminais burros ou em terminais rodando X Windows (um ambiente
1
Conjunto de regras que controla a comunicao entre dois elementos, no caso da internet entre um cliente e um servidor.
JCFJ
2002
Captulo 1 - Web, H T M L e Linguagens de Marcao
grfico) para, utilizando o protocolo HTTP, acessar os diversos documentos do sistema de informao. A simplicidade inicial da proposio fez com que diversas pessoas passassem a desenvolver navegadores e servidores levando exploso vertiginosa que conheceu o Web. Atravs de uma lista de discusso lanada pelo CERN em 1991 ( www-talk ) diversas pessoas passaram a apresentar suas idias, como os navegadores Cello, Viola e MidasWWW. Entretanto, o grande acontecimento foi o aparecimento em 1993 do navegador Mosaic que foi desenvolvido por Marc Andressen e Eric Bina da Universidade de Illinois com o apoio do Centro Nacional de Aplicaes para Supercomputadores NCSA. O navegador Mosaic ao ser portado para PCs e MACs causou a exploso da Web e seu desenvolvimento para o que conhecemos hoje. Esforos de padronizao fizeram com que em 1994 a Internet Engineering Task Force IETF propusesse o padro HTML 2.0 no qual os diversos desenvolvimentos ocorridos at ento foram padronizados. J o padro HTML 3.2 foi desenvolvido pelo consrcio, chamado World Wide Web Consortium W3C, formado em 1996 para zelar pelo desenvolvimento do Web. HTML 4.0 foi introduzido em 1997 adicionando novas caractersticas. Mais recentemente foi publicada a especificao HTML 4.01 que corrigiu diversos erros da especificao HTML 4.0 criando as fundaes da especificao XHTML. A primeira verso a aparecer foi XHTML 1.0 que a especificao HTML 4.01 reescrita em XML. Atualizaes e informaes podem ser obtidas em http://www.w3.org/MarkUp/. 1.3. Navegadores Conforme se pode observar houve uma migrao de HTML da verso 2.0 para a verso 3.2. No existiu uma verso 3.0 oficial. A razo que os diversos navegadores que apareceram propuseram diferentes extenses linguagem gerando grandes problemas para sua padronizao. Conforme citado, o navegador Mosaic, desenvolvido por Marc Andressen e Eric Bina, que permitiu pela primeira vez que os usurios acessassem o Web atravs de uma interface grfica, ao contrrio dos navegadores de ento (WAIS, Ghoper, Hytelnet e UseNet) que permitiam uma navegao textual, est na origem do grande desenvolvimento alcanado pelo Web. Este navegador tornou-se o navegador Netscape Navigator 0.9 em 1994 e dominou o mercado de navegadores que contava nesta poca com aproximadamente 20 navegadores competitivos. O navegador Netscape embora respeitasse o padro HTML da poca obteve sua popularidade pelos aditivos introduzidos na verso 1.1, como imagens de fundo e texto piscante por exemplo. Este navegador introduziu diversas outras caractersticas e dominou a cena at que em 1995 (quando representava 75% dos navegadores em utilizao) a Microsoft admitiu publicamente a importncia da internet e definiu sua estratgia de envolvimento com a internet. A primeira verso interessante do navegador da Microsoft, denominado Internet Explorer, a contestar o domnio de Netscape foi a verso 3.0, que possibilitava a visualizao de frames e a utilizao de Java com o mesmo nvel oferecido no navegador Netscape. A empresa Microsoft tomou ento a polmica deciso de integrar seu navegador a seu sistema operacional o que a levou aos processos na justia americana para a diviso da companhia acusada de monoplio. Entretanto, antes da acusao, seu navegador efetivamente tomou o lugar de Netscape, impondo mesmo sua definio de HTML dinmico (mudar o contedo da pgina sem ter que recarregar a pgina) como padro de fato. Atualmente pode-se dizer que a diviso do mercado de aproximadamente 57% para Internet Explorer e 26% para Netscape. A verso atual do Internet Explorer IE 5.5 oferece suporte para uma grande parte da especificao de HTML Dinmico e XML. Atualmente Netscape, aps abrir o cdigo de seu navegador, esta em fase final de teste da verso 7.0 de seu navegador.
JCFJ
2002
A importncia dada aos navegadores deve-se ao seguinte fato: a mesma pgina pode ser visualizada diferentemente dependendo do navegador. Atualmente o navegador mais evoludo o navegador da Microsoft que consegue interpretar XML. 1.4. Editores de Pginas Uma pgina Web basicamente um arquivo de texto escrito em uma linguagem especial, a linguagem HTML. Para a criao de uma pgina Web diversos editores podem ser utilizados. Entre os comerciais pode-se citar o editor da Microsoft denominado FrontPage que uma ferramenta WYSIWYG (What You See Is What You Get ) que permite que se crie uma pgina Web sem a necessidade de se escrever especificamente cdigo HTML. A figura 1 abaixo apresenta uma cpia de tela deste editor. Conforme se pode ver possvel visualizar uma pgina de trs maneiras (seleo atravs das orelhas na parte de baixo da janela): como texto simples, como cdigo HTML e como ser visualizada no navegador.
Figura 1 Editor Microsoft FrontPage.
Um produto no Microsoft que conquistou o mercado o editor Allaires Homesite que pode ter u ma cpia de avaliao obtida em http://www.allaire.com. Outros editores so Sausage Softwares HotDog (http://www.sausage.com), SoftQuads HotMetal Pro (http://www.softquad.com) e Adobes Page Mill (http://www.adobe.com/products). Um editor gratuito de boa qualidade o editor Arachnophilia (http://www.arachnoid.com/ arachnophilia/index.html). Pode-se tambm utilizar o editor Composer que faz parte do navegador Netscape, embora comparado com os anteriores este editor seja um pouco inferior, no permitindo que se manipule diretamente o cdigo HTML. A figura 2 a seguir apresenta uma cpia de tela com este editor.
JCFJ
2002
Figura 2 Editor Netscape Composer.
1.5. O Trnsito da Informao Quando se deseja visualizar uma pgina Web, deve-se enviar uma mensagem de um navegador para um servidor Web, informando qual pgina em especial do servidor se deseja visualizar. A mensagem enviada do navegador para o servidor denominada Solicitao HTTP. Quando o servidor recebe a solicitao ele verifica se ele tem a informao solicitada. Caso ele tenha, ele empacota o contedo HTML (utilizando TCP), enderea os pacotes (utilizando HTTP) e os envia atravs da rede. Se o servidor Web no encontrar a informao solicitada, ele constri uma pgina contendo uma mensagem de erro, empacota esta pgina e a envia ao navegador. A mensagem enviada pelo servidor Web ao navegador denominada Resposta HTTP. Em uma solicitao ou em uma resposta HTTP trafegam muito mais informaes que a simples URL (Uniform Resource Locator) do servidor ou navegador. Esta informao gerada automaticamente sendo transparente para o usurio. Uma solicitao ou uma resposta HTTP tem o mesmo formato e pode ser dividida em trs sees: linha de solicitao/resposta, cabealho HTTP e corpo HTTP. O contedo destas trs sees ir variar em se tratando de uma solicitao ou de uma resposta, embora existam informaes que sejam comuns e so enviadas no cabealho HTTP. Analogamente existem informaes que so conhecidas somente pelo navegador ou pelo servidor e so enviadas ou em uma solicitao ou em uma resposta. Em relao solicitao/resposta HTTP, de um modo resumido, pode-se dizer que a arquitetura cliente/servidor do Web funciona da seguinte maneira: quando um pedido de pgina enviado a um servidor este devolve ao navegador as instrues HTML para a construo da pgina. O navegador ento ir construir a pgina e a apresentar. Uma caracterstica importante que se o navegador encontrar uma linha de instruo que ele no consiga interpretar ele simplesmente ir pular essa linha e continuar com a prxima. A figura 3 abaixo apresenta de forma esquemtica o envio de uma solicitao de informao por um navegador e a resposta do servidor.
JCFJ
2002

Solicitao HTTP
Request: GET/default.asp /HTTP://www.Wrox.com /HTTP1.1 Header : Useragent: IE 5.0 Accept: */* Date: 4/1/00 Body: (empty)
Porta 80
Resposta HTTP
Response: /HTTP1.1/200 Header: Server: IIS 50 Date: 4/1/00 Body: <HTML> ..... </HTML>
Navegador
Servidor Web
Figura 3 Transferncia de Informao
1.6. Linguagem HTML Nesta seo faz-se uma introduo sobre a linguagem HTML, que o acrnimo de HyperText Markup Language, ou seja, uma linguagem de marcao de hipertextos. A figura 4 abaixo apresenta esquerda um documento HTML e a direita sua visualizao no navegador Internet Explorer.
<html> <head> <title>Um documento HTML bsico</title> </head> <body> <h1> Demonstrao de um documento HTML simples</h1> <p>Aqui est um pargrafo simples <p>Aqui um segundo pargrafo com um texto em <b>negrito</b> em um texto em <i>itlico</i>. Este pargrafo um pouco maior que o anterior, e pode-se ver o que acontece quando o texto grande demais para caber em uma linha (ele simplesmente vai para a outra linha). <address>Jos Celso Freire Junior Jose -Celso.Fre ire@feg.unesp.br</address> </body> </html>
Figura 4 Um Documento HTML Bsico
Conforme se pode ver esquerda na figura 4, um documento HTML composto do texto a ser apresentado, com algumas partes deste texto contidas entre comandos ou marcadores (tags) HTML. A seguir faz-se um detalhamento sobre os comandos encontrados neste exemplo. 1.6.1 Elementos e Marcadores A terminologia que ser utilizada neste texto apresentada detalhadamente na figura 5 abaixo.
Marcador de Abertura Contedo do Elemento Marcador de Fechamento
<H1> Este o titulo de nvel 1 </H1>

Tipo do Elemento: H1
Elemento
Figura 5 Elementos e Marcadores
JCFJ
2002
Na figura 5 se pode ver que o que diferencia um marcador de abertura de um de fechamento simplesmente a presena da barra / antes do marcador de fechamento. Assim, um marcador HTML apresenta-se da seguinte maneira:
<marcador fechamento> de abertura> texto a ser apresentado </marcador de
Qualquer documento HTML deve estar contido entre os marcadores <html> e </html>, ou seja deve ter em seu incio e final estes marcadores, pois so estes marcadores que indicam aos navegadores que eles esto tratando com um documento HTML. O documento contido entre esses marcadores pode ser dividido em duas partes: cabealho e corpo. O cabealho, definido pelos marcadores <head> e </head> contm informaes que no so apresentadas pelo navegador e que so utilizadas para introduzir informaes sobre o documento em si (meta-informaes). No exemplo da figura 4 se pode ver um tipo de meta-informao: o ttulo da pgina que mostrado na barra de ttulo do navegador. Este ttulo definido atravs dos marcadores <title> e </title>. Quando em um navegador se deseja salvar uma pgina em uma lista de sites preferidos (bookmarks) o texto contido entre esses marcadores que ir identificar a pgina. Todo texto que ir ser efetivamente apresentado no navegador, compondo o corpo do documento dever estar entre os marcadores <body> e </body>. Assim, no texto apresentado na figura 4, entre os marcadores <body> e </body>, se pode ver que quando se deseja apresentar um texto em negrito deve-se simplesmente colocar o texto entre os marcadores <b> e </b> e quando se deseja apresent-lo em itlico entre os marcadores <i> e </i>. Em HTML os ttulos em documentos so apresentados atravs dos marcadores H. Existem diversos nveis de ttulos, sendo que o mais importante (apresentado com mais destaque) H1. Conforme se pode observar na figura 4 o ttulo do documento est colocado entre os marcadores <H1> e </H1>. Um pargrafo de texto em HTML se inicia com o marcador <p> sendo que o marcador de fechamento </p>, em HTML, opcional. Quando, aps ter encontrado um marcador <p>, o navegador encontra outro <p> (mesmo sem antes ter encontrado um </p>) ele assume que se deseja iniciar um outro pargrafo. Em relao figura 4, o ltimo marcador a ser descrito <address> que normalmente utilizado para indicar o endereo do responsvel pela pgina (Webmaster). Outros marcadores sero introduzidos nos prximos captulos. 1.6.2 Atributos dos Marcadores Um marcador pode tambm possuir atributos que o qualificam, ou seja, informaes que indiquem como o contedo do elemento ser apresentado. Como exemplo se pode citar o marcador paragraph que pode ter o atributo align, sendo que este atributo pode assumir os valores left, center e right, para indicar a formatao de um pargrafo. 1.7. Linguagens de Marcadores A linguagem HTML uma entre as diversas linguagens de marcadores criadas a partir de uma meta-linguagem (um modelo - template - para a criao de linguagens) chamada SGML (Standard Generalized Markup Language), a qual permite criar outras linguagens atravs da utilizao de um conjunto de regras conhecido como DTDs (Document Type Definitions).
JCFJ
2002
Pode-se dizer que HTML uma linguagem popular entre outros fatores por ser de fcil aprendizado, por no ser necessrio em sua utilizao o emprego de complicadas estruturas como as encontradas nas linguagens de programao e por documentos HTML poderem ser automaticamente gerados por diversos programas de editorao de pginas HTML. Um fator muito importante tambm que quando um navegador no consegue entender um comando HTML ele simplesmente pula este comando e continua no prximo, possibilitando que se possa ler um documento mesmo se algumas linhas forem incompreensveis para o navegador. O conceito por trs de todas as linguagens como HTML baseadas em SGML muito simples, sendo caracterizado pela utilizao de marcadores definidos em um dicionrio de marcadores para aquela linguagem. O navegador contm um analisador (parser) que ir definir o que fazer com cada marcador da linguagem. Este processo de anlise (parsing) pode ser entendido como uma completa anlise estrutural do documento. Para explicar o funcionamento deste analisador, o documento HTML apresentado na figura 4 ser utilizado. A seguir apresenta-se ento a srie de passos que o navegador ir realizar para analisar o documento da figura 4. 1. O navegador l o documento do incio ao final a procura de marcadores. 2. Cada vez que o navegador encontra um < ele sabe que estar lendo um marcador de abertura e cada vez que ele encontra um /> que ele estar lendo um marcador de fechamento. 3. Quando o navegador encontra um < ele ir procurar o > para identificar o contedo do marcador. A primeira palavra o nome do marcador, indicando tambm o tipo do elemento. 4. Aps ler o nome do marcador o navegador verifica se ele reconhece este nome. Reconhecendo o navegador ir decidir o que fazer com o contedo entre o marcador de abertura e o de fechamento. 5. O navegador tem um dicionrio com todos os marcadores conhecidos por ele e tambm informaes sobre como processar o contedo dos marcadores. Se o navegador no conhecer o marcador ele ainda precisa tratar seu contedo. Normalmente ele ir apresentar este contedo como texto normal na pgina. 6. Quando o navegador encontra um marcador <html> ele sabe que se trata do incio do documento HTML. 7. Quando o navegador encontra um marcador <head> ele sabe que a partir deste ponto ele ir encontrar informaes sobre o cabealho do documento, como a barra de ttulo do navegador. 8. Quando o navegador encontra o marcador <title> ele ir procurar o marcador </title> sabendo que dever mostrar o texto entre os dois marcadores na barra de ttulo do marcador. 9. Quando o navegador encontra o marcador </head> ele sabe que encontrou o final das informaes sobre o cabealho do documento. 10. Quando o navegador encontra o marcador <body> ele sabe que a partir deste ponto encontra-se o texto que ser apresentado no navegador. 11. Quando o navegador encontra um marcador <h1> ele sabe que est tratando com um ttulo de nvel 1 e que o texto entre o marcador de abertura (<h1>) e o de fechamento (</h1>) dever ser apresentado com as caractersticas definidas para um ttulo de nvel 1 (na maior parte dos navegadores fonte de tamanho 24 em negrito).
JCFJ
2002
12. Quando o navegador encontra o marcador <p> ele sabe que deve iniciar um novo pargrafo. 13. No segundo pargrafo tem-se uma palavra entre os marcadores <b> e </b>. Isto indica ao navegador que esta palavra deve ser apresentada em negrito da mesma maneira que o texto entre os marcadores <i> e </i> deve ser apresentado em itlico. 14. O texto entre os marcadores <address> e </address> indica o endereo da pessoa que mantm a pgina (Webmaster). O navegador ir mostrar este texto em itlico. 15. Quando o navegador encontra o marcador </body> ele sabe que encontrou o final do texto que ser apresentado no navegador. 16. Quando o navegador encontra o marcador </html> ele sabe que atingiu o final do documento. Conforme se pode observar pelos passos acima, a anlise pelo navegador de um documento HTML bastante simples. 1.8. Tipos de Marcadores Pode-se identificar trs tipos de marcadores: estruturais, estilsticos e descritivos. A seguir apresenta-se uma pequena descrio de cada um destes tipos. Marcadores Estruturais: so marcadores que determinam a estrutura de um documento, dando a esse sua forma e integridade (Ex.: <p> e <h1>). Marcadores Estilsticos: so marcadores que indicam como o contedo de um elemento ser apresentado no navegador (Ex.: <b> e <i>). Marcadores Descritivos: so conhecidos tambm como marcadores semnticos e descrevem a natureza do contedo de um elemento (Ex.: <title> e <address>).
JCFJ
2002
JCFJ
2002
Captulo 2 - De HTML a XHTML
Conforme apresentado, a linguagem SGML ( Standard Generalized Markup Language), que um padro internacional desde 1986, foi a linguagem a partir da qual se construiu HTML. A maior vantagem de SGML ao mesmo tempo seu maior defeito: o nvel de detalhamento de seus marcadores (que lhe conferem o poder) torna-a de difcil aprendizado. Alm desse complicador, todo documento SGML necessita incluir um DTD (Document Type Definitions) muito detalhado para que um navegador possa analisar o documento SGML. Essas razes, entre outras, favoreceram o desenvolvimento de HTML que uma aplicao de SGML. As regras para cada marcador de HTML so transcritas em um DTD (respeitando as regras de SGML) que faz parte do navegador. Sem esse DTD o navegador no saberia como apresentar uma pgina HTML2 . O conceito de DTD ser detalhado no captulo 4. No momento basta ter em mente que qualquer linguagem baseada em SGML necessita de um DTD para explicar sua gramtica para a aplicao que estiver sendo utilizada para ler o documento. 2.1. Problemas com HTML Atualmente diversos outros agentes podem ser utilizados na visualizao de pginas HTML, como por exemplo telefones sem fio, agendas eletrnicas, etc. Qualquer navegador atual, como Netscape ou Internet Explorer, por seu poder de processamento consegue interpretar pginas HTML que no estejam estritamente de acordo com o padro. O mesmo no ocorre com os novos agentes de acesso ao Web. De fato, com o desenvolvimento do Web diversos navegadores introduziram seus prprios dialetos HTML e forneceram tambm uma grande capacidade de interpretar pginas mal escritas. Estas capacidades entretanto tornaram estes navegadores extremamente pesados e consumidores de recursos, recursos estes no disponveis nos novos agentes. Outro problema relevante relaciona-se a facilidade com que uma informao qualquer pode ser encontrada no Web. Pela enorme quantidade de informao disponvel, torna-se cada vez mais difcil para os robs de busca catalogar informao. Umas das razes que as pginas atuais, escritas em HTML, contm uma grande quantidade de marcadores estruturais e poucos marcadores descritivos os quais poderiam auxiliar no processo de indexao de informao no Web. A soluo desses dois problemas passa pela utilizao de uma linguagem rgida, na qual se possa ter certeza que o cdigo est escrito de maneira correta e completa, sendo interessante tambm que esta linguagem possa ser utilizada para algo mais que simplesmente preparar a visualizao de documentos, ou seja que ela possa ser utilizada para facilitar a indexao de documentos. Assim, devese criar uma nova gramtica que tenha o poder de SGML sem sua complexidade. Essa linguagem, por seu tipo de emprego, deve ser capaz de ser utilizada sem um DTD. Um comit foi formado no Consrcio WWW (W3C) sob a liderana de Tim Brady e Jon Bosak entre outros, para criar esta nova linguagem resultando na linguagem XML que o acrnimo de eXtensible Markup Language. A prxima seo apresenta alguns conceitos desta linguagem. 2.2. XML: Conceitos Preliminares A linguagem XML ser apresentada com detalhes no captulo 6. Nesta seo sero introduzidos alguns conceitos para que se possa apresentar a linguagem que abordada neste texto que XHTML, pois como XHTML escrita em XML as regras de XML se aplicam a XHTML.
2
Como curiosidade a DTD da verso 4.0 de HTML pode ser encontrada em http://www.w3.org/TR/html4/sgml/ dtd.html.
JCFJ
2002
10
Com os requisitos desenvolvidos pelo W3C para XML criou-se uma linguagem que de fcil aprendizado e utilizao. Alm disso, XML compatvel com SGML e prioriza marcadores descritivos no lugar de estruturais, ou seja, em sua maioria o s marcadores indicam o que alguma coisa e no como esta coisa deve ser apresentada. Resumindo, XML foi desenvolvido para ser uma verso de SGML de utilizao mais simples e imediata e sem a complexidade de SGML. A idia central por trs de XML so os Documentos Bem-Formados (Well-Formed Documents), que so documentos que respeitam rigidamente as regras de XML. Desde que um documento seja bem formado, um navegador que tenha um analisador XML, no necessita de um DTD para analisar este documento. Por esta r azo, novos marcadores podem ser criados ainda sem a necessidade de utilizao de DTD e mais, qualquer que seja o agente que se utilize para ler o documento XML bem formado, este ser capaz de analisar e apresentar o documento. Outra conseqncia da utilizao de documentos bem-formados, que no necessrio que os agentes tenham um grande poder de processamento. A seguir so apresentados alguns conceitos de documentos XML bem formados. 2.2.1 Documentos XML Bem-Formados Um documento XML bem-formado um documento que utiliza os marcadores respeitando as seguintes regras: Todos os elementos devem ter marcadores de abertura e fechamento do mesmo tipo : como conseqncia tem-se que deve existir sempre o marcador de fechamento (Ex.: no se pode utilizar o marcador <p> sem o marcador </p> ao final do pargrafo). Elementos vazios 3 devem utilizar um formato especial: embora elementos vazios possam ser apresentados utilizando-se a regra anterior, uma outra forma de representao fortemente recomendada. Para o marcador hr por exemplo, que simplesmente desenha uma linha horizontal atravs da pgina, deve-se represent-lo como <hr/>, ou seja, deve-se acrescentar a barra / antes do final do marcador. Todos os elementos devem ser aninhados corretamente : deve-se respeitar uma ordem precisa entre os marcadores de abertura e fechamento, ou seja, estruturas corretas so do tipo <marcador 1><marcador 2> contedo </marcador 2><marcador 1>. Deve existir um nico elemento raiz que contenha todos os outros elementos : cada documento XML deve ser representado como uma estrutura de rvore, com uma raiz e diversos ramos e com cada elemento do documento sendo considerado um n. Desta maneira o analisador do agente utilizado na leitura da pgina identificar facilmente o final do documento. A figura 6 abaixo apresenta um exemplo de estrutura em rvore.
Marcadores que no tm contedo, tendo somente um efeito estrutural na apresentao da pgina.
JCFJ
2002
11
pai
raiz
filho
pai
filho
filho
filho
Figura 6 Documento XML como uma rvore
2.2.2 Analisadores XML Para que se possa ler um documento XML necessrio que se utilize um analisador. Analisadores podem ser de dois tipos: Analisador de validao: um analisador que verifica se o documento XML respeita todas as regras definidas na DTD do documento. Analisador sem validao: um analisador que verifica unicamente se o documento um documento XML bem formado.
Nesta seo sero abordados analisadores sem validao. Analisadores de validao sero abordados futuramente. Pela facilidade com que se pode encontrar o analisador (e navegador) Internet Explorer IE, ser o programa utilizado neste texto para o tratamento de documentos XML. A figura 7 abaixo apresenta um exemplo de documento XML. Acima se tem o documento XML (que pode ser digitado por exemplo no programa notepad e salvo com o nome de XMLexample.xml) e abaixo a visualizao deste documento no IE (pode-se abrir no navegador o arquivo criado no notepad).
<?xml version="1.0"?>  <firstdoc> <subject>Um exemplo de um documento XML</subject> <docinfo date="09/08/2000" id="XMLexample"/> <greeting>Alo XML!</greeting> <greeting>Alo XHTML!</greeting> <farewell>Adeus SGML! </farewell> <footer> <author>Frank Boumphrey</author> <date>09/08/2000</date> </footer> </firstdoc>
Figura 7 Exemplo de Documento XML

JCFJ
2002
12
Conforme se pode observar na figura 7, o navegador IE, devido a extenso .xml do arquivo, apresenta o documento simplesmente como uma estrutura em rvore. Nesta estrutura de rvore se pode observar a presena dos sinais + e -. Clicando-se sobre estes sinais se pode apresentar ou no detalhes dos ns da rvore que compem o documento XML. Na figura 7, a cpia de tela da esquerda apresenta o documento em sua totalidade e a cpia de tela da direita com o n footer no apresentado. Documentos XML sero analisados em captulos futuros. Como introduo, a seguir faz-se uma anlise do documento utilizado como exemplo na figura 7. Assim, se tem: A linha <?xml version=1.0> apresenta a verso da linguagem XML utilizada; A linha <--um documento xml simples--> um comentrio. Embora esta linha faa parte da estrutura em rvore verificada pelo analisador, quando o documento XML visualizado em um navegador normalmente esta linha no apresentada. Comentrios so utilizados em documentos XML com a mesma finalidade com que so utilizados em programas; A linha <firstdoc> introduz o elemento raiz do documento XML. Entre os filhos deste elemento encontra-se o n footer que por sua vez tem dois filhos, os ns author e date. A indentao apresentada pelo IE objetiva facilitar a visualizao do documento em sua estrutura em rvore. A linha <docinfo date=09/08/2000 id=XMLexample/> um elemento vazio que utiliza alguns atributos.
2.3. XML e HTML: XHTML XHTML uma linguagem que utiliza o vocabulrio de HTML com a sintaxe de XML. Os marcadores e elementos em sua grande maioria so idnticos aos de HTML. Como documentos XHTML utilizam a gramtica de XML eles podem ser analisados e apresentados por agentes que lem documentos XML. A seguir so introduzidos alguns pontos que demonstram a importncia de XHTML. Uma das razes da importncia de HTML advm do fato desta linguagem ser amplamente utilizada por milhes de pessoas. Esta ampla utilizao, introduziu alteraes no padro fazendo com que a linguagem comeasse a no atender s necessidades atuais. Para dar uma soluo aos problemas o W3C reformulou a linguagem HTML como uma aplicao de XML. Esta aplicao XHTML que compatvel com HTML e XML e utiliza as melhores caractersticas de cada uma das duas linguagens. Embora XML apresente inmeras vantagens sobre HTML, sua utilizao imediata inviabilizada pelo enorme parque instalado de navegadores, os quais so incapazes atualmente de analisar documentos XML. Como aproximadamente 2 anos so necessrios para que 75% dos usurios atualizem seus navegadores, XHTML surge como uma soluo natural para integrar o melhor de XML ao melhor de HTML. Outro benefcio proporcionado por XHTML a portabilidade, ou seja, utilizando-se documentos bem formados, qualquer que seja o navegador utilizado, um documento ser visualizado sempre da mesma maneira. Em outras palavras, a apresentao torna-se independente do navegador, fato que no ocorre hoje com HTML. Outro ponto fundamental ligado aos novos agentes de acesso ao Web. Estes novos agentes no tem o poder computacional dos microcomputadores utilizados at agora com os navegadores. No tem e no necessitaro, pois estes agentes so perfeitos para XML. Eles simplesmente no iro interpretar qualquer documento que no seja um documento bem formado. Finalizando, deve-se citar as possibilidades de extenso da linguagem oferecidas atravs dos DTDs, que podem ser integrados a um documento XHTML e tambm atravs da incluso de
JCFJ
2002
13
caractersticas particulares de XML, como a utilizao de linguagens especficas (MathML, chemXml) as quais podem ser includas na construo de documentos XHTML. 2.4. Diferenas entre XHTML e HTML A seguir so apresentadas algumas das diferenas existentes entre documentos HTML e XHTML. Deve-se ressaltar que como XHTML uma reformulao de HTML em XML, todos os comentrios feitos sobre documentos bem formados se aplicam tambm a XHTML. Um documento XHTML deve fornecer a declarao de um DTD no incio do documento. A linha abaixo d um exemplo:
<!DOCTYPE PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EM" "">
Deve-se incluir uma referncia ao nome de espao (spacename) XML no elemento <html> do documento:
<html xmlns="http://www.w3.or/TR/xhtml1">
XML diferencia letras maisculas de minsculas (linguagem case sensitive) e portanto o nome dos marcadores XHTML deve ser fornecido em letras minsculas. Todos os marcadores devem ser fechados e corretamente aninhados. No se pode omitir os marcadores <head> e <body> e o primeiro elemento do elemento head deve ser o marcador <title>. Todos os atributos de um elemento devem ser apresentados entre aspas e no devem ser simplificados. Ex.: correto: <input checked="checked"> errado: <input checked>. Para evitar que os caracteres < e & dentro dos elementos <style> e <script> (sero apresentados futuramente) sejam interpretados como incio de marcadores, deve-se utilizar uma linha CDATA (tipo especial definido em XML):
<script> <![CDATA[ ]]> </script>
Se um documento XHTML respeitar estas regras e aquelas que se deve utilizar para se criar um documento bem formado, qualquer analisador ser capaz de interpretar o documento XHTML sem nenhuma informao externa (DTD). A seguir, para que se possa realizar uma comparao, apresenta-se o mesmo documento escrito em HTML (com diversos erros em relao ao padro) e XHTML. A figura 8 apresenta as verses em HTML (acima) e XHTML (abaixo) do documento e a figura 9 a apresentao desses documentos no IE. esquerda tem-se a apresentao do documento HTML e direita a apresentao do documento XHTML.
JCFJ
2002
14

<TITLE>Muitos erros<HTML> <HEAD> <TITLE>Errado</TITLE> <META name="descrio" content="Funciona mas com muitos erros."> <META name="palavras chave" content="muitas, muitas palavras chave"> </HEAD> <BODY> <CENTER> <H1>HTML para XHTML</H1> <P> No to difcil atualizar uma pgina HTML para XHTML.<BR> Deve-se simplesmente seguir algumas regras: <OL> <LI> Voc precisa de um <EM>DTD</EM> para validar o documento. <LI> Deve-se fazer refencia a um espao de nomes (<EM>namespace</EM>). <LI> Marcadores devem estar corretamente <EM>aninhados</LI>.</EM> <LI> Elementos devem estar em <EM>letras minsculas.</LI></EM> <LI> <EM>Coloque estre aspas</EM> todos os atributos. <LI> <EM>No simplifique</EM> os atributos. <LI> Utilize os marcaores de forma correta com <EM>elementos vazios</EM>. <LI> Tome cuidado com os <EM>espaos em branco</EM>. <LI> No utilize ou torne externo <EM>script</EM> e <EM>elementos de estilo</EM>. <LI> Utilize <EM>id</EM> no lugar de <EM>name</EM>. <LI> Marcadores dever ser <EM>fechados</EM> de forma correta. <LI> Trate a <EM>formatao</EM> do texto com estilos. <HR width=60% size=1> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>XHTML Correto</title> <meta name="descrio" content="Funciona mas com muitos erros." /> <meta name="palavras chave" content="muitas, muitas palavras chave" /> </head> <body> <div style="text-align:center"> <h1>HTML para XHTML</h1> <p> No to difcil atualizar uma pgina HTML para XHTML.<br /> Deve-se simplesmente seguir algumas regras: </p> <ol> <li> Voc precisa de um <em>DTD</em> para validar o documento.</li> <li> Deve -se fazer refencia a um espao de nomes (<em>namespace</em>).</li> <li> Marcadores devem estar corretamente <em>aninhados</em>.</li> <li> Elementos devem estar em <em>letras minsculas</em>.</li> <li> <em>Coloque estre aspas</em> todos os atributos.</li> <li> <em>No simplifique</em> os atributos.</li> <li> Utilize os marcaores de forma correta com <em>elementos vazios</em>.</li> <li> Tome cuidado com os <em>espaos em branco</em>.</li> <li> No utilize ou torne externo <em>script</em> e <em>elementos de estilo</em>.</li> <li> Utilize <em>id</em> no lugar de <em>name</em>.</li> <li> Marcadores dever ser <em>fechados</em> de forma correta.</li> <li> Trate a <em>formatao</em> do texto com estilos.</li> </ol> <hr width="60%" size="1" /> </div> </body> </html>
Figura 8 Exemplos de um mesmo Documento Escrito em HTML e XHTML.
Figura 9 Apresentao de um mesmo documento HTML e XHTML no IE.
JCFJ
2002
15
Conforme se pode observar na figura 8, embora o contedo do documento seja diferente o navegador os apresenta de maneira bastante semelhante (cf. figura 9). A razo que o navegador IE tem os DTD de todas as antigas verses de HTML e tambm a capacidade de interpretar erros. Se por um lado este fato positivo, por outro isso faz com que o navegador ocupe muito espao em disco e memria. J para o documento XHTML o navegador no precisa incluir a DTD pois a mesma includa como parte do documento. 2.5. Compatibilidade com Verses Anteriores de Navegadores Embora se possa dizer que a linguagem XHTML representa o futuro do Web, nem todos os navegadores atualmente podem compreender um documento escrito em XHTML. Por esta razo so apresentadas a seguir algumas diretivas (recomendadas em http://www.w3.org/TR/xhtml1) que fazem com que um documento XHTML possa ser visualizado em antigos navegadores. Elementos vazios : deve-se escrever estes elementos com um espao entre o nome do marcador e a barra (Ex.: <br />). Elementos sem contedo e Minimizao de elementos : quando se utiliza por alguma razo elementos que no sejam elementos vazios sem contedo, se deve sempre utilizar os marcadores de abertura e fechamento (Ex.: <title> <title> e no <title />). Folhas de estilo embutidas e Scripts: se as folhas de estilo (0) e scripts utilizarem os caracteres < ou & ou ]]> ou -- deve-se utilizar folhas de estilo externas e no incluir uma linha CDATA. Quebras de linha e valores de atributos : no se deve utilizar quebras de linha nem grande quantidade de espaos dentro de valores de atributos, pois agentes diferentes podem interpretar diferentemente esta informao. Isindex: no se deve incluir mais que um elemento <isindex> documento. Este elemento foi substitudo pelo elemento <input>. no cabealho de um
Atributos lang e xml:lang : deve-se utilizar os dois juntos quando se deseja especificar uma linguagem. Identificadores de fragmentos : o atributo name foi trocado pelo atributo id. Como este ltimo no entendido por todos os navegadores deve-se incluir os dois com valores idnticos (Ex.: <a name=sod id=sod> ... </a>). Instrues de Processamento: deve-se tomar cuidado com esses elementos da linguagem XHTML pois eles normalmente no so apresentados pelos navegadores.
Conforme se pode observar na figura 8, diversas diretivas apresentadas acima foram utilizadas na construo do documento XHTML. Assim, este documento deve ser visualizado sem problemas em diversos tipos de navegadores.
JCFJ
2002
16
Captulo 3 - XHTML: Conceitos Bsicos
Neste captulo sero apresentados os conceitos bsicos necessrios construo de um documento XHTML. Os captulos seguintes introduziro conceitos avanados da linguagem. 3.1. Estruturao de documentos XHTML 3.1.1 As partes de um documento XHTML Todo documento XHTML composto de duas partes principais, o cabealho e o corpo. Alm dessas duas partes o documento tambm pode ter duas outras partes: Declarao da Verso: esta parte utilizada para declarar a verso da linguagem xml que utilizada com o documento. Embora no seja obrigatria a utilizao desta parte fortemente recomendada, pois existe um atributo (encoding) que pode ser utilizado com esta declarao para indicar qual conjunto de caracteres utilizado para escrever o documento. Se este atributo no tiver os valores padro (UTF-4 ou UTF-8) esta declarao se torna obrigatria. A seguir apresenta-se um exemplo desta declarao:
<?xml version=1.0 encoding=iso-8859-1?>
Declarao DOCTYPE (Tipo de Documento): embora no seja n ecessria se o navegador ou o analisador que estiver interpretando um documento precisar ele pode validar o documento XHTML contra um DTD. Para tanto, deve-se declarar na seo DOCTYPE a URL da DTD que ser utilizada. Abaixo se apresenta um exemplo:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Os componentes das principais partes de um documento, cabealho e corpo so apresentados a seguir: Cabealho : utilizado para fornecer informaes sobre o documento. Os componentes desta seo normalmente no so apresentados no navegador. Esses componentes podem ser: o <title>: componente obrigatrio devendo ser o primeiro do cabealho. Seu contedo normalmente apresentado na barra do navegador; o <meta>: uma informao sobre o contedo do documento; o <link>: um documento pode estar ligado a outro documento e esse componente que declara esta informao. Um documento pode por exemplo utilizar uma folha de estilo declarada em outro documento. Informaes de ligao iro informar ao agente onde encontrar o documento e que tipo de documento constitui a ligao; o <style>: so informaes sobre os estilos que sero utilizados no documento atravs das folhas de estilo. Este tpico ser abordado no captulo 4. o <object> e <script>: locoal do documento onde pode ser inserido cdigo que no deve ser apresentado como parte do documento, por exemplo, um script javascript ; o <base>: simplesmente especifica o endereo do documento XHTML.
JCFJ
2002
17
Corpo: a parte central do documento, apresentando a parte que dever efetivamente ser visualizada no agente. Essa parte contm os ttulos, pargrafos, listas, tabelas, etc. do documento. Nesta parte podem tambm estar presentes cdigo e comentrios.
3.1.2 Elementos de Bloco Bsicos de XHTML Em documentos XHTML existe uma sobreposio entre estilo e estruturao: marcadores que so designados como de estruturao, implicitamente definem tambm o estilo da apresentao. Elementos de Bloco tm essa caracterstica, pois por exemplo quando definem um pargrafo, implicitamente aps o texto esto inserindo um salto de linha, ou seja, os elementos de bloco tm uma semntica embutida. A tabela 1 abaixo apresenta alguns desses elementos de bloco. Tabela 1 Elementos de Bloco Bsicos de XHTML Nome do Elemento Pargrafo Marcadores de Abertura e Fechamento
<p> </p>
Comentrio e Semntica Embutida Este deve ser o elemento mais utilizado em um documento XHTML. A maior parte do texto de um documento est contida em pargrafos. A apresentao do pargrafo depende do navegador, mas normalmente existe o equivalente ao espao de uma linha antes e depois do pargrafo. Elemento projetado para ser utilizado com folhas de estilo. Normalmente s existe uma quebra de linha antes e depois do elemento, sem nenhum outro espaamento vertical. Elementos que introduzem os ttulos do documento, existindo em seis nveis. O tamanho das fontes varia de 24 a 10 pontos, da mesma maneira que o espaamento vertical antes e depois do elemento.
Diviso
<div> </div>
Ttulos
Blockquote
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <blockquote> </blockquote>
Preserve
<pr> </pr>
um elemento projetado para apresentar citaes dentro de um documento. Apresenta um espaamento vertical de uma linha antes e depois do elemento assim como uma indentao esquerda e direita do texto. Normalmente os navegadores eliminam todo o espaamento extra introduzido em um texto, deixando somente um espao em branco entre palavras. Com este elemento pode-se preservar todo o espaamento introduzido em um texto.
A seguir, so apresentados alguns documentos que utilizam estes elementos. Deve-se para sua visualizao digitar o documento em um processador de texto, salv-los com a extenso .htm para ento visualiz-los no navegador.
JCFJ
2002
18

<?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> Common XHTML block elements I: p and div and blockquote</title> </head> <body> <p>This is a paragraph</p> <div>This is a div</div> <div>This is a div</div> <div>This is also a div. Note how there is no vertical whitespace between divs.</div> <p>This is a paragraph</p> <blockquote>"This is a blockquote which has both built in style semantics as well descriptive semantics. It is designed for quotations, so we have put quotes around the text."</blockquote> </body> </html>
Figura 10 Marcadores <p>, <div> e <blocknote>.

<?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> Common XHTML block elements II: Headings</title> </head> <body> <h1>Level <h2>Level <h3>Level <h4>Level <h5>Level <h6>Level </body> </html> One heading</h1> Two heading</h2> Three heading</h3> Four heading</h4> Five heading</h5> Six heading</h6>
Figura 11 Marcadores de Ttulos.
JCFJ
2002
19

<?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> Common XHTML block elements II: pre and p elements</title> </head> <body> <p> The source text is identical in both these examples: If a is less than b then print "a is less than b" Else print "b is less than a" End if ' a simple VBScript example </p> <pre> The source text is identical in both these examples: If a is less than b then print "a is less than b" Else print "b is less than a" End if ' a simple VBScript example </pre> </body> </html>
Figura 12 Marcadores <preserve>.
3.1.3 Elementos Descritivos em Linha Bsicos de XHTML Estes so elementos utilizados para descrever seu prprio contedo. O nome do marcador (em ingls) um indicador de como o texto ser apresentado pelo navegador, sendo que navegadores diferentes podem apresentar para alguns marcadores o texto de maneiras diferentes. A tabela 2 abaixo apresenta alguns destes elementos enquanto a figura 13 apresenta um exemplo com a utilizao dos elementos.
JCFJ
2002
20
Tabela 2 Elementos em Linha Bsicos de XHTML Nome do Elemento Abreviao Acrnimo Citao Cdigo Definio nfase Quotation Exemplo Span Marcadores de Abertura e Fechamento
<abbr> </abbr> <acronym> </acronym> <cite> </cite> <code> </code> <dfn> </dfn> <em> </em> <q> </q> <samp> </samp> <span> </span>
Comentrio e Semntica Embutida um elemento meramente descritivo no introduzindo em alguns navegadores nenhum estilo no texto. Outro elemento meramente descritivo que normalmente no introduz nos navegadores nenhum estilo no texto. Utilizado para citaes, sendo que a maioria dos navegadores apresenta o texto em itlico. Elemento descritivo com o texto sendo apresentado como fonte mono-espaada na maioria dos navegadores. Elemento descritivo com o texto sendo apresentado como fonte em itlico e negrito na maioria dos navegadores. Elemento descritivo com o texto sendo apresentado como fonte em itlico na maioria dos navegadores. Outro elemento meramente descritivo que normalmente no introduz nos navegadores nenhum estilo no texto. Elemento descritivo com o texto sendo apresentado como fonte mono-espaada na maioria dos navegadores. Este elemento simplesmente dimensiona o texto. Praticamente este elemento utilizado como um veculo para um estilo ou uma atividade de classe (ser visto em outro captulo). Elemento descritivo com o texto sendo apresentado como fonte em negrito na maioria dos navegadores. Elemento descritivo com o texto sendo apresentado como fonte em itlico na maioria dos navegadores.
Forte Varivel
<strong> </strong> <var> </var>
JCFJ
2002
21
<?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>First XHTML document</title> </head> <body> <div>This is <abbr>an acronym </abbr>in a division.</div> <div>This is <cite>a citation </cite>in a division.</div> <div>This is <code>some code </code>in a division.</div> <div>This is <em>emphasized text </em>in a division.</div> <div>This is <q>a quotation </q>in a division.</div> <div>This is <samp>a sample </samp>in a division.</div> <div>This is <span>a span </span>in a division.</div> <div>This is <strong>strong text </strong>in a division.</div> <div>This is <var>a variable name </var>in a division.</div> </body> </html>
Figura 13 Utilizao dos Elementos Descritivos em Linha Bsicos de XHTML
Conforme se pode observar na figura 13, alguns marcadores no tem efeito visual nenhum. Entretanto, se for utilizado um agente com a capacidade de fala por exemplo, estes marcadores podem ser interpretados. 3.1.4 Elementos de Estilo em Linha Bsicos de XHTML Estes so elementos utilizados para a introduo de estilos no texto de um documento. Esses elementos somente so teis em mdias visuais, como os navegadores ou em um texto impresso. Assim, sempre que possvel se deve utilizar os marcadores descritivos da seo 3.1.3 no lugar dos marcadores de estilo. A tabela 3 abaixo apresenta alguns destes elementos e a figura 14 um exemplo com a utilizao dos elementos.
JCFJ
2002
22
Tabela 3 Elementos de Estilo em Linha Bsicos de XHTML Nome do Elemento Grande Negrito Itlico Teclado Sublinhado Pequeno Riscado Subscrito Sobrescrito True-Type Marcadores de Abertura e Fechamento
<big> </big> <b> </b> <i> </i> <kbd> </kbd>
Comentrio e Semntica Embutida
Apresenta o texto com uma fonte maior que o padro. Apresenta o texto em negrito. Apresenta o texto em itlico. Apresenta o texto mono-espaado como se fosse escrito em uma mquina de escrever. <u> </u> Apresenta o texto sublinhado. <small> </small> Apresenta o texto com uma fonte menor que o padro. <strike> </strike> Apresenta o texto com um risco. <sub> </sub> Apresenta o texto como sobrescrito.. <sup> </sup> Apresenta o texto como sobrescrito. <tt> </tt> Apresenta o texto mono-espaado.
<?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>First XHTML document</title> </head> <body> <div>This is <b>bold text </b>in a division.</div> <div>This is <big>big text </big>in a division.</div> <div>This is <i>itallic text </i>in a division.</div> <div>This is <kbd>keyboard </kbd>in a division.</div> <div>This is <u>underlined text </u>in a division.</div> <div>This is <strike>strikethrough text </strike>in a division.</div> <div>This is <small>small text </small>in a division.</div> <div>This is <sub>sub text </sub>in a division.</div> <div>This is <sup>sup text </sup>in a division.</div> <div>This is <tt>true-type </tt>in a division.</tt> </body> </html>
Figura 14 Utilizao dos Elementos de Estilo em Linha Bsicos de XHTML.
JCFJ
2002
23
3.1.5 Elementos de Estilo sem Estilo Os elementos <br /> e <hr /> so elementos vazios que funcionam somente em mdias visuais. O elemento <br /> ir introduzir uma quebra de linha no documento e o elemento <hr /> ir produzir uma linha horizontal na apresentao do documento. 3.1.6 Listas Em documentos XHTML se pode estruturar a informao sob a forma de listas compostas de uma srie de itens, normalmente um por linha, tendo no incio um marcador ou um nmero. Os tipos de listas disponveis em XHTML so: listas no ordenadas (iniciadas por marcadores), listas ordenadas (iniciadas por nmeros) e listas de definies. Listas so elementos que so bem interpretados em diferentes tipos de mdias, sendo bem transferidos por exemplo para navegadores de voz ou de Braille. Ao se estruturar a informao em uma srie de pginas, se estas forem ser lidas nesses tipos de navegadores, deve-se utilizar listas e no tabelas. 3.1.6.1 Listas no Ordenadas O elemento utilizado para criar uma lista no ordenada <ul>. Um elemento de lista no ordenado pode somente conter elementos de lista <li>, sendo que esses elementos podem conter qualquer tipo de elemento. A figura 15 abaixo apresenta um exemplo de utilizao de listas no ordenadas.
<?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>An unordered list</title> </head> <body> <p>Here is a simple unordered list</p> <ul> <li>First item</li> <li>Second Item</li> <li>Third item</li> </ul> </body> </html>
Figura 15 Exemplo de Listas no Ordenadas.
O tipo do marcador utilizado em uma lista no ordenada pode ser alterado. Para tanto, se deve utilizar o atributo type juntamente com o marcador <ul>. Os tipos de marcadores podem ser circle, disc ou square, sendo que o padro disc. Na maioria dos navegadores, circle produz um crculo vazio, disc um crculo cheio e square um quadrado. Abaixo se apresenta um exemplo de utilizao desse atributo.
JCFJ
2002
24
<p> Uma lista no ordenada simples</p> <ul type = square> <li> Primeiro item</li> <li>Segundo item</li> </ul>
Uma lista no ordenada pode tambm ter diversos nveis, ou seja, pode ter diversas listas aninhadas. Para tanto, dentro de um conjunto de marcadores <li> </li> , se deve incluir um conjunto <ul> </ul> . A figura 16 abaixo apresenta um exemplo com listas no ordenadas de diversos nveis.
<?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>An nested unordered list</title> </head> <body> <p>Here is a nested unordered list</p> <ul> <li>First item contains another list! <ul> <li>First Item in list2</li> <li>Second Item in list2</li> <li>Third item list2</li> </ul> </li> <li>Second Item</li> <li>Third item</li> </ul> </body> </html>
Figura 16 Exemplo de Listas no Ordenadas de Diversos Nveis
3.1.6.2 Listas Ordenadas Listas ordenadas so listas onde os elementos so numerados. O marcador para as listas ordenadas <ol>. Para este tipo de lista se pode tambm alterar o tipo de numerao que ser utilizado atravs do atributo type, que pode assumir os valores 1 (arbico), a, A (alfabtico minsculo e maisculo) e i e I (romano minsculo e maisculo). A figura 17 apresenta um exemplo de lista ordenada com dois nveis.
JCFJ
2002
25
<?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>A nested ordered list</title> </head> <body> <p>Here is a nested ordered list</p> <ol> <li>First item contains another list! <ol> <li>First Item in list2</li> <li>Second Item in list2</li> <li>Third item list2</li> </ol> </li> <li>Second Item</li> <li>Third item</li> </ol> </body> </html>
Figura 17 Exemplo de Listas Ordenadas de Dois Nveis
3.1.6.3 Listas de Definio um tipo de lista que pode ser utilizado na definio de termos. Esse tipo de lista utiliza o marcador <dl> com o termo a ser definido utilizando o marcador <dt> e a definio do termo o marcador <dd>. A figura 18 apresenta um exemplo de lista de definio.
JCFJ
2002
26

<?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>a definition list</title> </head> <body> <p>Here is a definition list</p> <dl> <dt>Element</dt> <dd>An element consists of the tags and the content of the element</dd> <dt>Element Attribute</dt> <dd>The attribute is a property of the element</dd> <dt>Attribute value</dt> <dd>The string value assigned to the element. Must be quoted in XHTML</dd> </dl> </body> </html>
Figura 18 Exemplo de Listas de Definio
3.1.7 Atributos Atributos so utilizados para adicionar significado a um elemento, devendo seguir as regras de XML e assim, devem ser colocados em documentos XHTML nos marcadores de abertura. Se um atributo est presente em um marcador ele deve ter um valor e este valor deve estar entre aspas . Os atributos podem ser divididos nos cinco grupos que so apresentados a seguir. 3.1.7.1 Atributos Universais (Universal/Core Attributes) So atributos que podem ser utilizados por qualquer marcador da linguagem. Na realidade, em XHTML existem quatro atributos que so definidos no padro como universais. Estes atributos so: id: um atributo muito importante pois utilizado para identificar de maneira nica cada elemento de um documento. Seu valor em um documento deve ser nico seno analisadores iro indicar um erro. O valor do atributo id deve comear por uma letra ou um underscore ( _ ) e pode conter qualquer carter alfanumrico. Este atributo substituiu o atributo name das verses anteriores de HTML; class: este atributo especifica a classe de um elemento em um documento XHTML; title: este atributo um atributo que pode ser utilizado para especificar um ttulo que pode ser depois referenciado dentro do documento XHTML, ou seja, ele nomeia o elemento; style: a maneira pela qual se pode adicionar informaes de estilo (apresentao) aos marcadores da linguagem. Deve-se ressaltar que em documentos XHTML se deve preferencialmente utilizar folhas de estilo, pois as informaes do estilo ficam separadas da estrutura do documento. O atributo style permite que se adicione informaes de uma folha de estilo a um marcador em particular. A sintaxe geral deste atributo :
JCFJ
2002
27
style=[propriedade da folha de estilos]:[valor da propriedade]; propriedade da folha de estilos]:[valor da propriedade]; .....
A figura 19 abaixo apresenta um exemplo de utilizao de estilos de folhas de estilo em marcadores.

<?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>Using the style attribute</title> </head> <body style="background-color:white"> <div style="color:blue; font-size:16pt;font-family:arial,sans-serif"> This is 16 point blue,arial, type. </div> <div> This is the browser default type. </div> <div style="background-color:blue; color:yellow;font-size:16pt;font family:'courier new','monospace'"> This is 16 point yellow,courier, type on a blue background. </div> <div style="background-color:yellow;margin:24pt;"> This is the browser default type on a yellow background with a 24pt margin all around. </div> <div> This is the browser default type again. </div> </body> </html>
Figura 19 Exemplo Utilizao de Atributos Universais
No exemplo da figura 19, no elemento <body> o estilo utilizado para estabelecer a cor de fundo do documento. Nas divises so utilizadas trs propriedades da folha de estilos, color, fontsize e font-family para caracterizar a fonte que ser utilizada na apresentao do texto. Em outra diviso se define a cor de fundo do texto (background-color), a cor da fonte (color), o tamanho desta (font-size) e a famlia da fonte (family) cujo nome, por conter espaos, apresentado entre aspas. A ltima diviso apresenta tambm a utilizao de margens com o texto. 3.1.7.2 Atributos de Apresentao Atributos de apresentao so atributos que ao largo dos anos foram sendo introduzidos em verses anteriores de HTML. Atualmente a maioria desses atributos migrou para folhas de estilo. Tabelas e imagens tm atributos de apresentao particulares que sero introduzidos futuramente neste documento.
JCFJ
2002
28
Entre as caractersticas de um documento bem formado est a presena de folhas de estilo que englobam a totalidade dos atributos de apresentao. Assim, documentos XHTML devem evitar ao mximo a utilizao dos atributos que so apresentados abaixo: Atributo align: este atributo informa como deve ser alinhado o texto que um elemento contm. Os valores que este atributo pode assumir so left, right e center, sendo que o valor padro left; Atributos de Apresentao do Elemento <body>: o elemento <body> pode ter diversos atributos sendo utilizados na definio da apresentao de uma pgina. Esses atributos so: o background: atravs deste atributo se pode colocar uma imagem (identificada por sua URL) como fundo de uma pgina; a imagem ser multiplicada para cobrir a totalidade da pgina; o bgcolor: este atributo define a cor de fundo da pgina. o text: este atributo define a cor do texto que ser apresentado na pgina; o link: este atributo define a cor da fonte utilizada em textos que indiquem ligaes antes dessas terem sido chamadas; o vlink: este atributo define a cor da fonte utilizada em textos que indiquem ligaes depois dessas terem sido chamadas; o alink: este atributo define a cor da fonte utilizada em textos que indiquem ligaes enquanto essas esto sendo chamadas. Atributos de Apresentao Associados com Listas: atributos desse tipo so os atributos (j apresentados) para a modificao dos m arcadores em listas no ordenadas e da numerao em listas ordenadas; Atributos para <hr />: so atributos que so utilizados para alterar as caractersticas da linha horizontal traada no texto quando o navegador encontra o marcador <hr />. Eles podem ser: o align: podem assumir os valores left, right e center e definem o posicionamento da linha; o noshade: assume o valor noshade e impede que a linha tenha uma sombra; o size: um nmero em pixels que indica a espessura da linha; o width: uma percentagem ou um n mero que indica a largura da linha em relao pgina. Elementos de Apresentao: juntamente com os atributos de apresentao que tm sua utilizao desencorajada, existem outros elementos que servem para a apresentao geral de um documento e que tambm no devem mais ser utilizados. Esses elementos que, implementados na verso 1.0 de XHTML por razes de compatibilidade, so apresentados abaixo: o <font>: um elemento em linha que faz com que seu contedo tenha certas caractersticas dadas pelos atributos size, que um inteiro entre 1 e 5 que define o tamanho da fonte, sendo 3 o padro, color que define a cor da fonte e face que uma cadeia de caracteres que identifica a fonte que ser utilizada na apresentao do texto;
JCFJ
2002
29
o <basefont>: um elemento com atributos similares queles definidos para font, mas que estabelece valores padres para todo o documento onde font especificamente no tenha sido utilizado.
3.2. Ligaes e Objetos Embutidos Em grande parte, o poder conferido ao Web se deve capacidade de se interligar informao, seja no mesmo documento, seja em documentos diferentes em um mesmo servidor ou em servidores diferentes. Nesta seo, o conceito de ligao, que implementa interligaes ser apresentado. Alm disso, o conceito de objeto embutido, que introduz nas pginas XHTML a possibilidade de utilizao de diversos componentes prontos, tambm ser apresentado. 3.2.1 Ligaes Hipertexto Uma ligao hipertexto (ou hiperligao ou simplesmente ligao) , ou um pedao de texto, ou uma imagem que quando clicada conduz o navegador a um local diferente no mesmo documento ou em um documento diferente. Est ligao tem uma diferenciao visual em relao ao restante do texto no documento, sendo que na maioria dos navegadores esta diferenciao feita utilizando-se texto em cores diferentes ou se a ligao for uma imagem, essas sero apresentadas imagem com uma borda em uma cor diferente. Ao se clicar sobre uma ligao hipertexto o usurio est solicitando ao navegador que navegue para outro recurso e para tanto, o navegador procura por um endereo. A pgina na qual a ligao est e aquela para onde a ligao conduz so chamadas de recursos e ainda, a pgina na qual a ligao est chamada de pgina fonte e aquela para a qual o navegador conduzido chamada pgina destino . As pginas de destino podem estar em diferentes locais: seja no mesmo diretrio, em um diretrio diferente no mesmo servidor ou mesmo em servidores diferentes. Uma ligao pode tambm conduzir a um local no mesmo documento, seja o incio, o final, o meio ou um captulo em particular, por exemplo. 3.2.2 O Elemento <a> O elemento <a> (de anchor ncora) o elemento utilizado em XHTML para conter informaes sobre ligaes hipertexto. Ele pode, dependendo de seus atributos, ser utilizado seja como uma ligao para uma outra localizao, seja como um marcador para que uma ligao possa apontar para ele. 3.2.2.1 O Marcador de ncora como Ligao Fonte Quando em um d ocumento se deseja dar a possibilidade de navegao a partir de um texto ou uma imagem sobre os quais se pode clicar, se deve colocar este texto ou imagem entre os marcadores <a> e </a> e utilizar o atributo href para indicar para onde o navegador deve ir. De uma forma sinttica se tem:
<a href=endereo da pgina destino> elemento a ser clicado</a>
O elemento a ser clicado pode ser um texto ou uma imagem, podendo utilizar os atributos j apresentados como itlico ou negrito (<i>, <b>) no podendo entretanto ser um elemento de bloco como um ttulo ( <h1>). Se for necessrio que um ttulo seja uma ligao se deve utilizar a ncora da seguinte maneira:
<h1><a href=local.html>Clicar</a></h1>
Ligaes podem ser de dois tipos: relativas ou absolutas. Ligaes absolutas so ligaes que contm o endereo completo da pgina destino e relativas um endereo abreviado, indicando a
JCFJ
2002
30
localizao a partir de onde o navegador se encontra. No contexto do Web ligaes relativas so utilizadas com arquivos em um mesmo servidor e ligaes absolutas com arquivos em servidores diferentes. A seguir so apresentadas as diversas possibilidades que podem assumir o destino das ligaes em um documento XHTML. Ligaes Relativas: Arquivos no mesmo Diretrio A seguir, se apresenta um exemplo de utilizao de ligaes relativas em arquivos no mesmo diretrio.
Page 1
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>First hyperlink page</title> </head> <body> <p>This is page 1. It contains a link to <a href="page2.htm">page 2</a>.</p> </body> </html> Page 2 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric t//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Second hyperlink page</title> </head> <body> <p>This is page 2. It contains a link to <a href="page1.htm">page 1</a>.</p> </body> </html>
Figura 20 Exemplo de Ligaes Relativas no Mesmo Diretrio.
Ligaes Relativas: Arquivos em Diretrios Diferentes Para que se possa navegar entre arquivos em diretrios diferentes, se deve indicar ao navegador como ele pode ir do diretrio onde se encontra o arquivo sendo apresentado para o diretrio onde o arquivo a ser apresentado se encontra, ou seja, deve-se utilizar/criar a estrutura de diretrios na qual se deseja navegar. Para o exemplo apresentado a seguir, deve-se criar em qualquer parte do disco rgido um diretrio de nome exemplo e dentro deste um diretrio exemp2 e ainda, dentro deste um diretrio exemp3. A figura 21 a seguir, apresenta os arquivos que devem ser criados e a apresentao das ligaes.
JCFJ e ELFS
2002
31

Page 1
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <title>First relative hyperlink page</title> </head> <body> <p>This is pagerel1.htm. It resides in the root folder.</p> <p> It contains a link to <a href="examp2/pagerel2.htm"> pagerel2.htm</a> in the examp2 folder and to <a href="examp2/examp3/pagerel3.htm">pagerel3.htm</a> in the examp3 folder</p> </body> Page 2 exemp2 </html> <?xml version="1.0" encoding="UTF- 8"?> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <title>First relative hyperlink page</title> </head> <body> <p>This is pagerel2.htm. It resides in the root folder.</p> <p>It contains a link to <a href="../pagerel1.htm"> pagerel1.htm</a> in the examples folder and to <a href="examp3/pagerel3.htm">pagerel3.htm</a> in the examp3 folder</p> </body> </html> Page 3 exemp3 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <title>First relative hyperlink page</title> </head> <body> <p>This is pagerel2.htm. It resides in the root folder.</p> <p> It contains a link to <a href="../../pagerel1.htm"> pagerel1.htm</a> in the examples folder and to <a href="../pagerel2.htm">pagerel2.htm</a> in the examp2 folder.</p> </body> </html>
Figura 21 Exemplo de Ligaes Relativas em Diretrios Diferentes.
Ligaes Absolutas: Arquivos em Servidores Diferentes Para que se possa, a partir de uma pgina localizada em um computador, navegar para uma outra pgina localizada em outro computador, necessrio fornecer na ncora o endereo internet completo do destino. Este endereo denominado URL (Uniform/Universal Resource Locator). A figura 22 apresenta a forma geral de uma URL.
protocolo nome do domnio localizao do recurso
http://www.feg.unesp.br/informacao/index.htm
Figura 22 Partes de uma URL.
O protocolo, em uma URL, indica o tipo de protocolo utilizado pela ligao (http, ftp, wais, gopher, etc.). O nome do domnio indica o servidor em que a pgina se localiza. Todos os servidores da internet tm um endereo IP para o qual normalmente atribudo um alias. Pode-se utilizar na URL
JCFJ
2002
32
tanto o alias como o nmero IP. A localizao do recurso4 , indica onde dentro do servidor se encontra a pgina destino. Uma ligao absoluta tem ento a seguinte forma:
<a href=http://www.feg.unesp.br/informacao/index.htm>Informao</a>
3.2.2.2 O Marcador de ncora como Destino O marcador de ncora pode tambm funcionar como destino da ligao. Para tanto, se deve utilizar os atributos name ou id para etiquetar a ncora. Utilizao do Atributo name Na ncora de destino o atributo name deve ser utilizado da seguinte maneira:
<a name=nome da ncora>Texto</a>
ou simplesmente:
<a name=nome da ncora></a>
Para que se atinja este destino, deve-se na pgina fonte utilizar o elemento <a> da seguinte maneira:
<a href=[endereo do documento]#[nome da ncora]>Texto</a>
Se a ncora de destino localizar-se no mesmo documento, pode-se no utilizar o endereo do documento e o elemento <a> se apresenta da seguinte maneira:
<a href=#[nome da ncora]>Texto</a>
O problema com o marcador name que ele funciona unicamente em agentes capazes de interpretar HTML. Para agentes baseados em XHTML se deve utilizar o atributo id. Utilizao do Atributo id Conforme apresentado anteriormente, um atributo id deve obrigatoriamente ter um nico valor em um documento para que o analisador ao analisar um documento possa identificar unicamente cada um de seus componentes. O elemento <a> ainda utilizado, mas com id, contrariamente a utilizao de name, pode-se utilizar qualquer elemento. Como exemplo, se no documento fonte se tem:
O <a href=h3_c1> captulo sobre vegetais</a> do texto...
O navegador ir saltar para:

<h3 id=h3_c1> Captulo sobre vegetais</h3>
no mesmo documento. Conforme se pode observar no existe nenhum problema em utilizar o elemento de bloco <h>. O problema com o atributo id que navegadores antigos no iro entendlo. Para resolver este problema (conforme apresentado anteriormente) se deve utilizar os dois atributos juntos:
4
Se a pgina estiver localizada em um servidor Unix, o nome da localizao do recurso case sensitive, ou seja, deve-se diferenciar maisculas de minsculas.
JCFJ e ELFS
2002
33
<h3><a name=h3_c1 id=h3_c1> Captulo sobre vegetais</a></h3>
ou
<h3 id=h3_c1><a name=h3_c1>Captulo sobre vegetais</a></h3>
O exemplo da figura 23 apresenta um exemplo de utilizao de uma ncora de destino em um mesmo documento.
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> </head> <body> <a name="index" id ="index"></a> <h1 class="title">Church Liturgy throughout the ages</h1> <div><a href="#cl_rom">Church Liturgy in Roman times</a></div> <div><a href="#cl_dark">Church Liturgy in the Dark ages</a></div> <div><a href="#cl_mid">Church Liturgy in the Middle ages</a></div> <div><a href="#cl_ref">Church Liturgy in Age of Reformation</a></div> <div><a href="#cl_mod">Church Liturgy in Modern times</a></div> <h3><a id="cl_rom" name="cl_rom">Church Liturgy in Roman times</a></h3> <p>"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam"</p> <div><a href="#index">Return to index</a> </div> <h3><a id="cl_dark" name="cl_dark">Church Liturgy in the Dark ages</a></h3> <p>""Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ex ercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam"</p> <div><a href="#index">Return to index</a></div> <h3><a id="cl_mid" name="cl_mid">Church Liturgy in the Middle ages</a></h3> <p>"Lorem ipsum dolor ........ dolore magna aliquam" </p> <div><a href="#index">Return to index</a></div> <h3><a id="cl_ref" name="cl_ref">Church Liturgy in Age of Reformation</a></h3> <p>"Lorem ipsum dolor ....... . dolore magna aliquam"</p> <div><a href="#index">Return to index</a></div> <h3><a id="cl_mod" name="cl_mod">Church Liturgy in Modern times</a></h3> <p>"Lorem ipsum dolor ........ dolore magna aliquam"</p> <div><a href="#index">Return to index</a></div> </body> </html>
Figura 23 ncoras Destino no mesmo Documento.

JCFJ
2002
34
Na figura 24, o exemplo anterior dividido, com um arquivo contendo a origem das ligaes com os destinos sendo definidos em outro arquivo. Neste exemplo se pode analisar a utilizao de ncoras de destino em documentos diferentes.
Page 1 index.html
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title></title> </head> <body> <a name="index" id="index"></a> <h1 class="title">Church Liturgy throughout the ages</h1> <div><a href="external.htm#cl_rom">Church Liturgy in Roman times</a></div> <div><a href="external.htm#cl_dark">Church Liturgy in the Dark ages</a></div > <div><a href="external.htm#cl_mid">Church Liturgy in the Middle ages</a></div> <div><a href="external.htm#cl_ref">Church Liturgy in Age of Reformation</a></div> <div><a href="external.htm#cl_mod">Church Liturgy in Modern times</a></div> </body> Page 2 external.htm </html> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Church Liturgy throughout the ages </title> </head> <body> <h3><a id="cl_rom" name="cl_rom">Church Liturgy in Roman times</a></h3> <p>"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam" </p> <div><a href="index.htm#index">Return to index</a></div> <h3><a id="cl_dark" name="cl_dark">Church Liturgy in the Dark ages</a></h3> <p>"Lorem ipsum dolor ........ dolore magna aliquam" </p> <div><a href="index.htm#index">Return to index</a></div> <h3><a id="cl_mid" name="cl_mid">Church Liturgy in the Middle ages</a></h3> <p>"Lorem ipsum dolor ........ dolore magna aliquam" </p> <div><a href="index.htm#index">Return to index</a></div> <h3><a id="cl_ref" name="cl_ref">Church Liturgy in Age of Reformation</a></h3> <p>"Lorem ipsum dolor ....... . dolore magna aliquam" </p> <div><a href="index.htm#index">Return to index</a></div> <h3><a id="cl_mod" name="cl_mod">Church Liturgy in Modern times</a></h3> <p>"Lorem ipsum dolor ........ dolore magna aliquam" </p> <div><a href="index.htm#index">Return to index</a></div> </body> </html>
Figura 24 ncoras Destino em Documentos Diferentes.
JCFJ e ELFS
2002
35
3.2.3 Utilizao de Imagens como Ligao Fonte Conforme apresentado, um elemento ncora pode ter qualquer elemento de linha como seu componente, o que permite que ele tenha uma imagem como fonte da ligao. Assim, para se utilizar uma imagem (apresentada em detalhes futuramente) como fonte da ligao, o elemento <a> deve ficar da seguinte maneira:
<a href=[endereo]><[elemento de imagem]/>Texto</a>
Um exemplo prtico da sintaxe acima dada por:

<a href=http://www.feg.unesp.br><img src=images/logo-feg.jpg></a>
3.2.4 Ligaes Utilizando Outros Protocolos At o momento todos os destinos de ligao utilizaram o protocolo http. Outros protocolos como ftp, gopher, wais, etc. podem tambm ser utilizados. A seguir apresenta-se em particular a utilizao do protocolo ftp e da instruo mailto, presentes em numerosas pginas Web. 3.2.4.1 O protocolo FTP O protocolo FTP (File Transfer Protocol) um protocolo para a transferncia de arquivos atravs da internet, que pode ser utilizado dentro de uma pgina XHTML. A utilizao do protocolo FTP em uma pgina XHTML passa pela utilizao do elemento <a>. Simplesmente se deve fazer uma ligao onde o destino um arquivo acessvel atravs do protocolo FTP. Para tanto, deve-se utilizar a seguinte sintaxe:
<a href=ftp://[endereo do arquivo>Texto</a>
3.2.4.2 A instruo mailto A instruo mailto no um protocolo e sim uma maneira para que dentro de uma pgina XHTML se possa acessar um cliente de e-mail para enviar uma mensagem. Esta funcionalidade deve ser implementada da seguinte maneira:
<a href=mailto:endereo@dominio>Destinatrio</a>
possvel tambm se adicionar outras informaes mensagem que ser enviada, entre elas o assunto da mensagem e o envio de uma cpia da mensagem a uma terceira pessoa. A figura 25 a seguir apresenta um exemplo.
JCFJ
2002
36

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Mailto example</title> </head> <body> <a href="mailto:frankb@wrox.com?cc=frank@hypermedic.com&subject=a subject&body= enter data here">Mail to Frank</a> </body> </html>
Figura 25 Utilizao da Instruo mailto.
3.2.5 Conexo a Outros Elementos Em uma pgina XHTML pode-se criar ligaes para outros itens alm dos apresentados at aqui. Pode-se por exemplo criar uma ligao para uma folha de estilo, para uma applet Java ou para um objeto que ser embutido na prpria pgina. As folhas de estilo sero analisadas futuramente neste documento. A seguir so apresentadas ligaes a applets e objetos embutidos. 3.2.5.1 O Elemento <applet> Este elemento torna possvel a utilizao, dentro de pginas XHTML, de applets. Applets so pequenos programas escritos em Java 5 que podem ser includos em uma pgina XHTML e enviados atravs do Web. Para tanto no necessrio nenhum conhecimento sobre a linguagem Java. O elemento <applet> pode ter os seguintes atributos: codebase: indica o local onde se encontra a classe Java que contm a applet ; code: indica o nome do arquivo da applet; height e width: determinam o tamanho em pixels que a applet ir ocupar na pgina; param: maneira atravs da qual se pode passar parmetros applet . A figura 26 abaixo apresenta um exemplo de utilizao de uma applet 6 que implementa um relgio.
Java uma linguagem de programao criada pela Sun Microsystem que tem como principal vantagem a capacidade de poder ser executada em um grande nmero de plataformas. Esta applet pode ser recuperada em http://java.sun.com/openstudio/applets/clock.html.
JCFJ e ELFS
2002
37

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Clock Applet example</title> </head> <body> <h3>The Clock Applet example</h3> <applet codebase="java/clock/classes/" code="JavaClock.class" width="250" height="250"> <param name="bgcolor" value="ff0000" /> <param name="border" value="20" /> <param name="ccolor" value="ffff00" /> <param name="cfont" value="Arial|BOLD|18" /> <param name="nradius" value="85" /> </applet> </body> </html>
Figura 26 Utilizao de uma Applet.
3.2.5.2 O elemento <object> Atravs do elemento <object> possvel embutir diversos objetos, como por exemplo uma imagem, um arquivo multimdia ou um texto em uma pgina. O elemento object tem como atributo data que indica o arquivo que contm o objeto que ser includo na pgina e tambm os atributos height e width como o elemento applet . A seguir so apresentados exemplos de incluso de alguns tipos de objetos em uma pgina. Incluso de um Arquivo Texto A figura 27 apresenta um exemplo de incluso de um arquivo texto em uma pgina XHTML.
JCFJ
2002
38

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Embed ding a text object </title> </head> <body> <h2>Embedding a text object</h2> <object data="Lorem.txt" height="250" width="600" /> </body> </html>
Figura 27 Elemento <object>: Incluso de um Arquivo Texto.
Incluso de uma Pgina Web A figura 28 apresenta um exemplo de incluso de uma pgina Web como elemento em outra pgina. A pgina inserida a apresentada na figura 27.
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Clock Applet Example</title> </head> <body> <h2>Clock Applet example page embedded!</h2> <object data="clockapplet.htm" type="text/html" height="350" width="350"> Could not display clockapplet.htm </object> </body> </html>
Figura 28 Elemento <object>: Incluso de uma Pgina Web.
JCFJ e ELFS
2002
39
Verso: quarta-feira, 12 de maro de 2003- 20:16:17
3.3. Imagens Nesta seo ser detalhada a maneira atravs da qual se pode inserir e manipular imagens em uma pgina XHTML. Adicionalmente so introduzidos alguns dos diferentes tipos de formatos de arquivos nos quais as imagens podem ser armazenadas. 3.3.1 Formatos de Arquivos Os dados binrios que compem uma imagem, ao ser armazenados nos diversos formatos de arquivos, so normalmente comprimidos para que se tenha arquivos de tamanho cada vez menor. Compresses podem ser feitas sem perda de informao, ou seja, todos os bits que compem a imagem esto presentes no arquivo comprimido (Ex: GIF e PNG) e, portanto no existe perda de qualidade da imagem. Na compresso dos dados de uma imagem, algoritmos especiais podem ser utilizados para descobrir quais bits de informao podem no ser armazenados sem perda significativa da qualidade da imagem antes de executar a compresso (Ex: JPEG). Este tipo de compresso denominado compresso com perda de informao. A seguir so apresentados os formatos mais utilizados no Web que so GIF, JPEG e PNG e que sempre utilizam algum tipo de compresso. 3.3.1.1 Formato GIF um formato criado com a finalidade de transferir informao (imagens) em redes de computadores. Neste formato o esquema de compresso utilizado denominado LZW (das iniciais dos inventores do algoritmo de compresso Lempel-Ziv & Welch). Em 1987 a empresa Compuserv introduziu a primeira verso GIF denominada GIF87a. Em 1989 e 1990, o padro foi atualizado como GIF89a. O formato GIF dito ser MIME (Multimedia Internet Mail Extension) na maioria dos navegadores, o que faz com que estes navegadores consigam, independente da verso, interpretar arquivos neste formato.
8 O formato GIF trabalha com 8 bits de cor por pixel, ou seja, pode interpretar 2 = 256 cores diferentes e assim para otimizar a qualidade das imagens GIF, se deve escolher quais cores devero compor a paleta de cores que ser utilizada na imagem. Embora o formato GIF utiliza compresso sem perda de informao, o fato de se ter que escolher entre as 16 milhes de cores que podem compor uma imagem computacional, 256, introduz naturalmente uma perda de qualidade da imagem.
O formato GIF apresenta tambm trs tipos especiais de arquivos que so largamente utilizados em pginas Web: GIF Transparente: uma maneira introduzida pelo padro GIF89 que permite que se utilize em uma pgina, imagens que no sejam retngulos sem que se tenha, na rea entre o contorno da imagem e o limite do retngulo que contm a imagem, um preenchimento de uma cor padro. Imagens GIF transparentes so geradas (em uma ferramenta que trabalhe com imagens GIF) informando a cor de transparncia da imagem normalmente a cor de fundo da pgina que deve ser utilizada no preenchimento da rea entre o contorno da imagem e o limite do retngulo que contm a imagem. GIF Animado: o padro GIF89a tambm introduziu uma maneira de criar animaes a partir de uma srie de imagens GIF, ou seja, como em um desenho animado se deve criar uma srie de imagens que ao serem apresentadas umas aps as outras criam uma animao.Todas as imagens so armazenadas no mesmo arquivo. GIF Interlaado: normalmente uma imagem GIF apresentada no navegador iniciando-se na primeira linha que compe a imagem e terminando na ltima. Com imagens do tipo GIF Interlaado linhas no adjacentes so armazenadas e conseqentemente apresentadas juntas, o que no navegador faz com que a apresentao da imagem se inicie borrada e v se tornando mais definida na medida em que a imagem construda.
JCFJ
2002
40
3.3.1.2 Formato JPEG O formato JPEG (ou JPG) foi projetado pelo Joint Picture Expert Group para ser utilizado no armazenamento de fotografias ou imagens com caractersticas de fotografias. No formato JPEG so utilizados 24 bits por pixel, o que permite que se trabalhe com 16,7 milhes de cores (224 ). A compresso utilizada com imagens JPEG realizada com perda de informao, mas o algoritmo retira informaes de cores de freqncias altas que so de difcil visualizao para os seres humanos. O algoritmo de compresso, denominado transformao de co-seno discreto, permite tambm que se defina quo comprimida ser a imagem, ou seja, quanta informao ser perdida. O formato JPEG permite tambm que imagens sejam apresentadas aos poucos em uma pgina Web de maneira anloga s imagens GIF Interlaadas. Esse tipo de imagem, denominado JPEG progressivo ou p-JPEG, deve ser utilizado com cautela, pois navegadores mais antigos podem no compreend-lo. 3.3.1.3 Formato PNG Este formato comeou a ser utilizado na Web aps os formatos GIF e JPEG j estarem estabelecidos e mesmo assim vem sendo largamente utilizado, pois o formato foi avalizado pelo W3C por ser um formato no proprietrio pelo qual no necessrio o pagamento de royalties pela utilizao (teoricamente ao se utilizar os formatos GIF e JPEG se deveria pagar algo aos criadores do formato). O formato PNG foi criado para substituir o formato GIF e fornece as seguintes caractersticas: Cores verdadeiras (True Color), cores indexadas e suporte para nveis de cinza; Transparncia de canal alpha: no formato GIF um bit ou transparente ou no transparente. No formato PNG se pode trabalhar com nveis de transparncia, ou seja, um bit pode ser mais ou menos transparente. Correo de Fator Gamma: com as imagens PNG se pode corrigir este fator para melhorar a caracterstica das imagens.
Outra caracterstica do formato PNG que neste formato, ao contrrio dos formatos GIF e JPEG, pode-se definir a profundidade da imagem, ou seja, possvel definir quantos bits sero armazenados na definio de um pixel da imagem. Quanto maior o nmero de bits utilizados, maior ser o tamanho do arquivo gerado. Do mesmo modo que os arquivos p-JPEG, deve-se utilizar arquivos PNG com cuidado, pois navegadores antigos podem no ser capazes de interpretar arquivos PNG, ou na melhor das hipteses podem no ser capazes de utilizar todas as potencialidades do formato. 3.3.2 O Elemento <img> Imagens so utilizadas em pginas XHTML atravs do elemento <img>. Este elemento um elemento em linha vazio que tem obrigatoriamente dois atributos, src que indica o endereo onde se encontra a imagem que ser exibida e alt que apresenta um texto que ser mostrado caso a imagem no possa ser apresentada. A sintaxe geral do elemento <img> :
<img src=[endereo ou caminho da imagem] alt=texto descritivo />
A figura 29 apresenta um exemplo de utilizao de uma imagem em uma pgina XHTML.
JCFJ e ELFS
2002
41

<?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>Background Image</title> </head> <body bgcolor="#778811"> <div style="text-align:center;"><img src="monalisa_sm2.jpg" alt="Mona Lisa" /></div> </body> </html>
Figura 29 Utilizao de uma Imagem.
Alm dos atributos obrigatrios, outros podem ser utilizados com imagens para melhorar sua visualizao em pginas Web. A seguir esses atributos so apresentados. 3.3.2.1 Atributo longdesc Este atributo no aceito por um grande nmero de navegadores. Sua finalidade fornecer a URL de um arquivo de texto que contm uma descrio da imagem. Sua sintaxe :
longdesc=[URL do arquivo contendo a descrio]
3.3.2.2 Atributos width e height Estes atributos definem o tamanho em pixels que a imagem ir ocupar na pgina. Se a imagem original for maior ou menor que o tamanho original da imagem ela ser redimensionada para ocupar o espao definido. Sua sintaxe :
width=[tamanho em pixels] height=[tamanho em pixels]
Embora esses atributos no sejam obrigatrios interessante que eles sejam sempre definidos, pois a maioria dos navegadores ao receber uma pgina para apresentao, constri um esboo desta, j alocando os espaos para a apresentao das imagens e assim, durante a apresentao efetiva da pgina o navegador no ter que arrumar o espaamento sempre que for apresentar uma imagem.
JCFJ
2002
42
3.3.2.3 Atributos vspace e hspace Estes so atributos que tiveram sua utilizao descontinuada e que so includos na linguagem para garantir a compatibilidade com verses anteriores de navegadores. Os efeitos obtidos com esses atributos podem ser obtidos tambm com a utilizao das propriedades de folhas de estilo. Esses atributos assumem valores em pixels e definem o espao que deve ser deixado ao redor da imagem, horizontal e verticalmente sendo que sua sintaxe a seguinte:
hspace=[valor em pixels] vspace=[valor em pixels]
A figura 30 apresenta um exemplo onde se pode observar o efeito da utilizao desses atributos.
<?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>Background Image</title> </head> <body bgcolor="#778811"> <div> <u>aa<img src="leonardo.jpg" alt="Leonardo Da Vinci" />aa aa<img src="leonardo.gif" alt=" Leonardo Da Vinci " />aa</u><br /> <u>bb<img src="leonardo.jpg" alt=" Leonardo Da Vinci " hspace='25' />bb bb<img src="leonardo.gif" alt=" Leonardo Da Vinci "/>bb</u><br /> <u>cc<img src="leonardo.jpg" alt=" Leonardo Da Vinci " vspace='25' />cc cc<img src="leonardo.gif" alt=" Leonardo Da Vinci "/>cc</u><br /> </div> </body> </html>
Figura 30 Imagens e os Atributos hspace e vspace.
Conforme apresentado, se pode obter efeito semelhante ao proporcionado pela utilizao desses atributos com estilos em folhas de estilo. A seguir apresenta-se respectivamente esta utilizao alternativa para hspace e vspace:
<img style=margin-left:25px;margin-right:25px; src=...... /> <img style=margin-top:25px;margin-bottom:25px; src=...... />
JCFJ e ELFS
2002
43
3.3.2.4 Atributo align Este atributo tambm teve sua utilizao descontinuada, sendo portanto aconselhvel utilizar em seu lugar estilos de folhas de estilo. A sintaxe deste atributo apresentada abaixo com o smbolo | sendo utilizado para apresentar os possveis valores que o atributo pode assumir.
align=top|middle|bottom|left|right
Cada um desses valores ir posicionar a imagem e o texto em torno desta. Seus efeitos so: align=right: colocar a imagem no lado direito do bloco do qual ela faz parte. align=left: colocar a imagem no lado esquerdo do bloco do qual ela faz parte. align=top: alinhar o topo da imagem com o topo do texto. A figura 31 apresenta para um texto as denominaes utilizadas no posicionamento de imagens. align=middle: alinhar o meio da imagem com uma linha que passa no meio do texto. align=bottom: alinhar o base da imagem com a base do texto.
Topo
Linha Base
Guaratinguet
Figura 31 Alinhamento Texto/Imagem.
Topo do Texto Meio do Texto Base do Texto
A figura 32 a seguir apresenta um exemplo com a utilizao de bottom, middle e top.

<?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>Using the align attribute to align text and images</title> </head> <body bgcolor="white"> <div>Here is a logo <img src="logo.gif" alt="logo" /> sitting on the baseline, the default or align="bottom". </div> <div>Here is a log o <img src="logo.gif" alt="logo" align="middle" /> with the middles lined up, align ="middle". </div> <div>Here is a logo <img src="logo.gif" alt="logo" align="top" /> with align set to "top". </div> </body> </html>
Figura 32 Imagens e os Atributos bottom, middle e top.
JCFJ
2002
44
Conforme apresentado, prefervel utilizar-se estilos de folhas de estilo. Na figura 33 se apresenta ento, um exemplo dessa utilizao.
<?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>Using CSS properties to align text to images</title> </head> <body bgcolor="white" style="font-size:16pt;"> <div>Here the CSS property <img src="logo.gif" alt="logo" style="vertical-align:baseline;" /> has been set to baseline. </div> <div>Here the CSS property <img src="logo.gif" alt="logo" style="vertical-align:middle;" /> has been set to middle. </div> <div>Here the CSS property <img src="logo.gif" alt="logo" style="vertical-align:top;" /> has been set to top. </div> <!-<div>Here the CSS property <img src="logo.gif" alt="logo" style="vertical-align:text-top;" /> has been set to text -top. </div> --> <div>Here the CSS property <img src="logo.gif" alt="logo" style="v ertical-align:bottom;" /> has been set to bottom. </div> <!-<div>Here the CSS property <img src="logo.gif" alt="logo" style="vertical-align:text-bottom;" /> has been set to text -bottom.--> </div> </body> </html>
Figura 33 Utilizao de Estilos com Imagens.
3.3.2.5 Atributo border Este outro atributo de utilizao descontinuada que deve ter seu uso substitudo pela utilizao de estilos. Este atributo define a espessura da borda colocada em torno da imagem (normalmente quando esta faz parte de uma ligao). A seguir apresenta-se a sintaxe de utilizao deste atributo com a figura 34 apresentando um exemplo de utilizao.
JCFJ e ELFS
2002
45

<?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>Borders around a Leonardo Image</title> </head> <body bgcolor="#666633"> <div> <a href="leonardo.txt"><img src="leonardo.jpg" alt="Leonardo Da Vinci" longdesc="leonardo.txt" /></a> <a href="leonardo.txt"><img src="leonardo.jpg" alt="Leonardo Da Vinci" longdesc="leonardo.txt" border="0" /></a> </div> <div> <img src="leonardo.jpg" alt="Leonardo Da Vinci" longdesc="leonardo.txt" /> <img src="leonardo.jpg" alt="Leonardo Da Vinci" longdesc="leonardo.txt" border="5" /> </div> </body> </html>
Figura 34 Utilizao de Imagens e Bordas.

A utilizao de bordas atravs de atributos de estilo feita da seguinte maneira:
<img style=border-width:25px; src=..... />
3.3.2.6 Atributo ismap e usemap Estes atributos so utilizados quando se deseja mapear partes internas de uma imagem como fontes de ligaes. O atributo usemap utilizado quando o cdigo para o mapeamento da imagem est no lado do cliente e o atributo ismap quando o cdigo est no servidor. A utilizao do atributo usemap ser apresentada mais frente; a utilizao no servidor dificilmente realizada e no ser apresentada. 3.3.3 Efeitos em Imagens Quando se trabalha com imagens, alguns efeitos podem ser aplicados a essas imagens. A seguir so apresentados os conceitos de transparncia, animao e mapeamento de imagens. 3.3.3.1 Transparncia em Imagens Conforme apresentado, atravs da utilizao de imagens transparentes se pode trabalhar com imagens de contornos irregulares sem que se tenha uma rea da imagem (do contorno da imagem at o contorno do retngulo que a contm) em uma cor especfica identificando uma forma retangular. Tambm foi dito que para se criar imagens ditas transparentes basta se definir a cor de transparncia, ou seja, a cor com que a rea entre a borda da figura e a borda do retngulo que a contm ser preenchida. Ao se definir essa cor como a cor de fundo de imagem se est criando uma imagem transparente.
JCFJ 2002 46
Alguns problemas podem fazer com que uma imagem no seja totalmente transparente. O primeiro, que pode ser evitado pela pessoa que constri a pgina, ir aparecer se, como fundo da pgina no for utilizado uma cor slida e sim um padro. Outro problema est ligado ao usurio que est visualizando a pgina, que pode definir em seu navegador uma cor especfica como fundo de pgina e assim a transparncia definida na pgina inicial no ter efeito. O navegador tambm pode causar problemas, pois a definio de uma cor de fundo pode no coincidir com a cor definida originalmente como transparente na imagem. 3.3.3.2 Animao em Imagens Imagens animadas introduzem em pginas XHTML a possibilidade de animao sem a necessidade de se utilizar scripts especiais. Embora imagens animadas tornem as pginas muito mais atrativas, se deve tomar cuidado para que as pginas que contm essas imagens no fiquem muito pesadas (tamanho), pois arquivos com imagens animadas normalmente so bem maiores que arquivos comuns. 3.3.3.3 Mapeamento de Imagens Conforme apresentado, imagens podem ser utilizadas como ncoras em ligaes. Alm desse fato se pode tambm fazer com que reas especficas de uma imagem sejam ligaes para recursos diferentes. Esta caracterstica introduzida com o mapeamento das imagens. O mapeamento de uma imagem feito atravs da definio de coordenadas internas para a imagem. A figura 35 apresenta um exemplo de mapeamento. Conforme se pode observar, o eixo x tem valores crescentes da esquerda para a direita e o eixo y de cima para baixo.
x
0 0 50 100 150 200 250
y 50
100
Figura 35 Coordenadas em uma Imagem.
As reas de uma imagem podem ser mapeadas utilizando-se diversos formatos e coordenadas. Os formatos que podem ser utilizados so: crculos, retngulos e polgonos, sendo que a unidade de medida que deve ser utilizada o pixel. Crculo: as coordenadas do crculo so dadas por um par (x,y) que indica o centro mais o raio. A sintaxe geral :
[coordenada x do centro], [coordenada y do centro], [raio do crculo]
Para a figura 35, as coordenadas do crculo so ento: 50,50,15. Retngulo: reas retangulares so expressas pelas coordenadas (x,y) do vrtice superior esquerdo e pelas coordenadas (x,y) do vrtice inferior direito. A sintaxe geral :
JCFJ e ELFS
2002
47
[coordenada x superior esquerda], [coordenada y superior esquerda], [coordenada x inferior direita], [coordenada y inferior direita]
Para a figura 35, as coordenadas do retngulo so ento: 100,35,150,65. Polgono: a rea dos polgonos representada por uma lista d e pares (x,y) separados por ponto e vrgulas da seguinte maneira:
X1,y1, x2,y2, x3,y3, ... etc.
Para a figura 35, as coordenadas do polgono so ento: 180,50, 200,25, 225,25, 225,50, 250,65, 200,70 Aps o mapeamento ter sido realizado deve-se, dentro do documento XHTML, criar as ligaes para cada uma das reas definidas na imagem. Quando se deseja mapear uma grande quantidade de imagens, programas especiais 7 que criam este mapeamento podem ser utilizados. Para uma nica imagem qualquer programa grfico que apresente as coordenadas internas de uma imagem pode ser utilizado na definio das reas internas da figura. Na figura 36, apresenta-se um exemplo de utilizao de mapeamento de imagens. A imagem representando o mapa do estado de Ohio nos EUA pode ser aberta em um editor grfico para se verificar as coordenadas que identificam as cidades. O elemento a ser utilizado no mapeamento das imagens o elemento area sendo que esse elemento pode ter os seguintes atributos: shape: informa o formato que ser utilizado para definir a rea que ser mapeada; coords: definem as coordenadas do formato escolhido; href: este atributo indica o endereo do recurso que ser acionado quando a rea especfica da imagem for clicada; alt: texto alternativo que ser apresentado quando o mouse estiver posicionado sobre a rea especificada; tabindex: a ordem na qual cada uma das reas acessada ao ser pressionada a tecla tab; accesskey: define uma tecla de atalho que a pode ser utilizada com a rea. Deve-se definir uma letra que quando pressionada juntamente com a tecla alt ir selecionar a rea; onfocus: a ser utilizado com scripts; onblur: a ser utilizado com scripts; target: para ser utilizado para indicar uma ligao em um frame diferente.
Um exemplo de programa de mapeamento de imagens o software CoffeeCup Map que pode ser encontrado em www.coffeecup.com, ou nos sites de distribuio de shareware como por exemplo o site www.tucows.com. Alm desse software para se trabalhar com imagens GIF se pode utilizar, da mesma empresa, o software CoffeeCup Gif Animator para criar GISs animados.
JCFJ
2002
48

<?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>Image maps of Ohio locations</title> </head> <body bgcolor="white"> <h1 align="center">Amish Wear</h1> <h2 align="center">Find the Ohio store nearest you</h2> <div align="center"> <img src="../pictures/ohio4.gif" alt="Ohio locati ons" usemap="#oh1" border="0" /> </div> <div align="center"> <img src="../pictures/ohio3.gif" alt="Ohio locations" /> </div> <div align="center"> <a href="cle.htm">[Cleveland]</a> <a href="akr.htm">[Akron]</a> <a href="tol. htm">[Toledo]</a> <a href="col.htm">[Columbus]</a> <a href="lan.htm">[Lancaster]</a> <a href="cin.htm">[Cincinatti]</a> </div> <map name="oh1"> <area shape="circle" coords="200,52,12" href="cle.htm" alt="Link to Cleveland store page" /> <area shape="circle" coords="214,70,12" href="akr.htm." alt="Link to Akron store page" /> <area shape="circle" coords="75,38,12" href="tol.htm" alt="Link to Toledo store page" /> <area shape="circle" coords ="134,153,12" href="col.htm" alt="Link to Columbus store page" /> <area shape="circle" coords="171,174,12" href="lan.htm" alt="Link to Lancaster store page" /> <area shape="circle" coords="46,254,12" href="cin.htm" alt=" Link to Cincinatti store page" /> </map> </body> </html>
Figura 36 Utilizao do Mapeamento de Imagens.
3.4. Tabelas Uma grande parte das pginas presentes no Web utilizam tabelas em sua composio, seja para a apresentao de informao seja na construo do layout da pgina. Esta seo introduz os elementos das estruturas das tabelas e sua apresentao. Todas as tabelas em pginas XHTML seguem uma mesma estrutura bem definida, com um ttulo e um cabealho onde indicado o contedo de cada coluna da tabela. Adicionalmente algumas
JCFJ e ELFS 2002 49
tabelas apresentam notas no final de cada coluna (como notas de p de pgina) para explicar em detalhes o contedo da coluna. 3.4.1 Elementos Bsicos de Tabelas Nesta seo sero apresentados os elementos bsicos de definio de tabelas XHTML. O exemplo apresentado na figura 37 mostra um exemplo de tabela simples.
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="white"> <table border="1"> <tr><td>Row 1 -Col 1</td><td>Row 1 -Col 2</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2 -Col 2</td></tr> </table> </body> </html>
Figura 37 Uma Tabela Simples.
Em XHTML, todas as partes de uma tabela so definidas atravs de marcadores. A seguir apresenta-se cada um dos marcadores utilizados na linguagem para a manipulao das tabelas. table: este elemento engloba a totalidade da estrutura da tabela. Ele pode conter os seguintes elementos: o <caption>: este elemento opcional, mas se ele estiver presente deve ser o primeiro elemento da tabela. Ele indica o ttulo da tabela sendo construda; o <thead>, <tfoot> e <tbody>: estes trs elementos so tambm opcionais, mas quando includos, devem aparecer na ordem apresentada neste pargrafo. Estes elementos incluem descrio para o cabealho, o rodap e o corpo da tabela; o <tr>: este elemento utilizado para se definir as colunas da tabela e pode estar contido ou no elemento table ou nos elementos thead, tfoot e tbody. Quando qualquer destes trs elementos est presente na tabela, o elemento <tr> deve estar nestas subsees. O elemento <tr> pode conter unicamente os elementos <th> e <td>; o <th> e <td>: estes elementos representam as clulas individuais da tabela e devem estar sempre contidos no elemento <tr>. O elemento <th> normalmente utilizado para clulas de cabealho, sendo que na maioria dos navegadores o texto destas clulas aparecer centrado e em negrito. O elemento <td> utilizado com clulas padro da tabela. Esses dois elementos podem conter, alm de texto, qualquer elemento XHTML. A tabela apresentada na figura 37 o tipo mais simples de tabela. Normalmente tabelas tm um ttulo e cabealhos em cada uma das colunas. Embora possa parecer mais prtico se definir o ttulo de tabelas com os elementos <h> no lugar do elemento <caption>, deve-se preferir a segunda opo,
JCFJ
2002
50
pois navegadores que trabalham com outra mdia que no a impressa t rataram tabelas com o elemento <caption> de maneira mais apropriada (um navegador que emita sons pode efetivamente dizer ttulo da tabela: o ttulo). Outro fato que deve ser levado em considerao a utilizao do elemento <style> na definio da apresentao dos elementos da tabela. A figura 38 apresenta uma tabela mais elaborada, com cabealhos para as colunas.
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simp le table with headings and a caption</title> </head> <body bgcolor="white"> <table border="1"> <caption>A simple XHTML table</caption> <tr><th>header 1</th><th>header 2</th></tr> <tr><td>Row 1 -Col 1</td><td>Row 1 -Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2 -Col 2</td></tr> </table> </body> </html>
Figura 38 Uma Tabela com Ttulo e Cabealhos.
Embora se possa construir tabelas bastante complexas unicamente com os elementos <tr> e <td> quando se trabalha com scripts, para que se possa acessar individualmente elementos especficos da tabela, interessante a utilizao dos elementos <thead>, <tfoot> e <tbody>. A figura 39 apresenta um exemplo de tabela que utiliza esses elementos (deve-se notar que o elemento <tr> no faz parte diretamente de <table>) e tambm define a apresentao da tabela utilizando estilos.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A stru ctured table</title> </head> <body bgcolor="white"> <table border="1" style="background -color:yellow;"> <thead style="background -color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background -color:teal;"> <tr> <td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody> <tr><td>Row 1 -Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 39 Uma Tabela com Estilos e <thead>, <tfoot> e <tbody>.
JCFJ e ELFS
2002
51
3.4.2 Diviso de Linhas e Colunas Uma tabela composta de linhas e colunas sendo que os elementos destas linhas e colunas so clulas individuais. Com a linguagem XHTML se pode ter em uma mesma tabela linhas e colunas de tamanhos diferentes (com mais ou menos clulas). Para que se obtenha esta caracterstica se deve utilizar os elementos colspan e rowspan que tem a seguinte sintaxe:
<td colspan=[inteiro]> <td rowspan=[inteiro]>
O nmero que for informado ser o nmero de colunas ou linhas que ser mesclado. A figura 40 abaixo apresenta um exemplo de mesclagem de colunas e a figura 41 um exemplo de mesclagem de linhas.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="#ffffff"> <table border="1"> <tr><td colspan="2">Row 1 -Col 1 & 2</td><td>Row 1-Col 3</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2-Col 2</td><td>Row 2 -Col 3</td></tr> <tr><td>Row 3 -Col 1</td><td>Row 3-Col 2</td><td>Row 3 -Col 3</td></tr> </table> </body> </html>
Figura 40 Mesclagem de Colunas em uma Tabela.

<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="#ffffff"> <table border="1"> <tr><td rowspan="2">Row 1 & 2 -Col 1</td><td>Row 1 -Col 2</td><td>Row 1-Col3</td></tr> <tr><td>Row 2-Col 2</td><td>Row 2-Col 3</td></tr> <tr><td>Row 3-Col 1</ td><td>Row 3-Col 2</td><td>Row 3-Col 3</td></tr> </table> </body> </html>
Figura 41 Mesclagem de Linhas em uma Tabela.

JCFJ
2002
52
3.4.3 Aplicao de Estilos em Tabelas Estilos podem ser aplicados a tabelas atravs de atributos ou atravs da utilizao de folhas de estilo (atualmente unicamente a especificao CSS1 do W3C). Nesta seo ser introduzida a utilizao de estilos em tabelas, atravs de atributos e folhas de estilo. 3.4.3.1 Definio de Bordas de Tabelas As clulas das tabelas em mdias visuais so definidas atravs de linhas que delimitam seus contornos. Trs atributos em XHTML tratam com estas linhas, as bordas das tabelas: border, frame e rules. Esses trs atributos, que s podem ser utilizados com o elemento <table>, so apresentados a seguir. border: este atributo especifica a espessura da linha que ser utilizada para desenhar a tabela. Sua sintaxe a seguinte:
border=[valor em pixels].
frame: este atributo define se uma rea envolvendo a tabela deve ser ou no desenhada. Atravs da sintaxe apresentada a seguir, os valores que o atributo pode assumir so apresentados:
frame=void|above|below|lhs|rhs|hsides|vsides|box|border.
Se o valor do atributo for void, nenhuma rea ser desenha, se for above, uma rea acima da tabela ser desenhada e se for below uma rea abaixo da tabela ser desenhada. Se o valor do atributo for lhs, rhs, hsides ou vsides uma rea ser desenhada respectivamente do lado esquerdo da tabela, do lado direito, acima e abaixo da tabela e a esquerda e a direita. Se o atributo for box ou border uma rea em torno de toda a tabela ser desenhada. rules: este atributo permite escolher como as linhas entre as clulas sero desenhadas. Atravs da sintaxe apresentada a seguir, os valores que o atributo pode assumir so apresentados:
rules=none|all|groups|rows|cols.
Se o valor do atributo for none, nenhuma linha ser desenhada entre as clulas contrariamente a all que ir desenhar linhas entre todas as clulas. Se o valor do atributo for groups, uma linha ser desenhada em torno dos elementos <thead>, <tfoot> e <tbody>. Se o valor for respectivamente rows ou cols, linhas sero desenhadas entre linhas ou colunas da tabela. Atravs dos estilos das Folhas de Estilo em Cascata (CSS) pode-se tambm aplicar estilos s tabelas. Essas folhas de estilo tm diversas propriedades que podem ser utilizadas para se decorar uma tabela. As mais comumente utilizadas tm nomes auto-explicativos e so: border-style, border-width e border-color. Existem diversas outras, entre elas se pode citar: bordertop, border-top-width (e diversas outras permutaes). A sintaxe geral :
border-*:[valor 1] [valor 2] [valor 3] [valor 4]; * podendo ser style, width, color, etc.
Conforme se pode observar acima a border quatro valores podem ser atribudos. Se um nico valor for atribudo, este valor ser adotado pelas quatro bordas. Se dois valores forem atribudos o primeiro ser adotado pelo pelas bordas superior e inferior e o segundo valor pelas bordas laterais. Se trs valores forem atribudos, o primeiro ser adotado pela borda superior, o segundo pelas bordas
JCFJ e ELFS
2002
53
laterais e o terceiro pela borda inferior. A atribuio de quatro valores far com que esses sejam utilizados respectivamente pelas bordas superior, da direita, inferior e da esquerda. A figura 42 abaixo mostra um exemplo de utilizao de Estilos das Folhas de Estilo (que sero apresentadas no captulo 5) com tabelas. Nesta figura se pode observar a utilizao dos atributos border e rules e a redefinio, atravs de estilos dos elementos <caption> e <td> da tabela.
<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple tab le with headers</title> <style type="text/css"> caption{ background-color:#ccffcc; } td{ border-style:solid; border-width:10pt 5pt; border-color:silver green blue white; } </style> </head> <body style="background-color:white;"> <table border="5" style="background-color:yellow;" rules="groups"> <caption>Example of borders using attributes and CSS</caption> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="backgr ound-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1 -Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 42 Tabela com Estilos de Folhas de Estilo e Atributos.
3.4.3.2 Definio de Espaamento e Margens de Tabelas No contexto de pginas XHTML, espaamento a distncia entre clulas individuais e margem o espao entre o contedo da clula e a borda da clula. Atravs dos atributos cellspacing e cellpadding possvel controlar estes valores em tabelas de pginas XHTML. A sintaxe dos atributos cellspacing e cellpadding apresentada abaixo, sendo que as figuras 43 e 44 apresentam exemplos de utilizao desses atributos.
cellspacing=[valor em pixels] cellpadding=[valor em pixels]
JCFJ
2002
54

<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="white"> <table border="1" style="background-color:yellow;" cellspacing="20"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody style="background-color:white;"> <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 43 Espaamento em Tabelas.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="white"> <table border="1" style="background-color:yellow;" cellpadding="20"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody style="background-color:white;"> <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 44 Margens em Tabelas.
JCFJ e ELFS
2002
55
Alm do atributo cellpadding, estilos de folhas de estilos tambm podem ser utilizados na definio, bem mais precisa que com atributos, do espaamento de tabelas (no existe a possibilidade de utilizao da propriedade margin com tabelas). Esta utilizao deve entretanto ser cuidadosa, pois a maioria dos navegadores no trabalha ainda de forma satisfatria com esta propriedade de folhas de estilo para tabelas. As seguintes propriedades, cujos nomes explicam suas funes, podem ser utilizadas com tabelas: padding-left, padding-top, padding-right e padding-bottom. Pode-se tambm, a exemplo da propriedade border, utilizar a propriedade padding para se definir as quatro margens da seguinte maneira:
padding: [valor 1] [valor 2] [valor 3] [valor 4];
Neste caso de forma anloga propriedade border, se um nico valor for atribudo este valor ser utilizado como margem acima, abaixo e aos lados do elemento na clula. Se dois valores forem atribudos o primeiro ser adotado como margem acima e abaixo e o segundo como margens laterais. Se trs valores forem atribudos, o primeiro ser adotado como margem superior, o segundo como margens laterais e o terceiro como margem inferior. A atribuio de quatro valores far com que estes sejam utilizados respectivamente como margens, superior, da direita, inferior e da esquerda. A figura 45 mostra um exemplo de utilizao de Estilos das Folhas de Estilo na definio de margens.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body bgcolor="white"> <table border="1" style="background-color:yellow;" > <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody style="background-color:white;"> <tr><td style="padding-left:10pt;">padding left is set to 10 points.</td> <td style="padding:0pt 10pt;">left and right set to 10 points</td> </tr> <tr><td style="padding:10pt 0pt;">Top and bottom set to 10 points.</td> <td style="padding:10pt;">10 points all round.</td> </tr> <tr><td style="padding-top:10pt;">Top set to 10 points.</td> <td style="padding-bottom:10pt;">Bottom set to 10 points.</td> </tr> </tbody> </table> </body> </html>
Figura 45 Margens via Folhas de Estilo em Tabelas.
3.4.3.3 Definio da Cor de Fundo de Tabelas A melhor maneira de se definir as cores de fundo de tabelas passa pela utilizao de estilos. Entretanto para manter a compatibilidade com verses anteriores da linguagem e conseqentemente com navegadores antigos, se pode utilizar tambm o atributo bgcolor. Se atributos e estilos forem utilizados conjuntamente, o valor da propriedade que define o estilo ir sobrescrever o valor do
JCFJ 2002 56
atributo. O atributo bgcolor pode ser utilizado com cada um dos seguintes elementos, <table>, <tr> e <td> na definio das cores de fundo da tabela. A sintaxe do atributo bgcolor :
bgcolor=[nome da cor] ou [cdigo da cor em hexadecimal]
Conforme apresentado a utilizao de estilos deve ser privilegiada. Para tanto, deve-se utilizar a propriedade background-color da folha de estilo. A sintaxe de utilizao desta propriedade :
background-color= [nome da cor] ou [cdigo da cor em hexadecimal];
3.4.3.4 Definio da Altura e Largura de Tabelas Novamente a definio de alturas e larguras em tabelas pode ser feita atravs de atributos ou estilos, sendo que valores de estilos sobrescrevem valores de atributos. O atributo width pode ser utilizado para se definir a largura da tabela inteira e das c olunas individuais sendo que se pode atribuir a ele um valor absoluto em pixels, um valor relativo ou uma percentagem. Preferencialmente se deve definir a largura das colunas na primeira linha, pois os navegadores quando encontram um atributo width iro percorrer a tabela em construo do ponto da apresentao em que se encontram at o incio para recalcular a apresentao da tabela. Quando valores diferentes so encontrados em pontos diferentes da tabela os navegadores, a partir de algoritmos internos, definem o que fazer. Na figura 46 apresentada a seguir, a primeira tabela foi definida em valores relativos e a segunda em valores absolutos.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table</title> </head> <body> <table border="1" style="background-color:yellow;" frame="above" align="center" width="50%"> <caption>percentage width 50%</caption> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> <table border="1" style="background-color:yellow;" frame="above" align="center" width="500" > <caption>percentage width 500 px</caption> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 46 Altura e Largura de Tabelas com Atributos.
JCFJ e ELFS
2002
57
Conforme apresentado, os valores das propriedades da folha de estilos iro sobrescrever os valores dos atributos. Entretanto, como muitos navegadores ainda no interpretam de maneira correta as propriedades aconselhvel que se utilize conjuntamente atributos e propriedades. A figura 47 apresenta um exemplo de utilizao de propriedades e atributos na definio de larguras de um tabela.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table exampl es: Width</title> <style> caption{ background-color:#aaffaa; } tr{ height:36pt; } td{ height:48pt; width:50%; } </style> </head> <body bgcolor="white"> <table border="3" style="background-color:yellow;" frame="void" align="cen ter" width="90%"> <caption>percentage width 90%</caption> <thead style="background-color:red;"> <tr><th width="40%">width="40%"</th><th width="60%">width="60%"</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1-Col 1</td><td>Row 1 -Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2 -Col 2</td></tr> </tbody> </table> <br /> </body> </html>
Figura 47 Altura e Largura de Tabelas com Atributos e Propriedades.
3.4.4 Alinhamento da Tabela em Relao ao Documento Normalmente tabelas aparecero esquerda em um documento com o texto comeando logo aps a tabela. Atravs da utilizao de atributos e propriedades de folhas de estilo se pode reposicionar uma tabela em um documento. Com o atributo align basta estabelecer como valor left ou right (align=left ou align=right). A figura 48 apresenta um exemplo de utilizao do atributo align para posicionamento de uma tabela ` direita em um documento.
JCFJ
2002
58

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table with headers</title> </head> <body bgcolor="white"> <table border="1" style="background-color:yellow;" align="right"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color: teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1 -Col 1</td><td>Row 1 -Col 2</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2 -Col 2</td></tr> </tbody> </table> <div>"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam" </div> </body> </html>
Figura 48 Posicionamento de Tabelas com o Atributo align.
Quando alm de se colocar a tabela a direita em um documento se deseja tambm que o texto comece logo depois da tabela deve-se utilizar o elemento <br> da seguinte maneira:
<br clear="right" />
Para a utilizao de estilos de folhas de estilo na definio do posicionamento de uma tabela deve-se utilizar a propriedade float. A figura 49 apresentada a seguir mostra um exemplo desta utilizao. Conforme se pode observar nesta figura a propriedade float com valor left sobrescreveu o atributo align definido como right.
JCFJ e ELFS
2002
59

<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A simple table with headers</title> <title>A simple table</title> <style> table{ float:left; } </style> </head> <body bgcolor="white"> <table border="1" style="background-color:yellow;" align="right"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody > <tr><td>Row 1 -Col 1</td><td>Row 1 -Col 2</td></tr> <tr><td>Row 2 -Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> <div>"Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam" </div> </body> </html>
Figura 49 Posicionamento de Tabelas com Folha de Estilo.
3.4.5 Alinhamento Entre Tabelas Normalmente em um documento as tabelas so interpretadas como um bloco de texto e apresentadas umas abaixo das outras. Atravs da utilizao do atributo align ou de estilos se pode alinhar em um mesmo documento uma tabela em relao outra. Para se posicionar, por exemplo, duas tabelas em uma mesma linha, utilizando-se o atributo align, deve-se definir o atributo align de cada tabela como left e right, ou left e left ou ainda right e right. A figura 50 apresenta um exemplo com um documento com duas tabelas em uma mesma linha. Para tanto o atributo align das duas tabelas foi definido como left.
JCFJ
2002
60

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Aligning tables with others tables</title> </head> <body> <table border="1" style="background-color:yellow;" align="left"> <caption="Table 1"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody> <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> <table border="1" style="background-color:yellow;" align="left"> <caption="Table 2"> <thead style="background-color:red;"> <tr><th>header 1</th><th>header 2</th></tr> </thead> <tfoot style="background-color:teal;"> <tr><td>footer 1</td><td>footer 2</td></tr> </tfoot> <tbody> <tr><td>Row 1-Col 1</td><td>Row 1-Col 2</td></tr> <tr><td>Row 2-Col 1</td><td>Row 2-Col 2</td></tr> </tbody> </table> </body> </html>
Figura 50 Posicionamento de uma Tabela em Relao Outra.
O posicionamento de tabelas em uma mesma linha atravs da utilizao de folhas de estilo deve ser feito utilizando-se a propriedade float. A sintaxe que deve ser utilizada a seguinte:
<style> table{ float:right; } </style>
3.4.5.1 Tabelas Aninhadas Desde que o elemento <td> pode conter qualquer outro elemento XHTML, ele pode conter tambm um tabela. Assim, pode-se aninhar em uma clula de uma tabela uma segunda tabela sem nenhum problema. Esta facilidade deve entretanto ser utilizada com cuidado pois tabelas dentro de tabelas exigem um considervel poder computacional para serem apresentadas.
JCFJ e ELFS
2002
61
3.4.6 Alinhamento de Texto em Tabelas O texto presente nas clulas de uma tabela pode ser alinhado horizontal e verticalmente e novamente se pode utilizar atributos e propriedades de folhas de estilo. Para o alinhamento horizontal se deve utilizar o atributo align dentro dos elementos <tr>, <td> ou <th>. Neste caso este atributo pode assumir os seguintes valores: left, right, center e justify. Para o alinhamento vertical, deve-se utilizar os atributo valign que pode assumir os seguintes valores: top, middle, bottom e baseline. A figura 51 abaixo apresenta um exemplo de alinhamento vertical de texto em uma tabela.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table examples</title> </head> <body bgcolor="white"> <table width="100%" border="1"> <tr><th>valign= </th><th>"top"</th><th>"middle"</th><th>"bottom"</th><th>"baseline"</th></tr> <tr> <td width="20%">Lorem ipsum dolor sit amet, consectetaur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td> <td width="20%" valign="top">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td width="20%" valign="middle">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td width="20%" valign="bottom">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td width="20%" valign="baseline">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> </tr> </table> </body> </html>
Figura 51 Alinhamento Vertical do Texto de uma Tabela.
A figura 52 apresenta um exemplo de alinhamento horizontal, com a utilizao simultnea do atributo align e da propriedade justify.
JCFJ
2002
62

<?xml version="1.0" encoding="UTF -8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table examples</title> </head> <body bgcolor="white"> <table width="100%" border="1"> <caption>Demonstrating the align attribute</caption> <tr><th>"left"</th><th>"center"</th><th>"right"</th><th>"justify"</th><th>css justify</th></tr> <tr> <td width="20%" align="left">Lorem ipsum dolor sit amet, consectetaur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td> <td width="20%" align="center">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td w idth="20%" align="right">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td width="20%" align="justify">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> <td width="20%" style="text-align:justify;">Lorem ipsum dolor sit amet, consectetaur adipisicing elit</td> </tr> </table> </body> </html>
Figura 48 Alinhamento Horizontal do Texto de uma Tabela
3.5. Frames (Quadros) Neste texto o nome em ingls Frame ser utilizado em lugar de sua traduo, quadro, pois frame um componente da linguagem XHTML. Frames foram introduzidos inicialmente pelo navegador Netscape em sua verso 2.0, sendo que foram recomendados pelo W3C unicamente em HTML 4. Na linguagem XHMTL a utilizao de frames no encorajada embora exista um DTD especial para eles (Frameset DTD). Atravs da utilizao de frames pode-se fazer com que uma nica pgina seja sub dividida em diversas outras pginas, as quais logicamente podem ser interligadas atravs de ligaes. Frames, como tabelas, podem ser utilizados tambm para se definir a estrutura de uma pgina, com cada frames compondo uma rea definida da pgina. A utilizao de frames polmica, pois pode causar diversos problemas em relao apresentao do documento assim como em relao navegabilidade deste. Alm disso, a visualizao de documentos com frames prejudicada em telas pequenas. Apesar destes senos, uma utilizao bem estudada pode ser bastante prtica na construo de pginas de boa qualidade. O conceito bsico dos frames bastante simples: simplesmente se divide a janela na qual a apresentao feita em diferentes sees, sendo que cada seo referenciada como um frame. O elemento <frameset> utilizado na definio das sees que iro compor o documento. O elemento <frame> utilizado para definir o contedo de cada seo. O exemplo apresentado na figura 53 mostra um exemplo de utilizao de frames.
JCFJ e ELFS
2002
63

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <frameset cols="*,*" rows="*,*"> <frame src="text1.htm" />  <frame src="text2.htm" />  <frame src="text3.htm" />  <frame src="text4.htm" />  </frameset> </html>
Figura 53 Frames em um Documento XHTML.
3.5.1 Conjunto de Frames Dividindo Janelas Uma janela com frames denominada em sua totalidade conjunto de frames (set of frames) ou um frame set . O comportamento do conjunto de frames definido pelos dois elementos XHTML apresentados a seguir. 3.5.1.1 Elemento <frameset> Neste elemento, dois atributos bsicos, cols e rows, definem a apresentao das sees. Alm desses atributos, os atributos padro name, id, class e style podem ser utilizados com o elemento <frameset>. Dois outros atributos de eventos tambm so definidos (mas no abordados) para o elemento: onload e onunload. Os atributos cols e rows
Estes atributos estabelecem o formato geral do frames que iro compor o frameset. Esses atributos tm como valores uma srie de nmeros que define a largura ou altura dos frames. A sintaxe geral a seguinte:
rows=altura da linha 1, altura da linha 2, etc... cols=altura da coluna 1, altura da coluna 2, etc...
As diferentes maneiras nas quais os valores desses atributos podem ser expressos so apresentadas a seguir: Pixels : nmeros inteiros como valores para esses atributos indicam que as dimenses dos frames so definidas em pixels; Relaes: este tipo de medida utilizado quando se deseja estabelecer uma relao entre as dimenses dos frames. Assim, quando se deseja que uma janela seja composta de trs linhas com a segunda tendo trs vezes a dimenso da primeira e terceira, que devem ter a mesma dimenso, se deve escrever:
JCFJ
2002
64
<frameset rows=1*, 3*, 1*>
Porcentagens : esse tipo de medida tambm utilizado quando se deseja estabelecer uma relao entre a dimenso dos frames. Aqui a medida deve ser apresentada como porcentagem da rea total disponvel. Assim quando se deseja que uma janela seja composta de trs linhas com a primeira e terceira ocupando 20% da rea e a segunda ocupando 60% da rea da pgina, se deve escrever:
<frameset rows=20%, 60%, 20%>
Curinga (wildcard): em dois casos se pode utilizar curingas como valores primrios das dimenses de frames. No primeiro apenas um curinga est presente acompanhando um outro valor. Neste caso o curinga faz com que o restante da dimenso no utilizada seja atribudo coluna ou linha restante. Como exemplo se definirmos um frameset da seguinte maneira:
<frameset cols=75, *>
estaremos criando uma coluna de dimenso 75 pixels com a segunda coluna ocupando o restante da pgina. No segundo caso, mais de um curinga utilizado. Neste caso estaremos criando tantas colunas ou linhas quantos forem os curingas, sendo que as dimenses destas colunas e linhas sero iguais. Na figura 54 apresentada a seguir, se define uma pgina com trs colunas e se apresenta a utilizao do elemento <frameset> (em destaque na figura) de diversas maneiras para implementar as dimenses destas colunas. As maneiras utilizadas no dimensionamento das colunas so enumeradas abaixo sendo que o resultado da utilizao destas definies enumeradas pode ser visto nas cpias de tela presentes na figura 54. a) Duas colunas fixas com a terceira ocupando o restante da pgina (este caso est presente no texto em destaque na figura 54):
<frameset cols=90,160, *>
b) Trs colunas fixas:

<frameset cols=75,150,75>
c) Colunas proporcionais umas s outras:

<frameset cols=1*,2*,3*>
d) Colunas proporcionais em relao janela:

<frameset cols=30%, 55%, 15%>
JCFJ
2002
65

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic f rames</title> </head> <frameset cols=90,160,* > > <frameset cols="75,150,*" <frame src="text1.htm" id="index_frame" name="index_frame" style="background -color:red" /> <frame src="text2.htm" id="main_view" name="main_view" /> <frame src="text3.htm" id="main_view2" name ="main_view2" /> </frameset> </html>
(a)
(b)
(c)
(d)
Figura 54 Dimensionamento de Frames.
3.5.1.2 Elemento <frame> Para cada seo declarada pelos atributos cols e rows deve existir a declarao de um elemento <frame>. Conforme dito anteriormente o elemento <frame> serve para se definir uma seo (ou clula). Normalmente se um frame omitido o agente de apresentao deixar um espao em branco na tela. A seguir so apresentados os atributos que podem ser utilizados com frames. src: este atributo fornece a URL do documento que contm o contedo do frame; id: se um frame nomeado, o nome atribudo deve ser nico. O atributo id importante na medida em que permite que uma pgina seja carregada no frame nomeado atravs de um elemento ncora de outro frame. Para t anto, o elemento ncora utiliza seu atributo target da seguinte maneira:
target=nome do frame destino
Conforme se pode observar, este mtodo s pode ser utilizado se o frame tiver sido nomeado. Para manter a compatibilidade com navegadores antigos se deve tambm incluir, juntamente com o atributo id, o atributo name. scrolling: este atributo pode assumir os valores yes ou no, sendo que o valor padro yes. Seu objetivo incluir barras de rolagem para que quando a pgina a ser apresentada no frame no couber no espao a ela destinado, barras deslizantes sejam includas permitindo sua visualizao.
JCFJ
2002
66
frameborder: este atributo define a espessura em pixels da borda que um frame deve ter em relao aos outros frames de uma pgina. O valor padro 1. noresize: este atributo pode ser utilizado quando no se deseja que o usurio que visualiza uma pgina seja capaz de redimensionar a pgina. Neste caso se deve definir noresize=noresize. marginheight e margintwidth: estes atributos definem respectivamente a quantidade de espao, em pixels, que deve ser deixada entre as partes superior e inferior e as partes esquerda e direita de um frame em relao a seu contedo. Os valores padro desses atributos dependem dos navegadores e assim melhor se utilizar as propriedades de margens das folhas de estilo e no esse atributo. longdesc: este atributo (como para o elemento image) define a URL de um documento que contm uma descrio textual do frame. Novamente, como para o elemento image, este atributo dificilmente suportado pelos navegadores.
3.5.1.3 Frames Aninhados Um frame, ou seo de uma pgina, pode conter outros frames. Quando um frame dividido para conter outros frames dito que se est aninhando frames. Para tanto basta incluir um novo elemento <frameset> (e conseqentemente seus elementos <frame>) no interior de um elemento <frame>. O processo de criao de frames aninhados deve ser feito com extrema cautela para que no se crie pginas extremamente confusas e de difcil manuteno e ainda porque a pgina pode ter sua velocidade de carregamento extremamente reduzida. Entretanto, quando se deseja criar uma distribuio assimtrica de frames em uma pgina a soluo a utilizao de frames aninhados. A criao de frames aninhados pode ser feita de duas maneiras: ou efetivamente aninhando frames ou importando em um frame um documento que j contenha frames. A figura 55 apresenta um exemplo de definio de frames aninhados e a figura 56 um exemplo de importao de uma pgina que j contm frames, neste caso a pgina apresentada no exemplo 53. Quando em um frame se importa uma pgina que a contm ela mesma frames, deve-se ser extremamente cuidadoso para que no se importe a prpria pgina, o que causaria um processo recursivo que faria com que o navegador levasse o computador no qual est sendo executado a travar.
JCFJ
2002
67

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <frameset rows="15%,70%,15%" > <frame src="text1.htm" name="index_frame" />  <frameset cols="25%,50%,25%" > <frame src="text1.htm" id="index_frame" name="index_frame" /> <! -- The second frame --> <frame src="text2.htm" id="main_view" name="main_view" /> <! -- is now a frameset --> <frame src="text3.htm" id="main_view2" name="main_view2" /> <! -- element plus frames --> </frameset> <frame src="text3.htm" name="main_view2" / > <! This is the third frame > </frameset> </html>
Figura 55 Frames Aninhas por Definio.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <frameset cols="*,*" rows="*,*"> <frame src="basic.htm" /> <frame src="text2.htm" /> <frame src="text3.htm" /> <frame src="text4.htm" /> </frameset> </html>
Figura 56 Frames Aninhadas por Incluso.
JCFJ
2002
68
3.5.1.4 Apontando para Frames Normalmente o fato de se clicar sobre uma ligao hipertexto em uma pgina faz com que uma nova pgina seja carregada na janela contendo a ligao. Atravs do atributo target se pode fazer com que esta nova pgina seja carregada em um frame diferente ou em uma outra pgina. Esse atributo funcionar unicamente se o frame ou a pgina que deve ser carregada tiverem sido nomeados. O atributo target pode ser utilizado com os seguintes elementos: <a>, <rea>, <base>, <form> e <link>. Todos esses elementos podem apontar para um frame nomeado ou uma pgina e para tanto se deve utilizar a seguinte sintaxe:
target=[frame nomeada ou janela]
O atributo target pode tambm utilizar algumas palavras chave para apontar para frames individuais em um conjunto de frames. Essas palavras so: _self: se esta palavra chave utilizada ento a nova pgina carregada no prprio frame que contm a ligao. Este o comportamento padro na maioria dos agentes de visualizao. _blank: se esta palavra chave utilizada, uma nova janela criada e a nova pgina carregada nesta janela. _parent: esta palavra chave faz com que a nova pgina seja carregada no frame pai. Para uma pgina com frames, o frame pai simplesmente a janela do navegador. Para uma pgina com frames aninhados (como a do exemplo 56), o frame pai aquele que aninha os outros frames. _top: o uso desta palavra chave faz com que a nova pgina seja carregada na janela do navegador no lugar da pgina contendo os frames, ou seja, faz com que a pgina com frames desaparea. Quando em um frame se faz uma ligao para um URL externo importante que se utilize esta palavra chave para que a nova pgina no seja carregada no interior de um frame.
A figura 57 a seguir apresenta uma srie de documentos XHTML que so utilizados em uma pgina com frames para ilustrar a utilizao do atributo target. Nesta figura se pode observar o documento target1.htm que o documento que define a estrutura dos frames da pgina. O documento target_index.htm, que carregado no frame esquerda na segunda linha, utilizado para apontar para novos frames ou novas pginas. Deve-se observar as palavras chaves utilizadas com o atributo target para um perfeito entendimento de seu funcionamento. A figura 57 apresenta ainda os documentos areyou.htm e goingto.htm que so as ligaes destino nos frames. Para que o exemplo funcione perfeitamente se deve criar alm dos documentos presentes na figura 57 os documentos sfair.htm, parsley.htm, sage.htm, rosemary.htm, thyme.htm e sandg.htm. Em cada um destes documentos o pargrafo dentro do elemento body (cf. documentos areyou.htm e goingto.htm) deve conter respectivamente, Scarborough Fair, Parsley, Sage, Rosemary, and Thyme e Simon and Garfunkel.
JCFJ
2002
69
target1.htm
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <frameset rows="15%,70%,15%" > <frame src="text1.htm" name="heading_frame" /> <frameset cols="40%,30%,30%" > <frame src="target_index.htm" id="index_frame" name="index_frame" /> <frame src="text2.htm" id="main_view" name="main_view" /> <frame src="text3.htm" id="main_view2" name="main_view2" /> </frameset> <frame src="text3.htm" id="footer_frame" name="footer_frame" /> </frameset> </html> target_index.htm <?xml version="1.0" e ncoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames. Target_Index.htm< /title> </head> <body> <div><a href="areyou.htm" target="heading_frame">Are you (header frame)</a></div> <div><a href="goingto.htm" target="main_view">Going to (mid frame)</a></div> <div><a href="sfair.htm" target="_blank">Scarborough Fair? (new window)</a></div> <div><a href="parsley.htm" target="footer_frame">Parsley (footer frame)</a></div> <div><a href="sage.htm" target="_parent">Sage (parent window)</a></div> <div><a href="rosemary.htm" target="_top">Rosemary (top window)</a></div> <div><a href="thyme.htm" target="_self">and Thyme. (this window)</a></div> <div><a href="sandg.htm" target="main_view2">Simon and Garfunkel. (side frame)</a></div> </body> </html>
areyou.htm
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Scarborough Fair</title> goingto.htm <head> <body> <?xml version="1.0" encoding="UTF -8"?> <p>Are you</p> <!DOCTYPE html </body> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" </html> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Scarborough Fair</title> <head> <body> <p>Going to</p> </body> </html>
Figura 57 Documentos XHTML para Definio de Frames.
A cpia de tela superior da figura 58 apresenta o resultado obtido quando se carrega o documento target1.htm no navegador. J a cpia de tela inferior apresenta a pgina aps diversas ligaes terem sido selecionadas no frame que contm o documento em target_index.htm.
JCFJ
2002
70
Figura 58 Exemplo de Apontamento de Frames.
3.5.1.5 Frames em Linha Alm da presena em pginas, frames podem ser includos em uma pgina XHTML simples. Para tanto basta utilizar o elemento <iframe>. A figura 59 mostra um exemplo de utilizao desse elemento. Conforme se pode observar nesta figura pode-se incluir um texto alternativo entre os elementos <iframe> e </iframe> que ser apresentado no caso do navegador no suportar o elemento <iframe>.
JCFJ
2002
71

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <body> <p>Here is some regular text in a paragraph.</p> <iframe src="text1.htm"> You will see this text if your browser does not support iframe </iframe> </body> </html>
Figura 59 Incluso de Frame em um Documento.
3.5.1.6 Frames e Folhas de Estilo (CSS) Folhas de estilo podem ser aplicadas a todas as pginas que contm frames. Entretanto, um ponto que deve ficar claro que o fato de se aplicar um estilo a uma pgina que contm frames no faz com que os elementos do frame contido na pgina sofram os efeitos dos estilos aplicados, ou seja, no existe uma herana de estilos. 3.5.1.7 Elemento <noframe> Alguns agentes Web como leitores com voz ou dispositivos com telas pequenas podem no ser capazes de interpretar frames. Para estes agentes se deve incluir em documentos XHTML o elemento <noframe> que apresenta um contedo alternativo aos frames para esses agentes. Assim, mesmo que o agente no seja capaz de interpretar frames, o usurio ter um contedo apresentado. O exemplo da figura 60 apresenta um documento com o elemento <noframe>.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic frames</title> </head> <frameset cols="*,*" rows="*,*"> <frame src="text1.htm" />  <frame src="text2.htm" />  <frame src="text3.htm" />  <frame src="text4.htm" />  <noframes> <h3>Announcement</h3> <p>This browser does not support fra frames</p> mes</p> </noframes> </frameset> </html>
Figura 60 Utilizao do Elemento <noframe> em um Documento
JCFJ
2002
72
JCFJ
2002
74
Captulo 4 - Formulrios
Formulrios introduzem em pginas XHTML a possibilidade de interao com o usurio. Atravs de formulrios usurios podem entrar dados que, depois de processados, podem lhe fornecer informaes relativas aos dados introduzidos. Quando os formulrios foram inventados, os dados neles introduzidos s podiam ser processados em um servidor Web. Assim, a pgina com o formulrio deveria colher os dados fornecidos pelo usurio para envi-los ao servidor, onde esses seriam processados. Embora esta situao possa ser incomoda, pois o servidor deve estar preparado para executar o tratamento do formulrio, ela tambm pode ser extremamente vantajosa, pois podem ser acessados diversos servios do servidor como bancos de dados, validao de senhas, etc. Atualmente os formulrios podem ser tratados no lado do cliente com programas escritos em alguma linguagem de script como javascript ou vbscript . Neste captulo os formulrios sero estudados sendo abordadas a criao de formulrios e utilizao de elementos de entrada (campos texto, botes e caixas de escolha). Um formulrio simplesmente um local em uma pgina Web no qual se pode preencher informao. Quando a informao tiver sido preenchida deve-se trat-la. Para tanto se deve submet-la a um servidor ou fazer com que ela seja interceptada por uma linguagem de script . Aps o tratamento, aes podem ser tomadas em funo das informaes fornecidas na pgina com o resultado do tratamento, sendo enviado como resposta ao navegador. 4.1. Interao Cliente/Servidor e Formulrios Conforme apresentado no captulo 1, a visualizao de uma pgina Web envolve dois computadores, o cliente (o computador que executa o navegador) e o servidor (o computador que transmite as pginas solicitadas pelo cliente). Quando se est visualizando pginas Web sem formulrios a informao principal enviada pelo cliente ao servidor a URL do elemento que deve ser apresentado (pgina, imagem, etc.). Quando um formulrio submetido, o contedo do formulrio tambm enviado ao servidor, ou seja, para o tratamento do formulrio se est trabalhando com programao no lado do servidor (server side programming). O primeiro padro para programao no lado do servidor foi CGI (Common Gateway Interface). Programas CGI funcionam em servidores Web baseados em Unix como Apache. Embora os programas CGI possam ser escritos em qualquer linguagem que funcione em Unix, a mais popularmente utilizada com CGI Perl. Atualmente Active Server Pages ASP, PHP e Java Server Pages (JSP) permitem que cdigo a ser executado em um servidor seja introduzido no corpo de pginas Web de maneira similar a scripts javascript ou vbscript . ASP suportada pelo servidor Microsoft Internet Information Server IIS enquanto PHP e JSP so suportados pelos servidores Apache e IIS8 .
Informaes adicionais podem ser obtidas em C GI: http://hoohoo.ncsa.uiuc.edu, http://perl.apache.org - PHP : http://www.php.net ASP: http://msdn.microsoft.com/workshop/server/asp/ASPOver.asp JSP: http://www.javasoft.com/products/jsp/index.html, http://www.honeylocust.com/weeds/
JCFJ
2002
75
4.2. Submisso de Formulrios Aps se ter preenchido um formulrio normalmente o mesmo submetido pressionando-se um boto denominado Submit. O processo de envio dos dados do formulrio denominado submisso do formulrio. A seguir so apresentadas duas linhas de um formulrio em uma pgina (este exemplo ser apresentado mais a frente) para introduzir o processo de submisso de formulrios:
<input type=text name=clientname id=clientname /> <input type=submit />
A primeira linha ir criar uma caixa vazia onde se deve introduzir dados. Esta caixa foi chamada clientname, mas qualquer nome pode ser dado a um caixa em um formulrio. A informao que introduzida nesta caixa torna-se o valor da caixa. Cada caixa em um formulrio tem ento um par nome-valor. A segunda linha cria um boto com a palavra Submit escrita nele. Quando este boto pressionado a informao do formulrio enviada ao servidor. Formulrios reais so compostos de diversas caixas, as quais compem o contedo do formulrio. Este contedo enviado ao servidor como uma cadeia de caracteres codificada que contm todas as informaes introduzidas nos elementos do formulrio. Valores so retornados para cada elemento do formulrio com um nome e com um valor no nulo. Cada par nome-valor que enviado tem o seguinte formato:
encodedname=encodedvalue
Se mais de um par nome-valor for transmitido, eles sero separados por um & (e comercial):
encodedname1=encodedvalue1&encodedname2=encodedvalue2&
Espaos so codificados como (+) e caracteres alfanumricos como os prprios. Entre os outros caracteres os sinais at (@), underscore ( _ ), ponto (.) e asterisco (*) so enviados como eles prprios. Os outros caracteres so enviados como seu valor hexadecimal ASC precedido do sinal % (Ex.: ! = %21). Existem duas maneiras atravs das quais se pode enviar dados codificados a um servidor: O Mtodo GET: quando um formulrio submetido a um servidor com o mtodo GET os dados codificados do formulrio so adicionados ao final da URL e enviados ao servidor. O Mtodo POST: quando um formulrio submetido a um servidor com o mtodo POST os dados codificados do formulrio so enviados ao servidor juntamente com os outros cabealhos HTTP da pgina.
A utilizao do mtodo POST prefervel em relao ao mtodo GET por uma srie de razes. O mtodo POST pode tratar com quantidade ilimitada de informao, enquanto o mtodo GET limitado pelo tamanho mximo permitido para a URL. O mtodo GET menos seguro, pois como os dados so enviados juntamente com a URL qualquer um pode ver esses dados, seja na barra de endereo do navegador, seja no arquivo de LOG de um servidor. Entretanto, o mtodo GET tem uma vantagem sobre o mtodo POST: como os dados fazem parte da URL, um formulrio pode ser reenviado a partir de valores armazenados no cache dos navegadores. 4.3. Elemento <form> Os marcadores <form> e </form> devem ser utilizados em uma pgina para a definio, de um formulrio dentro do elemento <body>. O elemento <form> pode ter os seguintes atributos:
JCFJ
2002
76
action: este atributo permite definir a URL que ir receber os dados quando o formulrio for submetido. Sua sintaxe a seguinte:
<form action=URL Destino>
Normalmente a URL Destino ser o endereo de uma pgina ou de um script que ir tratar as informaes do formulrio antes de e nvi-las ao servidor. Nos exemplos deste captulo a seguinte pgina ser utilizada para tratar as informaes:
http://www.wrox.com/Consumer/Errata/3439/post-echo.asp
A URL destino no tem obrigatoriamente que utilizar o protocolo HTTP. Pode-se, por exemplo, utilizar o mtodo mailto como apresentado abaixo.
<form action=mailto:email@dominio.br>
method: este atributo define o mtodo que ser utilizado para o envio do formulrio, ou seja, ele pode assumir os valores GET ou POST. name: nomes so definidos para formulrios para que os mesmos possam ser referenciados em outras partes de um documento, como por exemplo em scripts. target: este atributo pode ser utilizado para se informar ao servidor em qual frame os dados devem ser processados. enctype: este atributo pode ser utilizado para informar o mecanismo que ser utilizado para codificar os dados que sero enviados. Assim qualquer tipo MIME pode ser enviado bastando para tanto informar o tipo de dado. Se por exemplo se pretende enviar o formulrio como um e -mail (conforme apresentado no atributo action) pode-se definir o atributo enctype como text/plain para evitar que o contedo seja enviado codificado conforme apresentado na seo 4.2.
Conforme informado, a pgina http://www.wrox.com/Consumer/Errata/3439/postecho.asp ser utilizada no tratamento de dados dos formulrios. Na verdade esta pgina unicamente ir apresentar os dados que tiverem sido enviados ao servidor. A figura 61 apresenta um exemplo de formulrio bastante simples com apenas uma caixa onde se pode fornecer informao e um boto para o envio do formulrio, bem como o resultado da submisso do formulrio.
JCFJ
2002
77
<?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>Basic XHTML Form</title> </head> <body> <h4>Please enter your name.</h4> <form action="http://www.wrox.com/Consumer/Errata/3439/post-echo.asp" method="post"> <input type="text" name="clientname" id="clientname" /> <input type="submit" /> </form> </body> </html>
Figura 61 Um Formulrio Simples.
Um detalhe importante que deve ser observado que embora uma pgina possa conter diversos formulrios definidos por marcadores <form> </form>, o boto Submit ir enviar unicamente os dados do formulrio no qual ele est definido. 4.4. Controles em Formulrios Informaes podem ser fornecidas em formulrios de diversas maneiras atravs de elementos <input>. Esses elementos denominados controles dos formulrios podem utilizar os atributos que so apresentados a seguir. name: o nico elemento de um formulrio que no requer um nome o boto Submit, e mesmo assim no existe problema nenhum em fornec-lo. Conforme apresentado anteriormente, os dados de um formulrio so enviados como um par nome-valor. Portanto todos os elementos do formulrio devem ser nomeados para o perfeito tratamento desse. value: o valor de um elemento o que passado ao servidor quando o boto Submit do formulrio pressionado. Especificar o valor como um atributo possibilita que se defina o valor padro para o elemento que apresentado quando a pgina com o formulrio construda. disabled: o fato de se definir para qualquer elemento e um formulrio o atributo disabled=disabled, faz com que o elemento seja apresentado embora no tenha efeito nenhum na pgina.
4.5. Elemento <input> Originalmente o nico componente dos formulrios era o elemento <input> com o tipo do controle sendo definido pelo atributo type. Atualmente existem outros elementos que podem ser utilizados em formulrios. O elemento <input> pode assumir os seguintes tipos:
JCFJ
2002
78
text password file submit reset
button image checkbox radio hidden
4.5.1 Controle <input> do Tipo Texto O elemento <input> como controle do tipo texto definido atravs do atributo type, pode assumir os seguintes tipos: text: um elemento <input> deste tipo introduz no formulrio uma caixa onde se pode digitar um texto. password: um elemento <input> deste tipo introduz no formulrio uma caixa onde se pode digitar uma senha a qual apresentada no formulrio como asteriscos. file: um elemento <input> deste tipo introduz no formulrio uma caixa onde se pode digitar o nome de um arquivo e um boto Browse com cdigo embutido que pode ser utilizado para localizar um arquivo no disco. width: este atributo define quantos caracteres podem ser introduzidos na caixa de texto sendo que a medida da caixa traduzida para en". Sua sintaxe a seguinte: width=n. maxlenght: este atributo tambm pode ser utilizado para definir a largura mxima da caixa de texto. Sua sintaxe a seguinte: maxlenght=n. readonly: este atributo define se caixa de texto s pode ser lida, ou seja, se seu contedo pode ser modificado ou no. Para que no se possa alterar o valor da caixa de texto a sintaxe a ser utilizada a seguinte: readonly=readonly.
Controles do tipo texto podem ter os seguintes atributos para melhor lhes caracterizar:
O exemplo da figura 62 apresenta um exemplo com controles do tipo texto.
JCFJ
2002
79
<?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>Basic XHTML Form Text controls</title> </head> <body> <h4>Examples of text controls</h4> <form action="http://www.wrox.com/Consumer/Errata/3439/post -echo.asp " method="post" > <div>Type your userId</div> <input type="text" value="[userId]" name="userId" id="userId" /><br /> <div>Type your pasword</div> <input type="password" name="password" id="password" /><br /> <div>Select a file</div> <input type="file" name="file" id="file" /><br /> <input type="submit" /> </form> </body> </html>
Figura 62 Formulrio com Controles do Tipo Texto.
4.5.2 Controle <input> do Tipo Boto O elemento <input> como controle do tipo boto, definido atravs do atributo type, pode assumir os seguintes tipos: submit: um elemento <input> deste tipo cria um boto que quando clicado transmite todos os pares nome-valor de um formulrio para o servidor. Se um valor for definido, atravs do atributo value para este elemento, este valor ir aparecer como ttulo do boto. reset: um elemento <input> deste tipo faz com que todos os elementos de um formulrio assumam seus valores padro, seja um valor em brando seja o valor inicialmente definido. button: um elemento <input> deste tipo produz u m boto de comando no formulrio, sendo que o ttulo do boto deve ser definido atravs do atributo value. Um elemento deste tipo no envia nada ao servidor. Para que ele seja til ele deve ser utilizado juntamente com scripts. image: um elemento <input> deste tipo produz um mapeamento de imagem. Um controle image deve ter os atributos src e alt. Quando se clica sobre este boto todos os pares nome-valor do formulrio so transmitidos ao servidor juntamente com a coordenada clicada da imagem.
JCFJ
2002
80
4.5.3 Controle <input> do Tipo Button O elemento <button> produz um boto com uma imagem em seu interior. Diferentemente do elemento do tipo image, a imagem do boto no clicvel. Um elemento deste tipo no envia nada ao servidor. Para que ele seja til ele deve ser utilizado juntamente com scripts. A sintaxe deste elemento a seguinte:
<button> <img src =imagem.gif alt=uma imagem /> </button>
4.5.4 Controle <input> do Tipo Boto de Rdio (Radio Button) Elementos desse tipo so elementos que podem assumir unicamente os valores verdadeiro (selecionado checked) ou falso (no selecionado unchecked). Quando estes elementos so selecionados o par nome-valor transmitido ao servidor e quando o elemento no selecionado o par no transmitido. O elemento <input> como controle do tipo boto de rdio (radio butto) pode, atravs do atributo type, assumir os seguintes tipos: checkbox: um elemento <input> desse tipo produz uma simples caixa de seleo. Em um formulrio diversos elementos checkbox podem ter o mesmo nome e nesse caso se diversos checkbox forem selecionados todos as opes selecionadas sero envidas ao servidor. radio: so elementos similares aos checkbox com uma apresentao diferenciada. Diferentemente dos checkbox, entretanto, se diversos radio tiverem o mesmo nome, um nico radio entre aqueles que tm o mesmo nome pode ser selecionado de cada vez para ter ser par nome-valor enviado ao servidor.
As condies iniciais dos checkbox podem ser estabelecidas atravs do atributo checked. Quando se deseja que o checkbox aparea inicialmente selecionado na pgina deve-se defini-lo da seguinte maneira: checked=checked. Outro fator importante de elementos deste tipo que scripts podem acessar o estado dos botes atravs de sua propriedade checked. Ambos, propriedade e atributo, s podem assumir os valores true ou false. O exemplo da figura 63 apresenta um exemplo com controles do tipo boto e boto de rdio e tambm uma imagem clicvel. Conforme se pode observar nesta figura a posio da imagem em que ocorreu o clique do mouse (x=112 e y=70) foi enviada ao servidor juntamente com os outros pares nome-valor.
JCFJ
2002
81
<?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>Basic XHTML button and checkbox controls</title> </head> <body> <h4>Examples of button and checkbox controls</h4> <form action="http://www.wrox.com/Consumer/Errata/3439/post-echo.asp" method="post" name="fm1" > <div>Type your Name</div> <input type="text" value="[name]" name="userId" /><br /> <div>Radio Buttons</div> <input type="radio" name="radio" id="radio" value="1" /> Choice1<br /> <input type="radio" name="radio" id="radio" value="2" /> Choice2<br /> <input type="radio" name="radio" id="radio" value="3" /> Choice3<br /> <div>Checkboxes</div> <input type="checkbox" name="cbx1" id="cbx1" value="1" /> Choice1<br /> <input type="checkbox" name="cbx2" id="cbx2" value="2"/> Choice2<br /> <input type="checkbox" name="cbx3" id="cbx3" value="3"/> Choice3<br /> <input type="image" src="face.gif" /> <input type="button" value="Click me" onclick="alert('Hello')" /> <input type="submit" value="Send to Wrox" /> <input type="reset" value="Reset form" /> </form> </body> </html>
Figura 63 Formulrio com Controles do Tipo Boto e Radio Button.
4.5.5 Controle <input> do Tipo Hidden Elementos <input> deste tipo tm um papel importante em pginas com formulrios. Os usurios no podem v-los ou edit-los, mas eles podem ser utilizados para o armazenamento de
JCFJ
2002
82
informaes em um formulrio. Se por exemplo um formulrio composto de diversas pginas, a cada vez que o usurio preenche uma pgina as informaes podem ser armazenadas em elementos do tipo <hidden> para s ao final do preenchimento serem enviadas ao servidor. 4.5.6 Desabilitao de Elementos <input> Qualquer elemento <input> pode ser desabilitado utilizando-se o atributo disable. Quando um elemento for desabilitado seu ttulo aparecer em cinza na pgina e ele no poder ser utilizado. Para se desabilitar um boto por exemplo deve-se utilizar a seguinte sintaxe:
<input type=button disable=true />
4.6. Elemento <textarea> Este elemento produz uma grande caixa em um formulrio (uma rea de texto) onde o usurio pode entrar um texto que seja maior que uma linha. Todo o texto que for digitado nesta caixa ser enviado ao servidor. O tamanho da caixa definido com os atributos cols e rows. A figura 64 apresenta um exemplo de utilizao deste elemento.A sintaxe que deve ser utilizada com esse elemento a seguinte:
<textarea cols=n rows=m name=nome texto id=nome texto>
4.7. Elementos <select> e <option> O elemento <select> cria em um formulrio uma lista na qual valores podem ser escolhidos. Ele diferente dos elementos <input> do tipo radio e checkbox porque listas longas podem ser utilizadas. A sintaxe do elemento <select> :
<select> <option>primeira opo</option> <option>segunda opo</option> <option>terceira opo</option> ... etc. </select>
Conforme se pode observar acima, o elemento <option> um filho do elemento <select>. Cada <option> contm uma escolha. Ao elemento <select> pode ser atribudo um atributo size que ir definir quantas das escolhas (elementos <option>) iro ser apresentados na pgina. O exemplo da figura 64 ilustra a utilizao dos elementos <textarea>, <select> e <option>. Conforme se pode observar nessa figura, como para o primeiro e segundo elementos <select> o atributo size foi definido respectivamente como um e trs e como a lista composta de quatro elementos, automaticamente o navegador introduziu as barras de rolagem.
JCFJ
2002
83
<?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>list controls</title> </head> <body> <h4>Examples of list controls</h4> <form action="http://www.wrox.com/Consumer/Errata/3439/post-echo.asp" method="post" > <select size="1" name="dropdown"> <option>Red</option> <option>White</option> <option>Blue</option> <option>Black</option> </select> <select size="3" name="listbox"> <option value="ff0000">Red</option> <option value="ffffff">White</option> <option value="0000ff">Blue</option> <option value="000000">Black</option> </select> <select multiple="true" name="multiple"> <option>Red</option> <option>White</option> <option>Blue</option> <option>Black</option> </select> <div>Type a message</div> <textarea cols="30" rows="8" name="ta1"></textarea><br /> <input type="submit" /> </form> </body> </html>
Figura 64 Formulrio com Elementos <textarea>, <select> e <option>.
JCFJ
2002
84
JCFJ
2002
85
Captulo 5 - Folhas de Estilo em Cascata
Folhas de Estilo ou simplesmente estilos, so utilizadas em documentos XHTML para que se possa atribuir diversas propriedades ao mesmo tempo a todos os elementos em uma pgina que utilizem um marcador especfico detalhado na folha de estilos. Pode-se, por exemplo, fazer com que todos os ttulos de nvel 1 em uma pgina (<h1>) sejam apresentados utilizando a fonte Arial com tamanho 18 e em cor azul. Estilos so utilizados em diversos sistemas de processamento de texto como Microsoft Word ou LaTeX. A linguagem mais comumente utilizada para se escrever estilos para pginas XHTML denominada Linguagem de Folhas de Estilo em Cascata CSS (Cascadign Style Sheets)9 . Esta linguagem foi desenvolvida por Bert Bos e Hkon Lie no W3C com contribuies de Chris Lilley, Dave Ragget e outros. As CSS passaram por um longo processo de desenvolvimento. A primeira especificao CSS1 foi apresentada em 1996 e tratava basicamente com caractersticas simples de estilo como cores, fontes, imagens de fundo, etc. Em 1998 a verso CSS2 foi introduzida com caractersticas suplementares, entre elas a possibilidade de se definir o layout de pginas Web para impresso, a possibilidade de se trabalhar com fontes que podem ser abaixadas (donwloaded) e tambm a possibilidade de definio de reas retangulares em documentos para a apresentao de diferentes partes de um documento sem a necessidade de se utilizar tabelas. A especificao CSS3 est em desenvolvimento atualmente e dever abordar entre outras, propriedades para valores e unidades, colunas, numeraes e listas, fundos de pginas, textos e fontes. Pretende-se que esta especificao fornea as funcionalidades de um ambiente de editorao de documentos, bem como caractersticas que permitam que ela possa ser utilizada no contexto de um Web internacional e multimdia. O anexo A fornece uma lista de propriedades (com os valores que elas podem assumir) que pode ser utilizadas na definio da apresentao de um documento. As vantagens e desvantagens de se utilizar folhas de estilo so apresentadas a seguir. Como vantagens tem-se: Pode-se alterar completamente a aparncia de um documento com pouco esforo: estilos permitem que se separe a parte funcional de um documento de seus aspectos de apresentao, definidos nas folhas de estilos. Ou seja, todas as caractersticas de apresentao dos elementos de um documento, sua cor, a fonte que ser utilizada, etc. so definidas na folha de estilo e assim, qualquer modificao que for feita na folha de estilos se refletir na apresentao do documento, sem a necessidade de alterao do corpo do documento. Uma mesma folha de estilos pode ser aplicada a diversos documentos: uma mesma folha de estilos pode ser aplicada a diferentes documentos, fazendo com que um grupo de documentos tenha a mesma aparncia. Os marcadores no documento tornam-se menos poludos e as pginas mais facilmente mantidas: como as caractersticas de apresentao do documento so definidas na pgina de estilos os marcadores utilizados no documento iro conter menos atributos e propriedades, fazendo com que o documento tenha sua compreenso e manuteno facilitadas.
Outra linguagem em desenvolvimento para ser aplicada a documentos XML a linguagem XSL eXtensible S tylesheet Language (http://www.w3.org/tr/xslt).
JCFJ
2002
86
Estilos permitem um controle mais fino da apresentao: atravs das propriedades das folhas de estilo se pode controlar a apresentao de um documento de maneira mais precisa que com marcadores e atributos. Alm disso, algumas propriedades de folhas de estilo no tm equivalentes em marcadores da linguagem XHTML. Melhor adequao de documentos a diferentes agentes: como a apresentao do documento definida separadamente, pode-se criar estilos diferentes para um mesmo documento que ser apresentado por exemplo em um navegador clssico (Netscape ou IE) onde cores, fontes e tamanhos devem ser priorizados ou em um sintetizador de voz onde , por exemplo, a tonalidade e o volume devem ser enfatizados. Herana de Folhas de Estilo: as propriedades das folhas de estilo podem ser herdadas de um elemento para outro. Se por exemplo em um pargrafo com propriedades definidas em uma folha de estilo para ser apresentado em azul com fonte Arial de tamanho 14 for includo um atributo ou outra propriedade, para que o texto seja apresentado em negrito por exemplo, este texto em negrito ser apresentado tambm em azul com fonte Arial de tamanho 14. Uma observao importante que deve ser feita que os navegadores Netscape 4.X no implementam a totalidade do conceito de herana de estilos.
A principal desvantagem na utilizao de folhas de estilo dada pelo fato de que atualmente a maioria dos navegadores no interpreta corretamente a totalidade das propriedades presentes nas folhas de estilo. O navegador que atualmente melhor interpreta folhas de estilo o navegador Opera (www.opera.com) que tem como um dos principais envolvidos Hkon Lie que um dos principais envolvidos no desenvolvimento das folhas de estilo no W3C. Outra possibilidade oferecida pelo navegador Web XML ChairFarer criado pela empresa HP (http://www.internetsolutions. enterprise.hp.com/chai/products/platform/chai_farer.html). Para que se verifique as propriedades das folhas de estilo suportadas pelos navegadores pode-se consultar http://webreview.com/pub/guides/style/style.html. 5.1. Criao e Definio de Folhas de Estilo A sintaxe utilizada na criao de estilos bem direta, comeando pelo elemento para o qual o estilo se aplica seguido da lista de propriedades que sero aplicadas ao elemento com os valores que estas propriedades devem adotar. Na figura 65 apresentada a seguir, o e lemento <p> definido para que sua apresentao utilize uma fonte verde de tamanho 12 e em itlico.
Ponto e vrgula separando as propriedades
Elemento ao qual o estilo se aplica
p {font-size: 12; font-style: italic; color: green}
Propriedade
Valor da Propriedade
Figura 65 Definio de Estilos.
Conforme se pode observar na figura 65, a lista de propriedades est contida entre parnteses, sendo que as propriedades so separadas entre elas por ponto e vrgula. Pode-se observar tambm que cada definio de propriedade composta de um par nome da propriedade-valor separado por dois pontos. As propriedades que podem ser utilizadas so aquelas presentes na DTD definida no documento. Um detalhe que deve ser observado que em folhas de estilo no existe diferena entre maisculas e minsculas, ou seja, as CSS so case-insentives.
JCFJ
2002
87
Estilos podem ser definidos de trs maneiras distintas: localmente, internamente e externamente, sendo que se pode utilizar qualquer uma delas, ou mesmo as trs, em um mesmo documento. Estilos aplicados localmente cancelaro qualquer estilo interno, enquanto estilos internos cancelaram qualquer estilo externo aplicado a uma pgina. Na verdade esta aplicao de estilos sobre estilos que originou o nome Estilos em Cascata. Por definio local de estilos deve-se entender que as propriedades so definidas dentro de elementos em uma pgina como, por exemplo, em <div style=color: green;>. Definio interna relaciona-se definio dos estilos dentro do prprio documento XHTML e externa definio dos estilos em um documento externo quele que define a pgina. Nas prximas sees apresenta-se a maneira atravs da qual se pode criar e utilizar estilos. 5.1.1 Definio Local de Estilos Esta definio de estilos utilizada quando se deseja trabalhar com pequenas partes de um documento, o que pode no justificar o esforo que deve ser despendido na criao de uma pgina de estilo completa. Neste caso, o atributo style, que no deve ser confundido com o elemento <style> utilizado dentro de elemento <head> conforme se ver a seguir, deve ser utilizado para que se possa, em documentos XHTML, utilizar propriedades de folhas de estilo. A figura 66 apresenta um exemplo de utilizao local de estilos. Pode-se observar nesse exemplo a utilizao do atributo style internamente ao elemento <p> para fazer com que no primeiro pargrafo a fonte utilizada fosse maior que a padro e no segundo que fosse utilizada uma fonte em verde.
<?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>Trying out a local style</title> </head> <body> <h1>Using local styles</h1> <p style="font-size: 150%">I am a paragraph which should be displayed in a larger font than normal.</p> <p style="color: green">A paragraph in a different color but normal font size.</p> </body> </html>
Figura 66 Definio Local de Estilos.
Utilizao do Atributo style com o Elemento <span> O atributo style pode ser utilizado com um grande nmero de elementos da linguagem XHTML para a aplicao local de estilos aos elementos. Entre essas uma utilizao bastante prtica dada pelo emprego conjunto com o elemento <span> para indicar que uma parte de um elemento em um documento deve receber um estilo especfico, conforme exemplificado a seguir:
JCFJ 2002 88
<p>Este texto <span style=color: green efetivamente verde</span> com <span style=color:green; font-size:140%> verde</span>
No pargrafo, quando a utilizao do elemento <span> faz com que o estilo seja aplicado unicamente no texto contido entre <span> e </span>, permitindo que em um mesmo elemento se utilize diferentes formataes. Utilizao do Atributo style com o Elemento <div> O atributo style pode tambm ser utilizado com o elemento <div> para indicar que todos os elementos internos diviso devero adotar o estilo definido para a diviso. Assim, se por exemplo se pretende definir que todos os pargrafos internos a uma diviso devem ser apresentados em vermelho com tamanho 20% maior que o original deve-se declarar:
<div style=color: red; font-weight: 120%> Contedo </div>
5.1.2 Definio Interna de Estilos Conforme citado, utilizao interna est relacionada definio dos estilos no mesmo documento que define a pgina Web. Nesse caso a definio dos estilos deve estar (conforme utilizado em exemplos de captulos anteriores) entre os elementos <style> </style> e dentro do elemento <head>. A figura 67 apresenta um exemplo dessa utilizao com os elementos p, h1, h2 e b tendo sua apresentao definida. Pode-se observar que este elemento b quando u tilizado dentro do elemento h1 redefiniu a cor desse para vermelho.
<?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"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Trying out a internal style sheet</title> <style type="text/css"> <!-p {font-size:120%;} h1 {color:green; } h2 {color:green; font-size: 90%;} b { color:red; } --> </style> </head> <body> <h1>The second attempt<br /> <b>at a style sheet</b></h1> <h2>I am a second-level heading</h2> <p>I am a paragraph which should be displayed in a larger font than normal.</p> <p>The same style will be applied to all paragraphs in the document.</p> </body> </html>
Figura 67 Definio Interna de Estilos.

JCFJ
2002
89
Na figura 67 pode-se observar ainda uma boa prtica que deve ser adotada quando se utiliza folhas de estilo: incluir a definio dos estilos entre comentrios ( ) para que navegadores antigos que no sejam capazes de trabalhar com estilos no tentem apresentar as definies da folha de estilos. Em folhas de estilo quando se deseja utilizar a mesma definio para diversos elementos podese enumer-los antes dos parnteses que definem o estilo. Assim, se por exemplo se deseja que os ttulos h1, h2 e h3 sejam apresentados em verde pode-se definir: h1, h2, h3 {color: green}. 5.1.3 Definio Externa de Estilos Os estilos que sero utilizados em um documento podem tambm ser definidos em um segundo documento que conter, nesse caso, unicamente as definies dos estilos. Este documento normalmente tem a extenso .css. O elemento <link> deve ser utilizado nesse caso para ligar a folha de estilo ao documento que dever utiliz-la, com o atributo <href> indicando a URL do arquivo de definio de estilos. O exemplo 68 apresenta dois arquivos first-link.ccs (o documento com as definies do estilo) e third-attempt.htm (o documento a ser apresentado). Conforme se pode observar na figura tem-se uma apresentao idntica quela da figura 67.
third-attempt.htm
<?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>Trying out a style sheet</title> <link rel="stylesheet" href="first-link.css" /> </head> <body> <h1>The second attempt<br /> <b>at a style sheet</b></h1> <h2>I am a second-level heading</h2> <p>I am a paragraph which should be displayed in a larger font than normal.</p> <p>The same style will be applied to <b>all</b> paragraphs in the document.</p> </body> </html> first-link.css /* This is the style sheet to be linked */ p {font-size:120%;} h1 {color:green; } h2 {color:green; font-size: 90%;} b { color:red; }
Figura 68 Definio Externa de Estilos.
JCFJ
2002
90
5.2. Herana e Propriedades de Folhas de Estilo Conforme apresentado, uma das vantagens de se utilizar estilos dada pela capacidade de estilos serem herdados em um documento. O exemplo da figura 69 apresenta uma pgina em que se pode observar a funcionalidade da herana. No documento da figura 69, o elemento <body> foi definido como devendo ter sua apresentao em itlico e assim, todos os elementos internos a ele foram apresentados em itlico. Nessa figura pode-se tambm observar o efeito da aplicao em cascata dos estilos: o elemento <b> quando aplicado dentro do elemento <h1> faz com que o contedo de <h1>, interno a <b>, fosse apresentado com as caractersticas de <h1> mais aquelas de <b>.
<?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"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Trying out the heritage with the style sheet</title> <style type="text/css"> <!-body {font-style:italic} p {font-size:120%;} h1 {color:green; font-size: 200%;} h2 {color:green; font-size: 120%;} b { color:red; font-size: 150%;} --> </style> </head> <body> <h1>An heritage attempt<br /> <b>with style sheet</b></h1> <h2>I am a second-level heading</h2> <p>I am a paragraph which should be displayed in a larger font than normal.</p> <p>The same style will be applied to <b>all</b> paragraphs in the document.</p> </body> </html>
Figura 69 Herana de Estilos.
5.3. Utilizao de Estilos Nesta seo, diversas das possibilidades de utilizao de estilos para a formatao de documentos XHTML sero abordadas, cada uma delas apresentando uma caracterstica particular que pode ser utilizada na apresentao do contedo de elementos XHTML em um documento. 5.3.1 Estabelecendo a Cor da Fonte do Texto Cores em documentos XHTML so manipuladas atravs da propriedade color. A maneira mais fcil de se estabelecer a cor de um elemento XHTML utilizando-se os nomes das cores padro, que so as 16 cores da palheta de cores VGA. Estes nomes so:
JCFJ
2002
91
aqua
grey
black green olive silver
blue lime purple white
fuchsia maroon red yellow
navy teal
Se a cor que se deseja utilizar no fizer parte da lista acima, deve-se utilizar seu valor RGB ou seu valor em hexadecimal. O anexo B apresenta os valores em hexadecimal para diversas cores. Os exemplos dessa seo tratam unicamente de textos, mas a lgica de utilizao a mesma para qualquer elemento XHTML. O exemplo da figura 70 apresenta um documento onde a propriedade color utilizada para se estabelecer a cor com que a totalidade do0 contedo de um documento ser apresentado. Para tanto, no documento da figura 70 estabeleceu-se a cor azul para o elemento <body>. Pela caracterstica de herana, a menos que sejam usados os elementos <p>, que tem seu contedo apresentado em vermelho ou <strong>, que tem seu contedo apresentado em preto, todo o resto do documento ser apresentado em azul.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Example of font color</title> <style type="text/css"> <!-body { font-size: 120%; color: blue;} p {color:red} strong {color:black; font-style: italic;} --> </style> </head> <body> <h1>The Redwing</h1> <h2>A winter bird</h2> <p>The <strong>redwing</strong> is a winter bird which may occasionally be seen in suburbs. A flock of 50 or more were briefly attracted to Bracknell in Berkshire, UK during the winter of 1995.</p> </body> </html>
Figura 70 Definio de Cores do Texto.
A utilizao de cores atravs de seus cdigos hexadecimais, permite que outras cores, alm daquelas da palheta VGA, possam ser utilizadas. Alm do natural aumento no nmero de cores que se pode utilizar, esta utilizao permite uma definio mais precisa da cor desejada. O exemplo da figura 71 apresentado a seguir mostra a utilizao de cores atravs de seus cdigos hexadecimais.
JCFJ
2002
92

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Example of font color</title> <style type="text/css"> <!-body { font-family: Trebuchet, Arial, sans-serif } h2 { color: #006699 } em { font -style: italic; font-size:120%;} pre { font-style:italic; font-size:150%;} pre { font-family: Trebuchet, Arial, sans -serif; color:#006699;} b { color:#006699 } --> </style> </head> <body> <h1>Canterbury Tales</h1> <h2>The Prologue</h2> <pre>Whan that Aprille with his shoure sote The droghte of Marche hath perced to the rote And bathed every veyne in swich licour Of which vertu engendered is the flour</pre> <p><b>shoures</b> showers. </p> <p><b>sote</b> sweet. It is disyllabic.</p> <p><b>droghte</b> dryness. Pronounced <em>druuht</em> </p> <p><b>rote </b>root.</p> <p><b>And bathed every veyne in swich licour</b>: And bathed every vein (of tree or herb) in such moisture....</p> <p><b>flour</b> flower.</p> </body> </html>
Figura 71 Definio de Cores do Texto com Valores Hexadecimais.
5.3.2 Estabelecendo a Cor das Ligaes Hipertexto Conforme apresentado na seo 3.2, em uma pgina XHTML ligaes que nunca foram visitadas, ligaes que j foram visitadas e ligaes que o navegador naquele instante est tentando visitar, podem ter uma diferenciao de apresentao mostrada na pgina. Essa diferenciao pode ser feita atravs das cores com que cada tipo de i lgao apresentada em uma pgina. Essas cores so definidas atravs das complementaes apresentadas a seguir para o elemento <a>: link, para as ligaes no visitadas, visited para as j visitadas e active para aquelas que se est tentando visitar. O exemplo da figura 72 apresenta uma ilustrao dessa utilizao, embora nenhuma das ligaes aponte para nenhum documento vlido.
JCFJ
2002
93

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Examp le of font color</title> <style type="text/css"> <!-h2 { color: #990066 } h3 { color: black } h4 { color:#990066;} pre { color: #990066} em { color: #FF6633 } a:link { color: black } a:visited { color: b lue } a:active { color: lime } --> </style> </head> <body> <h1>Canterbury Tales</h1> <a name="#xxx"><h2>The Prologue</h2></a> <pre>Whan that Aprille with his <a href=xxx">shoure</a> sote The <a href="xxx">droghte</a> of Marche hath perced to the rote And bathed every veyne in <a href=yyy>swich licour</a> Of which vertu engendered is the flour</pre> </body> </html>
Figura 72 Definio de Cores de Ligaes.
As complementaes ao elemento <a> apresentadas para a definio de cores, podem tambm ser utilizadas na definio de outras caractersticas de apresentao desses elementos. Assim, pode-se por exemplo suprimir o sublinhado que uma ligao no visitada (e todas as outras) apresenta, e para tanto a sintaxe a seguinte:
a:link { text-decoration: none }
Pode-se tambm adicionar um fundo ligao, e para tanto a seguinte sintaxe deve ser utilizada:
a:link { background-color: black; color: yellow }
Alm do mtodo de se utilizar uma complementao ao elemento <a> na definio dos estilos, outra maneira que pode ser utilizada a definio, atravs dos atributos link, vlink e alink do elemento <body>, das cores das ligaes, conforme apresentado a seguir.
<body link=navy vlink=maroon alink=red>
5.3.3 Estabelecendo a Cor de Fundo Atravs de folhas de estilo se pode estabelecer a cor de fundo de qualquer elemento XHTML, seja um pargrafo, um ttulo ou at mesmo o documento inteiro. Nesses ltimo caso, para se
JCFJ
2002
94
estabelecer a cor de fundo que se deseja utilizar com a totalidade do documento, a seguinte declarao deve ser feita dentro do elemento <style>:
body { color: black; background: red; }
Na declarao acima, a propriedade que efetivamente estabelece a cor do fundo da pgina background, sendo que a propriedade color utilizada para se declarar a cor com que o texto ser apresentado. A propriedade a ser utilizada para o estabelecimento da cor de fundo para qualquer outro elemento XHTML a mesma (background). Assim, como exemplo, quando se deseja estabelecer a cor de fundo para os pargrafos ou ttulos de nvel 2 deve-se declarar:
p { background: red; } h2 { background: lime; }
Tabelas tambm podem utilizar cores de fundo. Desta maneira, se o desejo for estabelecer uma cor de fundo para os cabealhos da tabela e outra para as clulas, a seguinte declarao pode ser feita:
th { background: red; } td { background: lime; }
5.3.4 Estabelecendo uma Textura de Fundo Uma textura, como uma cor, pode ser aplicada tambm a qualquer elemento em um documento. Novamente esta aplicao pode ser feita atravs de atributos ou propriedades. Na prtica, a aplicao de uma textura a um documento passa pela definio de uma imagem que deve ser utilizada como fundo do documento. Se na apresentao a imagem, por seu tamanho, no ocupar a totalidade da pgina ela poder ser repetida quantas vezes forem necessrias at que a imagem ocupe a totalidade da pgina. O exemplo da figura 73 apresenta a utilizao de uma figura denominada yellow_fabric.gif10 como textura. Deve-se observar que na definio do e stilo, quando uma figura utilizada, o nome da figura deve vir entre parnteses precedidos da palavra url. O interior dos parnteses pode conter unicamente o nome do arquivo se o arquivo estiver no mesmo diretrio da pgina sendo apresentada (como na figura 73), ou efetivamente a URL de uma figura em qualquer parte do Web.
10
Esta figura pode ser obtida em http://www.netscape.com/assist/net_sites/bg/backgrounds.html .
JCFJ
2002
95

<?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>Example of a textured background</title> <style> body{ background -image: url(yellow_fabric.gif); } </style> </head> <body bgcolor="yellow" background="yellow_fabric.gif"> <h1>Episode 7: Trip to Another Dimension</h1> <p> The mighty Captain Haggis shrugged off his attackers with his famous ground-black-pepper sneeze. As the evil Cutlery Clan fell to the floor coughing and sneezing and rubbing at their tearing eyes, Captain Haggis quickly ate his Dimensional Neaps 'n' Tatties and plung ed headlong into the dreaded Mustard Dimension. </p> <p> Does Captain Haggis know no fear? Will he be able to withstand the scorching mustard heat? And will he be able to rescue the sacred Three-Legged Haggis in time to save all of Haggisdo m from the evil machinations of the ruthless Cutlery Clan?...</p> <p> Tune in to next weeks thrilling episode: "A Mustard Been Here Before".</p> </body> </html>
Figura 73 Definio de uma Textura.
O mesmo efeito da figura 73 pode ser alcanado com a utilizao de atributos do elemento <body>. Para tanto a seguinte declarao deve ser feita:
<body background=yellow_fabric.gif>
Pelas razes que se ver a seguir, a utilizao de folhas de estilo deve ser priorizada pois fornece diversas outras facilidades na utilizao de texturas e cores. Essas facilidades so fornecidas pela presena de diversas propriedades nas folhas de estilo relacionadas ao controle de imagens. A seguir, so apresentadas algumas dessas propriedades juntamente com outras j utilizadas. background-color: define a cor de fundo. background-imagem: define uma imagem que ser utilizada como textura. background-repeat: se a imagem for menor que a rea que ela deve ocupar, essa propriedade define se a imagem ser ou no repetida para ocupar a totalidade da pgina. Os valores que essa propriedade pode adotar so: repeat, repeat-x, repeat-y e norepeat. background-attachment: essa propriedade define se quando a pgina for deslocada para baixo, para cima ou para os lados, a imagem deve ou no acompanhar esse deslocamento. Os valores que essa propriedade pode adotar so: fixed e scroll. background-position: atravs dessa propriedade se pode posicionar uma imagem em relao a um elemento. Os valores que essa propriedade pode assumir so <position> <length> top, center, bottom, left, right. Na utilizao mais simples
JCFJ
2002
96
(cf. figura 74) deve-se empregar simplesmente dois valores (Ex.: backgroundposition: top left). Em uma utilizao mais elaborada, <position> ou <length> podem ser utilizados. Com <position> se define o posicionamento como uma porcentagem (horizontal ou vertical) e com <length> se define o posicionamento como um valor absoluto, primeiramente o horizontal seguido do vertical. O exemplo da figura 74, utiliza as propriedades apresentadas acima para posicionar uma textura em uma parte do elemento <pr>. Logicamente o tamanho da imagem utilizada como textura utilizada deve atender aos propsitos requeridos. Nessa figura, se pode tambm observar a utilizao da propriedade padding (apresentada mais a frente) para o preenchimento com a textura de uma rea em torno do elemento.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>background color</title> <style type="text/css"> <!-pre { background-color: white; background-attachment: fixed; background-image: url(yellow_fabric.gif); background-position: top left; background-repeat: no-repeat; paddin g:2em } h1 { margin -left: 10% } h2 { color: #990066 } pre { color:black; font-family:arial} --> </style> </head> <body> <h1>The naming of cats</h1> <pre>The naming of cats is a difficult matter, It isn't just one of your holiday games You may think at first I'm as mad as a hatter When I tell you a cat must have three different names</pre> </body> </html>
Figura 74 Posicionamento de uma Imagem.
5.3.5 Estabelecendo Preenchimento, Bordas e Margens A figura 75 apresenta como atravs de folhas de estilos, so compreendidos em uma pgina os conceitos de preenchimento, borda e margem, em relao a um elemento qualquer presente em um documento XHTML.
JCFJ
2002
97
margem (transparente) borda preenchimento contedo
Figura 75 Posicionamento de Preenchimento, Borda e Margem.
Cada uma das caractersticas da figura 75 pode ser estabelecida para elementos XHTML atravs de propriedades especficas. Para preenchimento, que define uma rea em torno do elemento na qual uma caracterstica aplicada ao elemento deve ser estendida, valores (auto, <length> e <percentage>) devem ser atribudos s propriedades padding-top, padding-right, padding-bottom, padding-left e padding. Neste ltimo caso, toda a rea em torno do elemento ser preenchida. Para borda, valores (thin, medium, thick e <length>) devem ser atribudos s propriedades border-top-width, border-right-width, border-bottom-width, border-left-width e border-top-width. O mesmo procedimento deve ser utilizado para margem . Nesse caso, valores (auto, <length> e <percentage>) devem ser atribudos s propriedades margin-top, margin-right, margin-bottom, margin-left e margin. 5.3.5.1 Estabelecendo Margens de Pginas As propriedades margin-left e margin-right podem ser utilizadas para se estabelecer as margens a serem utilizadas em um documento. Na figura 76 essas propriedades so efetivamente utilizadas com esse fim na definio de <body>.
<?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>Trying out page margins</title> <style type="text/css"> <!-body { margin-left: 10%; margin-right: 10%; } h1 { margin -left: -8%; } --> </style> </head> <body> <h1>Twelfth Century </h1> <p>When William the Conqueror defeated Harod at Senlac in 1066, it meant much more for England than the winning, or losing, of the battle of Hastings.</p> </body> </html>
Figura 76 Definio das Margens de uma Pgina.
JCFJ
2002
98
Nessa figura para uma melhor distino dos ttulos e pargrafos, ao ttulo foi aplicada uma margem de maneira a que o corpo do documento fique identado em relao a ele. 5.3.5.2 Controle do Espaamento Abaixo e Acima dos Ttulos O exemplo da figura 76 apresentou a utilizao de margens laterais com ttulos. Com folhas de estilo, pode-se tambm controlar o espaamento vertical deixado abaixo e acima dos elementos em um documento, nesse caso ttulos. A figura 77 apresenta um exemplo com a utilizao das propriedades margin-top e margin-bottom que so utilizadas para a definio do espaamento vertical dos ttulos de nvel 1.
<?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>Trying out page margins</title> <style type="text/css"> <!-body { margin-left: 10%; margin-right: 10%; } h1 { margin-top: 10%; margin-bottom: 5%; } --> </style> </head> <body> <h1>Twelfth Century </h1> <p>When William the Conqueror defeated Harod at Senlac in 1066, it meant much more for England than the winning, or losing, of the battle of Hastings.</p> </body> </html>
Figura 77 Definio das Margens Verticais de Elementos.
Estilos podem ser utilizados localmente quando se deseja que uma caracterstica seja aplicada particularmente a um nico elemento. Se, por exemplo, esse elemento for um ttulo de nvel 2, o atributo class deve ser utilizado no corpo do documento conforme apresentado a seguir.
<h2 class=subsection> Ttulo de Nvel 2 </h2>
A declarao do estilo deve ento ser feita com o nome do elemento seguido do nome do atributo class, com as propriedades entre parnteses, conforme apresentado a seguir.
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
Um fato importante que deve ser ressaltado que o espaamento vertical no se anula. Assim, se um pargrafo em seguida a um ttulo tem definida uma propriedade margin-top com o ttulo tendo definida uma propriedade margin-bottom, o espaamento vertical que ser aplicado entre eles ser dado pela soma dos dois valores das propriedades.
JCFJ
2002
99
5.3.5.3 Controlando a Indentao de Pargrafos Em alguns documentos interessante se indentar a primeira linha de um pargrafo para uma melhor apresentao do texto. Para tanto a propriedade text-indent deve ser utilizada conforme apresentado na figura 78.
<?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>Trying out page margins</title> <style type="text/css"> <!-body { margin-left: 10%; margin-right: 10%; } p { text-indent:5%} --> </style> </head> <body> <h1>Twelfth Century </h1> <p>When William the Conqueror defeated Harold at Senlac in 1066, it meant much more for England than the winning, or losing, of the battle of Hastings.</p> <p>It was responsible for the introduction into the country of an entirely different model of life and a new set of ideas.</p> </body> </html>
Figura 78 Indentao de Elementos.
5.3.5.4 Definio de Bordas Atravs da aplicao de estilos se pode facilmente aplicar bordas a elementos de um documento XHTML. Uma abordagem semelhante a apresentada na seo 5.3.5.3, com a utilizao do atributo class deve ser realizada. Assim, quando se deseja definir bordas para uma diviso, a seguinte declarao pode ser empregada na definio do estilo:
div.box {border: solid; border-width: thin; padding: 0.2em; }
Essa declarao pode ento ser utilizada no corpo do documento da seguinte forma:
<div class=box> Texto da diviso ...</div>
Os tipos que podem ser utilizados na definio das bordas so: dotted, dashed, solid, double, groove, ridge, inset e outset, enquanto a propriedade border-width pode assumir os valores thin, medium, think ou um valor especfico. 5.3.6 Controlando Fontes Atravs de propriedades de folhas de estilo se pode controlar como as fontes sero apresentadas em um documento XHTML. Propriedades devem ser preferencialmente utilizadas em relao aos
JCFJ
2002
100
marcadores <font>, pois alm de permitirem um controle mais fino, tornam mais simples a manuteno dos documentos. Entre as principais propriedades das folhas de estilo 11 que podem ser utilizadas na definio de fontes esto: font-size: define o tamanho da fonte. font-style: define o estilo da fonte. font-weight: define o nvel de negrito da fonte. line-height: define o espaamento vertical das linhas. font-family: define a famlia da fonte.
A utilizao dessas propriedades apresentada nas prximas sees.
5.3.6.1 Estabelecendo o Tamanho da Fonte O tamanho da fonte utilizada em um texto controlado atravs da propriedade font-size. O tamanho pode ser definido como uma porcentagem e nesse caso o tamanho da fonte est relacionado ao tamanho da fonte do elemento pai. Naturalmente o tamanho da fonte tambm pode ser especificado em pontos (pt). A figura 79 apresenta um exemplo em que o tamanho da fonte utilizada no corpo definida como sendo 40% maior que o padro e no qual o ttulo de nvel 1 deve ser apresentado com fonte de tamanho 24pt.
<?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>Example of setting the font size</title> <style type="text.css"> <!-body { font-size: 140%} h1 { font-size: 24pt; } --> </style> </head> <body> <h1>The Redwing</h1> <h2>A winter bird</h2> <p>The redwing is a winter bird which may occasionally be seen in suburbs. A flock of 50 or more were briefly attracted to Bracknell in Berkshire, UK during the winter of 1995.</p> </body> </html>
Figura 79 Definio do Tamanho de Fontes - 1.
11
Para um estudo mais aprofundado de propriedades ligadas a fontes pode-se consultar http://www.w3.org na seo CSS.
JCFJ
2002
101
No exemplo da figura 80 apresentada a utilizao de fontes de tamanhos diferentes com diversos elementos de um documento XHTML. Nesse caso, conforme se pode observar, cada elemento teve a definio do tamanho da fonte com a qual ele ser apresentado feita na declarao de estilos.
<?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>Example of setting the font size</title> <style type="text/css"> <!-p {font-size:90%} h1 {font -size:280% } h2 {font -size: 200%} h3 {font -size: 150%} blockquote {font -size: 70%} b {font-size:70%} --> </style> </head> <body> <h1>A demonstration of relative font sizes</h1> <h2>I am a reasonably sized heading2 element</h2> <h3>I am a slightly smaller heading3 element</h3> <p>I am a little paragraph</p> <blockquote>I am a blockquote element displayed in a much much smaller font than normal and you can <b>hardly see me at all in fact</b></blockquote> </body> </html>
Figura 80 Definio do Tamanho de Fontes - 2.
5.3.6.2 Estabelecendo o Estilo da Fonte O estilo de uma fonte, em relao a folhas de estilo, est relacionado apresentao d a fonte em itlico, oblquo ou normal, sendo que atualmente itlico e oblquo fornecem o mesmo resultado. Essa apresentao estabelecida atravs dos valores italic, oblique ou normal que podem ser atribudos propriedade font-style. 5.3.6.3 Estabelecendo o Nvel de Negrito da Fonte O nvel de negrito com que uma fonte apresentada estabelecido atravs da propriedade font-weight. Esse nvel pode ser definido em uma escala de 100 a 900 (em mltiplos de 100) onde 100 apresenta uma fonte clara e 900 uma fonte com o maior nvel possvel de negrito. Outra possibilidade de se estabelecer o nvel de negrito atravs da atribuio dos seguintes valores para a propriedade font-weight: bold, bolder, lighter e normal.
JCFJ
2002
102
5.3.6.4 Estabelecendo um Texto em Maisculas ou Minsculas Atravs da propriedade text-transform da folha de estilos pode-se fazer com que uma parte do contedo de um elemento seja apresentada em letras maisculas ou minsculas. Para tanto, propriedade text-transform desse elemento, deve-se atribuir ou o valor uppercase ou lowercase para se obter respectivamente letras em maisculo ou minsculo. Na figura 81, apresenta-se um exemplo no qual o estilo e o nvel de negrito de fontes so definidos assim como a apresentao de um texto somente em maisculas realizada.
<?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>Example of setting the font size</title> <style type="text/css"> <!-p { font-style: normal } em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; } --> </style> </head> <body> <h1>September 1993</h1> <h2>Mac Mosaic and Win Mosaic are released</h2> <p>The release of the Mosiac browser makes the Web available to a much wider audience. All kinds of people devise their own home pages as it becomes fashionable to <em>" put yourself on the Web"</em> and devise your own "home page". Even quiet and retiring software engineers place all kinds of personal information and photographs on the <strong>Internet</strong>.</p> </body> </html>
Figura 81 Utilizao de Maisculas, Estilo e Negrito para Fontes.
5.3.6.5 Estabelecendo o Espaamento das Linhas Atravs da propriedade line-height, pode-se especificar o espaamento que ser aplicado entre as linhas que contm elementos XHTML. Normalmente o espaamento das linhas equivalente ao tamanho da fonte utilizada na linha. Assim, uma linha com um elemento <p>, no qual a fonte utilizada tem tamanho 12pt, ir (normalmente) ser apresentada com um espaamento entre linhas equivalente a 12pt. A propriedade line-height pode assumir os seguintes valores: <number>, <lenght>, <percentage> e normal. No primeiro caso um nmero pelo qual deve ser multiplicado o espaamento padro deve ser fornecido (Ex.: 1,2). No segundo caso, um nmero que especifique o espaamento deve ser fornecido (Ex.: 18pt). No terceiro caso, uma porcentagem do espaamento
JCFJ
2002
103
padro deve ser fornecida enquanto o quarto apresentar as linhas com o espaamento padro. A figura 82 mostra um exemplo de utilizao dessa propriedade.
<?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>Approximating the small-caps style</title> <style type="text/css"> <!-span {text-transform: uppercase; font-size: 90%} p { line-height: 200%} --> </style> </head> <body> <h2>Approximating the small-caps style</h2> <p><span>Once upon a time</span> in a land far away, there lived a wood cutter and his daughter. Life was hard and they often went hungry. One day, ...</p> </body> </html>
Figura 82 Espaamento Entre Linhas.
5.3.6.6 Estabelecendo o Nome da Fonte Folhas de estilo permitem que se utilize diversos tipos de fontes na apresentao de um documento, atravs da propriedade font-family. Naturalmente para que essa utilizao se efetive necessrio que o computador no qual o navegador est instalado tenha as fontes utilizadas no documento XHTML. Se a fonte no estiver disponvel, a fonte padro definida no navegador ser utilizada. O exemplo da figura 83 apresenta um exemplo dessa utilizao.
JCFJ
2002
104

<?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>Example of font color</title> <style type="text/css"> <!-body { font-family: " Vivaldi"; font-size: 200%; text-align: center } --> </style> </head> <body> <p>You are cordially invited to the wedding of<br /> Daphne Johnston and Marcus Llewelyn-Smith, ....</p> </body> </html>
Figura 83 Utilizao de Famlias de Fontes.
Atravs de folhas de estilo pode-se tambm declarar fontes alternativas que devem ser utilizadas, no lugar da fonte padro do navegador, caso o computador no tenha a fonte solicitada no documento XHTML. A da figura 84 apresenta um exemplo com a declarao de fontes alternativas.
<?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>Style Sheet History</title> <style type="text/css"> <!-h1{ font -family: Georgia, "Times New Roman", Garamond, Times, serif } p { font -family: Verdana, Arial, Helvetica, sans-serif } --> </style> </head> <body> <h1>November 1995</h1> <p>Style sheets for HTML documents begin to take shape Bert Boss, Hkon Lie, Dave Raggett, Chris Lilley and others from the World Wide Web consortium convene in Versailles near Paris to discuss the deployment of Cascading Style S heets (the name infers that more than one style sheet can interact to produce the final look of the document). Using a special language, the CSS group advocated that everyone would soon be able to write simple styles for HTML. The SGML community suggest an alternative a LISP-like language called DSSSL.</p> </body> </html>
Figura 84 Utilizao de Famlias de Fontes Alternativas.

JCFJ
2002
105
5.4. Definio de Estilos Prprios Atravs do atributo class (j utilizado neste captulo) possvel que se defina, como em processadores de texto usuais, outros estilos alm daqueles originalmente definidos. O exemplo da figura 85 apresenta a definio de trs novos estilos que modificam a apresentao do elemento pargrafo. Uma abordagem semelhante apresentada nessa figura pode ser utilizada para a definio de outros estilos.
<?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>Example of named styles</title> <style type="text/css"> <!-p.color { background: yellow; padding: 1.5em; border: none; margin-left:0.5%; width:100% } p.small { font-size:small; margin-left: 30%} p.normal { font-weight: bold; font-size: larger; color: black; margin-left: 30% --> </style> </head> <body> <h1>The Redwing</h1> <h2>A winter bird</h2> <p class="color">The redwing is a winter bird which may occasionally be seen in suburbs. A flock of 50 or more were seen in Bracknell in Berkshire, UK during the winter of 1995.</p> <p class="normal">The redwing is easily identified by the white eye-stripe over its eye and by the red under its wings which can be seen only when in flight. </p> <p class="normal"> The bird is most often seen in flocks sometimes mixed in with fieldfares and even greenfinches. </p> <p class="small">The best time to see Redwings is in late November when they feast on berries in gardens. Another favorite haunt is the village football pitch. </p> </body> </html>
Figura 84 Utilizao de Famlias de Fontes Alternativas.
JCFJ
2002
106
Captulo 6 - Introduo a XML
XML o acrnimo de eXtensible Markup Language. O nome da linguagem j apresenta sua caracterstica: ser, ao contrrio do XHTML, uma linguagem extensvel, ou seja, ao contrrio de XHTML pode-se definir os marcadores que sero utilizados ou mesmo utilizar marcadores j definidos por outras pessoas. Outra caracterstica importante que os marcadores que so criados descrevem o contedo do elemento. A ttulo de exemplo, na figura 86 apresenta-se um cdigo XML e um cdigo XHTML para que se possa observar as diferenas entre os dois.
books.xml
<?xml version="1.0"?> <books> <book> <title>Beginning XHTML</title> <ISBN>1-861003-43-9</ISBN> <authors> <author_name>Frank Boumphrey </author_name> <author_name>Ted Wugofski </author_name> <author_name>Sebastian Schnitzenbaumer </author_name> <author_name>Jenny Raggett</author_name> <author_name>Dave Raggett </author_name> </authors> <description> XHTML is a powerful technology for creating web site content. Learn how to create exciting pages using a technology that combines the benefits of XML with the existing wide coverage of HTML.</description> <price US="$39.99"/> </book> </books> books.htm
(a)
(b)
<?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>Beginning XHTML</title> </head> <body> <h1>Beginning XHTML</h1> <h3>ISBN 1-861003-43-9</h3> <h4>Authors</h4>Frank Boumphrey, Ted Wugofski, Sebastian Schnitzenbaumer, Jenny Raggett, Dave Raggett<br /> <p>US $39.99</p><br /> <p> XHTML is a powerful technology for creating web site content. Learn how to create exciting pages using a technology that combines the benefits of XML with the existing wide coverage of HTML.</p> </body> </html>
Figura 86 Documentos XHTML e XML.
O documento XHTML da figura 86 um documento comum, como os j apresentados at agora. O documento XML, conforme se pode observar na figura bastante diferente. A nica linha comum aos dois documentos a primeira que indica a verso de XML utilizada. Conforme apresentado no captulo 2, XHTML HTML reescrita em XML e assim necessrio informar, mesmo no documento XHTML, a verso de XML utilizada. Essa primeira linha no documento XML denominada Prlogo XML (XML Prolog). Os marcadores no documento XML no so aqueles utilizados com XHTML: marcadores especficos foram criados e utilizados. O fato de marcadores terem sido criados especificamente para o documento apresenta grandes vantagens conforme ser apresentado nesse captulo. Umas das principais vantagens est ligada ao fato de se poder definir a formatao que ser utilizada na apresentao do documento. Assim, formataes diferentes podem ser criadas para finalidades diferentes (Ex.: apresentao em um navegador comum
JCFJ
2002
107
Captulo 6 - . Introduo a XML
ou em um navegador para cegos). Outra vantagem est ligada s possibilidades de busca que o documento XML fornece: pode-se procurar, por exemplo, em diversos documentos XML que descrevem livros, o ttulo ou, por exemplo, o ISBN desses de maneira bastante prtica. Uma caracterstica da linguagem XML introduzida no captulo 2 foi que XML case sensitive, ou seja, nela letras maisculas e minsculas so diferenciadas quando se cria elementos da linguagem. Este fato pode ser observado na figura 86 onde os nomes de todos os elementos esto em minsculas. Conforme se pode tambm observar na figura 86, o documento XML um documento bem formado, que respeita a totalidade das regras apresentadas no captulo 2, como, por exemplo, sempre utilizar marcadores de abertura e fechamento, no inverter a ordem dos marcadores de abertura e fechamento, etc. Os dois documentos apresentados na figura 86 tm sua visualizao apresentada na figura 87.
Figura 87 Visualizao dos Documento XML e XHTML.
Na figura 87, o documento XML apresentado como uma estrutura em rvore conforme apresentado tambm no captulo 2. As prximas sees apresentaro, com mais de detalhes a linguagem XML e mostraro o que deve ser feito para que, por exemplo, o documento XML da figura 87 possa ser visualizado efetivamente como informao sobre um livro (de maneira anloga ao documento XHTML da figura 87). 6.1. Criao de Documentos XML A especificao XML 1.0 apresenta dois tipos de documentos, documentos bem formados , que so documentos que esto de acordo com as regras de XML e documentos vlidos , que so documentos que alm de bem formados esto de acordo com alguma DTD. As seguir esses dois tipos de documentos sero apresentados. 6.1.1 Documentos XML Bem Formados O menor requisito que um documento XML deve ter ser bem formado, o que quer dizer que ele deve respeitar a sintaxe definida pela especificao XML 1.0, ou seja, ele deve utilizar termos corretos da linguagem da maneira definida na linguagem12 . As trs regras abaixo definem o que deve ser um documento XML bem formado:
12
O documento deve conter um ou mais elementos.
A especificao XML pode ser obtida em http://www.w3c.org/tr/xml ou em http://www.xml.com/pub/axml/axmlintro.html onde uma verso comentada da especificao pode ser encontrada.
JCFJ e ELFS
2002
108
O documento deve conter um elemento cujo nome seja nico; alm disso, esse elemento no deve fazer parte de nenhum outro elemento do documento. Esse elemento denominado elemento raiz. Todos os outros elementos do documento devem estar includos no elemento raiz e devem ser aninhados corretamente.
As sees que seguem apresentam alguns dos componentes de um documento XML
6.1.1.1 Declarao XML Alguns componentes de um documento XML so opcionais e outros obrigatrios. A Declarao XML um dos componentes opcionais. Entretanto, a utilizao dessa declarao fortemente recomendada, pois ela ir informar ao agente que este estar tratando com um documento XML indicando-lhe qual a verso da linguagem utilizada. Essa declarao deve ser feita da seguinte maneira:
<?xml version=1.0?>
Nessa declarao pode-se ainda estabelecer a linguagem na qual os dados X ML sero escritos. 13 A tabela abaixo apresenta os valores mais comuns que o atributo encoding apresentado abaixo pode assumir para definir essa linguagem.
<?xml version=1.0 encoding=iso-8859-1 ?> Linguagem Conjunto de Caracteres
Unicode (8 bits) Latim 1 (Europa do Oeste, Amrica Latina). Latim 2 (Europa Central e do Este). Latim 3 (Europa do Sudoeste) Latim 4 (Escandinvia/Paises Blticos) Latim/Cirlico Latim/rabe Latim/Grego Latim/Hebreu Latim/Turco Latim/Lapo/Nrdico/Esquim Japons
UTF-8 ISO-8859-1 ISO-8859-2 ISO-8859-3 ISO-8859-4 ISO-8859-5 ISO-8859-6 ISO-8859-7 ISO-8859-8 ISO-8859-9 ISO-8859-10 Euc-JP OU Shift_JIS
6.1.1.2 Elementos Uma das regras que definem um documento XML bem formado diz que ao menos um elemento deve existir no documento. Assim, Elementos so componentes obrigatrios de um documento. Elementos consistem basicamente de dados marcados com marcadores. Cada marcador de abertura/fechamento com seu contedo consiste de um elemento do documento. Um exemplo de marcador apresentado abaixo.
<meu_marcador>Contedo do elemento</meu_marcador>
O nome dos marcadores de abertura e fechamento deve ser exatamente o mesmo e isso levando em considerao que na linguagem XML maisculas e minsculas so diferenciadas. O contedo entre
13
Informaes mais detalhadas sobre internacionalizao podem ser obtidas em http://www.w3c.org/International/ .
JCFJ e ELFS
agosto/2000
109
os marcadores denominado Dados do Tipo Carter. Os dados do tipo carter podem ser compostos de qualquer dos caracteres definidos na linguagem unicode, exceto o elemento de incio de marcador <. Quando sua utilizao indispensvel deve-se utilizar < e > para >. Os marcadores podem comear com uma letra, um underscore ( _ ) ou dois pontos ( : ), seguido de qualquer combinao de letras, dgitos hfens, underscores, dois pontos ou ponto. A nica exceo que no se pode comear um marcador com a seqncia X ML ou qualquer combinao dessas letras em maisculas ou minsculas. O nome de um marcador no deve tambm se iniciar por dois pontos, pois nesse caso ele ser tratado como um espao de nomes. O documento XML da figura 86.a apresentou um exemplo de documento XML que pode ser utilizado para a descrio de livros. 6.1.1.3 Atributos Os elementos de um documento XML podem ter Atributos os quais constituem valores que so passados aplicao, mas que no constituem uma parte do contedo do elemento. Atributos em XML so utilizados da mesma maneira que em HTML, ou seja, dentro dos marcadores de abertura e como em XHTML eles obrigatoriamente devem ter seus valores apresentados entre aspas. O exemplo abaixo, tirado da figura 86.a apresenta um exemplo de utilizao de atributos com um elemento vazio.
<price US=39.00 />
Os elementos em um documento podem ter quantos atributos forem necessrios. Entretanto, para que o documento seja bem formado, atributos no podem ser repetidos em uma mesma declarao e dentro das aspas os caracteres <, &, ou no podem aparecer. 6.1.1.4 Entidades Documentos XML podem conter entidades de dois tipos: Entidades Gerais e Entidades Parmetros . Entidades so utilizadas em documentos XML como uma maneira de se associar um nome a uma grande quantidade d e texto. Assim quando se deseja utilizar esse texto basta simplesmente utilizar o nome da entidade. Esse fato facilita tambm modificaes no documento, pois basta modificar uma nica vez o contedo da entidade para que todas as partes do documento nas quais a entidade utilizada sejam modificadas. 6.1.1.5 Sees CDATA Sees CDATA so utilizadas para delimitar blocos de texto que podem ser confundidos com marcadores. Assim, quando por exemplo se deseja ter a linha abaixo,
<to_be_seen>Usar roupa brilhante quando andar no escuro.</to_be_seen>
como contedo de um elemento, se deve escrever:

<elemento> <! [CDATA[ <to_be_seen>Usar escuro.</to_be_seen> ]]> </elemento> roupa brilhante quando andar no
Assim, a totalidade do contedo de elemento no ser tratada como se contivesse marcadores. Conforme citado na apresentao de XHTML, atualmente scripts e folhas de estilo embutidas devem ser apresentados em sees CDATA. Entretanto, muitos navegadores tm problemas quando encontram uma seo CDATA. 6.1.1.6 Comentrios Embora os elementos de documentos devam ter nomes auto-explicativos, sempre uma boa poltica comentar documentos. Em XML a sintaxe utilizada para comentrios a mesma de XHTML,
JCFJ e ELFS
2002
110
ou seja, comentrios so iniciados pela seqncia . A seguir apresenta-se um exemplo.

6.1.1.7 Instrues de Processamento Esses componentes permitem que um documento XML contenha instrues para aplicaes que utilizam os dados XML. Esses componentes tem a seguinte forma:
<?NomedaAplicaoDestino Instrues para a Aplicao>
O nico detalhe que deve ser levado em considerao que o nome da aplicao destino no deve conter nenhuma combinao das letras xml, em maisculas ou minsculas. 6.1.2 Documentos XML Vlidos Conforme mencionado anteriormente, documentos vlidos so documentos bem formados que esto de acordo com uma DTD. Para que se possa verificar se um documento est de acordo com uma DTD necessrio que um analisador seja utilizado. Analisadores capazes de verificar um documento contra uma DTD so denominados Analisadores de Validao (Validating Parsers). Aps a anlise, se o documento no estiver de acordo com as especificaes da DTD o analisador informa um erro. 6.2. Criando DTDs DTDs (Document Type Definitions) so parte da especificao original de XML 1.0. A partir de DTDs se pode normalizar uma apresentao. Assim, se diversas pessoas escrevem documentos XML sobre livros e todas elas respeitam a DTD com a qual, por exemplo, o documento da figura 86.a foi escrito, os documentos que essas pessoas escreverem, aps terem sido analisados e validados, podero ser vistos em qualquer agente XML. DTDs so escritas utilizando uma linguagem denominada Forma Estendida de Backus-Naur (Extended Backus-Naur Form ) ou EBNF. A DTD necessita declarar as regras dos marcadores da linguagem, ou seja, ele necessita efetivamente declarar o que constitui o marcador e o que o marcador significa. De uma maneira prtica, uma DTD deve fornecer detalhes de cada elemento sua ordem e dizer quais atributos eles podem ter. Uma DTD pode ser declarada, na seo de Declarao do Tipo de Documento (Document Type Declaration), internamente ou externamente a um documento. A declarao interna pode ser um pouco confusa, pois o documento dever ser validado contra uma parte dele mesmo. DTDs externas devem ser referenciadas no documento XML. Para o exemplo da figura 86.a, a declarao da DTD criada especificamente para documentos que apresentam livros deve ser:
<DOCTYPE books SYSTEM books.dtd>
Na declarao acima, books o nome do elemento raiz do documento e tambm o nome da DTD. A palavra chave SYSTEM foi utilizada para indicar a localizao da DTD (nesse caso no mesmo diretrio do documento) para que se o sistema precise ele possa validar o documento contra a DTD. A figura 88 apresentada a seguir apresenta-se uma DTD para o exemplo da figura 86.a que trata com a apresentao de livros.
JCFJ e ELFS
agosto/2000
111
<!DOCTYPE <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ATTLIST > ]>
books [ books (book+)> book (title, ISBN, authors, description?, price+)> title (#PCDATA)> authors (author+)> author (#PCDATA)> description (#PCDATA)> price EMPTY> price US CDATA #REQUIRED
Figura 88 DTD para a Apresentao de Livros

A primeira linha da DTD da figura 88 apresenta o nome do elemento raiz, books , que tambm o nome da DTD. A partir da segunda linha encontram-se as declaraes dos elementos que podem ser utilizados no documento XML que utilizar a DTD. As declaraes de elementos so do tipo:
<!ELEMENT nome (contedo)>
Nessa declarao nome indica o nome do elemento enquanto contedo descreve o tipo de dado que pode ser utilizado e quais elementos podem ser aninhados em seu interior. A tabela a seguir apresenta um sumrio dos operadores que podem ser utilizados na descrio do contedo dos elementos.
Smbolo Utilizao
Ordem exata Seleo com qualquer ordem pode ser utilizado em conjunto com +, * e ? + Repetio mnimo de 1 * Repetio ? Opcional () Agrupamento A segunda linha, <!ELEMENT books (book+)>, declara que o elemento raiz, books, deve conter ao menos um elemento book. A terceira linha indica que o elemento book deve conter, na ordem estabelecida, um elemento title, um elemento ISBN, um elemento authors, opcionalmente um elemento description e ao menos um elemento price. A seguir tem-se a declarao individual dos elementos. A linha <!ELEMENT title (#PCDATA)>, indica que o elemento title deve conter dados carter, sendo que isso indicado por #PCDATA. O smbolo # previne que PCDATA seja interpretado como o nome de um elemento. A linha <!ELEMENT authors (author+)>, indica que o elemento authors deve ser comporto de ao menos um elemento author, sendo que a linha seguinte, <!ELEMENT author (#PCDATA)>, indica que o elemento author deve conter dados carter. O elemento opcional description da mesma maneira deve conter dados carter. Conforme se pode observar no documento books.xml da figura 86.a, o elemento price um elemento vazio com um atributo (<price US=39.00 />). Assim, na DTD declarou-se que price um elemento vazio que tem um atributo, atravs da declarao feita na oitava linha da DTD <!ELEMENT price EMPTY>. Atributos de elementos, como nesse caso, so definidos atravs da instruo <!ATTLIST.... Na DTD a declarao completa do atributo :
<!ATTLIST price US CDATA > #REQUIRED
JCFJ e ELFS
2002
112
Todo atributo deve ter trs componentes: um nome (nesse caso US), o tipo de informao que ele aceita (nesse caso dados carter CDATA) e o valor padro (nesse caso no existe valor padro, mas indicado que o atributo de presena obrigatria). A ltima linha ]> simplesmente fecha a DTD. Um detalhe importante que deve ser ressaltado, que mesmo que se tenha um documento XML bem formado para que o mesmo seja validado necessrio que todos os elementos utilizados no documento estejam presentes na DTD. Alm disso, o tipo dos dados utilizados no elemento do documento deve respeitar a definio feita na DTD. 6.3. Utilizando Estilos em Documentos XML At agora se apresentou como criar uma aplicao XML e como criar a D TD para validar os dados que sero utilizados na aplicao. Para que o documento possa ser visualizado de maneira prtica necessrio entretanto que se crie a formatao com a qual os dados sero apresentados, ou seja necessrio que se introduza a maneira com a qual os elementos sero apresentados. Essa formatao feita atravs de folhas de estilo. Um fator importantssimo que deve ser levado em considerao na definio das folhas de estilo se os elementos sero apresentados como blocos, ou seja, com quebras de linha, ou como elementos em linha, ou seja, uns aps os outros na mesma linha. Esta diferenciao feita com a propriedade display. A figura 89 apresenta a folha de estilo, books.css (do mesmo tipo que as apresentadas para documentos XHTML) que ser utilizada na apresentao do documento books.xml do exemplo 86.a. Conforme se pode observar nessa figura, para cada elemento definido na DTD foi criada a formatao da apresentao do elemento, com a definio da fonte utilizada, do estilo, etc.
books.css
title { display:block; font-family: Arial, font-wieght: bold; font-size: 20pt; color: #9370db; text-align: center; } ISBN { display:block; font-family: Arial, font-weight: bold; font-size: 12pt; color: #c71585; text-align: left; } authors { display:inline; font-family: Arial, font-style: italic; font-size: 10pt; color: #9370db; text-align: left; } description { display:block; font-family: Arial, font-size: 12pt; color: #ff1010; text-align: left; }
Helvetica;
Helvetica;
Helvetica;
Helvetica;
Figura 89 Folha de Estilos books.css.
Para que se efetive a apresentao de um documento com uma formatao definida em uma folha de estilos necessrio informar no documento a utilizao da folha de estilos. Isso feito atravs de uma linha do tipo:
JCFJ e ELFS
agosto/2000
113
<?xml:stylesheet href=books.css type=text/css ?>
Nessa linha o atributo href indica a localizao da folha de estilos enquanto o atributo type indica o tipo de folha de estilo que est sendo includa. A figura 90 a seguir apresenta o arquivo books.xml aps a incluso da linha que declara a utilizao da folha de estilo, bem como a visualizao desse documento. Conforme se pode observar, a visualizao muito mais prtica da forma apresentada na figura 90 que na figura 87.a.
<?xml version="1.0"?> <?xml:stylesheet href="books.css" type="text/css" ?> <books> <book> <title>Beginning XHTML</title> <ISBN>1-861003-43-9</ISBN> <authors> <author_name>Frank Boumphrey </author_name> <author_name>Ted Wugofski </author_name> <author_name>Sebastian Schnitzenbaumer </author_name> <author_name>Jenny Raggett</author_name> <author_name>Dave Raggett </author_name> </authors> <description> XHTML is a powerful technology for creating web site content. Learn how to create exciting pages using a technology that combines the benefits of XML with the existing wide coverage of HTML.</description> <price US="$39.99"/> </book> </books>
Figura 90 Apresentao de um Documento XHTML com Folha de Estilo.
JCFJ e ELFS
2002
114
Captulo 7 - Bibliografia
[1] Boumphrey, F. et alli. Beginning XHTML, Wrox Press Ltd., 2000. [2] Spencer, P. Professional XML Design and Implementation, Wrox Press Ltd., 1999. [3] Castro, E. HTML para a World Wide Web, Makron Books, 2000. [4] Oliviero, C. A. J. HTML Orientado por Projeto, rica Editora, 2000.
JCFJ
2002
115
Anexo A Nome das Cores
Anexo B Propriedades das CSS

Apostila XHTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila XHTML

Enviado por

Direitos autorais:

Formatos disponíveis

unesp

Universidade Estadual Paulista Campus de Guaratinguet

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Captulo 1 - Web, HTML e Linguagens de Marcao

Captulo 1 - Web, H T M L e Linguagens de Marcao

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 1 Editor Microsoft FrontPage.

Captulo 1 - Web, H T M L e Linguagens de Marcao

Figura 2 Editor Netscape Composer.

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 3 Transferncia de Informao

Figura 4 Um Documento HTML Bsico

<H1> Este o titulo de nvel 1 </H1>

Figura 5 Elementos e Marcadores

Captulo 1 - Web, H T M L e Linguagens de Marcao

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Captulo 1 - Web, H T M L e Linguagens de Marcao

Captulo 2 - De HTML a XHTML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Marcadores que no tm contedo, tendo somente um efeito estrutural na apresentao da pgina.

Captulo 2 - De HTML a XHTML

Figura 6 Documento XML como uma rvore

Figura 7 Exemplo de Documento XML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Captulo 2 - De HTML a XHTML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 8 Exemplos de um mesmo Documento Escrito em HTML e XHTML.

Figura 9 Apresentao de um mesmo documento HTML e XHTML no IE.

Captulo 2 - De HTML a XHTML

Captulo 3 - XHTML: Conceitos Bsicos

Captulo 3 - XHTML: Conceitos Bsicos

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 10 Marcadores <p>, <div> e <blocknote>.

Figura 11 Marcadores de Ttulos.

Captulo 3 - XHTML: Conceitos Bsicos

Figura 12 Marcadores <preserve>.

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

<strong> </strong> <var> </var>

Captulo 3 - XHTML: Conceitos Bsicos

Figura 13 Utilizao dos Elementos Descritivos em Linha Bsicos de XHTML

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Comentrio e Semntica Embutida

Figura 14 Utilizao dos Elementos de Estilo em Linha Bsicos de XHTML.

Captulo 3 - XHTML: Conceitos Bsicos

Figura 15 Exemplo de Listas no Ordenadas.

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 16 Exemplo de Listas no Ordenadas de Diversos Nveis

Captulo 3 - XHTML: Conceitos Bsicos

Figura 17 Exemplo de Listas Ordenadas de Dois Nveis

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 18 Exemplo de Listas de Definio

Captulo 3 - XHTML: Conceitos Bsicos

style=[propriedade da folha de estilos]:[valor da propriedade]; propriedade da folha de estilos]:[valor da propriedade]; .....

A figura 19 abaixo apresenta um exemplo de utilizao de estilos de folhas de estilo em marcadores.

Figura 19 Exemplo Utilizao de Atributos Universais

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Captulo 3 - XHTML: Conceitos Bsicos

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

Figura 20 Exemplo de Ligaes Relativas no Mesmo Diretrio.

Captulo 3 - XHTML: Conceitos Bsicos

Figura 21 Exemplo de Ligaes Relativas em Diretrios Diferentes.

UNESP/FEG Curso de Especializao em Informtica Empresarial Apostila XHTML

<frameset rows=1, 3, 1*>