Você está na página 1de 30

2.

Linguagem XHTML
!

Uma pgina XHTML pode conter ligaes para outros documentos conforme
vimos na aula passada. Mas um documento XHTML pode conter tambm
ligaes para outros objetos, como folhas de estilo, um applet Java ou objetos
embutidos na prpria pgina.

O elemento <applet>
! Applets so pequenos programas escritos em Java, que podem ser includos
em uma pgina 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 pgina
"
width: largura em pixels que o applet ir ocupar na pgina
"
param: parmetros a serem passados ao applet
!

Os exemplos de applets apresentados a seguir (inclusive os programas-fonte)


podem ser obtidos a partir do seguinte endereo:
http://java.sun.com/openstudio/applets/clock.html

ELFS, 2003

22

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>
ELFS, 2003

aula02_01.htm
23

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

aula02_02.htm

ELFS, 2003

24

Linguagem XHTML
O elemento <object>
! Com o marcador <object> possvel
embutir diversos objetos em um
documento XHTML, como: um arquivo de
imagem, um arquivo multimdia, um
arquivo texto, ou um arquivo referente a
uma outra pgina. Exemplo:
<html>
<head>
<title>Objetos Embutidos</title>
</head>
<body>
<h2>Texto Embutido</h2>
<object data="object.txt"
width="300"
height="100"></object>
<h2>Pgina Embutida</h2>
<object data="aula02_01.htm"
width="300"
height="200"></object>
</body>
</html>

aula02_03.htm

ELFS, 2003

25

Linguagem XHTML
Imagens
! Com o marcador <img> possvel embutir um arquivo de imagem a um
documento XHTML. Este um elemento vazio, mas que tem dois atributos
obrigatrios: src, que indica o endereo do arquivo de imagem e alt, que
corresponde a um texto a ser mostrado caso a imagem no possa ser
apresentada. Exemplo:
<img src="monalisa.jpg" alt="Monalisa" />

Outros atributos podem ser usados para melhorar a visualizao de imagens


em pginas XHTML. Alguns destes atributos so os seguintes:
"
"

"

ELFS, 2003

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 so includos na linguagem apenas para garantir
a compatibilidade com verses anteriores, devendo ser substitudos por
propriedades de folhas de estilo (margin-left, margin-right,
margin-top e margin-bottom).
align: posio da imagem em relao ao texto que a contm (os valores
possveis so: top, middle, bottom, left, right). Tambm trata-se
de um atributo que deve ser substitudo por propriedade de folhas de
estilo.
26

Linguagem XHTML
"

"

border: define a espessura da borda em torno da imagem. Tambm


trata-se de um atributo que deve ser substitudo por propriedade de
folhas de estilo (border-width).
ismap e usemap: mapear partes da imagem como fontes de ligao. O
atributo usemap usado quando o cdigo de mapeamento da imagem
est na pgina do cliente e ismap usado quando o cdigo est no
servidor.

Exerccio.
A pgina 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 pgina e
experimentar outros valores para os
atributos adicionais para verificar o
efeito obtido.
aula02_04.htm
ELFS, 2003

27

Linguagem XHTML
!

O atributo usemap permite usar o cdigo de mapeamento de uma imagem


(reas especficas da imagem) como ncoras de ligaes. O mapeamento de
imagens feito atravs da definio de coordendas internas (em pixels) da
imagem. Cada rea a ser mapeada pode ter um dos seguintes formatos:
"
retngulo: x-sup-esq,y-sup-esq,x-inf-dir,y-inf-dir
"
crculo: x-centro,y-centro,raio
"
polgono: 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 especficos 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: endereo 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

Linguagem XHTML
Exerccio: Completar o documento XHTML abaixo com os valores dos atributos
coords e href para exibir os nomes dos estados de cada regio.
<html>
<head><title>Imagens</title></head>
<body>
<h2>Regies 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>
</html>

aula02_05.htm

ELFS, 2003

29

Linguagem XHTML
!

Outros atributos do elemento area:


"
target: a ser utilizado para indicar uma ligao 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 pginas XHTML seguem uma estrutura bem definida,
com um ttulo e um cabealho onde indicado o contedo de cada coluna da
tabela. Os marcadores usados para a construo de tabelas so os seguintes:
"
table: engloba toda a estrutura da tabela, podendo conter os seguintes
elementos:
caption: ttulo da tabela (opcional)
#
thead, tfoot, tbody: descrio do cabealho, do rodap e do
#
corpo da tabela. So 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 clulas individuais da tabela. Devem estar
#
sempre contidos no elemento tr.
ELFS, 2003

30

Linguagem XHTML
#

O elemento th usado para clulas de cabealho e o texto destas


clulas apresentado, normalmente, centralizado e em negrito. O
elemento td usado em clulas normais da tabela. Estes dois
elementos podem conter, alm de texto, qualquer elemento XHTML.

Exemplo:
aula02_06.htm

<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border="1">
<caption>Uma Tabela Simples</caption>
<tr><th>Produto</th><th>Preo</th></tr>
<tr><td>Banana nanica</td><td>3,00</td></tr>
<tr><td>Laranja pra</td><td>5,50</td></tr>
</table>
</body>
</html>

ELFS, 2003

31

Linguagem XHTML
!

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

ELFS, 2003

32

Linguagem XHTML
!

Diviso de Linhas e Colunas: Uma tabela XHTML pode ter linhas (ou colunas)
de tamanhos diferentes (com mais ou menos clulas). Para isto deve-se
indicar o nmero 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>
</html>

ELFS, 2003

33

Linguagem XHTML
!

Exerccio: Elaborar documentos XHTML para produzir as tabelas a seguir:


aula02_09.htm

Aplicao de Estilos em Tabelas: pode ser feito por atributos ou com a


utilizao de folhas de estilo.
"
Bordas: Trs 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 possveis:
#
void (nenhuma moldura), above, below, lhs, rhs, hsides,
vsides, box ou border (moldura completa).
rules: especifica as linhas entre as clulas. Valores possveis: none
#
(nenhuma linha), all, groups (linhas em torno dos elementos

ELFS, 2003

34

Linguagem XHTML

"

ELFS, 2003

<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 combinaes. A sintaxe geral a seguinte:
border-***:valor1 valor2 valor3 valor4
At 4 valores podem ser atribudos. Se um nico valor for atribudo:
valor1 ser adotado nas quatro bordas (superior, inferior, esquerda,
direita). Se dois valores forem atribudos: valor1 ser usado nas bordas
superior e inferior e valor2 ser usado nas bordas esquerda e direita.
Com trs valores: valor1 (borda superior), valor2 (bordas laterais),
valor3 (borda inferior).
Exemplo:

35

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

Linguagem XHTML
<tfoot style="backgroud-color:teal">
<tr><td>nfase</td><td>Computao Aplicada</td></tr>
</tfoot>
<tbody>
<tr><td>Programao para a Internet</td>
<td>08</td></tr>
<tr><td>Desenvolvimento de Aplicaes para a Internet</td>
<td>10</td>></tr>
</tbody>
</table>
</body>
</html>

Espaamento e Margens em Tabelas: espaamento a distncia entre clulas


individuais e margem o espao entre o contedo e a borda de uma clula.
Os atributos cellspacing e cellpadding so usados para especificar um
valor (em pixels) para o espaamento e a margem.
Exerccios. Analise o efeito de:
a) incluir o atributo cellspacing=20 no elemento <table> da pgina
acima.
b) incluir o atributo cellpadding=20 no elemento <table> da pgina
acima.

ELFS, 2003

37

Linguagem XHTML
!

Espaamento com Propriedades de Folhas de Estilo: as seguintes propriedades


