CPW - Aulas 1 - 20

Referências módulo 1 Aula 1: Introdução - a WEB e os
(até a aula 9):

Severo, C. Internet: Documentos HTML
como criar home
pages. Rio de Janeiro:
Editora Campus, 1996. Antes da WWW atingir um grande público era privilégio de
Lemay, L. Aprenda em
uma semana HTML 4.
poucos, mas agora com uma Home Page de conteúdo
Rio de Janeiro: Editora interessante no ar pode-se ser achado e visitado por pessoas
Campus, 1998. de todos os lugares do mundo, o tempo todo. Empresas e
Alcântara, A. et al. profissionais já notaram as grandes portas que se abrem com
Home pages: recursos essa enorme possibilidade de divulgação. Mas para isso ser
e técnicas para criação
de páginas WWW. Rio
possível alguém tem que fazer a elaboração do site; é isso
de Janeiro: Editora que você vai aprender nesse nosso curso. Não é o máximo?
Campus, 2000. Você deixará de ser apenas mais um visitante para ser um
Campbell B. & Darnell criador de sites!
R. Aprenda em uma
semana Dynamic
HTML. Rio de Janeiro:
Editora Campus, 1998. Objetivos:
ICMC-USP.Instituto de Nesta primeira aula você:
Ciências Matemáticas e - aprenderá os conceitos básicos da WEB,
de Computação. USP. - verá como é a estrutura de um documento HTML,
Disponível em:
http://www.icmsc.sc.us
desenvolvendo nosso primeiro exemplo,
p.br/manuals/HTML - conhecerá os comandos básicos de formatação.
Você já terminará sua primeira aula aprendendo inclusive
como acentuar palavras em HTML!
Home Pages
Documento projetado
para ser a página Pré-requisitos:
principal de um Site.
Funciona como a porta
Não há pré-requisitos para essa nossa primeira aula, embora
de entrada e deve conter seja sempre desejável que você conheça a Internet ou tenha
um ou mais links para as "navegado" por ela alguma vez!
demais páginas do Site
ou para outros Sites
relacionados. 1. A World Wide Web - WWW
Chama-se rede de A idéia inicial da Internet surgiu, em 1969, como uma rede
computadores (Net) a descentralizada para interligar instalações militares
utilização de diversos
computadores que, de (ARPANET). Durante a década de 70 várias outras redes
maneira interligada, foram sendo interligadas à ARPANET e, em 1980, ela passou
trocam serviços ou a se chamar Internet. No início da década de 80 são criadas
informações. Se essa redes de interconexão de instituições científicas (BITNET,
conexão se restringir a CSNET, NSFNET). O ano de 1983 é um marco para a
uma pequena região (um
escritório por exemplo) Internet, pois nele os militares abandonam o controle da
é chamada intranet. ARPANET.
Internet representa esta
conexão em nível A World Wide Web (WWW), ou simplesmente Web, foi
global. Mas esse é o desenvolvida no final da década de 80 como uma forma de
assunto de outra facilitar aos pesquisados o acesso a documentos científicos.
disciplina, que tratará de
redes de computadores. Através da Web é possível, partindo de um determinado
ponto, pesquisar outros documentos a ele relacionados,
1
A história aqui no independente de sua localização física (que o usuário não tem
Brasil: a mínima necessidade de conhecer).
A Internet surgiu no
Brasil em 1991, num Com a Web, ganhou força a utilização, em larga escala, da
primeiro momento técnica de hipertextos. Um hipertexto é um documento onde
interligando
instituições acadêmicas
é possível incluir referências (em inglês, Links) a outros
por meio da Rede documentos. A seleção de uma destas referências, leva o
Nacional de Pesquisa. usuário ao documento referenciado.
A partir de 1995,
começa a utilização Inicialmente, a informação disponível na Web era encontrada
comercial e a principalmente sob a forma de textos e hipertextos. Aos
popularização da rede. poucos foram sendo incorporados elementos gráficos e
animações aos documentos. Tais recursos ajudaram muito a
Com o surgimento dos
popularizar a Web, aproximando-a mais do cidadão comum.
provedores de acesso, a
Internet chega ao A popularização da Web criou uma série de novas aplicações,
cidadão comum. A fazendo com que ela seja utilizada hoje para: divulgação
exposição e divulgação
da rede através dos
científica, trabalho cooperativo, divulgação de informações
meios de comunicação culturais e livros eletrônicos, promoção de produtos e
de massa dão um serviços, realização de comércio eletrônico e suporte técnico
grande impulso ao seu e vários outros usos que vão sendo inventados a cada
crescimento. instante.
2. Conceitos Básicos da Web

Uma característica importante da Web (ou Internet) é que a
informação é disponibilizada de forma independente do tipo
de computador que será utilizado para a sua visualização.
Para isso é necessário que os documentos sejam escritos
utilizando um formato padronizado. Esta padronização é
obtida através de uma linguagem chamada HTML:
HyperText Markup Language. O padrão HTML é definido
Os principais serviços pelo World Wide Web Consortium-W3C, que é uma das
da Internet são descritos entidades que controla a Internet. O padrão atual é
pelos diversos representado pelo HTML 4.
protocolos de
comunicação que ela O código HTML contém instruções de visualização de texto e
disponibiliza. Alguns informação para localização de outros documentos (links).
deles são: Para poder visualizar corretamente o documento, o usuário
• Correio Eletrônico -
e-mail
necessita de um programa (navegador) capaz de interpretar
• Conexões Remotas esta linguagem, reconstituindo a informação segundo as
-telnet instruções contidas no código.
• Transferência de
Arquivos - ftp
Para obter algum documento na Web, o usuário deve fornecer
• Transferência de ao navegador um conjunto de informações sobre este
hipertextos - HTTP documento:
a) seu protocolo de comunicação,
b) o endereço, na Internet, da máquina na qual se encontra o
documento,
c) o diretório onde o documento está arquivado na máquina e
2
Editores de HTML d) o nome do documento.
Atualmente, existe uma Estes dados devem ser informados ao navegador segundo um
grande quantidade de
ferramentas, para formato padronizado que chamamos de URL.
auxiliar o A máquina que contém o documento a ser exibido deve estar
desenvolvimento de
páginas de Web.
executando um programa que se encarrega de receber o
pedido do documento, localizá-lo no disco e enviá-lo para a
máquina que o pediu. Este programa é chamado de Servidor
Há vários níveis de de Web e o navegador que pede o documento é chamado de
ferramentas desde Cliente.
aquelas destinadas a
converter documentos Agora que você já viu como o documento chega até o
de um determinado usuário, após sua solicitação, veja alguns conceitos básicos
formato para HTML,
envolvidos neste processo.
passando por editores
visuais simples, até
ferramentas complexas 2.1. Navegadores (Browsers)
de gerenciamento de
sites. Para navegar pela Web é necessário um programa que
chamamos de navegador (em inglês, Browser). Ele é
Exemplos destas responsável por: solicitar documentos na Internet e interpretá-
ferramen-tas são: los, exibindo-os para o usuário. Exemplos de navegadores:
• Filtros conversores: Netscape, Internet Explorer, Mosaic, Lynx.
rtftohtml, pstohtml.
• Editores de tags:
HTML Assistant,
HotDog, W3e.
• Editores Wysiwyg:
2.2. Servidores (Web Servers)
Netscape Composer, MS
Internet Assistant, MS Para navegar pela Web também é necessário outro tipo de
FrontPage Express. programa, chamado servidor. Os programas deste tipo foram
• Gerenciadores de especialmente elaborados para administrar o acesso às
site: MS FrontPage, páginas HTML. Eles são executados nas máquinas onde estão
AOLPress, Macromedia guardados os documentos HTML. Estes programas são os
Dreamweaver.
responsáveis pelo envio dos documentos para as máquinas
que os solicitam. Exemplos servidores: NCSA, CERN,
Estas ferramentas porém Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite
não eliminam a (em ambiente windows).
necessidade de conhecer
a linguagem HTML.
Mesmo as ferramentas
mais complexas mantêm
a facilidade de visualizar 2.3. HTML (Hypertext Markup Language)
e editar diretamente o
código HTML, o qual é É a linguagem padrão usada para a escrita de páginas da
muitas vezes a forma Web.
mais fácil de se obter o
efeito desejado na O HTML é uma linguagem de marcação, ou seja, seus
página. comandos (chamados Tags) servem para informar aos
programas de navegação os elementos que serão exibidos na
página: cabeçalhos, textos em itálico, links, imagens etc. O
navegador Web interpreta estes comandos e exibe a página
para o usuário.
3
Um texto HTML não define a forma exata como o
documento vai ser exibido. Isto depende do programa de
navegação usado e das definições feitas pelo usuário.
2.4. URL (Uniform Resource Locator)
A URL é a convenção utilizada para indicar ao navegador a

forma de localizar um endereço na rede. Por exemplo:
http://www.receita.fazenda.
gov.br/IR2002/devolucao.htm
Uma URL obedece ao seguinte formato:

protocolo://servidor/caminho/arquivo
Onde:
protocolo – Indica a forma como vai ser realizada a
comunicação entre o servidor e o cliente e também o tipo de
serviço que será prestado. No caso de HTML o protocolo é o
http (HyperText Transfer Protocol).
servidor – Endereço do servidor (ou maquina) na Internet.
Pode ser dado na forma nome_da_máquina.domínio (como
no exemplo acima) ou através do endereço IP da máquina
(como em 146.164.2.68).
caminho – Localização do arquivo no disco do servidor
através de um diretório ou de uma lista de diretórios. (por
exemplo: http://www.ic.uff.br/~aconci/curso
/formatos.html, onde ~aconci e curso são
diretórios ou "pastas").
arquivo – Nome do arquivo desejado. Esta informação
pode ser omitida. Neste caso, o servidor assume um nome
padrão, que pode variar de instalação para instalação, mas
normalmente é home.html ou index.html.
Você vai agora conhecer como se constitui um documento
HTML, sua estrutura e seus comandos básicos de formatação.
ASCII é abreviatura de
American Standard
Code for Information
Interchange, e 3. Características Gerais de HTML
identifica uma
convenção amplamente Um documento escrito em HTML é um arquivo ASCII
usada em computação comum, contendo apenas os caracteres ASCII visíveis.
para codificar
caracteres (letras, O navegador ignora qualquer caracter especial, inclusive
números e símbolos aqueles que sugerem algum tipo de formatação ao texto
gráficos).
(como TAB, CR, LF). Qualquer tipo de formatação deve
ser informada através dos comandos conhecidos como tags.
4
As tags, ou marcas, se diferenciam do texto comum por
estarem contidas entre o caracter "<" e o caracter ">".
Algumas tags contêm atributos que permitem configurar
algumas características. E alguns atributos podem ter
valores específicos. Estes atributos são colocados entre os
delimitadores (< e >), após o nome da tag. Os valores vêm
depois de um sinal de "=" colocado junto aos atributos. A
sintaxe genérica de uma tag é :
Nos exemplos ao lado, <nome atributo1=valor atributo2= valor
A e HR são os nomes de ....>
duas tags. HREF,
SIZE e WIDTH são Como por exemplo:
os seus atributos. Os <A HREF="http://faperj.br">
valores podem variar <HR SIZE=8 WIDTH=80%>
muito dependendo do
significado do
atributo! Há dois tipos de tags: container tags (ou emparelhada) e
empty tags.
Vejamos em que são diferentes.
O que são tags 3.1. Container Tags

derivadas?
Uma tag derivada é
Servem para definir um efeito sobre um trecho do
igual à tag original
exceto por conter o documento. Estas tags vêm sempre aos pares: uma tag indica
caracter barra: / . o início (tag de abertura) do trecho e uma outra tag
Veja o exemplo da derivada indica o fim (tag de fechamento). Todo o texto
tag que define o escrito entre as duas tags sofre o efeito indicado por elas.
negrito!
Por exemplo, para indicar que uma parte do texto deve ser
exibida em negrito utilizamos o par de tags <B> e </B>.
O seguinte trecho HTML:

Ao construir uma
página WWW, Uma palavra em <B>negrito</B>
você precisa fica realcada
escolher uma
estratégia de Seria exibido da seguinte forma:
denominador
comum para
Uma palavra em negrito fica realcada.
oferecer suporte à
maioria dos
navegadores, a
menos que você As container tags podem ser colocadas umas dentro das
objetive atender outras. O texto contido na tag mais interior sofre o efeito
apenas a um grupo cumulativo de todas as outras tags "mais externas".
específico de
usuários como nas
situações de
Por exemplo o seguinte trecho HTML:
Intranet (ou redes
locais). Palavras em <i>italico e <B>negrito</B>
ficam realcadas </i> diferentemente
5
Seria exibido da seguinte forma:
Palavra em italico e negrito ficam realcadas diferentemente.
A linguagem HTML 3.2. Empty Tags

não faz a
diferenciação entre São tags que produzem efeitos locais, normalmente
letras maiúsculas e
letras minúsculas.
introduzindo algum elemento no texto, e, portanto, não
Assim escrever precisam de uma tag finalizadora. Um exemplo é a tag
<BR> ou <br> tem <BR> que insere no texto uma mudança de linha.
o mesmo
significado. Por exemplo, o seguinte trecho HTML:
Um espaco em branco
ou muitos na separacao de palavras tem o
mesmo efeito.<br> Assim como uma linha em
branco ou muitas.<br> Deve-se usar a tag
adequada para mudar de linha.
Seria exibido da seguinte forma:
Um espaco em branco ou muitos na separacao de palavras tem o mesmo

No exemplo ao lado efeito.
usamos a forma de Assim como uma linha em branco ou muitas.
escrever "mais Deve-se usar a tag adequada para mudar de linha.
internamente" as
tags que são
interiores a outras 3.3. Estrutura de um Documento HTML
tags, para facilitar a
identificação
visual de onde as Todo documento HTML tem a seguinte estrutura:
diversas partes do
documento se <HTML>
iniciam e finalizam.
< HEAD>
Esta forma de
escrever, muito <TITLE>
usada em Titulo da Pagina
linguagem de </TITLE>
programação, é </HEAD>
chamada de
endentação.
<BODY>
Usar escrita No corpo do documento descreve-
endentada também se tudo o que aparece dentro da
pode ser útil para pagina do navegador.
visualizar o efeito </BODY>
cumulativo que
pode ocorrer com
as tags containers, </HTML>
comentadas na
página anterior.
6
A tag HTML indica a área onde deve estar contido o
Como projetar documento HTML. Isto não quer dizer que o Browser não
bons documentos ?
exiba um texto colocado fora desta tag, mas essa não é uma
Os passos a seguir boa prática. Porque dependendo do navegador que o usuário
dão algumas dicas estiver usando algumas conseqüências não previsíveis podem
dos aspectos que ocorrer. Se você colocar o texto fora desta área, no mínimo
devem ser avaliados você perde o controle sobre como o texto será visto pelo
quando você for
criar uma página na usuário.
Web:
A tag HEAD é o cabeçalho do documento. Nesta área são
• avaliação do colocadas tags com informações relativas ao documento. A
público alvo; mais importante destas informações está contida na tag
TITLE que deve sempre ser incluída em todas as páginas. O
• definição do
conteúdo; texto do TITLE é utilizado pelo navegador para nomear os
links adicionados ao arquivo de "favoritos" (bookmarks) do
• organização da usuário. Normalmente, o texto que aparece no interior da tag
estru-tura da página; TITLE é visualizado na barra de títulos da janela do browser.
• redação do
conteúdo;
A tag BODY contém o documento propriamente dito. Nesta
área, deve ser colocado tudo que representa a página a ser
• programação visualizada. Constitui a maior parte do documento HTML e
visual e inclui geralmente muitas outras tags no seu interior.
implementação da
página.
No final desta aula, o "exemplo atividade" descreve em
detalhes estas partes; que tal ir lá dar uma olhada?
3.4. Comentários
O principal
diferencial é que as Como em outras linguagens de programação, é possível
tags de formatação
lógicas se inserir parte de texto que o usuário não tem acesso. Essas
preocupam em
partes são chamadas comentários.
definir uma idéia e
não em precisar
exatamente como Num texto HTML, todo texto incluído entre  é
essa idéia
aparecerá. ignorado pelo Browser, ou seja é interpretado como um
comentário do programador.
Por exemplo, se
você usar para
ressaltar um texto, a
tag <EM> fará com
que ele seja exibido 3.5. Comandos Básicos de Formatação
em itálico no
Explorer e no A linguagem HTML possui duas classes de elementos
Netscape, mas utilizados para modificar o estilo de apresentação de partes
outro navegador do texto: tags físicas e tags lógicas.
poderá apresentá-lo
em negrito, ou
em um parágrafo à As tags físicas indicam, explicitamente, a forma como o
parte entre "aspas", autor deseja ver exibido o seu texto. Elas são mostradas na
etc. tabela 1.1.
7
Tabela 1.1 -Tags físicas
Elemento Descrição Efeito
<B>…</B> Negrito texto normal
<i>…</i> Itálico texto normal
<U>…</U> Sublinhado texto normal
<TT>…</TT> Letras igualmente texto normal
espaçadas
<SUB> … </SUB> Subescrito normal
texto
texto
<SUP> … </SUP> Sobrescrito normal
<STRIKE> ... Riscado texto normal
</STRIKE>
<BIG> ... Fonte grande texto normal
</BIG>
<SMALL>...</SM Fonte pequena texto normal
NOTA: ALL>
O pouco rigor de
alguns navegadores As fontes (ou tipos de letras usadas para os textos), podem
permite que algumas ser de dois tipos: proporcionais ou mono-espaçadas. As
container tags primeiras determinam um espaço para cada letra
HTML sejam proporcional à sua largura. Nelas por exemplo, um ponto,
representadas como '.', ocupa menos espaço que a letra 'i', e esta ocupa menos
empty tags.
espaço que a letra 'm'.
Uma destas é <P>.
Pode acontecer do seu Já as fontes mono-espaçadas determinam o mesmo espaço
texto ser bem para qualquer que seja o símbolo gráfico a ser escrito, como
interpretado sem ser nas máquinas de escrever antigas. Fontes mono-espaçadas
necessário colocar a
tag de fim de possibilitam que um texto seja exibido respeitando a
parágrafo (</P>). endentação. Para ter um texto escrito deta forma em HTML
No entanto, o World você deve escrevê-lo entre as tags <TT> e </TT>.
Wide Web
Consortium-W3C
recomenda que ela
seja uma container
As tags lógicas expressam uma idéia que deve ser passada ao
tag. usuário e a forma como o texto será exibido depende do
navegador. Algumas delas são descritas na tabela 1.2.
Tabela 1.2 - Tags lógicas

Elemento Descrição Explorer e
Netscape
<STRONG>... Texto forte Negrito
</STRONG>
<EM>...</EM> Texto enfatizado Itálico
<CITE>...</CITE> Citação Itálico
<CODE> ... Código de Mono-espaçado
</CODE> programa
<ADRESS>... Endereço Itálico
</ADDRESS>
Como você pode ver, os dois navegadores principais

(atualmente no mercado), as exibem da mesma maneira. Mas
8
isso é apenas por acaso. Nada garante que esta forma de
exibição continue nas próximas versões destes navegadores
ou que os outros façam o mesmo.
4. Formatadores
Como foi dito anteriormente, o navegador ignora qualquer

caracter especial de formatação, como os caracteres de
margem e mudança de linha existentes no arquivo HTML.
Quando é necessária uma formatação num documento, deve-
Os atributos se incluir uma das tags da tabela abaixo.
devem ser
colocados dentro
das tags de Tabela 1.3 - Tags de formatação
abertura e podem Elemento Descrição Atributos
ter valores ou <BLOCKQUOTE> Aumentar a margem Nenhum
não. Os valores <BR>
possíveis de cada
Quebra de linha Nenhum
atributo também
variam com o <PRE> Parágrafos pré-
significado Nenhum
destes atributos, formatados
como pode ser <P> Início de parágrafo
visto na tabela ao ALIGN
lado.
<HR> Linha horizontal SIZE, WIDTH,
ALIGN e NOSHADE
O controle sobre o alinhamento da página pode ser

conseguido através da margem. O par de tags
<BLOCKQUOTE>...</BLOCKQUOTE> serve para
aumentar a margem. Essa tag pode ser acumulada para
conseguir margens maiores, como por exemplo:
<BLOCKQUOTE>
texto com mais margem
<BLOCKQUOTE>
texto com mais margem ainda...
</BLOCKQUOTE>
</BLOCKQUOTE>
4.1. Tag <PRE> : texto pré-formatado

Muitas vezes, é interessante fazer com que o navegador
reproduza exatamente a formatação do texto escrito no
arquivo HTML, sem ignorar espaços, mudanças de linha,
tabulações e utilizando uma fonte mono-espaçada para exibir
o texto. Um exemplo típico disso é quando se deseja incluir
uma listagem de um programa de computador em uma página
HTML. Um trecho do código de um programa é melhor
descrito se endentado como já fizemos em alguns exemplos
desta aula.
9
Para incluir um texto pré-formatado com fonte mono-
espaçada utiliza-se a tag <PRE> … </PRE>. Esta tag,
porém, não impede o navegador de interpretar outras tags que
estejam em seu interior, permitindo realizar mudanças de
fonte, estilo e cor do texto.
4.2. Alinhamento de Texto

Os textos contidos nos arquivos HTML são exibidos, salvo
indicação em contrário, alinhados à esquerda da janela. Para
ter o texto alinhado de forma diferente é necessário modificar
o atributo ALIGN existente em algumas tags (como
cabeçalhos <P> e <HR>).
O atributo ALIGN pode assumir os seguintes valores: RIGHT

(direita),
CENTER (centro) ou
LEFT (esquerda).
Exemplo: <P align=right>
O alinhamento centralizado também pode ser obtido através

da tag <CENTER> ... </CENTER>.
Exemplo: <center>texto centralizado

</center>
A tag <DIV> ... </DIV> permite definir o alinhamento

default para tudo que ela contiver.
Exemplo: <DIV align=left>

texto alinhado à esquerda
</DIV>
4.3. Atributos de Linha Horizontal <HR>

O atributo SIZE é utilizado para definir a espessura da linha
em número de pontos (pixels).
O atributo WIDTH serve para definir a largura da linha. Esta
largura pode ser especificada pelo número de pontos ou pelo
percentual da janela que será ocupado pela linha.
O atributo NOSHADE (no shade, isto é, sem sombra) não tem
valor. A sua simples inclusão faz com que a linha não seja
desenhada com efeito sombreado.
O atributo ALIGN já foi descrito anteriormente na seção
Alinhamento de Texto. Esse atributo aparece em diversas
tags de HTML, com o mesmo conjunto de valores possíveis.
10
O exemplo abaixo, inclui uma linha de 2 pontos de espessura,
ocupando 50% da janela e sem sombreado:
<HR SIZE=2 WIDTH=50% NOSHADE>
5. Cabeçalhos
Ao se redigir um documento é conveniente organizá-lo de

forma clara atribuindo títulos e subtítulos às suas diversas
partes.
A linguagem HTML oferece um conjunto de 6 cabeçalhos
pré-definidos que podem ser incluídos no documento através
da tag <Hn> ... </Hn>, onde n pode ser um número de 1
a 6.
Os cabeçalhos aceitam o atributo ALIGN já descrito (o valor
padrão, se não houver qualquer definição de alinhamento, é
centralizado). Os textos nos cabeçalhos são escritos em
negrito e seus tamanhos variam do maior H1 até o menor H6.
<H1>Titulo Principal</H1>
<H2 align=left>Titulo</H2>
<H3 align=right>Subtitulo</H3>
<H6>Todo este texto vai ser escrito em
negrito e centralizado como se fosse um
Portabilidade é a titulo</H6>
qualidade de um
componente de
hardware ou software
que o torna capaz de
ser utilizado em 6. Acentuação em HTML
diferentes tipos de
computadores. Não existe uma padronização universal para definir os
Algumas vezes a códigos associados aos caracteres acentuados. Quando
portabilidade ocorre produzimos uma página no ambiente Windows, utilizando
mediante pequenas diretamente os caracteres do Windows, esta página será
alterações, mas quanto
visualizada sem problemas em grande parte das máquinas
menores
essas alterações mais que utilizam este mesmo sistema (se o sistema estiver
portável ou maior será configurado para utilizar a norma ISO Latin 1), mas isso não
o grau de será verdade para qualquer ambiente.
portabilidade do
componente. Como conseqüência é possível que um texto, cheio de
Houaiss, A. caracteres acentuados e visualizados de forma perfeita na tela
Dicionário da língua de quem o produziu, apareça cheio de caracteres estranhos na
portuguesa, Rio de tela de alguém que esteja trabalhando em um ambiente
Janeiro, Editora
Objetiva, 2001. diferente. Para garantir a portabilidade dos documentos nas
mais diferentes plataformas, o HTML prevê uma série de
códigos que devem ser utilizados no lugar de caracteres
acentuados e outros caracteres especiais. A tabela 1.4 resume
estes caracteres.
11
Tabela 1.4 - Caracteres especiais e para acentuação
Codificação em HTML
á á é é Ç ç & &
ã ã ê ê Ç Ç “ "
â â ó ó < < ® ®
à à ü ü > > © ©
A melhor maneira de aprender é fazendo! Por isso estamos

Nota: propondo um exemplo atividade que além de resumir o que
vimos nesta aula, servirá para você exercitar o conteúdo.
O exemplo
atividade está
propositadament
e alguns Exemplo Atividade:
acentos. Você
entenderá o <HTML>
porquê quando
finalizar os
<HEAD>
exercícios desta <TITLE>Curso de
aula!!! Construção de
Páginas WEB</TITLE>
Mas ainda há </HEAD>
muito mais <BODY>
coisas nele!
Entenda ainda <H1 align=center >
mais na próxima Primeiro Exemplo</H1>
aula!!! Primeiro leia este exemplo procurando
identificar cada um dos elementos
comentados na aula.
Segundo, identifique quais as "Tags"
que são "containers" e seus inicios e
fins.
Terceiro, vamos usar este exemplo
para testar cada das formas de
formatacao aprendidas. Assim copie
este exemplo e salve-o em um editor
de texto. Logo que ele seja salvo com
a terminacao .htm, voce pode
visualiza-lo em um navegador. Abra o
arquivo escolhendo Arquivo/Abrir (ou
File/Open)no menu Arquivo (ou File)
do navegador. Depois de visualiza-lo
como esta escreva cada frase de forma
diferente no navegador, usando para
isso cada uma das 9 formas diferentes
de Tags Fisicas descritas: negrito,
italico, sublinhado,etc.
Quarto, vamos fazer todos os demais
exercicios que seguem!!!
</BODY>
</HTML>
12
Exercícios:
Depois de 1. Utilize, no exemplo atividade, os separadores de quebra de
responder cada
exercício, linha <BR> e parágrafo <P>, separando adequadamente o
salve-o em um texto. Além disso, desenhe linhas horizontais ocupando 25%
editor de texto. da janela, separando os parágrafos que iniciam com as
Logo que ele palavras: Segundo, Terceiro e Quarto dos parágrafos
seja salvo com
anteriores. Visualize o novo aspecto que o exemplo terá
a terminação
.htm, é agora!
importante que
você visualize- 2. Atribua subtítulos aos parágrafos que você separou no
o em um exercício anterior, utilizando <H3> </H3>. Compare como
navegador. fica a página se você agora usar <H5> </H5>.
3. Ao final do arquivo inclua (usando as opções Copiar e

Colar, que geralmente estão nos menus Editar dos programas
de edição de texto) como "texto formatado", um arquivo de
texto qualquer que você já tenha armazenado antes (você
deve usar que tag para isso?). Veja o resultado e responda: as
tags <PRE> </PRE>, realmente funcionaram?
4. Mude o alinhamento de cada parágrafo e cabeçalho do

texto (o subtítulo que você escreveu no exercício 2). Faça o
primeiro estar à direita, o segundo centrado, o terceiro à
esquerda e no quarto use a tag <DIV></DIV>. Depois
responda: o que ocorreu no último caso?
5. Você já deve ter notado que o texto está sem acentos!

Você sabe como melhorar isso, não? Então, mãos à obra!
Resumo:
Nesta aula, você aprendeu: a estrutura básica da linguagem
HTML, a formatar um documento, a incluir títulos, subtítulos
e, a acentuar o texto corretamente, independentemente do
navegador que esteja usando. Fez sua primeira "obra" em
HTML e testou seus novos conhecimentos nos exercícios.
Auto-avaliação:
Se você concluiu com sucesso os exercícios, podemos dizer
que você fixou todos os detalhes desta aula e está pronto para
tornar qualquer texto um hipertexto. Este é o assunto da
próxima aula: Listas e Links.
13
Aula 2: Listas e Links
Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a

entender o que são listas de definições e como fazer referências a outros
documentos. Vamos entender a diferença entre caminhos relativos e absolutos.
Aprenderemos a utilizar âncoras e a tornar possível o envio de mensagens pela
página que construiremos via e-mail. Além disso, veremos como fazer
referências a documentos não HTML (como imagens, som, vídeo). Ou seja,
juntos faremos nossa página ter toda a versatilidade de um hipertexto!!!
Objetivos:
- Aprender a utilizar listas numeradas.
- Compreender listas de definição.
- Aprender a referenciar outros documentos.
- Diferenciar caminhos relativos de absolutos.
- Aprender a utilizar âncoras.
- Possibilitar o envio de mensagens via e-mail pela página HTML.
- Referenciar documentos de outros tipos.
Pré-requisito:
Você entendeu bem a aula anterior? Fez com facilidade os exercícios? Se
respondeu afirmativamente estas perguntas está pronto para esta aula! Se não,
tire suas dúvidas e releia a aula anterior!
1. Listas e Enumerações
Uma forma muito comum de organizar a informação é através de listas. A
linguagem HTML oferece 3 formas diferentes de criar uma lista:
• listas não numeradas,
• listas numeradas, e
• listas de definição (tipo verbete de dicionário).
Vamos ver o que cada uma delas representa.
<LI> também
pode ser interpretado
por alguns
navegadores
corretamente se não
1.1. Listas Não Numeradas
for escrita como do
tipo empty, mas a As listas não numeradas são formadas por itens precedidos de um símbolo
W3C recomenda que gráfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista,
seja usada como sendo que cada item é indicado pela tag <LI>.
container tag.
Tanto a tag <UL> como a tag <LI> têm o atributo TYPE. Este atributo indica
Default é um termo qual símbolo é colocado antes de cada item: disc (um círculo cheio, é o
muito usado em
default), circle (um círculo vazado) e square (um quadrado cheio).
computação para
indicar o valor que é
assumido na falta de Por exemplo, o código HTML:
qualquer
especificação.
1
<UL>
<LI>Correio Eletronico</LI>
<LI>Telnet</LI>
<LI>FTP</LI>
</UL>
Telnet é o serviço
de conexões remotas
Produz uma saída parecida com:
da WEB. • Correio Eletronico
Esse sistema permite
• Telnet
que sua máquina • FTP
possa ser um
terminal de outra
máquina na 1.2. Listas Numeradas
Internet. Para isso o
usuário deve ter uma As listas numeradas são formadas por itens precedidos de um número
conta (login) na
máquina remota. A indicando a sua ordem. Em HTML utiliza-se a tag <OL> ... </OL> para
utilidade principal delimitar a lista numerada, sendo que cada item é indicado pela tag <LI>.
do Telnet é
possibilitar a Tanto a tag <OL> como a tag <LI> têm o atributo TYPE, que no caso deste
execução de
programas na tipo de lista, indica qual a forma de numeração será usada em cada item. As
máquina remota. formas possíveis são:
• 1 (números arábicos, é o default),
FTP é o protocolo • A (letras maiúsculas),
usado na Internet • a (letras minúsculas),
para transferência de
arquivos entre • I (números romanos com letras maiúsculas) e
computadores. • i (números romanos com letras minúsculas).
O FTP é um dos
recursos mais A tag <OL> tem também o atributo START, que indica qual será o primeiro
importantes da número da lista.
Internet, sendo
responsável por um
grande volume de
A numeração também pode ser modificada através do valor do atributo VALUE
tráfego de dados. da tag <LI>.
Para você se
conectar a uma Por exemplo, o código HTML:
máquina remota <OL TYPE=A>
através do FTP é <LI> Correio Eletronico</LI>
necessário que a sua <LI VALUE=4> Telnet</LI>
máquina e a remota <LI> FTP</LI>
estejam executando
um programa </OL>
servidor de FTP.
A. Correio Eletronico
D. Telnet
E. FTP
Enquanto que:
<OL TYPE=1 START=5>
<LI> Correio Eletronico</LI>
<LI VALUE=1> Telnet</LI>
<LI> FTP</LI>
</OL>
2
resultaria:
5.Correio Eletronico
1.Telnet
2.FTP
1.3. Listas de Definições

<DT> e <DD>
também podem As listas de definição (ou do tipo verbete de dicionário) consistem de uma lista
ser corretamente de termos, seguido de um parágrafo deslocado, contendo sua descrição.
interpretadas
como empty tag Em HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de
nas versões
menos rigorosas
definições. Cada termo a ser definido é indicado pela tag <DT> ... </DT>
(isto é, que não e a sua definição é indicada pala tag <DD>...</DD>.
seguem
precisamente Uma possível aplicação para as listas de definição é criar listas endentadas que
todas as
não são precedidas pelos símbolos gráficos padrão ou por numeração. O autor
recomendações
da W3C) de da página pode criar os símbolos que deseja colocar no início de cada item,
alguns utilizando a tag que inclui imagens no documento. Você verá como incluir
navegadores imagens mais adiante em nosso curso.
HTML.
Por exemplo, o código HTML:
<DL>
<DT>Telnet</DT>
<DD>&É o protocolo mais usado na Internet
para criar uma conexão com uma
máquina remota.</DD>
<DT>FTP</DT>
<DD>OO "File Transfer Protocol" é o
principal método de se transferir arquivos
pela Internet. </DD>
</DL>

Telnet
É o protocolo mais usado na Internet para criar
uma conexão com uma máquina remota.
FTP
O "File Transfer Protocol" é o principal método
de se transferir arquivos pela Internet.
A tabela 2.1 resume as tags relativas a listas.
3
Tabela 2.1 - Resumo das Tags de Listas
Elemento Descrição Atributos
<UL> ... </UL> Lista não ordenada TYPE
<LI> ... </LI> Item de lista não TYPE
ordenada
<OL> ... </OL> Lista ordenada TYPE,
START
<LI> ... </LI> Item de lista ordenada TYPE, VALUE
<DL> ... </DL> Lista de definições nenhum
<DT> Termo a ser definido nenhum
<DD> Definição do Termo nenhum
Note que:
Os caminhos de
2. Interligando Documentos
diretórios seguem a
convenção do Uma das principais características do hipertexto é a possibilidade de incluir
sistema operacional referências no documento. As referências são denominadas Links e quando
Unix utilizando o selecionadas levam à exibição do documento referenciado.
caracter / em vez de
usar o caracter \. As referências ou Links podem ser feitas a:
• documentos na mesma máquina,
• documentos em uma máquina completamente diferente (que pode estar até
do outro lado do mundo),e
• um outro ponto do próprio documento.
Ao se fazer uma referência a um outro documento é necessário indicar a sua

URL. Caso o documento referenciado esteja na mesma máquina é possível (e
recomendável) utilizar uma URL relativa (utilizando o caminho de diretórios
para chegar ao novo documento a partir do atual), ao invés da URL absoluta
(ou seja o endereço completo na Internet do novo documento).
Por exemplo, se na página:

equipe.nce.ufrj.br/joao/Programa.htm
houver uma referência a um arquivo que se encontra no endereço:
equipe.nce.ufrj.br/Exemplos/arq.htm
não é necessário escrever a URL completa. Basta escrever o caminho relativo

até ela:
../Exemplos/arq.html
Pois "../ " significa: "a partir do diretório atual" (que no caso é joao),
vá ao diretório anterior (no caso equipe.nce.ufrj.br) e de lá para um
sub-diretório filho chamado Exemplos, onde há o arquivo arq.html.
4
2.1. Referência a Outro Documento
Márcia e
Glaucia: este A forma de inserir referência em arquivo HTML é através da tag <A> ...
Outro é mesmo </A> e de seus atributos.
maiusculo?
O atributo HREF serve para definir a URL que será aberta se o usuário
selecionar, com o mouse, o texto contido entre o <A> e o </A>. Os
Voces falaram
navegadores costumam exibir este texto utilizando caracteres sublinhados e o
que deveria ser
cursor do mouse é modificado ao passar por cima dele.
minuscula, mas
eu acho que não.
No exemplo a seguir, a seleção do texto “Pagina do NCE” faz com que o
Continuo com a navegador abra a página “http://www.nce.ufrj.br”:
dúvida acima,
o outro tem a <A HREF="http://www.nce.ufrj.br">
mesma função do Pagina do NCE
</A>
"Próprio " no
próximo título,
e ai em 2.2 voces É importante lembrar que, apesar da HTML não diferenciar maiúsculas de
mandaram por minúsculas, o mesmo não é válido para as URLs. É necessário indicar
maiuscula! corretamente quais letras estão em minúsculas e quais estão em maiúsculas
Ele tambem não para que o arquivo possa ser encontrado.
é apenas uma
"ligação " entre O arquivo destino não precisa necessariamente ser um documento HTML,
as palavras..... pode ser um arquivo de qualquer tipo: imagens, música, arquivos comprimidos
etc. Caso o navegador não saiba como exibir este arquivo, ele permite ao
usuário receber o mesmo e salvá-lo em um diretório de sua escolha.
2.2. Referências a Pontos no Próprio Documento

