- ESCON -

ESCOLA DE CURSOS ONLINE

CNPJ: 11.362.429/0001-45
Av. Antônio Junqueira de Souza, 260 - Centro
São Lourenço - MG - CEP: 37470-000
MATERIAL DO CURSO
HTML AVANÇADO

APOSTILA
MAPAS CLICÁVEIS
MAPAS CLICÁVEIS

Podemos associar links a figuras (através da tag <A HREF=”URL”></A>) de modo que
elas se tornam sensíveis e, quando clicadas, carregam a página especificada no link.
Porém, em várias situações, pode ser interessante associar vários links a uma imagem
de forma que dependendo de qual parte dela foi selecionado o navegador exiba um
documento diferente. O exemplo típico é quando temos uma figura com um mapa de
um país e queremos que a seleção de um estado específico leve a uma página
descrevendo este estado. A este tipo de facilidade da linguagem HTML chamamos de
mapas clicáveis.

SERVER SIDE MAPS

A primeira forma de implementar mapas clicáveis distribui o trabalho de interpretação

de qual documento deve ser carregado, em função da seleção de um ponto da
imagem, entre o cliente e o servidor. Neste caso, o cliente deve ser capaz de poder
determinar o ponto exato da figura que foi selecionado e enviar esta coordenada para
um programa instalado no servidor. Este programa, por sua vez, determina qual URL
está associada àquele ponto e a envia para o cliente, que então finalmente carrega a
página. No servidor há um arquivo associado a cada mapa clicável, onde estão
definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o ponto
esteja dentro desta região. Em geral, é possível definir 3 tipos de região: circulares,
retangulares e poligonais.

Esta forma de selecionar as regiões de uma imagem está caindo em desuso, pois
apresenta várias desvantagens. A primeira delas é que o formato deste arquivo de
definição das áreas é dependente do tipo de servidor. Ao mudar uma página de um
servidor para outro é necessário converter estes arquivos. Outra desvantagem é que
costuma ser necessário pedir a intervenção do administrador do servidor para atualizar
o arquivo. Além disso, a cada seleção é necessário uma consulta ao servidor para
determinar o documento que foi selecionado (o que implica num maior tempo de
resposta).

Outrossim, o usuário não tem nenhuma indicação de qual URL ele está selecionando
pois esta informação está no servidor.

CLIENT SIDE MAPS

Aqui a definição das regiões de uma figura é feita no próprio arquivo HTML. É preciso
que o navegador seja capaz tanto de saber determinar qual ponto da figura foi
selecionado quanto descobrir em qual área está contido este ponto. Para definir as
diferentes regiões da figura e associá-las a diversas URLs são necessárias duas tags:
a tag <MAP> ... </MAP> e a tag <AREA>.

A tag <MAP> ... </MAP> contém as tags que farão a definição de cada uma das áreas.
Esta tag contém apenas o atributo NAME que serve para definir um nome que será
utilizado para associar as regiões a um determinado arquivo de imagem (incluído
através da tag <IMG>). Uma ou mais tags <AREA> são colocadas dentro da tag
<MAP> ... </MAP> para definir cada uma das áreas de uma figura. Há três tipos de
áreas: circulares, retangulares e poligonais. O valor do atributo SHAPE especifica a
forma da área e pode receber os seguintes valores: CIRCLE, RECT e POLY. O atributo
COORDS fornece um conjunto de coordenadas para definir a área. O significado e
número de coordenadas variam de acordo com a forma escolhida, assim:

 CIRCLE: Requer três valores x, y e r; onde (x, y) é o centro do círculo e r o raio.

 RECT: Requer quatro valores x1, y1, x2, y2; onde (x1, y1) é o vértice superior
esquerdo do retângulo e (x2, y2) é o vértice inferior direito.

 POLY: Requer um numero par de valores x1, y1, ... xn, yn; onde cada par (xn,
yn) corresponde a um dos vértices do polígono.

A tag <AREA> deve ter definido o atributo HREF para indicar a URL que deve ser
carregada após a seleção da região. Nada impede que haja sobreposição de áreas.
Quando a coordenada selecionada se encontra na interseção de duas áreas, a região
selecionada será aquela que foi definido primeiro.

Logo após a definição do mapa, é necessário associar uma figura a ele. A tag <IMG>
tem para isso o atributo USEMAP que deve receber como valor o nome do mapa
associado.

Exemplos de criação de mapas clicáveis:

Primeiramente, criaremos 3 arquivos auxiliares: doc1.htm, doc2.htm e doc3.htm

Arquivo doc1.htm

<html>
<head>
<title>Doc 1</title>
</head>
<body>

Documento 1
</body>
</html>

Arquivo doc2.htm

<html>
<head>
<title>Doc 2</title>
</head>
<body>

Documento 2

</body>
</html>

Arquivo doc3.htm

<html>
<head>
<title>Doc 3</title>
</head>
<body>

Documento 3

</body>
</html>

Agora podemos criar os exemplos...

Exemplo 1 - Mapas Clicáveis – Retângulo

<html>
<head>
<title>Exemplo 1</title>
</head>
<body>

<map name="exemplo">
<area shape="rect" coords="10,10, 90,90" href="doc1.htm"> </map>
<img src="quadrado.gif" border="0" width=100 height=100 usemap="#exemplo">
</body>
</html>

Exemplo 2 - Mapas Clicáveis – Círculo

<html>
<head>
<title>Exemplo 2</title>
</head>
<body>

<map name="exemplo">
<area shape="circle" coords="50,50, 32" href="doc2.htm"> </map>
<img src="circulo.gif" width=100 height=100 usemap="#exemplo">
</body>
</html>

Exemplo 3 - Mapas Clicáveis – Polígono

<html>
<head>
<title>Exemplo 3</title>
</head>
<body>

<map name="exemplo">
<area shape="poly" coords="46,20, 40,40, 19,40, 36,53, 29,73, 46,61, 63,73, 57,53,
74,40, 53,40" href="doc3.htm"> </map>
<img src="poligono.gif" border="0" width=100 height=100 usemap="#exemplo">
</body>
</html>

Exemplo 4 - Mapas Clicáveis – Exemplo Completo

<html>
<head>
<title>Exemplo 4</title>
</head>
<body>

<map name="exemplo">
<area shape="rect" coords="50,50,100,100" href="doc1.htm"> <area shape="circle"
coords="29,29, 30" href="doc2.htm"> <area shape="poly" coords="0,80, 29,59, 50,100"
href="doc3.htm">
<area shape="rect" coords="0,0, 100,100"
nohref> </map>
<img src="mapas.gif" border="0" width=100 height=100 usemap="#exemplo">
</body>
</html>

Exemplo 5 - Mapas Clicáveis – Criando um Menu

<html>
<head>
<title>Exemplo 5</title>
</head>
<body>

<map name="menu">
<area shape="rect" coords="0,0, 176,35" href="doc1.htm"> <area shape="rect"
coords="176,0, 342,35" href="doc2.htm"> <area shape="rect" coords="342,0, 520,35"
href="doc3.htm">
</map>
<center>
<img src="menu.gif" border="0" width=520 height=35
usemap="#menu">
</center>

</body>
</html>

FOLHAS DE ESTILO

Até a versão 4 da linguagem HTML, as tags tinham uma definição e comportamento

padrão, que uns poucos atributos podiam modificar. Caso se desejasse criar páginas
cuja aparência fosse ligeiramente diferente do comportamento padrão era necessário
incluir os atributos e tags que definissem essa aparência nos pontos do documento
onde fosse necessário, misturados a própria estrutura do documento. Por exemplo,
num documento cujo texto fosse de cor preta (definida na tag <BODY> através do
atributo TEXT), caso se desejasse cabeçalhos de cor azul marinho seria necessário
envolver cada ocorrência da tag <H1></H1> com a tag <FONT color=navy></FONT>.
Qualquer modificação a ser realizada nesta definição tornava necessário buscar por
todo o documento o que deveria ser modificado.

CASCADE STYLE SHEETS (CSS)

A versão 4 do HTML introduziu o conceito de folhas de estilo (CSS – cascade style

sheets). Através dos estilos é possível definir informações de tipografia, cor, layout e
alinhamento de forma independente da estrutura do documento. Estas informações
podem inclusive estar contidas em um arquivo a parte que pode ser incluído nos
diversos documentos que compõem o site, garantindo assim uma apresentação
comum em todas as páginas. Além das facilidades de formatação já existentes, foram
acrescentadas novas facilidades, o que permite um maior controle do layout.