podem ser utilizados para espaamento em elementos <td>: paddingleft, padding-right, padding-top, padding-bottom. possvel
utilizar tambm 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 relao ao documento: atributo align e propriedade
float (valores possveis do atributo e da propriedade: left e right).
"
Alinhamento entre tabelas: normalmente as tabelas so interpretadas
como um bloco de texto e apresentadas umas abaixo das outras. Com o
atributo align ou com a propriedade float tambm possvel alinhar
tabelas umas ao lado das outras.
"
Tabelas aninhadas: como o elemento <td> pode conter qualquer outro
elemento XHTML, possvel que uma clula de uma tabela contenha uma
outra tabela.
"
Alinhamento do texto nas clulas: 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

Linguagem XHTML

Para o alinhamento vertical deve-se usar o atributo valign, com valores:


top, middle, bottom e baseline.
Exemplo:

ELFS, 2003

39

Linguagem XHTML
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>Posio no Campeonato</th></tr>
</thead>
<tfoot style="background-color:yellow">
<tr><td>Provvel Campeo</td>
<td align="center" valign="middle">So 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">So 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

Linguagem XHTML
<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 Srie
A como para a B. Com isso, o campeo ser conhecido aps as 46 rodadas,
sem mais a disputa de mata-matas. Sero nove meses de Brasileiro,
enquanto na ltima temporada o torneio agitou o pas de apenas de agosto
a dezembro. Alm da mudana no formato, o Nacional deste ano traz grandes
novidades tambm entre os participantes. Palmeiras e Botafogo, que j
foram campees do Brasil, e Lusa, tradicional equipe de So Paulo,
disputaro a Srie B. Alm destes, o Gama foi o outro rebaixado para a
segunda diviso em 2002. Por outro lado, Cricima e Fortaleza conseguiram
o acesso para a elite. O campeo Santos defende o ttulo conquistado no
ano passado. A equipe da Baixada surpreendeu o Brasil e, com um futebol
atrevido, deixou para trs o favorito So Paulo, o tradicional Grmio e
derrotou, nos dois jogos da final, o Corinthians.
</body>
</html>

ELFS, 2003

41

Linguagem XHTML
Frames (Quadros)
! Atravs da utilizao de frames pode-se fazer com que uma nica pgina seja
subdividida em outras pginas logicamente interligadas. Como tabelas, os
frames podem ser usados tambm para definir a estrutura de uma pgina,
onde cada frame contm uma seo definida da pgina. Na linguagem XHTML
a utilizao de frames no encorajada, embora exista um DTD especial para
isto (Frameset DTD).
! O elemento <frameset> utilizado na definio das sees que iro compor
a pgina. O elemento <frame> usado para definir o contedo de cada
seo.
! Exemplo:
<html>
<head>
<title>Pgina 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>
ELFS, 2003

aula02_12.htm

Primeira seo -->


Segunda seo -->
Terceira seo -->
Quarta seo -->

42

Linguagem XHTML

ELFS, 2003

43

Linguagem XHTML
No elemento <frameset>, dois atributos: cols e rows definem a
apresentao das sees. Outras atributos possveis so: id, class, style,
onload e onunload. Os valores dos atributos cols e rows podem ser
expressos como:
"
pixels: indicam dimenses fixas.
"
relaes: indicam dimenses proporcionais uma em relao s outras.
"
porcentagens: indicam dimenses proporcionais em relao janela.
"
curinga: o caractere * usado para indicar um curinga; apenas um
curinga presente: o curinga representa o restante da dimenso; mais de
um curinga presente: define o nmero de colunas ou linhas de mesmas
dimenses.
! Exemplos:
"
<frameset cols=90,150,*>
duas colunas fixas e a terceira ocupando o restante da pgina
"
<frameset cols=75,150,75>
trs colunas fixas
"
<frameset cols=1*,2*,1*>
colunas proporcionais umas s outras
"
<frameset cols=30%,55%,15%>
colunas proporcionais janela
ELFS, 2003
44
!

Linguagem XHTML
!

Para cada seo declarada pelos atributos cols e rows deve existir a
declarao de um elemento <frame>, que pode conter os seguintes
atributos:
"
src: URL do documento referente ao contedo do frame;
"
name: nome do frame (importante para o atributo target);
"
scrolling: indica a presena ou no de barras de rolagem, se
necessrio; os valores possveis so: yes (padro) ou no.
"
frameborder: define a espessura (em pixels) da borda do frame; o
valor padro 1.
"
noresize: usado para proibir o usurio de redimensionar o frame; neste
caso deve-se definir: noresize=noresize;
"
marginheight e marginwidth: espaamento (em pixels) entre as
bordas superior e inferior e as bordas esquerda e direita de um frame em
relao a seu contedo.
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 ligao hipertexto em uma
pgina faz com que uma nova pgina seja carregada na janela que contm a
ligao. Com o atributo target esta nova pgina pode ser carregada em uma

ELFS, 2003

45

Linguagem XHTML
seo de uma pgina (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 tambm usar as seguintes palavras-chave:
"
_self: a nova pgina ser carregada no prprio frame
"
_blank: a nova pgina ser carregada em uma nova janela
"
_parent: a nova pgina ser carregada no frame-pai; para uma pgina
com frames simples, o frame-pai a janela do navegador; para uma
pgina com frames aninhados, o frame-pai o que aninha os outros
frames.
"
_top: a nova pgina ser carregada na janela do navegador no lugar da
pgina que contm os frames.
!

Exemplo: Considere a pgina a seguir, dividida em 5 frames denominados:


superior (contendo a pgina titulo.htm), esquerda (contendo a pgina
brasil.htm), central (contendo a pgina regioes.htm), direita (contendo
a pgina estados.htm) e inferior (contendo a pgina rodape.htm).

ELFS, 2003

46

Linguagem XHTML

ELFS, 2003

47

Linguagem XHTML
<html>
<head>
<title>Pgina 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>

<html>
<head>
<title>Mapa do Brasil</title>
</head>
<body>
<h1>
<div style="color:blue" align="center">
Regies e Estados Brasileiros</div>
</h1>
</body>
</html>
ELFS, 2003

aula02_13.htm

titulo.htm

48

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

brasil.htm

regioes.htm

<html>
<head>
<title>Regies do Brasil</title>
</head>
<body>
<h2>
<div><a href="br_centroeste.htm" target="direita">
Regio Centro-Oeste</a></div>
<div><a href="br_nordeste.htm" target="direita">
Regio Nordeste</a></div>
<div><a href="br_norte.htm" target="direita">Regio Norte</a></div>
<div><a href="br_sudeste.htm" target="direita">Regio Sudeste</a></div>
<div><a href="br_sul.htm" target="direita">Regio Sul</a></div>
</h2>
</body>
</html>
ELFS, 2003

49

Linguagem XHTML
<html>
<head>
<title>Estados do Brasil</title>
</head>
<body>
</body>
</html>

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 fcil organizar uma pgina com frames</i></h3></div>
</body>
</html>

Frames Embutidos: Frames tambm pode ser embutidos diretamente em uma


pgina XHTML. Para isto, basta usar o elemento <iframe>. O exemplo a
seguir ilustra esta possibilidade. Note que um texto qualquer pode ser includo
entre os marcadores de abertura e fechamento para ser exibido caso o
navegador no entenda o elemento <iframe>.

ELFS, 2003

50

Linguagem XHTML
<html>
<head><title>Pgina com Frame Embutido</title></head>
<body>
<p>Este pargrafo aparece antes do frame.</p>
<iframe src="aula02_04.htm">
Infelizmente, um frame sobre uma famosa pintura
de Leonardo da Vinci no pde ser exibido.
</iframe>
<p>Este pargrafo aparece depois do frame.</p>
</body>
</html>

aula02_14.htm

Alguns dispositivos web (como handhelds e


celulares, por exemplo) podem no ser capazes
de interpretar frames. Nestes casos, deve-se
incluir em documentos XHTML o elemento
<noframe> que apresenta um contedo
alternativo ao contedo dos frames.
Exemplo:
<frameset ...>
...
<noframe>
<h3>Seu equipamento no entende frames.</h3>
</noframe>
</frameset>

ELFS, 2003

51

Você também pode gostar