Como foi dito anteriormente, em um arquivo HTML é possível fazer uma
referência a uma outra parte do mesmo arquivo. Neste caso, é necessário
indicar ao navegador o ponto exato que será referenciado. Isto é feito
colocando-se uma “âncora” no ponto desejado através da tag <A> ...
</A> com a definição do atributo NAME.
O código HTML do exemplo abaixo associa o nome “inicio” a um

determinado ponto do documento.
<A NAME="inicio"></A>
Uma âncora colocada no meio do texto não tem efeito algum no aspecto da
página que será visualizada.
O código HTML abaixo permite incluir uma referência no ponto do documento

marcado pela âncora acima:
<A HREF="#inicio">
Início da Página
</A>
5
As âncoras têm duas utilidades básicas:
• permitir a criação de índices no início da página, e
• permitir ao usuário voltar imediatamente ao início da página.
Através da seleção do tópico de interesse no índice, o usuário é diretamente

remetido a este tópico, sem precisar avançar página a página à procura do item
desejado.
Na URL é possível fazer referência a uma âncora de uma página. No exemplo

abaixo, o link encontrará a âncora "bibliografia" na página em
referência:
<A HREF=
"http://www.ic.uff.br/~aconci/II.htm#bibliografia">
Bibliografia
</A>
3. Enviando Mensagens de Correio Eletrônico

Além de criar links para a exibição de arquivos, a tag <A>...</A> permite que
Correio eletrônico o usuário execute outros serviços da Web como: telnet, ftp, mail e news.
ou e-mail é o serviço
que permite a
No exemplo a seguir, quando o link for acionado, o navegador abrirá o
qualquer usuário da
Internet enviar e programa de correio eletrônico, permitindo que o usuário envie uma
receber mensagens. mensagem para o endereço especificado (no caso: maria@ig.com.br).
O endereço <A HREF="mailto:maria@ig.com.br">
eletrônico de um Mande um mail!</A>
usuário contém todas
as informações
necessárias para que
a mensagem chegue Exercícios:
ao seu destino. Ele é
composto de uma 1. Substitua no exemplo atividade utilizado na aula passada, os textos
parte que identifica o Primeiro, Segundo, Terceiro e Quarto no início dos parágrafos
destinatário
(username) e uma por uma lista numerada.
parte relacionada à
sua localização, no 2. Faça com que cada uma das frases do parágrafo que antes iniciava com a
formato: palavra Terceiro transforme-se em um item de uma lista não numerada
username@subdomí
iniciada por ■ (quadrado).
nios. domínio Depois mostre como você faria para cada item corresponder a um símbolo
diferente (● ◦ ■)?
Por exemplo:
3. Examine as linhas que seguem:
biba@ic.uff.br
<HTML>
<HEAD>
<TITLE> Construção de Páginas Web </TITLE>
</HEAD>
6
<BODY>
<CENTER>
<P><A NAME="inicio"></A>
<B>Construção de Páginas de Web</B>
Lembrete: as
</P>
tags tanto </CENTER>
podem ser <P>O que já aprendemos:</P>
escritas em <P>Aula 1: Introdução</P>
maiúsculas <ul>
como em <li>Conceitos básicos: URL, Navegadores e
minúsculas,
mas nos links Servidores</li>
esta diferença <li>Estrutura de um documento HTML</li>
é importante <li>Comandos básicos de formatação.</li>
</ul>
<P>Aula 2. Listas e Links</P>
<ul>
<li>Listas numeradas, não numeradas e de
definições</li>
<li>Caminhos relativos e absolutos</li>
<li>Referências a outras páginas</li>
<li>Âncoras</li>
<li>Enviando mensagens</li>
<li>Referencias a outros documentos (<A HREF=
"http://www.ic.uff.br/~aconci/curso/imagem~1.htm">
imagens</A>, som, vídeo)</li>
</ul>
<HR WIDTH="100%">
<p><a href="mailto:aconci@ic.uff.br"> enviar
messagem</a></P>
<P><A HREF="#inicio">voltar inicio</A></P>
<p><A HREF="http://www.faperj.br">conhecer mais
sobre a FAPERJ</A></P>
</BODY>
</HTML>
Agora, faça com que cada item das aulas seja referenciado da seguinte forma:
procure na Internet sites relacionados a estes itens, e crie os links para a partir
deles visualizar os sites encontrados.
Resumo:
Nesta aula, você aprendeu a incluir listas e links em uma página e a

transformar um texto em um hipertexto. Mas ainda há muitos recursos para sua
página! Imagens estão esperando por você na próxima aula.
Auto-avaliação:
Você concluiu com facilidade os exercícios? Então podemos dizer que você
entendeu bem os detalhes desta aula e está pronto para nossa próxima aula.
Mas se algo não ficou bem fixado, a melhor coisa a fazer é rever esse ponto e
não acumular dúvidas!
7
..
1
Aula 3: Imagens
A WWW é sem sombra de dúvidas o lugar mais visitado da atualidade, onde os

internautas passam a maior parte do tempo e onde proliferam as cenas mais
quentes!
Nesta aula você verá como se inclui imagens em um documento HTML. Com
essa possibilidade você tornará suas páginas muito mais cheias de vida!
Objetivos:
- Aprender a incluir imagens nas páginas.
- Definir como as imagens aparecerão na página.
- Escolher o tipo de arquivo de imagens a ser usado.
- Fazer partes de imagens serem links.
Os arquivos de
imagem possíveis de
serem incluídos em Pré-requisitos:
HTML são dos tipos Para essa nossa terceira aula, você deve ter entendido os conceitos de HTML
GIF ou JPEG. Você das aulas anteriores. Em caso de dúvidas, volte e releia a aula 1 e pelo menos a
pode ler mais sobre segunda parte da aula 2: links .
esses formatos em:
http://
ic.uff.br/
~aconci/
curso/ 1. Imagens
jpggif.htm
(tudo em Vamos mostrar-lhe, agora, como trabalhar com imagens em documentos
minúsculas, com o HTML. Neste sentido vamos estudar uma das tags mais importantes: <IMG>.
"til" ao lado do "ä"
mesmo e sem
espaços). Na tag <IMG> o atributo SRC deve sempre estar presente para indicar, através
de sua URL, que arquivo contém a imagem. Exemplificando, as linhas:
<p>Aula 3. Imagem, cores

<IMG SRC=nota.gif>
e movimento.
</p>
Embora não seja fazem com que a imagem nota.gif seja exibida na página, junto com o
muito conveniente,
nada impede que a texto, após a palavra “Imagem, cores” e antes de “e movimento”.
imagem esteja em
outra máquina! Isto
é, a URL indicada
pode ser um Os navegadores usam algum símbolo padrão no caso de não poderem
endereço qualquer
na Internet! "localizar" a imagem. O Netscape, por exemplo, mostraria:
no caso de não localizar o arquivo de imagens especificado no atributo SRC.
1
..
2
1.1. Atributos de <IMG>

Os atributos possíveis da tag <IMG> e alguns dos seus valores possíveis estão
resumidos na tabela abaixo:
Os valores de
alinhamento da
imagem em relação Tabela 3.1 - Atributos da tag <IMG> e seus valores
ao texto Atributos Descrição ou valores possíveis:
apresentados na
tabela 3.1, irão
ALT texto alternativo mostrado no lugar da imagem
aparecer também em ALIGN (vertical) TOP, MIDDLE, BOTTOM,
outras tags. Os (horizontal) LEFT, CENTER, RIGHT
nomes TOP, BORDER largura da borda quando usada como link
MIDDLE e
BOTTOM se referem
WIDTH largura em pixels
ao alinhamento na HEIGHT altura em pixels
direção vertical, VSPACE espaço vertical ao redor da imagem em pixels
enquanto que LEFT HSPACE espaço horizontal (pixels) ao redor da imagem
e RIGHT indicam SRC URL do arquivo de imagem que será visualizado
alinhamentos na
direção horizontal.
O atributo ALT serve para associar uma descrição à imagem. Essa descrição é
mostrada pelo navegador em duas ocasiões: quando o usuário deixa o cursor do
Denomina-se pixels
a cada um dos
mouse sobre a imagem ou enquanto a página está sendo carregada (mas a
pontos do vídeo que imagem ainda não começou a aparecer). Neste segundo caso, o usuário pode
podem ser acessos, decidir se deseja ou não carregar a imagem. Além disso, caso ela não tenha
ou a cada um dos sido carregada, por algum motivo, o usuário tem como saber que naquele ponto
pontos de uma da página havia uma imagem e o que ela retratava.
imagem que podem
ter sua cor
determinada. O atributo ALIGN define o alinhamento do texto próximo à imagem. Este
alinhamento pode ter o sentido de como a imagem se encontrará
horizontalmente na página HTML, ou pode ter o sentido de como uma linha do
texto próximo à imagem ficará posicionada verticalmente em relação à
imagem.
A imagem pode ficar à esquerda ou à direita da página, considerando a direção

horizontal. Isso será definindo fornecendo ao atributo ALIGN os valores
LEFT ou RIGHT.
Se este atributo receber os valores LEFT ou RIGHT, a imagem é posicionada

num canto da janela (esquerdo ou direito respectivamente) e o texto seguinte à
tag é exibido ao lado da imagem. As várias linhas do texto vão sendo
posicionadas pela lateral da imagem, envolvendo-a como na figura 3.1, até que
a lateral esteja toda tomada. A figura 3.1 ilustra o caso de ser usado o valor
LEFT. Se for necessário interromper o fluxo do texto, pode-se usar a tag <BR>
(*) Alguns com o atributo CLEAR=ALL.
Navegadores
aceitam também as
formas: No caso do alinhamento definido como TOP, BOTTOM, CENTER ou
BASELINE, MIDDLE o texto que completar a linha é alinhado respectivamente pelo topo,
ABSMIDDLE,
ABSBOTTOM e
base e meio da imagem, mas apenas uma linha é colocada ao lado da imagem
TEXTTOP (*). As linhas seguintes do texto são posicionadas abaixo da imagem. O efeito
do valor center e middle é idêntico e produz o resultado mostrado na
figura 3.2, que segue.
2
..
3
Figura 3.1 - Efeito causado por ALIGH=LEFT
Imagens para Web

A rede está cheia de
figuras que podem
ser aproveitadas na
confecção de uma
página. Antes porém
de utilizar uma
imagem retirada da
Web, convém
verificar se quem a
publicou permite a
sua livre utilização
ou não. Figura 3.2 - Efeito causado por ALIGH=CENTER
Há dezenas de site
que oferecem
imagens de domínio
público, por
exemplo:
http://www.sct.gu.
edu.au/~anthony/
icons/index.html
http://www.
iconbazaar.com
Pode ser interessante permitir ao usuário selecionar um link através de uma
http://www.gifworks
.com
imagem. Para que isso seja possível, basta colocar a tag <IMG> dentro da tag
<A> ... </A>, como é mostrado no exemplo a seguir:
http://www.
aaaclipart.com
<A HREF=“link.htm”><IMG SRC=nota.gif></A>
http://daniweb.com/ Neste caso, uma borda (como a das duas figuras anteriores) aparece em torno
graphics da imagem. A borda da imagem indica que ela é um link, assim como o
sublinhado indica um link textual (como comentado na aula 2). Este efeito é
http://www.clipart.
com
muitas vezes indesejável e aí o atributo BORDER da tag <IMG>, entra em ação!
Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente
(tudo em minúsculas
e sem espaços).
BORDER. Mas o atributo também pode ser usado para definir bordas com
quaisquer número de pixels. O valor default da borda é 1 e ela muda de cor
para assumir a cor do link.
Os atributos WIDTH e HEIGHT indicam a largura e a altura da imagem para o

navegador. A presença destes atributos permite ao navegador posicionar os
demais elementos da página mesmo antes de carregar a imagem. Se os valores
não corresponderem aos valores reais da imagem, esta é redimensionada para
se adaptar ao espaço definido para ela pelos valores dos atributos.
Os atributos HSPACE e VSPACE servem para definir (em pixels) o

espaçamento horizontal e vertical do texto em relação à imagem, evitando que
o ele fique muito próximo à sua borda. Cada um desses atributos adiciona
espaço nas duas faces da imagem (acima e abaixo ou à direita e à esquerda).
Não há como definir espaços só à direita ou só acima da imagem.
3
..
4
As imagens
entrelaçadas são
carregadas em 2. Quando usar imagens GIF ou JPEG
quatro passos de
preenchimento GIF é abreviação de “Graphics Interchange Format” e foi desenvolvido pela
sucessivo pelo CompuServe. Neste formato, as imagens são comprimidas através da
navegador. A
codificação LZW (Lempel-Ziv and Welsh que é um processo de compressão
primeira passada
preenche a primeira sem perdas) e armazenadas em arquivos de extensão .gif , permitindo que tenha
linha e as linhas um carregamento progressivo ao ser visualizada.
múltiplas de 8 (se
imaginarmos que a O formato GIF usa tabela de até 256 cores e pode apresentar imagens
primeira linha da
entrelaçadas, permitindo que tenha um carregamento progressivo ao ser
imagem tenha
número 0, a segunda visualizada. Existem duas versões do formato: GIF87 e GIF89a. Nesta última
1, a terceira 3 e versão é possível gravar imagens onde uma cor é definida como transparente.
assim por diante,
seriam primeiro Há vários programas freewares (obtidos de graça na internet) que permitem a
preenchidas as linhas
criação de imagens no formato GIFs transparentes e com animação. Tente
0, 8, 16, 24, 32 ...).
A segunda passada achá-los em um site de buscas e você terá ótimas surpresas!!!!
preenche linhas de 8
em 8 a começar pela JPEG é um padrão internacional, proposto pelo comitê ISO “Joint
quinta (linhas de Photographers Expert Group”. As imagens são codificadas por transformações
número 4,12, 20,
matemáticas, o que permite a remoção de um certo nível de informações
28...). A terceira
passada desenha as gráficas sem grande perda de qualidade. Este formato permite vários níveis de
linhas de 4 em 4 a compressão, possibilitando escolher a melhor relação entre o tamanho do
começar da terceira arquivo e a qualidade da imagem.
(linhas de número 2,
6, 10, 14, 18, 22...).
Arquivos de imagens que seguem o padrão JPEG têm extensão .jpeg ou .jpg.
A última passada
escreve as linhas Este formato não usa tabela de cores, sendo o ideal para imagens fotográficas
restantes (de 2 em 2 nas quais a utilização de um byte por cor (técnica chamada de "true-color")
começando da pode ser importante para a qualidade da imagem. Mas, por ser um formato com
segunda: 1, 3, 5, 7, perdas, pode não dar bons resultados em imagens compostas por desenhos
9...). Mas após o
geométricos, textos ou linhas.
primeiro passo já é
possível ter uma
idéia de toda a figura A decisão a respeito de qual formato utilizar depende basicamente do tipo da
(embora de 8 em 8 imagem e da qualidade desejada. De maneira geral, JPEG é mais adequado a
linhas). Muitas vezes imagens de cenas reais digitalizadas ou imagens com grandes variações de
esta primeira
tonalidade, onde a grande variação de cor é mais importante que a perda de
visualização já
permite ao usuário algum detalhe na imagem.
decidir se deseja
continuar a carregar O formato GIF é melhor para imagens que não podem ter perdas de detalhes,
a figura ou não, para desenhos e gráficos com áreas de cores constantes. Para este tipo de
poupando tempo de
imagem, o GIF realiza uma compressão muito maior e de qualidade melhor do
transmissão. Os
passos seguintes vão que o JPEG, já que este sempre apresenta alguma perda de qualidade.
acrescentando linhas
progressivamente na
imagem até ela estar 3. Mapas Clicáveis
completamente
definida. Até agora você viu como é possível ativar um link através da seleção de uma
imagem. Em muitas situações, porém, pode ser interessante associar vários
links a uma única imagem. Desta forma, dependendo da região da imagem que
for selecionada, o navegador exibirá um documento diferente.
4
..
5
Imagens que se Essas figuras são chamada de mapas clicáveis na linguagem HTML. Em geral,
misturam com o é possível definir 3 tipos de região sensíveis nos mapas:
fundo da página, que
dão a impressão de • circulares,
não terem a forma • retangulares e
retangular dos • poligonais.
arquivos de imagens
comuns são
conseguidas graças a Pode-se também implementar os mapas clicáveis de 2 maneiras, que são
este efeito de denominadas:
transparência, que
é possível através da • mapas processados no servidor ou Server Side Maps e
utilização do • mapas processados no cliente ou Client Side Maps .
formato GIF89a.
A escolha entre uma ou outra forma de implementação dos mapas só pode ser
Você já deve ter
feita após entendermos suas características principais. Vejamos então cada uma
reparado que
algumas páginas na delas.
WWW possuem
imagens que não são
só figuras 3.1. Mapas processados no servidor ou Server Side Maps
decorativas e
funcionam como A primeira forma de implementar mapas clicáveis funciona distribuindo, entre
uma plataforma para o cliente e o servidor, a tarefa de interpretar qual documento deve ser carregado
ligação a diversos
links de hypertexto. ao se "clicar" em um ponto da imagem.
São as imagens
sensíveis ou os Neste caso, o cliente deve, primeiro, determinar o ponto exato que foi
mapas clicáveis. O selecionado na figura e enviar a coordenada deste ponto para um programa
exemplo típico de instalado no servidor. Este programa, por sua vez, determina qual URL está
utilização de um
mapa clicável é associada àquele ponto e a envia para o cliente, que finalmente carrega a
quando temos uma página.
barra de navegação.
Outro exemplo seria No servidor há um arquivo associado a cada mapa clicável, onde estão
a figura de um mapa definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o
de um país onde a
seleção de um estado ponto esteja dentro desta região.
específico leva a
uma página Esta forma de selecionar as regiões de uma imagem está caindo em desuso,
descrevendo este pois apresenta várias desvantagens. A primeira delas é que o formato deste
estado. arquivo de definição das áreas é dependente do tipo de servidor. Ao mudar uma
Com certeza você página de um servidor para outro é necessário converter os arquivos. Outra
deve estar achando desvantagem é que costuma ser necessário pedir a intervenção do
que isso é muito administrador do servidor para atualizar o arquivo. Além disso, a cada seleção
complexo, mas está é necessário uma consulta ao servidor para determinar o documento que foi
enganado! E como selecionado (o que implica um maior tempo de resposta). Por fim, o usuário
não queremos que
você saia por aí sem não tem nenhuma indicação, no mesmo documento, de qual URL ele está
saber direito o que selecionando, pois esta informação está no servidor.
está fazendo, que tal
primeiro entender
um pouco melhor 3.2. Mapas processados no cliente ou Client Side Maps
como isso funciona?
Neste tipo de mapa clicável, a definição das regiões de uma figura é feita no
próprio arquivo HTML. É preciso que o navegador seja capaz tanto de
determinar qual ponto da figura foi selecionado quanto descobrir em qual área
está contido este ponto.
5
..
6
O Netscape, a
partir da versão
2.0, e o Explorer,
a partir da versão
3.0, já
implementam
essa possibilitade
de interpretação
no navegador.
Perceber,
claramente, a
diferença entre os
dois métodos é
muito importante. O
server side é uma
combinação de CGI
(Common Gateway
Interface), HTML e
um arquivo que
informa as regiões
sensíveis que
residem no servidor.
Por outro lado,
quando você usa um
client side, todas as
informações estão
dentro do próprio
código HTML da
sua página! Isso gera
menos tráfego na
rede e aumenta a
eficiência do
navegador!
6
..
7
Veja a seguir um "0,50,100,50,50,100,0,50"
exemplo que HREF="HTTP://ALTAVISTA.COM" >
ilustra a criação
de um mapa <AREA SHAPE=RECT COORDS="0,0,100,100"
clicável. A HREF="HTTP://WWW.UFF.BR" >
página criada
pelo exemplo é a </MAP>
mostrada na
figura 3.3 que <IMG SRC="NOTA.GIF" WIDTH="100" HEIGHT="100"
segue. BORDER="1" ALT="BANDEIRA COM NOTA MUSICAL"
USEMAP="#MAPA">
<HTML> </CENTER>
<HEAD> </BODY>
 necessárias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>.
<TITLE>CLIQ Figura 3.3 - Página gerado pelo código html

UE NA
IMAGEM</TIT
LE>
</HEAD>
<BODY
BGCOLOR="WH
ITE">
<CENTER>
<p>Clique
na
imagem!</p>
<MAP
NAME="MAPA"
>
<AREA
SHAPE=C
IRCLE
COORDS=
"50,50,
25"
HREF="H
TTP://W
WW.CNPQ
.BR" >
<AREA
SHAPE=P
OLYGON
COORDS=
7
..
8
A tag <MAP> ... </MAP> tem apenas o atributo NAME que serve para
À medida que sua definir um nome que será utilizado para associar às regiões a um determinado
imagem tiver áreas
poligonais
arquivo de imagem (incluído através do atributo usemap da tag <IMG>).
complexas, pode ser
mais difícil Mas a tag <MAP> ... </MAP>, como pode ser visto no exemplo anterior,
encontrar as contem uma série de tags que farão a definição de cada uma das áreas sensíveis
coordenadas das da página.
áreas. Existem
diversos programas
disponíveis na Assim, uma ou mais tags <AREA> são colocadas dentro de <MAP> ...
Internet que podem </MAP> para definir cada uma das áreas clicáveis da figura. Há três tipos de
criar estes mapas áreas:
para você. (Use um
site de buscas para • circulares,
localizá-los!) • retangulares e
• poligonais.
Um destes
programas muito
simples é o O valor do atributo SHAPE especifica a forma da área e pode receber os
Mapedit: seguintes valores: CIRCLE, RECT (valor default) e POLYGON (ou
http://www.boutell. POLY).
com/mapedit/
#download
O atributo COORDS fornece um conjunto de coordenadas para definir a área. O
Uma interface significado e o número de coordenadas variam de acordo com a forma
melhor é encontrada escolhida:
no MapThis!:
http://galadriel.
exaetc.ohio- CIRCLE – requer três valores x, y e r, onde (x, y) é o centro do círculo e r o
state/tc/mt/ftp/ raio. No exemplo acima, é definida uma área circular de 25 pontos de raio,
mapthis posicionada no centro da (coordenada 50, 50) da figura.
RECT – requer quatro valores x1, y1, x2, y2, onde (x1, y1) é o vértice
superior esquerdo do retângulo e (x2, y2) é o vértice inferior direito. No
exemplo anterior, é definido um retângulo envolvendo toda a figura.
POLYGON – requer um número par de valores x1, y1, ... xn, yn, onde cada par
(xn, yn) corresponde a um dos vértices do polígono. No exemplo, é definido
um losango com os vértices (50,0), (100, 50), (50, 100) e (0,50).
Nas tags <AREA> o atributo HREF serve para indicar a URL que deve ser
carregada após a seleção da região. É possível também utilizar o atributo ALT
para exibir um texto explicativo quando o cursor do mouse passar sobre a área.
O atributo NOREF na tag AREA pode ser usado para indicar que determinada
área não chama arquivo algum.
Nada impede que haja sobreposição de áreas. Quando a coordenada

selecionada se encontra na interseção de duas áreas, a região selecionada será
aquela que foi definida primeiro.
Após a definição do mapa, é necessário associar uma figura a ele. A tag

<IMG> usa para isso o atributo USEMAP que deve receber como valor o nome
do mapa associado.
8
..
9
GIFS animadas são 4. Animações

pequenas seqüências
de animação Há várias formas de criar animações em páginas de Web. Usar GIFs animadas,
compostas por várias Applets JAVA, HTML dinâmico e Javascript são algumas delas!
imagens do tipo GIF
agrupadas em um
arquivo. A criação de uma GIF animada é muito simples. Basta criar cada uma das
imagens que vão compor a seqüência, com pequenas variações no desenho para
cada instante de tempo (como num desenho animado). Estes arquivos de
Há diversos imagens são posteriormente agrupados por meio de um programa.
programas que
auxiliam a criação
de GIFs animadas Para animações mais complexas e de figuras maiores pode-se optar por usar
disponíveis na rede, applets Javascript. Mesmo que não se saiba como criá-los é possível utilizar
como por exemplo: applets prontos, que permitam reconfiguração. Um exemplo é disponibilizado
http://www. pela Sun no endereço:
mindworkshop.com/ http://java.sun.com/applets/Animator/index.html
alchemy/gifcon.html
http://www.
webutilities.com/ga/
ga_main.htm
Exercícios:
http://rtlsoft.com/ 1. Substitua, no exemplo de mapas clicáveis, o pequeno texto entre

animagic/index.html <P>...</P> por algo que ocupe diversas linhas. Depois experimente usar
todas as opções de alinhamento de imagens vistas na aula. Use em cada caso
http://www.
moviegear.com/ cores diferentes para o seu texto, borda da imagem e fundo da página.
2. Faça o seu próprio mapa clicável e o inclua no exercício anterior.
3. No exemplo anterior, inclua uma animação.

Um applet é um
pequeno programa
em Java voltado
para utilização na
Resumo:
Web.
Javascript é o Nesta aula você aprendeu tudo sobre imagens. Viu como incluir imagens e
assunto do segundo formatar sua borda, seu espaçamento, alinhamento, dimensões e texto
módulo deste curso. alternativo. Entendeu a utilização da imagem como link, quais formatos de
imagens podem ser usados e as diferenças entre os formatos. Imagens com
transparência e animações não são mais segredo para você. Conheceu as
formas de implementar mapas clicáveis e como tornar áreas de figuras
sensíveis ao click! Depois desta aula, suas páginas certamente serão muito mais
animadas!!!!
Auto-avaliação:
Com que facilidade você fez os exercícios acima? Não deixe de voltar a ler o
ponto em que sentiu mais dificuldade. Depois disso você estará pronto para
nossa próxima aula , na qual um mundo de cores, sons e movimento estará
esperando por você!
9
02
Aula 4: Cores e Multimídia
Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos

como definir a cor da página e dos textos. Aprenderemos a incluir recursos
multimídia de som e vídeo em um documento HTML. Prontos? Então: luzes,
cores, ação!!
Objetivos:
- Definir as cores a serem usadas na WWW.
- Aprender a incluir vídeos e som nas páginas.
- Determinar o tipo e a cor das fontes de texto.
- Incluir imagem e cor de fundo.
Pré-requisitos:
Para essa aula, você deve ter entendido os conceitos de HTML das duas aulas
anteriores. Em caso de dúvidas, volte e releia, pelo menos, a primeira parte da
aula 3!
Embora não seja

1. Definição de Cores
muito conveniente,
nada impede que a Vamos agora mostrar como trabalhar com cores. Há duas formas de definir
imagem esteja em cores em HTML:
outra máquina! Isto • através de seu nome ou
é, a URL indicada • através dos valores RGB da cor.
pode ser um
endereço qualquer
na Internet! Para definir uma cor através do nome é preciso saber o nome das cores em
inglês. Por exemplo: Aqua, Maroon, Purple, Fuchsia, Teal, Silver, Gray, Lime,
Olive e Gold correspondem às cores azul-piscina, castanho, púrpura (que é
Os valores RGB uma cor entre o vermelho e o violeta), fúcsia (vermelho-púrpura vivo ou rosa-
(forma simplificada
de escrever Red-
choque), azul-esverdeado escuro, prateado, cinza, lima (cor verde amarelada),
Green-Blue) de uma verde oliva e dourado. As cores intermediárias, como as cores combinadas,
cor são as também são denominadas em inglês. Por exemplo: cadet Blue, corn flower
quantidades das Blue, dark slate Blue, dark turquoise, light Blue, light steel Blue, medium
cores vermelha, aquamarine, medium Blue, medium slate Blue, medium turquoise, midnight
verde e azul que
formam esta cor.
Blue, neon Blue, new midnight Blue, plum, rich Blue, sky Blue, steel Blue,
summer sky, turquoise são as variações possíveis da cor azul. Use estes nomes
para definir o fundo de uma página, assim que aprender isso na seção 2, e verá
o que essas cores representam!
A definição pelo valores RGB é feita indicando a quantidade de vermelho

(Red), verde (Green) e azul (Blue) necessária para compor a cor. Cada uma
destas quantidades é indicada por um número entre 0 e 255.
Esta segunda forma permite que você defina qualquer cor, desde que seja
entendido o mecanismo usado para descrever cores a partir das 3 luzes
primárias do sistema RGB.
1
02
Os números mbora esta seja, basicamente, a mesma forma de descrever cores no vídeo de
hexadecimais usam seu computador, em HTML o formato utilizado é #RRGGBB, com 2 dígitos
uma base de 16
símbolos e não 10 para o R, 2 dígitos para o G e 2 dígitos para o B. Para que os valores possam
como os decimais. "caber" em dois dígitos eles são escritos em hexadecimal (base 16).
Os números de 0 a 9,
isto é, os primeiros A menor intensidade possível para cada cor R, G ou B é 00. A intensidade
10, são os mesmos máxima é FF (255). O efeito produzido por cada uma das cores (vermelha,
dos decimais.
verde e azul) é aditivo e influencia na cor resultante. A tabela abaixo mostra
Depois são usadas as algumas cores e seus valores RGB.
letras de A a F (em
maiúsculas ou
minúsculas) para Tabela 4.1- Definição de algumas cores usando o sistema RGB/HTML
compor os 16
símbolos diferentes Nome Definição R G B
da base. Veja a
tabela abaixo: Black #000000 0 0 0
Símbolo Valor White #FFFFFF 255 255 255
0 0 Red #FF0000 255 0 0*
1 1
2 2 Green #00FF00 0 255 0
3 3 Blue #0000FF 0 0 255
4 4 Yellow #FFFF00 255 255 0
5 5 Magenta #FF00FF 255 0 255
6 6 Cyan #00FFFF 0 255 255
7 7
8 8
Gray #C0C0C0 192 192 192
9 9 Coral #FF7F00 255 127 0
A ou a 10 Gold #CD7F32 205 127 50
B ou b 11 Silver #E6E8FA 230 232 235
C ou c 12 Aqua #70DB93 112 206 147
D ou d 13
E ou e 14
Lime #32CD32 50 205 32
F ou f 15 Medium Blue #3232CD 50 50 205
Slate Blue #007FFF 0 127 255
Esses números
hexadecimais são
posicionais como os
decimais. Isso quer
dizer que cada vez 2. Cor ou Imagem de Fundo da Página
que se deslocar um
dígito, uma posição A tag <BODY> ... </BODY> tem uma série de atributos que permitem definir
para à esquerda, seu características gerais do documento HTML. Pode-se, nestes atributos, definir:
valor passa a ser
multiplicado pelo • a imagem de fundo da página (atributo BACKGROUND),
valor da base, que • a cor de fundo da página (atributo BGCOLOR),
neste caso é 16. (A • a cor do texto (atributo TEXT),
menos que seja um
"zero à esquerda",
• a cor de links ainda não visitados (atributo LINK),
como naquele • cor de links enquanto selecionados ou ativos (atributo ALINK) e
trocadilho!! Mas • cor de links já visitados (atributo VLINK).
mesmo assim, a
regra é a mesma,
A tabela 4.2 resume estes atributos.
pois "zero"
multiplicado por
qualquer número é
zero!
2
02
Exemplificando, o Tabela 4.2 - Atributos da tag <body> relacionados à definição de cor

hexadecimal A0 tem
valor de A
Atributos Descrição
multiplicado por 16
(isso é 10x16 + 0 =
BACKGROUND Imagem de fundo
160). C0 vale 12x16 BGCOLOR Cor de fundo
=192. AB tem valor TEXT Cor do texto
de A0 + B, isto é: LINK Link ainda não visitado
160 + 11 = 171. 7F ALINK Link sendo visitado (ativo)
será = 7x16 +15 =
127. VLINK Link já visitado
Exatamente como se
O atributo BACKGROUND define uma imagem que será utilizada como
faz na base decimal
!!! O número 21 em "ladrilho" de fundo da página. Como na figura 4.1.
decimal não seria
2x10+1 !!!! Figura 4.1 - Página "ladrilhada com uma imagem de fundo
Ao definir uma cor

ou imagem para o
fundo da página,
você deve levar em
consideração a cor
do que será colocado
por cima. Por isso,
atenção com o
contraste que você
poderá obter na Ao definir uma imagem para fundo de página, deve-se ter o cuidado de evitar
página com a que a junção dos ladrilhos fique nítida. A menos que você realmente queira
combinação de cores isso! Imagens em que os quatro lados são de uma única cor (sem variações de
escolhida! tonalidade) e que os desenhos iniciam e terminam no mesmo ponto, não
apresentam o problema de bordas nítidas. Isso não ocorreu na imagem da
página anterior, onde a descontinuidade dos motivos de cada ladrilho
salientaram a junção deles e não forneceram a idéia de um fundo contínuo à
página.
Se o atributo BACKGROUND estiver definindo a cor de fundo (BGCOLOR), esta

só é visível até que a imagem de fundo seja carregada (o que às vezes pode
demorar um pouco), ou se não houver imagem de fundo.
No exemplo abaixo, você pode observar a definição de nota.gif como

imagem de fundo e da cor azul-marinho ("navy" em inglês) para o texto da
página:
<BODY BACKGROUND=nota.gif TEXT=NAVY>
3
02
A tag <BODY> tem ainda alguns atributos adicionais, que permitem controlar o
tamanho das margens do documento (em pontos do vídeo ou pixels). Mas não
existe compatibilidade entre os dois principais navegadores (Netscape e
Explorer) quanto a estes atributos. A tabela 4.3 mostra estes atributos.
Tabela 4.3 - Atributos adicionais da tag <body> nos dois principais

navegadores
Para que uma Netscape Explorer Descrição
determinada fonte marginHeight topMargin Margem superior
seja vista, é marginWidth leftMargin
necessário que ela
Margem esquerda
esteja instalada no
computador do No exemplo a seguir, mostramos como eliminar a distância entre o conteúdo da
usuário que está página e as bordas da janela, tanto para o Netscape quanto para o Explorer:
vendo a página.
<BODY topMargin=0 leftMargin=0
Quando no
computador do marginHeight=0 marginWidth=0>
usuário não existe
nenhum dos tipos
definidos de fonte,
ela é, geralmente, 3. Definindo a Fonte e a Cor dos Caracteres
substituída por
alguma outra, de No que tange à fonte dos textos e suas cores, existem duas tags com as quais
modo que a página
possa ser lida!
você pode trabalhar: <FONT> e <BASEFONT>.
A tag <FONT> ... </FONT> permite, através de seus atributos, modificar

o tamanho, cor e tipo de fonte dos caracteres de partes do documento contidos
dentro da tag. Os atributos desta tag podem ser vistos na tabela 4.4.
Tabela 4.4 - Atributos adicionais da tag <FONT>

SIZE Tamanho da fonte
FACE Tipo de fonte e alternativas
COLOR Cor da fonte
O atributo SIZE permite definir o tamanho da fonte de caracteres. Este pode

assumir valores de 1 a 7, sendo que o tamanho default é 3. Ao se atribuir ao
SIZE um valor precedido de + ou -, este valor tem um significado (de
aumentar ou diminuir a fonte) relativo ao tamanho atual.
Por exemplo: se essa tag tem como atributo em determinado ponto da página o
tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passará a
ser 2. Obviamente respeitando os limites possíveis que são os números de 1
a 7.
O atributo FACE serve para definir o tipo de fonte a ser utilizado. Várias
alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte
não estar disponível. Cada um dos tipos de fonte é separado do outro por
vírgulas. Como no exemplo abaixo:
<font face="New York, Times New Roman, Times"
size="5">
4
02
O atributo COLOR permite definir a cor na qual será escrito o texto. No

exemplo abaixo, o texto “tudo verde” vai ser escrito em tamanho 6, na cor
verde e com a fonte "Bazzoka":
<BASEFONT SIZE=5>
<FONT SIZE=+1 FACE=Bazzoka COLOR=green>
tudo verde e maior
</FONT>
A tag <BASEFONT>, exemplificada acima, modifica a formatação padrão de

todo o texto da página, a partir do ponto onde aparece. Ela tem o atributo size,
que trabalha de forma idêntica ao da tag <font>.
4. Multimídia
Um pluggin é um Os navegadores também podem ser utilizados para reproduzir arquivos de

módulo auxiliar áudio e vídeo. Como há uma infinidade de formatos para estes tipos de dados, a
incorporado ao reprodução destes arquivos é realizada através de módulos incorporados ao
navegador. navegador (pluggin) ou a programas externos.
Alguns navegadores costumam, durante a sua própria instalação, instalar junto

os pluggins para os tipos de arquivos mais comuns. Para outros pluggins é
Mais informações necessário que o próprio usuário faça a instalação.
sobre formatos de
Imagens, Som, e Quando o navegador não tem determinado pluggin, ele simplesmente ignora o
Movies podem ser arquivo requisitado. Nas tabelas 4.5 e 4.6 a seguir, alguns formatos comuns são
encontradas nos relacionados.
endereços:
www.ic.uff.br/ Tabela 4.5 - Formatos de áudio

~aconci/CV.htm Tipo Descrição
www.wotsit.org Wav Formato padrão Windows
Au Formato padrão Unix
www.dcs.ed.ac.uk/ Mp3 Formato compactado
home/mxr/gfx/ Mid Música produzida por sintetizador
index-hi.html
ra Real Audio (execução por demanda)
www.cica.indiana.
edu/graphics/ Tabela 4.6 - Formatos de vídeo
image_specs Tipo Descrição
Avi Formato padrão Microsoft
Mov Formato padrão Apple
Mpeg Formato compactado (equivalente ao JPEG)
4.1. Inserindo Áudio e Vídeo

Uma das formas de fazer com que um arquivo de áudio ou vídeo seja
executado é incluí-lo no documento sob a forma de um link. Assim, ele só será
executado se o usuário selecionar o link.
5
02
No exemplo abaixo, a seleção do texto “link p/ música” faz com que

O Nescape e o o navegador carregue e execute o arquivo "greeting.wav" do diretório
Internet Explorer
reconhecem a tag som:
<EMBED> que serve <A HREF="/som/greeting.wav">link p/ música</A>
para exibir
informação Algumas vezes é interessante executar o áudio ou o vídeo independentemente
produzida por um da intervenção do usuário. Um exemplo deste tipo de procedimento é a
módulo incorporado inclusão de uma música de fundo numa página. Neste caso, não há uma
ao navegador padronização muito rigorosa entre os navegadores.
(pluggin). Para cada
um deles, porém, é
necessário definir
determinados 4.2. A Tag <EMBED> no Netscape
atributos para que
seja produzido um O uso da tag <EMBED> apenas com o atributo SRC definido faz com que o
resultado Netscape inclua na página o painel de controle do pluggin. O som ou a imagem
satisfatório. não são exibidos imediatamente, mas o usuário pode, através do painel de
controle, exibi-los quantas vezes desejar.
Em qualquer caso, é
fundamental definir Normalmente, o Netscape não sabe que espaço reservar na página para o painel
o atributo SRC com de controle e por isso é necessário definir também os atributos WIDTH e
a URL do arquivo HEIGHT, que informam a largura e a altura a ser ocupada.
que vai ser exibido
(arquivo de som ou
de vídeo). Para os A inclusão do atributo HIDDEN="True" faz com que, no caso de um arquivo
demais atributos é de som, o painel de controle não seja exibido e o som seja tocado
necessário analisar imediatamente após o carregamento da página. No caso de um vídeo este
caso por caso. atributo define a largura e a altura da janela de exibição como zero, o que faz
com que o navegador não possa mostrar nada (normalmente isso causa um erro
Obviamente, estas no pluggin).
formatações
multimídias não Para fazer com que o vídeo comece a ser "visto" após o carregamento da
terão efeito algum se página é necessário definir o atributo AUTOSTART="True". Quando este
o browser não
estiver configurado atributo está definido, o Netscape não exibe o painel de controle do pluggin,
para tocar música ou apenas o próprio vídeo.
se o computador que
receber a página, não A tag <EMBED> também conta com o atributo ALIGN que pode receber os
tiver uma placa de
som. mesmos valores e se comporta como na tag <IMG>.
O atributo LOOP recebe um valor que indica o número de vezes que o som
deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10
vezes). Este atributo não tem nenhum efeito em arquivos de vídeo.
As linhas que seguem mostram a utilização desta tag para reproduzir vídeo e
som.
AVI é sigla de <EMBED SRC="x.avi" AUTOSTART="True" width=200
Audio Video height=200>
Interleave.
<EMBED SRC="/som/greeting.wav" HIDDEN="True" LOOP=2>
6
02
4.3. A Tag <EMBED> no Explorer
Quando se define a tag <EMBED> apenas com o atributo SRC, o Explorer

também exibe o painel de controle do pluggin. Diferentemente do Netscape
não é necessário definir a largura e a altura, pois este navegador consegue
determinar o espaço ocupado pela janela do pluggin. O atributo ALIGN tem no
Explorer o mesmo efeito que no Netscape.
O atributo HIDDEN também tem o efeito de fazer desaparecer o painel de

controle do pluggin, mas não faz com que ele seja executado automaticamente.
Para que isso aconteça é necessário definir o atributo AUTOSTART="True"
mesmo para arquivos de som.
O atributo LOOP tem efeito tanto sobre arquivos de som como de imagem e
basta definir um valor diferente de zero para que o arquivo seja reproduzido
infinitamente.
O exemplo a seguir permite exibir arquivos de som e imagem em ambos os

tipos de navegador (quase que com o mesmo efeito):
<EMBED SRC="x.avi" AUTOSTART=”True” width=200
height=200>
<EMBED SRC="="/som/greeting.wav" AUTOSTART=”True”
HIDDEN=”True” LOOP=100>
No Explorer é possível utilizar a tag <IMG> para exibir vídeos, definindo o

atributo DYNSRC para indicar o arquivo a ser carregado. É conveniente, neste
caso, definir o atributo SRC com uma imagem alternativa. O Explorer vai
ignorar o SRC e exibir o vídeo, já o Netscape fará o contrário.
Arquivos de som podem ser exibidos utilizando a tag <BGSOUND>. O exemplo

DYNSRC significa acima poderia ser escrito então como:
(dynamic source) <IMG DYNSRC="x.avi" SRC=”alt.jpg” loop=yes>
fonte dinâmica ! <BGSOUND SRC="/som/greeting.wav" loop=yes>
Exercícios:
1. Enfatize a separação entre cada "aula" no exercício 3 da aula 2, substituindo

a fonte única usada por diversos outros tipos de fontes.
2. Depois experimente usar todas as opções de definir cor (por nome em inglês
ou pelo código RGB), mostrando agora cada um dos pequenos textos entre
<P>...</P> do exercício anterior em cores diferentes.
3. No exercício anterior, inclua agora uma imagem e uma cor para o fundo
da página. Se o seu computador permitir, inclua também um som de fundo que
se repita enquanto a página estiver sendo vista.
4. Finalmente, para este exercício ficar o máximo, encontre na Internet

alguma pequena seqüência de vídeo e a inclua no mesmo exercício.
7
02
Resumo:
Nesta aula você aprendeu tudo sobre Cores e Multimídia. Viu como definir
cores pelo seu nome e conheceu o formato RGB para as cores descritas em
HTML. Estudou a utilização de cores em Tags: cor de fundo, cor de links, cor
de texto. Você ainda aprendeu como mudar as fontes de texto, incluir imagens
como fundo de página e reproduzir áudio e vídeo (movie) nos documentos.
Ufa!!!! Uma aula bem "moviementada", não?
Auto-avaliação:
Foram fáceis para você os exercícios acima? Se não, volte a ler o ponto de
dificuldade. Depois disso você estará pronto para nosso próximo passo. Na
aula que vem conheceremos tudo sobre tabelas em HTML.
8
Aula 5 Tabelas
Continuando a tratar de documentos na Web, nosso

principal assunto hoje são as tabelas, com as quais
você poderá incrementar a disposição dos elementos
em sua página de maneira mais criativa.
Você conhecerá também a tag META, que fornece
informações para sites de busca e guarda informações
de documentação.
E ainda duas outras tags que produzem interessantes
efeitos nos títulos, mas são dependentes do navegador:
<MARQUEE> e <BLINK>
Objetivos:
- Definir os elementos de uma tabela.
- Usar os atributos gerais de tabelas: borda, largura,
espaçamento.
- Fazer atribuições às células: alinhamento, dimensões,
uniões de linhas e colunas.
- Reconstruir imagens como tabelas.
- Aprender a fornecer informações para os sites de
busca.
-Utilizar as tags <MARQUEE> e <BLINK>
Pré-requisitos:
Você entendeu bem como definir cores e incluir
imagens? Se respondeu afirmativamente estas
perguntas está pronto para esta aula! Se não, tire suas
dúvidas e releia estes itens das aulas 3 e 4!
1.Tabelas
Todas as marcas referentes Nesta aula chegamos a umas das tags mais importantes
a tabelas (título, linhas, do HTML: a tag <TABLE> .... </TABLE>. Ela
células) somente serão permite a definição de tabelas no documento. Mais do
consideradas se incluídas que isso; através das tabelas é possível "forçar" o
entre as tags
<table>...</table> posicionamento dos elementos em uma página
(escrever textos em 2 colunas por exemplo).
A tag <TABLE> deve vir sempre acompanhada das

tags <TR>...</TR> e <TD>...</TD> (ou
<TH>...</TH>), que servem para definir,
respectivamente, as linhas e as células que compõem
cada coluna da tabela.
Nas células de uma tabela podemos inserir tudo o que
Existe ainda a tag normalmente faz parte de um documento HTML:
<CAPTION>....
</CAPTION> links, hipertexto, imagens e até outras tabelas. A não
que é opcional e define o inclusão de linhas e colunas faz com que alguns
título da tabela. Deve estar navegadores simplesmente ignorem a tag
entre as tags <TABLE>... <TABLE>...</TABLE>.
</TABLE> mas fora das
marcas de linhas e células.
A tag <TH>...</TH> é utilizada para definir células
Por default, o título é
definido acima da tabela e que funcionarão como de título da tabela (não é
centralizado. Mas pode-se obrigatório que uma tabela tenha título) e o texto
utilizar o atributo ALIGN escrito em seu interior é apresentado em negrito.
para outras posições. Por
exemplo, <CAPTION As linhas a seguir mostram como fazer, em HTML,
ALIGN=BOTTOM> indicará
um título abaixo da tabela.
uma tabela com duas linhas e três colunas.
<TABLE BORDER>
<TR>
<TD>Coluna 1 Linha 1</TD>
</TR>
<TR>
</TR>
</TABLE>
O trecho de HTML anterior produz na tela do

navegador, a tabela abaixo.
1.1 Atributos de <TABLE>
A maioria dos atributo na tag <table> tem os

mesmos significados e valores possíveis dos atributos
com mesmo nome usado na tag <img>.
Tabelas são apresentadas, por default, sem borda. A

borda da tabela só é visível se o atributo BORDER
estiver definido. Tabelas sem borda são muito úteis
para posicionar elementos dentro de uma página.
O atributo CELLSPACING define o espaço entre as
células da tabela. O seu valor default é 2 pixels.
O atributo CELLPADDING indica o espaço entre o

dado contido numa célula e a borda, o default é 1
pixel.
O atributo WIDTH define a largura da tabela na janela.

A largura pode ser definida em termos absolutos
(número de pixels) ou em termos de porcentagem da
janela ocupada pela tabela. Se este atributo não for
especificado, a largura é definida de modo a caber
O internet Explorer permite todo o conteúdo da tabela.
definir a cor da borda, pela
inclusão do atributo
BORDERCOLOR, na tag O atributo HEIGHT define a altura da tabela na janela
TABLE e a cor das sombras e tem as mesmas características de WIDTH.
mais claras e escuras das
bordas: através de dois
outros atributos:
É possível atribuir uma cor (atributo BGCOLOR) ou
BORDERCOLORLIGHT e uma imagem (atributo BACKGROUND) ao fundo de
BORDERCOLORDARK. uma tabela. O funcionamento destes atributos aqui na
tag <table> ... </table> é semelhante ao seu
funcionamento quando utilizados na tag <BODY>
... </BODY>.
Cores e imagens de fundo O atributo ALIGN define o alinhamento da tabela em

podem ser atribuídas a cada
célula, usando o atributo
relação à janela (pode receber os valores CENTER,
BGCOLOR ou o atributo RIGHT, LEFT).
BACKGROUND. Em alguns
casos poderá ser necessário
também modificar a cor das A tabela 4.1 abaixo resume os elementos básicos das
letras (usando <FONT
tabelas e seus atributos.
COLOR>) .
Tabela 4.1 - Elementos da tabela e seus atributos

Elemento Descrição Atributos
<TABLE> Tabela BORDER,
... CELLSPACING,
</TABLE>
CELLPADDING,
BACKGROUND, WIDTH,
HEIGHT, BGCOLOR,
ALIGN
<TR> ... Linha da
</TR> tabela VALIGN, ALIGN
<TH> ... Coluna VALIGN, ALIGN,
</TH> (título) ROWSPAN, COLSPAN,
<TD> ... Coluna da WIDTH, HEIGHT,
</TD> tabela
BGCOLOR,
BACKGROUND, NOWRAP
1.2 Atributos de <TR>
Os atributos VALIGN e ALIGN servem para definir o

alinhamento dos elementos dentro das células de uma
determinada linha da tabela.
O atributo VALIGN (alinhamento vertical) pode

receber o valor TOP, MIDDLE ou BOTTOM (topo,
meio ou em baixo). O valor default de alinhamento
vertical é MIDDLE.
O atributo ALIGN (alinhamento horizontal) pode

receber o valor LEFT, CENTER ou RIGHT
(esquerdo, centro ou direito). O seu valor default é
LEFT.
1.3 Atributos de <TD> e <TH>
Estas tags também têm VALIGN e ALIGN como

atributos, com o mesmo significado de quando usados
para linha inteira, como na tag anterior <tr>. O
alinhamento neste caso, vale apenas para a célula na
qual o atributo está sendo definido (suplantando o
alinhamento da linha, se houver).
O atributo WIDTH permite que se indique o tamanho

horizontal de uma célula. A forma de fazer isto pode
ser pelo número de pixels ou por uma porcentagem da
largura da tabela. Caso várias células de uma mesma
coluna definam este atributo, prevalece o maior valor.
O mesmo acontece com o atributo HEIGHT.
O atributo NOWRAP exibe o texto do interior de uma

coluna como uma linha contínua, sem quebras. Esse
atributo faz o navegador entender que o texto, dentro
daquela célula, não pode ser dividido em mais de uma
linha. NOWRAP deve ser usado com cuidado para
evitar linhas demasiadamente longas.
Os atributos ROWSPAN e COLSPAN expandem as
linhas ou colunas de uma tabela. O atributo ROWSPAN
permite que se indique o número de linhas que uma
célula deve ocupar. O atributo COLSPAN, tem a
mesma função para as colunas, isto é permite que se
indique o número de colunas que uma célula deve
ocupar.
O exemplo a seguir ilustra a utilização destes atributos

em um trecho de HTML
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Col 1 Lin 1</TD>
<TD>Col 2 Lin 1</TD>
<TD>Col 3 Lin 1</TD>
</TR>
<TR>
<TD COLSPAN=2>Col 2 Lin 2</TD>
</TR>
</TABLE>
Este trecho HTML vai produzir como saída a seguinte

tabela, no navegador:
2. A tag <META>
A tag <META> é muito importante. Pode ser colocada

no interior da área de cabeçalho (área delimitada pela
tag <HEAD> ... </HEAD>). Ela tem múltiplos
usos, pode ser usada para:
a) fornecer informações para sites de busca,
b) guardar informações de documentação,
c) enviar informações especiais para o navegador e
d) fazer a troca automática do documento em exibição
pelo navegador.
Esta tag reconhece três atributos, cujos valores variam

