javascript - aula02

ELFS, 2003 22

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 23

Linguagem XHTML

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

</html>aula02_01.htm

ELFS, 2003 24

Linguagem XHTML

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


ELFS, 2003 25

Linguagem XHTML

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>


ELFS, 2003 26

Linguagem XHTML

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:

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

<img src="monalisa.jpg" alt="Monalisa" />

ELFS, 2003 27

Linguagem XHTML

" 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;margin-bottom:5px". Reproduzir esta página e experimentar outros valores para os atributos adicionais para verificar o efeito obtido.

aula02_04.htm

ELFS, 2003 28

! 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

Linguagem XHTML

ELFS, 2003 29

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.

Linguagem XHTML

<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" />


href="***.htm" alt="Centro-Oeste" />


href="***.htm" alt="Nordeste" />


href="***.htm" alt="Sudeste" />


href="***.htm" alt="Sul" />

</map>

</body>

</html> aula02_05.htm

ELFS, 2003 30

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

Linguagem XHTML

ELFS, 2003 31

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

! Exemplo:

Linguagem XHTML

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

</html>

aula02_06.htm

ELFS, 2003 32

! Exercício. Completar o documento XHTML a seguir para produzir a tabela mostrada abaixo.

Linguagem XHTML

<html>

<head>


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

</html>

aula02_07.htm

ELFS, 2003 33

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

Linguagem XHTML

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

</html>

aula02_08.htm

ELFS, 2003 34

! Exercício: Elaborar documentos XHTML para produzir as tabelas a seguir:

! 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

Linguagem XHTML

aula02_09.htm

ELFS, 2003 35

<thead>, <tfoot> e <tbody>), rows, cols." Propriedades de Folhas de Estilo para Bordas: border-style, border-

width, 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:

Linguagem XHTML

ELFS, 2003 36

Linguagem XHTML

<html>

<head>


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

aula02_10.htm

ELFS, 2003 37

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

Linguagem XHTML

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

</html>

ELFS, 2003 38

! Espaçamento com Propriedades de Folhas de Estilo: as seguintes propriedades podem ser utilizados para espaçamento em elementos <td>: padding-left, 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>.

Linguagem XHTML

ELFS, 2003 39

Para o alinhamento vertical deve-se usar o atributo valign, com valores: top, middle, bottom e baseline.

! Exemplo:

Linguagem XHTML

ELFS, 2003 40

Linguagem XHTML

<html>

<head>


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


<tr><td style="padding-left:20pt">Santos</td>


<tr><td style="padding-left:20pt">Internacional</td>


aula02_11.htm

ELFS, 2003 41

Linguagem XHTML

<tr><td style="padding-left:20pt">Corinthians</td>


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

</html>

ELFS, 2003 42

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:

Linguagem XHTML

<html>

<head>

<title>Página com Frames</title>

</head>

<frameset cols="*,*" rows="*,*">

<frame src="aula02_01.htm" /> 

<frame src="aula02_02.htm" /> 

<frame src="aula02_04.htm" /> 

<frame src="aula02_06.htm" /> 

</frameset>

</html>

aula02_12.htm

ELFS, 2003 43

Linguagem XHTML

ELFS, 2003 44

! 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

Linguagem XHTML

ELFS, 2003 45

! 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

Linguagem XHTML

ELFS, 2003 46

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

Linguagem XHTML

ELFS, 2003 47

Linguagem XHTML

ELFS, 2003 48

Linguagem XHTML

<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></html>

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>

</html>

titulo.htm

ELFS, 2003 49

Linguagem XHTML

<html><head><title>Brasil</title>

</head><body><img src="brasil.gif" alt="mapa do Brasil" />

</body></html>

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

</html>

regioes.htm

ELFS, 2003 50

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

Linguagem XHTML

<html><head><title>Estados do Brasil</title>

</head><body></body>

</html>

estados.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></html>

rodape.htm

ELFS, 2003 51

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

Linguagem XHTML

<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 pinturade Leonardo da Vinci não pôde ser exibido.

</iframe><p>Este parágrafo aparece depois do frame.</p>

</body></html>

aula02_14.htm

<frameset ...>...<noframe><h3>Seu equipamento não entende frames.</h3></noframe></frameset>

javascript - aula02

Documents