A folha de estilo é definida por meio da tag <STYLE> ... </STYLE> que deve ser
colocada na seção <HEAD> do documento. Esta tag tem um atributo TYPE que indica
a sintaxe dos estilos contidos na tag. Há dois tipos de sintaxe possível: a sintaxe CSS
(normalmento o padrão, valor ”text/css” do atributo TYPE) e a sintaxe javascript
(reconhecida apenas pelo navegador netscape, valor ”text/javascript” do atributo
TYPE).

O exemplo a seguir faz com que todos os cabeçalhos do tipo 1 (<H1>...</H1>) sejam
escritos utilizando fonte arial e cor azul; e todos os cabeçalhos do tipo 2 (<H2>...</H2>)
sejam escritos utilizando fonte arial e cor verde:

Exemplo 6 – Folhas de Estilo – Modificando Cabeçalhos

<html>
<head>
<title>Exemplo 6</title>

<style type="text/css">
<!--
H1
{
font-family: arial;
color: blue;
}
H2
{
font-family: arial;
color: green;
}
-->
</style>

</head>
<body>

<h1>Texto no elemento H1</h1>

<p>
<h2>Texto no elemento H2</h2>
<p>
<h3>Texto no elemento H3</h3>

</body>
</html>

A colocação dos estilos entre os símbolos <!-- e --> não é obrigatória. A utilização
destes símbolos é ignorada pelos navegadores que conhecem a tag <STYLE>
(explorer e netscape de versão igual ou superior a 4), mas não pelos navegadores de
versões anteriores que desta forma tomam a definição dos estilos como comentário. O
texto do interior da tag <STYLE> não é HTML e segue a seguinte sintaxe:

<STYLE TYPE=”text/css”>
/* comentário */
seletor
{
propriedade: valor;
propriedade: valor valor valor ...;
...
}
seletor, seletor
{
propriedade: valor;
...
}
</style>

PROPRIEDADES DOS ESTILOS

Propriedades são atributos que definem a forma de visualização de uma determinada

tag ou de um grupo de tags. Elas podem ser divididas em grupos, de acordo com sua
função e nem sempre são aplicáveis a qualquer tag. Há pequenas incompatibilidades
entre a forma como os dois principais tipos de navegadores (explorer e netscape) são
afetados por algumas propriedades, que podem, inclusive, ser ignoradas. A
implementação de estilos por parte do Netscape é mais recente e nem tudo que foi
implementado no explorer é reconhecido por esse navegador. Os tipos de propriedades
são as que modificam: fontes de caracteres, cor e imagem de fundo, espaçamento,
características de listas, alinhamento de texto, bordas e posicionamento de camadas.
Veja abaixo algumas propriedades:

DEFINIÇÃO DE VALORES

• Palavras chave – são palavras pré-definidas que podem expressar uma