conforme a função desempenhada por ela. Os atributos
são: HTTP-EQUIV, NAME e CONTENT.
2.1 Informações para Sites de Busca
Quando uma página é cadastrada num site de busca,
dois tipos de informação são armazenados: título da
página e sua descrição.
O título da página é definido pela tag <TITLE> e é a

primeira informação que retorna como resultado de
uma busca.
A descrição da página, normalmente é formada pelos

primeiros 200 caracteres que aparecem no documento
HTML após a tag <BODY>. É possível porém, indicar
explicitamente esta descrição independentemente da
informação exibida na página.
A descrição da página pode ser definida através da tag

<META> com o atributo NAME recebendo o valor
"description", e o atributo CONTENT recebendo
como valor a descrição da página.
A ordem em que uma página aparece, como resultado

de uma pesquisa, depende do seu conteúdo. As
páginas que contêm mais ocorrências das palavras
chaves fornecidas para a busca aparecem em primeiro
lugar.
É possível utilizar a tag <META> para fornecer mais

informação ao mecanismo de busca, definindo o
atributo NAME com o valor "keywords" e o atributo
CONTENT com uma série de palavras separadas por
vírgulas.
A informação obtida do resto da página é acrescentada

a informação obtida da tag <META> mas não a
substitui. O exemplo a seguir ilustra a utilização desta
tag:
<HEAD>
<TITLE>Minha Home Page</TITLE>
<META NAME=”description”
CONTENT=”Esta é a descrição da
minha página”>
<META NAME=”keywords”
CONTENT=”fotografia,
programação, poesia”>
</HEAD>
Os sites de buscas têm algumas limitações quanto a
No endereço tamanho da descrição e o número de palavras-chaves:
http://www.eons.com
/metatags.htm
você encontrará informa- Tamanho – Normalmente, as informações de descrição
ções acerca de como vários são limitadas em 200 caracteres e as chaves em 1000
sites de busca obtêm caracteres.
informações das páginas e
com que freqüência estas Abuso de chaves – O mecanismo de busca ignora toda
informações são atualizadas.
a lista de palavras-chaves quando uma delas é utilizada
mais de 7 vezes numa tag <META>.
Nas páginas com imagens, o atributo ALT da tag

<IMG> também é levado em conta pelos mecanismos
de busca. Assim, as páginas cujo conteúdo principal é
um gráfico também podem ser encontradas.
2.2 Informações para Documentação

O exemplo a seguir mostra o cabeçalho de uma página
criada no FrontPage. Repare que esse editor inseriu
uma série de informações, utilizando as duas primeiras
tags <META> apenas com o intuito de documentar a
página (isso é incluir o nome do autor da página e
programa utilizado para sua geração). A terceira tag
<META> é interpretada pelo próprio FrontPage e
apenas para ele faz sentido. Esta tag indica qual estilo
pré-definido foi utilizado na página.
<head>
<title>
Home Page da Ana Lúcia
</title>
<meta NAME="Author" CONTENT="João">

<meta NAME="GENERATOR"
CONTENT="Microsoft FrontPage 3.0">
<meta NAME="Microsoft Theme"
content="leaves 011, default">
</head>
2.3 Informações especiais para o navegador
Cache é uma seção de
memória para acesso rápido.
Neste caso se refere a uma Alguns navegadores reconhecem certas informações
área destinada ao especiais e podem tomar atitudes em função delas. É
armazenamento das páginas possível por exemplo especificar uma data de validade
visitadas. Esse da página (a data deve ser especificada no formato
armazenamento é feito para mostrado no exemplo abaixo), a partir da qual ela deve
acelerar a operação de
acesso às páginas de uso ser retirada do cache e reatualizada (recarregada). O
freqüente. exemplo a seguir ilustra esta utilização da tag <META
HTTP-EQUIV>:
<head>
<title>Minha Home Page</title>
<META HTTP-EQUIV="EXPIRES"
CONTENT="Fri, 31 Dec 2002 00:00:01
Quando uma indicação de GMT">
hora, minuto e segundo,
aparece seguida das letras <META HTTP-EQUIV="CHARSET"
GMT, como: 00:00:01
CONTENT="ISO-8859-1">
GMT (do exemplo ao lado),
significa que ela é em
relação ao horário do <META HTTP-EQUIV="CONTENT-LANGUAGE"
Meridiano de Greenwich CONTENT="Portuguese">
(sigla de: Greenwich
Meridian Time). </head>
Os meridianos são linhas
imaginárias que ligam os
pólos Norte e Sul.
O meridiano que passa pelo 2.4 Troca automática de documento
subúrbio londrino de
Greenwich foi escolhido De todas as utilidades da tag <META> a troca
em 1884 como meridiano automática de documento, possivelmente é a mais
inicial ou de origem (0o de
longitude) a partir do qual interessante de todas.
se contam os fusos
horários. É possível indicar ao navegador que, após alguns
segundos, a página que está sendo exibida deve ser
substituída por uma outra página.
Esta forma de uso da tag <META> pode ter várias

aplicações, como:
a) redirecionamento da página e
b) apresentação de slides.
Redirecionamento é útil quando o endereço de uma

página mudou mas se deseja que as pessoas que
utilizam o endereço antigo continuem a ter acesso a
página. É possível redirecionar automaticamente os
que acessam o endereço antigo para o novo endereço.
No caso de apresentação de slides, um conjunto de
imagens, sendo uma em cada página, pode ser
apresentado sem a intervenção do usuário.
Para fazer a troca automática de documento, devemos

definir na tag <META> o atributo HTTP-EQUIV com
o valor "refresh". O atributo CONTENT deve ser
definido com o seguinte formato:
CONTENT="tempo; URL=página"
Onde:
Tempo – indica o tempo, em segundos, após o qual a
nova página deve ser carregada.
Página – indica a URL da nova página a ser

carregada.
Nas linhas abaixo, a página nova.html é carregada

após 10 segundos:
<META HTTP-EQUIV="refresh"
CONTENT="10; URL=nova.html">
3. Tags dependentes do navegador

Como ilustração, são descritas nesta seção duas
container tags, implementadas apenas em um
determinado tipo de navegador. São as tags <BLINK>
e <MARQUEE>.
Os navegadores que não as reconhecem vão

simplesmente exibir o texto contido entre as tags
iniciais e finais (isso é entre : <..> e </ >), sem realizar
nenhuma ação especial.
3.1 A tag <blink>
A tag <BLINK> ... </BLINK>, que funciona

apenas no navegador Netscape, serve para exibir um
texto piscando na janela. Não é conveniente utilizar
esta tag para manter a uniformidade de aspecto da
página independente do navegador utilizado para
visualização.
3.2 A tag <marquee>
A tag <MARQUEE> ... </MARQUEE>, funciona

apenas no navegador Internet Explorer. Ela serve
para exibir um texto rolando na janela (por default da
esquerda para a direita), num efeito similar a de um
letreiro luminoso.
Uma série de atributos nesta tag permite controlar a

direção de rolagem, o número de loops, seu
comportamento (se entra por um canto e sai pelo
outro, se fica em vaivém, ou se chega na posição e
pára), a velocidade, o tamanho do letreiro, seu
alinhamento entre outros.
Por exemplo:
<MARQUEE ALIGN=BOTTOM HEIGHT=30

WIDTH=300 BEHAVIOR=SCROLL
DIRECTION=LEFT LOOP=INFINITE
SCROLLAMOUNT=20 SCROLLDELAY=100>
Esse texto rola para a esquerda com

uma velocidade de 50 pixels por
unidade de tempo esperando 100
milisegundos para redesenho do texto
</MARQUEE>
O efeito causado por esta tag pode ser visualmente

interessante, mas não convém utilizá-la por ser
dependente do navegador. Através de Javascript é
possível obter o mesmo efeito, com a vantagem da
portabilidade.
Exercícios:
Na aula de imagens 1. Construa um desenho, ou capture alguma imagem

fornecemos diversas dicas
de sites ! na Internet (que seja de domínio público
evidentemente!)
Usando algum programa de manipulação de imagens
recorte esta imagem em 6 ou mais partes iguais.
Depois experimente usar cada parte da imagem como
fundo de uma tabela, sem bordas, que ao ser clicada
remeta para algum endereço na WWW.
2. Utilize tabelas, sem bordas, para construir uma

página com o mesmo formato desse nosso texto
impresso das aulas, isso é tenha duas colunas (de
tamanhos diferentes) e um cabeçalho. Faça com que
esta página tenha um tempo de validade, e
informações de autoria.
Resumo:
Nesta aula, você aprendeu como usar as tabelas, como
definir seus elementos, e quais são os seus atributos
gerais (borda, largura, espaçamento). Você viu como
usar os atributos das células: alinhamento, dimensões,
uniões de linhas e colunas. Nos exercícios, você usou a
reconstrução de imagens como tabelas. Ainda
aprendeu como usar a tag META para: fornecer
informações aos de programas de busca na Internet,
redirecionar páginas e outros usos. Finalmente, você
conheceu duas outras tags que podem ser usadas no
caso da uniformidade de visualização não ser muito
importante em um site.
Auto-avaliação:
Avalie honestamente com que facilidade você

entendeu esta aula e fez os exercícios acima. O que
fazer nos pontos de dúvida? Isso! volte e leia o ponto
em que sentiu mais dificuldade. Depois disso você
estará pronto para aprender o interessante recurso dos
frames, que é o assunto da nossa próxima aula.
Aula 6: Frames
Você certamente já visitou páginas organizadas em áreas diferenciadas

que podiam ser usadas, redimensionadas movidas para cima ou para
baixo independentemente. Pois essa possibilidade de organização em
diversas seções, de maneira criativa, é devido aos frames, que é o assunto
desta nossa aula!
Objetivos:
Nesta aula você:
− Aprenderá os conceitos de frames.
− Compreenderá as formas de dividir uma janela.
− Conhecerá os atributos de frameset e frames.
− Saberá como abrir documentos em um frame.
− Aprenderá o significado dos nomes especiais: _blank, _self,
_parent, e _top.
− Conhecerá os frames inline.
Pré-requisitos:
Os temas das aulas 2 e 5, e a forma como se define cores apresentada na
aula 4, serão muito importantes para frames.
A tradução usual de
layout é de: desenho, 1. Aspectos Gerais dos Frames
plano, ou esquema.
O termo também é Uma forma de posicionar os elementos e dividir o espaço de uma janela é
usado para designar a
através dos frames. Este recurso permite dividir a janela do navegador
disposição de alguma
coisa em determinado em várias áreas independentes (chamadas frames) e em cada uma destas
lugar. Ambos os áreas pode ser carregado e visualizado um arquivo HTML diferente.
significados não Cada frame é totalmente independente dos demais, o que permite que o
definem completamente conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta
todo seu sentido, neste
independência torna este recurso ideal para a criação de menus.
contexto mais
específico de HTML em
Informática. Layout A construção de uma página dividida em frames envolve, além dos
(que se lê: leiaute) aqui arquivos que serão exibidos em cada frame, a criação de um arquivo
significa mais extra para definir a disposição e o tamanho ocupado por cada área da
precisamente: um janela. Este arquivo extra é chamado de arquivo de layout.
arquivo que estará
mostrando a
distribuição física e o Um arquivo de layout é um documento HTML, onde a tag <BODY> é
tamanho dos elementos substituída pela tag <FRAMESET>. Este arquivo tem o seguinte
independentes de formato:
determinada página. <HTML>
<HEAD><TITLE>Frames
Horizontais</TITLE></HEAD>
<FRAMESET ROWS=”50%, 50%”>
<FRAME SRC=... NAME=...>
<FRAME SRC=... NAME=...>
<NOFRAMES> </NOFRAMES>
</FRAMESET>
</HTML>
1
O arquivo de layout do exemplo fará com que a janela seja dividida
horizontalmente ao meio, como mostrado na figura 6.1 a seguir:
Figura 6.1- Janela horizontalmente dividida em dois frames
2. Atributos de <FRAMESET>
A tabela que segue resume os

atributos de definição do conjunto de
frames (a tag FRAMESET).
Tabela 6.1 - Descrição dos atributos

de <frameset>
Atributo Descrição
ROWS Número e altura de cada linha dos frames
COLS Número e largura de cada coluna dos frames
BORDER Largura da borda do frame
BORDERCOLOR Cor da borda do frame
Os frames são dispostos na janela do navegador na forma de linhas e

colunas, como em uma tabela. Os atributos ROWS e COLS servem para
definir desta forma (ROWS para linhas e COLS para colunas) o número
de frames e o tamanho (altura para ROWS e largura para COLS)
ocupado por cada um dos frames.
O formato deste atributo é ROWS=”v,v,...” ou

COLS=”v,v,...”, onde v indica o valor, que pode ser descrito de 3
formas:
• o tamanho exato em pixels,
• um percentual do tamanho da janela, e
• uma porção do espaço ainda não ocupado da janela.
No primeiro caso, v é um número indicando a altura ou a largura em

pixels de cada frame. Por exemplo: ROWS=“100,50,200” define 3
frames que aparecem dividindo a tela em três áreas dispostas lado a lado
(como linhas de uma tabela): o primeiro com a altura de 100 pontos, o
segundo de 50 e o terceiro de 200 pontos.
No segundo caso, v é descrito como um percentual, indicando a altura

ou largura dos frames em função do tamanho da janela do navegador.
Ex.: COLS=“30%,20%, 50%” define 3 frames dividindo a janela do
navegador em colunas, onde o primeiro ocupa 30% da largura total, o
segundo 20% e o terceiro 50%.
Nas formas relativas, o caracter * tem função especial. Assume um valor

em função da área ainda não usada da janela. Pode aparecer sozinho ou
precedido de um número.
Se * aparece sem número na frente está indicando a altura ou largura

relativa aos demais valores definidos em função do restante da tela. Por
2
exemplo: COLS=“30%,20%,*,*” define 4 frames dispostos em
colunas: o primeiro ocupa 30% da largura da janela, o segundo 20%, o
terceiro e o quarto dividem os 50% restantes, ficando cada um com 25%.
Um número n seguido do caracter *, indica que um frame ocupará n

vezes o espaço ocupado pelos demais frames definidos relativamente.
Ex.: ROWS=“40%,2*,*”define 3 frames (como linhas da tela do
navegador), o primeiro ocupa 40% da altura da tela, o restante da tela
(isto é: 60%) será dividido por 3 (já que há 2*+ 1*=3*), isto é, em
partes de 20% da tela. Desta parte restante, o segundo frame ocupará
40% (2* da altura restante) e o terceiro 20% (1* da altura restante).
O atributo BORDER permite atribuir um valor para a largura da borda e o

atributo BORDERCOLOR permite mudar a sua cor. Os valores destes dois
atributos são definidos da mesma forma que os atributos semelhantes de
tabelas (vistos na aula passada).
3. Frames dentro de Frames

Neste ponto da aula, você pode estar imaginando que dividir a janela
apenas em linhas ou colunas não permite grande liberdade de criação.
Além disso, possivelmente, você já encontrou páginas com divisões mais
complexas que puramente linhas ou colunas.
É possível criar layouts mais sofisticados, pois a tag <frameset>

aceita em seu interior, além das tags <frame>, outras tags
<frameset>. Este recurso é chamado de framesets aninhados. No
exemplo a seguir, inicialmente, dividimos a janela em duas colunas para
posteriormente dividir a coluna da direita em duas linhas:
<HTML>
<HEAD><TITLE>
Framesets Aninhados
</TITLE></HEAD>
<FRAMESET COLS=”50%, 50%”>
<FRAME>
<FRAMESET ROWS=”50%, 50%”>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>
O arquivo de layout que acabamos de ver produziria o efeito na janela

mostrado na figura 6.2.
3
Figura 6.2 - Divisão em 2 colunas e
posterior divisão da coluna direita em duas linhas
Outro layout bem comum

envolvendo framesets
aninhados, seria dividir a janela
em duas linhas, para em seguida
dividir a linha de baixo em duas
colunas. O código HTML a seguir
mostra como isso pode ser feito:
<HTML>
<HEAD><TITLE>
Framesets Aninhados
</TITLE></HEAD>
<FRAMESET ROWS=”60,*”>
<FRAME>
<FRAMESET COLS=”150,*”>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>
O arquivo de layout que acabamos de ver produziria o efeito na janela,

que é mostrado na figura 6.3.
Figura 6.3 - Exemplo de uso de "*"
4. Atributos de FRAME
A tag frame pode aceitar os vários
atributos que são mostrados na tabela
6.2.
4
Tabela 6.2 - Descrição dos atributos de <frame>
SRC Arquivo inicialmente mostrado no frame
NAME Nome associado ao frame
SCROLLING Indica se o frame será rolável (yes ou no)
NORESIZE Indica que o usuário não pode mudar de
tamanho do frame
MARGINHEIGHT Altura da margem do frame
MARGINWIDTH Largura da margem do frame
O atributo SRC indica qual documento HTML será exibido no frame

após o carregamento do arquivo de layout. Para exibir posteriormente um
novo documento num frame é necessário que isso seja resultado da
seleção de um link.
É possível indicar que a URL referenciada num link seja exibida em um

determinado frame. Isto é feito através da definição do atributo TARGET
da tag <A>...</A> vista anteriormente.
No exemplo a seguir, vemos o código do arquivo menu.html onde

foram definidos dois links. A seleção de "primeiro link" faz com
que o documento f1.html seja exibido no frame "esq". Já a seleção
do “segundo link” faz com que o documento f2.html seja exibido no
frame "dir":
<HTML>
O codifico: <HEAD><TITLE>
define um f1 a esquerda e f2 a direita…
espaçamento no </TITLE></HEAD>
texto, estes e outros <BODY>
códigos especiais de <DIV ALIGN=center>
HTML podem ser <A HREF="f1.html" TARGET="esq">
encontrados na lista primeiro link</A>
do final desta aula. <A HREF="f2.html" TARGET="dir">
segundo link</A>
</DIV>
</BODY>
</HTML>
Para que o navegador saiba quais são os frames "dir" e "esq" é

necessário atribuir nomes a eles. Isso é feito através da inclusão do
atributo NAME da tag <FRAME>.
A seguir é mostrado o arquivo de layout que divide a janela em 3 áreas:

uma linha onde foi carregado o arquivo menu.html e duas colunas
chamadas de "dir" e "esq":
<HTML>
<HEAD><TITLE>
Links para 2 frames
</TITLE></HEAD>
<FRAME SRC=”menu.html”>
<FRAMESET COLS=”*,*”>
<FRAME NAME=”esq”>
5
<FRAME NAME=”dir”>
</FRAMESET>
</FRAMESET>
</HTML>
A combinação de arquivos que acabamos de ver produziria o efeito

mostrado na figura 6.4, na janela *.
Figura 6.4 - Janela * gerada pelo código anterior
Como nas células de uma tabela, há

atributos para definir uma margem
dentro da qual o documento vai ser
exibido. O atributo MARGINHEIGHT
serve para definir a altura da margem. O
atributo MARGINWIDTH
serve para definir a largura da margem.
O atributo SCROLLING permite

controlar a exibição da barra de rolagem
vertical do frame: o valor yes faz com que a barra de rolagem esteja
sempre visível, o valor no faz com que ela nunca seja exibida e o valor
auto (default) faz com que ela seja exibida apenas se necessário.
O usuário pode, a qualquer momento, modificar o tamanho inicial do

frame, a menos que o atributo NORESIZE seja definido.
Como todo recurso novo que é incorporado à linguagem HTML, é

necessário manter a compatibilidade do documento com os navegadores
antigos, que ainda não implementam o recurso. Isso se tornou
especialmente problemático quando surgiram os frames, pois, carregar
um arquivo de layout num navegador antigo poderia mostrar ao usuário
uma página completamente vazia. Para dar uma satisfação aos
utilizadores de navegadores que não suportam frames, existe a tag
<NOFRAMES> ... </NOFRAMES>.
Os navegadores mais antigos só vão interpretar o que há dentro desta tag

e os mais novos vão ignorá-la. Ela deve ser incluída no fim do arquivo de
layout com um código HTML alternativo ao código contendo frames,
como no exemplo a seguir:
<HTML>
<HEAD><TITLE>
Arquivo com HTML alternativo
</TITLE></HEAD>
<FRAMESET>
<FRAME NAME=”esquerdo”>
<FRAME NAME=”direito”>
</FRAMESET>
<NOFRAMES>
Utilize um browser que suporte Frames
para ver bem esta página.
6
</NOFRAMES>
</HTML>
5. Nomes Especiais no TARGET

Existem alguns nomes especiais que podem ser utilizados no atributo
TARGET. Estes são:
• _blank,
• _self,
• _parent,e
• _top.
O nome _blank faz com que o documento HTML seja carregado numa
nova janela do navegador. Isto é particularmente desejável quando se faz
referências a um documento de um outro site. Desta forma, a página
anterior continua sendo visível.
O nome _self indica que o novo documento será carregado no mesmo

frame onde está a página com o link que causou sua exibição. Na maior
parte das vezes, este nome é desnecessário, pois este é o comportamento
padrão.
Para compreender os nomes _parent e _top é necessário imaginar

uma organização mais complicada do que a que temos visto até agora. O
arquivo de layout a seguir divide a janela em 3 frames:
<HTML>
<HEAD><TITLE>
Janela dividida em 3
</TITLE></HEAD>
<FRAME NAME=”sup”>
<FRAMESET COLS=”*,*”>
<FRAME SRC=”lay.htm” NAME=esq>
<FRAME NAME=dir>
</FRAMESET>
</FRAMESET>
</HTML>
Apesar do arquivo de layout anterior ter apenas 3 tags frames é possível

dividir mais ainda a janela se o arquivo lay.htm for também um
arquivo de layout, cujo código poderia ser por exemplo:
<HTML>
<HEAD><TITLE>Arquivo lay.htm
</TITLE></HEAD>
<FRAMESET ROWS=”*,*”>
<FRAME SRC=”menulay.htm” NAME=esqsup>
<FRAME NAME=esqinf>
</FRAMESET>
</HTML>
Se o arquivo menulay.htm tivesse o seguinte código:

<HTML>
7
<HEAD><TITLE>Arquivo menulay.htm
</TITLE></HEAD>
<BODY>
<A HREF=”f.htm” TARGET=_top>
No Topo</A><BR>
<A HREF=”f.htm” TARGET=_parent>
No Pai</A>
</BODY>
</HTML>
A combinação de arquivos que acabamos de ver produziria o efeito na

janela vista na figura 6.5.
Figura 6.5- Resultado da janela obtida pelos arquivos lay.htm e

menulay.htm
Como podemos observar neste

exemplo, temos 2 arquivos de
layout na janela: o principal que
ocupa a janela toda e aquele que está
em lay.htm que ocupa o frame
chamado esq. A página que
contém os links foi aberta a partir
do segundo arquivo de layout.
A seleção do link cujo TARGET é

_top vai fazer com que o arquivo
f.htm seja aberto no lugar onde
foi aberto o arquivo de layout
principal (o topo da hierarquia), ou seja, ocupando a janela toda.
Já a seleção do link cujo TARGET é _parent vai fazer com que o

arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout.
Este causou a abertura do arquivo que contém o link (o arquivo de layout
mais próximo da hierarquia), ou seja, ocupando o frame de nome esq.
8
6. Frames inline
A linguagem HTML comporta uma outra forma de criar um frame que
apenas na versão 6.0 passou a também ser implementada pela Netscape:
frames inline.
Estes frames são incluídos num arquivo HTML através da tag

<IFRAME> e não necessitam de arquivo de layout, ou seja, ficam
misturados às tags de um arquivo comum. Salvo por esta
particularidade, seu comportamento em relação à página é idêntico ao
comportamento de um frame comum, aceitando os mesmos tipos de
atributos.
As linha de código abaixo exemplificam isso. Elas permitem que a

