Construccion Paginas Web

FEA/USP EAD-451 Informtica Aplicada Administrao Prof.
Antonio Geraldo Vidal
Faculdade de Economia, Administrao e Contabilidade da USP
EAD-451 Informtica Aplicada Administrao
Internet
Construo de Pginas Web

com HTML e Scripts
Prof. Antonio Geraldo da Rocha Vidal
FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal
SUMRIO Introduo Linguagem HTML ................................................................................................7 Ferramentas..................................................................................................................................7 Criao de contedo................................................................................................................8 Servidor Web...........................................................................................................................8 Navegador ou Browser ...........................................................................................................8 Gerenciador de Banco de Dados Microsoft SQL Server......................................................8 Interatividade ...........................................................................................................................9 Projeto de Pginas Web ..............................................................................................................9 Cdigo HTML ...........................................................................................................................11 Marcadores (TAGS) HTML.................................................................................................11 Atributos de tags....................................................................................................................13 Vendo o cdigo fonte HTML no Navegador.......................................................................13 Cabealhos.............................................................................................................................13 Pargrafos ..............................................................................................................................14 Listas ......................................................................................................................................14 Hyperlinks..............................................................................................................................16 Tipos de Hyperlinks..........................................................................................................16 Vnculos Relativos e Vnculos Absolutos .......................................................................16 Tag Bookmark (Marcador de Pginas) ................................................................................17 Imagens ..................................................................................................................................18 Mapas de imagem..................................................................................................................18 Tags de Mapa de Imagem no Servidor ............................................................................18 Tags de Mapa de Imagem no Cliente ..............................................................................19 Fornecendo Informaes para Mapas de Imagem ..........................................................20 Vantagens de Mapas de Imagem no Servidor .................................................................20 Desvantagens de Mapas de Imagem ................................................................................21 Tabelas .......................................................................................................................................21 Largura e Altura da Tabela ...................................................................................................22 Colunas e Linhas ...................................................................................................................22 Cabealhos de Tabelas..........................................................................................................23 Bordas de Tabelas .................................................................................................................23 Ttulo de Tabelas...................................................................................................................24 2
Colunas de Agrupamento......................................................................................................24 Tabelas Aninhadas ................................................................................................................24 Pginas com Frames..................................................................................................................25 A tag <FRAMESET> ...........................................................................................................26 A tag <FRAME>...................................................................................................................27 Roteiro para criar um Documento de HTML com frames..................................................28 Para Navegadores Que No Suportam Frames ...................................................................28 Formulrios................................................................................................................................28 Submetendo um Formulrio .................................................................................................29 Formulrios do Microsoft FrontPage...................................................................................29 Controles de Formulrio .......................................................................................................30 Tags para Criao de Formulrios .......................................................................................31 ACTION ............................................................................................................................31 METHOD ..........................................................................................................................32 TARGET............................................................................................................................32 Controles de Formulrio .......................................................................................................32 Controle de Caixa de texto ...............................................................................................33 Boto ..................................................................................................................................33 Menu em Cascata ..............................................................................................................33 Boto de Rdio..................................................................................................................34 Caixa de Verificao.........................................................................................................34 Controle Escondido...........................................................................................................35 Ordem de Tabulao .........................................................................................................35 Adicionando um Ttulo.....................................................................................................35 Teclas de Acesso ...............................................................................................................35 Programao Orientada para Objetos com Scripts..................................................................36 Introduo..............................................................................................................................36 Propriedades ..........................................................................................................................36 Mtodos..................................................................................................................................36 Eventos...................................................................................................................................36 Programao com Scripts .....................................................................................................37 Script no Servidor X Script no Cliente ................................................................................37 Scripts no Cliente ..............................................................................................................37 3
Scripts no Servidor............................................................................................................37 Linguagens de Script.............................................................................................................38 Visual Basic Scripting Edition .........................................................................................38 JavaScript...........................................................................................................................38 A Tag <SCRIPT>..................................................................................................................39 Usando Visual Basic Scripting.............................................................................................39 Usando JavaScript.................................................................................................................40 Executando Scripts................................................................................................................40 Componentes Ativos .................................................................................................................40 Segurana...............................................................................................................................41 Controles Assinados..........................................................................................................41 Nveis de Segurana..........................................................................................................41 Controles Seguros .............................................................................................................41 Controles Seguros para Scripting.....................................................................................42 Controles ActiveX.....................................................................................................................42 Como os Controles ActiveX Trabalham..............................................................................42 Download de Componentes via Internet..............................................................................43 Como os Componentes so Carregados...............................................................................43 O Caminho de Procura na Internet.......................................................................................44 Java Applets...............................................................................................................................44 Como Java Applets Trabalham nas Pginas Web...............................................................45 Controles ActiveX vesus Java Applets ................................................................................45 A tag <OBJECT>..................................................................................................................47 Provendo uma Alternativa para a tag <OBJECT>..............................................................48 O Atributo CODEBASE.......................................................................................................49 Especificando um Nmero de Verso..................................................................................49 Definindo as Propriedades dos Controles............................................................................50 Usando Java Applets .................................................................................................................50 Provendo uma Alternativa para a tag <APPLET>..............................................................52 Definindo as Propriedades de um Java Applet....................................................................52 Distribuio de Java Applets ................................................................................................53 Usando Arquivos .CAB ....................................................................................................53 Usando Arquivos .ZIP ......................................................................................................53 4
HTML Dinmico - DHTML.....................................................................................................54 Introduo..............................................................................................................................54 O Modelo de Objetos ............................................................................................................55 O Objeto Document ..............................................................................................................56 Elementos de Agrupamento..................................................................................................57 Eventos em DHTML.............................................................................................................57 Introduo..........................................................................................................................57 Declarando o Evento na Etiqueta do Elemento...............................................................58 Usando o ID do Elemento ................................................................................................58 Eventos Mais Comuns ......................................................................................................59 Caracterstica de Rollover ................................................................................................60 Movendo Elementos .........................................................................................................60 Eventos onload e onunload...............................................................................................61 O Objeto Event..................................................................................................................62 Concatenao de Eventos (Bubbling)..............................................................................62 Usando Colees ...................................................................................................................63 Coleo Global (all) ..........................................................................................................65 O Mtodo Tag ...................................................................................................................66 Manipulando Textos e Cdigo HTML ................................................................................68 Introduo..........................................................................................................................68 Substituindo, Excluindo e Inserindo Textos....................................................................68 Substituindo, Excluindo e Inserindo Elementos .............................................................69 Rolagem de Elementos .....................................................................................................71 Estilos Dinmicos..................................................................................................................72 Introduo..........................................................................................................................72 Implementando Folhas de Estilo......................................................................................72 Folhas de Estilo Ligadas...................................................................................................72 Folhas de Estilo Embutidas ..............................................................................................73 Usando Estilos Inline ........................................................................................................74 Estilos em Cascata ............................................................................................................74 Criando Novos Estilos ......................................................................................................75 Mudana Dinmica de Estilos..........................................................................................75 Atributos e Propriedades de Folhas de Estilo..................................................................75 5
Usando Propriedades de Estilo para mudar um Estilo....................................................75 Usando o Atributo ClassName para mudar um Estilo....................................................76 Transies e Efeitos Visuais.................................................................................................76 Introduo..........................................................................................................................76 Usando Filtros Visuais......................................................................................................77 Parmetros de Filtro..........................................................................................................77 Filtros Mltiplos................................................................................................................77 Coleo de Filtros .............................................................................................................78 Usando Transies ............................................................................................................79 Transio entre Pginas ....................................................................................................81 Posicionamento......................................................................................................................81 Introduo..........................................................................................................................81 Posicionamento Absoluto.................................................................................................82 Definindo uma Posio Relativa......................................................................................83 Posicionamento e Dimenses...........................................................................................84 Controlando a Visibilidade...............................................................................................86 Scriptlets ................................................................................................................................86 Introduo..........................................................................................................................86 Usando Scriptlets ..............................................................................................................87 Vantagens de Scriptlets.....................................................................................................87 Criando um Scriplet Simples............................................................................................87 Adicionando Scriptles a uma Pgina Web ......................................................................89 Bibliografia ................................................................................................................................90
Introduo Linguagem HTML

Hypertext Markup Language (HTML) a linguagem usada para criar pginas de hipertexto na Web. Ela utiliza um conjunto de marcadores (ou tags) para identificar as partes do documento ou pgina e definir como o texto aparecer quando visto em um navegador ou Browser Web. Cada pgina HTML composta de duas partes: o cabealho e um corpo opcional. Os cabealhos das pginas HTML provem informaes gerais sobre a pgina, como tipo de pgina, identificao do servidor e capacidade, informaes administrativas e descrio do corpo. O corpo da pgina, se presente, contm um bloco de informaes representando os dados que sero apresentados no navegador. O exemplo a seguir uma pgina HTML bem simples:
<HTML> <HEAD> <TITLE>Exemplo de pgina HTML</TITLE> </HEAD> <BODY> <H1>Ola, mundo!</H1> Este um documento HTML bem simples. </BODY> </HTML>
As pginas Web podem ser ou estticas ou dinmicas. Uma pgina Web esttica uma pgina HTML que pode ter hyperlinks para outras pginas e arquivos, mas no atualiza dados no servidor Web e no atualizada pelas aes ou informaes do usurio sobre o servidor. A maioria das pginas Web ainda so estticas. Uma pgina Web dinmica ou ativa fornece meios para o usurio interagir com um servidor Web, atualizando ou alterando dados armazenados no servidor. Por exemplo, uma pgina Web ativa normalmente constituda por um formulrio, como um formulrio de ordem ou compra on-line, atravs do qual o usurio acessa e submete informaes para um servidor Web em uma aplicao de comrcio eletrnico. Uma pgina Web ativa pode conter tambm controles ActiveX ou programas escritos em linguagens de scripting, que fornecem pgina capacidades de processamento de informaes.
Ferramentas
Para um desenvolvedor de aplicaes profissional, as ferramentas ou produtos mais significantes oferecidos para o ambiente Web so aqueles que permitem criar, publicar, ou navegar por pginas Web. Neste curso abordaremos essencialmente as ferramentas desenvolvidas pela Microsoft pois, entre outras razes, esto atualmente entre as mais utilizadas pelos profissionais que desenvolvem pginas Web.
Criao de contedo
? ? Microsoft Office Voc pode usar quaisquer das aplicaes do Microsoft Office para editar documentos HTML existentes ou criar novos. Os aplicativos do Office so uma excelente soluo para a criao de pginas Web simples. ? ? Microsoft FrontPage Voc pode usar o Microsoft FrontPage para criar pginas Web sofisticadas e para administrar um Web Site integrado. ? ? Microsoft Visual InterDev Voc pode usar o Visual InterDev para construir Web Sites dinmicos. Com recursos para desenvolvimento visual e poderosas ferramentas para acesso a bases de dados, o Visual InterDev fornece um completo ambiente de desenvolvimento, tecnicamente avanado, por permitir a construo tanto de aplicaes Internet como Intranet.
Servidor Web
? ? Servidor de Informaes Internet da Microsoft (IIS) O Servidor de Informaes Internet da Microsoft (IIS) totalmente integrado com o sistema operacional Windows NT Server, alm de ser especialmente projetado para disponibilizar uma grande variedade de recursos como servidor Intranet. ? ? Servidor Web Pessoal da Microsoft O Servidor Web Pessoal da Microsoft (PWS) projetado para aplicaes de pequena escala, sendo ideal para em ambientes de desenvolvimento ou testes e para a execuo de aplicaes Web de pequena escala.
Navegador ou Browser
? ? Internet Explorer da Microsoft O Microsoft Internet Explorer da Microsoft uma das ferramentas atualmente mais utilizadas para visualizar informaes, estticas e dinmicas, na Internet. Em conjunto com o NetScape Navigator so as ferramentas mais utilizadas para visualizao de pginas HTML.
Gerenciador de Banco de Dados Microsoft SQL Server

? ? Microsoft SQL Server O gerenciador de Banco de Dados Microsoft SQL Server est totalmente integrado ao sistema operacional Windows NT Server, ao servidor Web Internet Information Server e , portanto, a ferramenta adequada para armazenar dados e contedo ativo a ser apresentado em pginas Web. O Microsoft Transaction Server (MTS) um sistema gerenciador de transaes, tambm integrado ao Windows NT Server, ideal para o
gerenciamento de transaes e execuo da lgica e de regras de negcio necessrias s pginas Web ativas. ? ? Outros Bancos de Dados
Interatividade
Voc pode usar o HTML Dinmico para criar pginas ricas, interativas que exigem menos comunicao com o servidor para exibir seu contedo. As caractersticas do HTML Dinmico permitem o processamento interativo de pginas Web no cliente sem que seja necessrio fazer inmeros pedidos ao servidor Web para mais informaes: ? ? Controles de multimdia Um conjunto de controles multimdia automaticamente instalado com o navegador Internet Explorer 4.0 ou superior. Estes controles fornecem efeitos grficos especiais, como arte de transies e texto, sem exigir transferncia de imagens atravs da rede. Alm disso, o HTML Dinmico suporta grficos estruturados, um tipo de controle multimdia que descreve um metafile. Estes controles produzem grficos pequenos que parecem melhores que imagens as tradicionais. ? ? Cache Local de Dados Antes do HTML Dinmico ser desenvolvido, sempre era necessrio para contactar o servidor Web e/ou o servidor de base de dados quando o usurio desejasse ter uma viso diferente dos dados em uma pgina. Utilizando o HTML Dinmico, os desenvolvedores podem usar conexes de dados para embutir uma fonte de dados em uma pgina. Com isso, os usurios podem classificar e filtrar a fonte de dados como se estivessem acessando uma base de dados, sem, entretanto, permanecerem conectados no servidor de base de dados original. ? ? Outlining O recurso de Outlining mostra ou esconde trechos de texto baseado em eventos do usurio como apontando ou clicando o mouse. Por exemplo, voc pode usar o outlining para criar um ndice dinmico, ou para fazer um texto escondido aparecer a partir de um cabealho, quando um usurio selecionar este cabealho. O HTML dinmico pode criar dinamicamente um novo trecho de cdigo HTML em uma pgina Web, em resposta a uma ao do usurio, sem ter que se comunicar com o servidor. Esse recurso permite que os usurios abram e exibam menos pginas para achar as informaes que precisam. Realizando a maioria do processamento no lado de cliente o HTML Dinmico melhora significativamente desempenho das pginas Web.
Projeto de Pginas Web

Ao projetar a interface do usurio para uma pgina Web, voc deve considerar as seguintes recomendaes: ? ? Minimize o tempo de transferncia (download) das pginas:
Mantenha seu projeto de pgina simples. Minimize o uso de grficos complexos que tomam muito tempo para serem carregados. ? ? Mantenha as informaes acessveis: As principais informaes de um Web Site devem estar no mximo dois hyperlinks abaixo da Home Page, ou seja, sua pgina inicial. Os usurios ficam freqentemente confusos e frustrados quando precisam navegar por mais de dois hyperlinks para alcanar as informaes importantes. ? ? Fornea mdia alternativa: Alguns navegadores podem no ter recursos para suportar toda a funcionalidade de uma pgina, como por exemplo, grficos, vdeos e arquivos de som. Se voc fornecer um mtodo alternativo para apresentar informaes semelhantes (um grfico em vez de um arquivo de vdeo, ou um texto em lugar de um grfico), mais usurios podero visitar seu Web Site. Alm disso, esta estratgia fornece tambm compatibilidade com navegadores mais antigos. ? ? Minimize o uso de som: Transferir arquivos de som atravs da Internet exige atualmente uma razovel capacidade de comunicao. Isso significa que usurios com conexes de baixa capacidade levaro muito tempo para carregar pginas que tocam muitos sons. ? ? Coordenao de cores: Se voc utilizar um arquivo padro bitmap como figura de fundo, procure ter certeza de que ele no dificultar a leitura da pgina. Alguns arquivos bitmap de fundo tornam o texto das pginas Web simplesmente ilegveis. ? ? Pginas para Intranet: Se voc estiver projetando pginas Web para uma Intranet, dever focar a facilitao do acesso a informaes crticas para os usurios (como formulrios e bases de dados corporativas). ? ? Pginas para Internet: Se voc estiver projetando pginas Web para a Internet, dever focar em informaes corporativas e institucionais e mensagens de marketing. Em ambos os casos, voc deve se esforar para criar um Web Site com recursos de navegao globais e claros, de forma que usurios possam mover-se atravs do seu site e achar as informaes que procuram com facilidade. A seguir so relacionadas algumas dicas para manter suas pginas Web adequadas: ? ? Mantenha as pginas com informaes atualizadas. Atualize sua pgina Web sempre que as informaes nela mudarem. Por exemplo, tenha certeza que os hyperlinks para outras pginas esto atualizados e funcionando. ? ? Adicione ponteiros para utilizar recursos de navegadores atualizados; Isto especialmente importante se sua pgina fizer uso de recursos HTML avanados.
10
? ? Informe aos usurios de problemas com sua pgina. Se sua pgina est sendo modificada, adicione um grfico ou texto indicando onde as modificaes se iniciam e terminam. ? ? Mantenha hyperlinks para sites antigos. Se voc mover seu site para um novo servidor, mantenha uma pgina para fornecer um hyperlink do site antigo para o novo, durante pelo menos uns trs meses. ? ? Defina a Home Page para a pgina padro do servidor Web. Sempre defina o nome da sua Home Page padro, normalmente default.htm ou index.htm, de forma a estar compatvel com o nome atualmente configurado na instalao de seu servidor Web. Isso torna mais fcil para os usurios localizar sua pgina quando se conectarem a seu servidor.
Cdigo HTML
A Hypertext Markup Language (HTML) a codificao atrs das pginas Web normais. A HTML usa marcadores ou tags para instruir um navegador Web (browser) a como apresentar as informaes na pgina. Por exemplo, existem tags para cabealhos, grficos, pargrafos e hyperlinks. Quando voc usa um software de autoria Web, como o FrontPage da Microsoft, o Composer da Netscape ou outro equivalente para criar pginas Web, ele insere automaticamente as tags HTML apropriadas em seu documento. Porm, voc tambm pode criar arquivos HTML com qualquer editor de textos padro ASCII, como Microsoft Notepad. Se voc pretende criar pginas Web simples, contendo apenas texto e grficos estticos, no necessrio conhecer a sintaxe da linguagem HTML, pois um software de autoria como o Front Page ou o Composer cria o cdigo automaticamente para voc. Mas se voc quiser criar paginas Web que utilizem recursos avanados, como automao atravs de scripts escritos em Java (JavaScript ou JScript) ou Visual Basic (VBScript), controles de ActiveX, ou tags HTML avanadas, voc precisa usar um editor de texto para programar as tags HTML manualmente. Atrs de toda pgina Web est um documento que formatado com tags HTML. Estas tags dizem ao navegador como exibir o texto, as imagens, os hyperlinks, e todos os outros elementos contidos na pgina.
Marcadores (TAGS) HTML

Todas pginas Web compartilham vrias tags bsicas: ? ? <HTML> A tag <HTML> indica que o documento um documento HTML.
11
? ? <HEAD> A tag <HEAD> define a seo de cabealho, que pode conter uma variedade de outras tags, mas a nica que exigida e obrigatria a tag <TITLE>, que especifica o ttulo da pgina Web, a ser exibido na barra de ttulo do navegador quando um usurio visualizar o documento. ? ? <BODY> A tag <BODY> especifica o corpo do documento. O corpo contm as tags e o texto que formam o contedo principal da pgina Web. A ilustrao a seguir mostra um exemplo de uma pgina HTML extremamente simples.
Este o cdigo HTML por trs desta pgina:

<HTML> <HEAD><meta name="GENERATOR" content="Microsoft FrontPage 3.0"> <TITLE>ABC Company Home Page</TITLE> </HEAD> <BODY>  Hello, World! </BODY> </HTML>
As tags HTML sempre so iniciadas pelo smbolo < , seguido pelo nome da tag, e so finalizadas com o smbolo >. A maioria dos elementos ou contedos das pginas Web esto contidos dentro de tags emparelhadas, que marcam seu incio e fim (por exemplo, <H1> e </H1>). A tag de fim idntica tag de incio, a no ser pelo smbolo / que precede o nome da tag dentro dos parnteses. Tipicamente, voc coloca um contedo de uma pgina entre as tags de incio e fim.
12
A tabela a seguir mostra as tags HTML mais utilizadas nas pginas Web:
Caracterstica Cabealho Quebra de linha Artigo de lista Texto enfatizado Imagem Texto de Pr-formatado Texto em Negrito Pargrafo TAG Exemplo <H1>...</H1> a <H6>... </H6> <BR> <Li>...</LI> <EM>...</EM> <IMG> <PRE>...</PRE> <B>...</B> <P>
Nota: as tags quebra de linha <BR>, imagem <IMG> e de pargrafo <P> no tm uma tag de fim (a tag de pargrafo pode ter uma tag de fim </P>, mas freqentemente omitida.
Atributos de tags
Dentro de uma tag, voc pode fixar atributos para definir caractersticas sobre o texto nelas contido. Os atributos formatam o contedo da tag, mudando o modo como o elemento aparece. A amostra de cdigo a seguir usa os atributos de FACE e SIZE para definir o estilo das letras do texto:
<FONT FACE="Arial" SIZE="2">text in 10pt Arial font.</FONT>
Vendo o cdigo fonte HTML no Navegador

Voc pode ver o cdigo fonte HTML de qualquer pgina Web no seu navegador. Estudar o cdigo fonte HTML de vrias pginas Web um bom mtodo para aprender mais sobre como as tags trabalham. Uma vez que os elementos estruturais do seu arquivo HTML estiverem no lugar, voc pode adicionar o contedo desejado para o corpo do documento HTML. Apesar de existirem muitas tags para alterar a aparncia do contedo, a discusso a seguir enfoca os elementos bsicos: cabealhos, pargrafos e listas.
Cabealhos
A linguagem HTML tem seis nveis de cabealhos, numerados 1 a 6; H1 o mais proeminente. As letras dos cabealhos so exibidas com fontes maiores e/ou em negrito. As letras do corpo da pgina so exibidas com fonte normal. A sintaxe da tag de cabealho :
<Hx>Texto de cabealho </Hx>
onde x um nmero entre 1 e 6, especificando o nvel do cabealho.
13
Pargrafos
Os controles de fim de linha CR no so significantes em um arquivo HTML. A mudana de linha determinada pelo tamanho da janela do navegador. Considere o cdigo HTML a seguir:
Bem-vindo minha home page. Aqui est algum contedo. <P>E um pouco mais de contedo. Este texto apareceria no espectador de Web como segue: Bem-vindo para minha ho me page. Aqui est algum contedo. E um pouco mais de contedo.
No cdigo fonte, existe um retorno de linha entre as sentenas. Os navegadores ignoram este controle, comeando um novo pargrafo s quando alcanam uma tag <P>. Esta tag explicitamente termina o pargrafo e insere uma linha em branco. Voc tambm pode controlar o comprimento de linha ou a quebra de linha usando a tag <BR>, que indica uma quebra de linha. Nota: nem a tag <P> ou a tag <BR> exigem uma tag de fim para exibir corretamente uma pgina nos navegadores atuais.
Listas
A linguagem HTML suporta marcadores e listas numeradas, referindo-se a eles respectivamente como listas no ordenadas e listas ordenadas. Voc deve utilizar a tag <UL> para definir uma lista com marcadores como exemplificado a seguir:
<UL> <LI>Este um item da lista. <LI>Este um segundo item da lista. <LI>E isto um terceiro item da lista. </UL>
Voc usa a tag <OL> para definir uma lista numerada como exemplificado a seguir:
<OL> <LI>Este um item da lista. <LI>Este um segundo item da lista. <LI>E este um terceiro item da lista. </OL>
A ilustrao a seguir mostra como estas listas apareceriam em uma pgina Web.
14
Voc pode usar o atributo TYPE para controlar o marcador usado em uma lista no ordenada ou o sistema de numerao utilizando uma lista numerada. A sintaxe para uma lista no ordenada : <UL TYPE=formato> onde a formato um dos seguintes: ? ? disc ? ? square ? ? circle A sintaxe para o atributo de TYPE em uma lista ordenada :
<OL TYPE=x>
onde x um dos seguintes:

TIPO 1 A A I I Descrio Nmeros arbicos (padro) Alfanumrico,minsculas Alfanumrico, maisculas Exemplo 1, 2, 3, 4, ... a, b, c, d, ... A, B, C, D, ...
Nmeros romanos, minsculas i, ii, iii, iV, ... Nmeros romanos, maisculas I, II, III, IV, ...
Nem todos os navegadores suportam o atributo TYPE. 15
Hyperlinks
Para criar um hyperlink utilizada a tag <A>, que funciona como uma ncora. A sintaxe bsica para um hyperlink :
<A HREF="Endereo_Destino"> </A> texto ou grfico do hyperlink
onde Endereo_Destino uma URL para o hyperlink e texto ou grfico do hyperlink o que o usurio v e clica para ir para o destino apontado pelo hyperlink. No exemplo a seguir, o texto "FIA/USP um hyperlink para o documento, fia.htm. O documento fia.htm est no mesmo diretrio que o documento HTML atual.
<A HREF="fia.htm">FIA/USP</A>
Tipos de Hyperlinks A tabela a seguir lista os tipos de hyperlinks que voc pode criar e um exemplo da sintaxe HTML de cada um.
Tipo de Hyperlink URL Documento no HTML Descrio Sintaxe
Um hyperlink para outra pgina de http://xxx/xxx/xxx Web. Um hyperlink para outro tipo de Arquivo:\\caminho\dir\arquivo documento, como um documento do Microsoft Word, uma planilha do Microsoft Excel, ou uma imagem. Um hyperlink para uma rea nomeada pagename#bookmarkname definida dentro de uma pgina Web. Um hyperlink que cria uma nova mailto:someone@mycompany.com mensagem endereada para um destinatrio especificado, que enviada usando o software cliente de correio instalado no equipamento do usurio. Um hyperlink para um grupo de news:xxx.xxx.xxx notcias em um site Usenet.
Marcador de pginas E-mail
Grupo de notcias
Vnculos Relativos e Vnculos Absolutos Voc pode definir hyperlinks em sua pgina Web com qualquer um de dois tipos de vnculos: ? ? Vnculos Relativos Os vnculos relativos descrevem o destino relativamente localizao do documento a partir do qual o usurio est. Voc define o caminho do hyperlink relativo removendo a raiz do caminho completo.
16
Por exemplo, um hyperlink relativo para um documento no mesmo diretrio que a pgina Web atual seria meu_docto.htm.
<A HREF="meu_docto.htm">Texto do Link</A>
Voc pode especificar tambm um arquivo contido em outra pasta no mesmo servidor especificando o hyperlink relativo do documento atual at o documento destino como exemplificado a seguir:
<A HREF="../minha_pasta/meu_arquivo.htm">Texto do Link</A>
Voc pode especificar um arquivo em outra pasta no mesmo servidor fornecendo o caminho do diretrio raiz da pgina atual para o documento destino.
<A HREF="/diretrio/arquivo.htm">Texto do Link</A>
? ? Vnculos Absolutos Um vnculo absoluto fornece um endereo completo para o hyperlink. Por exemplo, um vnculo absoluto para um documento :
C:\Meus Documentos Web \meu_docto.htm
O trecho de cdigo a seguir fornece um vnculo absoluto para uma pgina em outro servidor Web.
<A HREF="http://servidor/diretrio/arquivo.htm">Texto do Link</A>
A vantagem de hyperlinks relativos que se voc mover um grupo de arquivos para outra localizao, os endereos de hyperlinks relativos permanecem inalterados. Porm, voc deve usar um hyperlink absoluto para arquivos que: o No esto no mesmo computador servidor ou na mesma rede local. o No esto no mesmo servidor Web.
Tag Bookmark (Marcador de Pginas)

Um marcador de pginas (bookmark) uma localizao em uma pgina Web que recebe um nome. Um bookmark pode ser um destino de um hyperlink. Quando uma pgina Web se estender por mais de uma ou duas telas no comprimento, voc pode querer inserir bookmarks dentro da pgina e criar hyperlinks para estes marcadores de pginas, de forma que o usurio possa ir diretamente para a seo de interesse. Este processo freqentemente usado para criar um ndice simples para uma pgina Web muito longa, facilitando a navegao do usurio. Definir um bookmark ? ? Use a tag <A> e defina o atributo NAME. O exemplo a seguir define um marcador de pginas denominado "bookmark1":
<A Name="bookmark1">
17
Definir um hyperlink que vai para um bookmark ? ? Use a tag <A> e especifique a pgina destino, seguida por um sinal de libra (#) e o nome do bookmark. O exemplo a seguir cria um hyperlink para o bookmark "bookmark1" na pgina "meu_docto.htm".
<A HREF="meu_docto.htm#bookmark1">Te xto do Link</A>
Imagens
Imagens podem ser usadas como ferramentas de navegao. Voc pode criar uma imagem com reas de interesse que so hyperlinks que o usurio pode clicar para descobrir mais sobre um assunto. Estas reas de interesse so hyperlinks conhecidos como hotspots.
Mapas de imagem
Um mapa de imagem uma imagem composta de vrios hotspots. Os hotspots e hyperlinks que voc define para um mapa de imagem so coletivamente chamados de suas informaes de mapa ou MAP. Existem dois caminhos para prover informaes MAP: ? ? Crie um .arquivo de mapa e o coloque no servidor Web. Este mtodo produz um mapa de imagem no servidor, porque as informaes sobre o tamanho e localizao de cada hotspot, e para onde cada hotspot gera um link, residem no servidor. ? ? Coloque as informaes MAP na pgina Web propriamente: Este mtodo produz um mapa de imagem no cliente, porque as informaes MAP existem no cliente. O tpico a seguir aborda as tags HTML usadas para definir mapas de imagem. Tags de Mapa de Imagem no Servidor ? ? Para criar um mapa de imagem no servidor voc deve executar estes passos: 1. Construa um hyperlink para o arquivo de mapa de imagem no servidor. 2. Insira o atributo ISMAP para a tag HTML de imagem (<IMG>). Esta tag notifica o navegador que a imagem um mapa de imagem no servidor, em lugar de uma imagem regular que liga para uma localizao. O navegador consulta o servidor para obter informaes sobre como o mapa de imagem funciona. Esta a sintaxe HTML para o hyperlink e o atributo ISMAP:
<A HREF="/diretori o1/diretorio2/nome.map"> <IMG SRC="/diretorio1/diretorio2/nome.gif" ISMAP> </A>
18
3. Crie o arquivo de mapa e grave-o no servidor, no mesmo diretrio da imagem. O arquivo de mapa um arquivo texto que voc pode criar em qualquer editor de textos ASCII, como o Notepad. Para cada hotspot na imagem, o arquivo de mapa contm uma linha que especifica a forma, a localizao do hotspot e o respectivo hyperlink. A seguir exemplificado um arquivo de mapa de imagem.
default /default.htm rect (14,127)(116,229) /miscell aneous.htm rect (16,48)(134,109) /online.htm rect (132,5)(205,70) /whatsnew.htm rect (230,5)(314,86) /toolstech.htm
Tags de Mapa de Imagem no Cliente ? ? Para criar um mapa de imagem no cliente voc deve executar estes passos: 1. No arquivo HTML, insira o atributo USEMAP para a tag HTML de imagem (<IMG>). Esta tag notifica o navegador que a imagem um mapa de imagem no cliente. O navegador consulta a pgina Web atual para obter informaes sobre o mapa de imagem. Esta a sintaxe HTML para o atributo de USEMAP:
<IMG SRC="nome.bmp" USEMAP="#salto">
Nota: Com um mapa de imagem no cliente, nenhuma tag de hyperlink necessria. Os caracteres #salto representam o nome provido como referncia com a tag <MAP>, prefixada com o smbolo #. 2. No arquivo HTML, use as tags <MAP> e <AREA> para fornecer ao navegador as informaes de mapa necessrias: formato dos hotspots, localizaes e destino dos hyperlinks. O trecho de cdigo exemplificado a seguir mostra o uso das tags <MAP> e <AREA>:
<MAP NAME="salto"> <AREA SHAPE="RECT" COORDS="14,127,116,229" HREF="miscellaneous.htm"> <AREA SHAPE="RECT" COORDS="16,48,134,109" HREF="online.htm"> <AREA SHAPE="RECT" COORDS="132,5,205,70" HREF="whatsnew.htm"> <AREA SHAPE="RECT" COORDS="230,5,314,86" HREF="toolstech.htm"> </MAP>
19
Fornecendo Informaes para Mapas de Imagem Uma vez que nem todos os navegadores suportam mapas de imagem no cliente, voc deve oferecer as duas opes em sua pgina Web. Deste modo, se o navegador do usurio no suportar mapas de imagem no cliente, poder usar a opo de mapa de imagem no servidor. Para fornecer informaes para ambos os mapas de imagem (cliente e servidor), use esta sintaxe:
<A HREF="name.map"> <IMG SRC="name.gif" USEMAP="#nome" ISMAP> </A> <MAP NAME="nome"> </MAP>
medida que voc incorporar imagens em suas pginas Web, mantenha o seguinte em mente: ? ? Imagens de no esto automaticamente exibidas em todos os navegadores Web. Alguns navegadores no podem exibir grficos, enquanto outros fornecem ao usurio a opo de inibir a exibio de imagens. Portanto, projete a sua pgina Web de forma que o usurio possa ver as informaes com ou sem imagens. Um texto alternativo para as imagens ajuda os usurios que no podem ou optem por no v-las. ? ? Imagens podem diminuir significativamente o desempenho de sua pgina Web, especialmente para usurios com modems mais lentos. Pginas Web com imagens grandes, coloridas podem parecer excelentes, mas se sua pgina toma muito tempo para ser carregada, seu usurio Web pode perder pacincia e abandonar sua pgina. ? ? Voc pode diminuir o tempo de carga de sua pgina Web reduzindo o nmero de cores em suas imagens ou definindo atributos de altura e largura especficas. ? ? A utilizao de thumbnails aumenta o desempenho das pginas Web. Thumbnails so imagens pequenas que voc mapeia com hyperlinks para as pginas que contm as verses completas das imagens ou grficos. Com essa estratgia os usurios tm a opo de ver imagens, mas sua pgina principal ser carregada muito mais rapidamente. Existem vantagens e desvantagens associadas com mapas de imagem. Ao decidir por usar ou no mapas de imagem, considere as vantagens e desvantagens relacionadas a seguir para cada caso. Vantagens de Mapas de Imagem no Servidor ? ? Cada grfico em uma pgina carregado do servidor como um fluxo separado para o cliente. Por esse motivo, diversas imagens pequenas levaro mais tempo para carregar que uma imagem grande. ? ? Com mapas de imagem no servidor, voc pode controlar a localizao dos hyperlinks sem mudar a pgina HTML. Se um hyperlink mudar, voc s precisa mudar o arquivo de mapa de imagem no servidor. Alm disso, caso voc inclua o mesmo mapa de imagem em diversas pginas, poder atualizar todos os hyperlinks em todas as suas pginas mudando apenas o arquivo de mapa no servidor. 20
Desvantagens de Mapas de Imagem ? ? Algum navegadores no suportam mapas de imagem no cliente. ? ? Mapas de imagem no servidor exigem que o clique do mouse seja enviado para o servidor, para ser resolvido, portanto o tempo de resposta mais demorado e o trfego na rede aumenta. ? ? Quando voc usar imagens individuais em lugar de mapas de imagem, voc tem controle completo acima do plano de sua pgina Web. Nas pginas diferentes voc pode usar os mesmos elementos de grficos com o mesmo hyperlink em configuraes e planos diferentes. ? ? Com imagens individuais, quando o usurio desligar grficos (ou estiver usando um navegador que s aceita textos), o texto alternativo para cada grfico pode ainda ser visto. Um mapa de imagem mostra ao usurio s um texto alternativo, para o mapa de imagem inteiro.
Tabelas
Tabelas servem para muitos propsitos nas pginas HTML. No s so usadas da maneira convencional para exibir informaes em um formato tabular, mas tambm so usadas para fazer com que imagens e texto apaream exatamente na localizao desejada na pgina; ou seja, so essenciais para a formatao e posicionamento de elementos grficos e textuais numa pgina Web. Controlando atributos como a largura e altura das clulas das tabelas, ou ento de suas bordas e o espao adicional ao redor contedo ou entre clulas, voc pode controlar o posicionamento absoluto de qualquer objeto em sua pgina. Uma tabela criada atravs das tags <TABLE> e </TABLE> em um documento HTML. Quaisquer atributos que se aplicam para uma tabela como um todo so definidos na tag <TABLE>:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> </TABLE>
Cada linha na tabela criada usando as tags <TR> e </TR>. Como cada linha, colunas so criadas com as tags <TD> e </TD>. Qualquer elemento HTML pode ser colocado dentro das tags <TD> e </TD> (por exemplo, textos, imagens, mapas de imagem, hyperlinks ou formulrios). O cdigo exemplificado a seguir cria uma tabela de trs linhas por trs colunas em uma pgina:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> <TR><TD>R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR> <TR><TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C1</TD><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>
21
A ilustrao a seguir mostra a tabela resultante:
Largura e Altura da Tabela

Voc pode fixar a largura e a altura das clulas em uma tabela colocando os atributos WIDTH e HEIGHT dentro da tag <TD>. Se no for includo o atributo WIDTH (largura) ou HEIGHT (altura) na tag <TD>, a tabela se expandir at o tamanho da janela do navegador. A largura (ou altura) de cada coluna (ou linha) ser baseada no maior elemento naquela linha ou coluna. Uma alternativa para isto, fixar os atributos WIDTH e HEIGHT para um valor porcentual, em lugar de um tamanho fixo. Por exemplo, se voc fixar o atributo WIDTH da tag <TABLE> para 50%, a tabela sempre ocupar 50% da largura disponvel, determinada pelo tamanho da janela do navegador e se expandir automaticamente com o navegador. A tabela do exemplo anterior sempre se expandir ou se reduzir para ocupar 20% da largura da janela do navegador.
Colunas e Linhas
Voc pode usar os atributos de COLSPAN e ROWSPAN das tags <TD> e <TH para estender o contedo de uma clula em clulas adjacentes. Isto til se voc precisar criar um cabealho atravs de mais de uma coluna. Os trecho de cdigo do exemplo a seguir expande e centraliza o contedo da primeira coluna na primeira linha da tabela. O contedo da primeira coluna na segunda linha so expandidos at incluir a terceira linha da tabela:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> <TR><TD COLSPAN=3 ALIGN=CENTER>R1 C1</TD></TR> <TR><TD ROWSPAN=2>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>
22
Cabealhos de Tabelas
Voc pode especificar um cabealho (exibido em com texto em negrito) para sua tabela. Qualquer clula que usa as tags <TH> e </TH> em lugar das tags <TD> e </TD> exibir texto em negrito na tabela. O trecho de cdigo do exemplo a seguir converte o texto na linha superior para um cabealho.
<TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> <TR><TH COLSPAN=3 ALIGN=CENTER>R1 C1</TH></TR> <TR><TD ROWSPAN=2>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>
Bordas de Tabelas
Voc pode usar o atributo de BORDER para criar uma borda para sua tabela. O nmero que voc especifica para o atributo BORDER define a largura da borda. Por exemplo:
<TABLE BORDER=4>
Voc pode usar os atributos de FRAME e RULES da tag <TABLE> para controlar como a borda da tabela ser apresentada. O atributo de FRAME especifica a borda para o lados externos da tabela (bordas exteriores). O atributo de RULES especifica as linhas divisrias (bordas internas) da tabela. O trecho de cdigo exemplificado a seguir exibe uma borda em torno da tabela e bordas horizontais separando as linhas:
<TABLE BORDER=2 FRAME=box RULES=rows>
23
Ttulo de Tabelas
Voc pode inserir um ttulo para sua tabela usando a tag <CAPTION>. Use o atributo ALIGN para definir o alinhamento horizontal do ttulo. Use o atributo VALIGN para definir a posio vertical do ttulo (TOP ou BOTTOM). O trecho de cdigo exemplificado a seguir adiciona um ttulo centralizado na parte inferior da tabela:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=40%> <CAPTION ALIGN=CENTER VALIGN=BOTTOM> Minha Tabela </CAPTION> <TR><TH COLSPAN=3>R1 C1</TH></TR> <TR><TD ROWSPAN=2>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>
Colunas de Agrupamento
A tag <COLGROUP> fornece um meio para especificar atributos para uma coluna inteira em uma tabela. A ordem das tags <COLGROUP> determina a que coluna uma tag se refere. As tags no exemplo de cdigo a seguir alinham esquerda as primeiras duas colunas, e centralizam a terceira coluna.
<TABLE> <COLGROUP SPAN=2 ALIGN=LEFT> <COLGROUP ALIGN=CENTER> <TBODY> <TR> <TD>Esta coluna est no primeiro grupo e alinhado esquerda.</TD> <TD>Esta coluna est no primeiro grupo e alinhada esqurda.</TD> e <TD>Esta coluna est no segundo grupo e centralizada.</TD> </TR> </TABLE>
Tabelas Aninhadas
As tabelas podem ser aninhadas, ou seja, tabelas contendo outras tabelas dentro de suas clulas, de forma a permitir a criao de tabelas mais complexas. Para aninhar uma tabela dentro de outra, insira outro par de tags <TABLE> e </TABLE> em lugar de texto ou outro contedo numa clula. Por exemplo:
<TABLE ALIGN=LEFT BORDER=1 WIDTH=50%> <TR><TH COLSPAN=3 ALIGN=CENTER>R1 C1</TH></TR> <TR><TD ROWSPAN=2> <TABLE BORDER 1> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> </TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>
24
Pginas com Frames

Uma pgina com frames divide a janela de um navegador em sees conhecidas como frames ou quadros. Cada frame exibe uma pgina Web separada. Os frames permitem criar efeitos visuais interessantes em uma pgina Web. Por exemplo: ? ? Voc pode colocar elementos fixos, ou seja, que o usurio sempre veja, como uma barra de ttulo e alguns hyperlinks, em uma frame esttica. Estes elementos permanecero visveis mesmo quando o usurio rolar a janela do navegador para ver o restante das informaes conditas na pgina. ? ? Uma vez que cada frame definido por um arquivo HTML independente, os frames podem, por exemplo, exibir uma questo em um lado da pgina e o resultado no outro, permitindo o usurio mover-se entre eles. As pginas Web que usam frames possuem dois elementos principais: 1. O arquivo HTML principal: Este arquivo no tem nenhuma tag <BODY>, mas contm as tags necessrias para implementar cada frame da pgina. 2. Os arquivos de HTML a serem exibidos em cada frame: Cada frame na pgina tem seu prprio arquivo HTML fonte. Aqui sugerimos algumas diretrizes gerais para usar frames adequadamente: ? ? Utilize frames para exibir informaes que devam permanecer estticas em uma rea da pgina, enquanto nas outras reas as informaes mudam. Os frames so bem aplicados quando um frame contiver itens a serem escolhidos (menu com hyperlinks por exemplo), e os outras frames simultaneamente apresentem o resultado da escolha. ? ? Utilize frames sem bordas sempre que possvel. ? ? Fornea bastante espao em branco nas pginas que exibem os frames. Uma vez que os frames podem exibir muitas informaes simultaneamente, procure inserir espaos entre pargrafos, imagens e outros elementos, de forma que os frames no parecem abarrotados de informaes, pois isto faz com que as informaes nos frames fiquem mais legveis. 25
Os frames so uma caracterstica importante de projeto de uma pgina Web. Porm, eles tm algumas desvantagens: ? ? Frames dividem a janela do navegador em sees pequenas, que podem tornar mais difcil a visualizao das informaes contidas nas pginas. ? ? Frames podem confundir os usurios se no forem adequadamente projetadas para o tipo de contedo que exibem. ? ? Algum navegadores no suportam frames sem bordas, e desenharo uma borda pouco atrativa ao redor de cada frame, o que prejudica a aparncia da pgina Web.
A tag <FRAMESET>
As pginas com frames usam as tags <FRAMESET> e </FRAMESET> em vez das tags para definir o corpo do documento, <BODY> e </BODY>. A razo para isto que uma pgina com frames um recipiente em que outras pginas Web sero carregadas, do mesmo modo que as tags <BODY> e </BODY> formam um recipiente para as pginas Web que no usam bordas. As tags <FRAMESET> e </FRAMESET> definem a localizao e tamanho dos frames em uma pgina HTML. A tag <FRAMESET> tem dois atributos: ROWS e COLS. O atributo ROWS define frames horizontais. seguido por uma lista delimitada por vrgulas com os tamanhos de cada borda na pgina. Voc pode especificar tamanhos em pixel, porcentagem ou relativos. Os tamanhos em pixel so teis para bordas estticas, mas no se ajustam em resposta a variaes no tamanho da janela do navegador. Os outros mtodos so mais flexveis. No trecho de cdigo exemplificado a seguir, o primeiro frame possui 120 pixeis, o terceiro frame 20% da altura total da janela, e o segundo frame recebe o remanescente da altura:
<FRAMESET ROWS="120, *, 20%">
O trecho de cdigo do exemplo a seguir cria dois frames que dividem o tamanho completo da janela do navegador. O frame superior sempre duas vezes maior que o frame da parte inferior.
<FRAMESET ROWS="2*, *">
O atributo de COLS define uma pgina com frames verticais. Este atributo especificado do mesmo modo que atributo ROWS. O trecho de cdigo a seguir exemplifica o uso das tags para a criao de frames numa pgina Web:
<html> <!O cdigo abaixo cria um conjunto de frames com 2 colunas, uma com largura de 150 pixeis, e a outra com largura varivel, dependendo da rea disponvel na tela do navegador> <frameset cols="150,*"> <!-O cdigo abaixo descreve o comportamento da fra e da esquerda-> m <frame name="left" scrolling="no" src="http://blackbox/mainstre/MSMBODY.HTM">
26
<! O cdigo abaixo cria um conjunto de frames com duas linhas: um ocupando 20% da tela e a outra ocupando o espao restante (neste caso 80%)> <frameset rows= "20%,*"> <! O cdigo abaixo define os frames e os respectivos arquivos HTML que sero apresentados em cada frame horizontal> <frame name="rtop" target="rbottom" src="msmjumps.htm"> <frame name="rbottom" src="http://blackbox/mainstre/CUSTDATA.HTM"> </frameset> <noframes> <body bgcolor="#FFFFFF"> <p>Esta pgina utiliza frames, mas o seu navegador no os suporta.</p> </body> </noframes> </frameset> </html>
A tag <FRAME>
As tags <FRAME> e </FRAME> definem um frame nico em uma pgina com frames. Estas tags definem o arquivo de HTML para o frame, como tambm a aparncia do frame propriamente dito. A tabela seguinte descreve os atributos da tag <FRAME>.
Atributo SRC
Descrio
Exemplo
<FRAME Exibe o arquivo para a frame. Se este parmetro for omitido ser criada um frame SRC="frame1.htm"> em branco. Fornece um nome de destino para o frame.
NAME <FRAME NAME="topo"> MARGINWIDTH MARGINHEIGHT BORDER SCROLLING
Controla a largura da margem para o frame <FRAME em pixeis. MARGINWIDTH="20"> Controla a altura de margem para o frame em pixeis. Fornece a opo de exibir ou no uma borda para um frame. Cria um frame com capacidade para rolar seu contedo. Os valores so Yes, No, ou Auto. No permite que o usurio redimensione o tamanho do frame. <FRAME MARGINHEIGHT="10"> <FRAME BORDER="Yes"> <FRAME SCROLLING="Yes"> <FRAME NORESIZE>
NORESIZE
27
Roteiro para criar um Documento de HTML com frames

1. Crie um documento HTML fonte para cada frame em sua pgina Web. Os documentos fonte podem conter quaisquer tags HTML. 2. Crie um novo documento HTML que contenha as tags <HTML> </HTML> e <HEAD> </HEAD>, mas nenhuma tag <BODY> </BODY>. Isto , o documento do frame principal que ser diretamente aberto pelo navegador. 3. Na rea do documento que contm normalmente as tags <BODY>, inclua a tag <FRAMESET>. Defina os atributos para o tamanho e orientao dos frames. O trecho de cdigo exemplificado a seguir define uma pgina com dois frames horizontais:
<HTML> <HEAD> <TITLE>O Documento de Frame Principal</TITLE> </HEAD> <FRAMESET ROWS="100, *"> </FRAMESET> </HTML>
4. Para cada frame na pgina, insira uma tag <FRAME>. Configure o atributo SRC da tag <FRAME> para o nome do documento HTML que aparecer no frame. Defina outros atributos para o frame, como bordas, rolamento, espaamento e redimensionamento. Por exemplo:
<FRAMESET ROWS="100, *"> <FRAME SRC="FrameDoc1.htm" SCROLLING="No" noresize> <FRAME SRC="FrameDoc2.htm" SCROLLING="Sim" noresize> </FRAMESET>
Nota: Neste exemplo, os arquivos FrameDoc1.htm e FrameDoc2.htm precisam estar na mesma pasta do arquivo principal.
Para Navegadores Que No Suportam Frames

Nem todos os navegadores Web suportam frames. Em considerao aos usurios destes navegadores, voc deve fornecer um cdigo HTML alternativo, colocando-o entre as tags <NOFRAMES> e </NOFRAMES> no arquivo HTML do frame principal. Estas tags podem aparecer depois das tags <FRAMESET>.
Formulrios
Os formulrios fornecem um mecanismo atravs do qual usurios do seu Web Site podem se comunicar com o servidor Web. Os usurios digitam dados em um formulrio e clicam um boto para envia-los ao servidor Web.
28
Um formulrio contm tipicamente: ? ? Vrios campos de formulrio. ? ? Botes Submeter (Submit) e Limpar (Reset). Normalmente, os usurios preenchem os campos do formulrio e clicam o boto Submeter para enviar os dados para o servidor Web. O boto de Limpar (Reset) apaga os dados dos campos do formulrio. A ilustrao a seguir mostra uma formulrio com alguns campos.
Submetendo um Formulrio
Quando o usurio clica o boto Submeter ou aperta a tecla Enter, os dados dos campos do formulrio so enviados para um programa manipulador de formulrios no servidor Web. Este programa sempre executado quando um usurio submete os dados de um formulrio para o servidor. O manipulador de formulrios processa os dados submetidos e tipicamente devolve uma pgina HTML para o usurio com uma confirmao. Voc pode configurar as propriedades de um formulrio para especificar que programa manipulador de formulrios ser executado quando o usurio submeter dados atravs de um formulrio para o servidor Web. O Microsoft FrontPage fornece alguns programas padro para manipulao de formulrios que voc pode usar - FrontPage Server Extensions. Voc tambm pode construir um programa manipulador personalizado, criando uma pgina ativa (.ASP) ou uma DLL, que so executas no servidor Web.
Formulrios do Microsoft FrontPage

Os programas manipuladores de formulrios fornecidos pelo Microsoft FrontPage so conhecidos como Extenses do Servidor e devem ser instalados em seu servidor Web. A grande maioria dos provedores de acesso Internet que hospedam pginas HTML disponibilizam as Extenses do Servidor do FrontPage para seus clientes. 29
Voc pode criar os seguintes tipos de formulrios com o FrontPage: ? ? Formulrio para gravao de dados: Um formulrio para gravao de dados permite um salvar um conjunto de informaes digitadas por um usurio e armazena-las em um arquivo no servidor Web ou envia-las para um endereo de e-mail. Voc pode configurar as propriedades do formulrio para especificar onde as informaes sero gravadas ou para onde sero enviadas. Este o manipulador de formulrio padro, utilizando pelo FrontPage quando voc cria um novo formulrio. ? ? Formulrio para pesquisa: Um formulrio para pesquisa aceita critrios de busca de um usurio e procura no Web Site as pginas contenham informaes que coincidem com os critrios de busca especificados, retornando uma pgina HTML que contm hyperlinks para as pginas encontradas. Voc pode usar FrontPage para criar um formulrio de procura para seu Web Site. ? ? Formulrio de discusso: Voc pode criar um formulrio de discusso para usar em um grupo de discusso. Um grupo de discusso um Web Site que permite a manuteno de uma discusso interativa entre os usurios sobre vrios assuntos. Os usurios submetem assuntos digitando texto no formulrio de discusso. ? ? Formulrio de inscrio: Voc pode criar um formulrio de inscrio que adiciona pessoas e senhas para formar uma lista de usurios que tm permisso para acessar o seu Web Site. Voc pode criar um formulrio de inscrio de usurios criando uma nova pgina Web com o modelo de Inscrio de Usurios do Front Page. Em seguida, voc deve configurar permisses em seu Web Site para que s usurios registrados tenham acesso s suas pginas. Uma vez que voc definiu estas permisses, quando os usurios tentarem acessar uma pgina do seu Web Site, tero que preencher o formulrio de inscrio de usurios.
Controles de Formulrio
Controles HTML padro, tambm conhecidos como controles intrnsecos, so controles que voc pode inserir em um formulrio para exibir ou recuperar informaes. Todos os navegadores suportam controles HTML padro, que normalmente so chamados de campos de formulrio. Quaisquer informaes digitadas em um controle padro enviada para o servidor Web quando o usurio submeter os dados do formulrio. A ilustrao a seguir mostra um formulrio com vrios campos.
30
Tags para Criao de Formulrios

Para criar um formulrio voc usa as tags <FORM> e </FORM>. Voc pode colocar quaisquer elementos HTML entre as tags <FORM> e </FORM>, exceto outros formulrios. O trecho de cdigo HTML a seguir define um formulrio que contm vrios campos, um boto de submeter e um boto de limpar. Quando o usurio submeter o formulrio, a pgina ativa do servidor (pgina .ASP) denominada meuexemplo.asp ser executada e receber os dados dos campos do formulrio.
<FORM ACTION="/scripts/meuexemplo.asp" METHOD=POST> Nome de E-mail: <INPUT TYPE=TEXT NAME="txt" VALUE="Me Nome"><P> u Confira tudo que se aplica: <INPUT TYPE=CHECKBOX NAME="chkUsoProfissional">Uso Profissional <INPUT TYPE=CHECKBOX NAME="chkUsoDomestico">Uso Domstico<P> <INPUT TYPE=SUBMIT VALUE="Submeter"> <INPUT TYPE=RESET VALUE="Limpar"> </FORM>
Voc determina o comportamento de um formulrio atravs da definio dos atributos ACTION, METHOD e TARGET. ACTION O atributo ACTION especifica o manipulador de formulrio que dever ser utilizado pelo servidor para manipular os dados submetidos pelo formulrio. Voc configura o atributo ACTION para uma URL que especifica o nome do programa ou pgina ativa (.ASP) que receber os dados do formulrio quando o usurio submete-los. 31
METHOD O atributo METHOD indica o tipo de protocolo de manipulao de formulrio que ser usado para processar os dados submetidos ao servidor. Existem dois valores possveis para o atributo METHOD: ? ? GET Para enviar poucos dados para um servidor Web, configure o atributo METHOD para GET. Quando voc usar mtodo GET, os valores dos controles so concatenados para a URL que indica no manipulador de formulrio, e ento so enviados para o servidor. Usando este mtodo, voc poder enviar no mximo 1024 bytes de dados. Tipicamente, voc utiliza o mtodo GET para tarefas como enviar uma consulta SQL para um servidor Web a fim de pesquisar informaes numa base de dados. ? ? POST Se voc precisar enviar mais de 1024 bytes de dados para um servidor Web, configure o atributo METHOD para POST. Quando voc usar o mtodo POST, os dados do formulrio so enviados no corpo do pedido do protocolo HTTP. No existe nenhum limite para o nmero de parmetros ou para o comprimento dos valores que voc pode enviar ao usar este mtodo. Tipicamente voc usa o mtodo POST para tarefas como enviar dados para modificar registros numa base de dados. TARGET Voc pode configurar o atributo TARGET para especificar onde o resultado da submisso do formulrio ser exibido. O resultado da submisso do formulrio retorna ao cliente um novo arquivo HTML que substitui a pgina que o usurio est vendo atualmente. Se voc estiver usando frames na pgina do formulrio, configure o atributo TARGET para especificar que frame deve apresentar os resultados.
<FORM TARGET="Frame1" ...>
Controles de Formulrio
A maioria dos controles HTML definida com a tag <INPUT>. A sintaxe para a tag <INPUT> a seguinte:
<INPUT TYPE=tipo_controle NAME=nome_controle VALUE=valor_controle>
? ? O atributo TYPE especifica o tipo do controle. ? ? Com o atributo NAME, voc pode designar um nome para o controle que o identificar exclusivamente dentro de uma pgina HTML. ? ? O atributo VALUE o valor designado para o controle quando o usurio interagir com ele.
32
Controle de Caixa de texto Existem trs tipos de caixas de texto que pode ser criadas com tags HTML diferentes, como mostra a tabela s seguir:
Tipo de caixa de texto Linha nica Senha Texto com rolamento Tag HTML <INPUT TYPE=TEXT> <INPUT TYPE=PASSWORD> <TEXTAREA> </TEXTAREA>
O exemplo a seguir define um controle de caixa de texto de uma linha:

<INPUT TYPE=TEXT N AME=txtUserName VALUE="UserName@Provedor.com.br">
O exemplo a seguir define um controle de caixa de texto com rolamento:

<TEXTAREA ROWS="2" NAME="txtComments"> Algum texto na caixa </TEXTAREA>
Boto Existem trs tipos de botes: Normais, Limpar e Submeter. Para inserir estes controles, voc usa a tag <INPUT> e configura o atributo TYPE. O atributo VALUE o texto exibido na face do boto. A tabela a seguir mostra a tag HTML usada para cada tipo de boto.
Tipo de boto Normal Limpar Submeter Tag HTML <INPUT TYPE=BUTTON NAME=nome_boto VALUE="valor"> <INPUT TYPE=RESET VALUE="valor"> <INPUT TYPE=SUBMIT NAME="nome_boto" VALUE="valor">
O exemplo a seguir define um boto Normal denominado btnClickMe:

<INPUT TYPE=BUTTON NAME=btnClickMe VALUE="Me clique">
O exemplo a seguir define um boto Limpar:

<INPUT TYPE=RESET VALUE="Limpar">
Este exemplo define um boto Submeter:

<INPUT TYPE=SUBMIT NAME="btnSubmit" VALUE="Submeter">
Menu em Cascata Para adicionar um menu em cascata (tambm chamado de um controle de seleo) em um formulrio, use as tags <SELECT> e </SELECT>. Para adicionar itens para as opes do menu, use a tag <OPTION>. Para fazer um dos itens aparecer quando um usurio acessar o menu na pgina Web, adicione o atributo SELECTED para a tag <OPTION> da opo padro. 33
O prximo exemplo exibe um controle de menu em cascata que contm uma lista de preferncias. A opo Correio estar pr selecionada.
<SELECT NAME=lstPreferencia> <OPTION SELECTED VALUE="1">Correio <OPTION VALUE="2">Fax <OPTION VALUE="3">On -line </SELECT>
Para permitir que o usurio possa selecionar mais de uma opo no menu em cascata, adicione o atributo MULTIPLE para a tag <SELECT> como exemplificado a seguir:
<SELECT MULTIPLE=lstPreferencia>
Boto de Rdio Para adicionar um controle de boto de rdio em um formulrio, utilize a tag <INPUT> e configure o atributo TYPE para RADIO. Use uma tag <INPUT> separada para cada boto de rdio a ser inserido no formulrio. Para criar um grupo de botes de rdio, designe o mesmo atributo NAME para todos os botes de rdio do grupo. Para especificar qual opo ser pr selecionada quando um usurio acessar a pgina Web, adicione o atributo CHECKED para a tag <INPUT>. O exemplo a seguir exibe um grupo de botes de rdio que fornece trs opes: Sim, No, e Talvez. A opo Sim opo pr selecionada.
<INPUT TYPE=RADIO CHECKED NAME=optQuestao VALUE="Sim">Sim <INPUT TYPE=RADIO NAME=optQuestao VALUE="No">No <INPUT TYPE=RADIO NAME=optQuestao VALUE="Talvez">Talvez
Caixa de Verificao Para adicionar um controle de caixa de verificao em um formulrio, use a tag <INPUT> e configure o atributo de TYPE para CHECKBOX. Para fazer a caixa de verificao aparecer selecionada quando o usurio acessar a pgina, adicione o atributo CHEKED para a tag <INPUT>. Para adicionar um texto descritivo para a caixa de verificao, inclua o texto depois da tag <INPUT>. O exemplo a seguir ilustra a criao de uma caixa de verificao:
<INPUT TYPE=CHECKBOX NAME=chkUsoProfissional VALUE="Profissional" CHEKED>Uso Profissional <INPUT TYPE=CHECKBOX NAME=chkUsoPessoal VALUE="Pessoal">Uso Pessoal
34
Controle Escondido Para adicionar um controle escondido em um formulrio, use a tag <INPUT> e configure o atributo de TYPE para HIDDEN. Configure o atributo VALUE para o texto que voc deseja que seja enviado com o controle escondido. O trecho de cdigo a seguir cria um controle escondido denominado "hdnNome". Quando o usurio submeter o formulrio, o texto para o atributo VALUE enviado para o servidor.
<INPUT TYPE=HIDDEN NAME=hdnName VALUE="Informaes voc no quer que o usurio veja">
Para mudar o formato de um formulrio, voc pode adicionar tags HTML ou mudar os atributos das tags existentes. Ordem de Tabulao Para definir a ordem de tabulao dos controles do formulrio, configure o atributo TABINDEX de cada controle, como o apresentado no exemplo a seguir. Designe "1" para o controle que estar selecionado o usurio abrir a pgina; designe "2" para o prximo controle que receber o foco quando o usurio apertar a tecla de tabulao, e assim por diante.
<INPUT TYPE=TEXT NAME=txtName TABINDEX=2>
Adicionando um Ttulo Se voc adicionar um ttulo para um controle, o usurio pode selecionar o controle clicando o ttulo ou o controle. Para adicionar um ttulo, primeiro configure o atributo ID do controle para o qual voc deseja associar um ttulo. O atributo ID especifica um nome para o controle. Em seguida, adicione a tag <LABEL> e configure o atributo FOR para definir o ID do controle. O cdigo exemplificado a seguir cria um ttulo para o boto de rdio "optColor1".
<INPUT TYPE="RADIO" NAME=optVerde VALUE=1 ID=optColor1> <LABEL FOR=optColor1> Verde </LABEL>
Teclas de Acesso Para criar uma tecla de acesso para um controle, configure o atributo ACCESSKEY da tag <LABEL> do controle. O trecho de cdigo a seguir define uma tecla de acesso para a opo Verde. O cdigo sublinha a letra "V" para fornecer uma sugesto visual para o usurio.
<INPUT TYPE="RADIO" NAME=optVerde VALUE=1 ID=optColor1> <LABEL FOR=optColor1 ACCESSKEY="V"><u>V</u>erde </LABL> E
35
Programao Orientada para Objetos com Scripts

Introduo
O desenvolvimento de scripts baseado no modelo de programao orientada para objetos. A programao orientada para objetos permite que voc escreva cdigos associados a objetos especficos em seu aplicativo. Um objeto uma combinao de cdigo e dados que podem ser tratados como uma unidade. Um objeto pode ser um pedao de uma pgina de aplicativo ou Web, como um controle, ou a pgina inteira propriamente dita. Por exemplo, um boto de comando que voc coloca em um formulrio em uma pgina HTML um objeto. Todos os objetos possuem as seguintes caractersticas: ? ? Propriedades ? ? Mtodos ? ? Eventos
Propriedades
As propriedades so os atributos de um objeto, como seu tamanho, legenda e cor. Voc pode configurar propriedades de um objeto quando adicionar um objeto em uma pgina Web em tempo de projeto, ou quando escrever scripts para alterar propriedades de um objeto quando um usurio interagir com ele.
Mtodos
Os mtodos so as aes que um objeto pode executar. Por exemplo, um objeto formulrio possui o mtodo submeter. Voc pode escrever scripts para invocar os mtodos de um objeto. Por exemplo, voc pode executar a seguinte linha de cdigo para submeter manualmente o contedo de um formulrio para o servidor:
MeuForm.Submit
Eventos
Os eventos so procedimentos que um objeto invoca em resposta a aes de um usurio ou do sistema. Por exemplo, um boto de comando tem um procedimento de evento chamado OnClick que executado quando um usurio clica o boto. Voc pode adicionar scripts para procedimentos associados a eventos; sempre que o evento ocorrer, o script ser executado. Cada objeto possui um conjunto separado de procedimentos associados a eventos. Se voc tiver dois botes de comando em uma pgina Web, cada boto tem seu prprio evento OnClick. Por exemplo, um boto submeter em um formulrio pode executar um cdigo
36
para submeter os dados do formulrio para o servidor, enquanto que um boto Limpar pode apagar todos os campos para que o usurio redigite os dados.
Programao com Scripts

Na Web, a programao no cliente, ou seja, a ser executada pelo navegador, sempre realizada atravs de linguagens de script, e dempenha um papel importante na criao de pginas Web com contedo ativo. Usando uma linguagem de script, voc pode criar pginas Web ativas que: o Fornecem respostas para perguntas e questes do usurio. o Validam dados do usurio. o Calculam expresses. o Forneam links para outros aplicativos. o Manipulam controles ActiveX e Java Applets.
Script no Servidor X Script no Cliente

Voc pode escrever scripts que so executados no navegador do cliente ou no servidor Web. Dependendo das necessidades do seu Web Site, voc pode usar scripts de cliente, scripts de servidor, ou ambos. Scripts no Cliente Para usar scripts no cliente, voc embute o cdigo-fonte do script na pgina HTML como um texto ASCII. Quando a pgina for carregada do servidor para o cliente, o cdigo do script no compilado. Conseqentemente, algum pode ver ou copiar o seu script, obtendo seu cdigo-fonte HTML, ou seja, o script no cliente torna aberto o cdigo-fonte das suas pginas Web. Quando um navegador encontra um script, ele chama um interpretador adequado que analisa gramaticalmente e executa o cdigo. Portanto, para que seus usurios possam ter acesso completo s caractersticas de uma pgina Web que contm scripts, eles devem estar utilizando um navegador que os suporta, como o Microsoft Internet Explorer ou o NetScape Navigator, verses 4.0 ou superiores. Scripts no Servidor Quando h scripts no servidor, seu cdigo-fonte executado pelo prprio servidor Web antes da pgina ser retornada ao usurio. Um script no servidor cria uma pgina HTML normal de retorno, portanto, o usurio nunca v o cdigo-fonte do script executado no servidor. Para usar scripts no servidor, seu servidor Web precisa suportar pginas de servidor ativas (Active Server Pages ou ASP), recurso que foi introduzido no servidor Web Microsoft Internet Information Server (IIS) a partir da verso 3.0.
37
? ? Para criar uma pgina Web que contenha script no servidor execute os seguintes passos: 1. Adicione um script no servidor como um texto ASCII para a pgina. 2. Salve a pgina como um arquivo ASP (Pgina Ativa no Servidor). Quando o usurio solicitar a pgina com a extenso ASP: ? ? O servidor Web inicia os scripts. ? ? Processa o cdigo contido nos scripts. ? ? Gera o cdigo HTML para retornar o resultado ao usurio atravs do navegador. Embora voc possa usar at o Notepad para criar pginas ASP, editores como o 1st Page 2000, o Microsoft Visual InterDev ou outros editores de cdigo Web, fornecem uma interface muito mais poderosa. A deciso de usar script no servidor ou script no cliente depende da funcionalidade que voc deseja dar para as suas pginas Web. Por exemplo, se voc quiser validar os dados que o usurio digitou em um campo de CPF em um formulrio de uma pgina Web, um script no cliente , sem dvida, o mtodo mais apropriado. O cdigo-fonte do script executado pelo navegador e apenas os dados vlidos so submetidos para o servidor. Porm, se voc estiver construindo um Web Site para comrcio eletrnico, onde os dados so recuperados e atualizados em uma base de dados on-line, voc pode usar scripts no servidor para recuperar os dados da base de dados antes de retornar pginas Web para os seus usurios.
Linguagens de Script
Existem atualmente duas linguagens de script mais utilizadas: Visual Basic Scripting Edition (VBScript) e JavaScript, sendo que esta ltima ainda possui uma variao desenvolvida pela Microsoft denominada JScript. Visual Basic Scripting Edition O Visual Basic Scripting Edition um subconjunto da linguagem Visual Basic da Microsoft para Aplicativos. O VBScript suportado apenas pelo navegador Microsoft Internet Explorer verso 3.0 e superiores. JavaScript O JavaScript um a linguagem C-like baseada em Java, desenvolvida em parceria pela Sun Microsystems Inc. e pela NetScape Communication Corporation. JavaScript suportada pelo navegador NetScape Navigator verso 2.0 ou superior e pelo navegador Microsoft Internet Explorer verso 3.0 ou superior. H, porm, algumas pequenas diferenas de sintaxe entre o JavaScript suportado pelo Microsoft Internet Explorer e o pelo NetScape Navigator. Estas diferenas deram origem uma variao do JavaScript denominada JScript, aceita apenas pelo Microsoft Internet Explorer, e devem ser observadas quando da construo de pginas Web que devem funcionar perfeitamente nos dois navegadores.
38
O Visual Basic Scripting Edition e o JavaScript so bem parecidos em termos de funes e recursos. Ambos so orientados para objeto e suportam a criao de objetos, resposta a eventos, funes, mtodos e propriedades. A sintaxe a principal diferena entre os ambos.
A Tag <SCRIPT>
Qualquer cdigo script sempre deve estar contido dentro das tags <SCRIPT> e </SCRIPT>. O atributo LANGUAGE diz ao navegador que interpretador deve ser utilizado quando o cdigo for executado. Para o VBScript, deve-se configurar o atributo LANGUAGE para "VBScript"; para JavaScript, deve-se configurar o atributo LANGUAGE para "JavaScript". Voc precisa especificar a linguagem script a ser utilizada porque alguns navegadores, como Microsoft Internet Explorer, podem usar mais de uma linguagem de script e voc pode utilizar mais de uma linguagem script numa mesma pgina Web. Nota: no Internet Explorer, se voc no configurar o atributo LANGUAGE, o navegador assume que voc est executando JavaScript. Se seu cdigo for em VBScript, voc receber erros de sintaxe. Ao escrever scripts, voc deve colocar todo o cdigo de cada procedimento dentro da mesma tag <SCRIPT>. Voc pode ter vrios procedimentos numa mesma tag <SCRIPT>, mas no pode dividir o cdigo de um mesmo procedimento entre duas tags <SCRIPT>. Embora sua pgina HTML possa conter mais de uma tag <SCRIPT>, a manuteno do cdigo se tornar muito mais fcil se todo ele estiver contido no mesmo lugar. Voc pode colocar a tag <SCRIPT> no <BODY> ou, de preferncia, nas sees <HEAD> das pginas HTML.
Usando Visual Basic Scripting

O trecho de cdigo exemplificado a seguir escrito em VBScript. Ser executado quando o usurio clicar um boto denominado btnHello da pgina Web:
<SCRIPT LANGUAGE="VBScript"> <!-Sub btnHello_OnClick() MsgBox "Oi, mundo!" End Sub --> </SCRIPT> <INPUT TYPE=BUTTOM NAME=btnHello VALUE="Me cliqu "> e
Nota: navegadores que no entendem a tag <SCRIPT> exibem o cdigo na pgina HTML como se ele fosse um texto regular. Por esse motivo, sempre coloque o cdigo de scripting entre tags de comentrio () para evitar que navegadores que no entendem que a tag <SCRIPT> exibam o cdigo-fonte na pgina HTML como se fosse um texto.
39
Usando JavaScript
O cdigo exemplificado a seguir escrito em JavaScript. Ele cria uma funo que solicita ao usurio a sua identificao (ID). A tag HTML para o boto cmdTest especifica o procedimento a ser executado quando um usurio clicar o boto.
<SCRIPT LANGUAGE=JavaScript> var ID function getid() { ID = prompt("Entre seu nmero de identificao:"); } </SCRIPT> <INPUT TYPE=buttom NAME=cmdTest OnClick="getid();">
Executando Scripts
A localizao de um script dentro da seo <SCRIPT> de uma pgina Web determina quando o script deve ser executado. Em geral, voc pode adicionar scripts nas seguintes reas: ? ? Nas linhas de cdigo: Se voc adicionar scripts fora de um procedimento, o script executado quando o navegador o encontrar, enquanto estiver fazendo o download da pgina, do servidor para o cliente. Isto til se voc quiser inicializar dados ou objetos na pgina. ? ? Procedimentos: Se voc adicionar scripts em um procedimento, o cdigo do script executado quando o procedimento for explicitamente invocado. ? ? Procedimento Associado a Evento: Se voc adicionar scrips em um procedimento associado a um evento, o script executado quando o evento ocorrer. Por exemplo, se voc criar um procedimento de evento OnClick para um boto, o script executado quando o usurio clicar o boto.
Componentes Ativos
Os objetos como controles ActiveX e Java Applets desempenham um papel importante na construo de contedo de Web interativa. Em uma pgina HTML, estes tipos de objetos aprimoram a interface de usurio. Existem centenas de controles e Applets que voc pode usar em uma aplicao de Web. Uma vez identificada a funcionalidade que voc deseja, voc pode selecionar o objeto (um controle ActiveX ou um Java Applet) que fornece aquela funcionalidade, e ento simplesmente inserir o objeto na sua pgina Web.
40
Segurana
Para assegurar um mtodo seguro e confivel de distribuir software atravs da Internet, a Microsoft e outras companhias de software desenvolveram um mtodo de assinatura digital do cdigo. Controles Assinados Para assinar o cdigo de um controle, o desenvolvedor do controle obtm um certificado digital de uma autoridade de certificao. Um controle com assinatura digital no necessariamente um controle seguro. O certificado digital s garante que o cdigo sendo carregado foi construdo e assinado por um desenvolvedor qualificado, e que ele no foi alterado ou corrompido por terceiros. Os usurios podem determinar se preferem carregar e executar controles ActiveX ou Java Applets definindo o nvel de segurana do navegador e descobrindo se o controle foi assinado para aquele nvel com um certificado digital. Voc define opes de segurana na caixa de dilogo Opes de Segurana do Microsoft Internet Explorer. Quando o nvel de segurana padro for selecionado, voc pode especificar como quer carregar controles assinados ou no. As seguintes opes esto disponveis:
Opo Enable Prompt Disable Descrio Carregue automaticamente o controle. Avise o usurio antes de carregar. No carregue o controle.
Nveis de Segurana Como voc assinou controles e um nvel de segurana do navegador for selecionado, voc pode especificar como Internet Explorer trabalhar com o controle. As seguintes opes esto disponveis.
Opo Enable Prompt Disable Descrio Execute/rode automaticamente. Avise o usurio antes de executar/rodar. No execute/rode.
Controles Seguros Os controles que podem ser inicializados com valores em tags HTML <PARAM> devem ser marcados como seguros por serem inicializados antes do Internet Explorer ler as tags <PARAM>. Quando Internet Explorer encontrar um controle em uma pgina Web que tem etiquetas de inicializao, ele questionar o controle para determinar se seguro para inicializao. O
41
resultado deste questionamento, combinado com o nvel de segurana fixado pelo usurio, determina se o controle ser inicializado. Controles Seguros para Scripting Quando o desenvolvedor de controles marcar um controle como seguro para scripting, estar garantindo que o modelo de objeto do controle no causar um problema de segurana, quer seja na forma de corrupo de dados ou vazamentos de segurana. Um controle marcado como seguro para scripting garante que no existem quaisquer propriedades ou mtodos disponveis para uso pelo cdigo de script que pode danificar o computador do usurio. Por exemplo, um controle que permite que informaes sejam gravadas no disco rgido no deve ser marcado como seguro para scripting. Quando o Internet Explorer encontrar um controle em uma pgina de Web, ele questiona o controle para determinar se seguro para scripting. O resultado deste questionamento, combinado com o nvel de segurana definido pelo usurio, determina se o controle est disponvel para ser utilizado no script ou no.
Controles ActiveX
Os controles de ActiveX so objetos ou componente que voc pode inserir em uma pgina Web ou outras aplicaes que podem se tornar recipientes ActiveX. Estes controles: ? ? Podem ser construdos com linguagens como C, Visual C++, Visual Basic, Delphi e Java. ? ? So tipicamente construdos como dynamic-link-libraries (DLLs). ? ? So compilados com uma extenso .OCX A ilustrao a seguir mostra como controles ActiveX trabalham em uma pgina Web.
Como os Controles ActiveX Trabalham

Para executar um controle ActiveX em uma pgina Web ou em uma aplicao, o computador do usurio j deve ter instalado e registrado o controle. Se o controle exigir funcionalidade adicional de DLLs, as DLLs devem ser tambm instaladas no computador do usurio. Quando voc cria uma aplicao isolada que usa controles de ActiveX, normalmente ser necessrio criar um programa de instalao que: ? ? Instale a aplicao, os arquivos .OCX, e quaisquer DLLs necessrias no computador do usurio. ? ? Registre os controles ActiveX no registro do Windows. Como resultado, quando a aplicao for executada, os arquivos .OCX devem estar prontos para uso.
42
As pginas Web no tm programas de instalao, portanto os arquivos .OCX e as DLLs podem ser carregados e instalados quando o usurio acessar a pgina Web se necessrios. O controle deve ser instalado antes que a pgina Web possa ser executada corretamente. Para inserir controles em uma pgina Web e assegurar que eles esto corretamente instalados, voc utiliza a tag <OBJECT> e define o atributo CODEBASE.
Download de Componentes via Internet

O Internet Component Download um componente do Internet Explorer que procura por controles ActiveX e ento os carrega se eles no estiverem presentes no computador do usurio.
Como os Componentes so Carregados

Quando Internet Explorer encontrar uma tag <OBJECT>, tenta localizar o controle no computador do usurio o primeiro procurando no registro do Windows. Se o controle no est registrado, o navegador carrega o objeto na localizao especificada no atributo CODEBASE. Se o controle registrado no computador do usurio, o Internet Explorer tenta carregar (ou instanciar) o objeto. Se esta operao falha, o Internet Explorer tenta carregar o controle como se o objeto no fosse registrado. A ilustrao a seguir mostra a um grfico que ilustra como o Microsoft Internet Explorer carrega controles ActiveX. Os controles carregados so instalados na pasta \Windows\Occache. No so automaticamente removidos quando o usurio esvaziar a pasta de arquivos Internet temporrios.
43
O Caminho de Procura na Internet

Se voc no especificar um atributo CODEBASE para um objeto, ou se a localizao que voc especificar no contiver os arquivos que desejados, o Internet Explorer tenta automaticamente localizar o objeto usando o caminho de procura na Internet. O caminho de procura na Internet uma lista de servidores que armazenam objetos e que pesquisado cada vez que componentes so carregados. Um armazm de objetos no caminho de procura na Internet um servidor HTTP que processa pedidos para cdigo que pode ser carregado. Ao procurar um objeto, o Internet Explorer verifica localizaes no caminho de procura na Internet. Ele sempre usa a primeira resposta bem sucedida de um servidor e no continua a procurar por verses de componentes mais novas.
Java Applets
A linguagem Java, uma derivao da linguagem C++, desenvolvida pela Sun Microsystems Inc. para ser uma linguagem robusta, segura e multi-plataforma a ser usada na Internet. Voc pode usar Java para criar aplicaes isoladas e Java Applets. Applets so um tipo de objeto que podem ser inseridos em uma pgina HTML. Os Java Applets so programas pequenos, reutilizveis que expem uma interface padro e so executados em um recipiente como um navegador Web.
44
Como Java Applets Trabalham nas Pginas Web

Quando arquivos-fonte em Java (.java) so compilados, o compilador Java cria arquivos Java bytecode (.class). Quando estes arquivos de classe so carregados para o computador de um usurio, eles so localmente interpretados pela Mquina Virtual de Java Virtual (JVM - Java Virtual Machine). Voc pode instalar o JVM como parte de um navegador Web, ou carregar-lo da Internet. Para adicionar Java Applets em uma pgina HTML, voc usa a tag <APPLET>. O atributo CODE desta tag especifica o arquivo de classe do applet. Para um applet ser executado em um navegador Web: ? ? O computador do usurio deve ter o JVM instalado. ? ? A segurana do navegador deve ser configurada de forma a habilitar a execuo de Applets. A ilustrao a seguir mostra como arquivos de Java so interpretados.
Controles ActiveX vesus Java Applets

Obviamente, existem vantagens e desvantagens a usar controles ActiveX e Java Applets nas pginas Web. Ao usar controles ActiveX, voc deve considerar os seguintes aspectos: ? ? Desempenho: Os controles de ActiveX so compilados em cdigo nativo, portanto, so executados mais rapidamente do que Java Applets.
45
? ? Familiaridade para o desenvolvedor: Muitos programadores de Visual Basic e Visual C j usam controles ActiveX por conhecer melhor estas linguagens. ? ? Disponibilidade: Existem muitos controles ActiveX que so includos com Visual Basic ou que podem ser adquiridos de um desenvolvedor autnomo. Alm disso, vrios controles esto livremente disponveis na Web. ? ? Suporte do navegador: Os controles ActiveX sero executados em qualquer navegador que suporte a tag <OBJETO>. Para navegadores que suportam apenas a tag <EMBED>, um plug-in da Netscape est disponvel. ? ? Plataforma especfica: Como os controles ActiveX so compilados em cdigo nativo, eles trabalham s nas plataformas para as quais foram construdos, isto , Windows. Porm, voc pode fornecer um arquivo que carrega o controle correto para a plataforma em que o navegador estiver sendo executado. ? ? Segurana: Os controles ActiveX podem ser programados para ser maliciosos e perigosos. Para adicionar segurana para suas pginas Web, voc deve sempre usar controles com assinatura. Os usurios do Internet Explorer podem ver o certificado digital de um controle com assinatura antes de decidir carreg-los. Ao utilizar Java Applets, voc deve considerar os seguintes aspectos: ? ? Desempenho: Os Java Applets so executados mais lentamente do que arquivos que so compilados em cdigo nativo. Devido natureza interpretada da linguagem Java, este aspecto especialmente percebido em Java Applets grandes e em aplicaes Java. Tecnologias recentes, como compiladores just-in-time, resolvem parcialmente este problema. ? ? Tamanho reduzido: O Java Applets tendem a ser menores que outros tipos de arquivos executveis, porque as funes de biblioteca so residente na Mquina Virtual de Java (JVM) e no so trazidas para o computador do usurio quando os Applets so carregados. ? ? Independncia de navegador: O nico requisito para um Java Applet poder ser executado em um navegador que o navegador suporte o JVM. Quando um applet for executado, parecer que est sendo executado pelo navegador. Porm, o Applet est realmente sendo completamente executado pelo JVM. Java uma linguagem em evoluo. Portanto, navegadores habilitados em Java e JVM podem se comportar diferentemente para especificaes diferentes e executar Java
46
Applets ligeiramente diferentemente do planejado. A medida que a linguagem Java amadurece, este problema tende a ser reduzido. ? ? Independncia de plataforma: A linguagem Java e a arquitetura JVM foram projetados para serem executados em qualquer plataforma. ? ? Segurana: Os Java Applets so implementados com um modelo de segurana rgida. Neste modelo, o Applet executado em seu prprio espao, ou sandbox. O modelo sandbox no permite a um Applet executar as seguintes tarefas: o Executar operaes de entrada/sada de arquivos ou bancos de dados. o Executar chamadas para o sistema operacional. o Iniciar ou se comunicar com outras aplicaes fora da pgina Web atual. o Abrir um canal de comunicao para um servidor diferente do servidor do qual foi carregado. Por causa destas restries, extremamente difcil para um desenvolvedor de Java Applets intencionalmente ou acidentalmente criar um Applet malicioso ou perigoso. Nota: o Internet Explorer categoriza classes Java como confiveis ou no confiveis. As classes no confiveis so executadas em seu prprio espao de aplicao, dentro da sandbox, portanto, eles no podem usar servios COM. As classes confiveis so as nicas classes que podem usar o Modelo de Objetos de Componentes (COM) e servios, estando livres das restries da sandbox.
A tag <OBJECT>
A tag <OBJECT> possui atributos que definem o controle ActiveX, sua localizao, e como o controle ser exibido em uma pgina HTML. Os pargrafos seguintes descrevem estes atributos. CLASSID Quando um controle ActiveX estiver instalado em computador de um usurio, registrado no registro do sistema com uma classe com um identificador (ID) nico. O atributo CLASSID, que contm a identificao da classe (ID), o nico atributo exigido para a tag <OBJECT>. A sintaxe para o atributo CLASSID :
CLASSID = "clsid:12345678 -1234-1234-1234-123456789012"
O cdigo exemplificado a seguir mostra a tag <OBJECT> para o um controle de Calendrio:

<OBJETO classid="clsid:8E27C92B -1264-101C-8A2F-040224009C02" > </OBJECT>
47
Quando voc usa o Microsoft FrontPage para inserir um controle, o FrontPage procura automaticamente o registro para a classe ID do controle selecionado e o grava na tag <OBJECT> gerada. Voc pode determinar a classe ID para um controle manualmente usando uma das seguintes ferramentas: ? ? Editor de Registro (RegEdit): Esta ferramenta habilita voc a mudar definies no registro do seu sistema. Voc pode utiliza-lo tambm para ver e copiar a classe ID de um objeto. Para iniciar o Editor de Registro, execute regedit.exe. ? ? Visualizador de OLE (Ole2View): Esta aplicao est disponvel no Visual Basic. ID O atributo ID o habilita a se referir a um objeto construdo com o Visual Basic Scripting Edition (VBScript). O cdigo exemplificado a seguir mostra como fixar o atributo ID do controle de Calendrio:
<OBJECT classid="clsid:8E27C92B -1264-101C-8A2F-040224009C02" id=cldCalendar2 > </OBJECT>
CODEBASE O atributo CODEBASE uma URL que aponta para um arquivo contendo a implementao de um objeto. WIDTH, HEIGHT, ALIGN, HSPACE, VSPACE, e BORDER Estes atributos afetam a forma com a qual um objeto posicionado e dimensionado numa pgina HTML, e se ele conter ou no uma borda.
Provendo uma Alternativa para a tag <OBJECT>

Para navegadores que no suportam a tag <OBJECT>, ou para usurios que no habilitaram controles ActiveX em seu navegador Web, voc deve prover um caminho alternativo para fornecer a mesma funcionalidade nas suas pginas. Se um navegador Web no exibe controles ActiveX, ele exibir quaisquer tags HTML que forem colocadas entre as tags <OBJETO> e </OBJECT>. Nota: se um navegador suporta a tag <OBJECT>, mas o usurio no instalou o controle ActiveX, o navegador exibir um cone de controle invlido, e no a funcionalidade alternativa. Por exemplo, para navegadores que no exibem o controle de Calendrio, voc pode colocar um controle de caixa de texto na pgina Web para um usurio entrar a data, como exemplificado no cdigo seguinte: 48
<OBJECT classid="clsid:8E27C92B -1264-101C-8A2F-040224009C02" >Melhor visualizado com o Internet Explorer.<P> Digite uma data aqui: <INPUT TYPE=TEXT NAME="Date" MAXLENGTH=10 SIZE=10> </OBJECT>
O Atributo CODEBASE
O atributo CODEBASE para a tag <OBJECT> contm uma URL absoluta ou relativa que aponta para o arquivo .OCX do controle especificado. Se um controle ActiveX no possuir quaisquer outros arquivos diferentes de .OCX, voc pode especificar a localizao do arquivo .OCX com o atributo CODEBASE. O cdigo exemplificado a seguir carrega um controle ActiveX fornecendo a referncia ao arquivo .OCX:
<OBJECT CLASSID="clsid:99B42120 -6EC7-11CF-A6C7-00AA00A47DD2" CODEBASE="http://server/control.ocx"> </OBJECT>
Se um controle ActiveX possuir Dlls adicionais para ser executado, voc deve prover tambm: ? ? Um arquivo .CAB que contm a relao de todos os arquivos necessrios. ? ? Um arquivo .INF que especifica onde instalar cada um dos arquivos necessrios. O cdigo exemplificado a seguir carrega e instala um controle ActiveX provendo a referncia necessria atravs de um arquivo .CAB:
<OBJECT CLASSID="clsid:99B42120 -6EC7-11CF-A6C7-00AA00A47DD2 CODEBASE="http://server/control.cab"> </OBJECT>
Especificando um Nmero de Verso

Com o atributo CODEBASE, voc pode incluir tambm um nmero da verso para ter certeza que os usurios s carregaro uma verso especfica do controle. No cdigo exemplificado a seguir, o atributo CODEBASE especifica o nmero de verso 4.70.1165:
<OBJECT CLASSID="CLSID:7823A620 -9DD9-11CF-A662-00AA00C066D2" CODEBASE="iemenu.ocx#Verso=4,70,0,1165">
O formato do nmero de verso N,N,N,N. Se voc no especificar um nmero de verso, o Internet Explorer usa qualquer verso do controle que estiver instalada no computador do usurio.
49
Para ter certeza de que um controle sempre ser carregado para o computador do usurio, especifique o nmero de verso 1, 1, 1, 1.
Definindo as Propriedades dos Controles

Os valores iniciais que voc estabelece para as propriedades de um controle ActiveX definem como o controle ser exibido quando o navegador carreg-lo para a pgina HTML. Para definir as propriedades iniciais de objeto para um controle ActiveX, voc usa as tags <PARAM>. A tag <PARAM> usa a seguinte sintaxe:
<PARAM NAME="ParameterName" VALUE="Valor">
Para cada propriedade do controle, voc usa uma tag <PARAM> separada. O cdigo exemplificado a seguir mostra a tag <OBJECT> para o controle ActiveX Label. O controle tem valores de propriedade iniciais definidas para ngulo, Alinhamento e Legenda.
<OBJECT classid="clsid:99B42120 -6EC7-11CF-A6C7-00AA00A47DD2" id=lblActiveLbl width=250 height=250 > <PARAM NAME="Angle" VALUE="90"> <PARAM NAME="Alignment" VALUE="2"> <PARAM NAME="Caption" VALUE="Hello, World !"> </OBJECT>
Nota: para determinar os nomes de propriedade e valores suportados por um objeto, veja o arquivo de Ajuda (Help) do objeto, ou use o Object Navegador do Microsoft Visual Basic da Microsoft.
Usando Java Applets

Para inserir um Java Applet, voc adiciona a tag <APPLET> em um arquivo HTML. A tag <APPLET> tem vrios atributos que definem o applet, sua localizao, e como ele ser apresentado na pgina HTML. Os seguintes atributos so obrigatrios: ? ? CODE Identifica o nome do arquivo .CLASS a ser carregado (este atributo sensvel a letras maisculas e minsculas). ? ? WIDTH Especifica a largura da rea em que o applet ser executado. ? ? HEIGHT 50
Especifica a altura da rea em que o applet ser executado. O cdigo exemplificado a seguir mostra como usar a tag <APPLET> para Java Applet Outline:
<APPLET CODE=Outline.class HEIGHT=150 WIDTH=200> </APPLET>
O cdigo a seguir mostra a sintaxe para a definio dos atributos da tag <APPLET>:
<APPLET ALIGN=LEFT|CENTER|RIGHT|TOP|MIDDLE|BOTTOM CODE=appletFile CODEBASE=codebaseURL HEIGHT=pixels HSPACE=pixels NAME=appletInstanceName VSPACE=pixels WIDTH=pixels> </APPLET>
A tabela a seguir define os atributos que voc pode configurar para a tag <APPLET>
Atributo ALIGN
Definio Especifica o alinhamento do applet em relao ao texto. Os valores possveis so LEFT, CENTER, RIGHT, TOP, MIDDLE e BOTTOM. O valor padro LEFT. Nome do arquivo .ZIP que contm os arquivos .CLASS usados pelo applet. Nome do arquivo que contm a subclasse compilada. Este arquivo relativo para a URL do applet (a pasta em que o applet est localizado). O arquivo no pode ser um valor absoluto. Especifica a URL do applet. Se este atributo no for especificado, a URL da pgina HTML ser usada. Especificam a largura e a altura inicial (em pixeis) para a rea de exibio do applet. Esta rea no inclui quaisquer janelas ou caixas de dilogo invocadas pelo applet. VSPACE especifica o nmero de pixeis acima e abaixo do applet. HSPACE especifica o nmero de pixeis em cada lado do applet. Identifica um applet para outro applets na mesma pgina HTML.
Exigido No
ARCHIVE CODE
No Sim
CODEBASE WIDTH e HEIGHT VSPACE e HSPACE NAME
No Sim
No No
51
Provendo uma Alternativa para a tag <APPLET>

Para navegadores que suportam a tag <APPLET>, ou para usurios que no habilitaram Java Applets em seu navegador Web, voc deve prover um caminho alternativo para fornecer a mesma funcionalidade na pgina. Se um navegador Web no exibe Java Applets, ele exibir quaisquer tags HTML que voc colocar entre as tags <APPLET> e </APPLET>. No cdigo exemplificado a seguir, o HTML alternativo informa aos usurios que o Java Applet no est disponvel, e usa hyperlinks para fornecer a mesma funcionalidade que Java Applet Outline:
<APPLET CODE=Outline.class HEIGHT=150 WIDTH=200> Voc no pode executar o Java applet Outline. <UL> <LI><A HREF="default.htm">State University Home Page</A></LI> <LI><A HREF="majors.htm">State University Majors</A></LI> </UL> </APPLET>
Definindo as Propriedades de um Java Applet

De forma semelhante a controles ActiveX, valores de propriedade iniciais definem como um Java Applet aparecer quando o navegador carregar a pgina HTML. Para definir as propriedades iniciais de Java Applets, voc utilizar as tags PARAM>. A seguinte sintaxe utilizada para as tags <PARAM>:
<PARAM NAME=appletParameter1 VALUE=value>
Por exemplo, para especificar o arquivo que contm informaes para o Java Applet Outline, voc define o parmetro TOCFile, como exemplificado no cdigo a seguir:
<APPLET CODE=Outline.class WIDTH=150 HEIGHT=200 > <PARAM NAME=TOCFile VALUE="contents.toc"> </APPLET>
Se os arquivos .CLASS para um Java Applet estiverem localizados em uma pasta diferente da que est a pgina HTML, voc deve adicionar o atributo CODEBASE para uma tag <APPLET>. O valor do atributo CODEBASE pode ser uma URL absoluta ou relativa. O cdigo exemplificado a seguir mostra a tag <APPLET> para o Java Applet Outline contido na pasta relativa applets/javaapps:
<APPLET CODE=Outline.class CODEBASE="applets/javaa pps" > </APPLET>
52
Distribuio de Java Applets

Por definio, Java Applets so carregados um arquivo .CLASS de cada vez e em um formato no comprimido. medida que os applets se tornam mais complexos e contam com mais de um arquivo, este mtodo de carga se torna lento e ineficiente. Usando Arquivos .CAB A uma maneira de reduzir o tempo de carga (download) para usar um arquivo .CAB para comprimir e distribuir mltiplos arquivos .CLASS. Voc pode criar arquivos .CAB usando o utilitrio Cabarc, que includo com o Kit de Desenvolvimento de Software da Microsoft (SDK) para Java. Este utilitrio est tambm includo no Internet Client SDK. Para usar um arquivo .CAB para um Java Applet, voc adiciona uma tag <PARAM> com o atributo de NAME definido para cabbase, e o atributo de VALUE definido para o nome do arquivo .CAB, como mostrado no cdigo do exemplo a seguir:
<APPLET CODE=Outline.class WIDTH=150 HEIGHT=200> <PARAM NAME=cabbase VALUE=outline.cab> </APPLET>
Este cdigo informa a Mquina Virtual de Java (JVM) os arquivos .CLASS do Java Applet que devem ser extrados do arquivo .CAB, em vez de ser carregado um arquivo de .CLASS de cada vez. Um arquivo .CAB deve estar localizado na mesma pasta que a pgina HTML ou na localizao especificada com o atributo CODEBASE. Usando Arquivos .ZIP O Internet Explorer o nico navegador que suporta arquivos .CAB. Para carregar Java Applets mais rapidamente em outros navegadores, voc pode usar um arquivo compactado .ZIP, com todos os arquivos .CLASS necessrios para o seu Java Applet. O JVM l o arquivo .ZIP extrai os arquivos .CLASS dele. Para usar um arquivo .ZIP, defina o atributo de ARCHIVE da tag <APPLET> para o nome do arquivo .ZIP. Voc pode definir o atributo ARCHIVE e adicionar o cabbase da tag <PARAM>, como ilustrado no cdigo do exemplo a seguir:
<APPLET CODE=Outline.class WIDTH=150 HEIGHT=200 ARCHIVE=outline.zip> <PARAM NAME=cabbase VALUE=outline.cab> </APPLET>
53
HTML Dinmico - DHTML

Introduo
O HTML Dinmico um novo conjunto de recursos suportado pelos navegadores Microsoft Internet Explorer e pelo NetScape Navigator a partir das verses 4.0 e superiores, que permite a criao de pginas Web altamente interativas e intuitivas. Com o HTML Dinmico voc pode: ? ? Utilizar grficos e textos animados em uma pgina Web. ? ? Tratar conjuntos de elementos de uma pgina como um grupo, ou seja, como se fosse um nico elemento, alterando-os todos de uma s vez. ? ? Fazer aparecer ou substituir textos a partir de aes do usurio como movimentos ou cliques do mouse. ? ? Chamar mtodos em controles ActiveX e Java Applets. ? ? Adicionar transies entre as pginas e obter diversos efeitos visuais. O HTML Dinmico d a voc o poder para criar documentos HTML com um visual extremamente sofisticado, e que dinamicamente mudam seu contedo e interagem com o usurio, sem exigir programas no servidor Web ou conjuntos complexos de pginas HTML para obter efeitos especiais. Voc pode usar HTML Dinmico para: ? ? Esconder textos e imagens em seu documento e manter este contedo escondido at que um dado tempo decorra ou que o usurio execute uma ao para v-los. ? ? Animar texto e imagens em seu documento, movendo independentemente cada elemento de um ponto para outro dentro do documento, seguindo o caminho que voc escolher ou que voc deixar o usurio escolher. ? ? Criar um relgio ou um texto que atualiza automaticamente seu contedo com as notcias mais recentes, citaes, ou outros dados. ? ? Criar um formulrio, e ento ler, processar e responder os dados que o usurio digitar, sem ter que retornar para o servidor Web para processamento. O HTML Dinmico alcana estes efeitos modificando o contedo do documento original, re-formatando automaticamente e reapresentando o documento para mostrar estas mudanas. No necessrio recarregar o documento, carregar um novo documento, ou depender do servidor Web para gerar um novo contedo. O HTML Dinmico calcula e executa as mudanas no computador do usurio utilizando os recursos disponveis nas novas verses dos navegadores modernos.
54
O Modelo de Objetos
Os elementos dinmicos so tags HTML que o modelo de objetos do HTML Dinmico define e utiliza. Usando as tags do modelo de objetos, voc pode acessar e manipular todos elementos HTML em um documento. Os elementos esto disponveis como objetos individuais, portanto possvel examinar e modificar um elemento e seus atributos, lendo e modificando suas propriedades, alm de chamar seus mtodos. Voc pode manipular ou at mudar o texto dentro de um elemento atravs das propriedades e mtodos que podem ser configuradas para os elementos. O exemplo a seguir, em VBScript, torna uma poro definida de texto verde, quando o evento que invoca o procedimento changeMe for disparado:
<script language="VBScript"> Sub changeMe() window.document.body.style.color = "green" End Sub </script>
O modelo de objetos executa tambm aes de usurio, como pressionar uma tecla e clicar o mouse, disponveis como eventos. Voc pode interceptar e processar estes e outros eventos criando um manipulador de eventos atravs de funes e rotinas desenvolvidas utilizando as linguagens de script. O manipulador de eventos recebe o controle quando um dado evento acontece e pode executar qualquer ao apropriada, inclusive usar o modelo de objetos para mudar o documento. O exemplo a seguir cria um manipulador de eventos para interceptar um clique do mouse em qualquer lugar do corpo do documento. Quando um clique acontecer, o procedimento changeMe ser executado.
<body onclick="ChangeMe">
Existem muitos meios para acessar elementos em um documento. Voc pode selecionar cabealhos, pargrafos, divises e outros elementos de um documento para controlar efeitos dinmicos. O caminho mais fcil para controlar elementos em um documento designar um identificador (ID) para cada elemento. O cdigo do exemplo a seguir designa o identificador "MyHeading" para a propriedade ID da tag <H3>:
<H3 ID="MyHeading">HTML Dinmico!</H3>
Voc pode ento, se referir a este elemento usando o identificador ou ID que voc designou para o texto contido na tag. Voc pode, ento, acessar todos os elementos em um documento atravs de uma coleo. O cdigo exemplificado a seguir muda a cor do elemento para verde:
window.document.all.MyHeading.style.color = "green"
55
O Objeto Document
O objeto documento representa um documento HTML em uma janela do navegador. Voc pode usar o objeto documento para: ? ? Recuperar informaes sobre o documento. ? ? Examinar e modificar os elementos HTML e textos contidos no documento. ? ? Processar eventos. Voc acessa o objeto documento atravs do objeto janela, entretanto, voc pode omitir o objeto janela. O exemplo a seguir exibe uma mensagem quando o documento mudar o seu estado quando o evento onreadystatechange acontecer, isto , quando o documento for carregado no navegador:
<html> <head> <title>Teste</titl e> </head> <script for="document" event="onReadyStateChange" language="VBScript"> Msgbox "A pgina " & window.document.title & " foi carregada!" </script> <body> </body> </html>
Voc pode acessar e manipular todos os elementos em um documento HTML. Cada elemento tem propriedades, mtodos e eventos associados a ele. Abaixo so relacionados alguns dos elementos comuns que voc pode acessar atravs do modelo de objetos do HTML Dinmico.
Tag <A> A Objeto Descrio Designa o comeo ou destino de um hyperlink. O elemento de ncora exige que voc especifique o HREF ou a propriedade NAME. Embute uma imagem ou um clipe de vdeo no documento. Especifica o incio e fim do corpo de um documento. Denota um pargrafo. Formata texto como um estilo de cabealho.
<IMG> <BODY> <P> <H1>, <H2>, etc.
IMG BODY P H1, H2, etc.
O cdigo a seguir muda a cor de todo o texto no corpo do documento para verde, quando um usurio clicar em qualquer lugar no documento:
56
<html> <head> <title>Welcome</title> <script language="VBScri pt"> Sub changeMe() document.body.style.color = "green" End Sub </script> </head> <body onclick="changeMe()"> <h3>Efeitos em HTML Dinmico!</h3> </body> </html>
Elementos de Agrupamento
Usando as tags <SPAN> e <DIV>, voc pode interceptar eventos para elementos mltiplos de uma s vez, ou acessar propriedades e mtodos para eles. As tags <SPAN> e <DIV> servem para um propsito semelhante, mas produzem, resultados ligeiramente diferentes: ? ? A tag <SPAN> cria um span, que um agrupamento lgico de elementos em uma pgina. Esta tag freqentemente usada para afetar uma poro de texto em um elemento a nvel de bloco, como um pargrafo. ? ? A tag <DIV> usada para criar um recipiente ou container, que voc deseja separar do resto do contedo de documento e, opcionalmente, configurar para ele propriedades de caixas, como bordas e margens. Voc pode usar as tags <SPAN> e <DIV> para: ? ? Aplicar estilos. ? ? Acessar propriedades e mtodos. ? ? Interceptar eventos. A tag <DIV> define um bloco que consiste em tags de texto e HTML, e separa este bloco do contedo circundante por quebras de linha. A tag <SPAN> pode definir um bloco de texto dentro de um pargrafo. O texto no est automaticamente separado por quebras de linha.
Eventos em DHTML
Introduo Um evento uma notificao que acontece em resposta a uma ao, como uma mudana de estado, um clique do mouse ou o pressionamento de uma tecla, enquanto o usurio est vendo um documento. Um manipulador de eventos um trecho de cdigo, tipicamente uma funo ou uma rotina escrita em linguagem script, que recebe o controle quando o evento correspondente acontece. O HTML Dinmico fornece um conjunto de manipuladores de evento atravs dos 57
quais voc pode gerar respostas para a maior parte de interaes entre o usurio e o documento. O HTML Dinmico o habilita a determinar sobre que poro do documento o manipulador de eventos ir operar. Assim que um documento carregado ou um usurio interage com um documento, o navegador est recebendo muitas notificaes de evento. As vezes o navegador age no evento propriamente dito por exemplo, quando voc clica um hyperlink. Em outras situaes, o navegador no executa nenhuma ao por exemplo, quando voc clica um texto. Processar estes eventos significa associa-los a blocos de cdigo que voc quer que sejam executados quando eles ocorrerem. Existem trs mtodos para associar um evento a um bloco de cdigo. ? ? Declarar o evento na tag do elemento HTML. ? ? Usar o identificador ID do elemento. ? ? Declarar um bloco de cdigo em script. Declarando o Evento na Etiqueta do Elemento Voc pode declarar uma funo para a manipulao de eventos e designar uma chamada para ela no atributo de evento apropriado de uma tag HTML. O trecho de cdigo exemplificado a seguir declara o procedimento mySub e associa sua execuo a um pargrafo (elemento identificado pela tag <P>), para quando apontador do mouse passar sobre ele, ou seja, quando ocorrer o evento onmouseover:
<head> <script language="VBScript"> Sub mySub() 'Execute algum cdigo. End Sub </script> </head> <body> <p onmouseover="mySub">HTML Dinmico!</p> </body>
Usando o ID do Elemento Declare uma funo para manipulao de eventos e associe o manipulador de eventos da funo a um determinado evento, dando a este um nome com o seguinte formato: id_evento. O exemplo a seguir declara uma funo escrita em VBScript denominada myParagraph_onmouseover e associa a funo para o elemento denominado myParagraph. Quando um usurio mover o mouse sobre o pargrafo denominado myParagraph, o procedimento myParagraph_onmouseover ser executado.
<html> <head>
58
<script language="VBScript"> Sub myParagraph_onmouseover() Msgbox "Executei algum cdigo!" End Sub </script> </head> <body> <p id="myParagraph">HTML Dinmico!</p> </body> </html>
Para declarar um bloco de script para processar eventos, execute os seguintes passos: 1. Declare cdigo de manipulao de evento. 2. Use os atributos FOR e EVENT da tag <SCRIPT> para associar o cdigo para a um evento. O exemplo a seguir define um cdigo em VBScript e o associa com o evento onmouseover do elemento P (pargrafo), tendo o como identificador o nome myParagraph:
<script for="MyParagraph" event="onmouseover" language="VBScript"> 'Execute algum cdigo. </script> <p id="myParagraph">HTML Dinmico!</p>
Eventos Mais Comuns Todo contedo dinmico em um documento executado como resultado de um evento. Um evento pode ser um clique ou movimento do mouse, ou pode ser a prpria carga do documento no navegador. A seguir so relacionados alguns dos eventos mais comuns que voc pode utilizar para iniciar a execuo de um script. Os eventos de mouse acontecem quando o usurio move o mouse ou clica o seu boto. A tabela a seguir descreve quando cada evento de mouse acontece.
Evento de mouse onclick ondblclick ondragstart onmousedown onmousemove onmouseout onmouseover Ao do usurio que dispara o evento Pressionar e largar o boto do mouse, ou pressionar teclas como ENTER e ESC, em um formulrio. Clicar duas vezes um objeto. Comear a arrastar uma seleo ou selecionar um elemento. Pressionar um boto em um dispositivo de apontamento, como o mouse. Mover o mouse. Mover o apontador do mouse para fora de um elemento. Mover o apontador do mouse para um elemento. O evento acontece quando o apontador entra pela primeira vez no elemento, e no se repete a menos que o usurio mova o apontador para fora do elemento e ento novamente para dentro dele. Soltar o boto de mouse.
onmouseup
59
Quando um evento de mouse acontecer, suas propriedades definem o evento como a seguir: ? ? A propriedade Buttom identifica que boto do mouse (se algum) foi pressionado. ? ? As propriedades x e y especificam a localizao do apontador do mouse no momento do evento. ? ? Para os eventos onmouseover e onmouseout, as propriedades toElement e fromElement especificam entre que elementos o mouse est se movendo (de um para outro). Caracterstica de Rollover Voc pode usar os eventos onmouseover e onmouseout para animar objetos com script que comum a estes eventos. Geralmente, voc usa o evento onmouseover para mudar o estado do objeto e onmouseout para retornar ao estado original. Use os eventos onmouseover e onmouseout do documento em conjunto com um nome de classe dada aos vrios elementos, para evitar ter que escrever um manipulador de eventos separado para cada item. Isto permite a voc criar tantos itens quanto desejar, para os quais ser executada a mesma ao, desde que voc d o mesmo nome de classe para eles. O exemplo a seguir usa os eventos onmouseover e onmouseout para mudar a cor de um texto especfico em um documento quando o usurio passar o mouse por cima dele:
<html> <head> <title>Rollover</title> <script language="VBScript"> Sub document_onmouseover() If window.event.srcElement.className = "myH3" Then window.event.srcElement.style.color = "Red" End if End Sub Sub document_onmouseout() If window.event.srcElement.className = "myH3" Then window.event.srcElement.style.color = "Black" End if End Sub </script> </head> <body> <H3 class="myH3">HTML Dinmico!</H3> <H3 class="myH3"> Legal!</H3> </body> </html>
Movendo Elementos Voc pode utilizar os eventos onmousedown, onmouseup e onmousemove arrastar e mover elementos sobre o seu documento Web. Por exemplo:
60
<html> <head> <title>Mover Texto</title> <script language="VBScript"> Dim DragElement Sub test_onmousedown DragElement = True End Sub Sub document_onmousemove If DragElement then document.all.test.Style.marginleft = window.event.clientX70 document.all.test.Style.margintop = window.event.clientY20 End If End Sub Sub document_onmouseup DragElement = False End Sub </script> </head> <body> <p id="test"><big><big><big><strong>Arraste me</strong></big></big></big></p> </body> </html>
Eventos onload e onunload Voc pode utilizar os eventos onload e onunload para executar um script quanto uma pgina for carregada ou descarregada, respectivamente. ? ? O evento onload ocorre depois que o documento carregado e que todos os elementos sobre a pgina tiverem sido completamente descarregados pelo navegador. ? ? O evento onunload ocorre imediatamente aps o documento ser fechado. Estes eventos operam sobre o objeto janela, mas voc pode utiliza-los de duas maneiras diferentes: ? ? Em VBScript, por exemplo, crie procedimentos para a manipulao dos eventos window_onload e window_onunload. Este mtodo o mais usado entre os dois. O exemplo de cdigo a seguir mostra a declarao para o procedimento window_onload.
Sub window_onload 'execute script. End Sub
? ? Associar os eventos na tag <BODY>, como no exemplo a seguir:

<BODY onload="loadfunction" onunload="unloadfunc ion"> t
61
O Objeto Event O objeto evento representa o estado de um evento, como a seguir: ? ? O elemento em que o evento aconteceu; ? ? O estado das teclas do teclado; ? ? A localizao do mouse; ? ? O estado dos botes do mouse. O objeto evento est disponvel somente durante um evento. Isto , voc pode usa-lo em funes e rotinas manipuladoras de evento mas no em outro cdigo. Voc recupera o objeto evento aplicando o a palavra-chave event para o objeto janela. O cdigo exemplificado a seguir usa o objeto evento para exibir as coordenadas X e Y na janela de status:
Sub document_onmousemove() window.status = "X=" & window.event.x & " Y=" & window.event.y End Sub
Embora todas propriedades de evento estejam disponveis para todos objetos evento, algumas propriedades podem no ter valores significativos durante alguns eventos. Por exemplo, as propriedades fromElement e toElement so significativas somente quando forem processados os eventos onmouseover e onmouseout. Nota: em VBScript, voc no pode usar a palavra-chave event sem aplica-la para a palavra-chave window ou uma expresso que avalia um objeto janela. Concatenao de Eventos (Bubbling) A concatenao de eventos (event bubbling) assegura que os manipuladores de eventos, para todos os elementos em que um evento acontece, tem uma oportunidade para responder ao evento. Considere o exemplo a seguir:
<P onclick="myEvent()"> Pule para um documento <B>exemplo</B>. </P>
O elemento B elemento no tem um evento associado a ele. Porm, est contido dentro do elemento P, que tem um evento associado a ele. Quando o usurio clicar a palavra "exemplo", o elemento B passa para o evento do elemento imediatamente acima, na hierarquia do documento, isto chamado de "concatenao para cima". O elemento P pode ento responder ao evento. Se voc estiver concatenando eventos em muitos elementos aninhados, provavelmente desejar evitar a concatenao dos eventos para cima na hierarquia de eventos do documento. Voc pode fazer isso utilizando a propriedade cancelBubble do objeto evento para True. Quando a propriedade cancelBubble for configurada para True, o processo de concatenao de eventos interrompido.
62
Os trecho de cdigo a seguir captura eventos para o corpo do documento, do pargrafo e do tipo negrito. Uma caixa de mensagem aparece, indicando que evento foi disparado, dando ao usurio a opo de cancelar a concatenao de eventos.
<html> <head> <title>Concatenao de Eventos</title> <script language="VBScript"> Sub MyBody_onclick() msgbox "O evendo do corpo do documento foi disparado", vbOkOnly . End Sub Sub MyParagraph_onclick() If msgbox("O evento do pargrafo foi disparado. Cancelar a borbulhao?",vbYesNo) = vbYes Then window.event.cancelBubble = True End If End Sub Sub MyBold_onclick() If msgbox("O evento negrito foi disparad Cancelar a o. borbulhao?",vbYesNo) = vbYes Then window.event.cancelBubble = True End If End Sub </script> </head> <body id="MyBody"> <p id="MyParagraph">Pular para o documento <b id="MyBold">exemplo</b>. </p> </body> </html>
Usando Colees
Uma coleo um grupo de itens relacionados. Em HTML Dinmico, voc usa colees para manter itens ligados como hyperlinks em um documento ou clulas em uma tabela. As colees podem ter propriedades e mtodos, e podem tambm conter outras colees. Toda coleo em HTML Dinmico possui duas propriedades: ? ? length (comprimento) ? ? item A propriedade length contm o nmero de elementos de uma coleo. O exemplo a seguir utiliza a propriedade length da coleo links para contar o nmero de hyperlinks em um documento:
<html> <head>
63
<script language="VBScript"> sub myBody_onclick() msgbox "Esta pgina web possui " & document.links.length & " links." end sub </script> </head> <body id="myBody"> <p>Clique Me</p> <p><a id="myhref1" href="http://www.fea.usp/">Home page da FEA/USP</a></p> <p><a id="myhref2" href="http://www.fea.usp/fia/">Pgina da FIA</a></p> </body> </html>
Com a propriedade item, voc pode recuperar um elemento ou uma coleo dentro uma outra coleo utilizando:
?? O nmero ndice do elemento, ou ?? O identificador (ID) do elemento.
Voc usa o ndice do elemento para recuperar um elemento ou coleo se: ? ? Voc no designou um ID para um elemento particular que voc quer acessar. ? ? Voc quer enumerar a coleo com um contador. O exemplo de cdigo a seguir usa a propriedade href para recuperar informaes de href para o primeiro hyperlink do documento:
msgbox "O primeiro link deste documento destina se a " & document.links.item(0).href & "."
Voc pode omitir a propriedade item, que usada no exemplo anterior, porque item a propriedade padro. Por exemplo:
msgbox "O primeiro link nesta pgina destina se a " & document.links(0).href & "."
Nota: as colees de itens em HTML Dinmico so iniciadas em 0 (zero). Em Visual Basic, as colees podem ser iniciadas em 0 (zero) ou em 1 (um). A maioria das colees mais recentes so iniciadas em 1 (um). Se voc souber o ID (identificador) do elemento que voc deseja acessar, pode usar-lo em lugar do nmero ndice. Para fazer isto, inclua o ID em citaes duplas. O exemplo a seguir recupera o href para o item com o ID myhref1:
msgbox "O primeiro link nesta pgina destina se a " & document.links.item("myhref1").href & "."
Voc pode omitir o mtodo item que usado no exemplo anterior porque o item o mtodo padro. Por exemplo:
msgbox "O primeiro link nesta pgina destina -se a " & document.links("myhref1").href & "."
64
Usando a declarao For...Next , voc pode enumerar uma coleo de elementos. O bloco For...Next executado uma vez para cada elemento na coleo. A declarao Exit For pode ser usada dentro de um bloco For...Next para finalizar o elo de repetio. Voc pode usar qualquer nmero de declaraes Exit For em qualquer lugar no elo de repetio. A declarao Exit For freqentemente usada para avaliar uma condio e sair o elo de repetio mais cedo, se necessrio. O exemplo de cdigo a seguir ilustra elos de repetio atravs da coleo de links do objeto documento:
Sub myBody_onclick() Dim mycol Dim mylinks 'Todo lao atravs da coleo define mycol para o prximo ndi na ce coleo document.links. Isto equivalente a utilizar o comando set desta forma: Set mycol = document.links. For Each mycol in document.links Set mycol = document.links. For Each mycol in document.links mylinks = mylinks & " " & mycol.href Next Msgbox "Os links nesta pgina incluem " & mylinks & "." End Sub
Coleo Global (all) A coleo global all representa todos os elementos de um documento HTML. Cada elemento representado como um objeto programvel identificado dentro da coleo por sua localizao (do topo para parte inferior) na pgina HTML. Voc pode acessar objetos de elementos individuais usando as propriedades index ou ID. Por exemplo, se voc tiver uma pgina com trs pargrafos H1:
<H1 id=head1>Heading text</H1> <H1 id=head2>Headin text</H1> g <H1 id=head3>Heading text</H1>
O script a seguir acessaria o terceiro pargrafo H1 por seu ID:

document.all.head3
Devido ao fato de que cada item da coleo global all um objeto, voc pode aplicar propriedades e mtodos para estes itens. No exemplo a seguir, a propriedade tagName recupera o nome da tag HTML do elemento. De forma semelhante, voc pode usar outras propriedades para modificar os elementos. No cdigo de exemplo a seguir, o script exibe a lista de todos os elementos do documento obtidos atravs da coleo all quando o documento carregado:
<html> <head> <title>Elementos: Coleo</title>
65
<script language="VBScript"> Sub showElements() Dim tagNames For each thisTagName in document.all tagNames = tagNames & thisTagName.tagname & ", " Next msgbox("Este documento contm as tags: " & tagNames & " e s.") End Sub </script> </head> <body onload="showElements()"> <h1>Bem-vindo!</h1> <p>Este documento <b>muito</b> curto. </p> </body> </html>
A coleo all tem as seguintes caractersticas: 1. automaticamente atualizada: A coleo all automaticamente atualizada para refletir quaisquer mudanas feitas no documento. Por exemplo, se voc recuperar a coleo e a utilizar para apagar um elemento, a coleo no incluir mais aquele elemento. Da mesma forma, se voc adicionar um elemento, a coleo incluir o novo elemento. 2. Pode incluir elementos que no esto na pgina Web: Em alguns casos, a coleo all pode conter mais elementos do que os que esto realmente no arquivo do documento. Em particular, a coleo sempre contm os elementos HTML, HEAD, TITLE, BODY, ainda que estes no estejam explicitamente presentes no documento fonte. Da mesma forma, a coleo sempre contm um elemento de TBODY para cada tabela. 3. Inclui comentrios e tags desconhecidas ou invlidas: A coleo all inclui tambm comentrios ( ) e tags desconhecidas ou invlidas. O propsito dar a voc um retrato preciso do contedo do documento. As tags desconhecidas ou invlidas esto tipicamente mal escritas ou so tags perdidas ou desemparelhadas. Sabendo quais so e onde elas esto, fornece a voc uma oportunidade para elimina-las ou substitui-las por tags vlidas. O Mtodo Tag O mtodo tag fornece uma coleo de elementos que possuem o nome da tag especificada. Voc aplica o mtodo para uma coleo existente e prov o nome da tag que deseja recuperar. O mtodo procura a coleo existente e retorna uma nova coleo. Este mtodo procura qualquer nome de tag, at nomes que no so vlidos em HTML. Se ele achar um ou mais elementos tendo aquele nome, ser retornada uma coleo. Se no for achado nenhum elemento tendo o nome especificado, ser retornada uma coleo vazia. Por exemplo, o script a seguir recupera uma coleo de todos os pargrafos H1 em um documento HTML:
document.all.tags("H1")
66
Voc usa a propriedade length (comprimento) para determinar quantos elementos a coleo contm. A coleo est vazia se seu comprimento zero. O cdigo em VBScript exemplificado a seguir: ? ? Aplica o mtodo tag para a coleo all para recuperar uma nova coleo contendo s os elementos TABLE existentes no documento. ? ? Determina se a coleo est vazia, isto , com comprimento zero. ? ? Enumera a coleo com FOR EACH...NEXT para aplicar uma borda para cada tabela.
<html> <head> <title>Elementos</title> <script language="VBScript"> Sub addBorderToTable() Set colTables = document.all.tags("TABLE") If colTables.length > 0 Then For Each thisTable in colTables thisTable.border = 1 Next End If End Sub </script> </head> <body onclick="ad dBorderToTable()"> <table border="0" cellpadding="0" cellspacing="0" width="40%"> <tr> <td width="33%">Tabela 1 Item 1</td> </tr> <tr> <td width="33%">Tabela 1 Item 2</td> </tr> <tr> <td width="33%">Tabela 1 Item 3</td> </tr> </table> <p>Clique Aqui!</p> <table border="0" cellpadding="0" cellspacing="0" width="40%"> <tr> <td width="33%">Tabela 1 Item 1</td> </tr> <tr> <td width="33%">Tabela 1 Item 2</td> </tr> <tr> <td width="33%">Tabela 1 Item 3</td> </tr> </table> </body> </html>
67
Manipulando Textos e Cdigo HTML

Introduo O HTML Dinmico fornece propriedades e mtodos para manipular textos e HTML em seu documento. Voc pode usar estas propriedades e mtodos para: ? ? Examinar textos em um elemento ou na tag do elemento. ? ? Substituir textos e elementos. Substituindo, Excluindo e Inserindo Textos Em qualquer elemento que pode conter texto, voc pode rapidamente examinar e substitui o texto com qualquer uma das seguintes propriedades: ? ? innerText ? ? outerText A propriedade innerText uma string e especifica todo o texto contido no elemento e quaisquer outros elementos (como o I, ou elemento itlico, ou o B, ou elemento negrito) contidos naquele elemento. Designando uma nova string para esta propriedade possvel substituir seu contedo anterior, inclusive quaisquer elementos. Por exemplo, voc pode apagar tudo em um elemento designando uma string vazia para a propriedade. A propriedade outerText substitui o texto ou HTML fora da tag, substituindo eficazmente o texto e a tag. O exemplo a seguir demonstra a substituio de texto em um documento:
<html> <head> <title>Subistituindo Texto e HTML</title> <script language="VBScript"> Sub item1_onclick() window.event.srcElement.innerText = "innerText apenas substituio de texto." End Sub Sub item2_onclick() window.event.srcElement.outerText = "outerText texto substitudo e remoo da tag H3." End Sub </script> </head> <body> <h3 id="Item1">Clique Me innerText</h3> <h3 id="Item2">Clique Me outerText</h3> </body> </html>
O mtodo insertAdjacentText especifica o texto a ser inserido num elemento em um determinado lugar. O mtodo insere o texto como texto simples.
68
A sintaxe do mtodo insertAdjacentText a seguinte: objeto.insertAdjacentText(onde, texto) onde uma string especificando onde inserir o texto. Pode ser uma das seguintes opes: ? ? BeforeBegin Insere o texto imediatamente antes do elemento. ? ? AfterBegin Insere o texto depois do incio do elemento mas antes do outro contedo no elemento. ? ? BeforeEnd Insere o texto imediatamente antes do fim do elemento mas ao final do outro contedo no elemento. ? ? AfterEnd Insere o texto logo depois do fim do elemento. texto Especifica o texto a ser inserido. O exemplo a seguir insere um texto quando o documento clicado:
<html> <head> <title>Bem-vindo</title> <script language="VBScript"> Sub myH3_onClick() document.all.myH3.insertAdjacentText "beforeEnd","Mais Texto" End Sub </script> </head> <body> <h3 id="myH3">Algum texto</h3> </body> </html>
Substituindo, Excluindo e Inserindo Elementos Da mesma maneira que voc pode examinar e substituir texto, voc tambm pode examinar e substituir elementos usando as propriedades innerHTML e outerHTML. Usando estas propriedades em conjunto com innerText e outerText, voc pode examinar e substituir textos e tags HTML num documento. O exemplo a seguir demonstra a substituio de tags HTML em um documento:
<html> <head> <title>Substituindo Texto e HTML</title>
69
<script language="VBScript"> Sub item1_onclick() window.event.srcElement.innerHTML = "<i>inn erHTML substituio de texto e adio da tag itlico.</i>" End Sub Sub item2_onclick() window.event.srcElement.outerHTML = "<i>propriedade outerHTML Texto substitudo, tag H3 removida, tag itlico inserida.</i>" End Sub </script> </head> <body> <h3 id="Item1">Clique Me innerHTML</h3> <h3 id="Item2">Clique Me outerHTML</h3> </body> </html>
O mtodo insertAdjacentHTML insere o texto HTML especificado no elemento no lugar determinado. Enquanto o mtodo insertAdjacentText s deixa que voc inserir texto, o mtodo insertAdjacentHTML deixa tambm inserir tags. Se o texto contm tags HTML, o mtodo analisa gramaticalmente e formata o texto medida que ele o insere. Por exemplo, se voc inserir texto HTML delimitado pela tag <STRONG>, o texto adicionado apresentado como negrito na pgina Web. A sintaxe do mtodo insertAdjacentHTML a seguinte: object.insertAdjacentHTML(onde, HTML) onde uma string especificando onde inserir o texto HTML. Pode ser uma das seguintes opes: ? ? BeforeBegin Insere o texto imediatamente antes do elemento. ? ? AfterBegin Insere o texto depois do comeo do elemento mas antes de outro contedo no elemento. ? ? BeforeEnd Insere o texto imediatamente antes do fim do elemento mas ao final do outro contedo no elemento. ? ? AfterEnd Insere o texto logo depois do fim do elemento. HTML uma string especificando o texto HTML a ser inserido. A string pode ser uma combinao de tags de texto e HTML. Esta string deve estar bem formatada em HTML vlido, caso contrrio este mtodo falhar.
70
O exemplo a seguir adiciona HTML para o texto para myH3. Usando o mtodo insertAdjacentHTML voc pode embutir tags HTML no texto inserido.
<html> <head> <title>Bem-vindo</title> <script language="VBScript"> Sub myH3_onClick() document.all.myH3.insertAdjacentHTML "beforeEnd ,"<Big>-Mais Texto</Big>" " End Sub </script> </head> <body> <h3 id="myH3">Algum texto</h3> </body> </html>
Rolagem de Elementos O mtodo scrollIntoView rola o elemento em uma viso dentro da janela, colocando-o no topo ou na parte inferior da janela. O mtodo til para mostrar imediatamente o resultado de alguma ao sem exigir que o usurio tenha que rolar manualmente o documento para achar o resultado. O exemplo a seguir sublinha o contedo do 16 pargrafo e o rola em uma viso:
<html> <head> <title>Rola o Item 16 numa Viso</title> <script language="VBScript"> Sub scrollToView() myP1.scrollIntoView(true) myP1.style.textDecorationUnderline = True End Sub </script> </head> <body onload="scrollToView"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> <p>Item 5</p> <p>Item 6</p> <p>Item 7</p> <p>Item 8</p> <p>Item 9</p> <p>Item 10</p> <p>Item 11</p> <p>Item 12</p> <p>Item 13</p> <p>Item 14</p> <p>Item 15</p> <p id = "myP1">Item 16</p> </body> </html>
71
Estilos Dinmicos
Introduo Voc pode dinamicamente mudar o estilo de qualquer elemento HTML em um documento: cor, fonte, espaamento, indentao, posio e at a visibilidade do texto. O modelo de objetos do HTML Dinmico torna todos os elemento e atributos de HTML acessveis, permitindo a utilizao de scripts para dinamicamente ler e mudar estilos. Folhas de estilo (tambm chamadas de folhas de estilo em cascata, ou cascading style sheets CSS) so uma nova caracterstica suportada e disponvel nos navegadores mais modernos. De forma semelhante aos estilos do processador de textos Microsoft Word, as folhas de estilo permitem que voc defina um conjunto de estilos que podem ser aplicados em documentos HTML. As folhas de estilo oferecem os seguintes benefcios para os autores pginas Web: ? ? Opes de formatao adicionais: Atravs do uso de folhas de estilo, mais estilos esto disponveis, sem a necessidade para criar tags HTML adicionais. ? ? Melhor controle: Em lugar de editar muitas instncias de uma tag para mudar uma formatao, voc pode fazer a mudana para um estilo em um lugar e ver esta mudana ser refletida em todos lugares onde o estilo usado. ? ? Personalizao mais fcil: Voc pode projetar seu Web Site baseado em uma folha de estilos e, tornando a folha de estilos disponvel para outros autores, assegurar uma aparncia consistente atravs de todos os documentos HTML do seu Web Site. Implementando Folhas de Estilo Voc pode implementar folhas de estilo em trs modos: ? ? Ligadas: as definies de estilo so armazenadas em um documento separado das pginas HTML s quais ele aplicado. Uma folha de estilo nica pode ser ligada a vrias pginas HTML. ? ? Embutidas: as definies de estilo so armazenadas em um documento HTML. Uma definio de estilo aplicada para todas as instncias daquele estilo dentro da pgina HTML. ? ? Inline: as definies de estilo so criadas para tags ou blocos nicos de tags em uma pgina HTML. Folhas de Estilo Ligadas As folhas de estilo ligadas so a forma de implementao mais poderosa de folhas de estilo. Voc pode criar um documento de folha de estilo nico, e ligar este documento a qualquer 72
nmero de pginas Web em seu Web Site. Para mudar um estilo, simplesmente faa a mudana no documento de folha de estilo, e ele ser automaticamente refletido em todas as pginas Web que so ligadas quela folha de estilo. Para criar uma folha de estilo ligada execute os seguintes passos: 1. Usando o Notepad ou outro editor de textos simples, crie um arquivo que contm as definies de estilo. Uma definio de estilo consiste no nome da tag, seguidas pelas propriedades e os valores que voc deseja configurar. O exemplo a seguir define os estilos H1, H2, e P (a definio de estilo para P fixa formato padro para todo texto no documento que no possuir tags prprias):
H1 {font: 17pt "Arial"; font-weight: bold; color: teal} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Arial"; color: white}
2. Salve o arquivo no servidor Web com a extenso .CSS (por exemplo, Meusestilos.css). 3. Ligue o arquivo .CSS a qualquer documento HTML colocando a tag <LINK> na seo de cabealho <HEAD> do documento HTML. Por exemplo:
<HEAD> <LINK REL=STYLE TYPE="text/css" SRC="http://server/docs/meusestilos.css"> </HEAD>
Folhas de Estilo Embutidas Quando uma folha de estilo for embutida em um documento HTML, os estilos que voc define so aplicados para o documento inteiro. Voc embute uma folha de estilos em um documento HTML usando as tags <STYLE> e </STYLE>. A tag <STYLE> tem um parmetro, TYPE. Este parmetro especifica o tipo de mdia Internet como "text/css", que permite a navegadores que no suportam este tipo ignorar a folhas de estilos. Qualquer nmero de estilos pode ser definido dentro das tags <STYLE> usando o mesmo formato como o que foi usado no arquivo .CSS descrito anteriormente. Por exemplo:
<HEAD> <STYLE TYPE="text/css"> H1 {font: 17pt "Arial"; font-weight: bold; color: teal} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Arial"; color: white} </STYLE> </HEAD>
73
Nota: ao utilizar estilos embutidos, voc precisa prevenir suas definies de estilo de serem exibidas como texto regular em navegadores que no suportam folhas de estilos. A maioria dos navegadores que no suporta folhas de estilo ignoram as tags <STYLE> e </STYLE>, mas interpretem as definies de estilo entre as tags como texto regular. Para evitar este problema, embuta seu bloco de estilo <STYLE> e </STYLE> dentro de um comentrio, como segue:
<STYLE TYPE="text/css"> <!-H1 {font: 17pt "Arial"; font-weight: bold; color: teal} --> </STYLE>
Usando Estilos Inline Voc insere estilos inline para tags HTML usando o parmetro de STYLE. Por exemplo, voc pode configurar uma propriedade de estilo da tag <P> como exemplificado a seguir:
<P STYLE="margin -left: 1.0in; color: red"> Este texto aparece indentado na cor vermelha. <P>
Voc pode aplicar tambm um estilo para um bloco de tags usando a tag <SPAN>. Quaisquer outras tags que aparecerem entre as tags <SPAN> e </SPAN> contero a formatao que voc especificar. O cdigo exemplificado a seguir aplica uma fonte de 14 pontos para o texto e para a lista que o segue:
<SPAN STYLE="font -size: 14pt; color: red">
A especificao de estilo afeta todo o contedo desta pgina at a tag </SPAN> que fecha a tag <SPAN>.
<UL> <LI>List item A <LI>List item B </UL> </SPAN>
Estilos em Cascata Um documento HTML pode conter mais de uma implementao de folha de estilo. Em geral, as folhas de estilo definidas pelo autor das pginas sobrepem-se sobre os valores padro do navegador. Se voc usar todos os trs mtodos listados anteriormente, os estilos inline tero precedncia sobre o bloco de estilos embutido, que tero precedncia sobre a folha de estilos ligada.
74
Criando Novos Estilos Voc cria uma nova classe de estilos precedendo o nome do estilo com um ponto. Estes estilos estaro disponveis para scripts e na lista de estilos do FrontPage, na barra de ferramentas de Formato. O exemplo a seguir usa a tag <STYLE> para definir os estilos .vermelhao e .verdinho.
<style> .vermelhao {font -size:24pt; color:red} .verdinho {font-size:10pt; color:green} </style>
Mudana Dinmica de Estilos Voc pode alterar o estilo de um elemento de dois modos: 1. Mudando as propriedades do objeto de estilo do elemento. 2. Mudando o nome de classe do elemento. Se voc usar folhas de estilo em seu documento HTML, poder mudar o nome de classe do elemento para quaisquer uma das classes definidas por uma folha de estilo. Atributos e Propriedades de Folhas de Estilo Cada atributo de folha de estilo (.CSS) possui uma propriedade correspondente, o que permite a voc examinar e alterar qualquer estilo. Nomes de propriedades e nomes de atributos podem diferir ligeiramente, porm so os nomes de propriedades que devem ser utilizados na especificao de estilos em linguagens de script. Em particular, hfens (-) so removidos de nomes compostos, e as primeiras letras na segunda e nas palavras subseqentes do nome so capitalizadas. Por exemplo, a cor de fundo background-color do atributo CSS se torna a propriedade backgroundColor. Usando Propriedades de Estilo para mudar um Estilo Voc pode usar quaisquer uma das propriedades do objeto estilo para afetar diretamente um elemento em sua pgina Web. O cdigo exemplificado a seguir mostra como voc pode usar um script para mudar o objeto estilo de um elemento HTML:
<script language="VBScript"> Sub changeStyle() myh1.style.color = "red" myh1.style.fontsize = "48" myh1.style.cursor = "wait" End sub </script> <h1 id="myh1" onclick="changestyle">Meu cabealho</h1>
75
Usando o Atributo ClassName para mudar um Estilo Voc pode definir um estilo que fixa vrios atributos e, ento construir um script que define o atributo ClassName de seu elemento HTML para o nome do estilo. Por exemplo:
<style> .vermelhao {font -size:24pt; color:red} .verdinho {font-size:10pt; color:green} </style> </head> <body> <script language="vbscript"> sub changeColor() if myh1.classname = "verdinho" then myh1.classname = "vermelhao" else myh1.classname = "verdinho" end if end sub </script> <h1 id="myh1" onclick="changeColor">HTML Dinm co</h1> i </body> </html>
Nota: quando voc mudar um estilo, o Microsoft Internet Explorer 4.0 ou superior automaticamente refaz s as sees da pgina afetadas pela mudana. Por exemplo, se o tamanho da letra de um pargrafo for alterado, o texto no pargrafo ser redistribudo conforme necessrio. Por outro lado, se um item em uma lista for escondido, os itens subseqentes so redistribudos e apropriadamente renumerados para preencher o lugar do item que foi escondido.
Transies e Efeitos Visuais

Introduo Filtros visuais so atributos de folhas de estilo em cascata (CSS) que permitem a adio de recursos visuais como sombras, brilho, iluminao e outros efeitos para: ? ? Textos ? ? Imagens ? ? Qualquer objeto no contido em uma janela O Microsoft Internet Explorer verso 4.0 ou superior, suporta filtros e efeitos visuais de transio atravs de folhas de estilo em cascata (CSS). As transies so filtros que criam uma transposio de um estado visual at outro com uma durao especificada. Por exemplo, um estado visual no comeo da transio pode ter um bloco de texto com uma fonte em cor azul. O estado visual no fim da transio pode ter a cor da fonte do texto em vermelho.
76
Usando Filtros Visuais Um filtro visual um efeito que voc pode adicionar para elementos e objetos em sua pgina Web para mudar dinamicamente a apresentao da pgina. Voc pode usar filtros visuais para inserir: ? ? Animaes ? ? Iluminao ? ? Sombras ? ? Brilho e outros efeitos Os efeitos de filtro visual esto disponveis atravs do atributo de filtro CSS, seguido pelo nome do filtro e quaisquer parmetros para o filtro, entre parnteses. Voc pode especificar filtros atravs de folhas de estilo completas ou estilos inline, e ento associa-los a eventos para fornecer efeitos conforme o usurio interagir com o documento. Parmetros de Filtro Cada filtro pode ter um conjunto de parmetros opcionais que definem a natureza precisa do efeito. Alguns filtros, como FlipV e FlipH para imagens espelho vertical e horizontal, no possuem nenhum parmetro. O cdigo exemplificado a seguir adiciona o filtro de sombra Shadow para um texto, quando este for clicado. O filtro de sombra possui dois parmetros, cor e direo.
<html> <head> <title>Sombra Simples</title> <script language="vbscript"> Sub myText_onClick myText.style.filter="shadow(color=0080FF, direction=315)" End Sub </script> </head> <body> <p><span id="myText" style="height:330"><big><big><big><big><big>Clique Me</big></big></big></big></big> </span></p> </body> </html>
Filtros Mltiplos Voc pode aplicar filtros mltiplos para um elemento ou objeto. O cdigo exemplificado a seguir combina os filtros de sombra e obscurecimento:
<html> <head> <title>Mltiplos Filtros</title>
77
<script language="vbscript"> Sub myText_onClick myText.style.filter="shadow(color=00 80FF, direction=315) blur(add=false, direction=260, strength=8)" End Sub </script> </head> <body> <p><span id="myText" style="height:330"><big><big><big><big><big>Clique Me</big></big></big></big></big> </span></p> </body> </html>
Coleo de Filtros Voc pode acessar filtros mltiplos em um elemento ou objeto atravs de uma coleo de filtros. Cada filtro que voc aplica para um elemento ou objeto automaticamente adicionado a uma coleo de filtros para aquele elemento ou objeto. Voc pode acessar os filtros na coleo usando o nome ou o ndice do item na coleo. ? ? ndice: a ordem dos filtros na coleo a ordem em que os filtros foram aplicados para o objeto. ? ? Nome: o nome automaticamente definido para o nome do filtro. O cdigo exemplificado a seguir usa o ndice e o nome de um item para mudar os parmetros de filtro:
<html> <head> <title>Coleo de Filtros</title> <script language="vbscript"> Sub myText_onClick 'Usando o nome do elemento. mytext.filters.item("shadow").color=008000 'Usando o ndice do elemento. Isto modificar o atributo do filtro obscurecer que o segundo elemento ou ndice 1 desde que baseado em . 0 mytext.filters.item(1).strength=20 End Sub </script> </head> <body> <p><span id="myText" style="height:330; filter:shadow(colo r=0080FF, direction=315) blur(add=false, direction=260, strength=8)"><big><big><big><big><big>Clique Me </big></big></big></big></big> </span></p> </body> </html>
78
Usando Transies As transies permitem que voc adicione efeitos de animao para elementos em seus documentos. As transies podem produzir: ? ? Um efeito animado entre dois elementos; ? ? Um efeito de enfraquecer ou desaparecer em um elemento; Dois filtros de transio so fornecidos atravs das extenses CSS: ? ? revealTrans Especifica efeitos mltiplos como caixa, cortinas horizontais e assim por diante. ? ? blendTrans Fornece um simples enfraquecer ou desaparecer com uma durao especificada. Para aplicar transies a um elemento voc deve executar os seguintes procedimentos: 1. Definir a transio de filtro a ser utilizada. Por exemplo:
myText.style.filter="blendTrans(Duration=1)"
2. Chamar o mtodo Apply para aplicar a transio ao elemento. Por exemplo:

myText.filters.item(0).Apply
3. Mudar o estado do objeto, e ento chamar o mtodo Play para iniciar a transio do estado original para o novo. Por exemplo:
myText.style.color="purple" myText.filters.item(0).Play
4. Verificar o evento onfilterchange para determinar quando a transio for completada. Por exemplo:
Sub myText_onfilterchange 'Este cdigo ser executad quando a transio for o completada. End Sub
O cdigo exemplificado a seguir executa uma transio simples:

<html> <head> <title>Mudana de Cor</title>
79
<script language="vbscript"> Sub myText_onClick 'Define a cor inicial. myText.style.color="bl ack" myText.style.filter="blendTrans(Duration=1)" 'Aplica a transio. myText.filters.item(0).Apply 'Define a nova cor. myText.style.color="purple" 'Executa a transio myText.filters.item(0).Play End Sub </script> </head> <body> <p><span id="myText" style="height:330"><big><big><big><big><big>Clique Me</big></big></big></big></big> </span></p> </body> </html>
O cdigo HTML a seguir um exemplo de uma transio simples entre duas imagens em uma tag <IMG>:
<html> <head> <title>Transio Simples</title> <script language="vbscript"> Sub doTrans theImg.filters(0).Apply theImg.src = "circles.bmp" theImg.filters(0).Play End Sub </script> </head> <body> <p><img id="theImg" width="130" height="130" src="triangles.jpg" style="filter:revealTrans(Duration=3.3, Transition=23)"> <br> <input type="button" value="Iniciar transio" onclick="doTrans()"> </p> </body> </html>
80
Transio entre Pginas As transies entre pginas tornam possvel fornecer efeitos multimdia na carga e descarga de pginas Web. Da mesma maneira que o Microsoft PowerPoint torna possvel a transies entre slides, com HTML Dinmico voc pode fornecer vrios tipos de transies entre as pginas. As transies entre pginas so as mesmas transies que voc usa em elementos e objetos, exceto que a transio afeta a pgina Web inteira, em lugar de afetar apenas um elemento ou objeto em particular. Voc cria transies de pgina com a tag <META> na seo de cabealho <HEAD> de uma pgina Web especificando: ? ? Quando uma transio deve acontecer: como durante as cargas da pgina ou medida que ela descarregada. ? ? O tipo de transio, sua durao e outros detalhes. A sintaxe para transies composta de trs partes: 1. Quando a transio deve ser executada. 2. A durao da transio. 3. O efeito de transio a ser utilizado. Os dois exemplos a seguir mostram como configurar transies quando uma pgina for carregada ou descarregada. A primeira tag <META> causa a transio 2, a ser executada quando o usurio carregar a pgina, com durao de 4 segundos. A segunda tag <META> causa execuo da transio 3, com durao de 2 segundos, para ser executada quando o usurio descarregar ou deixar a pgina.
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=4.0,Transition=2);"> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=2.1,Transition=3)">
Nota: para estas transies funcionarem, voc precisa mover-se de uma pgina para outra.
Posicionamento
Introduo O navegador Microsoft Internet Explorer 4.0 ou superior suporta elementos HTML de posicionamento atravs das coordenadas x e y e do plano z. Com isso, voc pode posicionar elementos exatamente no lugar onde deseja que eles apaream na pgina. possvel colocar tambm elementos em diferentes planos z, para sobrepor elementos e especificar que elemento deve estar em cima de outro.
81
Manipulando estas coordenadas e outros estilos dinmicos em scripts, voc pode mover elementos ao redor de uma pgina para anima-la. A combinao de estilos e posicionamentos dinmicos fornecem um conjunto muito rico de opes para animao. Os atributos CSS que descrevem a posio do objeto e os elementos de objetos que esto sendo posicionados, esto disponveis para o modelo de scripting. Atravs de scripts, voc pode dinamicamente mudar os atributos CSS que descrevem a posio do objeto. Quando voc mudar a posio de elementos na pgina, depois da pgina ser carregada, o navegador recalcula e redesenha os elementos sem precisar recarregar a pgina a partir do servidor Web. Na verdade, a posio de um elemento consiste em mais do que s suas coordenas x e y de posio na janela do navegador ou em uma impressa pgina. Os atributos de posicionamento incluem: ? ? As coordenadas x, y, e z de posio do elemento. ? ? A largura e a altura da regio retangular que um elemento pode ocupar. ? ? As dimenses da regio de recorte na regio retangular que o elemento ocupa. ? ? As caractersticas quando pores do elemento ultrapassam a regio retangular disponvel. ? ? Se o elemento ou no visvel. Posicionamento Absoluto A definio de uma posio absoluta para um elemento coloca-o fora do fluxo padro do documento (de cima para baixo) e o posiciona independente de como os elementos circundantes a ele obedecem o plano do HTML padro. Se outros elementos j ocupam a posio definida, eles no afetam o elemento posicionado, ou vice-versa. Ao invs disso, todos os elementos so apresentados no mesmo lugar, causando potencialmente que texto e outros objetos sejam sobrepostos. Voc pode controlar esta sobreposio usando o atributo indexador Z-INDEX para especificar a ordem em que elementos so empilhados na mesma localizao. Por definio, um elemento posicionado sempre possui um valor mais alto para Z-INDEX que seu elemento de pai. Se voc explicitamente no definir os atributos LEFT (esquerda), TOP (topo), WIDTH (largura), ou HEIGHT (altura) para um elemento posicionado absolutamente, a posio e as dimenses sero definidas para valores padro. Por exemplo, se voc no definir uma largura, a rea padro se estender at a extremidade direita do elemento pai. Se voc no definir uma altura, a rea ser alta o suficiente para acomodar todo o seu contedo. Voc define a posio de um elemento atravs de uma localizao absoluta de pixel com o atributo STYLE. Defina a posio para "absoluta" e as posies esquerda e de topo para valores de pixel, como exemplificado no cdigo a seguir:
<html> <head> <title>Posicionamento Absoluto Simples</title> </head>
82
<body> <div style="position:absolute;left:150;top:150;height:100;width:100"> <p>Esta <DIV> tag posicionada na pgina utilizando o recurso de posicionamento absoluto</p> </div> </body> </html>
A posio absoluta sempre relativa para qualquer elemento pai posicionado, ou se no existe um, ao elemento BODY (corpo). Os valores para a posio esquerda (LEFT) e de topo (TOP) so relativos para o canto superior esquerdo do prximo elemento posicionado dentro da hierarquia. Por exemplo, para colocar uma imagem no canto superior esquerdo do documento, use o seguinte cdigo HTML:
<IMG SRC=" WB01541.gif" STYLE="position:absolute; left:0; top:0">
Para ver como um elemento pai posicionado afeta a posio absoluta de um elemento, considere o exemplo a seguir. Este exemplo coloca um elemento de imagem (IMG) no canto superior esquerdo do elemento DIV, que ele prprio posicionado na pgina e coloca a imagem atrs do texto:
<html> <head> <title>Posicionamento Absoluto</title> </head> <body> <div style="position:relative;left:50;top:30;height:100;width:100"> <p> O texto dentro do DIV ser visvel, j que a imagem positionada atrs dele.<img src="imagem.gif" style="position:absolute; left:0; top:0; z -index:-1" width="40" height="41"> </p> </div> </body> </html>
Definindo uma Posio Relativa Ao definir o atributo POSITION da folha de estilo para relative, voc posiciona o elemento de acordo com o fluxo natural de construo do documento HTML, mas a posio do elemento ser deslocada, de acordo com os contedos que o precederem. Por exemplo, ao colocar um trecho de texto dentro de um pargrafo com posicionamento relativo, este trecho ser posicionado relativamente ao texto do pargrafo que o precede. O exemplo a seguir posiciona um trecho de texto em um pargrafo relativamente ao restante do texto do pargrafo:
<html> <head> <title>Exemplo de Posicion amento Relativo</title> </head>
83
<body> <p>O sobrescrito neste nome <span style="position: relative; top: 3px">xyz</span> "xyz". </p> </body> </html>
O valor 3px fixa o texto "xyz" trs pixeis acima do alinhamento natural do texto. Voc pode configurar o atributo LEFT de forma semelhante para mudar o espaamento horizontal entre "nome" e "xyz". Se o contedo do elemento SPAN estivesse posicionado de forma absoluta, "xyz" seria posicionado relativamente ao elemento BODY (ou ao prximo elemento posicionado na hierarquia) neste caso, "xyz" seria apenas visvel no canto superior esquerdo da janela do navegador do cliente. Textos e elementos que seguem um elemento com posicionamento relativo ocupam seu prprio espao e no sobrepem o espao natural usado para este elemento. Em contraste, textos e elementos que seguem um elemento com posicionamento absoluto ocupam o espao que teria sido natural para este elemento, antes dele ser retirado do fluxo. Elementos relativamente posicionados podem sobrepor outros objetos e elementos na pgina. Da mesma forma como com o posicionamento absoluto, voc pode especificar o atributo Z-INDEX para definir o ndice z do elemento relativamente a outros elementos que podem ocupar a mesma rea. Por definio, um elemento posicionado sempre tem uma coordenada z maior que seu elemento de pai, ou seja, ele sempre estar num plano acima de seu elemento de pai. Posicionamento e Dimenses Existem vrias propriedades disponveis para definio da localizao e dimenses de um elemento numa pgina Web. A possibilidade de mudar o valor destas propriedades atravs do script apropriado revela uma das caractersticas mais poderosas do HTML Dinmico. Voc pode redimensionar ou posicionar um elemento na pgina usando as propriedades pixelLeft, pixelTop, pixelWidth e pixelHeight. Estas propriedades numricas definem ou fornecem as coordenadas fsicas e as dimenses do elemento, conforme descritas na tabela a seguir.
Propriedade Descrio pixelLeft pixelTop pixelWidth pixelHeight Define ou retorna a posio esquerda do elemento, em pixeis. Define ou retorna a posio superior do elemento, em pixeis. Define ou retorna a largura do elemento, em pixeis. Define ou retorna a altura do elemento, em pixeis.
Nota: dependendo do elemento, antes de poder usar uma das propriedades de posicionamento, voc pode ter que definir sua propriedade de posio para "relativa" ou "absoluta". Por exemplo, style="position:relative." Voc pode examinar a localizao, largura e altura de um elemento usando as propriedades offsetLeft, offsetTop, offsetHeight e offsetWidth. Estas propriedades numricas fornecem 84
as coordenadas fsicas e as dimenses do elemento relativas ao seu elemento pai (do qual o elemento em questo derivado), como descrito na tabela a seguir.
Propriedade offsetLeft offsetTop offsetWidth offsetHeight Descrio Retorna a posio esquerda calculada, em pixeis, baseada na janela. Retorna a posio superior do elemento, calculada relativamente ao sistema de coordenadas do elemento pai. Retorna a largura do elemento, relativamente ao canto superior esquerdo do documento. Retorna a altura do elemento, em pixeis, calculada relativamente ao sistema de coordenadas do elemento pai.
O exemplo a seguir usa o posicionamento dinmico para fazer um texto saltar de um lado para outro em uma pgina Web:
<html> <head> <title>Animando Elementos</title> <script language="VBScript"><! -Dim id Dim theDirection Sub StartBounce() id = window.setInterval("Bounce()",10) End Sub Sub Bounce() If theDirection=0 then Banner.style.pixelLeft=Banner.style.pixelLeft -10 If Banner.style.pixelLeft<=0 Then Banner.style.pixelLeft=0 theDirection=1 End If Else Banner.style.pixelLeft = Banner.style.pixelLeft+10 If Banner.style.pixelLeft>=document.body.Offset idth-Banner.OffsetWidth W 20 Then Banner.style.pixelLeft=document.body.OffsetWidth Banner.OffsetWidth -20 theDirection=0 End If End If End Sub --></script> </head> <body onload="StartBounce()"> <span id="Banner" style="position:relative"> <p>HTML Dinmico</p> </span> </body> </html>
85
Controlando a Visibilidade Existem muitas alternativas para voc controlar dinamicamente a visibilidade de um elemento. Por exemplo, voc pode usar a propriedade visibility (visibilidade) para mostrar ou esconder um texto em uma pgina Web, baseando-se em uma interao com usurio. Se sua pgina Web contm grandes trechos de texto, os usurios podem selecionar o texto que desejam ver, enquanto o resto permanece escondido. O trecho de cdigo a seguir configura a propriedade visibility para "visible" (visvel) e "hidden" (escondido) para um determinado elemento em uma pgina Web:
document.all.Banner.style.visibility = "visible" document.all.Banner.style.visibility = "hidden"
Scriptlets
Introduo Um scriptlet uma pgina Web baseada em HTML Dinmico que voc pode usar como um controle ou componente em qualquer aplicativo que suporta controles. O scriptlet uma pgina HTML completa (arquivo .htm), mas inclui informaes que permitem que voc trabalhe com ele como um controle, ou seja, voc pode recuperar e fixar suas propriedades, chamar seus mtodos e assim por diante, da mesma forma que voc utiliza um controle ActiveX ou um componente numa linguagem orientada a objetos. Scriptlets so pequenos, eficientes e fceis de serem criados e mantidos, alm de fornecerem recursos para: ??Autores de pginas Web criarem componentes de interface de usurio reutilizveis, sem ter que, para isso, utilizar o poder completo de linguagens complexas como C, C++, ou outros ambientes de construo de controles. ??Desenvolvedores que utilizam o Microsoft Visual Basic, Microsoft Visual InterDev, o Borland/Inprise Delphi ou outros ambientes que suportam o desenvolvimento de controles, para usar as caractersticas contidas nos controles na construo de pginas Web. Com scriptlets, voc pode: ??Usar as capacidades grficas e de hipertexto das pginas Web para criar uma interface visualmente rica para seu aplicativo. ??Alterar a aparncia e o comportamento das pginas Web dentro de um determinado ambiente hospedeiro. Por exemplo, voc pode usar um aplicativo escrito em Visual Basic para ler informaes de arquivos de dados e ento escreve-las em um scriptlet. ??Prototipar controles que voc pretende escrever para outros ambientes. Por ser fcil e rpida a criao de um scriptlet, voc pode testar suas idias. Quando voc completar seu projeto, pode implementar o controle em outro ambiente, como C++, Visual Basic ou Visual J++ ou Delphi, caso voc necessite desempenho maior ou um meio diferente de empacotar (packaging) seu controle.
86
Usando Scriptlets Voc usa scriptlets como se fossem controles normais. Em um scriptlet, voc cria as propriedades, mtodos ou os eventos que voc desejar atravs da construo de scripts em qualquer linguagem de scripting como JavaScript ou VBScript (Visual Basic Scripting Edition). Os scripts contam com os recursos do HTML Dinmico, e fornecem a voc um modelo de objetos completo para o controle de elementos no scriptlet. Por exemplo, um scriptlet poderia ser uma pgina Web que contm animao baseada em HTML Dinmico, que move e redimensiona textos de acordo com o tamanho da pgina. Voc pode escrever scripts para expor propriedades que permitem outro aplicativo configurar o texto, a velocidade e a direo da animao, alm de mtodos que permitem outro aplicativo para iniciar, parar e pausar a animao. O suporte para scriptlets construdo nos navegadores, nos quais voc pode usar a tag <OBJECT> para inserir e trabalhar com scriptlets, como voc faz qualquer outro objeto em uma pgina Web. Para inserir scriptlets em aplicativos que suportam controles ActiveX, voc utiliza um controle chamado objeto scriptlet container, que conter o scriptlet. O aplicativo usa o objeto scriptlet container para criar uma janela para o scriptlet e fornecer um modo para o aplicativo que o contm especificar o scriptlet a ser usado, onde ele deve ser exibido, com que tamanho, e assim por diante. O objeto scriptlet container fornece tambm a interface para que voc para configurar e definir as propriedades do scriptlet, chamar seus mtodos e responder a seus eventos. Vantagens de Scriptlets Scriptlets fornecem vrios recursos chave para provedores de contedo. Para reutilizar cdigos escritos em HTML e scripts, os autores de contedo freqentemente os cortam e colam, para ento personalizar cdigo existente. Construindo scriptlets, os desenvolvedores de contedo podem criar seu contedo uma nica vez, usando HTML e scripts, e armazenalos dentro de scriplets. Com isso, outros autores rapidamente podero reutilizar os scriptlets desenvolvidos dentro de pginas Web e aplicativos, seguindo convenes simples para expor interfaces bem definidas. Atravs destas interfaces, outros autores podem personalizar o contedo de um scriptlet existente, sem ter que entender os detalhes complexos de implementao. A incorporao de scriptlets em pginas Web pode tambm melhorar o seu desempenho. Uma vez que scriptlets so compostos apenas por cdigo HTML e scripts, eles so extremamente leves e rpidos para download e execuo para usurios finais. Uma vez que o scriptlet for carregado para o cliente, ele armazenado (cached) para uso futuro. Criando um Scriplet Simples Um scriptlet uma pgina escrita com HTML Dinmico que usa certas convenes para definir suas propriedades, mtodos e eventos. Um desenvolvedor Web pode ento usar estas propriedades, mtodos e eventos para acessar recursos do scriptlet que voc definiu para expor como interface. Existem vrias formas para definir propriedades, mtodos e eventos para scriptlets.
87
Uma vez que nosso objetivo apenas fornecer uma viso geral sobre scriplets, nossa discusso ser limitada a criar uma propriedade exposta, para leitura e escrita. Uma maneira simples para criar uma propriedade que estar disponvel externamente ao documento do scriptlet atravs da criao de uma funo com uma determinada conveno de nomenclatura, especificada a seguir: ? ? Propriedade de leitura o Para expor uma propriedade, o nome da funo deve comear com a palavra Public. o Para que ela seja uma propriedade de leitura, Public deve ser seguida por um sublinhado, e ento a palavra Get. o A ltima parte do nome de funo o nome da propriedade que ser exposta para leitura.
Function Public_Get_MyProperty() 'O valor de retorno tipicamente um script ou uma vaivel a nvel r de documento. Public_Get_MyProperty=myLocalVariable End Function
? ? Propriedade de Escrita o Para expor uma propriedade, o nome da funo deve comear com a palavra Public. o Para que ela seja uma propriedade de leitura, Public deve ser seguida por um sublinhado, e ento a palavra Put. o A ltima parte do nome de funo o nome da propriedade que ser exposta.
Function Public_Put_MyProperty(argument) 'Tipicamente aqui definido um script ou uma varivel a nvel de documento. myLocalVariable=argum ent End Function
Nota: voc deve usar ambas as funes Get e Put para criar propriedades que possam ser lidas e escritas. O cdigo exemplificado a seguir um documento em HTML Dinmico projetado como um scriptlet. Ele apresenta uma mensagem definida pelo usurio em sua janela. Existem duas propriedades apenas de leitura expostas: Message e Interval. A propriedade Message o texto que est apresentado, e a propriedade Interval controla o tempo de sua apresentao.
<head> <title>Mensagem na Tela</title> <script language="VBScript"><! -Dim id Dim myInterval Dim theDirection
88
Sub StartBounce() id = window.setInterval("Bounce()",myInterval) End Sub Sub Bounce() If theDirection=0 then Banner.style.pixelLeft=Banner.style.pixelLeft -10 If Banner.style. pixelLeft<=0 Then Banner.style.pixelLeft=0 theDirection=1 End If Else Banner.style.pixelLeft = Banner.style.pixelLeft+10 If Banner.style.pixelLeft>=document.body.OffsetWidthBanner.OffsetWidth 20 Then Banner.style.pixelLeft=document.body. OffsetWidth-Banner.OffsetWidth -20 theDirection=0 End If End If End Sub 'Criao da propriedade pblica apenas de escrita chamada Interval. Function Public_Put_Interval(theInterval) myInterval=theInterval window.clearInterval(id) StartBounce() End Function 'Criao da propriedade pblica apenas de leitura chamada Message. Function Public_Put_Message(theMessage) 'Alterar o banner para refletir a nova mensagem Banner.innerText=theMessage End Function --></script> </head> <body onload="Public_Put _Interval(10)"> <span id="Banner" style="position:relative"> <p>Mensagem Padro</p> </span> </body> </html>
Adicionando Scriptles a uma Pgina Web Adicionar um scriptlet em uma pgina Web semelhante a inserir um controle ActiveX. A diferena principal que voc no usa a classe ID do objeto. Ao invs disso, voc usa o atributo Type para definir o objeto. O navegador reconhecer este tipo e inserir o scriptlet.
89
? ? Para inserir um scriptlet em uma pgina Web execute o seguinte: 1. Defina o scriptlet usando uma tag <OBJECT>, definindo seu atributo TYPE para "text/x-scriptlet". 2. Especifique a URL do scriptlet definindo o atributo DATA na tag <OBJECT>, como no exemplo a seguir:
<OBJECT ID="Scriptlet1" TYPE="text/x -scriptlet" WIDTH=300 HEIGHT=200> <PARAM NAME="url" VALUE="http://myserver/sample.htm" </OBJECT>
O prximo exemplo usa o scriptlet definido na seo anterior. No evento window_onload as propriedades Message e Interval do scriplet so configuradas.
<html> <head> <title>Scriptlet Container</title> <script language="VBScript"> Sub window_onload BouncingBanner.Message = "Mensagem na Tela" BouncingBanner.Interval = 30 End sub </script> </head> <body> <p> <object id="BouncingBanner" type="text/x -scriptlet" width="300" height="40"> <param name="url" value ="Scriptlet.htm"> </object> </p> </body> </html>
Bibliografia
Mastering Web Site Fundamentals - Microsoft Press1998. Mastering JavaScript and Jscript James Jaworski Sybex 2000.
90

Construccion Paginas Web

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Construccion Paginas Web

Transféré par

Droits d'auteur :

Formats disponibles

FEA/USP EAD-451 Informtica Aplicada Administrao Prof.

Antonio Geraldo Vidal

Faculdade de Economia, Administrao e Contabilidade da USP

EAD-451 Informtica Aplicada Administrao

Construo de Pginas Web

Prof. Antonio Geraldo da Rocha Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Introduo Linguagem HTML

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Gerenciador de Banco de Dados Microsoft SQL Server

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Projeto de Pginas Web

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Marcadores (TAGS) HTML

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Este o cdigo HTML por trs desta pgina:

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Vendo o cdigo fonte HTML no Navegador

onde x um nmero entre 1 e 6, especificando o nvel do cabealho.

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

onde x um dos seguintes:

Nem todos os navegadores suportam o atributo TYPE. 15

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Marcador de pginas E-mail

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Tag Bookmark (Marcador de Pginas)

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

A ilustrao a seguir mostra a tabela resultante:

Largura e Altura da Tabela

A ilustrao a seguir mostra a tabela resultante:

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

A ilustrao a seguir mostra a tabela resultante:

A ilustrao a seguir mostra a tabela resultante:

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

A ilustrao a seguir mostra a tabela resultante:

Pginas com Frames

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

NAME <FRAME NAME="topo"> MARGINWIDTH MARGINHEIGHT BORDER SCROLLING

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Roteiro para criar um Documento de HTML com frames

Para Navegadores Que No Suportam Frames

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Formulrios do Microsoft FrontPage

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

Tags para Criao de Formulrios

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

FEA/USP EAD-451 Informtica Aplicada Administrao Prof. Antonio Geraldo Vidal

O exemplo a seguir define um controle de caixa de texto de uma linha:

O exemplo a seguir define um controle de caixa de texto com rolamento:

O exemplo a seguir define um boto Normal denominado btnClickMe: