UENF Curso de HTML Avanado Prof.

Srgio Rodrigues

Pg 1

NDICE
Mapas Clicveis
Server Side Maps Client Side Maps Retngulo Crculo Polgono Criando um Menu Cascade Style Sheets (CSS) Propriedades dos Estilos Definio de Valores Definio de Fontes Cor e imagem de fundo Espaamento Alinhamento de texto Bordas Seletor Mltiplo Seletor Contextual Compartilhando estilos Classes de estilo Classes genricas Pseudo-classes Identificadores Estilos inline Estilos em formulrios Posicionamento Alinhamento Interno Criando um Menu Simples Adicionando estilos ao Menu

02
02 02 04 04 05 06

Folhas de Estilo

07
07 08 09 09 09 10 10 10 10 11 12 13 15 16 17 18 19

Camadas

21
22 22 23 24

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 2

Mapas Clicveis
possvel associar links a figuras (atravs da tag <A HREF=URL></A>) de modo que elas se tornam sensveis e, quando clicadas, carregam a pgina especificada no link. Em muitas situaes, porm, pode ser interessante associar vrios links a uma imagem de forma que dependendo de qual parte dela foi selecionada o navegador exiba um documento diferente. O exemplo tpico quando temos uma figura com um mapa de um pas e queremos que a seleo de um estado especfico leve a uma pgina descrevendo este estado. A este tipo de facilidade da linguagem HTML chamamos de mapas clicveis. Server Side Maps A primeira forma de implementar mapas clicveis distribui o trabalho de interpretao de qual documento deve ser carregado, em funo da seleo 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 ento finalmente carrega a pgina. No servidor h um arquivo associado a cada mapa clicvel, onde esto definidas cada uma das regies do mapa e a URL que deve ser ativada caso o ponto esteja dentro desta regio. Em geral, possvel definir 3 tipos de regio: circulares, retangulares e poligonais. Esta forma de selecionar as regies de uma imagem est caindo em desuso pois apresenta vrias desvantagens. A primeira delas que o formato deste arquivo de definio das rea dependente do tipo de servidor. Ao mudar uma pgina de um servidor para outro necessrio converter estes arquivos. Outra desvantagem que costuma ser necessrio pedir a interveno do administrador do servidor para atualizar o arquivo. Alm disso, a cada seleo necessrio uma consulta ao servidor para determinar o documento que foi selecionado (o que implica num maior tempo de resposta). Por fim, o usurio no tem nenhuma indicao de qual URL ele est selecionando pois esta informao est no servidor. Client Side Maps Neste tipo de mapa clicvel, a definio das regies de uma figura feita no prprio 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 regies da figura e associ-las a diversas URLs so necessrias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>. A tag <MAP> ... </MAP> contm as tags que faro a definio de cada uma das reas. Esta tag contm apenas o atributo NAME que serve para definir um nome que ser utilizado para associar as regies a um determinado arquivo de imagem (includo atravs da tag <IMG>). Uma ou mais tags <AREA> so colocadas dentro da tag <MAP> ... </MAP> para definir cada uma das reas de

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 3

uma figura. H trs 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 nmero de coordenadas variam de acordo com a forma escolhida, assim: CIRCLE Requer trs valores x, y e r; onde (x, y) o centro do crculo e r o raio. RECT Requer quatro valores x1, y1, x2, y2; onde (x1, y1) o vrtice superior esquerdo do retngulo e (x2, y2) o vrtice inferior direito. POLY Requer um numero par de valores x1, y1, ... xn, yn; onde cada par (xn, yn) corresponde a um dos vrtices do polgono. A tag <AREA> deve ter definido o atributo HREF para indicar a URL que deve ser carregada aps a seleo da regio. Nada impede que haja sobreposio de reas. Quando a coordenada selecionada se encontra na interseo de duas reas, a regio selecionada ser aquela que foi definida primeiro. Aps a definio do mapa, necessrio associar uma figura a ele. A tag <IMG> tem para isso o atributo USEMAP que deve receber como valor o nome do mapa associado. A seguir vrios exemplos que ilustram a criao de mapas clicveis: 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 4

<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 Clicveis Retngulo <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 Clicveis Crculo <html>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 5

<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 Clicveis Polgono <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 Clicveis 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">

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 6

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

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 7