imagem do animal selecionado pelo usuário seja mostrado em uma
janela. As imagens de cada animal estão nos arquivos
elefante.jpg, girafa.jpg, crocodilo.jpg e
hipopotamo.jpg no diretório imagens. Repare que <iframe>
introduz uma simplicidade maior ao possibilitar que um único arquivo
controle tudo.
<HTML>
<head>
<title>Frames Inline</title>
</head>
<body bgcolor=lightgreen>
<table align=center cellspacing=10>
<tr>
<td><h2>Frames Inline</h2></td>
</tr>
<tr>
<th height=40 bgcolor=white>
<a href="imagens/elefante.jpg"
target=imagem>Elefante</a>
</th>
<iframe src="" name=imagem></iframe>
<tr>
<a href="imagens/girafa.jpg"
target=imagem>Girafa</a>
</th>
</tr>
<tr>
<a href="imagens/crocodilo.jpg"
target=imagem>Crocodilo</a>
</th>
</tr>
<tr>
<a href="imagens/hipopotamo.jpg"
target=imagem>Hipopotamo</a>
</th>
</tr>
</table>
</body>
9
</HTML>
Figura 6.6 - Resultado da implementação

das linhas de código anteriores
Exercícios:
1. Utilize frames, no exercício 3 da aula 2, de modo que o exercício

tenha 2 frames: um à esquerda ocupando 30% e outro à direita ocupando
70% da página. Faça o frame da esquerda funcionar como menu e o da
direita mostrar os itens selecionados pelo usuário.
2. Modifique agora o exercício anterior para que ao invés de mostrar um

arquivo no frame da direita, a seleção de um item produza a abertura
deste arquivo em uma nova página.
Resumo:
Nesta aula, você aprendeu a estrutura básica dos frames na linguagem

HTML, como estruturar a forma como eles aparecem em um documento,
o seu layout, o seu conteúdo e a tratar formas alternativas de
representação no caso do navegador não tratá-los. Fez uso deste recurso
em uma página com “menu” e testou seus novos conhecimentos nos
exercícios.
Auto-avaliação:
Você concluiu com sucesso os exercícios? Então está pronto para utilizar
esse recurso em qualquer página, mas nunca exagere, uma página cheia
de frames fica muito pesada! Se não está bem seguro, já sabe o que deve
fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e
10
aí sim estará pronto para os formulários, que é o assunto da próxima
aula.
11
Aula 7: Formulários
Com certeza você já deve ter preenchido algum formulário em suas "viagens"
pela Internet, pois esta é uma forma cada vez mais comum de interagir com os
visitantes de um site, para obter dados do visitante ou registrar sua opinião. Os
formulários são feitos como qualquer página. Eles são o assunto desta aula.
Objetivos:
Nesta aula você vai aprender tudo sobre construção de formulários e estará se
habilitando a criá-los. Conhecerá:
- as formas de envio pelos métodos POST e GET,
- o envio por e-mail,
- os diversos elementos de interação: campos de entrada de texto, botões de
seleção exclusiva e não-exclusiva e listas de seleção.
Pré-requisitos:
As aulas anteriores de links e tabelas serão importantes para entender bem os
formulários.
1. Aspectos Gerais dos Formulários
A principal forma de trocar informações entre o usuário de uma página e o

responsável por um site é através de formulários. A linguagem HTML oferece
uma série de elementos de interação com o usuário que podem ser agrupados
em um formulário.
O resultado desta interação é posteriormente enviado diretamente pela rede

para um programa executado no servidor ou enviado por e-mail para o
responsável pelo site.
Programas CGI A tag <FORM> ... </FORM> delimita a área ocupada pelo formulário. Isto
(Common Gateway é, toda a seqüência de entrada de dados e de formatação do formulário deve ser
Interface) – são delimitada por essa tag.
programas
executados pelo Esta tag possui dois atributos principais que indicam quem vai receber os dados
servidor Web, de
onde recebem seus do formulário (atributo ACTION) e a forma como eles serão enviados pela rede
dados de entrada e (atributo METHOD).
para quem produzem
sua saída (que O atributo ACTION serve para informar a URL do programa CGI que irá
geralmente é uma processar o formulário. É possível utilizar este atributo para informar ao
página Web).
Freqüentemente ,são administrador do site que os dados do formulário serão enviados por e-mail.
escritos em uma Neste caso, o método de envio deve, obrigatoriamente, ser definido como
linguagem de script, POST.
como Perl.
São duas as formas de envio pela rede:
• Get - os dados são anexados à URL.
• Post - os dados são enviados separados da URL.
1
Quando o atributo METHOD recebe o valor GET, o conteúdo do formulário é
enviado para o servidor anexado à URL definida no atributo ACTION. Este
método é adequado a formulários pequenos, com pouca informação. Também
não é conveniente enviar dados sigilosos por este método pois, além deles
serem transmitidos sem nenhuma proteção, estarão visíveis na área de
endereços do navegador.
O outro valor que pode ser atribuído a METHOD é POST. Neste caso, as
informações do formulário são enviadas separadas da URL.
O exemplo a seguir mostra um formulário que será enviado para o endereço

joao@nce.ufrj.br:
<FORM METHOD=POST ACTION="mailto:joao@nce.ufrj.br">
... </FORM>
O interior da tag <FORM>...</FORM> pode conter quatro novos tipos de tag

que servem para definir os diversos elementos de interação. Estas tags são:
• <INPUT>
• <SELECT> ... </SELECT>
• <OPTION>
• <TEXTAREA> ... </TEXTAREA>
Antes de descrevermos os detalhes destas novas tags, vejamos um exemplo.

Nas linhas abaixo, veremos o código que permitiu a criação do formulário
mostrado na figura 7.1.
<HTML>
<HEAD>
<TITLE> Curso CEDERJ: Construção de Páginas Web -
Aula 7: Formulários
</TITLE>
</HEAD>
<BODY BGCOLOR="#DDFFFF">
<FORM METHOD="POST" ACTION="mailto:aconci@ic.uff.br">

<p>Se voce tem uma pagina relacionada a temas deste
curso, ou visitou uma pagina que ache interessante,
contribua apresentando este link para incluirmos aos
nossos.</p>
<p>Seu e-mail:
<INPUT TYPE="TEXT" NAME ="Seu nome" SIZE="30"></p>
<p>Qual o endereco do site?
<INPUT TYPE="TEXT" NAME ="homepage" VALUE ="http://"
SIZE =50 MAXLENGHT=100></p>
<p>sexo:
M <INPUT TYPE=radio NAME ="sex" VALUE =M>
F <INPUT TYPE=radio NAME ="sex" VALUE =F></p><BR>
<p>De onde voce vem?

Brasil <INPUT TYPE=checkbox NAME ="country" VALUE
="Brasil" CHECKED>
Portugal <INPUT TYPE=checkbox NAME ="country" VALUE
="Portugal">
2
Cabo Verde <INPUT TYPE=checkbox NAME ="country"
VALUE ="Cabo Verde">
Angola <INPUT TYPE=checkbox NAME ="country" VALUE
="Angola">
Mocambique <INPUT TYPE=checkbox NAME ="country"
VALUE ="Mocambique">
Timor Leste <INPUT TYPE=checkbox NAME ="country"
VALUE ="Timor Leste"></P>
<p>Seu interesse neste tema se relaciona a:
<SELECT NAME ="interesse">
<OPTION VALUE ="curiosidade"> curiosidade
<OPTION VALUE ="pesquisa">pesquisa
<OPTION VALUE ="programas">programas
<OPTION VALUE ="trabalhos">trabalhos
<OPTION VALUE ="imagens">imagens
<OPTION VALUE ="aplicacao">aplicacao
<OPTION VALUE ="outros">outros</SELECT ></p>
<p>Gostaria de mandar uma mensagem?

<TEXTAREA NAME ="message" ROWS=5 COLS=70>
Por favor escreva aqui seus comentários
</TEXTAREA></p>
<INPUT TYPE="RESET" VALUE="LIMPAR">

<INPUT TYPE="SUBMIT" VALUE="ENVIAR">
<INPUT TYPE ="HIDDEN" NAME="mail" VALUE
="aconci@ic.uff.br">
</FORM>
</BODY>
</HTML>
Figura 7.1 - Formulário gerado pelo código HTML anterior
3
2. A tag <INPUT>
A tag <INPUT> é bastante versátil e permite criar:
• campos para entrada de texto
• campos para entrada de senhas
• botões comuns
• botões estilo rádio
• botões de seleção múltipla
A tabela 7.1 mostra os atributos e valores possíveis de <INPUT>. O atributo

type permite definir o tipo de entrada de dados e o aspecto do elemento de
interação. Dependendo do valor atribuído à type, aparecerão janelas onde os
dados serão digitados, campos para senhas ou botões dos diversos tipos. Para
alguns atributos de type, os outros atributos de input podem nem fazer
sentido.
Tabela 7.1 Atributos de <INPUT>

Atributo Valor Descrição
TYPE TEXT Entrada para texto.
PASSWORD Campo para senha.
RADIO Botões de seleção exclusiva (radio).
CHECKBOX Botões de seleção múltipla.
BUTTON Botão comum.
O valor SUBMIT Botão que envia o formulário.
String
indica que o RESET Botão que limpa os campos do formulário.
dado será um HIDDEN Campo que não será mostrado, útil para
texto. atribuir valores a NAME.
Tamanho NAME String Nome da variável associada ao campo.
corresponde a VALUE String Valor default do campo.
um valor
numérico. SIZE Tamanho Tamanho do campo TEXT ou PASSWORD.
MAXLENGTH Tamanho Número máximo de caracteres a ler.
CHECKED Define um campo CHECKBOX como
selecionado.
2.1. Usando a Tag <INPUT> para Criação de um Campo para

Entrada de uma Linha de Texto
A definição do atributo TYPE=TEXT na tag <INPUT> permite a criação de

um campo para entrada de uma linha de texto. A aparência que isso terá no
formulário gerado é a de uma área retangular onde é possível escrever uma
linha de texto. Repare, na figura 7.1, as áreas retangulares que aparecem após
os textos: "Seu e-mail:" e "Qual o endereco do site?"
As informações digitadas por um usuário no formulário são enviadas ao

servidor no formato “nome=valor”. Por isso, cada elemento de interação
contém um atributo NAME que deve obrigatoriamente ter um nome definido de
modo que este elemento possa ser identificado pelo CGI. O exemplo abaixo faz
com que o navegador exiba na página um campo de entrada de texto; caso o
4
usuário digite “joao” e envie o formulário, a informação será recebida pelo
programa na forma de “conta=joao”:
Conta:<INPUT TYPE=TEXT NAME=conta>
É possível preencher o campo com um valor padrão que é exibido após o

carregamento da página. Isso é feito através do atributo VALUE, como
mostrado na segunda janela de texto das linhas de HTML que geram a figura
7.1.
A omissão do atributo TYPE, na tag <INPUT>, faz com que o navegador

assuma o tipo TEXT. Ou seja, esta é a opção default.
É possível definir o tamanho da área para entrada de texto através do atributo

SIZE. Este atributo não limita o número de caracteres que o usuário pode
digitar, apenas o tamanho do campo.
Para se indicar o número máximo de caracteres que pode ser digitado pelo
usuário deve-se definir o atributo MAXLENGTH.
No exemplo abaixo, a área de entrada de texto tem o tamanho de 7 caracteres,

mas o usuário pode digitar até 11 caracteres:
Telefone:
<INPUT TYPE=TEXT NAME=telef SIZE=7 MAXLENGTH=11>
2.2. Usando a Tag <INPUT> para Criação de um Campo para

Entrada de Senha
A definição do atributo TYPE=PASSWORD na tag <INPUT> permite a criação

de um campo para entrada de informações sigilosas (como por exemplo,
senhas). A aparência deste campo no formulário é a mesma do campo de texto.
No entanto, no campo PASSWORD, os caracteres digitados pelo usuário não
são exibidos no monitor, sendo substituídos por asteriscos "* ".
Para tirar proveito do “sigilo”, este tipo de campo deve ser enviado pelo
método POST.
No exemplo abaixo, se o usuário digitar “pcpw02” e enviar o formulário, a

informação recebida pelo programa será “senha=pcpw02”:
Senha:<INPUT TYPE=PASSWORD NAME=senha>
É possível definir o tamanho da área para entrada de texto através do atributo

SIZE e o número máximo de caracteres que pode ser digitado pelo usuário
através do atributo MAXLENGTH, exatamente como no caso dos campos de
entrada de texto comuns.
2.3. Usando a Tag <INPUT> para Criação de Botões de Seleção

Exclusiva
Um tipo de elemento de interação muito comum são os botões de seleção

exclusiva (que são os chamados Radio Buttons). Estes botões são utilizados
quando o usuário deve escolher uma única resposta entre várias. Quando um
dos botões é selecionado, automaticamente todos os outros são desmarcados.
5
Só uma opção entre as várias apresentadas pode estar marcada. A aparência
destes é de um botãozinho redondo, como pode ser visto na figura 7.1.
Estes elementos são criados pela tag <INPUT> com o atributo TYPE=RADIO.
Para indicar ao navegador quais botões são mutuamente exclusivos é preciso
que eles tenham o atributo NAME definido com o mesmo valor.
O atributo VALUE deve ser definido de modo a diferenciar qual dos botões está
selecionado (já que todos têm o mesmo NAME). Através do atributo CHECKED
é possível indicar que uma das alternativas estará previamente selecionada. No
exemplo abaixo, a opção “Superior” está previamente selecionada; se o
usuário selecionar “Analfabeto” a informação enviada ao programa será
“instruc=A”.
Nível de Instrução:<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=A>Analfabeto<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=1>Primeiro grau
<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=2>Segundo grau
<br>
<INPUT TYPE=RADIO NAME=instruc VALUE=S CHECKED>Nivel
superior<br>
2.4. Usando a Tag <INPUT> para Criação de Botões de Seleção

Múltipla
Quando é desejável escolher mais de uma resposta, utilizam-se botões de

seleção múltipla (toggle buttons). A criação destes botões é feita através da tag
<INPUT> com o atributo TYPE=CHECKBOX.
No formulário, a aparência destes botões é de quadradinhos (como é mostrado

na figura 7.1). Diferente dos botões exclusivos, neste caso, vários botões
podem ser selecionados pelo usuário ou podem estar previamente selecionados
pela definição do atributo CHECKED.
Através do atributo CHECKED, no exemplo a seguir, foi possível pré-

selecionar as opções “Netscape” e “Explorer”; se o usuário enviar o formulário
sem fazer nenhuma modificação, o programa vai receber “nav1=N” e
“nav3=E”:
Navegador utilizado:<BR>
<INPUT TYPE=CHECKBOX NAME=nav1 VALUE=N CHECKED>
Netscape<br>
<INPUT TYPE=CHECKBOX NAME=nav2 VALUE=M>Mosaic<br>
<INPUT TYPE=CHECKBOX NAME=nav3 VALUE=E CHECKED>
Explorer<br>
<INPUT TYPE=CHECKBOX NAME=nav4 VALUE=H>HotJava<br>
Os atributos NAME e VALUE devem ser definidos como nos botões de seleção
exclusiva.
6
2.5. Usando a Tag <INPUT> para Criação de Botões de Ação
A tag <INPUT> também serve para a criação de botões de ação. Estes botões,
diferente dos elementos de interação que vimos até agora, não estão associados
a informações que serão enviadas ao servidor. A seleção de um destes botões
pelo usuário faz com que uma ação seja realizada (pode ser uma ação padrão
do navegador como: enviar o formulário ou apagar o conteúdo de seus campos
ou ainda o resultado da execução de um programa numa linguagem de script).
Estes botões têm a aparência de teclas, como você pode observar na parte
inferior da figura 7.1.
Estes botões são gerados pela atribuição dos valores BUTTON, RESET ou
SUBMIT a TYPE. Os dois últimos valores têm ações especiais associadas. A
definição do atributo TYPE=SUBMIT inclui um botão para fazer o envio do
formulário. A definição do atributo TYPE=RESET inclui um botão que limpa
os campos do formulário, permitindo que o usuário redefina suas escolhas.
Nestes botões, o atributo VALUE define um texto para ser escrito no interior do
botão. A omissão deste atributo faz com que o navegador exiba um texto
default, em língua inglesa.
Normalmente, estes botões são colocados no fim do formulário. O exemplo, a

seguir, mostra a utilização destes botões para criação de botões de ação com os
títulos definidos pelas strings atribuídas à VALUE:
<FORM>
...
<INPUT TYPE=SUBMIT NAME="Envia" VALUE="Envia dados
agora">
<INPUT TYPE=RESET NAME="Limpa" VALUE="Apagar
tudo">
...
</FORM>
3. A Tag <textarea> : Área de Texto

No exemplo inicial desta aula, a tag <TEXTAREA> foi usada para desenhar a
caixa onde o usuário escrevia. Este é seu uso mais comum, isto é, quando se
deseja enviar mais de uma linha de texto, deve-se utilizar a tag <TEXTAREA>
... </TEXTAREA>.
O atributo NAME deve ser definido para indicar a variável que será associada ao
texto inserido. O tamanho da área de texto é definido pelo número de linhas
(atributo ROWS) e pelo número de colunas (atributo COLS).
No interior da tag é possível colocar um texto a ser exibido após o

carregamento da página. O exemplo a seguir mostra essa utilização, neste caso
o texto: "Faça aqui seus comentários:" aparecerá inicialmente no
interior da caixa e será substituído pelo texto que o usuário digitar.
Comentários:<BR>
<TEXTAREA NAME=coment ROWS=3 COLS=40>
Faça aqui seus comentários:
</TEXTAREA>
7
4. As Tags <SELECT> e <OPTION>: Listas de Seleção
Quando há muitas opções a escolher, pode não ser muito prático utilizar botões
de seleção exclusiva ou botões de seleção múltipla para não ocupar muito
espaço na página. Uma alternativa a eles são as listas de seleção criadas através
da tag <SELECT> ... </SELECT>.
No exemplo do início da aula, esta tag foi usada para apresentar ao usuário as
opções que aparecem após a linha: "Seu interesse neste tema se
relaciona a:". Como você pode ver na figura 7.1, no formulário, ela
criará um "menu suspenso" que aparece na forma de uma janela com lista de
opções. Este tipo de menu é chamado de pull down.
No interior da tag <SELECT> deve ser colocada cada uma das opções da lista
(no interior da tag <OPTION>). O atributo SELECTED pode ser utilizado para
definir qual opção está previamente selecionada. O exemplo a seguir mostra a
utilização deste atributo:
Sexo:
<SELECT NAME=sexo>
<OPTION SELECTED>Masculino
<OPTION>Feminino
</SELECT>
O atributo MULTIPLE indica que mais de uma opção pode ser selecionada,
consequentemente, se ele estiver definido, podemos utilizar o SELECTED em
mais de uma opção.
O atributo NAME deve ser utilizado para definir o nome da variável que será
enviada ao programa. O atributo SIZE indica o número de opções mostradas
de uma só vez pelo navegador, sendo que o valor default é SIZE=1 (como
pode ser visto nas linhas HTML do exemplo inicial). As demais opções podem
ser acessadas através de uma barra de rolagem, que se abre ao ser clicado o
ícone à direita da lista (com aparência de um triângulo apontando para baixo).
A figura 7.1 mostra o exato momento em que a lista de opções está sendo
exibida. Numa lista de SIZE=1 , após o carregamento da página, apenas o
OPTION que estiver com o atributo selected definido é mostrado.
Exercício:
Utilize as novas tags para criar uma página de pesquisa de opinião sobre
"preferências esportivas". Desenhe no formulário campos com botões
exclusivos para identificar o sexo, o estado civil e a faixa etária da pessoa que
responde à pesquisa. Atribua a botões de seleção múltipla diversas
modalidades esportivas, e permita que o usuário que selecionar "outras" inclua
uma nova. Use campo de texto para identificar a cidade onde mora a pessoa.
Através de <select> permita que ela aponte o estado onde mora. Permita
que ela inclua comentários através de um campo de textarea. Inclua os
botões para envio ou redefinição das respostas do formulário. Faça,
finalmente, a página ter um alinhamento de parágrafo agradável e inclua um
título.
8
Resumo:
Nesta aula, você aprendeu novas tags para definição dos elementos de
interação dos formulários na linguagem HTML. Viu como definir a forma
como os elementos de interação apareceram em um documento e o conteúdo
que o formulário, quando preenchido, retornará ao programa que manipulará os
dados enviados pelo usuário. Fez ainda uso destes recursos, testando seus
novos conhecimentos no projeto uma página de pesquisa de opinião (no
exercício sugerido).
Auto-avaliação:
Você construiu a página de pesquisa com facilidade? Então está pronto para
criar páginas com esse recurso poderoso de interação com os visitantes. Se não
está bem seguro, já sabe o que deve fazer. Ou precisamos lembrar? Por certo
que não, afinal estamos no final de uma etapa, a próxima é nossa última aula
do primeiro módulo do nosso curso.
9
Aula 8: Folhas de Estilo
Nesta aula você estará se habilitando a usar Folhas de Estilo, um recurso que
permite separar o estilo do documento da sua estrutura. A introdução das folhas
de estilo representa um passo importante na evolução da Web, útil para facilitar
a atualização e a manutenção do padrão de um conjunto de páginas sob sua
administração.
Objetivos:
- Aprender a sintaxe básica das folhas de estilo.
- Usar seletores, propriedades e valores.
- Incluir seletores contextuais e múltiplos.
- Conhecer as classes de estilo e as pseudo-classes.
- Usar identificadores.
- Fazer definição inline.
- Estilos de divisão e de trecho de parágrafo.
Pré-requisitos:
Todas as aulas anteriores serão usadas nesta última aula, se algo ainda não
estiver bem, especialmente até a aula 4, reveja estes tópicos e tire suas dúvidas.
1. Folhas de Estilo
Até a versão 4 da linguagem HTML, caso se desejasse criar páginas cuja
aparência fosse ligeiramente diferente do comportamento padrão, era
necessário incluir os atributos e tags que definissem essa aparência nos pontos
do documento onde fosse necessário, misturados à própria estrutura do
documento.
Por exemplo, num documento cujo texto fosse de cor preta (definida na tag
<BODY> através do atributo TEXT color=black), caso se desejasse
cabeçalhos de cor azul marinho seria necessário incluir, em cada ocorrência da
tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer
modificação a ser realizada nesta definição tornava necessário buscar por todo
o documento o que deveria ser modificado.
A partir da versão 4 foi introduzido o conceito de folhas de estilo em cascata

(CSS – cascade style sheets). A introdução das folhas de estilo representa um
passo importante na evolução da Web, pois através delas os estilos (cores,
fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o
conteúdo do texto da página).
Essa estratégia torna sua página mais flexível e fácil de atualizar. Ela
possibilita separar a tarefa de tornar o site graficamente atraente das tarefas
ligadas à programação. Essa separação é importante pois geralmente é feita por
pessoas com formações e experiências profissionais diferentes. A criação
artística do visual do site é o trabalho de um designer visual, geralmente com
formação na área de Artes. A geração do conteúdo do documento é o trabalho
1
do programador HTML ou de algum especialista em um utilitário de criação de
páginas, ou seja, pessoas que são da área técnica em informática.
Estas informações ligadas à aparência ou formato do site podem inclusive estar

contidas em um arquivo à parte que pode ser incluído nos diversos documentos
Você também pode definir que compõem o site, garantindo assim uma apresentação comum em todas as
os valores de estilo em páginas. Além das facilidades de formatação já existentes, foram acrescentadas
qualquer tempo, mas novas facilidades (como a criação de classes), o que permite um controle muito
definindo os estilos na
maior do layout.
seção <BODY>, eles não
terão efeito imediato, ainda
que as mudanças no estilo A folha de estilos é definida por meio da tag <STYLE> ... </STYLE> que
passem a aparecer se o deve ser colocada na seção <HEAD> do documento, antes que qualquer texto
usuário redimensionar a seja formatado. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos
janela, causando uma
contidos na tag.
reformatação no
documento.
Há dois tipos de sintaxe possível: a sintaxe CSS e a sintaxe JavaScript. A
sintaxe CSS é normalmente a padrão e é definida atribuindo-se o valor
"text/css" ao atributo TYPE. A sintaxe JavaScript é reconhecida apenas
pelo navegador Netscape, é definida atribuindo-se o valor
"text/JavaScript" ao atributo TYPE.
Nesta aula veremos em detalhes a sintaxe padrão. O exemplo a seguir faz com
que todos os cabeçalhos do tipo 1 (<H1>...</H1>) sejam escritos
utilizando a fonte Arial e a cor azul; e todos os cabeçalhos do tipo 2
(<H2>...</H2>) e 3 (<H3>...</H3>) sejam escritos utilizando a fonte
Bazzoka e a cor verde:
<STYLE TYPE="text/css">

</STYLE>
A colocação dos estilos entre os símbolos de comentário, , não é

obrigatória, mas é uma boa sugestão, pois a utilização destes símbolos é
ignorada pelos navegadores que conhecem a tag <STYLE> (como o Explorer
e o Netscape na versão 4 ou posterior), mas não é ignorada pelos navegadores
que não as conhecem ou as versões anteriores destes, que desta forma tomam a
definição dos estilos como comentário.
O texto do interior da tag <STYLE> não é HTML e segue a seguinte sintaxe:

<STYLE TYPE="text/css">
/* comentario */
seletor { propriedade: valor;
propriedade: valor valor valor ...;...}
seletor, seletor {propriedade: valor;...}
</style>
Ou seja, as folhas de estilo CSS são especificadas como uma lista de nomes de
seletores com diversas propriedades especificadas pelos seus valores separados
2
por ponto-e-vírgulas, onde cada nome de seletor com propriedades e valores
comuns é separado por vírgula.
Os seletores podem ser uma tag ou uma classe de HTML (ou uma única tag
com o identificador especificado), podem-se também fazer diversas atribuições
ao mesmo tempo ou fazer atribuições sensíveis a certo contexto. Você pode
encontrar as especificações completas das CSS no site da W3E:
http://www.w3.org .
1.1. Seletor Múltiplo
É possível atribuir o mesmo valor às propriedades de várias tags de uma só

vez, colocando-as separadas por vírgulas antes da definição das propriedades.
No exemplo a seguir, todos os cabeçalhos H1, H2 e H3 e todos os textos
em negrito (bold), B, serão escritos com a cor azul:
<STYLE>
H1, H2, H3, B {color: blue; }
</STYLE>
1.2. Seletor Contextual
É possível indicar que as propriedades de uma determinada tag só serão

modificadas quando ela se encontrar em um determinado contexto, por
exemplo no interior de uma ou mais container tags.
Para indicar o contexto, simplesmente se escreve sua especificação antes das

chaves , { }. No exemplo a seguir, todos os textos em itálico, I , dentro de
cabeçalhos H1 (apenas estes) serão escritos com a cor verde, os demais textos
em itálico terão a cor padrão :
<STYLE>
H1 I { color: green;}
</STYLE>
2. Propriedades dos Estilos
Propriedades são atributos que definem a forma de visualização de uma

determinada tag ou de um grupo de tags. Elas podem ser divididas em 7
tipos, de acordo com sua função e nem sempre são aplicáveis a qualquer tag.
Os 7 tipos de propriedades são as que modificam:

• as fontes de caracteres,
• a cor ou a imagem de fundo da página usada,
• os espaçamentos,
• as características das listas,
• o alinhamento do texto,
• as características das bordas, e
• o posicionamento de camadas.
Há pequenas incompatibilidades entre a forma como os dois principais tipos

de navegadores (Explorer e Netscape) são afetados por algumas propriedades,
que podem, inclusive, até mesmo serem ignoradas.
3
A implementação de estilos por parte do Netscape é mais recente e nem tudo
que foi implementado no Explorer é reconhecido por esse navegador.
Os quadros a seguir mostram as propriedades de cada tipo, seus valores

possíveis e o(s) navegador(es) que as implementam. Será excluído o
posicionamento de camadas por estar fora do objetivo do nosso curso.
Tabela 8.1 - Propriedades relacionadas às fontes de caracteres

Propriedades Valores Possíveis Browser
font- lista de nome de fontes ambos
family
font-size tamanho, percentual, xx-small, ambos
x-small,small,medium,large,
x-large,xx-large,larger,smaller
font-style normal, oblique, italic ambos
font- normal, bold, bolder, lighter, ambos
weight 100, 200, 300, 400 (normal), 500,
600, 700, 800, 900
font- normal, smallcaps Explorer
variant
font family size style weight variant Explorer
color nome da cor, #RRGGBB ambos
text- none, overline, underline, ambos
decoration blink, line-through
text- capitalize, lowercase, none, ambos
transform uppercase
Tabela 8.2 - Propriedades relacionadas às cores e imagem de fundo da

página
background- tamanho (x y), percentual (x y), top, Explorer
position center, bottom, left, right
background- url da imagem ambos
image
background- transparent, nome da cor, #RRGGBB ambos
color
background- scroll, fixed Explorer
attachment
background- repeat, repeat-x, repeat-y, ambos
repeat no-repeat
background attachment color image position repeat Explorer
4
Tabela 8.3 - Propriedades relacionadas aos espaçamentos
Letter spacing Propriedades Valores Possíveis Browser
define o espaçamento letter-spacing tamanho Explorer
entre as letras do
texto. white-space normal, nowrap, pre Netscape
line-height tamanho, percentual, normal ambos
White space margin-top tamanho, percentual, auto ambos
define o espaçamento
em branco.
margin-bottom tamanho, percentual, auto ambos
margin-right tamanho, percentual, auto ambos
pre se refere à fonte margin-left tamanho, percentual, auto ambos
mono-espaçada. margin tamanho, percentual, auto Explorer
nowrap impede a padding-top tamanho, percentual, auto ambos
quebra de linha do padding-bottom tamanho, percentual, auto ambos
texto dentro da célula. padding-right tamanho, percentual, auto ambos
padding define as
padding-left tamanho, percentual, auto ambos
margens dentro da padding tamanho, percentual, auto Explorer
célula. word-spacing tamanho ambos
word spacing
float none, left, right ambos
refere-se ao clear none, both, left, right ambos
espaçamento entre
cada palavra do texto. Tabela 8.4 - Propriedades relacionadas às listas
list-style- URL, none explorer
image
list-style- circle, square, disc, lower- ambos
type alpha, upper-alpha, lower-roman,
upper-roman, decimal, none
list-style image type ambos
Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto

text- tamanho, percentual ambos
indent
text-align left, center, right, justify ambos
vertical- baseline, middle, sub, super, ambos
align text-bottom, text-top, percentual
5
Tabela 8.6 - Propriedades relacionadas às bordas
border-top- tamanho, thin, thick, medium ambos
width
border- tamanho, thin, thick, medium ambos
bottom-width
border-right- tamanho, thin, thick, medium ambos
width
border-left- tamanho, thin, thick, medium ambos
width
border-top cor width style Explorer
border-bottom cor width style Explorer
border-right cor width style Explorer
border-left cor width style Explorer
border-color cor, #RRGGBB ambos
border-width tamanho, thin, thick, medium ambos
border-style none, dashed, dotted, double, ambos
groove, inset, outset, ridge.
solid
border cor width style ambos
2.1. Valores das Propriedades
Como você deve ter notado nos quadros acima, há 5 formas distintas de
definição dos valores das diferentes propriedades:
• palavras-chave,
• tamanhos,
• percentuais,
• URL's, e
• cores.
Palavras-chave se referem ao uso de palavras predefinidas, com significados

definidos pelo contexto. Aparecem nas tabelas 8.1 a 8.6, na coluna "valores
possíveis" escritas com fonte mono-espaçada para facilitar sua
identificação. Elas podem expressar uma dimensão (small = pequeno), uma
relação (bolder = mais em negrito), um comportamento (auto =
automático, normal, both, left etc.), o nome de uma fonte de
caracteres (arial, times etc.) ou outros valores. Estas palavras podem
estar escritas em letras maiúsculas ou minúsculas (o que é chamado de case-
sensitive).
Quando o valor da propriedade for um tamanho, corresponde ao fornecimento

de um valor numérico, precedido ou não de sinal e seguido da indicação da
unidade desejada. As unidades válidas são: pixel (indicada pelo símbolo px),
polegadas (indicada pelo símbolo in), centímetros (indicada pelo símbolo
cm), milímetros (indicada pelo símbolo mm), pontos (indicada pelo símbolo
pt, sendo que um ponto eqüivale a 1 / 72 de uma polegada) ou picas (indicada
pelo símbolo pc, sendo equivalente a 12 pontos). Por exemplo, são tamanhos
possíveis: 1in, 1.5cm, -3pt, +0,25mm.
Uma propriedade tem valores percentuais se definida por um valor numérico

seguido do símbolo %. Este valor não é dinâmico e diz respeito apenas ao
6
momento em que o navegador for aplicar o estilo. Por exemplo: 120%.
URLs se referem à indicação de um endereço. A forma de indicar uma URL

nas folhas de estilo é diferente da utilizada em HTML, pois deve-se apresentar
o endereço entre parênteses e precedido das letras url. Ou seja, segue a
seguinte sintaxe: url(endereço). São, portanto, valores válidos de URL:
url(http://equipe.nce.ufrj.br /joao/home.html) e
url(foto.jpg).
Quando na coluna valores possíveis aparece “cor”, esta pode ser descrita por
até 3 formas:
• seu nome em inglês;
• a forma usada em HTML; e
• na forma rgb(valor,valor, valor).
As duas primeiras formas foram assunto na aula 4. Na primeira forma é

descrito o nome da cor em inglês. Na segunda, é usada a definição RGB em
hexadecimal precedida do símbolo # da linguagem HTML (isto é #RRGGBB).
A terceira forma é uma variação da segunda, onde não é necessário conhecer
como definir valores em hexadecimais pois a intensidade das cores vermelho,
verde e azul é definido através da sintaxe rgb(vermelho, verde,
azul) por valores numéricos decimais usuais.
No caso da forma da linguagem HTML, essa definição nas folhas de estilo não
pode estar entre aspas. Os valores de vermelho, verde e azul da última forma
podem aparecer definidos em valores absolutos correspondendo a números de
0 a 255 ou em percentagens. São, portanto, valores válidos de cor: yellow,
#FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%).
3. Compartilhando Estilos
É possível compartilhar estilos entre vários documentos HTML. Os estilos

devem estar contidos num arquivo com extensão css, que pode ser incluído
num documento por meio da tag <LINK> colocada em sua seção <HEAD>.
A utilização de um arquivo de estilo permite criar uma verdadeira

uniformização das páginas de um site. Qualquer modificação neste arquivo
modifica todas as páginas de uma só vez.
O exemplo a seguir mostra a sintaxe da tag <LINK> para incluir o arquivo

“estilo.css” num documento HTML:
<LINK REL=stylesheet TYPE=“text/css”
HREF=“estilo.css”>
O valor do atributo HREF indica o nome do arquivo de estilos e além dele é

necessário definir também os atributos REL e TYPE com os valores
mostrados no exemplo.
Um arquivo de estilos não é um arquivo HTML (no segundo módulo do curso

você entenderá melhor isso, já estamos quase lá!) , ou seja, não é necessário
nem se deve colocar os estilos dentro de uma tag <STYLE>.
7
4. Classes de Estilo
Com o que foi visto até o momento, ao definir o estilo de uma tag, sempre que
ela for utilizada no documento terá o aspecto determinado por este estilo.
Muitas vezes porém é desejável que uma tag tenha vários aspectos de acordo
com o local onde é utilizada.
É possível, portanto, criar diferentes estilos para uma tag criando várias
classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o
caracter ponto (‘.’) seguido de um nome para a classe.
O exemplo a seguir mostra uma definição aplicada a todos os cabeçalhos do

tipo <H1> (tipo e tamanho de fonte) e as definições de cor aplicáveis apenas
aos cabeçalhos <H1> pertencentes às classes vermelho (cor de texto
vermelha) e verde (cor de texto verde):
<style>
H1 { font-family: Arial;
font-size: 20pt;}
H1.vermelho { color: red;}
H1.verde {color: green;}
</style>
Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo
class, definindo como valor o nome da classe desejada. No exemplo a seguir, o
primeiro cabeçalho estará sujeito à definição de tamanho e tipo de fonte e será
escrito na cor padrão; o segundo e o quarto cabeçalho também estarão sujeitos
à definição de tamanho e tipo de fonte mas serão escritos na cor vermelha; o
terceiro, por sua vez, estará sujeito à definição de tamanho e tipo de fonte, mas
será escrito na cor verde:
<h1> Cabecalho normal</h1>
<h1 class=vermelho> Cabecalho Vermelho</h1>
<h1 class=verde> Cabecalho Verde</h1>
<h1 class=vermelho> Outro Cabecalho Vermelho</h1>
4.1. Classes Genéricas
As classes definidas no exemplo anterior só podem ser aplicadas a tags do tipo

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

class como mostra o exemplo a seguir:
<h1 class=verde>
Este é um cabeçalho verde
</h1>
<p class=verde>Este é um texto verde</p>
8
4.2. Pseudo-classes
A tag <A> tem algumas classes com nomes pré-definidos que são associadas a
estados assumidos por esta tag. Estes estados são descritos na tabela 8.7.
Tabela 8.7 - Estados da tag <A>

Pseudo-classe Descrição Browser
link Link que ainda não foi visitado ambos
active Link selecionado no momento pelo usuário ambos
visited Link que já foi visitado ambos
hover Link no momento em que o usuário passa o Explorer
mouse sobre ele
No caso da pseudo-classe, diferentemente de uma classe comum, o nome da

classe é separado do nome da tag no seletor pelo caracter ":".
Não existem pseudo-classes genéricas e, portanto, sempre é necessário indicar

o nome da tag. O exemplo a seguir define a cor azul para os links não visitados,
a cor vermelha e negrito para os links no momento em que o botão do mouse
está pressionado sobre o link, a cor verde e itálico para os links que já foram
visitados e a cor vermelho escura para quando o cursor do mouse passar sobre
o link (este último só funcionará para o Explorer, sendo ignorado se o
navegador for o Netscape):
<STYLE>
A:link {color:blue;}
A:active {color:red; font-weight:bold;}
A:visited{color:green;font-style:italic;}
A:hover {color:darkred;}
</STYLE>
5. Identificadores
Da mesma forma que uma classe modifica as definições feitas para uma tag, é
possível redefinir, em um determinado elemento do documento, as definições
de uma classe.
Isso é feito através da criação de um identificador no interior da tag

<STYLE>. O seletor de um identificador é um nome qualquer antecedido do
caracter ‘#’. Ao definir um atributo ID com o nome de um identificador numa
tag qualquer, esta tag tem seu aspecto modificado conforme o estilo definido
no identificador.
Se nesta tag também estiver definido o atributo classe, as propriedades

definidas no identificador têm prioridade sobre as definidas na classe. Muito
embora os navegadores normalmente não imponham restrições, um
identificador deve ser utilizado em apenas uma tag, criando uma instância
particular desta tag.
No exemplo a seguir, os três cabeçalhos serão desenhados com a fonte Arial

e o tamanho Grande, porém o primeiro será desenhado em verde (definição
da classe), o segundo em azul e o terceiro em amarelo (definições dos
identificadores):
9
<STYLE>
H1.grande {
font-family: arial;
font-size: large;
color: green;
}
#azul { color: blue; }
#amarelo { color: yellow; }
</STYLE>
...
<H1 class=Grande>
Grande e verde
</H1>
<H1 class=Grande id=azul>
Grande e azul
</H1>
<H1 class=Grande id=amarelo>
Grande e amarelo
</H1>
6. Estilos inline
Uma outra forma de redefinir o estilo de uma tag é através do atributo STYLE.
Este atributo pode ser colocado em qualquer tag e tem precedência sobre os
estilos definidos através dos atributos ID e CLASS.
O valor do atributo STYLE é uma string contendo propriedades e valores

separados por vírgulas, da mesma forma que é utilizado associado a um seletor
na tag <STYLE>. Esta forma é denominada “inline”.
No exemplo a seguir, usa-se esta forma para fazer o segundo cabeçalho herdar
da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor
definida no atributo STYLE:
<STYLE>
H1.grande {
font-family: arial;
font-size: xx-large;
color: green;
}
#azul {
font-size: x-large;
color: blue;
}
</STYLE>
...
<H1 class=grande> Muito grande e verde </H1>
<H1 class=grande id=azul STYLE=“color: red;”>
Grande, vermelho e com fonte Arial
</H1>
7. Tags <div> e <span>
Algumas vezes pode ser interessante modificar a forma de apresentação de um