dimensão (small - pequeno), uma relação (bolder - mais escuro) ou o nome de uma
fonte de caracteres (arial, times, etc). Estas palavras não são case-sensitive.
• Tamanho – é um valor numérico, precedido ou não de sinal e seguido da
indicação da unidade. As unidades mais usadas são: pixel (px) e pontos (pt)
• Percentuais – um valor numérico seguido do simbolo %. Este valor não é
dinâmico e diz respeito apenas ao momento em que o navegador for aplicar estilo. Por
exemplo: 20%.
• Cores – as formas mais comuns de especificar uma cor são: seu nome em inglês
e a definição rgb do html (#rrggbb).

DEFINIÇÃO DE FONTES

Propriedades Valores Possíveis

Font-family Lista de nome de fontes
Font-size Tamanho, percentual, xx-small, x-small, small, medium,
large, xx-large, x-large, larger, smaller
Font-style Normal, oblique, italic
Font-weight Normal, bold, bolder, lighter, 100, 200, 300, 400 (normal),
500, 600, 700, 800, 900
Color Nome da cor, #RRGGBB
Text-decoration None, overline, underline, blink, line-through
Text-transform Capitalize, lowercase, none, uppercase

COR E IMAGEM DE FUNDO

Propriedades Valores Possíveis

background-image Url da imagem
background-color Transparent, nome da cor, #RRGGBB
 ESPAÇAMENTO

Propriedades Valores Possíveis

letter-spacing Tamanho
line-height tamanho, percentual, normal
margin-top tamanho, percentual, auto
margin-bottom tamanho, percentual, auto
margin-right tamanho, percentual, auto
margin-left tamanho, percentual, auto
padding-top tamanho, percentual, auto
padding-bottom tamanho, percentual, auto
padding-right tamanho, percentual, auto
padding-left tamanho, percentual, auto

ALINHAMENTO
DE TEXTO

Propriedades Valores Possíveis

text-indent tamanho, percentual
text-align left, center, right, justify
vertical-align baseline, middle, sub, super, text-bottom, text-top,
percentual

BORDAS

Propriedades Valores Possíveis

border-color cor, #RRGGBB
border-width tamanho, thin, thick, medium
border-style none, dashed, dotted, double, groove, inset, outset,
ridge, solid

SELETOR MÚLTIPLO

É possível atribuir o mesmo valor às propriedades de várias tags de uma só vez,

colocando-as separadas por vírgulas antes da definição das propriedades. No exemplo
a seguir todos os cabeçalhos H1, H2 e H3 e todos os textos em negrito serão escrito
com a cor azul:

Exemplo 7 – Folhas de Estilo – Seletor Múltiplo

<html>
<head>
<title>Exemplo 7</title>

<style type="text/css">
<!--
H1, H2, H3, B
{
color: blue;
}
-->
</style>

</head>
<body>

<h1>Texto no elemento H1</h1>

<p>
<h2>Texto no elemento H2</h2>
<p>
<h3>Texto no elemento H3</h3>
<p>
Texto comum
<p>
<b>Texto em Negrito</b>

</body>
</html>

SELETOR CONTEXTUAL

É possível indicar que as propriedades de uma determinada tag só serão modificadas

quando ela se encontrar no interior de uma ou mais tags container. No exemplo a
seguir todo texto em itálico dentro de cabeçalhos H1 (apenas estes) serão escritos com
a cor verde, os demais textos em itálico terão a cor padrão:

Exemplo 8 – Folhas de Estilo – Seletor Contextual

<html>
<head>
<title>Exemplo 8</title>

<style type="text/css">
<!--
H1 i
{
color: green;
}
-->
</style>

</head>
<body>

<h1>Texto no elemento H1
Normal</h1> <p>
<h1><i>Texto no elemento H1 Italico</i></h1> <p>
<i><h1>Texto no elemento H1 Italico</h1></i> <p>
Notou a diferenca ???

</body>
</html>

COMPARTILHANDO ESTILOS

É possível compartilhar estilos entre vários documentos HTML. Os estilos devem estar
contidos num arquivo com extensão css, que pode ser incluído num documento por
meio da tag <LINK> colocada em sua seção <HEAD>. A utilização de um arquivo de
estilo permite criar uma verdadeira uniformização das páginas de um site. Qualquer
modificação neste arquivo modifica todas as páginas de uma vez. O exemplo a seguir
mostra a sintaxe da tag <LINK> para incluir o arquivo
“estilo.css” num documento HTML:

<link rel=stylesheet type=“text/css” href=“estilo.css”>

O valor do atributo HREF indica o nome do arquivo de estilos e além dele é necessário
definir também os atributos REL e TYPE com os valores mostrados no exemplo. Um
arquivo de estilos não é um arquivo HTML, ou seja, não é necessário nem se deve
colocar os estilos dentro de uma tag <STYLE>.

Primeiro criaremos o arquivo estilo.css, em seguida, veremos um exemplo que usa

este arquivo para definir os estilos.
Arquivo estilo.css

H1
{
color: yellow;
background-color: #60A060;
text-align: center;
}
H2
{
color: red;
font-family: verdana, arial;
}
B /* Negrito */
{
color: #00F000;
font-family: Times, arial;
}
I /* Italico */
{
color: blue;
font-size: 40px;
}
U /* Sublinhado */
{
color: green;
letter-spacing: 3px;
}

Exemplo 9 – Folhas de Estilo – Compartilhando estilos

<html>
<head>
<title>Exemplo 9</title>
<link rel=stylesheet type="text/css" href="estilo.css">
</head>
<body>

Texto normal<p>
<h1>Texto no elemento H1</h1><p>
<h2>Texto no elemento H2</h2><p>
<b>Texto em Negrito</b><p>
<i>Texto em Italico</i><p>
<u>Texto sublinhado</u>
</body>
</html>

CLASSES DE ESTILO

Com o que foi visto até o momento, ao definir o estilo de uma tag, sempre que ela for
utilizada no documento terá o aspecto determinado por este estilo. Muitas vezes
porém, é desejável que uma tag tenha vários aspectos de acordo com o local onde é
utilizada. É possível, portanto, criar diferentes estilos para uma tag criando várias
classes. Para criar uma classe basta acrescentar ao nome da tag no seletor o caracter
ponto („.‟) seguido de um nome para a classe. No exemplo a seguir mostra uma
definição aplicada a todos os cabeçalhos do <H1> (tipo e tamanho de fonte) e as
definições de cor aplicáveis apenas aos cabeçalhos
<H1> pertencentes as classes vermelho (cor de texto vermelha) e verde (cor de texto
verde):
<style>
h1 {
font-family: arial;
font-size: 20pt;
}
h1.vermelho {
color: red;
}
h1.verde {
color: green;
}
</style>

Para aplicar o estilo definido numa classe a uma tag basta utilizar o atributo class,
definindo como valor o nome da classe desejado. No exemplo a seguir o primeiro
cabeçalho estará sujeito a definição de tamanho e tipo de fonte e será escrito na cor
padrão; o segundo e o quarto cabeçalho também estarão sujeitos a definição de
tamanho e tipo de fonte mas serão escritos na cor vermelha; o terceiro, por sua vez,
estará sujeito a definição de tamanho e tipo de fonte mas será escrito na cor verde:

Exemplo 10 – Folhas de Estilo – Classes de estilo

<html>
<head>
<title>Exemplo 10</title>
<style type="text/css">
<!--
h1
{
font-family: arial;
font-size: 20pt;
}
h1.vermelho
{
color: red;
}
h1.verde
{
color: green;
}
-->
</style>
</head>
<body>

<h1>Cabecalho normal</h1>
<h1 class=vermelho>Cabecalho Vermelho</h1> <h1 class=verde>Cabecalho
Verde</h1>
<h1 class=vermelho>Outro Cabecalho Vermelho</h1>

</body>
</html>

CLASSES GENÉRICAS

As classes definidas no exemplo da seção anterior só podem ser aplicadas a tags do

tipo <H1> pois esta tag foi incluída no seletor. É possível criar classes aplicáveis a
qualquer tipo de tag, bastando para isso omitir o nome da tag A utilização de uma
classe genérica também é feita por intermédio do atributo CLASS como mostra o
exemplo a seguir:

Exemplo 11 – Folhas de Estilo – Classes genericas

<html>
<head>
<title>Exemplo 11</title>
<style type="text/css">
<!--
.texto1
{
color: green;
}
.texto2
{
color: blue;
font-family: verdana, arial;
font-size: 20px;
}
-->
</style>

</head>
<body>

<h1 class=texto1>Cabecalho usando a classe texto1</h1> <h1

class=texto2>Cabecalho usando a classe texto2</h1> <p class=texto1>Texto usando a
classe texto1</p>
<p class=texto2>Texto usando a classe texto2</p>

</body>
</html>

PSEUDO-CLASSES

A tag <A> tem algumas classes com nomes pré-definidos, que são associadas a
estados assumidos por esta tag. Estes estados são:

Pseudo-classe Descrição browser

link Link que ainda não foi visitado
active Link no momento que o usuário tem o botão do mouse
pressionado
visited Link que já foi visitado
hover Link no momento em que o usuário passa o cursor do mouse
sobre ele
No caso da pseudo-classe, diferente de uma classe comum, o nome da classe é
separado do nome da tag no seletor pelo caracter „: „. Não existem pseudo-classes
genéricas e, portanto, sempre é necessário indicar o nome da tag.

O exemplo a seguir define a cor azul para os links não visitados, a cor vermelha e
negrito para os links no momento em que o botão do mouse está pressionado sobre o
link, a cor verde para os links que já foram visitados e a cor vermelho escura para
quando o cursor do mouse passar sobre o link (isto só funcionará para o explorer,
sendo ignorado se o navegador for netscape):

Exemplo 12 – Folhas de Estilo – Pseudo-classes

<html>
<head>
<title>Exemplo 12</title>

<style type="text/css">
<!--
A:link { color: blue; }
A:active { color: red; font-weight: bold; }
A:visited { color: green; }
A:hover { color: darkred; }
-->
</style>

</head>
<body>

<a href="doc1.htm">Documento 1</a><p>

<a href="doc2.htm">Documento 2</a><p>
<a href="doc3.htm">Documento 3</a><p>
</body>
</html>

IDENTIFICADORES

Da mesma maneira que uma classe modifica as definições feitas para uma tag, é
possível redefinir, em um determinado elemento do documento, as definições de uma
classe. Isso é feito através da criação de um identificador no interior da tag <STYLE>.
O seletor de um identificador é um nome qualquer antecedido do caracter „#‟. Ao definir
um atributo ID com o nome de um identificador numa tag qualquer, esta tag tem seu
aspecto modificado conforme o estilo definido no identificador. Se nesta tag também
estiver definido o atributo classe, as propriedades definidas no identificador tem
prioridade sobre as definidas na classe. Muito embora os navegadores normalmente
não imponham restrições, um identificador deve ser utilizado em apenas uma tag,
criando uma instância particular desta tag. No exemplo a seguir, os três cabeçalhos
serão desenhados com a fonte arial e o tamanho grande, porém o primeiro será
desenhado em verde (definição da classe), o segundo em azul e o terceiro em amarelo
(definições dos identificadores):

Exemplo 13 – Folhas de Estilo – Identificadores

<html>
<head>
<title>Exemplo 13</title>

<style type="text/css">
<!--
H1.grande
{
font-family: arial;
font-size: large;
color: green;
}
#azul { color: blue; }
#amarelo { color: yellow; }
-->
</style>

</head>
<body>

<h1 class=grande>Grande e verde</h1>

<h1 class=grande id=azul>Grande e azul</h1>
<h1 class=grande id=amarelo>Grande e amarelo</h1>
</body>
</html>

ESTILOS INLINE

Outra forma de redefinir o estilo de uma tag é através do atributo STYLE. Este atributo
pode ser colocado em qualquer tag e tem precedência sobre os estilos definidos
através dos atributos ID e CLASS. O valor do atributo STYLE é uma string contendo
propriedades e valores separados por vírgulas, da mesma forma que é utilizada
associada a um seletor na tag <STYLE>. No exemplo a seguir, o segundo cabeçalho
herda da classe o tipo da fonte, do identificador o tamanho e assume a cor definida no
atributo STYLE e o terceiro é todo definido no atributo STYLE:

Exemplo 14 – Folhas de Estilo – Estilos inline

<html>
<head>
<title>Exemplo 14</title>

<style type="text/css">
<!--
H1.grande
{
font-family: arial;
font-size: xx-large;
color: green;
}
#azul
{
font-size: x-large;
color: blue;
}
-->
</style>

</head>
<body>

<h1 class=grande>Muito grande e verde</h1>

<h1 class=grande id=azul STYLE="color: red;">Grande, verde e com fonte times</h1>
<h1 style="color: blue; text-align:center;">Estilo inline</h1>
</body>
</html>

ESTILOS EM FORMULÁRIOS

Uma forma de tornar sua página ainda mais atraente é aplicar o conceito de estilo aos
formulários. Veja o exemplo:

Arquivo form.css

.texto
{
color: blue;
font-family: verdana, arial;
border-style: solid;
width: 150px;
}
.selecao
{
font-family: verdana, arial;
font-size: 14px;
width: 150px;
}
.textarea
{
background-color: #006000;
color: white;
width: 150px;
}
.botao
{
font-family: verdana, arial;
font-size: 14px;
letter-spacing: 1px;
background-color: #FFFFF0;
}

Exemplo 15 – Folhas de Estilo – Estilos em Formularios

<html>
<head>
<title>Exemplo 8</title>
<link rel=stylesheet type="text/css" href="form.css">
</head>
<body>
<form>
<table>
<tr>
<td>Caixa de Texto</td>
<td><input type="text" class="texto"></td>
</tr>
<tr>
<td>Caixa de Selecao</td>
<td>
<select class="selecao">
<option>Opcao 1</option>
<option>Opcao 2</option>
<option>Opcao 3</option>
</select>
</td>
</tr>
<tr>
<td>Textarea</td>
<td><textarea class="textarea"></textarea></td>
</tr>
<tr>
<tr>
<td>Botao</td>
<td><input type="button" value="Botao" class="botao"></td>
</table>
</form>

</body>
</html>

CAMADAS

Utilizar camadas é uma nova maneira de fazer páginas dinâmicas. Uma camada é uma
seção de uma página da Web que pode ser tratada como uma entidade separada –
pode ser atualizada, reposicionada na tela e tornada oculta ou visível facilmente.
Múltiplas camadas podem aparecer de uma vez e podem até sobrepor-se.
As camadas utilizam atributos de folha de estilo para definir suas propriedades. Você
definir as camadas de diversas maneiras, mas a mais popular é a tag <DIV>.
Para criar uma camada com <DIV>, basta incluir o conteúdo da camada entre as duas
tags de divisão e especificar as propriedades da camada no atributo STYLE da tag
<DIV>. Veja o exemplo:

Exemplo 16 – Camadas – Elemento DIV

<html>
<head>
<title>Exemplo 16</title>
</head>
<body>

<div id="camada1" style="position:absolute; left:100; top:100; background-

color:yellow;">
Exemplo de uma Camada
</div>
</body>
</html>

Podemos utilizar várias propriedades no atributo STYLE da tag <DIV> quando definir
uma camada para configurar sua posição, visibilidade e outros recursos. Veja algumas
propriedades:

• Position – é o principal atributo de posicionamento e pode afetar as propriedades

listadas abaixo.
• Static – define os itens que são colocados para fora na forma normal de html e
não pode ser movido. Este é o padrão.
• Absolute – especifica que um item será posicionado utilizando as coordenadas
que você especifica.
• Relative – define um item que é o deslocamento de uma certa quantidade da
posição static, onde o elemento normalmente teria sido colocado para fora dentro da
página html.
• Left e top – especificam deslocamentos para a posição do item. Para
posicionamento absoluto, essa propriedade se refere à janela principal de navegador
ou a um item que a contém. Para posicionamento relativo, ela se refere à posição static
normal.
• Width e height – são semelhantes aos atributos width e height padrão de html e
especificam uma largura e altura para o item.
• Visibility – especifica se um item é visível. Os valores incluem visible(padrão) e
hidden.
• Background-color – especifica a cor para o segundo plano para a camada
inteira (se contiver texto ou não).

Exemplo 17 – Camadas – Posicionamento

<html>
<head>
<title>Exemplo 17</title>
</head>
<body>

<div id="camada1" style="position:static; left:200; top:200; background-

color:lightgreen">
Camada 1, posicao estatica
</div>
<div id="camada2" style="position:absolute; left:400; top:200; width:100; height:200;
background-color:yellow">
Camada 2, posicao absoluta
</div>
<div id="camada3" style="position:absolute; visibility:hidden">
Camada 3, esta escondida
</div>
<div id="camada4" style="position:relative; left:100; top:200; background-color:lightblue;
width:200; height:100;">
Camada 4, posicao relativa
</div>

</body>
</html>

Para configurar o alinhamento interno de uma camada, basta utilizar a propriedade

align. Veja o exemplo:

Exemplo 18 – Camadas – Alinhamento interno

<html>
<head>
<title>Exemplo 18</title>
</head>

<body>
<b>
<div align="center" id="camada" style="position:relative; background-color:'#FFFFDD'">
<font face="verdana, arial" size=7>UENF</font> <br>
<font face="verdana, arial" size=3> Universidade Estadual do Norte Fluminense </font>
</div>
</b>
</body>
</html>

Iremos agora relembrar os conceitos de camadas e folhas de estilo. Criaremos um

Menu em 3 partes: as duas primeiras veremos nos dois exemplos abaixo, e a última,
trataremos posteriormente utilizando o Javascript.
Esta primeira parte representa um menu simples, com pouca utilização de estilos.

Exemplo 19 – Menu – Criando um Menu Simples

<html>
<head>
<title>Exemplo 19</title>
</head>
<body>
<div id="op0" style="position:absolute; width:'100%'; top:10; background-
color:'#008000'; color:white;">
&nbsp;
</div>
<div id="op1" style="position:absolute; left:50; top:10; color:white;">
Menu 1
</div>
<div id="op2" style="position:absolute; left:200; top:10; color:white;">
Menu 2
</div>
<div id="op3" style="position:absolute; left:350; top:10; color:white;">
Menu 3
</div>
<div id="op0" style="position:absolute; width:'100%'; top:30; height:100;
background-color:'#FFFFF0'; color:'white'"> &nbsp;
</div>
<div id="opcao1" style="position:absolute; left:50; top:30; background-
color:'#FFFFDD';">
<a href="exemplo1.htm">Exemplo 1</a><br> <a href="exemplo2.htm">Exemplo
2</a><br> <a href="exemplo3.htm">Exemplo 3</a><br>
</div>
<div id="opcao2" style="position:absolute; left:200; top:30; background-
color:'#FFFFDD';">
<a href="exemplo4.htm">Exemplo 4</a><br> <a href="exemplo5.htm">Exemplo
5</a><br> <a href="exemplo6.htm">Exemplo 6</a><br>
</div>
<div id="opcao3" style="position:absolute; left:350; top:30; background-
color:'#FFFFDD';">
<a href="exemplo7.htm">Exemplo 7</a><br> <a href="exemplo8.htm">Exemplo
8</a><br> <a href="exemplo9.htm">Exemplo 9</a><br>
</div>
</body>
</html>

Vamos agora adicionar mais estilos ao nosso menu.

Exemplo 20 – Menu – Adicionando estilos ao Menu

<html>
<head>
<title>Exemplo 20</title>
<style>
a
{
font-family:verdana, arial;
font-size:12px;
color:#006000;
font-weight:bold;
text-decoration:none;
height:20px;
}
a:hover
{
font-family:verdana, arial;
font-size:12px;
color:#006000;
font-weight:bold;
text-decoration:underline;
height:20px;
</style>
</head>
<body>
<div id="op0" style="position:absolute; width:'100%'; top:10; background-
color:'#008000'; color:'white'">
&nbsp;
</div>
<div id="op1" style="position:absolute; left:50; top:10; background-color:'#008000';
color:'white'">
<font face="verdana, arial"><b>
Menu 1
</font>
</div>
<div id="op2" style="position:absolute; left:200; top:10; background-color:'#008000';
color:'white'">
<font face="verdana, arial"><b>
Menu 2
</font>
</div>
<div id="op3" style="position:absolute; left:350; top:10; background-color:'#008000';
color:'white'">
<font face="verdana, arial"><b>
Menu 3
</font>
</div>
<div id="op0" style="position:absolute; width:'100%'; top:30; height:100;
background-color:'#FFFFF0'; color:'white'"> &nbsp;
</div>
<div id="opcao1" style="position:absolute; left:50; top:30; background-
color:'#FFFFDD';">
<a href="exemplo1.htm">Exemplo 1</a><br> <a href="exemplo2.htm">Exemplo
2</a><br> <a href="exemplo3.htm">Exemplo 3</a><br>
</div>
<div id="opcao2" style="position:absolute; left:200; top:30; background-
color:'#FFFFDD';">
<a href="exemplo4.htm">Exemplo 4</a><br> <a href="exemplo5.htm">Exemplo
5</a><br> <a href="exemplo6.htm">Exemplo 6</a><br>
</div>
<div id="opcao3" style="position:absolute; left:350; top:30; background-
color:'#FFFFDD';">
<a href="exemplo7.htm">Exemplo 7</a><br>
<a href="exemplo8.htm">Exemplo 8</a><br> <a href="exemplo9.htm">Exemplo
9</a><br>
</div>
</body>
</html>
 Produção, Edição, Elaboração e Revisão de Texto:
ESCON - Escola de Cursos Online
Proibida a reprodução total ou parcial sem permissão expressa da ESCON. (Lei 9.610/98)