Escolar Documentos
Profissional Documentos
Cultura Documentos
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
!
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" />
"
ELFS, 2003
Linguagem XHTML
"
"
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
!
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
!
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
#
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
!
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
!
ELFS, 2003
34
Linguagem XHTML
"
ELFS, 2003
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>
ELFS, 2003
37
Linguagem XHTML
!
ELFS, 2003
38
Linguagem XHTML
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
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.
!
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>
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
ELFS, 2003
51