trecho do texto que não está associado a nenhuma tag em especial. Nestes
casos, a linguagem HTML fornece duas tags que não têm nenhum
comportamento padrão especial: a tag <DIV> ... </DIV> e a tag
10
<SPAN> ... </SPAN>. O aspecto dessas tags pode ser determinado por
meio de estilos.
A única diferença entre estas duas tags é que a tag <DIV> causa,
necessariamente, uma mudança de linha antes e depois de sua utilização, ao
passo que a tag <SPAN> pode ser utilizada no meio de um parágrafo, sem
causar nenhuma quebra de linha.
A tag <DIV> pode ser utilizada para definir o estilo de vários parágrafos, sem
que seja necessário definir um a um o estilo das tags <P> destes parágrafos.
No exemplo a seguir, a tag <DIV> define um parágrafo de cor vermelha, no

meio do qual foi incluída uma palavra na cor verde:
<div style=“color: red;”>
Este é um paragrafo vermelho com um texto
<span style=“color: green;”>
verde
</span>
no meio
</div>
Estas duas tags têm uma grande importância em HTML 4 pois servem para
definir camadas (ou em inglês layers, o que está associado a posicionamento
dinâmico, um assunto importante para DHTML- Dynamic HTML).
Exercícios:
1. Utilize, nos exercícios 1 a 4 que usam o exemplo atividade da aula 1, as

possibilidades de definir o estilo por CCS que você aprendeu nesta aula. Faça
diversas versões do mesmo site, todas com o mesmo conteúdo, mas com as
aparências mais diversas possíveis de formato. Ficou mais fácil para você
agora manipular cada versão?
2. Atribua, no exercício anterior, as características de formatação a um arquivo

separado do anterior. Compare como fica a página agora. Associe o mesmo
arquivo de estilo a diversas outras páginas suas, padronizando suas aparências.
3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo.
<style type=“text/css”>
H1,H2 { color:blue;font-style:italic}
<--! elementos da classe aviso
tem aparencia especial -->
.aviso{
font-weight:bold;
background-color:yellow;
margin-left:1in;
margin-right:2cm;
border-color:red;
border-width:8px;
border-style:solid
}
<--! os tipos H1 e H2 na classe aviso estarao
centrados -->
.aviso H1, .aviso H2{text-align:center}
11
<--! define um elemento especial
:ID=“P23 -->
#P23 {
text-align:center;
text-transform:uppercase;
}
</style>
<H1>Exemplo de folhas de estilo em cascata
</H1>
<div class=“aviso”>
<H2>Cuidado</H2>
Esteja atento! Note que chamou-se a atencao com um
texto em negrito e cores brilhantes. Note ainda que o
titulo "Cuidado" aparece centrado em italico e azul.
</div>
<p ID=“P23”>
Este paragrafo ficou centrado<br>
e em letras maiusculas.<br>
<span style=“text-transform:none”>
Aqui explicitamente usou-se um estilo inline para se
sobrepor as maiusculas.
</span>
</p>
Após entender o que elas fazem no arquivo, inclua-as na posição adequada.

Depois modifique o documento de modo que os formatos fiquem em um
arquivo separado. Inclua no seu computador ambas as formas e compare-as
(veja o resultado, você mesmo avaliará se ficaram idênticas).
4. Associe o mesmo arquivo de estilo às páginas do exercício 2 e 3. Faça o

mesmo com diversas outras páginas suas, padronizando suas aparências. As
mudanças não ficaram mais fáceis agora!
Resumo:
Nesta aula você aprendeu a usar CSS em HTML, ou seja, aprendeu como
estruturar sua página para ter sua formatação (a forma como ela aparece)
separada do conteúdo do documento. A vantagem desta estratégia é que agora
um artista gráfico pode modificar o arquivo CSS e propiciar uma aparência
melhor, sem tocar em seu código. Pois afinal um layout agradável sempre atrai
mais a atenção dos visitantes, possibilita que eles encontrem facilmente o que
desejam ver em sua página e voltem com mais freqüência ao site! Essa
aparência pode ser associada a um grupo inteiro de páginas e modificada de
tempos em tempos com muita facilidade. Este é um elemento importante para
você reduzir seu tempo de manutenção dos sites. O que abre para você
caminhos para ser um construtor profissional de páginas Web!
Auto-avaliação:
Esta é uma das aulas mais complexas, ela apresentou um conjunto muito
grande de novas informações. Você realmente só ficará à vontade com elas
depois de concluir a execução de um razoável número de atualizações de
páginas usando CSS. Talvez o mais importante neste ponto seja o
conhecimento dos caminhos que ela lhe abre e isso você pode antever
executando bem os exercícios.
12
Bibliografia auxiliar Aula 9: Elementos da Linguagem JavaScript
para o segundo
módulo:
Bem-vindo ao segundo módulo do nosso curso! Nele você aprenderá como incluir
Goodman, Danny programas, ou scripts, em suas páginas Web. Este módulo será todo dedicado à
JavaScript, a Bíblia , linguagem JavaScript. E nessa aula você aprenderá o que é JavaScript, o que pode
Rio de Janeiro:
Editora Campus, fazer com ela, e como inclui-la nas suas páginas HTML.
2001.
Moncur, Michael, Objetivos:

Aprenda em 24 Nesta aula você aprenderá os fundamentos de JavaScript e verá:
horas JavaScript 1.3,
Rio de Janeiro: - os tipos e as versões do JavaScript;
Editora Campus, - como incluir código na página HTML (tag script);
1999. - a estrutura da linguagem;
- suas constantes e variáveis;
Flanagan, David , - a concatenação de strings.
JavaScript the
definitive guide,
Cambridge:
O’Reilly, 1988. Pré-requisitos:
As aulas 1 a 3 e a aula 7 do módulo anterior.
Negrino, T. e
Smith,D., Java-
Script para a WWW,
Rio de Janeiro:
Editora 1. Introdução à JavaScript
Campus,2000.
JavaScript, que aprenderemos neste módulo, como HTML, é uma linguagem
Osmar Sila, Java interpretada, mas, diferentemente de HTML, é uma linguagem de programação
Script, Guia Prático, que inclusive tem características rudimentares de Orientação a Objetos, O.O. , e
Editora Erica, 2000.
programação dirigida por eventos (no decorrer do módulo, você entenderá
Documentação da melhor o que estas características acrescentam à linguagem).
Netscape:
http://developer. Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convênio
netscape.com/docs/ entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de
manuals/ nome às vésperas do lançamento por questões de marketing. O código fonte fica
communicator/jsref/
index.htm .
embutido na página HTML e é interpretado pelo navegador.
Documentação da Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver
Microsoft: com Java. Além de alguma semelhança sintática e do fato de que, tanto Java
http://msdn. quanto JavaScript, podem fornecer um conteúdo executável pelos navegadores
microsoft.com/ Web, a principal relação entre as duas linguagens vem de sua origem comum: as
scripting/JScript/doc/
Jstoc.htm.
linguagens C e C++.
Na linguagem Java, o código fonte é compilado para um código intermediário,

que pode ser executado em qualquer máquina que possua um interpretador Java
(não necessariamente o interpretador embutido no navegador). Além desta
diferença, há muitas outras diferenças em termos de sintaxe, abrangências e
objetivos das duas linguagens.
Com JavaScript é possível manipular imagens embutidas na página; ler e escrever

o estado do cliente em Cookies; interagir com o usuário; alterar características do
documento; e controlar o comportamento do navegador fazendo este:
• carregar um novo documento;
1
• retornar para a página anteriormente visitada;
• abrir/fechar janelas;
“Cookie” é o termo
usado (inicialmente • exibir páginas diferentes de acordo com o browser do usuário;
pelo Netscape) para • controlar o conteúdo de formulários HTML.
descrever uma
pequena quantidade de JavaScript, no entanto, não possibilita escrever ou ler arquivos; não possui
dados armazenados
pelo cliente de forma capacidade de desenho, não suporta estabelecer conexões em rede, nem oferece
temporária ou possibilidades de processamento em segundo plano ou multitarefa
permanente. Cookies (multithreading).
são transmitidos de e
para o servidor e
permitem que a página 2. Tipos e Versões de JavaScript
ou o site “lembre” de
coisas sobre o cliente,
Existem variantes da linguagem dependendo do contexto onde se embute o
como por exemplo:
que o usuário já visitou JavaScript. Algumas destas são as chamadas Client-Side JavaScript ou "no lado
antes o site, já se do cliente" e Server-Side JavaScript ou "no lado do servidor".
registrou ou expressou
anteriormente alguma Em nosso curso abordaremos apenas a forma executada no cliente (client-side).
preferência sobre o
Nesta forma, que é a variante mais comum, quando a maioria das pessoas se
layout da página.
JavaScript permite ler referem à JavaScript está se referindo a esta forma, o interpretador se encontra
e escrever valores nos embutido no navegador Web. A forma no lado do servidor (server-side) é
cookies, podendo gerar utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta
HTML baseado nos forma, diferente da client-side, é possível ler e escrever arquivos e bancos de
valores descritos neles.
dados no servidor.
Como em HTML, há diferenças na linguagem JavaScript em função do tipo de

navegador onde o programa será interpretado. O nome JavaScript é propriedade
da Netscape, a implementação da Microsoft da linguagem é oficialmente
denominada JScript. Versões de JScript são mais ou menos compatíveis com as
versões equivalentes do JavaScript. A tabela 9.1 mostra essas versões.
Tabela 9.1 - Versões de JavaScript e navegadores

Versões no Netscape Versões no Explorer
Browser Javascript Browser JScript
Netscape 2.0 Javascript 1.0
Netscape 3.0 Javascript 1.1 Explorer 3.0 JScript 1.0
Netscape 6.0 Javascript 1.5
3. Execução de Programas JavaScript

Os programas JavaScript são executados na ordem em que aparecem na página e
não é possível fazer referência a elementos HTML que ainda não foram definidos.
Há três formas de incluir um código JavaScript em uma página:

• através da tag <SCRIPT> ... </SCRIPT>.
• através da seleção de um link.
• através da associação a um evento.
2
Na primeira forma, a tag <script> pode aparecer em qualquer lugar da página,
inclusive na área de cabeçalho (dentro da tag <HEAD> ... </HEAD>).
Quando incluída na área de cabeçalho, o programa é executado antes que a página
seja totalmente carregada. As linhas abaixo exemplificam esta forma:
<script language=“Javascript”>

</script>
Quando esta forma de JavaScript for usada é possível utilizar a tag <NOSCRIPT>
... </NOSCRIPT> para exibir uma alternativa ao código JavaScript em
navegadores que não saibam executá-lo.
A inclusão do código entre comentários (tag ) é

recomendável para que os navegadores que não conheçam JavaScript não tentem
exibir o código.
É possível também não escrever o código diretamente na página, colocando-o em

um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do
arquivo de onde virá o código. Por exemplo:
<script language=“Javascript” src=“arquivo.js”>
</script>
Na segunda forma, o link ao ser selecionado promove a execução do programa:

<a href=“javascript: …”> .... </a>
Quando associada a um evento a sintaxe usada é:

<tag-html onEvento=“ … “>
No exemplo atividade do final da aula, você terá a oportunidade de ver com mais
detalhes estas formas.
4. Estrutura Léxica da Linguagem
A estrutura léxica de JavaScript é uma linguagem case sensitivity (como C e diferente de HTML): as
uma linguagem de letras minúsculas (lowercase) são diferenciadas das maiúsculas (uppercase). Isso
programação é o significa que as palavras-chave da linguagem, as variáveis, os nomes de funções
conjunto de regras ou qualquer outro identificador deve sempre ser escrito da mesma forma. A
elementares que
especificam como palavra-chave break, por exemplo, se for escrita Break ou BREAK representará
você escreve outra coisa e não mais a palavra-chave.
programas com ela.
Definindo coisas Algumas exceções a esta regra são, entretanto, encontradas na forma executada no
como a aparência dos cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades
nomes, as formas
usadas para executados no cliente são case-insensitive. Outro exemplo são as folhas de estilo
comentários, e como JavaScript executadas no cliente no Navigator 4, que permitem a especificação de
os comandos são estilos por tag HTML (projetadas com o propósito de serem case-insensitive).
separados uns dos
outros. Os espaços em branco, as tabulações (tabs) e as mudanças de linha (newlines)
entre os comandos são ignorados. Você pode assim usar os espaços e as mudanças
3
de linha livremente ou de uma maneira consistente em seu programa de modo a
torná-lo fácil de entender.
O caracter ponto e vírgula (;) deve ser usado como limitadores, após cada
comando. Esta é a mesma forma de limitar comandos de C, C++ e Java. Mas em
JavaScript você pode omiti-los se os comandos se encontrarem em linhas
diferentes. Por exemplo, nas linhas abaixo você, poderia tê-los omitido.
a=3;
b=5;
Mas o primeiro ";" não poderia ser omitido se você escrevesse ambas as
atribuições na mesma linhas, como:
a=3;b=5;
Não é um bom hábito deixar por conta da linguagem, onde os comandos devem
ser separados. O melhor é você se acostumar a sempre usá-los. Saber que a
linguagem JavaScript permite que dois comandos sejam separados por linhas,
automaticamente inserindo ponto e vírgula por você, evita alguns mal-entendidos.
A linguagem JavaScript possui duas formas de incluir comentários em meio às

instruções (herdadas das linguagens C e C++):
• //
• o conjunto: /* ... */
As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador
ignore todos os demais caracteres até o fim da linha.
A seqüência /* (barra seguida do asterisco) faz com que o interpretador ignore

todos os caracteres (inclusive o de mudança de linha) até encontrar a seqüência
*/ (asterisco seguido da barra). Este tipo, no entanto, não pode ser “aninhado”, isto
é, não se pode ter outro comentário do mesmo estilo no interior. As linhas que
seguem mostram isso.
// essa linha e comentario

/* esta tambem
/* e esta
por enquanto tambem */
mas o final da linha anterior
confundiu tudo e as tres ultimas
nao sao mais comentarios */
Além do estilo C e C++, a forma client-side reconhece a seqüência de abertura de

comentários de HTML: . Há uma razão para isso: em programas JavaScript, se
a primeira linha começar com , todo o
programa é contido dentro de um comentário HTML e é ignorado pelo browser
que não suportar JavaScript. Desde que a primeira linha comece com 
</script>
</head>
<body bgcolor=darkseagreen>
<h1>
Exemplo de funcoes matematicas</h1>
<hr>
<table width=100%>
<tr align=center>
<td>
<h2>Potencias</h2>
9

</script>
</td>
<td>
<h2>Raizes</h2>

</script>
</td>
</tr>
</table>
</body>
</html>
10
Figura 14.2 - Tela gerada usando o código que
exemplifica os elementos da tabela 14.4
3. O Objeto Date
O objeto Date permite manipular datas e horários, como por

exemplo verificar a data atual ou determinar a diferença entre
G.M.T. duas datas. Este objeto precisa ser criado através do operador
abreviatura new. Há 4 formas de criar uma data:
de
Greenwich
Mean Time • new Date();
(hora média • new Date(milisegundos);
de • new Date(datastring);
Greenwich). • new Date(ano,mes,dia,hora,min,seg,ms).
Na primeira forma, sem parâmetros, o construtor Date()

cria um objeto e atribui a ele a data atual do sistema:
dataHoje = new Date();
Quando um valor numérico é passado como parâmetro, a data

armazenada é obtida a partir do número de milisegundos
entre a data atual e a hora zero (meia-noite) de GMT em 1o.
janeiro de 1970:
new Date(5000)//cria uma data que

//representa 5 segundos de 1/1/1970.
Na terceira forma, uma string com a data, cujo horário é

opcional, é passada como parâmetro. Esta string é geralmente
11
dependente do ambiente, devendo ser uma das formas aceitas
para datas no formato IETF. Esta é uma padronização para
uso em e-mails e outras comunicações na Internet. Pode ser
que você já tenha observado esta string de datas, nas quais os
valores se parecem com:
"Wed,15 Feb 2007 17:41:46 - 0400"
"February 15,2007 17: 41:46"
"1 15, 2007 17:41:46"
Na última forma, se forem passados de 2 a 7 parâmetros, é

suposto que o tempo está sendo especificado usando o tempo
local, não o tempo universal UCT - Universal Coordinate
Time ou GMT. Podem ser passados até 7 valores, pois todos,
menos o campo correspondente ao ano e mês, são opcionais.
Assim, a data pode ser estabelecida através do ano, mês e dia:
data = new Date(2007, 1, 15);
ou através do ano, mês, dia, hora, minuto, segundo,
milisegundos:
data = new Date(2007,1,15,17,41,46,400);
Neste último formato, o ano deve se apresentar em 4 dígitos,

os meses como um número inteiro entre 0 (janeiro) e 11
(dezembro), os dias do mês como inteiros entre 1 e 31, as
horas em inteiros de 0 (meia-noite) a 23, os minutos e
segundos em inteiros de 0 a 59, e os milésimos de segundos
em inteiros de 0 a 999.
O objeto Date não tem nenhuma propriedade, mas tem uma

série de métodos que permitem a manipulação de cada parte
de uma data em separado. Depois do objeto Date ter sido
criado usando qualquer uma das 4 formas acima, pode ser
usado com os métodos descritos na tabela 14.5. A maioria
destes têm a mesma função em duas formas, uma para obter a
data e o tempo e outra para defini-los. No primeiro caso, os
métodos iniciam com get (obtenção) e no segundo com set
(atribuição).
12
14.5 - Métodos do objeto embutido Date
getDate()/ Obtém ou define o dia do
setDate() mês (de 1 a 31).
getDay() Obtém o dia da semana (de
0 a 6).
getFullYear()/ Obtém ou define o ano com
setFullYear() 4 dígitos.
getHours()/ Obtém ou define a hora de
setHours() um objeto Date (de 0 a 23).
getMilliseconds() Obtém ou define o campo
setMilliseconds() milissegundos (hora-local).
getMinutes()/ Obtém ou define o minuto
setMinutes() (entre 0 e 59).
getMonth()/ Obtém ou define o mês (de
setMonth() 0 a 11).
getSeconds()/ Obtém ou define os
setSeconds() segundos (entre 0 e 59).
getTime()/ Obtém ou define o nº de
setTime() milissegundos desde
01/01/70.
getTimezoneOffset() Obtém o fuso horário em
minutos entre a hora local e
GMT.
getUTCDate()/ Obtém ou define o dia do
setUTCDate() mês ( de 1 a 31) quando
Date estiver em UTC
getUTCDay() Obtém o dia da semana (de
0 a 6) quando Date estiver
no tempo universal ou UTC
getUTCFullYear() Obtém ou define o ano com
setUTCFullYear() 4 dígitos quando Date
estiver no tempo em UTC.
getUTCHours()/ Obtém ou define a hora (de
setUTCHours() 0 a 23) de um objeto Date
em UTC.
getUTCMilliseconds() Obtém ou define o campo
setUTCMilliseconds() milissegundos quando
Date estiver em UTC.
getUTCMinutes() Obtém ou define o campo
setUTCMinutes() minutos em UTC.
getUTCMonth() Obtém ou define o campo
setUTCMonth() milissegundos quando
Date estiver em UTC.
13
14.5 - Métodos do objeto embutido Date. (continuação)
getUTCSeconds() Obtém ou define o campo
setUTCSeconds() segundos em UTC.
getYear()/ Obtém ou define o ano em 2
setYear(year),year dígitos. Esta em desuso depois
pode ter 2 ou 4
digitos, se tiver 2 do ano 2000, melhor usar as
os primeiros serão versões FullYear.
19
parse(datastring) Calcula o tempo em
milissegundos entre a
datastring fornecida e a
zero hora de 1/1/1970.
toGMTString() Converte uma data para o
formato datastring usando
o horário GMT.
toLocaleString() Converte uma data para o
formato datastring usando
o fuso horário local.
toString() Retorna Date como uma string
legível no fuso local.
toUTCString() Retorna o objeto Date
convertida em uma string
legível em UTC.
UTC(ano,mes,dia,h Converte uma data para
ora,min,seg,ms) milissegundos desde o tempo
zero: 1/jan/1970 0:0:0 .
valueOf() Representação numérica da
data. Mesmo número de
milissegundos de getTime .
O código abaixo exemplifica o uso de alguns destes métodos.