Folhas de estilo
At a verso 4 da linguagem HTML, as tags tinham uma definio e comportamento padro, que uns poucos atributos podiam modificar. Caso se desejasse criar pginas cuja aparncia fosse ligeiramente diferente do comportamento padro era necessrio incluir os atributos e tags que definissem essa aparncia nos pontos do documento onde fosse necessrio, misturados a prpria estrutura do documento. Por exemplo, num documento cujo texto fosse de cor preta (definida na tag <BODY> atravs do atributo TEXT), caso se desejasse cabealhos de cor azul marinho seria necessrio envolver cada ocorrncia da tag <H1></H1> com a tag <FONT color=navy></FONT>. Qualquer modificao a ser realizada nesta definio tornava necessrio buscar por todo o documento o que deveria ser modificado. Cascade Style Sheets (CSS) A verso 4 do HTML introduziu o conceito de folhas de estilo (CSS cascade style sheets). Atravs dos estilos possvel definir informaes de tipografia, cor, layout e alinhamento de forma independente da estrutura do documento. Estas informaes podem inclusive estar contidas em um arquivo a parte que pode ser includo nos diversos documentos que compem o site, garantindo assim uma apresentao comum em todas as pginas. Alm das facilidades de formatao 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 seo <HEAD> do documento. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos contidos na tag. H dois tipos de sintaxe possvel: a sintaxe CSS (normalmento o padro, 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 cabealhos do tipo 1 (<H1>...</H1>) sejam escritos utilizando fonte arial e cor azul; e todos os cabealhos do tipo 2 (<H2>...</H2>) sejam escritos utilizando fonte arial e cor verde: Exemplo 6 Folhas de Estilo Modificando Cabealhos <html> <head> <title>Exemplo 6</title> <style type="text/css"> <!-H1 { font-family: arial; color: blue;

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 8

} 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 colocao dos estilos entre os smbolos <!-- e --> no obrigatria. A utilizao deste smbolos ignorada pelos navegadores que conhecem a tag <STYLE> (explorer e netscape de verso igual ou superior a 4), mas no pelos navegadores de verses anteriores que desta forma tomam a definio dos estilos como comentrio. O texto do interior da tag <STYLE> no HTML e segue a seguinte sintaxe: <STYLE TYPE=text/css> /* comentrio */ seletor { propriedade: valor; propriedade: valor valor valor ...; ... } seletor, seletor { propriedade: valor; ... } </style> Propriedades dos Estilos Propriedades so atributos que definem a forma de visualizao de uma determinada tag ou de um grupo de tags. Elas podem ser divididas em grupos, de acordo com sua funo e nem sempre so aplicveis a qualquer tag. H pequenas

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 9

incompatibilidades entre a forma como os dois principais tipos de navegadores (explorer e netscape) so afetados por algumas propriedades, que podem, inclusive, ser ignoradas. A implementao de estilos por parte do Netscape mais recente e nem tudo que foi implementado no explorer reconhecido por esse navegador. Os tipos de propriedades so as que modificam: fontes de caracteres, cor e imagem de fundo, espaamento, caractersticas de listas, alinhamento de texto, bordas e posicionamento de camadas. Veja abaixo algumas propriedades: Definio de Valores palavras chave so palavras pr-definidas que podem expressar uma dimenso (small - pequeno), uma relao (bolder - mais escuro) ou o nome de um fonte de caracteres (arial, times, etc). Estas palavras no so casesensitive. tamanho um valor numrico, precedido ou no de sinal e seguido da indicao da unidade. As unidades mais usadas so: pixel (px) e pontos (pt) percentuais um valor numrico seguido do simbolo %. Este valor no dinmico 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 so: seu nome em ingls e a definio RGB do HTML (#RRGGBB).

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

Cor e imagem de fundo Propriedades background-image background-color Valores Possveis Url da imagem Transparent, nome da cor, #RRGGBB

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 10

Espaamento Propriedades letter-spacing line-height margin-top margin-bottom margin-right margin-left padding-top padding-bottom padding-right padding-left Alinhamento de texto Propriedades text-indent text-align vertical-align Valores Possveis tamanho, percentual left, center, right, justify baseline, middle, sub, super, text-bottom, text-top, percentual Valores Possveis Tamanho tamanho, percentual, normal tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto

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

Seletor mltiplo possvel atribuir o mesmo valor s propriedades de vrias tags de uma s vez, colocando-as separadas por vrgulas antes da definio das propriedades. No exemplo a seguir todos os cabealhos H1, H2 e H3 e todos os textos em negrito sero escrito com a cor azul: Exemplo 7 Folhas de Estilo Seletor Mltiplo <html> <head>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 11

<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 possvel indicar que as propriedades de uma determinada tag s sero modificadas quando ela se encontrar no interior de uma ou mais tags container. No exemplo a seguir todo texto em itlico dentro de cabealhos H1 (apenas estes) sero escritos com a cor verde, os demais textos em itlico tero a cor padro : Exemplo 8 Folhas de Estilo Seletor Contextual <html> <head> <title>Exemplo 8</title> <style type="text/css"> <!-H1 i { color: green; } -->

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 12

</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 possvel compartilhar estilos entre vrios documentos HTML. Os estilos devem estar contidos num arquivo com extenso css, que pode ser includo num documento por meio da tag <LINK> colocada em sua seo <HEAD>. A utilizao de um arquivo de estilo permite criar uma verdadeira uniformizao das pginas de um site. Qualquer modificao neste arquivo modifica todas as pginas 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 alm dele necessrio definir tambm os atributos REL e TYPE com os valores mostrados no exemplo. Um arquivo de estilos no um arquivo HTML, ou seja, no necessrio 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;

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 13

} 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 porm, desejvel que uma tag tenha vrios aspectos de acordo com o local onde utilizada. possvel, portanto, criar diferentes estilos para uma tag criando vrias 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 definio aplicada a todos os cabealhos do <H1> (tipo e tamanho de fonte) e as definies de cor aplicveis apenas aos cabealhos

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 14

<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 cabealho estar sujeito a definio de tamanho e tipo de fonte e ser escrito na cor padro; o segundo e o quarto cabealho tambm estaro sujeitos a definio de tamanho e tipo de fonte mas sero escritos na cor vermelha; o terceiro, por sua vez, estar sujeito a definio 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 15

</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 genricas As classes definidas no exemplo da seo anterior s podem ser aplicadas a tags do tipo <H1> pois esta tag foi includa no seletor. possvel criar classes aplicveis a qualquer tipo de tag, bastando para isso omitir o nome da tag A utilizao de uma classe genrica tambm feita por intermdio 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 16

<p class=texto2>Texto usando a classe texto2</p> </body> </html> Pseudo-classes A tag <A> tem algumas classes com nomes pr-definidos, que so associadas a estados assumidos por esta tag. Estes estados so: Pseudo-classe link active visited hover Descrio browser Link que ainda no foi visitado Link no momento que o usurio tem o boto do mouse pressionado Link que j foi visitado Link no momento em que o usurio 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 :. No existem pseudo-classes genricas e, portanto, sempre necessrio indicar o nome da tag. O exemplo a seguir define a cor azul para os links no visitados, a cor vermelha e negrito para os links no momento em que o boto 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 17

<a href="doc2.htm">Documento 2</a><p> <a href="doc3.htm">Documento 3</a><p> </body> </html> Identificadores Da mesma forma que uma classe modifica as definies feitas para uma tag, possvel redefinir, em um determinado elemento do documento, as definies de uma classe. Isso feito atravs da criao 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 tambm estiver definido o atributo classe, as propriedades definidas no identificador tem prioridade sobre as definidas na classe. Muito embora os navegadores normalmente no imponham restries, um identificador deve ser utilizado em apenas uma tag, criando uma instncia particular desta tag. No exemplo a seguir, os trs cabealhos sero desenhados com o fonte arial e o tamanho grande, porm o primeiro ser desenhado em verde (definio da classe), o segundo em azul e o terceiro em amarelo (definies 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 18

<h1 class=grande id=amarelo>Grande e amarelo</h1> </body> </html> Estilos inline Uma outra forma de redefinir o estilo de uma tag atravs do atributo STYLE. Este atributo pode ser colocado em qualquer tag e tem precedncia sobre os estilos definidos atravs dos atributos ID e CLASS. O valor do atributo STYLE uma string contendo propriedades e valores separados por vrgulas, da mesma forma que utilizada associado a um seletor na tag <STYLE>. No exemplo a seguir, o segundo cabealho herda da classe o tipo do 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 19

</body> </html> Estilos em Formulrios Uma forma de tornar sua pgina ainda mais atraente aplicar o conceito de estilo aos formulrios. 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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 20

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

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 21

Camadas
Utilizar camadas uma nova maneira de fazer pginas dinmicas. Uma camada uma seo de uma pgina da Web que pode ser tratada como uma entidade separada pode ser atualizada, reposicionada na tela e tornada oculta ou visvel facilmente. Mltiplas 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 contedo da camada entre as duas tags de diviso 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 vrias propriedades no atributo STYLE da tag <DIV> quando definir uma camada para configurar sua posio, 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 so colocados para fora na forma normal de HTML e no pode ser movido. Este o padro. 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 posio static, onde o elemento normalmente teria sido colocado para fora dentro da pgina HTML. left e top especificam deslocamentos para a posio do item. Para posicionamento absoluto, essa propriedade se refere janela principal de navegador ou a um item que a contm. Para posicionamento relativo, ela se refere posio static normal.

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 22

width e height so semelhantes aos atributos width e height padro de HTML e especificam uma largura e altura para o item. visibility especifica se um item visvel. Os valores incluem visible(padro) e hidden. background-color especifica a cor para o segundo plano para a camada inteira (se contiver texto ou no).

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>

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 23

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

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 24

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

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 25

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

UENF Curso de HTML Avanado Prof. Srgio Rodrigues

Pg 26

<a href="exemplo8.htm">Exemplo 8</a><br> <a href="exemplo9.htm">Exemplo 9</a><br> </div> </body> </html>