2. Linguagem XHTML! Uma página XHTML pode conter ligações para outros documentos conforme vimos na aula passada. Mas um documento XHTML pode conter também ligações para outros objetos, como folhas de estilo, um applet Java ou objetos embutidos na própria página. O elemento <applet>! Applets são pequenos programas escritos em Java, que podem ser incluídos em uma página XHTML. O elemento <applet> pode conter os seguintes atributos: " codebase: indica o local onde se encontra a classe que implementa o applet " code: nome da classe que implementa o applet " height: altura em pixels que o applet irá ocupar na página " width: largura em pixels que o applet irá ocupar na página " param: parâmetros a serem passados ao applet! Os exemplos de applets apresentados a seguir (inclusive os programas-fonte) podem ser obtidos a partir do seguinte endereço: http://java.sun.com/openstudio/applets/clock.html ELFS, 2003 22
<html><head><title>exemplo de Applet</title></head> <body> <h3>o Applet Clock</h3> <applet codebase="applets/clock/classes" code="javaclock.class" width="150" height="150"> <param name="delay" value="100"> <param name="link" value="http://java.sun.com"> <param name="border" value="5"> <param name="nradius" value="80"> <param name="cfont" value="arial BOLD 18"> <param name="bgcolor" value="ffffff"> <param name="shcolor" value="ff0000"> <param name="mhcolor" value="0000ff"> <param name="hhcolor" value="0000ff"> <param name="ccolor" value="dddddd"> <param name="ncolor" value="000000"> </applet> </body> aula02_01.htm ELFS, 2003 23
<html><head><title>exemplo de Applet</title></head> <body> <h3>o Applet Banner</h3> <applet codebase="applets/banner/classes" code="javabanner.class" width="234" height="60"> <param name="delay" value="100"> <param name="bgcolor" value="ffffff"> <param name="length" value="3"> <param name="number" value="5"> <param name="item0" value="adt.gif http://www.adtmag.com/"> <param name="item1" value="dev.gif http://www.developer.com"> <param name="item2" value="dr.gif http://www.ddj.com"> <param name="item3" value="jdj.gif http://www.javadevelopersjournal.com"> <param name="item4" value="pc.gif http://www.zdnet.com/pcweek/ibd/main.html"> </applet> </body> aula02_02.htm ELFS, 2003 24
O elemento <object>! Com o marcador <object> é possível embutir diversos objetos em um documento XHTML, como: um arquivo de imagem, um arquivo multimídia, um arquivo texto, ou um arquivo referente a uma outra página. Exemplo: <html> <head> <title>objetos Embutidos</title> </head> <body> <h2>texto Embutido</h2> <object data="object.txt" width="300" height="100"></object> <h2>página Embutida</h2> <object data="aula02_01.htm" width="300" height="200"></object> </body> aula02_03.htm ELFS, 2003 25
Imagens! Com o marcador <img> é possível embutir um arquivo de imagem a um documento XHTML. Este é um elemento vazio, mas que tem dois atributos obrigatórios: src, que indica o endereço do arquivo de imagem e alt, que corresponde a um texto a ser mostrado caso a imagem não possa ser apresentada. Exemplo: <img src="monalisa.jpg" alt="monalisa" />! Outros atributos podem ser usados para melhorar a visualização de imagens em páginas XHTML. Alguns destes atributos são os seguintes: " width e height: largura e altura (em pixels) que a imagem irá ocupar. " vspace e hspace: definem o valor (em pixels) a ser deixado ao redor da imagem. Esses atributos são incluídos na linguagem apenas para garantir a compatibilidade com versões anteriores, devendo ser substituídos por propriedades de folhas de estilo (margin-left, margin-right, margin-top e margin-bottom). " align: posição da imagem em relação ao texto que a contém (os valores possíveis são: top, middle, bottom, left, right). Também trata-se de um atributo que deve ser substituído por propriedade de folhas de estilo. ELFS, 2003 26
" border: define a espessura da borda em torno da imagem. Também trata-se de um atributo que deve ser substituído por propriedade de folhas de estilo (border-width). " ismap e usemap: mapear partes da imagem como fontes de ligação. O atributo usemap é usado quando o código de mapeamento da imagem está na página do cliente e ismap é usado quando o código está no servidor. Exercício. A página ao lado foi produzida com o elemento <img src= monalisa.jpg alt= Monalisa /> com os seguintes atributos adicionais: align="left, border="3, width="64, height="76 e style="margin-right:20px;marginbottom:5px". Reproduzir esta página e experimentar outros valores para os atributos adicionais para verificar o efeito obtido. aula02_04.htm ELFS, 2003 27
! O atributo usemap permite usar o código de mapeamento de uma imagem (áreas específicas da imagem) como âncoras de ligações. O mapeamento de imagens é feito através da definição de coordendas internas (em pixels) da imagem. Cada área a ser mapeada pode ter um dos seguintes formatos: " retângulo: x-sup-esq,y-sup-esq,x-inf-dir,y-inf-dir " círculo: x-centro,y-centro,raio " polígono: x1,y1,x2,y2,x3,y3,...! Para definir as áreas de uma imagem é preciso usar um programa que apresente as coordenadas internas da imagem (paint, por exemplo). Existem programas específicos para mapeamento de imagens e para criar GIFs animados (ver, por exemplo, www.coffeecup.com).! O mapeamento de imagens é feito com o elemento area, que pode ter os seguintes atributos: " shape: formato da área (circle, rectangle, polygon); " coords: coordenadas da área, segundo os formatos acima; " href: endereço do recurso a ser acionado quando a área for clicada; " alt: texto a ser exibido quando o mouse estiver sobre a área; " tabindex: a ordem de acesso a cada uma das áreas a partir da tecla tab; " accesskey: tecla de acesso (alt+tecla) para a área ELFS, 2003 28
Exercício: Completar o documento XHTML abaixo com os valores dos atributos coords e href para exibir os nomes dos estados de cada região. <html> <head><title>imagens</title></head> <body> <h2>regiões do Brasil</h2> <img src="brasil.gif" alt="brasil" usemap="#regioes" /> <map id="regioes"> <area shape="polygon" coords="..." href="***.htm" alt="norte" /> <area shape="polygon" coords="..." href="***.htm" alt="centro-oeste" /> <area shape="polygon" coords="..." href="***.htm" alt="nordeste" /> <area shape="polygon" coords="..." href="***.htm" alt="sudeste" /> <area shape="polygon" coords="..." href="***.htm" alt="sul" /> </map> </body> aula02_05.htm ELFS, 2003 29
! Outros atributos do elemento area: " target: a ser utilizado para indicar uma ligação em um frame diferente; " onfocus: a ser usado em scripts (quando a área receber o foco); " onblur: a ser usado em scripts (quando a área perder o foco). Tabelas! Todas as tabelas em páginas XHTML seguem uma estrutura bem definida, com um título e um cabeçalho onde é indicado o conteúdo de cada coluna da tabela. Os marcadores usados para a construção de tabelas são os seguintes: " table: engloba toda a estrutura da tabela, podendo conter os seguintes elementos: # caption: título da tabela (opcional) # thead, tfoot, tbody: descrição do cabeçalho, do rodapé e do corpo da tabela. São elementos opcionais, mas se presentes devem aparecer nesta ordem. # tr: define as colunas da tabela e deve estar contido no elemento table ou nos elementos thead, tfoot e tbody, caso estes elementos estejam presentes. Pode conter apenas os elementos th e td. # th, td: representam células individuais da tabela. Devem estar sempre contidos no elemento tr. ELFS, 2003 30
! Exemplo: # O elemento th é usado para células de cabeçalho e o texto destas células é apresentado, normalmente, centralizado e em negrito. O elemento td é usado em células normais da tabela. Estes dois elementos podem conter, além de texto, qualquer elemento XHTML. aula02_06.htm <html> <head> <title>tabelas</title> </head> <body> <table border="1"> <caption>uma Tabela Simples</caption> <tr><th>produto</th><th>preço</th></tr> <tr><td>banana nanica</td><td>3,00</td></tr> <tr><td>laranja pêra</td><td>5,50</td></tr> </table> </body> ELFS, 2003 31
! Exercício. Completar o documento XHTML a seguir para produzir a tabela mostrada abaixo. aula02_07.htm <html> <head> <title>tabelas</title> </head> <body> <table border="1"> <caption>...</caption> <thead style="background-color:..."> <tr><th>...</th><th>...</th></tr> </thead> <tfoot align="..."...>... </tfoot> <tbody...>... </tbody> </table> </body> ELFS, 2003 32
! Divisão de Linhas e Colunas: Uma tabela XHTML pode ter linhas (ou colunas) de tamanhos diferentes (com mais ou menos células). Para isto deve-se indicar o número de linhas (ou colunas) a serem mescladas, com os elementos: " <td rowspan= inteiro > " <td colspan= inteiro >! Exemplo: aula02_08.htm <html> <head><title>tabelas</title></head> <body> <table border="1" style="font-size:18"> <tr align="center"><td colspan="2">aluno</td><td>nota</td></tr> <tr><td>001</td><td>zezinho</td><td align="center">8,1</td></tr> <tr><td>002</td><td>luizinho</td><td align="center">8,8</td></tr> <tr><td>003</td><td>huguinho</td><td align="center">8,0</td></tr> </table> </body> ELFS, 2003 33
! Exercício: Elaborar documentos XHTML para produzir as tabelas a seguir: aula02_09.htm! Aplicação de Estilos em Tabelas: pode ser feito por atributos ou com a utilização de folhas de estilo. " Bordas: Três atributos XHTML tratam com as linhas que definem as bordas de uma tabela: border, frame e rule. Estes atributos podem ser usados apenas no elemento <table> # border: especifica (valor em pixels) a espessura da borda # frame: especifica uma moldura para a tabela. Valores possíveis: void (nenhuma moldura), above, below, lhs, rhs, hsides, vsides, box ou border (moldura completa). # rules: especifica as linhas entre as células. Valores possíveis: none (nenhuma linha), all, groups (linhas em torno dos elementos ELFS, 2003 34
<thead>, <tfoot> e <tbody>), rows, cols. " Propriedades de Folhas de Estilo para Bordas: border-style, borderwidth, border-color, border-top, border-top-width, e muitas outras combinações. A sintaxe geral é a seguinte: border-***:valor1 valor2 valor3 valor4 Até 4 valores podem ser atribuídos. Se um único valor for atribuído: valor1 será adotado nas quatro bordas (superior, inferior, esquerda, direita). Se dois valores forem atribuídos: valor1 será usado nas bordas superior e inferior e valor2 será usado nas bordas esquerda e direita. Com três valores: valor1 (borda superior), valor2 (bordas laterais), valor3 (borda inferior). Exemplo: ELFS, 2003 35
aula02_10.htm <html> <head> <title>tabelas</title> <style type="text/css"> caption { background-color:yellow; } td { border-style:solid; border-width:10pt 5pt; border-color:red green blue cyan; } </style> </head> <body> <table border="3" rules="groups" style="font-size:18"> <caption>bordas com Atributos e Folha de Estilo</caption> <thead style="background-color:silver"> <tr><th>disciplinas</th><th>alunos</th></tr> </thead> ELFS, 2003 36
<tfoot style="backgroud-color:teal"> <tr><td>ênfase</td><td>computação Aplicada</td></tr> </tfoot> <tbody> <tr><td>programação para a Internet</td> <td>08</td></tr> <tr><td>desenvolvimento de Aplicações para a Internet</td> <td>10</td>></tr> </tbody> </table> </body>! Espaçamento e Margens em Tabelas: espaçamento é a distância entre células individuais e margem é o espaço entre o conteúdo e a borda de uma célula. Os atributos cellspacing e cellpadding são usados para especificar um valor (em pixels) para o espaçamento e a margem.! Exercícios. Analise o efeito de: a) incluir o atributo cellspacing= 20 no elemento <table> da página acima. b) incluir o atributo cellpadding= 20 no elemento <table> da página acima. ELFS, 2003 37
! Espaçamento com Propriedades de Folhas de Estilo: as seguintes propriedades podem ser utilizados para espaçamento em elementos <td>: paddingleft, padding-right, padding-top, padding-bottom. É possível utilizar também a propriedade padding:valor1 valor2 valor3 valor4, como no caso de border.! Outros Atributos e Propriedades de Estilo para Tabelas " Cor de fundo: atributo bgcolor e propriedade background-color. " Altura e Largura: atributos e propriedades height e width. " Alinhamento em relação ao documento: atributo align e propriedade float (valores possíveis do atributo e da propriedade: left e right). " Alinhamento entre tabelas: normalmente as tabelas são interpretadas como um bloco de texto e apresentadas umas abaixo das outras. Com o atributo align ou com a propriedade float também é possível alinhar tabelas umas ao lado das outras. " Tabelas aninhadas: como o elemento <td> pode conter qualquer outro elemento XHTML, é possível que uma célula de uma tabela contenha uma outra tabela. " Alinhamento do texto nas células: para o alinhamento horizontal pode-se usar o atributo align (com valores: left, right, center, justify) dentro dos elementos <tr>, <td> ou <th>. ELFS, 2003 38
Para o alinhamento vertical deve-se usar o atributo valign, com valores: top, middle, bottom e baseline.! Exemplo: ELFS, 2003 39
aula02_11.htm <html> <head> <title>tabelas</title> </head> <body> <table width="30%" border="1" align="left"> <thead style="background-color:red"> <tr><th>time</th><th>posição no Campeonato</th></tr> </thead> <tfoot style="background-color:yellow"> <tr><td>provável Campeão</td> <td align="center" valign="middle">são Paulo</td></tr> </tfoot> <tbody> <tr><td width="70%" style="padding-left:20pt">cruzeiro</td> <td align="center">1</td></tr> <tr><td style="padding-left:20pt">são Paulo</td> <td align="center">2</td></tr> <tr><td style="padding-left:20pt">santos</td> <td align="center">3</td></tr> <tr><td style="padding-left:20pt">internacional</td> <td align="center">7</td></tr> ELFS, 2003 40
<tr><td style="padding-left:20pt">corinthians</td> <td align="center">9</td></tr> </tbody> </table> <div> Há um novo formato no campeonato deste ano. O sistema de pontos corridos, considerado por muitos como o mais justo, foi adotado tanto para a Série A como para a B. Com isso, o campeão será conhecido após as 46 rodadas, sem mais a disputa de mata-matas. Serão nove meses de Brasileiro, enquanto na última temporada o torneio agitou o país de apenas de agosto a dezembro. Além da mudança no formato, o Nacional deste ano traz grandes novidades também entre os participantes. Palmeiras e Botafogo, que já foram campeões do Brasil, e Lusa, tradicional equipe de São Paulo, disputarão a Série B. Além destes, o Gama foi o outro rebaixado para a segunda divisão em 2002. Por outro lado, Criciúma e Fortaleza conseguiram o acesso para a elite. O campeão Santos defende o título conquistado no ano passado. A equipe da Baixada surpreendeu o Brasil e, com um futebol atrevido, deixou para trás o favorito São Paulo, o tradicional Grêmio e derrotou, nos dois jogos da final, o Corinthians. </body> ELFS, 2003 41
Frames (Quadros)! Através da utilização de frames pode-se fazer com que uma única página seja subdividida em outras páginas logicamente interligadas. Como tabelas, os frames podem ser usados também para definir a estrutura de uma página, onde cada frame contém uma seção definida da página. Na linguagem XHTML a utilização de frames não é encorajada, embora exista um DTD especial para isto (Frameset DTD).! O elemento <frameset> é utilizado na definição das seções que irão compor a página. O elemento <frame> é usado para definir o conteúdo de cada seção.! Exemplo: aula02_12.htm <html> <head> <title>página com Frames</title> </head> <frameset cols="*,*" rows="*,*"> <frame src="aula02_01.htm" /> <!-- Primeira seção --> <frame src="aula02_02.htm" /> <!-- Segunda seção --> <frame src="aula02_04.htm" /> <!-- Terceira seção --> <frame src="aula02_06.htm" /> <!-- Quarta seção --> </frameset> ELFS, 2003 42
ELFS, 2003 43
! No elemento <frameset>, dois atributos: cols e rows definem a apresentação das seções. Outras atributos possíveis são: id, class, style, onload e onunload. Os valores dos atributos cols e rows podem ser expressos como: " pixels: indicam dimensões fixas. " relações: indicam dimensões proporcionais uma em relação às outras. " porcentagens: indicam dimensões proporcionais em relação à janela. " curinga: o caractere * é usado para indicar um curinga; apenas um curinga presente: o curinga representa o restante da dimensão ; mais de um curinga presente: define o número de colunas ou linhas de mesmas dimensões.! Exemplos: " <frameset cols= 90,150,* > duas colunas fixas e a terceira ocupando o restante da página " <frameset cols= 75,150,75 > três colunas fixas " <frameset cols= 1*,2*,1* > colunas proporcionais umas às outras " <frameset cols= 30%,55%,15% > colunas proporcionais à janela ELFS, 2003 44
! Para cada seção declarada pelos atributos cols e rows deve existir a declaração de um elemento <frame>, que pode conter os seguintes atributos: " src: URL do documento referente ao conteúdo do frame; " name: nome do frame (importante para o atributo target); " scrolling: indica a presença ou não de barras de rolagem, se necessário; os valores possíveis são: yes (padrão) ou no. " frameborder: define a espessura (em pixels) da borda do frame; o valor padrão é 1. " noresize: usado para proibir o usuário de redimensionar o frame; neste caso deve-se definir: noresize= noresize ; " marginheight e marginwidth: espaçamento (em pixels) entre as bordas superior e inferior e as bordas esquerda e direita de um frame em relação a seu conteúdo.! Frames Aninhados: Um frame pode conter outros frames, bastando para isto incluir um novo elemento <frameset> (e seus elementos <frame>) em um elemento <frame>.! Apontando para Frames: Normalmente, uma ligação hipertexto em uma página faz com que uma nova página seja carregada na janela que contém a ligação. Com o atributo target esta nova página pode ser carregada em uma ELFS, 2003 45
seção de uma página (ou seja, um frame). O atributo target pode ser utilizado com os seguintes elementos: <a>, <area>, <base>, <form> e <link>. O atributo deve ser usado como: target= nome do frame ou da janela onde o nome do frame ou da janela deve ter sido estabelecido pelo atributo name. O atributo target pode também usar as seguintes palavras-chave: " _self: a nova página será carregada no próprio frame " _blank: a nova página será carregada em uma nova janela " _parent: a nova página será carregada no frame-pai; para uma página com frames simples, o frame-pai é a janela do navegador; para uma página com frames aninhados, o frame-pai é o que aninha os outros frames. " _top: a nova página será carregada na janela do navegador no lugar da página que contém os frames.! Exemplo: Considere a página a seguir, dividida em 5 frames denominados: superior (contendo a página titulo.htm), esquerda (contendo a página brasil.htm), central (contendo a página regioes.htm), direita (contendo a página estados.htm) e inferior (contendo a página rodape.htm). ELFS, 2003 46
ELFS, 2003 47
<html> <head> <title>página com Frames</title> </head> <frameset rows="15%,70%,15%"> <frame name="superior" src="titulo.htm" /> <frameset cols="40%,30%,30%"> <frame name="esquerda" src="brasil.htm" /> <frame name="central" src="regioes.htm" /> <frame name="direita" src="estados.htm" /> </frameset> <frame name="inferior" src="rodape.htm" /> </frameset> aula02_13.htm <html> <head> <title>mapa do Brasil</title> </head> <body> <h1> <div style="color:blue" align="center"> Regiões e Estados Brasileiros</div> </h1> </body> titulo.htm ELFS, 2003 48
<html> <head> <title>brasil</title> </head> <body> <img src="brasil.gif" alt="mapa do Brasil" /> </body> brasil.htm regioes.htm <html> <head> <title>regiões do Brasil</title> </head> <body> <h2> <div><a href="br_centroeste.htm" target="direita"> Região Centro-Oeste</a></div> <div><a href="br_nordeste.htm" target="direita"> Região Nordeste</a></div> <div><a href="br_norte.htm" target="direita">região Norte</a></div> <div><a href="br_sudeste.htm" target="direita">região Sudeste</a></div> <div><a href="br_sul.htm" target="direita">região Sul</a></div> </h2> </body> ELFS, 2003 49
<html> <head> <title>estados do Brasil</title> </head> <body> </body> estados.htm rodape.htm <html> <head> <title>mapa do Brasil</title> </head> <body> <div style="color:red;background-color:silver" align="right"> <i><h3>veja como é fácil organizar uma página com frames</i></h3></div> </body>! Frames Embutidos: Frames também pode ser embutidos diretamente em uma página XHTML. Para isto, basta usar o elemento <iframe>. O exemplo a seguir ilustra esta possibilidade. Note que um texto qualquer pode ser incluído entre os marcadores de abertura e fechamento para ser exibido caso o navegador não entenda o elemento <iframe>. ELFS, 2003 50
<html> <head><title>página com Frame Embutido</title></head> <body> <p>este parágrafo aparece antes do frame.</p> <iframe src="aula02_04.htm"> Infelizmente, um frame sobre uma famosa pintura de Leonardo da Vinci não pôde ser exibido. </iframe> <p>este parágrafo aparece depois do frame.</p> </body> aula02_14.htm! Alguns dispositivos web (como handhelds e celulares, por exemplo) podem não ser capazes de interpretar frames. Nestes casos, deve-se incluir em documentos XHTML o elemento <noframe> que apresenta um conteúdo alternativo ao conteúdo dos frames.! Exemplo: <frameset...>... <noframe> <h3>seu equipamento não entende frames.</h3> </noframe> </frameset> ELFS, 2003 51