<HTML>
<HEAD>
<TITLE>Usando o objeto Data</TITLE>
</HEAD>
<BODY BGCOLOR=lightgreen>
<SCRIPT language="Javascript">
mes = new Array(12);
mes[0] = "janeiro";
mes[1] = "fevereiro";
mes[2] = "março";
mes[3] = "abril";
mes[4] = "maio";
mes[5] = "junho";
mes[6] = "julho";
mes[7] = "agosto";
mes[8] = "setembro";
mes[9] = "outubro";
mes[10] = "novembro";
mes[11] = "dezembro";
14
semana = new Array("domingo",
"segunda", "terça", "quarta",
"quinta", "sexta", "sábado");
var hoje = new Date();
//Obtém a data de hoje
var AnoAtual=hoje.getFullYear();
var MesAtual=hoje.getMonth();
var DiaAtual=hoje.getDate();
document.write("<p>Hoje é " +
semana[hoje.getDay()] + ",<br>" +
DiaAtual+" de " + mes[MesAtual] +
" de " + AnoAtual+"</p><hr>");
// O mes é de 0 a 11
var AnoNatal=AnoAtual;
// vejo se ja passou o Natal no ano
if (MesAtual==11){
if (DiaAtual>25) {AnoNatal++;}};
//dado para o proximo Natal!
var data = new Date(AnoNatal,11,25);
// Número de segundos por dia
var nsPorDia = 24*60*60*1000;
var ndias=(data.getTime()-
hoje.getTime()) / nsPorDia;
ndias = Math.round(ndias);
natal=new String(" dias <br> para o
<br> N A T A L");
document.write("<center><p>Faltam " +
ndias+natal.bold().fontsize("+").
italics().fontcolor("red")+" !
</center> </p> <hr> ");
</SCRIPT>
</BODY>
</HTML>
Este código gera a página mostrada na figura 14.3.
Figura 14.3 - Tela gerada usando o código que

exemplifica os elementos da tabela 14.5.
15
Para entender exatamente o que cada método de Date faz e
como usá-lo, observe sua descrição na tabela 14.5, depois
empregue-o no trecho de código acima e utilize
document.write para observar o resultado obtido com
sua execução. Por exemplo, para ver como é a datastring
gerada pelo método toString(). Inclua as linhas
seguintes no final do código anterior antes de </SCRIPT>:
document.write(" <p> Hoje é: " +
hoje.toString() + "</p> <hr> ");
Este é o último dos 4 objetos predefinidos ou embutidos da

linguagem. Como falamos na aula anterior, há ainda outros
tipos de objetos em JavaScript. Um destes são os objetos do
browser que veremos na próxima aula.
Exercícios:
1. Utilize a estrutura do exemplo de Array para testar todas

as outras formas de inicialização apresentadas. Isto é, bata o
exemplo até o trecho onde é exibido o Array original, ou
seja até:
//exemplo do metodo
//array.concat(valores,...)
e rode o código verificando os valores do outros arrays do
exemplo:.
Vetor=new Array(34,23,1,45,9,10);
VetorCopy=[34,23,1,45,9,10];
vetorBase.....
Visualize em cada caso os resultados que terá em um
navegador.
2. Inclua o restante do código do exemplo Array e o rode

com cada um dos novos arrays. Tente prever em cada um dos
casos o que cada método de array estará escrevendo na tela
do seu navegador.
3. Utilize a estrutura do exemplo de funções matemáticas

para testar as outras formas de cálculo. Por exemplo, faça
uma tabela de logaritmos e de cosenos de diversos ângulos.
Visualize em cada caso os resultados que terá abrindo uma
página com o código em um navegador.
4. Inclua a possibilidade de cronometrar o tempo no código

que exemplificou o uso de funções, empregando os métodos
do objeto Date. Cronometre também o tempo que é gasto
para gerar suas tabelas do exercício 1 (basta fazer a diferença
de tempo do sistema no início e no fim).
16
Resumo:
Nesta aula você conheceu em detalhes as características dos

objetos predefinidos String, Math e Date da
linguagem JavaScript. Na próxima aula continuaremos neste
assunto estudando os objetos do browser.
Auto-avaliação:
Você concluiu com facilidade os exercícios e entendeu as

diversas propriedades dos objetos novos? Se o uso de alguma
propriedade não ficou muito claro, não se preocupe, você
sempre pode procurar as tabelas e ver como funcionam antes
de usá-las em um programa! O mais importante, por
enquanto, é saber que eles existem. Continuaremos vendo
objetos e o assunto da próxima aula é realmente muito
importante para um bom programador em client-side
JavaScript: como funciona cada janela do navegador ou cada
frame dentro da janela.
17
Aula 15: Os objetos do navegador
Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora

detalhes sobre a hierarquia dos objetos de window, que funciona como objeto
global. Depois você aprenderá dois comandos novos e detalhes dos objetos
location e history.
Objetivos:
Aprender:
- a hierarquia dos objetos
- os comandos with e for...in
- as características e métodos do objeto location
- as características e métodos do objeto history
Pré-requisitos:
As aulas 1 e 2 são importantes para a seção que estuda o objeto location. A
aula 13, na seção que introduziu os conceitos de objeto. A aula 12, onde são
explicados os conceitos de variáveis globais.
1. Objetos do browser
Os objetos do browser são criados pelo próprio browser de forma a refletir
características do navegador e da página em exibição. Há dois objetos básicos:
navigator e window.
O objeto navigator representa o próprio navegador e através dele é possível

controlar o browser e obter informações sobre suas características. O objeto
window representa uma janela do browser e contém nele todos os elementos da
janela.
Já falamos que quando o interpretador da linguagem inicia, uma das primeiras

coisas que faz, antes de executar qualquer código de JavaScript, é criar um
objeto global. O objeto global está no topo da cadeia de escopo. As
propriedades deste objeto global são as variáveis globais dos programas
JavaScript. Quando você define uma variável global, o que está realmente
fazendo é definir uma propriedade do objeto global. Além disso, todas as
funções predefinidas e propriedades do ambiente JavaScript também são
propriedades do objeto global.
1
Na forma client-side da linguagem, que é o objetivo desse nosso curso, o
objeto window serve como objeto global para todo o código contido na janela
do navegador que ele representa. O objeto window define propriedades e
métodos que permitem manipular a janela do browser. Ele também define
propriedades que referem a outros objetos, como as propriedades document
(do objeto Document). Há ainda duas propriedades que referenciam a si
mesmas (auto-referenciais): window e self. Todas as variáveis globais são
definidas como propriedades do window.
2. Hierarquia dos Objetos
Acabamos de ver que window é o objeto principal na forma client-side de

JavaScript e quase todos os outros objetos do browser podem ser acessados
através dele seguindo uma cadeia de propriedades. Esta cadeia é formada por
objetos contidos no objeto window, que por sua vez contém outros objetos
numa relação hierárquica. Neste sentido, pode-se dizer que o objeto window
está no topo da hierarquia.
A figura abaixo mostra a hierarquia de objetos dentro de window, onde cada

objeto ligado a um objeto acima representa uma relação de “contido em”.
Figura 15.1 - Hierarquia dos objetos de window
O esquema acima mostra que dentro do objeto window, na forma de

propriedades, encontramos os objetos history, location, document
e status. Para se ter acesso a qualquer um deles é necessário fazer uso do
operador ponto ("."). Veja a sintaxe abaixo:
window.history.back();
window.location = “http://www.cederj.gov.br”;
window.document.write("<H1>Seu " +
"Site<H1>");
window.document.forms[0].text =
"as vezes as coisas podem " + "ficar bem
2
complexas";
Como a cadeia de objetos conectados pode ficar bem longa, por uma questão
de simplificação, JavaScript permite referenciar os objetos internos a window
sem citar a própria window. Assim, é possível reescrever as linhas anteriores
como:
history.back();
location = “http://www.cederj.gov.br”;
document.write(“<H1>Seu Site</H1>”);
document.forms[0].text =
"as vezes as coisas podem " +
"ficar bem complexas";
Já deve ter dado para notar que entender a hierarquia e que objetos estão
contidos em outros é crucial para uma programação bem-sucedida. Na figura
anterior mostrou-se só algumas propriedades de alguns objetos. A maioria dos
objetos tem mais propriedades que as mostradas ali.
Para melhor compreender a hierarquia de objetos dentro do window é melhor

observar um exemplo real. Observe as seguintes linhas de código:
<HTML>
<HEAD>
<TITLE>Exemplo de Hierarquia</TITLE>
</HEAD>
<BODY bgcolor=white>
<CENTER><IMG SRC="seuemb.gif"></CENTER>
<FORM>
<TABLE>
<TR>
<TD>Nome:</TD>
<TD><INPUT TYPE=TEXT NAME="nome" SIZE=40
VALUE="Fulano Sicrano"></TD></TR>
<TR>
<TD>E-mail:</TD>
<TD><INPUT TYPE=TEXT SIZE=40 VALUE=
"fulano@qualquer.coisa.br"></TD></TR>
<TR>
<TD>Href do link:</TD>
<TD><INPUT TYPE=TEXT SIZE=40></TD></TR>
<TR>
<TD>Src da imagem:</TD>
<TD><INPUT TYPE=TEXT SIZE=40></TD></TR>
</TABLE>
<BR><INPUT TYPE=BUTTON Name=botao Value="Pressione">
</FORM>
<CENTER>
<IMG SRC="0.gif" height=6>
<P><A HREF="http://www.faperj.br">outros
links</A></P>
</CENTER>
document.forms[0].elements[2].value =
document.links[0].href;
3
document.forms[0].elements[3].value =
document.images[0].src;
document.write("O nome que aparece “ +
“no campo nome do formulário é " +
document.forms[0].elements[1].value);
texto = prompt("Qual texto deve “ +
“aparecer no botão ? ");
document.forms[0].elements[4].value = texto;
</SCRIPT>
</BODY>
</HTML>
Estas linhas produzem uma página como a mostrada na figura 15.2.
Figura 15.2 - Página gerada e os diversos níveis dos seus componentes
Esta página tem um objeto window com os elementos mostrados na figura 15.3.
Figura 15.3 - Elementos da página exemplo
O objeto document, como pode ser observado, tem um array de imagens, um

de formulários e um de links. O número de elementos de cada um destes tipos
contidos na janela indica o número de elementos de cada array. Assim, a
página do exemplo contém duas imagens e o array imagens contém dois
objetos, um para cada imagem numerada de acordo com a ordem que aparece
4
na página. O formulário por sua vez também pode ter diversos elementos, onde
cada elemento pode ser um dos elementos de interação possíveis de pertencer a
um formulário. No formulário do exemplo das figuras 15.2 e 15.3 tem-se um
array de 5 elementos, todos <input> , 4 do tipo text e o último do tipo
button.
3. Comando with
Neste momento torna-se necessário introduzir um novo elemento que facilita a
manipulação dos objetos, permitindo uma economia de digitação quando se
deseja referenciar várias propriedades e métodos de um mesmo objeto. O
comando with é usado para temporariamente modificar a cadeia de escopo.
Ele tem a seguinte sintaxe:

with ( objeto ) comandos
A sua função é adicionar objeto para a frente da cadeia de escopo, executar

os comandos e então re-estabelecer o estado original da cadeia de escopo.
Ao indicar um objeto entre os parênteses, os métodos e propriedades dentro das

chaves vão ser considerados como pertencentes ao objeto indicado (se for
possível). Assim, no exemplo anterior, no lugar do texto que está escrito entre
as tags <SCRIPT....>...</SCRIPT>, é possível escrever:
with(document){
forms[0].elements[2].value=links[0].href;
forms[0].elements[3].value=images[0].src;
write("O nome que aparece no campo " +
"nome do formulário é " +
forms[0].elements[0].value +
"cujo e-mail é:" +
forms[0].elements[1].value);
texto = prompt("Qual texto deve " +
"aparecer no botão ? ");
forms[0].elements[4].value = texto;
}
Este comando é especialmente útil no caso de encadeamentos maiores de

objetos, como:
with(document.forms[0].elements[1]){
value = "Fulano da Tal";
name = "Nome";}
Mas é importante dizer que o código usando with roda mais devagar que um
equivalente sem with, além de poder em alguns casos ser de difícil
entendimento e ocasionar má interpretação.
Observe que uma outra maneira possível de economizar digitalização seria

criar variáveis, no caso acima esta forma legítima de economizar código
poderia ser reescrever as linhas anteriores como:
var elemento=document.forms[0].elements[1];
elemento.value="Fulano de Tal";
5
elemento.name="Nome";
4. Comando for…in
O comando for tem uma outra sintaxe diferente daquela que vimos em um
capítulo anterior: for(...;...;...). Esta outra sintaxe simplifica a
manipulação e permite percorrer todas as propriedades de um objeto. Esta
sintaxe é:
for ( variável in objeto )
comandos
Nesta sintaxe variável pode ser o nome de uma variável, um elemento de

um array ou uma propriedade de um objeto (ou seja, alguma coisa possível de
estar no lado esquerdo de uma expressão de atribuição). objeto é o nome de
um objeto ou uma expressão que pode ser equivalente a um objeto, e como
sempre comandos representa um comando único ou um grupo de comandos
em bloco.
O comando for...in proporciona um meio de percorrer em loop as

propriedades de um objeto. O corpo do comando é executado uma vez para
cada uma das propriedades do objeto. Antes do corpo do loop ser executado, o
nome de uma propriedade do objeto é atribuída à variável como uma
string. Dentro do corpo do loop, você pode usar a variável para observar o
valor da propriedade do objeto usando o operador[ ].
É possível através do for recuperar, um a um, os nomes das propriedades e,

posteriormente, acessá-las utilizando o objeto como um array. O laço a seguir
imprime na página cada uma das propriedades do objeto navigator:
for (prop in navigator)
document.write(prop + “ = ” +
navigator[prop] );
Enquanto que as linhas:

primElem=document.forms[0].elements[0];
for (i in primElem)
document.write("<br>" + i + "= " +
primElem[i]);
imprimem todas as propriedades do primeiro elemento de

document.forms[0].
O loop for/in não especifica a ordem com que as propriedades do

objeto serão atribuídas à variável. As propriedades dos objetos
definidas como não enumeradas (como muitas propriedades embutidas e
todos os métodos embutidos) não podem ser examinadas pelo for/in.
5. Objeto location
O objeto location contém informações relacionadas a URL corrente. Ele
representa e controla a localização do navegador, sendo armazenado na
propriedade location do objeto window.
6
As propriedades de location são todas do tipo read/write e strings.
Referem-se à string da URL e suas várias partes, que foram vistas nas aulas 1 e
2 e têm o seguinte formato geral:
protocol://hostname:port/pathname?search#hash
A propriedade mais importante deste objeto é a string que contém o endereço

completo da URL corrente: propriedade href. Cada pedaço da URL também
pode ser referenciada individualmente através das propriedades: protocol,
host, hostname, port, pathname, hash e search (dados de
um formulários enviados pelo método get).
Ao invés de utilizar location ou location.href para substituir a URL

corrente por uma completamente nova, você pode modificar só uma porção da
URL corrente atribuindo strings para a propriedade do objeto location que
você quer modificar. Por exemplo, se você quiser mudar para uma certa
localização dentro da mesma página pode usar só a propriedade hash com o
nome da âncora do ponto desejado.
As propriedades e os métodos do objeto location encontram-se nas tabelas

15.1 e 15.2 que seguem. Para entender melhor estas propriedades, considere a
seguinte URL fictícia:
"http://www.ic.uff.br:1234/~aconci/CV.html?query=Java
Script&matches=66#results"
15.1 - Propriedades do objeto do browser location

hash Especifica a âncora na string da URL corrente, deve incluir o
símbolo # inicial, na URL exemplo seria #results .
host Combina as partes da URL correspondentes ao hostname e a
port. Na URL exemplo seria www.ic.uff.br:1234 .
hostname Parte da URL correspondentes ao hostname, no exemplo:
www.ic.uff.br
href Especifica o texto completo da URL:
http://www.ic.uff.br:1234/~aconci/CV.html?JavaScri
pt#results
pathname Parte da URl, correspondente ao path: /~aconci/CV.html
port Parte da URL correspondente à port. No exemplo é: 1234
protocol Especifica a parte da URL correspondente ao protocolo, inclui
":". No exemplo é http:
search Parte da URL correspondente à consulta (query), inclui "?". No
exemplo seria: ?query=JavaScript&matches=66
Este objeto contém dois métodos. O método reload() permite recarregar a

página corrente a partir do servidor Web. O método replace() carrega e
mostra uma URL especificada sem incluir um novo dado na lista de páginas
visitadas, ou seja, substituindo a página antiga pela nova na lista history do
browser. (Esta lista ficará mais clara depois que estudarmos o objeto
History, na seção 6 desta aula). Como você deve ter observado, este
método não tem o mesmo efeito de apenas definir a propriedade location
ou location.href com um novo endereço de site. Depois de usar
replace() não será possível retornar à página anterior usando o botão Back
7
do seu browser.
15.2 - Métodos do objeto do browser location

Método Significado
reload() Recarrega o documento da cache ou do servidor.
reload(booleano)
replace(url) Substitui o documento corrente pelo especificado no
parâmetro url tomando a sua posição na seção
history do browser.
O método reload pode ser usado com ou sem parâmetros. Se o argumento

for omitido ou for o booleano false, o método só realmente recarrega uma
nova página do servidor se ela tiver sido modificada desde a última vez que foi
visitada, caso contrário carrega a cópia do cache. Se o argumento for true
ela sempre será recarregada do servidor, não sendo consultado o cache do
usuário.
6. Objeto history
A propriedade history (histórico) do objeto window se refere ao objeto
history da janela ou frame: window.history ou frame.history. O
objeto history dá acesso (apenas para leitura) à lista de URLs navegadas
por uma janela ou frame. Este objeto contém as 4 propriedades mostradas na
tabela 15.3 e suporta os 3 métodos da tabela 15.4.
15.3 - Propriedades do objeto do browser history

length Número de páginas armazenadas na lista do objeto history.
current URL da página atual.
next URL da página posterior a atual na lista.
previous URL da página anterior a atual na lista.
Como o histórico das páginas visitadas é uma informação privada, por questões
de segurança, alguns browsers, que não suportam signed scripts , restringem as
formas como as propriedades deste objeto podem ser usadas.
15.4 - Métodos do objeto do browser History

Método Significado
go(n) Permite ir para a n-ésima página. Valores positivos movem
para as próximas URL e negativos para as anteriores.
back() Volta para a página anterior.
forward() Vai para a página seguinte.
O exemplo a seguir ilustra a utilização do objeto history:

<form>
<input type=button value="<-- 2"
onclick="history.go(-2)">
<input type=button value="Prev."
8
onclick="history.back()">
<input type=button value="Prox."
onclick="history.forward()">
<input type=button value="2 -->"
onclick="history.go(2)">
</form>
<script language=JavaScript>
document.write("<br> há " +
history.length +
" páginas visitadas" );
</script>
Observe que os métodos back() e forward() têm o mesmo efeito que

usar os botões Back e Forward do browser. Também são equivalentes a
history.go(-1) e history.go(1). Eles não terão efeito se já tiver
atingido o final da lista.
Exercícios:
1. Digite o código que gerou a página mostrada na figura 15.2 (ele é fornecido
antes da figura). Desative neste código a parte em que é pedido para por um
novo texto no botão, isto é, delete ou transforme em comentário o trecho:
texto=prompt("Qual texto deve aparecer"+
" no botão? ");
Depois crie uma âncora na parte da página onde está o link, com o texto
"outros links". Isto é, inclua o trecho:
<a name="#link">
depois da linha:
<IMG SRC="0.gif" height=6>
Agora faça a página, ao ser carregada, ir imediatamente para esta seção

incluindo as linhas:
window.location.hash="link";</script>
na seção <Head>...</Head> .
Mostre nesta seção todas as demais propriedades do objeto location.

Finalmente inclua mais um botão e faça ser carregada uma nova página ao ser
pressionado qualquer botão. Em um dos botões faça a ação ocorrer, usando a
propriedade location.href. No outro botão use o método
replace(url). Verifique se o que ocorre quando você pressiona "back"
do seu navegador ao usar o método replace() é idêntico ao que ocorre
quando você usa location.href="url".
2. Inclua o código do exemplo history na página anterior. Verifique o

resultado visualizando a página. Veja se seu navegador possibilita que a página
tenha acesso às propriedades do objeto history do usuário, tentando incluir
as linhas:
document.write("<br>A página anterior é "
+ toString(history.previous));
9
document.write("<br>A próxima é: "
+ toString(history.next));
dentro das tags <script...></script>
Resumo:
Nesta aula você foi apresentado ao conceito de hierarquia dos objetos da

linguagem JavaScript. Conheceu em detalhes as características de duas classes
de objetos do navegador: location e history. Na próxima aula
continuaremos neste assunto estudando outra classe de objetos do navegador.
Auto-avaliação:
Você achou complexo este conceito de hierarquia? Então releia-o antes da

próxima aula para usar bem os objetos. E, quanto aos exercícios, usou com
facilidade os diversos comandos e métodos novos? Nesta etapa do nosso curso,
você já deve saber o que fazer, não é mesmo?
10
Aula 16: Os Objetos document e navigator
Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora

detalhes sobre os objetos document e navigator.
Objetivos:
Aprender:
- as características e métodos do objeto document
- como gerar páginas dinamicamente
- as características e métodos do objeto navigator
- como fazer páginas com código dependente do navegador
Pré-requisitos:
As aulas 13, 14 e 15 são importantes para esta aula.
1. Objeto Document
O objeto Document serve para definir, consultar ou modificar características

do documento atual mostrado pelo navegador. Freqüentemente, este é um dos
objetos mais usados na forma client side de JavaScript. Como esta forma de
JavaScript existe para transformar os documentos HTML estáticos em
programas interativos, é através do objeto Document que é possível acessar e
modificar o conteúdo dos documentos.
Cada objeto window tem uma propriedade document. Esta propriedade se

refere ao objeto Document que representa o documento (tipicamente um
documento HTML ou XML) mostrado na janela. Este objeto tem propriedades
XML é a sigla que permitem conhecer informações sobre o documento mostrado no browser:
correspondente a sua última modificação, as cores nas quais ele será mostrado etc. Este objeto
Extensible
Markup
também tem métodos que permitem aos programas JavaScript mostrar texto e
Language. criar outros novos documentos. Algumas propriedades deste objeto são arrays
que representam formulários, imagens, links, âncoras e applets do documento.
O array images[] contém os objetos que representam as imagens do

documento. Esses objetos permitem aos programadores da linguagem trocar
imagens do documento criando diversos efeitos interessantes. O array
forms[] contém objetos do tipo Form, que representam todos os
formulários HTML do documento. Cada elemento <form> em um documento
HTML cria um elemento numerado no array forms[]. Idem para cada
elemento <applet> que cria um elemento no array applets[]. O
mesmo se aplica às tags <a>, <embed> e <img>.
Além da identificação pelo seu número como elemento no array, se alguma tag
tiver a propriedade NAME, o valor deste atributo pode ser usado como um nome
de uma propriedade do objeto Document. Por exemplo, suponha que uma
página tenha um formulário com o nome f1, definido pelas linhas:
<form name="f1">
1
<input type="button"value="pressione">
</form>
Seu código JavaScript pode se referir ao objeto form usando ambas as

expressões que seguem:
//referencia pela ordem no documento:
document.forms[0]
//referencia pelo nome:
document.f1
Como você já deve ter concluído, é bastante útil dar nomes adequados para
facilitar a interpretação e a referência a alguns elementos nos códigos
JavaScript.
Este objeto tem as propriedades mostradas na tabela 16.1.
16.1 - Propriedades do objeto Document

alinkColor Cor do link enquanto ativo. Atributo ALINK de <BODY>.
anchors[] Array com as âncoras. (<a name=...>) .
applets[] Array de objetos que representam os applets Java, um para
cada <applet> que aparecer no documento
bgColor Cor de fundo (definida em <BODY>).
cookie Permite ler e escrever cookies HTTP. Contém uma string
que é o valor de um cookie associado com este documento.
domain Permite aos servidores do mesmo domínio relaxar algumas
restrições de segurança. Uma string especificando o
domínio.
embeds[] Array de objetos embutidos (plugins e controles ActiveX)
do documento.
fgColor Cor do texto default (definida no atributo TEXT em
<BODY>).
forms[] Array com os formulários (tags <form> ... </form> do
documento).
images[] Array com as imagens (tags <img src=...> do
documento).
lastModified String com a data da última modificação do documento.
links[] Array com os links (<a href=...>) do documento.
O conjunto de
linkColor Cor dos links não visitados. Corresponde ao atributo LINK
nomes de cores de <BODY>.
pré-definidos location Sinônimo da URL, existe apenas por compatibilidade com
pode ser a versão 1.0 .
encontrado em: referrer String de leitura com a URL do documento que chamou a
http://developer.
netscape.com/ página atual, se houver.
docs/manuals/ title Uma string só de leitura com o texto no interior das tags
communicator/ <TITLE>...<TITLE>.
jsguide4/ URL Uma string só para leitura com a URL da qual o
colors.htm . documento foi carregado.
vlinkColor Cor dos links já visitados. Atributo VLINK de <BODY>.
As propriedades de cores do documento devem ser definidas antes da tag

<body> ser executada. Elas não podem ser definidas em qualquer lugar, mas
2
podem ser definidas dinamicamente na seção <head> ou estaticamente como
atributos da tag <body> do documento. A única exceção a esta regra é a
propriedade bgColor, que pode ser definida a qualquer hora. Todas estas
propriedades de cores têm como parâmetro uma das formas possíveis de
predefinir cores já comentadas.
As linhas de código abaixo, por exemplo, usam esta propriedade para alterar a
cor de fundo:
<html>
<head>
<title>Exemplo Propriedades de Document
</title>
<script language=javascript>
function dataModif()
{
document.write("<h3>ultima ",
"atualizacao nesta pagina",
document.Modified, "</h3>");
}
function mudaCor(cor)
{
document.bgColor = cor;
}
</script>
</head>
<body bgcolor=lightpink>
<h1 align=center>Utilizando o Objeto
Document</h1>
<script language =javascript>
dataModif();
</script>
<h2>Mudar a Cor do Fundo</h2>
<a href="javascript:mudaCor('white')">
Branco</a>
<br>
<a href="javascript:mudaCor('green')">
Verde</a>
<br>
<a href="javascript:mudaCor('blue')">
Azul</a>
<br>
<a href="javascript:mudaCor('yellow')">
Amarelo</a>
<br>
<script language=javascript>
if (document.referrer)
document.write("<h3>Referenciada por:",
document.referrer,
"</h3>");
</script>
</body>
</html>
Diversas outras propriedades que aparecem na tabela 16.1 são mais

interessantes que as de cores. Por exemplo, no código anterior nós também
usamos document.referrer e document.lastModified.
3
Um dos usos possíveis de referrer é armazenar os valores do site que
referiu a sua página para fins estatísticos. Também poderia ser útil para analisar
links não-autorizados que se referem a sua página, ou fazer com que os links
que venham de páginas que não tenham passado antes pela sua página
principal a visitem primeiro.
Usar document.lastModified pode ser muito útil para

automaticamente mudar a data de última alteração em documento, o que é um
dado bastante útil em uma página. Como a forma do texto que aparece pela
impressão direta do valor de retorno desta função inclui
hora:minutos:segundos (separados por ":" como mostrado) e pode
aparecer como mês/dia/ano (isto é a posição usual em nossa língua com o
dia e o mês invertida e separados por "/" como mostrado), às vezes, pode ser
muito mais útil associá-la a um objeto Date, para ter as opções dos métodos
de manipulação de data deste a nosso dispor. Assim, as linhas de código para
uma nova função dataModif() abaixo atribuem o retorno de
document.lastModified a um objeto Date (que estudamos na Aula
14) e usam os métodos getDate(), getMoth() e
getUTCFullYear(), para imprimir o dia, mês e ano.
Como uma última observação repare que ao mês foi adicionado 1, pois os
valores de retorno de getMoth() são entre 0 e 11:
//outra versão da função anterior
function dataModif1()
{ //cria objeto Date
modif=new Date(document.lastModified);
//usa alguns metodos de Date
document.write("<h3>Atualizado em:",
modif.getDate(), "/",
(modif.getMonth()+1),"/",
modif.getUTCFullYear(),"</h3>");
}
1.1. Documentos Gerados Dinamicamente

Os métodos clear, write e writeln do objeto Document permitem
alterar dinamicamente textos HTML nos documentos que estão sendo
interpretados. Os métodos close e open permitem criar documentos
inteiramente novos. A tabela 16.2 mostra os métodos deste objeto.
4
16.2. Métodos do objeto do browser Document
Método Significado
clear() Apaga o conteúdo todo de um documento.
close() Fecha o documento aberto por open(). Termina de incluir
coisas num documento.
open() Cria um novo documento. Abre um canal para escrever
conteúdos em um documento.
write Insere string ou strings (v1... vn) no documento cujo
(v1, … vn) canal foi aberto por open().
writeln Imprime strings (v1... vn) em uma linha do
(v1, … vn) documento. Idêntico ao anterior, mas adicionando a
mudança de linha na saída.
Já estamos usando as funções de escrita no mesmo documento que está sendo

interpretado deste a primeira aula deste módulo. Para criar um novo documento
é necessário primeiro usar o método open() do objeto Document, e então
chamar as função de escrita tantas vezes quantas necessárias para gerar o
conteúdo do novo documento e mostrá-lo. Finalmente, deve-se usar o método
close() para indicar que o documento está terminado. Este último passo é
importante porque o browser pode armazenar temporariamente o HTML que
você está escrevendo e só mostrar esta tela de saída quando o método
close() for chamado.
De maneira oposta ao fechamento, abertura pelo método open() é opcional.

Se você usar write() em um documento que já foi fechado será
implicitamente aberto um novo documento HTML, como se você tivesse usado
o método de abertura. Neste processo, no entanto, o documento corrente e seu
conteúdo será descartado.
Quando open() é usado sem argumentos é aberta uma nova página HTML.
Mas os browsers podem mostrar outros tipos de formato de dados além de
HTML. O formato mais comum de dados são textos simples (ou do tipo
plain text). Se você quiser usar write() para saída de um texto deve
usar a string "text/plain" como argumento:
document.open("text/plain");
Com estes métodos, você gera documentos dinamicamente, mas para que um
documento HTML seja realmente dinâmico deve ser interativo, o documento e
os seus elementos devem responder a atitudes (eventos) do usuário. Nós
discutiremos eventos na próxima aula.
2. Objeto navigador
As propriedades deste objeto contêm informações apenas para leitura, isto é,

não modificáveis, sobre o browser ou navegador em uso. Estas propriedades
podem ser usadas para configurar a página para uma plataforma específica.
Este nome é obviamente devido ao browser Navigator, embora seja portável e
esteja presente nos outros browsers que interpretam JavaScript. O Internet
Explorer usa o nome clientInformation para se referir ao objeto
5
navigator. Mas este nome embora mais descritivo e menos relacionado a
um produto não é portável e nem suportado pelo Netscape Navigator.
A forma como este objeto está implementado difere do Explorer para o

Netscape, mas pelo menos as propriedades mostradas na tabela 16.3 são
comuns e permitem a criação de documentos adaptáveis a cada tipo de
navegador. Como há uma única instância deste objeto não é necessário se
referir a ele como window.navigator.
16.3 - Propriedades do objeto Document

appName O nome do browser.
appVersion Versão do browser, seu número e outras informações.
userAgent Todas as informações de appName e appVersion.
appCodeName Codinome do navegador.
platform Tipo de máquina onde está sendo executado.
language Código em 2 letras especificando a língua que a versão
em uso suporta. Inglês ="en", francês ="fr" etc.
As linhas de código que seguem mostram cada uma destas propriedades do

objeto Navigator. Mas como você poderá ver se executá-las, algumas delas têm
muito mais valores que o realmente necessário.
<html>
<head>
<title>O objeto navigator</title>
</head>
<body bgcolor=lightcyan>
<h2>O objeto navigator</h2>
<hr>

</script>
<hr>
</body>
</html>
Além das propriedades acima, há outras definidas apenas no Netscape

Navigator ou no Internet Explorer. A maioria destas propriedades
6
incompatíveis são principalmente usadas em DHTML. Para usar estas
propriedades é melhor você antes verificar o tipo de navegador usado porque
vai visualizar a página. A forma de fazer isso é usar as técnicas que
discutiremos na próxima seção.
O objeto Navigator também tem métodos usáveis apenas para o Netscape

Navigator. A única função que faz parte da linguagem desde sua versão 1.1 é
navigator.javaEnabled(). No exemplo acima nós a usamos também.
A função javaEnabled() testa se o browser corrente permite o uso de Java.
Em caso positivo, o valor de retorno será true, e false em caso contrário.
2.1. Páginas Dependentes do Navegador

Devido às diferenças de implementação entre os principais tipos de
navegadores, em muitas situações é necessário distinguir qual o navegador para
saber que código utilizar. Uma forma de fazer isso é através do objeto
navigator. Este objeto, como o próprio nome diz, apresenta uma série de
informações acerca do browser que está sendo utilizado.
A técnica de criar código adaptável ao tipo do browser consiste em colocar o

código dependente do navegador abaixo de um desvio condicional, onde se
testa o valor da propriedade appName . Como JavaScript é uma linguagem
interpretada, o navegador só acusa o erro de não reconhecer um código quando
o executa e o desvio condicional evita que isso ocorra. O exemplo abaixo
mostra como incluir código dependente do navegador:
ns=(navigator.appName.indexOf("Netscape") != -1);
ie=(navigator.appName.indexOf("Explorer") != -1);
document.write("Seu navegador é: ");
if (ns)
document.write("Netscape");
else if (ie)
document.write("Explorer");
else
document.write("desconhecido");
Exercícios:
1. Digite o código que está sendo discutido no Exemplo Propriedades
de Document, na seção 1 desta aula.
Agora faça a página ser carregada na forma original da função DataModif()

e depois usando a sugestão de modificação apresentada na seção 1:
DataModif1().
Como você poderia fazer para ao invés de apresentar os meses com números
mostrá-los pelos nomes? Faça isso agora, criando uma nova versão deste
mesma função: DataModif2() (Dica: crie um Array com os nomes dos
meses do ano e use o valor de retorno de getMonth para acessar os elementos
deste array)
7
Tente usar agora neste código (como fizemos nos objetos estudados nas aulas
13 e14) todas as demais propriedades do objeto document apresentadas na
tabela 16.1. Verifique o que ocorre com cada uma delas no documento
mostrado pelo seu navegador.
2. Digite o código que foi apresentado na seção 2 e veja o resultado em uma

página Web. Depois substitua o código abaixo pelo correspondente mais
completo do exemplo apresentado na seção sobre o objeto navigator.
Verifique o resultado visualizando novamente a página.
document.write("<hr><br>Agora as mais " +
"importantes:<UL>");
document.write("<LI><B>Code Name:</B> ",
navigator.appCodeName);
document.write("<LI><B>App Name:</B> ",
navigator.appName);
document.write("<LI><b>App Version:</b>",
navigator.appVersion);
document.write("<LI><B>User Agent:</B> ",
navigator.userAgent);
document.write("<LI><B>Platform:</B>",
navigator.platform);
nome = navigator.appName;
if (nome.indexOf("Netscape") != -1)
document.write("<LI><B>Language:</B>",
navigator.language);
else
document.write("<LI><B>Language:</B>",
navigator.userLanguage);
3. Utilize o exemplo dependente do navegador na seção 2.1 no exercício

anterior. Visualize o resultado que terá abrindo uma página com o código em
um navegador.
Resumo:
Nesta aula você conheceu em detalhes as características de dois objetos muito

importantes: Document e Navigator.
O primeiro deles é especialmente útil para criar páginas com maior dinamismo
e que podem ser geradas automaticamente Na próxima aula continuaremos
neste assunto de geração de páginas não estáticas, aprendendo como fazê-las
interagir com o usuário, o que permitirá a criação de páginas muito versáteis e
úteis.
Auto-avaliação:
Quantas propriedades e métodos novos! Se algum ponto não ficou muito claro,
releia-o antes da próxima aula, na qual você continuará a crescer na direção de
ser um criador de páginas WEBs poderosas e repletas de objetivos! Nela você
aprenderá as coisas mais importantes para uma programação dinâmica: como
8
reagir às atitudes de quem usa a página , ou em outras palavras como usar os
eventos.
9
Aula 17: Eventos
Nesta aula você verá o conceito de evento na linguagem

JavaScript. Veremos quais os modelos de tratamento de
eventos, como associar trechos de código às suas ocorrências
e muitas outras coisas mais sobre esta importante forma de
programação dinâmica.
Objetivos:
- o que são eventos
- quais os modelos de tratamento de eventos
- como fazer a associação de código a eventos
- quais os tipos de evento
- como usar a palavra chave this
- como usar objeto Event
Pré-requisitos:
As aulas 12 a 16 são importantes para esta aula.
1. Definindo e Caracterizando Eventos

O código JavaScript na tag <script> é executado apenas
uma vez quando a página é lida pelo navegador. Um
programa que usa apenas scripts definidos desta forma não
pode responder dinamicamente às atitudes do usuário.
Programas dinâmicos devem poder responder a certas ações
do usuário ou a acontecimentos decorrentes da exibição da
página no navegador.
Um evento é um acontecimento iniciado por alguma atitude

do usuário (o movimentar do mouse, o pressionar de uma
tecla, o clicar de um botão, o envio de um formulário, etc.) ou
pelo próprio funcionamento do navegador (o fim do
carregamento de uma página para a exibição, o não conseguir
carregar uma imagem etc.).
Todo evento envolve uma ação e um objeto (ou trecho da

página) que sofre esta ação. Por exemplo, quando o usuário
pressiona o botão do mouse e o cursor está sobre uma
imagem, dizemos que esta imagem sofreu o evento de “click“
do mouse.
Numa linguagem orientada a eventos (como JavaScript) é
1
possível definir trechos de código que serão executados
quando ocorrer um determinado evento. Associar um código
a um evento é chamado de “capturar” um evento. Chamamos
de “tratamento” de um evento à execução do código
associado a ele.
1.1. Modelos de Tratamento a Eventos
Infelizmente, a forma de capturar e tratar um evento em

JavaScript é uma das coisas mais difíceis da linguagem. Esta
dificuldade existe porque os navegadores mais utilizados
(Netscape e Explorer) implementaram modelos de tratamento
A tradução literal de a eventos bem diferentes entre si. Se por um lado, com o
layer seria camada.
O objeto Layer só
aparecimento da versão 6 do Netscape, os dois modelos se
está disponível no aproximaram um pouco, por outro lado agora há três versões
Navigator. Ele serve de modelo de tratamento de eventos.
para o
posicionamento de A diferença começa na definição de quais objetos podem
elementos. Todo o
elemento que está
sofrer eventos. No Explorer e no Netscape 6 qualquer objeto
posicionado de pode sofrer eventos. Mas até a versão 4.7 do Nestcape eles
maneira não relativa estavam restritos aos seguintes objetos: imagens, links,
à posição da página janelas (window), document, layer, formulários e seus
na tela é considerado elementos.
posicionado em uma
camada (layer)
separada do resto do A principal diferença entre os três modelos diz respeito a
documento. quem tem a preferência no tratamento do evento no caso de
mais de um objeto que ocupe a região da página que sofreu o
evento. Estas diferenças serão discutidas com mais detalhes
na segunda seção desta aula.
A versão 1.2 incorporou o objeto event que permitiu o

tratamento de um grande número de novos eventos e uma
flexibilidade maior para tratá-los. Veremos como utilizar este
objeto também na seção 2 desta aula.
Outras questões envolvendo tratamento de eventos serão

vistas nas seções 1.3, 1.5 e 1.6 a seguir:
• atributo de uma tag HTML associada ao evento;
• usando os atributos FOR e EVENT em <script>;
• propriedade de um objeto JavaScript; e
• propriedade do objeto Event.
1.2. Tipos de Eventos
A linguagem suporta diversos tipos de eventos, cada tipo é

gerado por circunstâncias diferentes. Por exemplo, o evento
gerado quando o usuário "clica" um botão é diferente do
2
gerado pelo carregamento de uma página no browser.
Todos os nomes de
Também pode ocorrer que objetos diferentes gerem eventos
atributos iniciam
com "on". O uso da diferentes sobre as mesmas circunstâncias. Se o usuário
primeira letra depois "clicar" com o mouse em um botão, é gerado o evento
do "on" em onClick, mas o mouse ao ser clicado sobre um texto não
maiúscula é uma gera qualquer evento.
convenção
comumente usada
para a descrição dos Como na forma client-side da linguagem os eventos se
atributos em originam de elementos HTML (como botões, imagens etc.)
arquivos HTML. são definidos como atributos destes elementos. Para permitir
a manipulação de evento nesta forma, as várias tags possíveis
Embora HTML seja
de responderem a eventos passaram a ter atributos específicos
insensível ao uso de
maiúsculas ou (que depois foram incorporados ao padrão HTML 4.0).
minúsculas, o que é
denominado "case- O que distingue o tipo dos eventos é principalmente os
insensitive" , esta atributos que eles "disparam". Cada elemento possível de
convenção auxilia a
incluir em uma página HTML contém um determinado
identificar estes
atributos como um conjunto de eventos associados. Para definir o código de
conjunto tratamento de um evento é necessário definir um atributo na
diferenciado dos tag relativa ao elemento. Para cada tipo de evento há um
demais da atributo específico. Na tabela 17.1 a seguir são mostrados
linguagem, que
alguns destes atributos e o evento a que estão associados.
geralmente seriam
escritos em
maiúsculas ou Tabela 17.1 - Atributos e sua descrição
minúsculas.
Atributo Descrição
Eventos do mouse
onClick Clique do mouse sobre o elemento.
onDblClick Clique duas vezes seguidas na mesma posição.
onMouseMove Mouse se move sobre o elemento.
onMouseOver O cursor do mouse está sobre o elemento.
onMouseOut Mouse não está mais sobre o elemento (saiu).
onMouseDown Botão do mouse pressionado sobre o elemento.
Desseleção, é onMouseUp Botão do mouse é solto sobre o elemento.
um termo usado
aqui no sentido Eventos associados a elementos de formulários
de desfazer a onChange Modificação do conteúdo do elemento.
operação de onSelect Seleção, desseleção ou ativação de um item.
seleção! Eventos da página ou janela
onLoad Acabou de ser carregada, também associado a
imagens.
onFocus Fica ativada, ganha o foco de entrada de dados.
Também associado a elementos de texto.
onBlur Perde o "foco" de entrada, fica desativado,
também associado a elementos de texto.
onUnload Foi descarregado.
onResize A janela foi redimensionada pelo usuário.
Eventos associados a imagens
onError Ocorreu um erro ao carregar imagem.
onAbort Carregamento da imagem foi interrompido.
3
Eventos de formulário
onSubmit Formulário enviado (submetido).
onReset Requisitou o "reset" (limpar o conteúdo).
Eventos do teclado
onKeyDown Ocorre quando uma tecla é apertada pelo
usuário.
onKeyPress Ocorre quando uma tecla é apertada e solta.
onKeyUp Ocorre quando uma tecla é solta pelo usuário.
É importante notar que nem todos os atributos se aplicam a

qualquer elemento e que o mesmo atributo pode fazer sentido
para mais de um forma de interação. Por exemplo, onLoad
geralmente está associado ao carregamento da página, mas
também pode ser acionado pelo carregamento de uma
imagem. Os eventos do mouse, dependendo da plataforma e
da versão do browser usado, podem funcionar com links,
imagens, elementos de formulário e documentos. A melhor
forma de saber qual atributo faz sentido para cada tipo de
elemento é consultar um guia de referência. Na WWW é
possível obter um guia no endereço:
ftp://ftp12.ba.best.com/pub/dgoodman/NS4Map.zip
1.3. Associando Eventos a Elementos HTML
Os códigos de tratamento de eventos são expressos como

valores de atributos HTML, na forma de strings que contêm
um ou mais comandos JavaScript. Se houver mais de um
comando eles devem ser separados por ponto e vírgula. Por
exemplo, o posicionamento do cursor do mouse (evento
onMouseOver) sobre um link pode disparar a abertura de
uma janela de mensagem. A seguir vemos como associar o
evento onMouseOver a um link HTML:
<A HREF=“http://www.cederj.gov.br/”
onMouseOver=“alert(‘Entre aqui!’);”>
Click aqui!
</A>
A mesma sintaxe do exemplo anterior pode ser usada para os

demais eventos do mouse. Se você não entendeu bem a
diferença entre eles pode ser uma boa forma de auxiliar este
entendimento experimentar as diferenças de comportamento
com cada um dos outros eventos do mouse da tabela 17.1.
Esta também é uma forma de verificar se determinado evento
está disponível para aquele elemento HTML em determinada
versão de browser ou plataforma.
A string que dispara o evento pode conter chamadas a

funções definidas pelo programador, como nas linhas abaixo
onde é suposto que calculaTotal() seja uma função já
4
definida em algum lugar do código.
<FORM NAME=formucompras>
<INPUT TYPE=button VALUE="Total"
NAME="calcula"
onClick="calculaTotal()">
</FORM>
A um mesmo elemento HTML pode estar associado também

diversos eventos e cada um disparar uma ação diferente. As
linhas de código abaixo chamam diversas funções, uma para
cada movimento diferente que o usuário fizer com o mouse
sobre os links. Supõem-se que estes links estejam sobre
diversas imagens na página, cada uma delas com o nome
fornecido ao Array nomeImagem.
<HTML>
<HEAD>
<TITLE>Diversos Eventos</TITLE>
nomeImagem=new Array("nome1",
"nome2",
"nome3");
function entrei(n)
{
document.saida.texto.value=
nomeImagem[n];
}
function sai( )
{
document.saida.texto.value=" saiu ";
}
function nada()
{
}
function clica( )
{
document.saida.texto.value=" clicou ";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="salmon">
<CENTER>
<H1>Diversos Eventos</H1>
<A href="javascript:nada()"
onClick="clica()",
onMouseOver="entrei(0)",
onMouseOut="sai()">
<IMG SRC="image1.gif" BORDER=0></A>
onClick="clica()"
onMouseOver="entrei(1)"
onMouseOut="sai()">
5
onClick="clica()"
onMouseOver="entrei(2)"
onMouseOut="sai()">
<FORM NAME=saida>
<INPUT TYPE=TEXT NAME=texto>
</FORM>
</CENTER>
</BODY>
</HTML>
Embora você possa incluir qualquer número de comandos

JavaScript dentro de um único evento, uma técnica comum
nos casos onde mais de dois comandos são ativados é defini-
los como um função entre as tags <SCRIPT> ...
</SCRIPT>, e invocar esta função no atributo do evento.
1.4. A Palavra Reservada this
Funções e métodos já foram usados por você diversas vezes

no decorrer deste módulo de JavaScript, não? Você está bem
seguro da diferença entre ambos? Métodos não são nada mais
que funções JavaScript invocadas através de um objeto e por
isso mesmo tem uma propriedade muito importante: o objeto
que o chamou. Este objeto permanece armazenado no corpo
do método no valor da palavra-chave this.
Por exemplo, um método qualquer, que suponhamos seja

chamado met, se você o invocar através de um objeto,
obj, quando você o executar através obj.met(), o
método pode se referir ao próprio objeto obj através da
palavra reservada this.
Mas isto não quer dizer que dentro de funções (que não sejam
métodos) this não tenha valor. Muitas vezes ao invocar
uma função você está invocando um método do objeto
global. Dentro destas funções, a palavra this se refere a este
objeto. Vejamos um exemplo mais concreto. Suponha que os
seguintes trechos tenham substituído os correspondentes no
exemplo da seção anterior.
....
function sai()
{
document.saida.texto.value="sai "+this;
}
6
.....
function clica(n)
{
document.saida.texto.value="clicou "+n;
}...
// e antes de cada tag IMG trocar por:

<A href="javascript:nd()"
onClick="clica(this)",
onMouseOver="entrei(0)",
onMouseOut="sai(0)">
Se você visualizar esta nova versão verá como o conteúdo de

this muda em cada contexto.
Resumindo, this serve para referenciar o objeto corrente.

Seu valor é definido logo após a criação do objeto (pelo
operador new), mas seu significado depende do contexto
onde é usado.
1.5. Manipulando Eventos na Tag <SCRIPT>
Esta forma só está disponível no Internet Explorer. Ela

envolve o uso dos atributos FOR e EVENT na tag <SCRIPT>
para especificar o código relacionado com um evento. O
nome deste evento será atribuído a EVENT. O elemento
HTML no qual o evento ocorre terá seu nome atribuído a
FOR. Usando esta forma a linha:
<INPUT TYPE=TEXT NAME=texto VALUE=""

onClick="clicou">
poderia ser reescrita como:
<INPUT TYPE=TEXT NAME=texto Value="">

<SCRIPT FOR=texto EVENT=onClick>
VALUE="clicou";
</SCRIPT>
Mas como esta técnica não é aceita em todos os demais

navegadores, não é recomendável. Ela é apresentada aqui
apenas para que você conheça todas as formas possíveis de
manipulação de eventos comentadas anteriormente.
1.6. Eventos como Propriedades do Objeto
Embora a forma mais freqüente de manipular eventos seja

defini-los como atributos da tag, como já comentamos, esta
não é uma única forma. Nas versões 1.1 e posteriores de
JavaScript eles podem ser definidos explicitamente como
7
funções a serem usadas como propriedades de objetos
HTML.
Por exemplo, considere o seguinte evento associado a um

botão descrito na forma de atributo HTML:
<INPUT TYPE="button" NAME="b1"
VALUE="Aperte"
onClick="alert('Valeu!')";>
Pode-se ter o mesmo efeito com a seguinte linha de código

JavaScript:
document.forms[0].b1.onclick=function()
{alert('Valeu!');}
Cada objeto da linguagem que representa um elemento

HTML tem propriedades que correspondem aos atributos do
elemento. Se você atribuir uma função para uma destas
propriedades, essa função será usada como uma rotina de
tratamento de evento e será invocada automaticamente pelo
sistema sempre que o evento correspondente ocorrer. No caso
de atributos, a convenção usada é misturar letras minúsculas
e maiúsculas na definição do nome do atributo. Mas, nesta
forma, como JavaScript é case-sensitive, os eventos devem
ser expressos exclusivamente em minúsculas (onclick,
ondblclick, onload, onmouseover etc.).
Esta forma de manipular os eventos tem a vantagem de

reduzir a necessidade de misturar HTML e JavaScript,
facilitando a manutenção do código. As funções também não
precisam ser fixas como os atributos dos códigos HTML, que
Mas, como estas são definidos apenas uma vez quando o código é criado. As
criações do objeto propriedades de JavaScript podem mudar a qualquer hora, o
Event foram que pode ser muito útil em programas interativos complexos.
feitas a partir de
modelos
independentes, as
propriedades dos 2. O Objeto Event
objetos são quase
completamente Uma das deficiências das formas de tratamento a eventos
incompatíveis. discutidas até agora é que não há maneira de se obter detalhes
sobre o evento que ocorreu. Muito provavelmente quando
capturamos o pressionar do botão do mouse (onClick)
vamos querer saber qual o botão foi pressionado. Quando
capturamos o pressionar de uma tecla (onKeyPress) vamos
querer saber, com certeza, qual tecla foi pressionada. Para dar
informações adicionais como estas foi definido a partir da
versão 1.2 do JavaScript o objeto Event. Infelizmente, as
propriedades deste objeto variam bastante dependendo do
navegador e sua versão. Mais adiante mostramos as
propriedades deste objeto indicando a versão onde é válida:
Netscape 4 (referenciada como N4), Explorer 4 (referenciada
8
como IE) e Netscape 6 (referenciada como N6) .
O objeto Event é criado automaticamente pelo navegador.

No exemplo a seguir, o objeto Event é passado como
parâmetro para a função elefante() que é chamada
quando o botão do mouse for pressionado:
<img src="elephant.jpg"
onMouseDown="elefante(event)">
A tabela 17.2 descreve as propriedades de Event e a qual

versão de browser elas são aplicadas.
17.2 - Propriedades do objeto Event

Propriedade Descrição
target Destino do evento (N4 e N6).
srcElement Fonte do evento (IE).
type Tipo do evento, uma string contendo o
nome do tipo (todas as versões).
which Botão do mouse (1, 2, 3) ou código ASCII
da tecla (N4 e N6).
button Botão do mouse (1 ou 2)( IE e N6).
keyCode Código Unicode do caracter correspondente
à tecla (IE e N6).
modifiers Uma máscara binária identificando se as
teclas Shift, Control ou ALT foram
pressionadas (N4 e N6).
altKey, Valores booleanos individuais identificando
ctrlKey e as teclas correspondentes (IE e N6).
shiftKey
pageX, Posição do mouse dentro da página (N4 e
pageY N6).
clientX, Posição do mouse dentro da página (IE).
clientY
screenX, Posição do mouse em relação ao vídeo
screenY (todas as versões).
Além destas diferenças, a forma como o objeto Event é

disponibilizado para o programa também é diferente. No
Netscape ele é passado como argumento para a função de
tratamento do evento. No Explorer, o objeto Event é
armazenado em uma variável global denominada event.
2.1 Propagação do Evento
Uma característica importante do modelo de tratamento de

eventos envolve a noção de propagação de eventos.
Propagação significa que um evento não ocorre simplesmente
em um objeto e então "morre", ao invés disso ele pode se
9
propagar para outros objetos que estejam na área afetada. Por
exemplo, ao invés de ter várias funções de manipulação de
eventos, uma para cada elemento de um formulário, pode-se
simplesmente ter uma função genérica em um objeto no topo
de hierarquia como o objeto Document. Um evento que
ocorra dentro de um elemento de um formulário, também
ocorreu no formulário e também ocorreu no documento. É
possível então capturar o evento no documento e depois
propagá-lo para o elemento onde ele também ocorreu ou
capturar o evento no elemento e depois propagá-lo para o
formulário.
Pela última linha do parágrafo anterior podemos perceber que

a propagação de um evento pode se dar em duas direções
diferentes: do topo da hierarquia para a base ou da base para
o topo. Esta diferença é o que caracteriza os três modelos de
captura de eventos implementados pelos browsers mais
populares.
O modelo do Netscape 4.x é chamado "event capturing".

A tradução literal
destes dois modelos Nele os objetos Window e Document têm métodos que
seria "capturando" permitem a eles requisitar a chance de tratar eventos antes
eventos e que sejam tratados no objeto onde se originaram. As funções
"borbulhando" de tratamento podem optar por propagar ou não o evento.
eventos.
No modelo do Explorer, chamado "event bubbling", o
evento é sempre capturado pelo elemento que efetivamente
recebe o evento para posteriormente ir como uma bolha se
expandindo ("borbulhando") por cada elemento seguinte na
hierarquia, ou até que uma das funções de tratamento decida
que ele não vai mais se propagar.
O modelo implementado pela Netscape a partir da versão 6,

chamado de "event path", permite que a propagação seja
tratada de uma forma ou de outra de acordo com a
conveniência do programa.
O que há em comum entre os três modelos é a possibilidade

de propagar um evento até os objetos Window e
Document.
2.2. Event Capturing
No Navigator 4.x os objetos Window, Document e

Layer podem requisitar a oportunidade de tratar os eventos
antes que sejam processados pelo elemento que os gerou. Tal
requisição é feita com o uso do método
captureEvents() definido nos objetos Windows,
10
Document e Layer.
O argumento deste método é uma combinação de constantes

definidas como propriedades de Event. Essas propriedades
são combinadas usando o operador "|". As linhas abaixo,
fazem com que, os eventos correspondentes a movimentos de
pressionar e soltar o botão do mouse sejam examinados pelo
objeto Window antes de serem tratados pelo objeto de
origem:
document.captureEvents(Event.MOUSEDOWN |
Event.MOUSEUP);
Depois de feita esta requisição de captura dos eventos, o

programa deve registrar o tratamento para eles:
document.onmousedown=function aperta(ev)
{
alert("Botão apertado !");
};
document.onmouseup=function solta(ev)
{
alert("Botão solto !");
};
Quando uma destas funções recebe o evento, decide o que

ocorre a seguir: se o evento capturado é tratado parando de se
propagar ou se é passado adiante. O comportamento padrão é
a não propagação do evento. Para que ele se propague é
necessário invocar o routeEvent() definido no objeto
Window, Document ou Layer. Este método passa o
evento para o próximo objeto Document ou Layer na
hierarquia que tenha usado captureEvent() (caso
exista), ou então para o objeto que efetivamente sofreu o
evento:
document.onmousedown=function ratoDoc(ev)
{
alert("rotina do documento !");
routeEvent(ev);
};
Uma alternativa à chamada de "routeEvent();" é

simplesmente passar o objeto Event para o método
"handleEvent();" do objeto que você desejar que o
receba. Este método passa o evento para a função apropriada.
As linhas abaixo mostram um exemplo completo de como
pode-se usar a forma do Netscape 4.x de propagação de
eventos:
<HTML>
<HEAD>
<TITLE>Evento no Netscape 4.x </TITLE>
</HEAD>
<BODY bgcolor=lightcyan>
<H1>Evento no Netscape </H1>
11
<P>
<img src="seuemb.gif" name="fig1" >
<img src="nota.gif" name="fig2"
width=150 height=150>
</P>
<SCRIPT>
function ratImg(ev)
{
alert("na imagem!");
}
function ratDoc(ev)
{
if (ev.target.name=="fig2")
routeEvent(ev);
else
alert("documento!");
}
if((navigator.appName=="Netscape")&&
(navigator.appVersion.charAt(0)=="4"))
{
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=ratDoc;
document.images[0].onmousedown=ratImg;
}
else
alert("para uso no Netscape 4.x");
</SCRIPT>
</BODY>
</HTML>
Resumindo, no Netscape é possível forçar que todos eventos

de um determinado tipo sejam direcionados apenas para uma
função associada ao evento no objeto Document. Para isso
utiliza-se a função document.captureEvents(). Esta
função não pode ser utilizada no Explorer, causando erro na
página, pois o tipo de constante passada como parâmetro para
o método não está definida (assim como o próprio método).
Uma forma de tratar a execução para determinado tipo de
browser é fazer o tratamento prévio mostrado no exemplo
anterior.
2.3. Event Bubbling
No Explorer o modelo anterior é invertido. Ao invés de

capturar o evento pelo maior nível na hierarquia e então ir até
o objeto de origem, o tratamento do evento começa pelo
objeto que o originou e então se dirige ("borbulha") para os
demais na hierarquia. Assim se o mouse é pressionado sobre
uma imagem no IE4, o código associado ao onmousedown
na imagem é invocado. A função de tratamento deste evento
do Document é invocado, e depois desta a do objeto
12
Window. Qualquer uma destas funções pode impedir que o
evento passe para o próximo nível definido a propriedade
cancelBuble do objeto Event (que como já
comentamos é uma variável global) como true.
Esta forma é bem mais simples que a do Netscape. Há um

senão neste modelo: nem todos os tipos de eventos
"borbulham". Para compreender isso é necessário introduzir
Semântico os conceitos de evento "bruto" e evento "semântico". O
caracteriza algo
que resulta de um
primeiro tipo de evento representa os que simplesmente
significado reportam um evento do mouse ou teclado. Como o passar do
diferente das mouse sobre algo, o pressionar do mouse, soltar o botão do
palavras ou mouse, tirar o mouse de algo, apertar uma tecla do teclado,
atitudes. soltar uma tecla, ativar ou desativar um elemento.
Os eventos semânticos por sua vez interpretam a atitude do

usuário e lhe atribuem certo significado. Por exemplo o
submit ou o reset de um formulário fazem diversas ações
e unem diversas coisas à atitude do usuário.
As regras de propagação seguem esta divisão em categorias

de eventos. Os semânticos não se propagam, mas os de outro
tipo sim. Isso faz sentido, pois é a fonte do evento que define
completamente seu sentido e será, obviamente, o melhor
lugar para processá-lo. Por exemplo, não seria o próprio
formulário o melhor lugar para processá-lo (submetê-lo ou
"resetá-lo") e validá-lo?
As linhas de código abaixo exemplificam este modelo de

tratamento de eventos. Nelas também é feito o tratamento
prévio para identificação do tipo de browser.
<HTML>
<HEAD>
<TITLE>Evento no Explorer</TITLE>
</HEAD>
<BODY bgcolor=lightcyan>
<H1>Evento no Explorer</H1>
<P>
<img src="seuemb.gif" name="fig1" >
<img src="nota.gif" name="fig2"
width=150 height=150>
</P>
<SCRIPT>
function ratImg(ev)
{
alert("imagem!");
event.cancelBubble = true;
//apagando linha acima para de propagar
}
function ratDoc(ev)
{
alert("documento!");
13
}
if(navigator.appName.indexOf("Explorer")!=-1)
{
document.onmousedown = ratDoc;
}
else
alert("para uso no Explorer");
</SCRIPT>
</BODY>
</HTML>
2.4. Event Path
A Netscape optou por introduzir um novo modelo de

tratamento de eventos a partir da versão 6 do seu navegador.
O objetivo desta mudança foi tornar o navegador mais
compatível com a padronização proposta pelo W3C.
Neste novo modelo não existem mais as funções

routeEvent() e captureEvents() pois não são mais
necessárias. Todo evento se propaga a menos que se diga
algo em contrário atribuindo o valor true à propriedade
cancelBuble do objeto Event. Apesar disso, o Netscape
não adotou o modelo do Explorer. A primeira grande
diferença é que não é mais possível capturar um evento
simplesmente atribuindo um valor a uma propriedade do
objeto. A captura deve ser feita através da invocação do
método addEventListener, definido para todos os
objetos. Esta função espera 3 parâmetros como mostrado a
seguir:
addEventListener(tipo,função,capture)
Onde:
tipo - é uma string com o tipo do evento ("mouseup",
"click" etc),
função - é o nome da função (sem parênteses ou
parâmetros), e
capture - é um booleano que indica o método de
propagação (true = capture, false = bubble)
Na verdade, o programa pode optar se a propagação do

evento vai se dar na ordem de capture ou na ordem do
bubbling. Quem vai indicar isso é o terceiro parâmetro da
função addEventListener(). As linhas de código
abaixo exemplificam este modelo de tratamento de eventos.
<HTML>
<HEAD>
<TITLE> Netscape 6.x - Só na Imagem
</TITLE>
14
</HEAD>
<BODY bgcolor=lightblue>
<CENTER>
<H1> Netscape - tratado na imagem</H1>
<P> <img src="seuemb.gif" name="fig1"
width="150" height="150"></P>
</CENTER>
<SCRIPT> // Evento sem propagação
function ratImg(ev)
{
alert("rotina da imagem !");
ev.cancelBubble = true;
}
function ratDoc(ev)
{
alert("rotina do documento !");
}
if ((navigator.appName == "Netscape") &&
(navigator.appVersion.charAt(0)>"4"))
{
document.addEventListener
("mousedown", ratDoc, false);
document.images[0].addEventListener
("mousedown", ratImg, true);
}
else
alert("Esta página só funcionará " +
"corretamente no Netscape 6.x");
</script>
</BODY>
</HTML>
Exercícios:
1. Bata o código que está sendo discutido em Diversos
Eventos na seção 1.3 desta aula, usando no lugar de
image1.gif, image2.gif e image3.gif
quaisquer imagens que você queira. Também defina seus
nomes adequadamente no Array nomeImagem do mesmo
código.
Agora faça a página ser carregada na forma original das
funções definidas. Depois modifique o código para:
• incluir 6 imagens;
• alterar o texto da função de saída, para escrever nome da
imagem da qual esta saindo ("saindo de
nomedaimagem"); e
• altere também o texto da função associado ao evento
"click" para também escrever o nome da imagem na qual
está clicando.
Verifique como ficou seu documento em cada alteração.
2. Faça no exercício anterior as modificações sugeridas na
15
seção 1.4. Verifique o conteúdo de this visualizando
novamente a página e fazendo com que todos os tipos de
evento ocorram.
3. (Só faça se você dispuser do Netscape) Utilize as linhas

de código do final da seção 2.2 para entender a forma de
propagação de eventos lá discutidas. Após identificar os
métodos comentados nesta seção, procure entender cada linha
de código. Para isso, bata o exemplo e visualize o resultado
que terá abrindo uma página com o código em um navegador.
Use quaisquer duas figuras que você queira (ou tenha
disponível) trocando o nome das suas figuras pelo das
exemplificadas no código. "Clique" sobre as imagens e sobre
o fundo do documento para ver o que acontece.
Agora responda:
• por que o que acontece quando você clica o mouse na
primeira figura é diferente do que ocorre quando clica na
segunda?
• o que você faria para o evento se propagar para as
imagens?
Verifique se você acertou suas respostas fazendo a alteração
correspondente no código e vendo se realmente funciona.
4. (Só faça se você dispuser do Explorer) Utilize as linhas

de código da seção 2.3 para entender a forma de propagação
de eventos lá discutidas. Após identificar o que foi
comentado na seção, procure entender cada linha de código.
Para isso, bata o exemplo e visualize o resultado que terá
abrindo uma página com o código em um navegador. Use
quaisquer duas figuras que você queira trocando o nome das
suas figuras pelo das exemplificadas no código. "Clique"
sobre as imagens e sobre o fundo do documento para ver o
que acontece.
Agora responda: o que você faria para o evento se propagar
apenas sobre uma das figuras?
Verifique se você acertou sua resposta fazendo a alteração
correspondente no código e vendo se realmente funciona.
Resumo:
Nesta aula você conheceu uma das coisas mais importantes

na programação dinâmica: os eventos. Viu como eles podem
ser utilizados para dar interatividade as suas páginas e
aprendeu os diversos tipos e modelos de tratamento de
eventos. Na próxima aula veremos uma das principais
aplicações de JavaScript: o tratamento de formulários.
16
Auto-avaliação:
Quantos conceitos novos e quantas novas possibilidades! Não

se preocupe se não ficar muito claro, este assunto é realmente
complexo e você só ficará seguro após ter sido um criador de
algumas páginas ou pelo menos ter usado cada um dos tipos
de eventos algumas vezes. Retorne a esta aula sempre que
precisar usar eventos.
17
Aula 18: Crítica de Formulários
Nesta aula você verá os diversos objetos relacionados aos formulários.

Veremos como é possível usar os métodos e propriedades dos diversos
elementos de formulários e seus eventos para verificar a correção dos dados
digitados pelo usuário.
Objetivos:
- as propriedades e métodos do objeto form;
- os vetores de elementos do formulário;
- como fazer crítica de campo e
- crítica de formulário.
Pré-requisitos:
A aula 7 do primeiro módulo e as aulas 12 a 17 do segundo são importantes
para esta aula.
1. Formulários como Objeto de JavaScript

Uma das principais aplicações de JavaScript é a possibilidade de criticar dados
fornecidos pelo usuário através de formulários HTML. O conteúdo dos
formulários pode ser acessado pelo script através de instâncias do objeto Form,
guardadas no array forms do objeto Document. Um formulário também
pode ser acessado pelo nome definido no atributo name da tag form.
<FORM NAME=“meuform”>
</FORM>//definiu o formulario
....
document.meuform //acesso pelo nome
document.forms[0] //acesso pelo array
O objeto Form tem as propriedades e métodos descritos nas tabelas 18.1 e

18.2. Além das formas de tratamento de eventos que recebem por herança dos
elementos HTML, o objeto Form também responde aos eventos da tabela 18.3.
Tabela 18.1 - Propriedades do objeto Form

action String especificando o atributo action do formulário (URL
de submissão).
elements[] Array dos elementos de entrada: text, radio,
button, checkbox etc.
encoding String especificando o método de codificação usado para os
dados do form.
length Número de elementos do formulário.
method String especificando o método de envio.
name O nome do formulário.
target String com o nome do frame ou window no qual os resultados
de submissão do form devem ser mostrados.
1
Tabela 18.2 - Métodos do objeto Form
Método Descrição
submit() Envia o formulário ao servidor.
reset() Redefine cada campo com os valores default.
Tabela 18.3 - Eventos do objeto Form

Evento Descrição
onSubmit Permite associar uma função ao submit do formulário.
onReset Permite associar uma função ao reset do formulário.
É possível associar funções aos eventos submit ou reset do formulário,

que serão ativadas quando os respectivos botões forem selecionados. Através
da captura do evento submit é possível fazer a verificação final nos campos
do formulário, evitando o envio se ainda houver algum erro. Se alguma destas
funções retornar FALSE a ação correspondente é cancelada. No exemplo a
seguir o navegador pede uma confirmação se o usuário quer mesmo limpar um
formulário:
onReset=
“return confirm(‘Quer mesmo apagar?’)”
2. Elementos de um Formulário
O objeto Form, como já mencionado, contém um array, onde são armazenados
os elementos de interação do formulário. Um elemento pode ser acessado pelo
array elements ou pelo nome definido no HTML. Por exemplo, dado o
formulário:
<FORM NAME=“meuform”>
<INPUT TYPE=TEXT NAME=“endereco”>
</FORM>
As duas formas a seguir são equivalentes para referenciar o elemento área de

entrada de texto:
document.meuform.endereco
document.forms[0].elements[0]
É possível determinar o número de elementos de um formulário através da

propriedade length de Form. Como os elementos estão armazenados em
um array (que também tem propriedade length), as duas formas abaixo são
equivalentes:
document.forms[0].elements.length
document.forms[0].length
Convém lembrar, porém, que forms também é um array e, portanto, se

utilizarmos length sem indicar um índice estamos na verdade acessando o
número de formulários do documento, como no exemplo abaixo:
document.forms.length
Cada posição do vetor elements pode conter qualquer um dos elementos
2
de interação que vimos em HTML, que são:
• Campos de texto: text, password, hidden
• Áreas de texto: textarea
• Botões: button, reset, submit
• Caixas de seleção: checkbox
• Botões de opção: radio
• Listas drop-down: select
2.1. Campo de Texto
As tabelas 18.4 a 18.6 apresentam as propriedades, métodos e eventos dos

campos de texto.
Tabela 18.4 - Propriedades de text, password e hidden

name Nome associado ao elemento.
value Valor digitado pelo usuário.
defaultValue Valor a ser exibido no elemento após um reset.
Tabela 18.5 - Métodos de text, password e hidden

Método Descrição
focus( ) Coloca o elemento ativo (em foco).
blur() Coloca o elemento inativo (remove o foco).
select() Seleciona o texto no campo.
Tabela 18.6 - Eventos de text, password e hidden

Evento Descrição
onFocus Ocorre quando o campo recebe o foco.
onBlur Ocorre quando o campo perde o foco.
onChange Ocorre quando o valor do campo muda.
onSelect Ocorre quando o usuário seleciona o texto do campo.
Nas linhas que seguem apresenta-se um exemplo de utilização de alguns dos

elementos das tabelas anteriores. A figura que acompanha o exercício 1 no
final desta aula pode lhe dar uma idéia do que ocorre quando este exemplo é
visualizado em um browser.
<html>
<head>
<title>Critica de campo</title>
<script language="javascript">

</script>
</head>
<body bgcolor=navy text=yellow>

<form>
<H2>Critica de campo</H2>
<TABLE>
<TR>
<TD>Nome:</TD>
<TD><INPUT TYPE="text" NAME="nome" VALUE=""></TD>
</TR>
<TR>
<TD>Telefone:</TD>
<TD><INPUT TYPE="text" NAME="telefone" VALUE=""
onChange= "VerificaTelefone(this)"></TD>
</TR>
</TABLE>
<P>
<input type="button" value="Enviar">
<input type="reset" value="Apagar">
</P>
</form>
</body>
</html>
2.2. Botões tipo: button, reset e submit
As tabelas 18.7 e 18.8 apresentam as propriedades e métodos dos botões tipo:

button, reset e submit.
Tabela 18.7 - Propriedades dos botões tipo: button, reset e submit

value Valor exibido no botão.
Tabela 18.8 - Eventos dos botões tipo: button, reset e submit

Evento Descrição
onFocus Ocorre quando o botão recebe o foco.
onBlur Ocorre quando o botão perde o foco.
onClick Ocorre quando o botão é selecionado com o mouse.
onMouseDown Ocorre quando o botão do mouse é pressionado.
onMouseUp Ocorre quando o botão do mouse é levantado.
4
2.3. Botões tipo checkbox
As tabelas 18.9 a 18.10 apresentam as propriedades e métodos dos

checkbox.
Tabela 18.9 - Propriedades dos botões checkbox

checked Booleano que indica se a checkbox está selecionada.
defaultChecked Se a checkbox estará selecionada após um reset.
Tabela 18.10 - Métodos dos botões checkbox

Método Descrição
onClick Ocorre quando a checkbox é selecionada com o mouse.
As linhas que seguem exemplificam o uso de alguns dos elementos destas

tabelas, produzindo a figura abaixo.
Figura 18.1 - Exemplo de uso de checkbox
<HTML>
<HEAD>
<TITLE>Exemplo de checkbox</TITLE>
<SCRIPT>
function clicou(campo)
{
if (campo.checked)
alert("O campo está selecionado");
else
alert("Campo desmarcado !");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=beige>
<H1>Exemplo de checkbox</H1>
<FORM>
<INPUT TYPE=checkbox onClick=
"clicou(this)">Marque aqui!
</FORM>
</BODY>
</HTML>
5
2.4. Botões tipo radio
Um grupo de botões de radio (exclusivos) é formado por vários elementos

criados com a tag <INPUT TYPE=RADIO> e o mesmo valor para o atributo
NAME. Estes elementos são tratados em conjunto, pois o seu comportamento
depende do grupo (apenas um dos botões do grupo pode estar selecionado em
um determinado instante de tempo). Como neste objeto é sempre obrigatório a
definição do atributo NAME, o grupo de botões de radio é manipulado através
de um array com este nome no objeto Form. Assim, se no formulário form1
tivermos um grupo de botões de radio chamado radio1, cada exemplo a
seguir mostra a sintaxe correta para:
• Saber o número de botões agrupados
document.form1.radio1.length
• Verificar se o primeiro botão está selecionado
if (document.form1.radio1[0].checked)
• Testar o atributo value do segundo botão
if (document.form1.radio1[1].value==...)
As propriedades deste objeto (tabela 18.11) são muito parecidas com as do

objeto checkbox. A tabela 18.12 mostra os eventos deste tipo de botão.
Tabela 18.11 - Propriedades dos botões de radio

checked Booleano que indica se o botão de radio está
selecionado.
defaultCheck Se o botão estará selecionado após um reset.
ed
Tabela 18.12 - Eventos dos botões de radio

Evento Descrição
onFocus Ocorre quando o botão recebe o foco.
onBlur Ocorre quando o botão perde o foco.
onClick Ocorre quando o botão é selecionado com o mouse.
As linhas de código abaixo exemplificam alguns dos elementos destas tabelas,

que irão gerar uma figura muito parecida com a mostrada no exercício 3 no
final da aula.
<HTML>
<HEAD>
<TITLE>Exemplo de Radio</TITLE>
</HEAD>
function convertField(field)
{
if(document.form1.conversion[0].checked)
field.value=field.value.toUpperCase()
}
function convertAllFields(caseChange)
6
{
with (document.form1)
if (caseChange=="upper")
{
lastName.value=
lastName.value.toUpperCase();
firstName.value=
firstName.value.toUpperCase();
}
}
</SCRIPT>
<BODY BGCOLOR="lightSteelBlue">
<H1>Exemplo de Radio</H1>
<FORM NAME="form1">
<TABLE>
<TR>
<TH ALIGN=LEFT>:Último nome:</TH>
<TD>
<INPUT TYPE="text" NAME="lastName"
onChange="convertField(this)">
</TD>
</TR>
<TR>
<TH ALIGN=LEFT>Primeiro nome:</TH>
<TD>
<INPUT TYPE="text" NAME="firstName"
onChange="convertField(this)">
</TD>
</TR>
</TABLE>
<P>
<B>Valores convertidos para:</B>
<BR>
<INPUT TYPE="radio" NAME="conversion"
VALUE="upper" onClick="if (this.checked)
convertAllFields('upper');">
Maiúsculas
</FORM>
</BODY>
</HTML>
2.5. Listas de Seleção
As listas de seleção (drop-down) são um tipo de elemento de interação que

envolve dois tipos de objeto: o objeto select, que representa a lista, e o
objeto option, que mostra cada uma das opções. As propriedades do objeto
select e seus eventos podem ser observadas nas tabelas 18.13 e 18.15,
enquanto que as propriedades de option se encontram na tabela 18.14.
7
Tabela 18.13 - Propriedades de select
length Número de opções da lista.
options Array com as opções.
selectedIndex Índice da opção atualmente selecionada. Se for uma
lista de seleção múltipla é o índice da primeira seleção.
Tabela 18.14 - Propriedades de option

index Índice no array.
defaultSelected Se a opção estará selecionada após um reset.
selected Booleano que indica se a opção está selecionada.
text Texto exibido na opção.
value Valor associado a opção.
Tabela 18.15 - Eventos de select

Evento Descrição
onFocus Ocorre quando a lista recebe o foco.
onBlur Ocorre quando a lista perde o foco.
onClick Ocorre quando a lista é selecionada com o mouse.
A linguagem JavaScript permite que o select seja modificado após a página

ter sido carregada. É possível:
• modificar o texto que está sendo exibido na opção
document.f1.s1.options[2].text="novo";
• modificar o valor atribuído à opção
document.f1.s1.options[1].value="v1";
• criar uma nova opção
document.f1.s1.options[8] = new option ("texto" ,
"valor");
• remover uma opção
document.f1.s1.options[4] = null;
Para criar uma nova opção é preciso criar um novo objeto option através do
operador new. O construtor de option pode receber até 4 parâmetros
(opcionais):
• texto que será exibido
• valor da opção
• defaultSelect
• indicação se estiver selecionada
A remoção de uma opção é feita atribuindo à posição respectiva do array

options o valor null. Qualquer opção pode ser removida, inclusive aquela
que está atualmente selecionada. As linhas de código a seguir ajudam a
entender isso:
8
<HTML>
<HEAD>
<TITLE>Alterando Itens</TITLE>
function inclui()
{
with (document.formulario)
{
if (novo.value == "")
{
alert("Novo item ruim");
return;
}
var nop = lista.length;
lista.options[nop]=new
Option(novo.value);
}
}
function escreve()
{
{
var ind = lista.selectedIndex;
selecionado.value =
lista.options[ind].text
}
}
function remove()
{
{
lista.options[ind] = null;
}
}
function muda()
{
{
if (novo.value == "")
{
alert("Novo item ruim!");
return;
}
lista.options[ind].text = novo.value;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=lightsteelblue
onLoad="escreve()">
<H2>Alterando Itens da Lista</H>
<FORM NAME="formulario">
<TABLE>
<TR>
<TD>Item Selecionado:
<TD><INPUT TYPE=text NAME=selecionado
onFocus="this.forms.novo.focus()">
9
<TD><INPUT TYPE=BUTTON
VALUE="Acrescentar"
onClick="inclui()">
<TR>
<TD>Item a Acrescentar, Apagar ou Mudar:
<TD><INPUT TYPE=text NAME=novo>
VALUE="Apagar Item"
onClick="remove()">
<TR>
<TD>Lista :
<TD>
<SELECT NAME=lista onchange="escreve()">
<OPTION checked>Abacaxi
<OPTION>Banana
<OPTION>Laranja
<OPTION>Goiaba
</SELECT>
VALUE="Mudar Item "
onClick="muda()">
</TABLE>
</FORM>
</BODY>
</HTML>
As linhas de código do exemplo acima produzem a página mostrada na figura

18.2 que segue.
Figura 18.2 - Exemplo com options .
2.6. Área de Texto
Área de texto é um elemento de interação bastante versátil e pode ser utilizado

para exibição de mensagens geradas durante a execução do JavaScript.
Escrever mensagens numa área de texto tem uma vantagem em relação ao
document.write, pois, mesmo que a página já esteja completa, é possível
acrescentar texto à página sem que se perca o conteúdo anterior (um write
após o carregamento da página faz com que seja criado um novo documento,
apagando o anterior). As propriedades, métodos e os eventos deste objeto se
encontram nas tabelas 18.16 a 18.18.
10
Tabela 18.16 - Propriedades das áreas de texto
value Valor digitado pelo usuário.
defaultValue Valor a ser exibido no elemento após um reset.
Tabela 18.17 - Métodos das áreas de texto

Método Descrição
focus( ) Coloca o elemento ativo (em foco).
blur() Coloca o elemento inativo (remove o foco).
select() Seleciona o texto no campo.
Tabela 18.18 - Eventos das áreas de texto

Evento Descrição
onChange Ocorre quando o valor do campo muda.
onSelect Ocorre quando o usuário seleciona o texto do campo.
onKeyDown Ocorre quando uma tecla é pressionada.
onKeyUp Ocorre quando uma tecla é solta.
onKeyPress Pressionar e soltar uma tecla.
3. Crítica do Formulário
Numa página com um formulário, a utilização de JavaScript permite auxiliar o
usuário e evitar que ele cometa erros de preenchimento. Este procedimento é
chamado de crítica do formulário.
A crítica do formulário pode ser realizada após a modificação do valor de

algum elemento de interação (para isto utiliza-se, normalmente, o evento
onChange) ou após o usuário ter pedido ao navegador para enviar o
formulário (para isso utiliza-se o evento onSubmit do formulário ou o
evento onClick do botão de submit).
Normalmente, é necessário fazer os dois tipos de verificação: a crítica do

campo permite detectar erros imediatamente após o usuário tê-los cometido e a
crítica do formulário permite detectar erros resultantes da interdependência
de dois ou mais campos.
O exemplo a seguir ilustra como é feita a crítica de um campo do formulário.

A função do exemplo testa se um campo de texto (no caso um endereço) foi
preenchido e informa ao usuário que o campo é obrigatório, caso ele não tenha
sido definido:
function critica(campo)
{
if (campo.value.length == 0)
11
alert(‘Campo ’ + campo.name +
‘ nao preenchido.’);
}
...
<form ...>
<input type=text name=endereco
onChange=“critica(this)”>
...
</form>
O exemplo a seguir ilustra a crítica final de um formulário. Este exemplo

mostra um formulário onde deve-se digitar duas datas, com campos para dia,
mês e ano. Antes de enviar o formulário é feita a verificação se a data de saída
é posterior a data de entrada. Isso só pode ser feito quando o formulário já está
pronto, pois não se pode forçar a ordem do usuário definir o valor dos campos:
function criticar()
{
with (document.forms[0])
{
var dataent = new Date( ano_ent.value,
mes_ent.value,
dia_ent.value);
var datasai = new Date(ano_sai.value,
mes_sai.value,
dia_sai.value);
if(dataent.getTime()>=datasai.getTime())
{
alert("Saida deve ser posterior" +
" a entrada !");
return false;
}
}
return true;
}
. . .
<form action="/cgi-bin/x"
onSubmit=”return criticar()">
. . .
</form>
Alguns tipos de crítica podem servir inclusive para modificar o valor de um

campo de forma a ficar coerente com o valor de outro. O exemplo a seguir
mostra como a seleção da nacionalidade como estrangeira causa a "limpeza" do
campo naturalidade:
<form name=“meuform” ...>
<P>Nacionalidade:<br>
<input type=“radio” value=“1” name=“nacionalidade”>
Brasileiro<br>
<input type="radio" value="2" name=“nacionalidade”
onClick=”document.meuform.naturalidade.value = “”>
Estrangeiro
<P>Naturalidade:
12
<input type=“text” name=“naturalidade”
onChange=“validaNaturalidade(this)”>
<br>
…
</form>
Exercícios:
1. Digite em seu computador o código que foi mostrado na seção 2.1 desta
aula.
Primeiro faça a página ser carregada na forma original. Depois modifique o
código para:
• incluir um campo de texto para ser fornecido à cidade (veja figura 18.3 que
segue);
• usando a idéia de verificação do telefone, faça uma função para verificar se
só letras foram digitadas;
• use esta função para verificar o nome e também o novo campo que você
criou.
Figura 18.3 - Tela relacionada ao exercício 1
2. Amplie a idéia de verificação de checkbox, que gerou a figura mostrada

na seção 2.3, incluindo no exercício anterior 3 destes botões, com alguma
sugestão para verificação (Por exemplo: "permite que divulguemos seu
telefone"; "permite divulgação do seu nome", "não permite qualquer
divulgação"). Verifique se fazem sentido as opções do usuário (por exemplo: a
última exclui as duas primeiras no exemplo de sugestão).
3. Utilize as linhas de código do exemplo de botões de radio da seção 2.4 para

entender a forma de uso da propriedade checked. Após entender bem o
exemplo, amplie as opções para também passar as letras para "Minúsculas" ou
deixá-las "Sem conversão" (inalteradas) , como se mostra na figura 18.4 que
segue.
13
Figura 18.4 - Tela relacionada com o exercício 3.
4. Utilizando a idéia do exemplo da seção 2.5, inclua no formulário do

exercício 1 uma lista com alguns estados do país, ao lado da cidade. Inclua
também a possibilidade de ter um campo para o usuário incluir um novo estado
caso queira.
5. Após entender bem a seção 3, inclua no exercício 4 uma forma de

verificação final do formulário. Pode ser, por exemplo, a verificação de que o
usuário não esqueceu de preencher os campos de nome e endereço.
Resumo:
Nesta aula você aprendeu a usar os objetos relacionados ao formulário para

verificar itens ligados ao seu preenchimento pelo usuário. Estamos quase
terminando este curso! Na próxima aula veremos como manipular os frames e
janelas. Até lá!
Auto-avaliação:
Esta aula, como a anterior, é bastante complexa, não? Mas, como você se saiu
nos exercícios? Retorne aos pontos onde sentiu mais dificuldade, e não se
preocupe muito se ainda não estiver bem seguro mesmo depois disto. Devemos
ser sinceros e lhe dizer que o assunto é bem amplo mesmo. Afinal, já estamos
acabando o curso e só a prática lhe dará a sensação de completa segurança...
14
Aula 19: Manipulação de Janelas e Frames
As formas de programação que vimos até aqui envolviam apenas uma janela ou
frame. Aplicações reais, geralmente, envolvem múltiplas janelas ou frames.
Nesta aula explicaremos como as diversas janelas e frames podem interagir e
cooperar umas com as outras e com os programas que nelas são executados.
Objetivos:
- como usar, abrir e fechar janelas;
- como programar com temporizadores;
- a usar o objeto frame;
- como fazer referências entre frames.
Pré-requisitos:
As aulas anteriores.
1. Manipulando Janelas
O principal objeto da hierarquia do JavaScript, como já comentamos diversas
vezes, é o objeto Window e abaixo dele encontram-se todos os elementos de
uma página HTML que podem ser manipulados através da linguagem
JavaScript. Além do objeto representando a janela corrente, cada janela do
browser e cada frame dentro da janela são representados também por um objeto
Window. Nesta aula exploraremos as propriedades e métodos deste objeto e
mostraremos algumas interessantes técnicas de programação com janelas e
frames.
As principais propriedades do Window são os arrays de formulários, links,

âncoras e imagens da página. Além destes arrays de objetos, esse objeto
contém as propriedades mostradas na tabela 19.1 .
1
Tabela 19.1- Propriedades do objeto Window
closed Especifica se a window foi fechada.
defaultStatus Texto com a mensagem mostrada na barra de status
do browser.
document Referência ao objeto Document contido na janela
frames[] Array do objeto Window que representa os frames
dentro da janela.
history Referência ao objeto history da janela
location URL da página sendo exibida, definindo essa
propriedade causa o carregamento de um novo
documento.
name Nome da janela.
opener Janela onde foi aberta a janela atual.
parent Se a janela corrente for um frame, refere-se ao frame da
janela que a contém.
screen Referência ao objeto Screen da janela.
self Referência à própria janela, mesmo que window.
status Mensagem temporária na barra de status.
top Referência à janela top-level que contém a janela
atual.
window Referência à própria janela, mesmo que self.
Não foram incluídas na tabela anterior as diversas propriedades dependentes do

navegador. Este objeto também suporta diversos métodos importantes, como os
mostrados na tabela 18.2.
2
Tabela 19.2- Métodos do objeto Window
Método Descrição
alert() Mostra uma mensagem simples em uma caixa de
diálogo com botão Ok.
blur() Retira o foco de uma janela.
clearInterval() Cancela ou determina a execução periódica de um
/ trecho de código f após um período de intervalo t
setInterval(f,t) milissegundos (f pode conter múltiplos comandos
separados por ";").
clearTimeout()/ Desprograma o timer ou programa o timer para
setTimeout(f,t) executar a função f após t milissegundos.
close ( ) Fecha uma janela.
confirm(p) Apresenta em uma caixa de diálogo à pergunta p e
botões Ok (retorna true) e Cancel (retorna
false).
focus ( ) Coloca o foco numa janela, movendo-a para frente
de todas.
moveBy(dx,dy) Move a janela da posição atual dx pixels para a
direita ou dy pixels para baixo.
moveTo(x,y) Move o canto superior esquerdo da janela para a
posição x y .
open Cria e/ou abre uma janela carregando o documento
(s1,s2,s3,sb) s1, tendo como nome s2 e de acordo com as
(mais detalhes na
seção 1.2) propriedades indicadas em s3, na forma sb .
prompt(s,d) Mostra a string s em uma caixa de diálogo com os
botões Ok e Cancel e um campo de entrada de
texto com a string d. Retorna o texto fornecido.
resizeBy Redimensiona a janela aumentando-a de dx pixels
(dx,dy) na horizontal e dy na vertical.
resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e
y na vertical.
scrollBy(dx,dy) Rola o documento interior à janela para a posição
scrollTo(x,y) x,y ou de um valor dx,dy .
Foram omitidos na tabela acima métodos dependentes do navegador. Os

métodos alert, prompt e confirm (que já foram usados diversas vezes
deste o início deste módulo de nosso curso), assim como a propriedade
location, são métodos que podem ser invocados sem a necessidade de se
indicar o objeto Window. As duas linhas abaixo são portanto equivalentes:
alert(“mensagem ao usuário !”);
window.alert(“mensagem ao usuário !”);
As linhas que seguem exemplificam o uso de location e confirm em uma

aplicação útil: direcionamento de uma página para um novo "endereço".
<HTML>
<HEAD>
<TITLE>Redirecionando automaticamente
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
3

</SCRIPT>
</HEAD>
<BODY onload="redire()">
<H2>Redirecionando automaticamente</H2>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
1.1. Janelas Secundárias
Abrir um documento em uma janela diferente da atual é útil em diversas

situações. Pode se usar este artifício para abrir documentos fora do nosso site e
dessa forma sua página não é sobrescrita por um documento alheio. Outra
utilidade é abrir uma janela com instruções para preencher um formulário, sem
contudo apagar o próprio formulário.
A forma de abrir uma nova janela em JavaScript é através do método open do

objeto Window. Como indicado na tabela 19.2, este método pode receber até
4 parâmetros: s1 ; s2 ; s3 e sb.
O primeiro dos parâmetros de open, s1, é uma string opcional e

representa a URL do documento a ser carregado na nova janela. Se for omitido
ou se for uma string vazia permite a criação de uma página em branco.
O segundo parâmetro é também uma string opcional e corresponde a um nome

para ser atribuído à propriedade name (não pode conter espaços). Se for
fornecido um nome que já existe, o método não irá criar uma nova janela, mas
simplesmente retornará uma referência à janela especificada, sendo neste caso
ignorado o terceiro argumento.
O terceiro parâmetro é opcional e se não for especificado a nova janela terá as

características padrão. O valor deste parâmetro corresponde a uma string
indicando que recursos (separados por vírgula e sem espaços) devem ser
incluídos na janela a ser aberta. A tabela 19.3, a seguir, mostra os recursos que
podem ser definidos, a forma como devem aparecer e seu significado. A
maioria destes recursos deve ter os valores yes ou no. E se apenas
4
aparecerem, isso é, forem incluídas na string, sem qualquer valor, é suposto
que seu valor seja yes. Se não aparecer, o valor da característica é suposto ser
no. Para a largura e altura, os valores devem ser sempre especificados e
correspondem ao número de pixels.
O último argumento ou parâmetro que também é opcional representa um

booleano. Isso é dependendo de sb ser true ou false, a url que será
carregada substituirá ou não a corrente na history do browser.
Tabela 19.3- Recursos possíveis de compor o terceiro parâmetro de

método open do objeto Window
Recurso Significado
height Altura e largura da janela onde o documento será mostrado.
width
titlebar Se a janela terá ou não área de título (yes ou no).
status Se a janela terá ou não barra de status (yes ou no).
scrollbars Se a janela terá ou não barras de rolagem (yes ou no).
resizable Se a janela pode ou não ser redimensionada (yes ou no).
menubar Se a janela terá ou não menu (yes ou no).
location Se a janela terá ou não a barra de endereços (yes ou no).
toolbar Se terá ou não a barra de ferramentas (toolbar) do
browser.
Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo

a seguir ilustra a criação de uma janela de dimensões 400x350, com
scrollbars e sem toolbar, área de endereço e barra de status. Esta
janela será posteriormente referenciada pela variável jan:
var jan = window.open(“outraPag.html”,
“janelaNova”,
“toolbar=no,location=no,”+
“status=no,scrollbars=yes,”+
“width=400,height=350”);
Como a janela principal, as janelas criadas através do open também têm um

document e com o método write é possível escrever nela. O método
focus faz com que a janela seja exibida na frente das outras janelas (mesmo
daquelas que não têm nada a ver com o navegador). Para fechar a janela
utiliza-se o método close. O uso destes métodos é demonstrado nas linhas de
código abaixo:
<HTML>
<HEAD>
<TITLE>Abrindo janelas</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
jan = null;
function Abrir()
{
jan = open("","novaJanela",
"resizable=yes,width=99,height=99");
jan.document.write("<H3>Janela ");
jan.document.write(" Secundária");
jan.document.write("</H3><HR><BR>");
}
5
function Texto()
{
//verifica se pode abrir
if (jan != null && !jan.closed)
{
jan.document.write("<p>Mais texto</p>");
jan.focus();
}
else
Fechada();
}
function Fechada()
{
alert ("Abra antes !");
}
</SCRIPT>
</HEAD>
<BODY bgcolor=lightblue>
<H2>Abrindo nova janela</H2>
<FORM>
<input type="button" value="Abrir Janela"
onclick="Abrir()">
<input type="button" value="Escrever nela"
onclick="Texto()">
<input type="button" value="Fecha-la"
onclick="if (!jan.closed) jan.close()">
</FORM>
</BODY>
</HTML>
A nova janela pode se referir à janela que a criou através da propriedade

opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a
outra, e cada uma pode ler propriedades e invocar métodos da outra.
1.2. Limites de Tempo
O método setTimeout (tabela 19.2) permite programar a execução de uma

função após uma determinada quantidade de milissegundos. Este método
faz com que a função seja executada apenas uma vez. Para executar um
número indeterminado de vezes, basta incluir dentro da função uma nova
chamada ao setTimeout ou usar o método setInterval. É possível
que seja necessário interromper a seqüência de execuções após alguma
condição, o que é feito através do método clearTimeout ou
clearInterval. As duas linhas de código abaixo mostram como devem ser
utilizados este métodos:
tempo = setTimeout("instrucao",tempo);
clearTimeout(tempo);
As linhas de código que seguem mostram como as funções setInterval e

clearInterval podem ser usadas. Você deve salvar o primeiro código no
arquivo exeJanelas.html e o segundo em um arquivo denominado
exeJanelas-a.html, ou mudar as linhas "location=..." para os
nomes que você usou para cada arquivo:

<HTML>
6
<HEAD>
<TITLE>Primeira</TITLE>
function Muda()
{
location='exeJanelas-a.html'
}
</SCRIPT>
</HEAD>
<BODY
onload="mude=setInterval('Muda()',999)"bgcolor="kh
aki">
<H3>Pagina:<FONT SIZE=+4>1</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Segunda</TITLE>
function Muda()
{
location='exeJanelas.html'
}
</SCRIPT>
</HEAD>
<BODY onload="mude=setInterval('Muda()',999)"
bgcolor="gold">
<H3> Pagina :
<FONT SIZE=+4>2</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>
2. Manipulando Frames
Vimos no módulo de HTML que é possível dividir uma janela em várias partes
independentes, chamadas frames. Em JavaScript, um frame se comporta
exatamente como uma janela, tendo as mesmas propriedades e métodos. O
objeto Window tem um array com um objeto para cada frame definido na
janela. Cada frame de uma janela pode se referir a outro usando as
propriedades do objeto Window: frames[], parent e top.(tabela
19.1).
Como foi visto em HTML, é possível que um frame esteja exibindo um
7
documento que cria novos frames. Como os frames são representados por
objetos Window, logo também possuem um array frames[ ], que pode
ser usado para referenciar aos frames deste documento interno. Pode-se assim
simplesmente acumular diversos subníveis de frames.
O exemplo a seguir mostra um arquivo de layout que divide a janela em 2

frames:
<HTML>
<HEAD>
<TITLE>Exemplo de frames</TITLE>
</HEAD>
<FRAMESET COLS="75%,25%">
<FRAME NAME=“fra” SRC="pa.htm">
<FRAME NAME=“flay” SRC="lay.htm">
</FRAMESET>
</HTML>
Se o arquivo lay.htm também fosse um arquivo de layout com o código

mostrado a seguir:
<HTML>
<HEAD>
<TITLE>Arquivo lay.htm</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAME NAME=“frb” SRC="pb.htm">
<FRAME NAME=“frc” SRC="pc.htm">
<FRAME NAME=“frd” SRC="pd.htm">
</FRAMESET>
</HTML>
a exibição do primeiro arquivo produziria uma página com a seguinte

aparência:
frb
frc
fra
frd
Ao observar estes arquivos de layout é possível notar que a divisão em frames

é feita em dois níveis: no primeiro nível, a janela é dividida em duas colunas (2
frames); no segundo nível, o segundo frame é subdividido em três linhas (3
frames). O objeto Window tem portanto um array de dois elementos, sendo
que o segundo elemento do array (window.frame[1]), por sua vez, tem
um array de frames com três elementos. Como cada frame pode ser acessado
pelo array frames ou pelo nome definido no atributo name, as duas formas
de escrever uma frase no frame de nome frb mostradas abaixo são válidas e
têm o mesmo significado:
8
window.frames[1].frames[0].document.write(“uma frase
!”);
window.frames[1].frb.document.write
(“uma frase !”);
Cada window tem a propriedade parent que se refere ao frame que

contém o seu arquivo de layout. Assim, o primeiro frame da coluna esquerda
pode se referir ao seu vizinho como parent.frames[1].
Se um frame está contido dentro de outro frame que é contido por uma janela ,
o frame pode se referir à janela de nível mais elevado por
parent.parent.
A propriedade top é neste caso um simplificador. Não importa quantos

subníveis estejam envolvidos a cada nível de frames, top irá se referir ao
frame que está exibindo o arquivo de layout que causou a abertura de todos os
outros, isto é o de mais alto nível na hierarquia.
Após entender bem as linhas de código abaixo, tente modificá-las para layout
mais complexos, usando para referir-se aos níveis:
• top
• parent.parent
• parent.frames[]
• frames[].frames[].frames[].


<HTML>
<HEAD>
<TITLE>Escrevendo em frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,20%,20%,20%">
<FRAME SRC="ex-a.html" NAME="f1">
<FRAME SRC="ex-b.html" NAME="f2">
<FRAME SRC="ex-c.html" NAME="f3">
<FRAME SRC="ex-d.html" NAME="f4">
</FRAMESET>
<NOFRAMES>
<P>Browser inadequado a frames</P>
</NOFRAMES>
</HTML>
<HTML>

<HEAD>
<TITLE>Escrevendo em Frames</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H1>Escrevendo em Frames:</H1>
<I>Em que frame quer escrever?</I>
<FORM>
<INPUT TYPE="BUTTON" VALUE="f2" onclick="n1()">
</FORM>
</BODY>
</HTML>
<HTML>

<HEAD>
<TITLE>Frame 2</TITLE>
</HEAD>
<BODY>
<H2>f2</H2><br>frames[1]
</BODY>
</HTML>
<HTML>

<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>

<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
10
Exercícios:
1. Utilize o exemplo apresentado no final da seção 1 e visualize o resultado

que terá se trocar as linhas do exemplo "novo-endereco.html" pelo
nome de uma página qualquer.
2. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no
exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem
algum dos parâmetros de open para verificar as formas padrão.
3. Use os métodos setTimeout() e clearTimeout() para gerar uma

seqüência de 3 janelas que se referenciam recursivamente (isto é, onde a
primeira chama a segunda, e a segunda chama a terceira e esta retorna a
primeira) enquanto o usuário não apertar algum botão para parar o processo.
(Dica: você pode usar a mesma estrutura dos dois arquivos do final da seção
1.2 ampliando a estrutura agora para 3 arquivos e trocando os métodos lá
usados de manipulação de tempo!)
4. Depois de visualizar e entender bem as formas de referência a frames. Faça o

sugerido no final da seção 2. Isto é, usando o exemplo completo apresentado,
transforme os frames para terem diversos layout e subníveis de forma a
entender bem as formas de manipulação entre os diversos níveis.
Resumo:
Nesta aula, você aprendeu a usar diversas janelas e frames. Conheceu as

formas de usar temporizadores. Podemos dizer que está quase pronto para ser
um eficiente programador em JavaScript. Há pouquíssimo a ver agora!
Estamos quase lá....
Auto-avaliação:
Voltamos a dizer que a complexidade do assunto neste final do curso não deve
assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um
pouco obscuros.
11
Aula 20: Cookies
Chegamos ao final de nosso curso! Nesta última aula

explicaremos como usar uma propriedade do objeto
Document que, certamente, você já deve ter encontrado em
suas "navegações" na Web, uma propriedade tão importante
que merece uma aula só para ela.
Objetivos:
- o que são cookies e quais suas limitações;
- como usar, ler e armazenar cookies;
- a usar as funções globais escape e unescape.
Pré-requisitos:
As aulas 4, 13, 14 e 16 são especialmente importantes para o
bom entendimento desta aula.
1. Uma Visão Geral dos Cookies

Um problema existente na comunicação entre o cliente e o
servidor é que, a princípio, não é possível para o servidor
saber se é a primeira vez que um cliente solicita uma
determinada página ou se ele já visitou anteriormente esta e
outras páginas do site. Cada requisição de página é isolada,
não mantendo relação com outras requisições. Para que seja
possível estabelecer uma ligação entre várias conexões ao
servidor é preciso conhecer o “estado” atual do cliente. Estes
estados podem ser: nunca visitou, já visitou a página que está
pedindo ou já visitou outra página do site.
Para resolver este problema, um servidor, quando responde a

um pedido, pode enviar uma informação que será armazenada
no cliente solicitante. Numa próxima comunicação deste
cliente, esta informação é enviada de volta para o servidor,
permitindo que este possa conhecer então o “estado” do
cliente. Esta informação inclui também um prazo de validade
após o qual ela é esquecida pelo cliente.
Essa informação de estado que é trocada entre o cliente e o

servidor é o que chamamos de cookie. Por que este nome
tão estranho? Apesar de não ter muito sentido, ele tem sido
usado historicamente em computação para designar uma
pequena quantidade de dados, geralmente privilegiados.
Um cookie nada mais é que um par do tipo nome=valor e
funciona como uma variável que o servidor guarda no cliente.
O nome serve para o servidor indicar qual informação que
deseja recuperar. Por exemplo, se o servidor desejasse
armazenar o nome do usuário que está fazendo requisições
poderia guardar na máquina do cliente o cookie
“usuario=maria”. Sempre que este cliente fizesse um pedido a
este servidor enviaria também a informação “usuario=maria”.
A possibilidade de ter o estado do cliente armazenado de

forma persistente aumenta em muito a capacidade das
aplicações de redes baseadas no modelo cliente/servidor. Este
mecanismo simples se mostra uma ferramenta bastante
poderosa, possibilitando o surgimento de aplicações
interessantes, como por exemplo: comércio eletrônico. Sites
de compras, podem armazenar agora informação sobre a
identificação do usuário, seus pedidos, suas preferências ou
os artigos mais selecionados. Esta informação pode ser
mandada de volta a cada conexão, livrando o usuário de
datilografar de novo sua identificação a cada contato. Os sites
podem armazenar as preferências do usuário no cliente, e
podem usá-las toda vez que ele conectar.
2. Cookies em JavaScript
A informação contida nos cookies pode ser manipulada
pelas mais variadas tecnologias envolvidas em WEB. A
linguagem JavaScript também fornece aos programadores
este recurso, permitindo a sua manipulação através da
propriedade cookie do objeto Document.
Na tabela 16.1 vimos que o objeto Document tem a

propriedade cookie, mas ela não foi discutida quando
tratamos deste objeto. Como já dá para imaginar, esta
propriedade permite que possamos escrever e recuperar as
informações guardadas em um cookie.
O tipo de dado guardado nesta propriedade é sempre uma

string mas quando estamos escrevendo seu valor devemos
interpretá-la de forma diferente de quando o estamos lendo.
Quando atribuímos um valor a document.cookie
estamos definindo apenas o valor de um único cookie. Já
quando consultamos document.cookie obtemos uma
string com todos os cookies visíveis por aquela página,
separados um do outro pelo caracter ponto e vírgula,";".
A sintaxe que devemos utilizar para definir o valor de um

cookie para posterior recuperação é:
document.cookie=”nome=valor;EXPIRES=data;
PATH=caminho;DOMAIN=domínio;SECURE”
Na linha acima, as palavras escritas em maiúsculas são

palavras reservadas e devem ser respeitadas. Já as palavras
escritas em minúsculas são valores definidos por quem está
criando o cookie. Esta sintaxe descrita acima define cinco
tipos de informação associada a um cookie (parâmetros ou
atributos separados por ponto e vírgula). O primeiro
parâmetro é o cookie propriamente dito e é o único
obrigatório. Os quatro últimos parâmetros controlam a
duração, visibilidade e segurança do cookie. Vejamos, a
seguir, o significado de cada um destes parâmetros.
2.1. O Atributo: nome=valor
A forma mais simples de criar na máquina do usuário um

cookie identificado pela string nome é atribuir a
document.cookie o par nome=valor (Sem especificar
os demais parâmetros). O exemplo a seguir mostra uma linha
de código que definiria o cookie de nome usuario
atribuindo a ele o valor Maria:
document.cookie = “usuario=Maria”;
Se numa linha posterior aparecer novamente uma referência à

propriedade document.cookie, desta vez atribuindo o
valor “codigo=123” como mostrado no exemplo a seguir:
document.cookie = “codigo=123”;
o cookie usuario não seria destruído, permanecendo

armazenado com o valor Maria, e seria guardado um novo
cookie de nome codigo e valor igual a 123. No entanto,
se algumas linhas adiante novamente for feita uma referência
à propriedade document.cookie, desta vez atribuindo o
valor “codigo=490” como mostrado no exemplo a seguir:
document.cookie = “codigo=490”;
o cookie codigo seria mantido, só que agora com o valor

490 e não mais 123.
As linhas de código a seguir ajudam a entender o processo de

escrita e incremento da propriedade cookie. Visualize o
efeito delas em seu browser:
<html>
<head>
<title>Criando Cookie simples</title>
</head>
<body bgcolor="tan">
<SCRIPT language="Javascript">

</SCRIPT>
</body>
</html>
Tanto o nome quanto o valor são formados por strings que

não podem conter os caracteres ponto-e-vírgula, vírgula,
espaço em branco ou porcento. Mesmo assim, eventualmente,
pode haver a necessidade de colocar tais dados no parâmetro.
Quando isto ocorre, eles devem ser substituídos por uma
seqüência codificada na forma %XX, onde XX é o valor
hexadecimal do código ASCII do caracter que se deseja
representar. Antes que você fique preocupado, imaginando
que terá de fazer uma função em JavaScript para converter os
caracteres proibidos para a codificação hexadecimal, saiba
que esta função já existe na linguagem e falaremos dela mais
adiante neste capítulo.
Experimente incluir ";" no valor de algum dos cookies do

exemplo anterior e verifique o que vai ocorrer.
2.2. O Atributo: EXPIRES=DATE
Já falamos na seção anterior que basta definir o primeiro

parâmetro (nome=valor) para criar um cookie. Porém,
talvez você tenha notado que se abrir a página do exemplo e
sair do navegador depois, quando abrir novamente o mesmo
documento, os cookies que você definiu anteriormente não
aparecem mais definidos. Isso ocorre pois, quando nada é
dito em contrário, um cookie somente é armazenado
durante a sessão do navegador em que foi criado, ou seja,
Nota: há um bug no enquanto o browser estiver sendo executado.
Netscape Navigator
versão 1.1 e
anteriores. Só
Como muito provavelmente não é isso que você deseja,
cookies cujo existe o parâmetro opcional Expires. Este atributo recebe
atributo path seja como valor uma data num formato pré-determinado, com a
explicitamente fixo validade do cookie. Uma vez alcançada esta data, o
para " / " será navegador automaticamente apaga o cookie.
armazenado
corretamente entre
sessões, se eles A data deve ser formatada como: Wdy, DD-Mon-YYYY
tiverem um atributo HH:MM:SS GMT, onde:
expires. • Wdy é o dia da semana em inglês.
• DD é o dia do mês.
• Mon é o nome do mês em Inglês.
• YYYY é o ano com 4 dígitos.
• HH é a hora.
• MM é o número de minutos.
• SS é o número de segundos.
• O único tempo legal é GMT.
• O separador entre os elementos da data deve ser hífen.
Antes de ficar preocupado imaginando que vai ter de fazer

uma função para converter uma data para este formato, saiba
que ela já existe. É um método da classe Date chamado
toGMTstring().
2.3. O Atributo: PATH=CAMINHO
O atributo de path (caminho em inglês) é usado para

especificar o subconjunto de URLs em um domínio para o
qual o cookie é válido. Se você definir um valor para
path, qualquer página do mesmo domínio que tenha o
mesmo caminho (ou seja, esteja no mesmo diretório ou em
um subdiretório) poderá acessá-lo.
Este atributo também é opcional e caso não tenha sido

especificado será assumido o caminho do documento que
criou o cookie. Isso é, ele estará acessível à página que o
criou e às outras que estiverem no mesmo diretório ou em
algum subdiretório deste. Normalmente, é o que se deseja.
Por exemplo, se o cookie foi criado pela página:
http://virtual.com.br/dir/index.htm
ele será por default visível também na página (localizada no

mesmo diretório):
http://virtual.com.br/dir/secretario.htm
e também na página (localizada num subdiretório):
http://virtual.com.br/dir/finan/index.htm
mas não na página (não faz parte do caminho da página que

criou o cookie):
http://virtual.com.br/index.htm
Se o path for definido como "/", o cookie será visível a

todas as páginas do servidor http://virtual.com.br,
pois este caminho é a raiz da hierarquia de diretórios (o
diretório inicial), e todas as páginas do mesmo domínio estão
em subdiretórios da raiz.
A forma de execução da verificação é a seguinte: quando um

cookie já passou na comparação de domínio, então o
componente pathname da URL é comparado com o atributo
de caminho, e se há um casamento, o cookie é considerado
válido e é enviado junto com o pedido de URL.
Quando forem enviandos cookies a um servidor, todos os

cookies com um caminho mais específico deveriam ser
enviados antes de cookies com caminho menos específico.
Por exemplo, um cookie "nome1=valor1" com um
caminho que inicia em "/" deveria ser enviado depois de um
cookie "nome1=valor2" com um caminho que inicia de
"/bar", se ambos devem ser enviados.
2.4. O Atributo: DOMAIN=DOMINIO
O valor default de domínio é o nome do host do servidor que

contém a página que criou o cookie. Isto é, por padrão são
acessíveis somente às páginas do mesmo servidor Web que as
definiu.
Grandes sites podem, no entanto, querer compartilhar

cookies entre seus servidores. Por exemplo, é o caso do
servidor de: pedidos.lojavirtual.com.br precisar
ler cookies de catalogo.lojavirtual.com.br.
Neste caso o atributo domain deve ser definido como
"lojavirtual.com.br" e o atributo path como "/",
na página que criou o cookie em
catalogo.lojavirtual.com.br, de modo que ele
ficará disponível a todos os servidores do domínio
lojavirtual.com.br. Nunca podem ser definidos
domínios diferentes do domínio do servidor inicial.
A forma como isso é executado é: quando for procurando na

lista de cookies válidos, uma comparação dos atributos de
domínio do cookie é feita com o nome do domínio na
Internet do host no qual a URL foi buscada. Se há uma
"identidade da terminação", então o cookie passará pela
comparação do caminho, path, para ver se deverá ser
enviado. "Identidade da terminação" significa que o atributo
do domínio é comparado com a terminação para ter
completamente qualificado nome de domínio do host. Assim,
um atributo do domínio "lojavirtual.com.br" deve
casar com os nomes de host
"catalogo.lojavirtual.com.br" como também
com "envia.pedidos.lojavirtual.com.br".
Só hosts dentro do domínio especificado podem definir um

cookie para um domínio, e domínios têm que ter pelo
menos dois (2) ou três (3) pontos para prevenir domínios da
forma: ".com ", ".edu ", e ".gov.br". Se o domínio
estiver dentro de um dos sete domínios de nível especial só
requer dois pontos apenas. Qualquer outro domínio requer
três pelo menos. Os sete domínios especiais são: "COM ",
"EDU ", "NET ", "ORG ", "GOV ", "MIL ", e
" INT ".
2.5. O Atributo: SECURE
O último atributo é um booleano, que especifica como os

valores do cookie são transmitidos na rede. Se secure
não é especificado, o cookie é enviado mesmo nos canais
inseguros, ou seja, é transmitido normalmente em qualquer
conexão HTTP. Se um cookie está especificado com true
em secure, só será transmitido se os canais de
comunicação com o host forem seguros, isto é se o browser e
o servidor forem conectados via um protocolo seguro.
Atualmente, isto significa que cookies seguros só serão
enviados a servidores HTTPS (HTTP sobre SSL).
3. As Funções JavaScript escape e unescape
As funções globais escape(s) e unescape(s),
codificam ou decodificam uma string s para transmissão. O
valor de retorno de escape(s) é uma cópia de s
codificada, não sendo alterada a string s original.
A estrutura de codificação usada é: se algum caracter de s for

• um espaço em branco;
• um símbolo de pontuação;
• um caracter com acento; ou
Vimos • um caracter diferente de letras ou números ASCII
hexadecimal na então este caracter será convertido para a forma %XX, onde
aula 4!
XX são dois dígitos em hexadecimal que representam o
código Latin-1 (ISO 8859-1) do caracter.
Por exemplo, "!", é codificado com 33 em Latin-1, que é

o hexadecimal 21 (2 x 16 +1 = 33). Espaço em
branco é codificado como %20. Assim o resultado de:
escape("Bom dia!);
será a string codificada: Bom%20dia%21
A utilidade desta função é assegurar que a string seja portável

em todos os computadores e transmissível através de toda a
rede, independentemente de como é utilizada em cada lugar.
unescape(s) também é uma função embutida em

JavaScript, e não um método de qualquer objeto. Ela
decodifica uma string codificada por escape(s),
retornando a string obtida através de busca e substituição de
seqüências de caracteres na forma %XX, onde XX são dois
dígitos em hexadecimal. Cada seqüência achada deste tipo é
substituída pelo caracter Latin-1 cujo código corresponde a
estes dígitos. Assim, unescape("Bom%20dia%21")
retornará "Bom dia!".
4. Armazenando Cookies
Vamos fixar melhor o que já vimos, revendo os

procedimentos para criação de um cookie.
Para associar o valor de um cookie ao documento corrente,

simplesmente se define a propriedade cookie com uma
string que tenha a forma nome=valor. Por exemplo, as
linhas abaixo dão ao nome versao o valor 2:
document.cookie="versao=2".
Assim, da próxima vez que se ler a propriedade cookie, o
par nome/valor que foi armazenado será incluído na lista
de cookies do documento.
Os valores dos cookies não podem incluir : ";", ","

ou espaços em branco. Por isso pode ser necessário usar a
função espace(s) para codificar os valores antes de
armazená-los e a função correlata unescape(s) para
decodificá-los quando forem lidos.
Assim, por exemplo, se fosse querido atribuir ao nome

versao a data da última modificação do documento, seria
possível usar:
document.cookie="versao="
O objeto Date +escape(document.lastModified);
foi visto na aula
14. Como você Desta maneira, porém, a duração do cookie seria a da
deve lembrar a sessão atual, sendo perdido quando o usuário saísse do
chamada a
Date() sem
browser. Para criar um cookie mais durável deve-se incluir
argumentos cria um valor adequado ao atributo expires:
um objeto do expires=data.
tipo Date
definido com a A data definida deve ser especificada na forma do método
hora e data do toGMTString() do objeto Date. Assim, por exemplo,
instante da
chamada ao para fazer um cookie durar 3 meses, você poderia usar as
construtor. Veja linhas de código que seguem:
na mesma aula
14 como //constroi-se a variavel com a data atual
funcionam os var duraMes= new Date();
demais métodos //ao valor do mes atual soma-se 3 meses
utilizados no if (duraMes.getMonth()+3>12)
exemplo ao duraMes.setMonth(duraMes.getMonth()+3)
lado. else
{
duraMes.setMonth(duraMes.getMonth()-9);
duraMes.setFullYear(duraMes.getFullYear+1);
}
document.cookie="versao=" +
escape(document.lastModified) +
";expires=" + duraMes.toGMTString();
De maneira semelhante você pode definir os outros

atributos(path, domain e secure)do cookie. Ou
seja você irá adicionando strings com os nomes:
";path=valor_do_caminho;domain=valor_do_d
ominio,secure=false", onde, obviamente os valores
valor_do_caminho e valor_do_dominio serão
substituídos pelos conteúdos apropriados.
Para mudar os valores de um cookie, ele deve ser definido

novamente usando o mesmo nome com um novo valor. O
caminho e nome têm que casar exatamente para que o novo
cookie substitua o antigo. Esta exigência torna difícil para
qualquer um que não o tenha criado, mudá-lo.
Para apagar um cookie, ele deve ser definido novamente,

com uma data de expiração já passada. Para isso, deve-se
usar o mesmo nome, com um valor qualquer. O caminho e
nome têm que "casar" exatamente para que o cookie
expirado substitua o válido. Esta exigência torna difícil que o
cookie seja apagado por qualquer um que não o tenha
criado.
O browser não irá necessariamente apagá-lo de imediato,

assim ele pode permanecer nos arquivos de cookie do
browser depois da data de expiração. Um cliente também
pode apagar um cookie antes de sua data de vencimento
chegar, se o número de cookies exceder seus limites
internos.
5. Limitações
Os dados dos cookies são transmitidos automaticamente

entre browsers e servidores. Sempre se destinam ao
armazenamento de pequeno volume de informação e nunca
para uma comunicação ou transferência freqüente de dados,
de modo que devem ser usados moderadamente.
Há limitações no número de cookies que um cliente pode

armazenar e receber. Estes limites são:
• 300 cookies totais;
• 4 kilobytes por cookie;
• 20 cookies por servidor ou domínio.
Para este último limite, note que o host e os domínios são

tratados como entidades separadas e tem cada um, uma
limitação de 20 cookies para cada, e não combinadas.
Os servidores não esperam que os clientes excedam estes

limites. Quando o limite de 300 cookie ou o de 20 cookie
por limite de servidor é excedido, os clientes deveriam apagar
cookies usados menos recentemente. Quando um cookie
maior que 4 kilobytes é encontrado, este cookie deve ser
cortado para se ajustar, mas o nome deve permanece intacto
contanto que seu tamanho seja menor que 4 kilobytes.
Em geral, a mais restritiva das limitações acima é de 20

cookies por servidor. De modo que não é uma boa idéia
usar cookies separados para cada variável que se deseja
armazenar. Deve-se, ao contrário tentar armazenar diversas
variáveis em uma única denominação.
Podem ser emitidos cookies múltiplos em uma única

resposta do servidor. Instâncias com mesmo caminho e nome
se sobre-escreverão (a mais recente tomando o lugar da outra
instância, precedente). Instâncias com mesmo path, mas
nomes diferentes, serão adicionadas.
Fixando o path com um valor de alto-nível, não anula outras

de caminho mais específicos. Se há múltiplos "casamentos"
para um determinado nome do cookie, mas com caminhos
separados, todos os "casamentos" serão enviados.
6. Lendo Cookies
O valor lido de um cookie pode não ser exatamente o

mesmo escrito. Quando você usa a propriedade cookie em
Estes métodos uma expressão da linguagem JavaScript, o valor retornado é
de String uma string que contém todos os cookies visíveis pelo
podem ser
vistos na aula
documento corrente. Esta string é uma lista de pares
13, tabela nome=valor separados por ";", onde nome corresponde
13.1. ao nome de um cookie e valor é uma string. Não são
incluídos os atributos do cookie.
Para determinar o valor de um nome específico de interesse é

necessário usar os métodos do objeto String:
• String.indexOf();
• String.substring() ou
• String.split()
Estes métodos ajudam a separar a string que retornou em

cada um dos cookies individuais. Uma vez que o valor
tenha sido extraído da propriedade cookie, ele deve ser
interpretado dependendo da forma como foi criado. Por
exemplo, se foi usado escape() na codificação, deve ser
usado unescape() na decodificação.
A linha a seguir mostra como pode ser lida a propriedade

cookie:
var todosOsCookies=document.cookie;
Nesta propriedade são retornados todos os cookies do

documento. Depois disso dever-se procurar os cookies de
interesse pelos seus nomes. Suponha que você esteja
interessado no de nome "versao", a forma de chegar até
seu valor pode ser :
var pos=todosOsCookies.indexOf("versao=";
//obtem indice do inicio do cookie de
//nome "versao"
//se encontrar o cookie extrai seu valor
if(posicao!=-1)
{
var inicio=posicao+7
//inicio do valor
var fim=todosOsCookies.indexof(";",inicio);
//obtem o indice final do valor
if(fim==-1)fim=todosOsCookies.lenght
//le a string com o conteudo do valor
var valor=todosOsCookies.substring(inicio,fim);
//decodifica o valor
valor=unescape(valor);
//agora é possivel usar o valor do ccokie
}
Desta maneira é possível obter o valor de qualquer cookie

desejado. É importante notar que os demais atributos do
cookie nunca podem ser lidos. A string retornada quando a
lemos document.cookie não contém nenhum dado dos
atributos. Estas propriedades apenas podem ser definidas mas
nunca lidas.
Exercícios:
1. Utilizando a idéia do exemplo apresentado no final da

seção 4 e as linhas de código da seção 2.1. crie um cookie
que dure por uma semana e visualize-o sempre que carregar a
página.
2. Misture os métodos apropriados do objeto String para

ler o valor de um cookie específico. Uma boa dica é usar as
linhas de código da seção 6. Depois visualize seu resultado
em um navegador.
3. Inclua no exercício 1 a possibilidade de remover o

cookie de uma semana que foi criado.
Resumo:
Nesta aula você aprendeu a ler e escrever cookies. Uma

importante característica dos navegadores, por isso
merecedora de uma aula inteira! Agora sim você está pronto
para ser um eficiente programador em JavaScript! Parabéns!
Mas lembre-se: nada está parado e especialmente em
computação tudo sempre evolui. Neste assunto aproveite
sempre que possível para aprender mais um pouco. A própria
WWW lhe fornece enormes possibilidades de novos
aprendizados. Sempre que encontrar uma página interessante,
veja seu código fonte, tente entendê-lo e aproveite para seguir
as boas idéias!
Auto-avaliação:
Voltamos a dizer que a complexidade do assunto neste final

do curso não deve assustá-lo. Não desanime e volte sempre a
reler os pontos que ficaram um pouco obscuros. Boa sorte!

CPW - Aulas 1 - 20

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CPW - Aulas 1 - 20

Enviado por

Direitos autorais:

Formatos disponíveis

Referências módulo 1 Aula 1: Introdução - a WEB e os

(até a aula 9):

2. Conceitos Básicos da Web

2.4. URL (Uniform Resource Locator)

A URL é a convenção utilizada para indicar ao navegador a

Uma URL obedece ao seguinte formato:

Vejamos em que são diferentes.

O que são tags 3.1. Container Tags

O seguinte trecho HTML:

A linguagem HTML 3.2. Empty Tags

Seria exibido da seguinte forma:

Um espaco em branco ou muitos na separacao de palavras tem o mesmo

Tabela 1.2 - Tags lógicas

Como você pode ver, os dois navegadores principais

Como foi dito anteriormente, o navegador ignora qualquer

O controle sobre o alinhamento da página pode ser

4.1. Tag <PRE> : texto pré-formatado

4.2. Alinhamento de Texto

O atributo ALIGN pode assumir os seguintes valores: RIGHT

Exemplo: <P align=right>

O alinhamento centralizado também pode ser obtido através

Exemplo: <center>texto centralizado

A tag <DIV> ... </DIV> permite definir o alinhamento

Exemplo: <DIV align=left>

4.3. Atributos de Linha Horizontal <HR>

Ao se redigir um documento é conveniente organizá-lo de

A melhor maneira de aprender é fazendo! Por isso estamos

3. Ao final do arquivo inclua (usando as opções Copiar e

4. Mude o alinhamento de cada parágrafo e cabeçalho do

5. Você já deve ter notado que o texto está sem acentos!

Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a

1.3. Listas de Definições

Produz uma saída parecida com:

A tabela 2.1 resume as tags relativas a listas.

Ao se fazer uma referência a um outro documento é necessário indicar a sua

Por exemplo, se na página:

não é necessário escrever a URL completa. Basta escrever o caminho relativo

2.2. Referências a Pontos no Próprio Documento

O código HTML do exemplo abaixo associa o nome “inicio” a um

O código HTML abaixo permite incluir uma referência no ponto do documento

Através da seleção do tópico de interesse no índice, o usuário é diretamente

Na URL é possível fazer referência a uma âncora de uma página. No exemplo

3. Enviando Mensagens de Correio Eletrônico

Nesta aula, você aprendeu a incluir listas e links em uma página e a

A WWW é sem sombra de dúvidas o lugar mais visitado da atualidade, onde os

<p>Aula 3. Imagem, cores

no caso de não localizar o arquivo de imagens especificado no atributo SRC.

1.1. Atributos de <IMG>

A imagem pode ficar à esquerda ou à direita da página, considerando a direção

Se este atributo receber os valores LEFT ou RIGHT, a imagem é posicionada

Imagens para Web

Os atributos WIDTH e HEIGHT indicam a largura e a altura da imagem para o

Os atributos HSPACE e VSPACE servem para definir (em pixels) o

<TITLE>CLIQ Figura 3.3 - Página gerado pelo código html

Nada impede que haja sobreposição de áreas. Quando a coordenada

Após a definição do mapa, é necessário associar uma figura a ele. A tag

GIFS animadas são 4. Animações

http://rtlsoft.com/ 1. Substitua, no exemplo de mapas clicáveis, o pequeno texto entre

2. Faça o seu próprio mapa clicável e o inclua no exercício anterior.

3. No exemplo anterior, inclua uma animação.

Aula 4: Cores e Multimídia

Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos

Embora não seja

A definição pelo valores RGB é feita indicando a quantidade de vermelho