PROGRAMAO

DE COMPUTADORES

DISCIPLINAS REGULARES

1o Mdulo:

Projeto e Criao
de Pginas WWW

Projeto e Criao de
Pginas de Web
HTML

Prof.: Joo Srgio dos Santos Assis

e-mail: joao@nce.ufrj.br
Tel.: 598-3214

Projeto e Criao de Pginas de Web

ndice
1. Bibliografia auxiliar

2. Introduo: A rede Internet e o servio WWW

3. Caractersticas gerais de HTML

13

4. Comandos bsicos de formatao

15

5. Listas e enumeraes

19

6. Interligando documentos

22

7. Imagens e cores

25

8. Manipulao de Imagens

31

9. Mapas Clicveis

34

10. A tag <META>

37

11. Multimdia e animaes

41

12. Tabelas

46

13. Frames

49

14. Formulrios

55

15. Folhas de estilo

61

Apndice A Tabela de caracteres

73

Apndice B Manipulao de imagens

76

ii

1. Bibliografia auxiliar

Livros:

Aprenda em uma semana HTML 4

Laura Lemay
Editora Campus

Home pages: Recursos e tcnicas para criao de pginas WWW

Andreia Alcntara e etc.
Editora Campus

HTML Dinmico
Ramalho
Editora Berkeley

Internet:

Em portugus
http://www.icmsc.sc.usp.br/manuals/HTML

Documentao da NCSA
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Documentao do Netscape
http://developer.netscape.com/docs/manuals/htmlguid/index.htm

2. Introduo: A rede Internet e o servio WWW

A Rede Internet
A idia inicial da Internet surgiu em 1969 como uma rede descentralizada
para interligar instalaes militares (ARPANET).

Durante a dcada de 70

vrias outras redes foram sendo interligadas a ARPANET e em 1980 ela passa
a se chamar Internet. No incio da dcada de 80 so criadas redes de
interconexo de instituies cientficas (BITNET, CSNET, NSFNET). O ano de
1983 o marco de criao da Internet, quando os militares abandonam o
controle da ARPANET.
A Internet surgiu no Brasil em 1991, num primeiro momento interligando
instituies acadmicas por meio da Rede Nacional de Pesquisa. A partir de
1995 comea a utilizao comercial e a popularizao da rede.
Com o surgimento dos provedores de acesso, a Internet chega ao
cidado comum. A exposio e divulgao da rede atravs dos meios de
comunicao de massa do um grande impulso ao crescimento da rede.
Principais Servios da Internet

Correio Eletrnico

Listas de Discusso

Newsgroups

Conexes Remotas (Telnet)

Transferncia de Arquivos - FTP

World Wide Web

Correio Eletrnico
Este servio permite que qualquer usurio da Internet possa enviar (ou
receber) mensagens para (de) outro usurio. 0 endereo eletrnico de um
usurio contm todas as informaes necessrias para que a mensagem
chegue ao seu destino. Ele composto de uma parte que identifica o
destinatrio (username) e uma parte relacionada a sua localizao, no formato:
username@subdomnios.domnio
Por exemplo: joao@nce.ufrj.br
Uma mensagem composta de cabealho e corpo. 0 cabealho informa a
data do envio da mensagem, o endereo do emitente, um ttulo sobre o
assunto, alm de informaes de controle. 0 corpo da mensagem o seu
contedo em si.
Embora a grande maioria das mensagens trocadas via rede sejam
constitudas por informao puramente textual, tambm possvel enviar
outros tipos de informao, tais como sons e imagens.
O envio de uma mensagem por um determinado usurio A para um
usurio B atravs de correio eletrnico envolve vrios programas:
O usurio A prepara a sua mensagem num programa cliente de correio
eletrnico e d o comando de envio. Este cliente, por sua vez, manda a
mensagem para um servidor de correio que reconhea o usurio A.
Este servidor envia a mensagem para mquina identificada pelo
domnio do endereo eletrnico do usurio B.
Na mquina destino, um outro servidor identifica o usurio e armazena
a mensagem na sua caixa postal.
Num determinado momento o usurio B executa o seu programa
cliente de correio, que por sua vez consulta o servidor de correio que tem
acesso caixa postal do usurio. Caso haja alguma mensagem para o
3

usurio, o servidor envia para o programa cliente, que a exibe para o

usurio.
Todo este procedimento envolve dois tipos de servidores: a troca de
mensagens da mquina origem para a mquina destino feita atravs de
servidores SMTP; j o servidor que consulta a caixa postal de um usurio para
saber se h alguma mensagem um servidor POP3. Este caminho da
mensagem ilustrado pela figura abaixo:

Cliente de
Correio

Usurio A

ServidorSTMP
Origem

ServidorPOP3
Destino

ServidorSTMP
Destino

Caixa Postal
do usurio

Cliente de
Correio

Usurio B

Para ler mais a respeito do correio eletrnico:

http://www.icmsc.sc.usp.br/manuals/BigDummy/Email.html
Listas de Discusso
So utilizadas para troca de mensagens entre grupos de usurios
interessados em um determinado assunto. Com apenas um endereo
eletrnico de destino possvel enviar mensagens para todos os participantes
da lista.
A manuteno de uma lista pode ser feita de forma manual ou automtica.
Na forma automtica h um programa que se encarrega de ler a caixa postal
relativa ao endereo da lista e a reenviar as mensagens para todas as pessoas
inscritas. Este programa tambm recebe, por meio de correio eletrnico,
comandos para incluso e excluso de nomes da lista. Mesmo as listas
automticas contam com um administrador encarregado de resolver eventuais
problemas que o programa de manuteno no consegue resolver.
4

As listas podem ser livres ou moderadas. No segundo caso, as

mensagens no so imediatamente repassadas para os assinantes da lista.
Antes disso elas devem ser aprovadas por uma pessoa chamada moderador
que decide sobre a pertinncia ou no do assunto da mensagem. Existe uma
infinidade de listas de discusso, sobre os mais variados assuntos.
Para ler mais a respeito:
http://www.icmsc.sc.usp.br/manuals/BigDummy/Listas.html
Newsgroups da Usenet
As listas de discusso tem um inconveniente de encher a caixa postal do
participante com centenas de mensagens. Muitas vezes um usurio sa de
frias e fica muito tempo sem ler sua caixa postal e ao voltar se depara com
uma quantidade absurda de mensagens para ler. Uma outra forma de participar
de listas de discusso atravs dos grupos da usenet. Diferente das listas
comuns, as mensagens para os grupos no so reenviadas para os
participantes da lista. Ao invs disso so armazenadas em servidores
espalhados pela rede. De tempos em tempos, as mensagens mais antigas so
removidas de cada grupo. Um usurio pode a qualquer momento se conectar a
um destes servidores e receber as mensagens dos grupos em que esteja
inscrito.
Os grupos so organizados em uma estrutura hierrquica, explicitada pelo
seu nome. Assim os newsgroups cujo nome comeam pelo prefixo news
servem para discutir assuntos relacionados aos newsgroups, os com prefixo
soc agrupam listas de assuntos relacionados sociedade e aqueles com o
prefixo Comp assuntos relativos a computao ou computadores. Por Exemplo:

news.announce.newusers informaes sobre a usenet para novos

usurios.

soc.culture.brasil Grupo de discusso de assuntos brasileiros.

comp.sources.games Informao e disponibilizao de cdigo fonte

de jogos de computador.
5

Conexes Remotas (Telnet)

Sistema que permite que sua mquina possa ser um terminal de outra
mquina na Internet. Para isso o usurio deve ter uma conta (login) na mquina
remota. A utilidade principal do Telnet a possibilidade de executar programas
na mquina remota.
Transferncia de Arquivos - FTP
o protocolo usado na Internet para transferncia de arquivos entre
computadores. 0 FTP um dos recursos mais importantes disponveis na
Internet, e tambm responsvel por um grande volume de trfego de dados.
Para que se possa conectar a uma mquina remota atravs do FTP
necessrio que esta mquina esteja executando um programa servidor de FTP.
O FTP funciona da seguinte maneira: um usurio executa o programa FTP (um
cliente FTP) em sua mquina (mquina local), cria uma conexo com outra
mquina (com o servidor de FTP desta mquina), localizada em qualquer ponto
da rede (mquina remota), e envia (ou recebe) arquivos para (de) esta
mquina.
Ao se conectar a uma mquina remota, a pessoa que est utilizando o
cliente FTP pode ser usurio desta mquina ou no. Caso seja usurio, deve
se identificar atravs do nome de sua conta (login) e de sua senha (password).
Aps a validao destes dados, tem acesso aos seus arquivos e diretrios na
mquina remota podendo: listar o contedo dos diretrios, mudar de diretrio,
enviar arquivos e recuperar arquivos.
Muitas mquinas oferecem reas pblicas que podem ser acessadas por
no usurios. Para Ter acesso a esta rea basta o usurio responder ao login
com o nome anonymous e como password escrever o seu endereo de
correio eletrnico. Caso a mquina permita esta forma de login, o usurio tem
acesso rea pblica podendo: listar o contedo dos diretrios, mudar de
diretrio e recuperar arquivos (normalmente, por questes de segurana, no
permitido enviar arquivos).
6

Existem muitos gigabytes de informaes disponveis em FTP annimo

nas mquinas da Internet ao redor do mundo. Nesses locais podem-se
encontrar programas fontes, programas objetos, sistemas inteiros, documentos,
ou seja, todo tipo de informao em arquivos de computador.
O clientes FTP mais antigos apresentavam ao usurio uma interface
parecida com a do DOS, oferendo vrios comando, dentre os quais os mais
comuns so:

OPEN <endereo> - faz a conexo com a mquina identificada pelo

<endereo> e pede o login e a password.

CD <diretrio> - muda de diretrio na mquina remota.

PWD Informa o diretrio atual na mquina remota.

DIR Lista o diretrio atual da mquina remota.

LCD <diretrio> - muda de diretrio na mquina local.

!DIR Lista o diretrio atual da mquina local.

PUT Envia um arquivo da mquina local para a remota.

GET Envia um arquivo da mquina remota para a local.

Um bom site de ajuda utilizao do FTP :

http://www.icmsc.sc.usp.br/manuals/BigDummy/ftp.html
World Wide Web
Foi desenvolvida no final da dcada de 80 numa instituio de pesquisa
(CERN) como uma forma de facilitar aos pesquisados acesso a documentos
cientficos. Os trabalhos de cada pesquisador, muitas vezes interrelacionados,
estavam espalhados por vrias mquinas diferentes. Atravs da Web
possvel,

partindo

de

um

determinado

ponto,

pesquisar

documentos

relacionados, independente de sua localizao fsica (que o usurio no tem a

mnima necessidade de conhecer).
Com a Web ganha fora a utilizao em larga escala da tcnica de
Hipertextos. Um Hipertexto um documento onde possvel incluir referncias
(em ingls, Links) a outros documentos. A seleo de uma destas referncias,
leva o usurio ao documento referenciado.
Inicialmente

informao

disponvel

na

Web

era

encontrada

principalmente na forma de texto. Aos poucos foram sendo incorporados

elementos grficos e animaes aos documentos. Os novos recursos grficos
ajudaram muito a popularizar a Web, aproximando-a mais do cidado comum.
A popularizao da Web criou uma srie de novas aplicaes, fazendo
com que ela seja utilizada hoje para: divulgao cientfica, trabalho cooperativo,
divulgao de informaes culturais, livro eletrnico, promoo de produtos e
servios, comrcio eletrnico, suporte tcnico e vrias outros usos que vo
sendo inventados a cada instante.
Conceitos Bsicos da Web
Uma caracterstica importante da Web que a informao
disponibilizada de forma independente da plataforma que ser utilizada para a
sua visualizao. Para isso necessrio que os documentos sejam escritos
utilizando um formato padronizado.
Esta padronizao obtida atravs de uma linguagem de marcao
chamada HTML. O cdigo HTML contm instrues de visualizao de texto e
informao de localizao de outros documentos (Links). Para poder visualizar
corretamente o documento o usurio deve ter um programa (navegador) capaz
de interpretar esta linguagem, reconstituindo a informao segundo as
instrues contidas no cdigo.
Para obter algum documento na rede o usurio deve informar ao
navegador um conjunto de informaes sobre a sua localizao na Internet:
8

protocolo, mquina onde se encontra o documento, diretrio onde ele se

encontra na mquina e nome do documento.

Estes dados devem ser

informados ao navegador segundo um formato padronizado que chamamos de

URL.
A mquina que contm o documento a ser exibido deve estar executando
um programa que se encarregada de receber o pedido do documento, localizlo no disco e envi-lo para a mquina que o pediu. Este programa chamado
de Servidor de Web e o navegador que pede o documento chamado de
Cliente.
Navegadores (Browsers)
Para navegar pela Web necessrio um software cliente que chamamos
de navegador (em ingls, Browser). Ele responsvel por: solicitar
documentos na Internet e interpreta-los, exibindo-os para o usurio. Exemplos
de navegadores: Netscape, Internet Explorer, Mosaic, Lynx
Servidores (Web Servers)
So programas sendo executados nas mquinas onde esto guardados
os documentos. Estes programas so os responsveis por enviar os
documentos para as mquinas que os solicitam. Exemplos: NCSA, CERN,
Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite (em ambiente
Windows).
HTML (Hypertext Markup Language)
a linguagem padro usada para a escrita de pginas da Web. O HTML
uma linguagem de marcao, ou seja, seus comandos (chamados Tags)
servem para informar ao cliente os elementos que sero exibidos na pgina:
cabealhos, textos em itlico, links, imagens, etc. O cliente Web interpreta
estes comandos e exibe a pgina para o usurio. Um texto HTML no define a
forma exata como o documento vai ser exibido. Isto depende do cliente e de
definies feitas pelo usurio.
9

URL (Uniform Resource Locator)

A URL a conveno utilizada para indicar ao navegador a forma de
localizar um endereo na rede. Uma URL obedece ao seguinte formato:
protocolo://servidor /caminho/arquivo
Onde:
Protocolo Indica a forma como vai ser realizada a comunicao entre o
servidor e o cliente e o tipo de servio que ser prestado. Os mais comuns so
http (Hypertext Transfer Protocol - pginas comuns de hipertexto) e ftp (File
Transferm Protocol - transferncias de arquivos)..
Servidor Endereo do servidor na Internet. Pode ser dado na forma
nome_da_mquina.domnio (como em www.nce.ufrj.br) ou atravs do endereo
IP da mquina (como em 146.164.2.68).
Caminho Localizao do arquivo no disco do servidor atravs de uma
lista de diretrios.
Arquivo - Nome do arquivo desejado. Esta informao pode ser omitida e
o servidor assume um nome padro. Este nome pode variar de instalao para
instalao mas normalmente home.html ou index.html.
Home Pages
Documento projetado para ser a pgina principal de um Site. Funciona
como a porta de entrada e deve conter um ou mais Links para as demais
pginas do Site ou para outros Sites relacionados.

10

Como projetar bons documentos ?

Passos a seguir no processo de criao:
1) Avaliao do pblico alvo
2) Definio do contedo
3) Organizao do contedo a estrutura pode ser linear ou hierrquica.
4) Redao do contedo
5) Programao Visual e Implementao
Boas prticas na confeco de um documento
Portabilidade Os documentos devem ser projetados de forma que
possam ter (mais ou menos) a mesma aparncia na maior variedade possvel
de navegadores. Na prtica leva-se em conta principalmente o Internet
Explorer e o Netscape que monopolizam o mercado de browsers.
Imagens Deve-se levar em conta que os meios de transmisso ainda
so lentos para a maioria dos usurios. No se deve abusar de muitas imagens
de tamanho muito grande pois o usurio pode acabar desistindo de carregar a
pgina se ela demora muito para vir.
Links Deve-se sempre verificar se os links de sua pgina ainda so
vlidos. A rede muito dinmica e por vezes pginas desaparecem ou so
mudadas de lugar.
URLs relativas X absolutas Ao fazer referncias a pginas do mesmo
site convm utilizar URLs relativas ao invs de absolutas. Isto facilita quando
necessrio mudar todo o site de um lugar para o outro. Alm disso muitas
vezes utiliza-se uma mquina para desenvolvimento do site e outra para
publicao.
O ttulo do documento Os documentos HTML contm um ttulo que,
normalmente, no visualizado no interior da pgina. Este ttulo porm
utilizado pelos navegadores para nomear a pgina no arquivo de bookmarks.
11

interessante portanto criar um ttulo relativamente pequeno e suficientemente

descritivo.
Tipografia Os navegadores costumam oferecer ao usurio um conjunto
de tipos de caracteres que podem ser visualizados. Os tipos mais comuns
(Times News Roman, Arial, Courier) costumam estar disponveis em todas as
instalaes. Porm, por vezes, pode ser interessante incluir textos utilizando
tipos de caracteres mais sofisticados. Neste caso, deve-se utilizar um programa
de edio de imagens e gerar um arquivo no formato gif ou jpeg com o texto e
depois inclu-lo na pgina na forma de imagem.
Cores Cores devem ser escolhidas com cuidado de forma a no
dificultar a visualizao das informaes contidas na pgina.
Editores de HTML
Atualmente existe uma grande quantidade de ferramentas para auxiliar o
desenvolvimento de pginas de Web. H vrios nveis de ferramentas desde
aquelas destinadas a converter documentos de um determinado formato para
HTML, passando por editores visuais simples at ferramentas complexas de
gerenciamento de sites. Exemplos:

Filtros conversores: rtftohtml, pstohtml

Editores de tags: HTML Assistant, HotDog, W3e

Editores Wysiwyg: Netscape Composer, MS Internet Assistant, MS

FrontPage Express

Gerenciadores de site: MS FrontPage, AOLPress, Macromedia

Dreamweaver

Estas ferramentas porm no eliminam a necessidade de conhecer a

linguagem HTML. Mesmo as ferramentas mais complexas mantm a facilidade
de visualizar e editar diretamente o cdigo HTML. Muitas vezes esta a forma
mais fcil de se obter o efeito desejado na pgina.

12

3. Caractersticas gerais de HTML

Um documento escrito em HTML um arquivo ASCII comum, contendo
apenas caracteres visveis. O navegador ignora qualquer caracter especial,
inclusive aqueles que sugerem algum tipo de formatao ao texto (como TAB,
CR, LF). Qualquer tipo de formatao deve ser informada atravs das Tags. As
Tags se diferenciam do texto comum por estarem contidas entre o caracter < e
o caracter >. Algumas tags contem atributos que permitem que configurar
algumas caractersticas. Estes atributos so colocados entre os delimitadores
(< e >), aps o nome da tag.
Tipos de Tags
H dois tipos de tags:
Container Tags -

Servem para definir um efeito sobre um trecho do

documento. Estas tags vm sempre aos pares: uma tag indica o incio do
trecho e uma outra tag derivada (igual inicial exceto por conter o caracter /)
indica o fim. Todo o texto escrito entre as duas tags sofre o efeito indicado
por elas.
Por exemplo, para indicar que uma parte do texto deve ser exibida em
negrito utilizo o para de tags <B> e </B>. O seguinte trecho HTML:
Uma palavra em <B>negrito</B> fica realada
Seria exibida da seguinte forma:
Uma palavra em negrito fica realada.
As tags container podem ser colocadas umas dentro das outras. O texto
contido na tag mais interior, sofre o efeito cumulativo de todas as tags que o
contm.
Empty Tags So tags que produzem efeitos locais, normalmente
introduzindo algum elemento no texto, e, portanto, no precisam de uma tag

13

finalizadora. Um exemplo a tag <BR> que insere no texto uma mudana de

linha.
A linguagem HTML no faz diferenciao entre letras maisculas e letras
minsculas, ou seja, escrever <BR> ou <br> tem o mesmo significado. Como
em outras linguagens, possvel inserir comentrios num texto HTML. Todo
texto includo entre <!-- e --> ignorado pelo Browser.
Estrutura de um documento HTML
Todo documento HTML tem a seguinte estrutura:
<HTML>
< HEAD>
<TITLE> ... </TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
A tag HTML indica a rea onde deve estar contido o documento HTML.
Isto no quer dizer que o Browser no vai exibir um texto colocado fora desta
tag, mas no uma boa prtica colocar texto fora desta rea.
A tag HEAD o cabealho do documento. Nesta rea so colocadas tags
com informaes relativas ao documento. A mais importante destas
informaes contida na tag TITLE que deve sempre ser includa em todas as
pginas. O texto do TITLE utilizado pelo navegador para nomear os links
adicionados ao arquivo de bookmarks. Normalmente esta informao
visualizada na barra de ttulos da janela do browser. A tag BODY contm o
documento propriamente dito. Nesta rea deve ser colocada a pgina a ser
visualizada.

14

4. Comandos Bsicos de Formatao

A linguagem HTML possui duas classes de elementos utilizados para
modificar o estilo de apresentao de partes do texto: tags fsicas e tags
lgicas.
As tags fsicas indicam explicitamente a forma como o autor deseja ver
exibido o seu texto. So elas:
Elemento

Descrio

Efeito

<B></B>

Negrito

texto normal

<i></i>

Itlico

texto normal

<U></U>

Sublinhado

texto normal

<TT></TT>

Letras igualmente espaadas

texto normal

<SUB> </SUB>

Subescrito

texto

<SUP> </SUP>

Sobrescrito

texto

normal
normal

<STRIKE> ... </STRIKE> Riscado

texto normal

<BIG> ... </BIG>

Fonte grande

texto normal

<SMALL> ... </SMALL>

Fonte pequena

texto normal

As tags lgicas expressam uma idia que deve ser passada ao usurio e
a forma como o texto ser exibido dependente do navegador. Algumas delas:
Elemento

Descrio

Explorer e Netscape

<STRONG></STRONG>

Texto forte

Negrito

<EM></EM>

Texto enfatizado

Itlico

<CITE></CITE>

Citao

Itlico

<CODE> ... </CODE>

Cdigo de programa

<ADRESS> ... </ADDRESS> Endereo

Monoespaado
Itlico

15

Separadores
Como foi dito anteriormente, o navegador ignora os caracteres de
mudana de linha existentes no arquivo HTML. Quando necessrio incluir
uma mudana de linha num documento deve-se incluir uma das seguintes tags:
Elemento

Descrio

Atributos

<P>1

Inicio de pargrafo

ALIGN

<BR>

Quebra de linha

Nenhum

<HR>

Linha horizontal

SIZE, WIDTH, ALIGN e NOSHADE

Atributos de <HR>
O atributo SIZE utilizado para definir a espessura da linha em nmero
de pontos. O atributo WIDTH serve para definir a largura da linha. Esta largura
pode ser especificada em nmero de pontos ou com o percentual da janela que
ser ocupado pela linha. A simples incluso do atributo NOSHADE faz com que
a linha no seja desenhada com efeito sombreado. O atributo ALIGN ser
descrito mais adiante na seo Alinhamento de Texto. O exemplo abaixo inclui
uma linha de 4 pontos de espessura, ocupando 50% da janela e sem
sombreado:
<HR SIZE=2 WIDTH=50% NOSHADE>
Cabealhos
Ao se redigir um documento conveniente organiz-lo de forma clara
atribuindo ttulos e subttulos s suas diversas partes. A linguagem HTML
oferece um conjunto de 6 cabealhos pr-definidos que podem ser includos no

Em verses antigas do HTML esta era uma tag do tipo container. Atualmente no

mais necessrio colocar a tag de fim de pargrafo (</P>), embora alguns editores insistam
colocar. Isto no causa problema algum pois os navegadores ignoram o </P>.

16

documento atravs da tag <Hn> ... </Hn>, onde n pode ser um nmero de 1 a
6. Os cabealhos so em negrito, centralizados e seu tamanho varia do maior
H1 at o menor H6.
Texto Pr-formatado
Muitas vezes interessante fazer com que o navegador reproduza
exatamente a formatao do texto escrita no arquivo HTML, sem ignorar
espaos, mudanas de linha, tabulaes e utilizando um fonte no proporcional
para exibir o texto.
Um exemplo tpico disso quando est se fazendo uma pgina sobre
alguma linguagem de programao e se deseja incluir um trecho do cdigo de
um programa como exemplo. Desta maneira o programa exibido respeitando
a indentao.
Para incluir um texto pr-formatado utiliza-se a tag <PRE> </PRE>.
Esta tag, porm, no impede o navegado de interpretar outras tags que
estejam em seu interior, permitindo realizar mudanas de fonte, estilo e cor do
texto.
Alinhamento de Texto
Os textos contidos nos arquivos HTML so exibidos, salvo indicao em
contrrio, alinhados esquerda da janela. Para ter o texto alinhado de forma
diferente necessrio modificar o atributo ALIGN existente em algumas tags
(como cabealhos, <P> e <HR>). Este atributo pode assumir os seguintes
valores: RIGHT (direita), CENTER (centro) ou LEFT (esquerda). O alinhamento
centralizado tambm pode ser obtido atravs da tag <CENTER> ...
</CENTER>. A tag <DIV> ... </DIV> permite definir o alinhamento default para
tudo que ela contiver. Exemplos:
<P align=right>
<H1 align=center>
<center> texto centralizado </center>
<DIV align=left> texto alinhado esquerda </DIV>
17

Acentuao
No existe uma padronizao universal para definir os cdigos
associados aos caracteres acentuados. Quando produzimos uma pgina no
ambiente Windows, utilizando diretamente os caracteres do Windows esta
pgina ser visualizada sem problemas em grande parte das mquinas que
utilizam este mesmo sistema (se o sistema estiver configurado para utilizar a
norma ISO Latin 1), mas isso no ser verdade para qualquer ambiente.
possvel que um texto cheio de caracteres acentuados que aparece
perfeito na tela de quem o produziu aparea cheio de caracteres estranhos na
tela de algum que esteja trabalhando em um ambiente diferente. Para garantir
a portabilidade dos documentos nas mais diferentes plataformas o HTML prev
uma srie de cdigos que devem ser utilizados no lugar de caracteres
acentuados e outros caracteres especiais:
Codificao em HTML
&aacute;

&eacute;

&ccedil;

& &amp;

&atilde;

&ecirc;

&Ccedil;

&quot;

&acirc;

&oacute;

< &lt;

&reg;

&agrave;

&uuml;

> &gt;

&copy;

A tabela completa pode ser encontrada no apndice A das notas de aula.

18

5. Listas e enumeraes
Uma forma muito comum de organizar a informao atravs de listas. A
linguagem HTML oferece 3 formas diferentes de criar uma lista: listas no
numeradas, lista numeradas e listas do tipo verbete de dicionrio.
Listas no numeradas
As listas no numeradas so formadas por itens precedidos de um
smbolo grfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista.,
sendo que cada item indicado pela tag <LI>2. Tanto a tag <UL> como a tag
<LI> tem o atributo TYPE. Este atributo indica qual o smbolo colocado antes
de cada item: disc (um crculo cheio, o default), circle (um crculo vazado) e
square (um quadrado cheio).
Por exemplo, o cdigo HTML:
<UL>
<LI>Correio Eletrnico
<LI>Telnet
<LI>FTP
</UL>
Produz uma sada parecida com:

Correio Eletrnico
Telnet
FTP

Listas numeradas
As listas numeradas so formadas por itens precedidos de um nmero
indicando a sua ordem. Em HTML utiliza-se a tag <OL> ... </OL> para delimitar
a lista numerada., sendo que cada item indicado pela tag <LI>. Tanto a tag

Esta tag tambm era do tipo container nas verses mais antigas do HTML.

19

<OL> como a tag <LI> tem o atributo TYPE, que no caso deste tipo de lista
indica qual a forma de numerao ser usada em cada item: 1 (nmeros
arbicos, o default), A (letras maisculas), a (letras minsculas), I (nmeros
romanos com letras maisculas) e i (nmeros romanos com letras minsculas).
A tag <OL> tem tambm o atributo START, que indica qual ser o
primeiro nmero da lista. A numerao tambm pode ser modificada atravs do
valor do atributo VALUE da tag <LI>
Por exemplo, o cdigo HTML:
<OL TYPE=A>
<LI> Correio Eletrnico
<LI VALUE=4> Telnet
<LI> FTP
</OL>
Produz uma sada parecida com:
A.

Correio Eletrnico

1.

Telnet

2.

FTP

Listas de definies
As listas de definio (ou verbete de dicionrio) consistem de uma lista de
termos, seguido de um pargrafo deslocado

contendo sua descrio. Em

HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de definies. Cada
termo a ser definido indicado pela tag <DT> ... </DT> e a sua definio
indicada pala tag <DD> ... </DD>3.
Uma possvel aplicao para as listas de definio utilizar as tags <DL>
... </DL> e <DD> para criar listas indentadas que no so precedidas pelos

<DT> e <DD> tambm podem ser usadas como Empty Tag nas verses mais novas de

HTML.

20

smbolos grficos padro ou por numerao. O autor do documento pode ento

criar os smbolos que deseja por no incio de cada item utilizando a tag que
inclui imagens no documento (o que ser visto mais adiante).
Por exemplo, o cdigo HTML:
<DL>
<DT>Telnet</DT>
<DD>
o protocolo mais usado na Internet para criar uma
conexo com um n remoto.</DD>
<DT>FTP</DT>
<DD>O
O "File Transfer Protocol" o principal mtodo de se
transferir arquivos pela Internet. </DD>
</DL>
Produz uma sada parecida com:
Telnet
o protocolo mais usado na Internet para criar uma
conexo com um n remoto.
FTP
O "File Transfer Protocol" o principal mtodo de se
transferir arquivos pela Internet.

Resumo das Tags

Elemento

Descrio

Atributos

<UL> ... </UL>

Lista no ordenada

TYPE

<LI>

Item de lista no ordenada

TYPE

<OL> ... </OL>

Lista ordenada

TYPE, START

<LI>

Item de lista ordenada

TYPE, VALUE

<DL> ... </DL>

Lista de definies

nenhum

<DT>

Termo a ser definido

nenhum

<DD>

Definio do Termo

nenhum
21

6. Interligando documentos
Uma das principais caractersticas do hipertexto a possibilidade de
incluir no documento referncias, cuja seleo leva a exibio do documento
referenciado. As referncias (Links) podem ser feitas a documentos na mesma
mquina, em uma mquina completamente diferente (que pode estar at do
outro lado do mundo) ou a um outro ponto do prprio documento.
Ao se fazer uma referncia a um outro documento, necessrio indicar a
sua URL. Caso o documento referenciado esteja na mesma mquina
possvel (e recomendvel) utilizar uma URL relativa (utilizando o caminho de
diretrios para chegar ao novo documento a partir do atual) ao invs da URL
absoluta (endereo completo na Internet do novo documento). Por exemplo: se
na pgina equipe.nce.ufrj.br/joao/Programacao h uma referncia a um arquivo
que se encontra no endereo equipe.nce.ufrj.br/joao/Exemplos/arq.html no
necessrio escrever a URL completa. Basta escrever o caminho relativo at
ela: ../Exemplos/arq.html4 (a partir do diretrio atual, v ao diretrio pai e de l
a um diretrio filho chamado Exemplos, onde h o arquivo arq.html).
Referncia a outro documento:
A forma de inserir referncia em arquivo HTML atravs da tag <A> ...
</A> e de seus atributos. O atributo HREF serve para definir a URL que ser
aberta se o usurio selecionar com o mouse o texto contido entre o <A> e o
</A>. Os navegadores costumam exibir este texto utilizando caracteres
sublinhados e o cursor do mouse modificado ao passar por cima dele. No
exemplo a seguir, a seleo com o mouse do texto Pgina do NCE faz com
que o navegador abra a pgina http://www.nce.ufrj.br:
<A HREF="http://www.nce.ufrj.br">Pgina do NCE</A>

Os caminhos de diretrios seguem a conveno do Unix utilizando o caracter / ao invs

do caracter \.

22

Uma observao importante a fazer que, apesar da HTML no

diferenciar maisculas de minsculas, o mesmo no vlido para as URLs.
necessrio indicar corretamente quais letras esto em minsculas e quais
esto em maisculas para que o arquivo possa ser encontrado.
O arquivo destino no precisa necessariamente ser um documento HTML,
pode ser um arquivo de qualquer tipo: imagens, msica, arquivos zipados, etc.
Caso o navegador no saiba como exibir este arquivo, ele permite ao usurio
receber o arquivo e salv-lo em um diretrio de sua escolha.
Referncias prpria pgina
Como foi dito anteriormente, em um arquivo HTML possvel fazer uma
referncia a uma outra parte do mesmo arquivo. Neste caso necessrio
indicar ao navegador o ponto exato que ser referenciado. Isto feito
colocando-se uma ncora neste ponto atravs da tag <A> ... </A> com a
definio do atributo NAME. O cdigo HTML do exemplo abaixo associa a um
determinado ponto do documento o nome inicio:
<A NAME="inicio"></A>
Uma ncora colocada no meio

do texto no tem nenhum efeito na

visualizao da pgina. O cdigo HTML abaixo permite incluir uma referncia

ao ponto do documento marcado pela ncora acima:
<A HREF="#inicio">Incio da Pgina</A>
As ncoras tem duas utilidades bsicas: A primeira permitir a criao de
ndices no inicio da pgina. Atravs da seleo do tpico de interesse no
ndice, o usurio diretamente remetido a este tpico, sem precisar ficar
avanando pgina a pgina a procura do item desejado. A segunda utilidade
permitir ao usurio voltar imediatamente ao incio da pgina.
possvel fazer referncia na URL a uma ncora de uma pgina:
<A HREF="http://www.desy.de/gna/interpedia/greek_myth/olympian.html#Athena">Atenas</A>

23

Enviando mensagens de correio eletrnico

Alm de criar links para a exibio de arquivos, a tag <A>...</A> serve
para permitir que o usurio execute outros servios da web: ftp, telnet, mail,
news. No exemplo a seguir, quando o link for acionado, o navegador abre o
programa de correio eletrnico, permitindo que o usurio envie uma mensagem
para o endereo especificado (joao@nce.ufrj.br).
<A HREF="mailto:joao@nce.ufrj.br">Mande um mail</A>

24

7. Imagens e cores
Um dos comandos mais importantes de HTML a tag <IMG>, atravs da
qual possvel incluir arquivos de imagem no documento. O atributo SRC deve
sempre estar presente para indicar, atravs de sua URL, qual arquivo contm a
imagem (nada impede que a imagem esteja em outra mquina, mas isto no
conveniente). Arquivos de imagem so do tipo GIF ou do tipo JPEG. O
exemplo abaixo faz com que a imagem eyesdown.gif seja exibida na junto com
o texto, aps a palavra imagem e antes de no meio do texto:
Imagem <IMG SRC="eyesdown.gif> no meio do texto
Atributos de <IMG>
Atributos

Descrio

SRC

URL do arquivo de imagem que ser visualizado

ALT

texto alternativo mostrado no lugar da imagem

ALIGN

TOP, BOTTOM, MIDDLE, CENTER, LEFT, RIGHT

BORDER

largura da borda quando usada como ncora

WIDTH

largura em pixels

HEIGHT

altura em pixels

VSPACE

espao vertical ao redor da imagem em pixels

HSPACE

espao horizontal ao redor da imagem em pixels

O atributo ALT serve para associar imagem uma descrio, que

mostrada pelo navegador em duas ocasies: quando o usurio deixa o cursor
do mouse sobre a imagem e enquanto a pgina est sendo carregada mas a
imagem ainda no comeou a ser carregada. Neste segundo caso o usurio
pode decidir se deseja ou no carregar a imagem. Alm disso, caso ela no
25

tenha sido carregada por algum motivo, o usurio tem como saber que naquele
ponto da pgina havia uma imagem e o que ela retratava.
O atributo ALIGN define o alinhamento do texto prximo a tag em relao
a imagem. Se este atributo receber os valores LEFT ou RIGHT a imagem
posicionada num canto da janela (esquerdo ou direito respectivamente) e o
texto seguinte a tag exibido ao lado da figura. As vrias linhas do texto vo
sendo posicionadas pela lateral da imagem, envolvendo-a, at que a lateral
esteja toda tomada.
No caso do alinhamento definido como TOP, BOTTOM, MIDDLE ou
CENTER, o texto que completar a linha alinhado respectivamente pelo topo,
base e meio da figura, mas apenas uma linha colocada ao lado da imagem.
As linhas seguintes do texto so posicionadas abaixo da imagem.
Muitas vezes interessante permitir ao usurio selecionar um link atravs
de uma imagem ao invs de um texto. Para que isso seja possvel basta
colocar a tag <IMG> dentro da tag <A> ... </A>, como mostrado no exemplo a
seguir:
<A HREF=link.htm><IMG SRC=x.gif></A>
Neste contexto que se situa o atributo BORDER da tag <IMG>. A borda
da tag est para a imagem assim como o sublinhado est para um link textual.
O valor default da borda 1 e ela muda de cor conforme o estado do link (no
visitado, ativo ou j visitado). Este efeito muitas vezes indesejvel e a forma
de sumir com esta borda incluir o atributo BORDER=0 ou simplesmente
BORDER.
Os atributos WIDTH e HEIGHT servem para indicar a largura e a altura da
imagem para o navegador. Caso eles estejam presentes o navegador pode
posicionar os elementos da pgina antes de carregar a imagem. Se os valores
no corresponderem aos valores reais da imagem, esta redimensionada para
caber no espao definido para ela.

26

Os atributos HSPACE e VSPACE servem para definir o espaamento

horizontal e vertical (em pixels) do texto em relao a figura, evitando que o
texto fique muito prximo a sua borda.
Definio de Cores
H duas formas de definir cores em HTML: atravs de seu nome ou
atravs dos valores RGB da cor. Para definir uma cor atravs do nome
preciso saber seu nome em ingls. A definio pelo cdigo RGB feita
indicando a quantidade de vermelho (Red), verde (Green) e azul (Blue)
necessria para compor a cor. Cada uma destas quantidades indicada por
um nmero entre 0 e 255 e o formato utilizado #RRGGBB, com 2 dgitos para
o R, 2 para o G e 2 para o B. Para que os valores possam caber em dois
dgitos eles so escritos na base 16. Para saber mais sobre a base 16 veja o
apndice A. A tabela abaixo mostra algumas cores e seus valores RGB:

Nome

definio

White

#FFFFFF

255

255

255

Red

#FF0000

255

Green

#00FF00

255

Coral

#FF7F00

255

127

Yellow

#FFFF00

255

255

Gray

#C0C0C0

192

192

192

A seguinte pgina contm a tabela Completa:

http://equipe.nce.ufrj.br/joao/programacao/privado1/exemplos/cores/cor.html

27

Imagem de fundo da pgina

A tag <BODY> ... </BODY> tem uma srie de atributos que permitem
definir caractersticas gerais do documento HTML: imagem de fundo da pgina
(atributo BACKGROUND), cor de fundo da pgina (atributo BGCOLOR), cor do
texto (atributo TEXT), cor de links ainda no visitados (atributo LINK), cor de
links enquanto selecionados (atributo ALINK) e cor de links j visitados (atributo
VLINK).
Atributos de <BODY>
Atributos

Descrio

BACKGROUND

Imagem de fundo

BGCOLOR

Cor de fundo

TEXT

Cor do texto

LINK

Link no visitado

ALINK

Link sendo visitado

VLINK

Link j visitado

O atributo BACKGROUND define uma imagem que ser utilizada como

ladrilho de fundo da pgina. Ao criar esta imagem deve-se ter o cuidado de
evitar que a juno dos lados dos ladrilhos fique ntida. Imagens em que os
quatro lados so de uma nica cor (sem variaes de tonalidade) no
apresentam o problema de bordar ntidas
Se o atributo BACKGROUND estiver definido a cor de fundo (BGCOLOR)
s visvel at que a imagem de fundo seja carregada (o que as vezes pode
demorar um pouco). No exemplo abaixo a definio de fundo.gif como imagem
de fundo e da cor azul para o texto da pgina:
<BODY BACKGROUND=fundo.gif TEXT=blue>
28

A tag <BODY> tem alguns atributos adicionais no muito bem

documentados que permitem controlar o tamanho das margens do documento.
No existe compatibilidade entre os dois principais navegadores (Netscape e
Explorer) quanto a estes atributos.
Atributos Netscape

Atributos Explorer

Descrio

marginHeight

topMargin

Margem superior

marginWidth

leftMargin

Margem esquerda

No exemplo a seguir mostra-se como eliminar a distncia entre o

contedo da pgina e as bordas da janela tanto para o Netscape quanto para o
explorer:
<BODY topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

Definindo a fonte e a cor dos Caracteres

A tag <FONT> ... </FONT> permite modificar o tamanho, cor e tipo de
fonte de partes do documento (aqueles contidos dentro da tag).
Atributos de <FONT>
Atributos

Descrio

SIZE

Tamanho do fonte

FACE

Tipo de fonte e alternativas

COLOR

Cor do fonte

O atributo SIZE permite definir o tamanho do FONT, que pode ser 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 relativo ao tamanho atual.

29

O atributo FACE serve para definir tipo do fonte a ser utilizado e vrias
alternativas para o caso do primeiro fonte na estar disponvel. Cada um dos
tipos de fonte separado do outro por vrgulas.
O atributo COLOR permite definir a cor em que ser escrito o texto. No
exemplo abaixo o texto tudo verde vai ser escrito em tamanho 4, na cor verde
e com o fonte Arial:
<FONT SIZE=4 FACE=Arial COLOR=green>tudo verde</FONT>

30

8. Manipulao de Imagens
Quando usar GIF e quando usar JPEG
GIF abreviao de Graphics Interchange Format e foi desenvolvido
pela CompuServe. Neste formato as imagens so comprimidas atravs da
codificao LZW (Lempel-Ziv and Welsh) e armazenadas em arquivos de
extenso .gif. Os formatos GIF mais recentes so os GIF87 e GIF89a.
JPEG um padro internacional, proposto pelo comit ISO Joint
Photographers Expert Group. As imagens so codificadas por transformaes
matemticas, o que causa a remoo de informaes grficas que o olho
humano no consegue perceber, o que permite grande compresso, sem
perda de qualidade perceptvel. Este formato permite vrios nveis de
compresso o que permite escolher a melhor relao entre tamanho do arquivo
e qualidade da imagem. Arquivos de imagens que seguem este formato tm
extenso .jpeg ou .jpg.
A deciso a respeito de qual formato utilizar depende basicamente do tipo
da imagem. Para alguns tipos de imagens, o formato GIF superior em
qualidade de imagem, tamanho de arquivo ou ambos; Para outros tipos
melhor utilizar o JPEG.
De maneira geral, JPEG melhor aplicado a imagens com grandes
variaes de cor (fotografias digitalizadas, por exemplo) ou imagens com
grandes variaes de tonalidade. Quanto mais complexa a imagem, melhor o
resultado com JPEG.
GIF melhor para imagens com cores lisas, que utilizam at 256 cores.
Para este tipo de imagem realiza uma compresso muito melhor do que o
JPEG. Nestes casos, JPEG produz imagens desfocadas. Por isso, imagens em
preto-e-branco puros (sem tons de cinza) no devem ser processados em
JPEG.

31

GIFs Entrelaadas
O formato GIF permite uma variao na forma de carregamento do
arquivo pelo navegador. Ao gerar um arquivo no formato GIF em um programa
de manipulao de imagem deve-se indicar a forma de carregamento normal
ou entrelaada. As imagens entrelaadas so carregadas em quatro passos
pelo navegador. Aps o primeiro passo j possvel visualizar toda a figura
bastante desfocada. Muitas vezes esta primeira visualizao j permite ao
usurio decidir se deseja continuar a carregar a figura ou no, poupando tempo
de transmisso. Os passos seguintes vo melhorando progressivamente a
definio da imagem at a sua forma final.
Imagens Transparentes
Quem j navegou pela web j deve ter encontrado sites com imagens que
se misturam com o fundo da pgina, imagens que do a impresso de no Ter
a forma retangular dos arquivos de imagens comuns. Este efeito obtido
atravs da utilizao do formato GIF89a.
Ao criar um arquivo GIF89a possvel indicar uma cor (alguns programas
permite mais de uma) como sendo a cor de fundo da imagem. Quando
encontra uma imagem deste tipo no documento, o navegador simplesmente
no pinta as partes da imagem que tem a cor de fundo, mantendo a cor de
fundo da pgina. H vrios programas no ambiente windows que permitem a
criao GIFs transparente (por exemplo, Lview, PhotoShop, etc).
No apndice B das notas de aula descrito como criar imagens com
fundo transparente no Lview e no Photoshop.

32

Imagens para Web

A rede esta cheia de figuras que podem ser aproveitadas na confeco de
uma pgina. Antes porm de utilizar uma imagem retirada da Web convm
verificar se quem a publicou permite a sua livre utilizao ou no. H dezenas
de site que oferecem imagens de domnio pblico, por exemplo:

http://www.sct.gu.edu.au/~anthony/icons/index.html

http://www.iconbazaar.com

http://www.gifworks.com

http://www.aaaclipart.com

http://daniweb.com/graphics

http://www.clipart.com

33

9. Mapas Clicveis
Anteriormente vimos como possvel ativar um link atravs da seleo de
uma imagem. Em muitas situaes, porm, pode ser interessante associar
vrios links a uma imagem de forma que dependendo de qual parte dela foi
selecionada o navegador exiba um documento diferente. O exemplo tpico
quando temos uma figura com um mapa de um pas e queremos que a seleo
de um estado especfico leve a uma pgina descrevendo este estado. A este
tipo de facilidade da linguagem HTML chamamos de mapas clicveis
Server Side Maps
A primeira forma de implementar mapas clicveis distribui o trabalho de
interpretao de qual documento deve ser carregado, em funo da seleo de
um ponto da imagem, entre o cliente e o servidor.
Neste caso, o cliente deve ser capaz de poder determinar o ponto exato
da figura que foi selecionado e enviar esta coordenada para um programa
instalado no servidor. Este programa, por sua vez, determina qual URL est
associada quele ponto e a envia para o cliente, que ento finalmente carrega
a pgina. No servidor h um arquivo associado a cada mapa clicvel, onde
esto definidas cada uma das regies do mapa e a URL que deve ser ativada
caso o ponto esteja dentro desta regio. Em geral, possvel definir 3 tipos de
regio: circulares, retangulares e poligonais.
Esta forma de selecionar as regies de uma imagem est caindo em
desuso pois apresenta vrias desvantagens. A primeira delas que o formato
deste arquivo de definio das rea dependente do tipo de servidor. Ao
mudar uma pgina de um servidor para outro necessrio converter estes
arquivos. Outra desvantagem que costuma ser necessrio pedir a
interveno do administrador do servidor para atualizar o arquivo. Alm disso, a
cada seleo necessrio uma consulta ao servidor para determinar o
documento que foi selecionado (o que implica num maior tempo de resposta).

34

Por fim, o usurio no tem nenhuma indicao de qual URL ele est
selecionando pois esta informao est no servidor.
Client Side Maps
Neste tipo de mapa clicvel, a definio das regies de uma figura feita
no prprio arquivo HTML. preciso que o navegador seja capaz tanto de saber
determinar qual ponto da figura foi selecionado quanto descobrir em qual rea
est contido este ponto (o Netscape a partir da verso 2.0 e o Explorer a partir
da verso 3.0 j implementam isso).
Para definir as diferentes regies da figura e associ-las a diversas URLs
so necessrias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>.
A tag <MAP> ... </MAP> contm as tags que faro a definio de cada
uma das reas. Esta tag contm apenas o atributo NAME que serve para
definir um nome que ser utilizado para associar as regies a um determinado
arquivo de imagem (includo atravs da tag <IMG>).
Uma ou mais tags <AREA> so colocadas dentro da tag <MAP> ...
</MAP> para definir cada uma das reas de uma figura. H trs tipos de reas:
circulares, retangulares e poligonais. O valor do atributo SHAPE especifica a
forma da rea e pode receber os seguintes valores: CIRCLE, RECT (valor
default) e POLYGON.

O atributo COORDS fornece um conjunto de

coordenadas para definir a rea. O significado e nmero de coordenadas varia

de acordo com a forma escolhida, assim:

CIRCLE requer trs valores x, y e r; onde (x, y) o centro do crculo e r o

raio. No exemplo abaixo definida uma rea circular de 20 pontos de raio,
posicionada na coordenada (100, 50) da figura:
<AREA SHAPE=CIRCLE COORDS=100, 50, 20>

RECT requer quatro valores x1, y1, x2, y2; onde (x1, y1) o vrtice
superior esquerdo do retngulo e (x2, y2) o vrtice inferior direito. No

35

exemplo abaixo definido um retngulo de altura 50 e largura 100,

posicionado na coordenada (30, 60) da figura:
<AREA SHAPE=RECT COORDS=30, 60, 130, 110>

POLYGON requer um numero par de valores x1, y1, ... xn, yn; onde cada
par (xn, yn) corresponde a um dos vrtices do polgono. No exemplo abaixo
definido um tringulo com os vrtices (30, 40), (100, 80) e (30, 80):
<AREA SHAPE=POLYGON COORDS=30, 40, 100, 80, 30, 80>
A tag <AREA> deve ter definido o atributo HREF para indicar a URL que

deve ser carregada aps a seleo da regio. possvel tambm utilizar o

atributo ALT para exibir um texto explicativo quando o cursor do mouse passar
sobre a rea.
Nada impede que haja sobreposio de reas. Quando a coordenada
selecionada se encontra na interseo de duas reas, a regio selecionada
ser aquela que foi definida primeiro.
Aps a definio do mapa, necessrio associar uma figura a ele. A tag
<IMG> tem para isso o atributo USEMAP que deve receber como valor o nome
do mapa associado.
A seguir um exemplo que ilustra a criao de um mapa clicvel:
<MAP NAME="mainmap">
<AREA SHAPE=CIRCLE COORDS="50,50,25"
HREF="http://home.netscape.com" >
<AREA SHAPE=RECT COORDS="50,50,100,100"
HREF="http://developer.netscape.com" >
<AREA SHAPE=RECT COORDS="0,0,100,100"
HREF="http://developer.netscape.com/docs" >
</MAP>
<IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100
ALT="shapes" USEMAP="#mainmap">

36

10.

A tag <META>
Uma tag muito importante que pode ser colocada no interior da rea de

cabealho (rea delimitada pela tag <HEAD> ... </HEAD>) a tag <META>.
Esta tag tem mltiplos usos: fornecer informaes para sites de busca, guardar
informaes de documentao, enviar informaes especiais para o navegador
e fazer a troca automtica de documento sendo exibido pelo navegador. Esta
tag reconhece trs atributos, cujos valores variam conforme a funo
desempenhada pela tag. Os atributos so: HTTP-EQUIV, NAME e CONTENT.
Informao para Sites de Busca
Quando uma pgina cadastrada num site de busca, dois tipos de
informao so armazenados:

Ttulo da pgina O ttulo da pgina definido pela tag <TITLE> e a

primeira informao exibida como resultado de uma busca.

Descrio da pgina Normalmente a descrio formada pelos primeiros

200 caracteres a aparecer na pgina aps a tag <BODY>. possvel,
porm, indicar explicitamente esta descrio independente da informao
exibida na pgina.
A descrio da pgina pode ser definida atravs da tag <META> com

atributo NAME recebendo o valor description e o atributo CONTENT

recebendo como valor a descrio da pgina.
A ordem em que uma pgina aparece como resultado de uma pesquisa
depende do seu contedo. As pginas que contm mais ocorrncias das
chaves da busca aparecem em primeiro lugar. possvel utilizar a tag <META>
para fornecer mais informao ao mecanismo de busca definindo o atributo
NAME com o valor keywords e o atributo CONTENT com uma srie de
palavras separadas por vrgulas. A informao da tag <META> acrescentada
a informao obtida no resto da pgina (no a substitui).

37

O exemplo a seguir ilustra a utilizao desta tag:

<HEAD>
<TITLE>Minha Home Page</TITLE>
<META NAME=description
CONTENT=Esta a descrio da minha pgina>
<META NAME=keywords
CONTENT=fotografia, programao, poesia>
</HEAD>
Observaes a cerca dos sites de busca:

Tamanho Normalmente as informaes de descrio so limitadas em

200 caracteres e as chaves em 1000 caracteres.

Abuso de chaves O mecanismo de busca ignora toda a lista de chaves

quando uma chave utilizada mais de 7 vezes numa tag <META>.

Pginas com imagens O atributo ALT das imagens tambm levado em

conta pelos mecanismos de busca. Assim pginas cujo contedo principal
seja grfico tambm podem ser encontradas.

Pginas com javascript Pginas comeadas por programas em javascript

devem utilizar a tag <META> para definir o contedo da pgina.
No endereo a seguir possvel encontrar informaes acerca de como

vrios sites de busca obtm informaes nas pginas e da freqncia que

estas informaes so atualizadas:
http://www.eons.com/metatags.htm
Documentao
O exemplo a seguir mostra o cabealho de uma pgina criada no
FrontPage. O editor inseriu uma srie de informaes apenas com o intuito de
documentar a pgina (como autor e programa utilizado para gerar a pgina). A
terceira tag <META> interpretada pelo prprio FrontPage e apenas para ele
faz sentido. Esta tag indica que na pgina qual estilo pr-definido foi utilizado.

38

<head>
<title>Home Page da Ana Lcia</title>
<meta NAME="Author" CONTENT="Joo Srgio S. Assis">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
<meta NAME="Microsoft Theme" content="leaves 011, default">
</head>
Informaes especiais para o navegador
Alguns navegadores reconhecem algumas informaes especiais e
podem tomar atitudes em funo delas. possvel por exemplo especificar
uma data de validade da pgina (a data deve ser especificada no formato
mostrado no exemplo abaixo), a partir da qual ela deve ser retirada do cache e
recarregada. O exemplo a seguir ilustra esta utilizao da tag:
<head>
<title>Minha Home Page</title>
<META HTTP-EQUIV="EXPIRES"
CONTENT="Fri, 31 Dec 1999 00:00:01 GMT">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="Portuguese">
</head>
Troca automtica de documento
De todas as utilidades da tag <META> esta possivelmente a mais
interessante de todas. possvel indicar ao navegador que aps alguns
segundos a pgina que est sendo exibida deve ser substituda por uma outra
pgina. Esta tag utilizada desta forma pode ter vrias aplicaes:

Redirecionamento - quando o endereo de uma pgina mudou mas se

deseja que as pessoas que utilizam o endereo antigo continuem a ter
acesso a pgina. possvel redirecionar automaticamente os que acessam
o endereo antigo para o novo endereo.

Apresentao de slides Um conjunto de imagens (uma em cada pgina)

apresentado sem a interveno do usurio.

39

Animaes Neste caso s tem um resultado satisfatrio quando se est

carregando imagens locais ou numa Intranet, com tempos de acesso
pequenos.
Para fazer a troca automtica de documento deve-se 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=pgina
Onde:

Tempo tempo em segundos at carregar a nova pgina.

Pgina URL da nova pgina a ser carregada.

No exemplo a seguir a pagina nova.html carregada aps 10 segundos:
<META HTTP-EQUIV="refresh" CONTENT="10; URL=nova.html">

40

11.

Multimdia e animaes

Multimdia
Os navegadores tambm podem ser utilizados para reproduzir arquivos
de udio e vdeo. Como h uma infinidade de formatos para este tipo de dado,
a reproduo destes tipos de arquivo realizada atravs de mdulos
incorporados ao navegador (pluggin) ou a programas externos. Alguns
navegadores costumam, durante a sua instalao, a instalar os pluggins para
os tipos de arquivos mais comuns. Para outros pluggins necessrio que o
prprio usurio faa a instalao. Quando o navegador no tem determinado
pluggin simplesmente ignora o arquivo requisitado. Na tabela a seguir alguns
formatos comuns:

Formatos de udio
Wav

Formato padro Windows.

Au

Formato padro Unix

Mp3

Formato compactado.

Mid

Msica produzida por sintetizador.

ra

Real Audio (execuo por demanda).

Formatos de vdeo
Avi

Formato padro Microsoft.

Mov

Formato padro Apple.

Mpeg

Formato compactado.

41

Inserindo udio e vdeo

Uma das formas fazer com que um arquivo de udio ou vdeo seja
executado inclu-lo no documento na forma de um link. Desta forma ele s
ser executado se o usurio selecionar o link. No exemplo abaixo, a seleo do
texto link p/ msica faz com que o navegador carregue e execute o arquivo
xmas.wav:
<A HREF=xmas.wav>link p/ msica</A>
Algumas vezes interessante executar o udio ou vdeo independente da
interveno do usurio. Um exemplo deste tipo de aplicao a incluso de
uma msica de fundo numa pgina. Isso um pouco mais complicado pois no
h uma padronizao muito rigorosa entre os navegadores.
Ambos os navegadores reconhecem a tag <EMBED>, que serve para
exibir informao produzida por um mdulo incorporado ao navegador
(pluggin). Para cada um deles, porm, necessrio definir determinados
atributos para que seja produzido um resultado satisfatrio. Em qualquer caso
fundamental definir o atributo SRC com a URL do arquivo que vai ser exibido
(arquivo de som ou de vdeo). Para os demais atributos necessrio analisar
caso por caso.
A tab <EMBED> no Netscape
A incluso da tag <EMBED> apenas com o atributo SRC definido faz com
que o Netscape inclua na pgina o painel de controle do pluggin. O som ou
imagem no exibido imediatamente mas o usurio pode, atravs do painel de
controle, exibi-lo quantas vezes desejar.
Normalmente o Netscape no sabe que espao reservar na pgina para o
painel de controle e por isso necessrio definir tambm os atributos WIDTH e
HEIGHT, informando a largura e a altura a ser ocupada.
A incluso do atributo HIDDEN=True faz com que, no caso de um
arquivo de som, o painel de controle no seja exibido e o som seja tocado
42

imediatamente aps o carregamento da pgina. No caso de um vdeo este

atributo tem o mesmo efeito de definir a largura e a altura da janela de exibio
como zero, o que faz com que o navegador no possa mostrar nada
(normalmente isso causa um erro no pluggin).
Para fazer com que o vdeo comece a ser exibido aps o carregamento
da pgina necessrio definir o atributo AUTOSTART=True, alm da altura e
largura ocupadas pelo vdeo na janela. Quando este atributo est definido, o
Netscape no exibe o painel de controle do pluggin, apenas o prprio vdeo.
A tag <EMBED> tambm conta com o atributo ALIGN que pode receber
os mesmos valores que recebe para a tag <IMG> e comporta-se da mesma
maneira.
O atributo LOOP recebe um valor que indica o nmero de vezes que o
som deve ser repetido (p. ex. LOOP=10 faz com que o som seja tocado 10
vezes). Este atributo no tem nenhum efeito em arquivos de vdeo. O exemplo
abaixo mostra a utilizao desta tag tanto para exibir som como vdeo:
<EMBED SRC=x.avi AUTOSTART=True width=200 height=200>
<EMBED SRC="x.wav" HIDDEN=True LOOP=100>
A tab <EMBED> no Explorer
Quando se define a tag <EMBED> apenas com o atributo SRC, o Explorer
tambm exibe o painel de controle do pluggin. Diferentemente do Netscape no
necessrio definir a largura e altura pois o navegador consegue determinar o
espao ocupado pela janela do pluggin. O atributo ALIGN tem o mesmo efeito
do Netscape.
O atributo HIDDEN tambm tem o efeito de fazer desaparecer o painel de
controle do pluggin mas no faz com que ele seja executado automaticamente.
Para que isso acontea necessrio definir o atributo AUTOSTART=True
mesmo para arquivos de som.

43

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 re-exibido
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="x.wav" AUTOSTART=True HIDDEN=True LOOP=100>
No Explorer possvel utilizar a tag <IMG> para exibir vdeos 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 vdeo, j o Netscape far o contrrio. Arquivos de de

som podem ser exibidos utilizando a tag <BGSOUND>. O exemplo acima
poderia ser escrito ento como:
<IMG DYNSRC=x.avi SRC=alt.jpg loop=yes>
<BGSOUND SRC=x.wav loop=yes>
Obviamente essas formataes no tero efeito algum se o browser no
estiver configurado para tocar msica ou se o computador que receber a
pgina no tiver uma placa de som.
Tags dependentes do navegador
Apenas a ttulo de curiosidade so descritas nesta seo duas container
tags implementadas apenas em um determinado tipo de navegador. Os
navegadores que no a reconhecem vo simplesmente exibir o texto contido
na tag sem realizar nenhuma ao especial
A tag <MARQUEE> ... </MARQUEE>, que funciona apenas no navegador
Internet Explorer, serve para exibir um texto rolando na janela, da esquerda
para a direita, num efeito similar a de um letreiro luminoso. O efeito causado
por esta tag pode ser visualmente interessante, mas no convm utiliz-la por
ser dependente do navegador. Atravs de Javascript possvel obter o mesmo
efeito, com a vantagem da portabilidade.

44

A tag <BLINK> ... </BLINK>, que funciona apenas no navegador

Netscape, serve para exibir um texto piscando na janela. Novamente, no
conveniente utilizar esta tag para manter a uniformidade de aspecto da pgina
independente do navegador utilizado para visualizao.
Animaes
H vrias formas de criar animaes em pginas de Web:

GIFs animadas

Applets JAVA

HTML dinmico e Javascript

GIFS animadas so pequenas seqncias de animao compostas por

vrias imagens do tipo GIF agrupadas em um arquivo. A criao de uma GIF

animada muito simples. Basta criar cada uma das imagens que vo compor a
seqncia, com pequenas variaes no desenho para cada instante de tempo
(como num desenho animado). Estes arquivos de imagens so posteriormente
agrupados por meio de um programa. H diversos programas que auxiliam a
criao de GIFs animadas disponveis na rede, apenas para citar alguns, por
exemplo:

http://www.mindworkshop.com/alchemy/gifcon.html

http://www.webutilities.com/ga/ga_main.htm

http://rtlsoft.com/animagic/index.html

http://www.moviegear.com/
Para animaes mais complexas e de figuras maiores pode-se optar por

usar applets JAVA ou Javascript. Um applet um pequeno programa em Java

voltado para utilizao na Web. Mesmo que no se saiba como cri-los
possvel utilizar applets prontos, que permitam reconfigurao. Um exemplo
disponibilizado pela Sun no endereo:
http://java.sun.com/applets/Animator/index.html
45

12.

Tabelas
Neste ponto chegamos a umas das tags mais importantes do HTML: a tag

<TABLE> .... </TABLE>. Esta tag permite a definio de tabelas no documento.

Mais do que isso porm, atravs das tabelas possvel forar o
posicionamento dos elementos em uma pgina. Esta tag deve vir sempre
acompanhada das tags <TR>...</TR> e <TD>...</TD> (ou <TH>...</TH>), que
servem para definir, respectivamente, as linhas e as clulas de cada coluna da
tabela.
A tag <TH>...</TH> utilizada para definir clulas que serviro de ttulo
da tabela (no obrigatrio que uma tabela tenha ttulo) e o texto em seu
interior escrito em negrito. A no incluso de linhas e colunas faz com que
alguns navegadores simplesmente ignorem a tag <TABLE>...</TABLE>. O
exemplo a seguir mostra uma tabela com duas linhas e trs colunas:
<TABLE BORDER>
<TR>
<TD>Col
<TD>Col
<TD>Col
</TR>
<TR>
<TD>Col
<TD>Col
<TD>Col
</TR>
</TABLE>

1 Lin 1</TD>
2 Lin 1</TD>
3 Lin 1</TD>

1 Lin 2</TD>
2 Lin 2</TD>
3 Lin 2</TD>

Este trecho HTML vai produzir como sada a seguinte tabela:

Col 1 Lin 1 Col 2 Lin 1

Col 3 Lin 1

Col 1 Lin 2 Col 2 Lin 2

Col 3 Lin 2

46

Elemento

Descrio

Atributos

<TABLE> ... </TABLE> Tabela

BORDER, CELLSPACING,
CELLPADDING, BACKGROUND,
WIDTH, BGCOLOR, ALIGN

<TR> ... </TR>

Linha da tabela

VALIGN , ALIGN

<TH> ... </TH>

Coluna (ttulo)

<TD> ... </TD>

Coluna da tabela

VALIGN, ALIGN, ROWSPAN,

COLSPAN, WIDTH, BGCOLOR,
BACKGROUND, NOWRAP

Atributos de <TABLE>
A borda da tabela s visvel se o atributo BORDER estiver definido.
Tabelas sem borda so muito teis para posicionar elementos dentro de uma
pgina. O atributo CELLSPACING define o espao entre as clulas da tabela e
seu valor default 2. O atributo CELLPADDING o espao entre o dado contido
numa clula e a borda (o valor default 1).
O atributo WIDTH define a largura da tabela na janela. A largura pode ser
definida em termos absolutos (nmero de pixels) ou em termos da
porcentagem da janela ocupada pela tabela. Se este atributo no for
especificado, a largura definida pelo contedo da tabela. O atributo ALIGN
define o alinhamento da tabela em relao a janela (pode receber os valores
CENTER, RIGHT, LEFT).
possvel atribuir cor (atributo BGCOLOR) ou uma imagem (atributo
BACKGROUND) para o fundo de uma tabela. O funcionamento destes
atributos semelhante aos destes atributos na tag <BODY> ... </BODY>..
Atributos de <TR>
Os atributos VALIGN e ALIGN servem para definir o alinhamento dos
elementos dentro das clulas de uma determinada linha da tabela. O atributo
VALIGN (alinhamento vertical) pode receber o valor TOP, MIDDLE ou
47

BOTTOM (topo, meio ou fundo) e o valor default MIDDLE. O atributo ALIGN

(alinhamento horizontal) pode receber o valor LEFT, CENTER ou RIGHT
(esquerdo, centro ou direito) e o valor default LEFT.
Atributos de <TD> e <TH>
Estas tags tambm tem VALIGN e ALIGN como atributos, com o mesmo
significado da tag anterior, mas o alinhamento vale apenas para a clula em
que foi definido (suplantando o alinhamento da linha, se houver). O atributo
WIDTH permite que se indique, pelo nmero de pixels ou por uma
porcentagem da largura da tabela, o tamanho horizontal de uma clula. Caso
vrias clulas de uma mesma coluna definam este atributo vale o maior valor.
O atributo NOWRAP exibe o texto do interior de uma coluna como uma linha
continua, sem quebras.
O atributo ROWSPAN permite que se indique o nmero de linhas que
uma clula deve ocupar. O atributo COLSPAN permite que se indique o
nmero de colunas que uma clula deve ocupar. O exemplo a seguir ilustra a
utilizao destes atributos
<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 sada a seguinte tabela:

Col 1 Lin 1 Col 2 Lin 1

Col 3 Lin 1

Col 2 Lin 2

48

13.

Frames
Uma outra forma de forar o posicionamento de elementos e dividir o

espao de uma janela atravs dos Frames. Este um recurso relativamente

recente em HTML e a demora de alguns navegadores em incorporar esta nova
facilidade fez surgir uma certa m vontade em algumas pessoas.
Este recurso permite dividir a janela do navegador em vrias reas
independentes (chamadas Frames). Em cada uma destas reas pode ser
carregado e visualizado um arquivo HTML. A independncia de cada Frame,
que permite que o contedo de um seja rolado enquanto outro permanece
esttico, faz com que este recurso seja ideal para a criao de menus.
A construo de uma pgina utilizando Frames torna necessrio a criao
de um arquivo de layout e de, pelo menos, dois arquivos HTML comuns. O
arquivo de layout tambm um documento HTML, onde a tag <BODY> ...
</BODY> substituda pela tag <FRAMESET> ... </FRAMESET>, e serve para
definir a estrutura da janela principal (nmero, tamanho e localizao dos
Frames). O arquivo de layout tem, portanto, o seguinte formato:
<HTML>
<HEAD>

</HEAD>
<FRAMESET ROWS=50%, 50%>
<FRAME>
<FRAME>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
Este trecho HTML dividiria a tela da seguinte forma:

49

Atributos de <FRAMSET>

Atributos de <FRAMESET>
Atributos

Descrio

ROWS

Nmero e altura de cada linha de Frames

COLS

Nmero e largura de cada coluna de Frames

FRAMEBORDER

Indica se o Frame ter ou no borda (yes ou no)

BORDER

Largura da borda do Frame

BORDERCOLOR

Cor da borda do Frame

Os Frames so dispostos na janela do navegador na forma de linhas e

colunas, como uma tabela. Os atributos ROWS e COLS servem para definir o
nmero e tamanho ocupado por cada linha e coluna de Frames. O formato
deste atributo ROWS=v, v, ... ou COLS=v, v, ..., onde v pode ser:

Um nmero indicando a altura (no caso de ROWS) ou a largura

(COLS) em pixels de um Frame. Ex: ROWS=100, 50, 200 define 3
linhas de Frames, onde a primeira tem a altura de 100 pontos, a
segunda de 50 e a terceira de 200.

Um percentual indicando a altura ou largura em funo do tamanho

da janela do navegador. Ex: COLS=30%, 20%, 50% define 3
colunas de Frames, onde a primeira ocupa 30% da largura da janela,
a segunda 20% e a terceira 50%.

O caracter *, indicando altura ou largura relativa aos demais valores

definidos. Ex: COLS=30%, 20%, *, * define 4 colunas de Frames,
onde a primeira ocupa 30% da largura da janela, a segunda 20%, a
terceira e a quarta dividem os 50% restante, ficando cada uma com
25%.
50

Um nmero n seguido do caracter *, indica que um Frame ocupar n

vezes

espao

ocupado

pelos

demais

Frames

definidos

relativamente. Ex: ROWS=40%, 2*, * define 3 linhas de Frames,

onde a primeira ocupa 40% da altura da janela, a segunda 40% (2/3
da altura restante) e a terceira 20% (1/3 da altura restante).
Por definio, os Frames so separados por bordas da cor da borda da
janela do navegador. Atravs da atribuio do valor no ao atributo
FRAMEBORDER possvel inibir a exibio da borda. O atributo BORDER
permite atribuir um valor para a largura da borda e o atributo BORDERCOLOR
permite mudar a sua cor.
possvel incluir FrameSets dentro de um FrameSet de modo a subdividir
um Frame. Por exemplo, o seguinte arquivo de layout produziria:
<HTML>
<HEAD>

</HEAD>
<FRAMESET COLS=50%, 50%>
<FRAME>
<FRAMESET ROWS=50%, 50%>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
Este trecho HTML dividiria a tela da seguinte forma:

51

Atributos de FRAME

Atributos de <FRAME>
Atributos

Descrio

SRC

Arquivo inicialmente mostrado no Frame

NAME

Nome associado ao Frame

SCROLLING

Indica se o Frame ser rolvel (yes ou no)

NORESIZE

Usurio no 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 aps
o carregamento do arquivo de layout. Para exibir um novo documento num
Frame necessrio que isso seja resultado da seleo de um link. possvel,
portanto, indicar que a URL referenciada num link seja exibida em um
determinado Frame. Isto feito atravs da definio do atributo TARGET da
tag <A>...</A>. No exemplo abaixo a seleo de primeiro link faz com que o
documento f1.html seja exibido no Frame esquerdo; a seleo de segundo
link faz com que o documento f2.html seja exibido no Frame direito:
<HTML>
<HEAD>

</HEAD>
<BODY>
<A SRC=f1.html TARGET=esquerdo>primeiro link</A>
<A SRC=f2.html TARGET=direito>segundo link</A>
</BODY>
</HTML>
Para que o navegador saiba quais so os Frames direito e esquerdo
necessrio atribuir nomes a eles, o que feito atravs da incluso do atributo
52

NAME da tag <FRAME>. No exemplo a seguir mostrado o arquivo de layout

onde foram definidos os Frames direito e esquerdo:
<HTML>
<HEAD>

</HEAD>
<FRAMESET COLS=50%, 50%>
<FRAME NAME=esquerdo>
<FRAME NAME=direito>
</FRAMESET>
</HTML>
Existem alguns nomes especiais que podem ser utilizados no atributo
TARGET. O nome _blank faz com que o documento HTML seja carregado
numa nova janela do navegador. Isto particularmente desejvel quando se
faz referncias a um documento de um outro site. Desta forma a pgina onde
est a referncia continua sendo visvel. O nome _self indica que o novo
documento ser carregado no mesmo Frame onde est a pgina com o link
que causou sua exibio. O nome _parent faz com que o novo documento seja
aberto na janela onde est o arquivo de layout, em substituio a este. Para
entender o nome _top necessrio recorrer a um exemplo:
<HTML>
<HEAD>

</HEAD>
<FRAMESET COLS=50%, 50%>
<FRAME NAME=esquerdo>
<FRAMESET ROWS=50%, 50%>
<FRAME SRC=s.htm NAME=superior>
<FRAMESET COLS=50%, 50%>
<FRAME SRC=ie.htm NAME=InfEsquerdo>
<FRAME NAME=InfDireito>
</FRAMESET>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
Se a pgina ie.htm contiver um link com o TARGET=_top, a seleo deste
link far com que uma pgina seja exibida abaixo do Frame superior, no lugar
53

dos Frames InfEsquerdo e InfDireito. J se a pgina s.htm contiver um link

com o TARGET=_top, a seleo deste link far com que uma pgina seja
exibida ao lado do Frame Esquerdo, no lugar dos Frames Superior,
InfEsquerdo e InfDireito.
Como nas clulas 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 exibio da
barra de rolagem vertical do Frame: o valor yes faz com que a barra de
rolagem esteja sempre visvel, o valor no faz com que ela nunca seja exibida e
o valor auto (default) faz com que ela seja exibida apenas se necessrio. O
usurio pode, a qualquer momento, modificar o tamanho inicial do Frame, a
menos que o atributo NORESIZE seja definido.
Como foi dito anteriormente, Frames um recurso relativamente recente
em HTML. Como possvel que ainda estejam sendo utilizados navegadores
que no suportam este recurso existe a tag <NOFRAMES> ... </NOFRAMES>.
Os navegadores mais antigos s vo interpretar o que h dentro desta tag e os
mais novos vo ignor-la. Ela deve ser includa no fim do arquivo de layout com
um cdigo HTML alternativo ao cdigo contendo Frames, como no exemplo a
seguir:
<HTML>
<HEAD> </HEAD>
<FRAMESET>
<FRAME NAME=esquerdo>
<FRAME NAME=direito>
</FRAMESET>
<NOFRAMES>
Utilize um browser que suporte Frames nesta pgina.
</NOFRAMES>
</HTML>

54

14.

Formulrios
A principal forma de trocar informaes entre o usurio de uma pgina e o

responsvel por um site atravs de formulrios. A linguagem HTML oferece

uma srie de elementos de interao com usurio que podem ser agrupados
em um formulrio. O resultado da interao do usurio posteriormente
enviada para um programa sendo executado no servidor ou enviado por e-mail
para o responsvel pelo site.
A tag <FORM> ... </FORM> delimita a rea ocupada pelo formulrio e
possui dois atributos que indicam quem vai receber os dados do formulrio
(atributo ACTION) e a forma como eles sero enviados pela rede (atributo
METHOD).
Quando METHOD recebe o valor GET o contedo do formulrio enviado
para o servidor anexado URL definida em ACTION. Este mtodo adequado
a formulrios pequenos, com pouca informao. Tambm no conveniente
enviar informaes sigilosas. O outro valor que pode ser atribudo a METHOD
POST. Neste caso as informaes do formulrio so enviadas separadas da
URL.
O atributo ACTION serve para informar a URL do programa CGI que ir
processar o formulrio. possvel utilizar este atributo para informar que os
dados do formulrio sero enviados por e-mail para o administrador do site.
Neste caso deve-se definir o atributo ENCTYPE com o valor text/plain e o
mtodo de envio deve ser definido como POST. O exemplo a seguir mostra um
formulrio que ser enviado para o endereo joao@nce.ufrj.br:
<FORM
METHOD=POST
ACTION=mailto:joao@nce.ufrj.br
ENCTYPE=text/plain>
...
</FORM>

55

O interior da tag <FORM>...</FORM> pode conter quatro tipos de tag que

servem para definir os diversos elementos de interao. Estas tags so:

<INPUT>

<SELECT> ... </SELECT>

<OPTION>

<TEXTAREA> ... </TEXTAREA>

A tag <INPUT>
A tag <INPUT> bastante verstil e permite criar campos para entrada de
texto, campos para entrada de senhas, botes comuns, botes estilo rdio e
botes de seleo mltipla.
Atributos de <INPUT>
Atributo
TYPE

Valor

Descrio

TEXT

Campo de entrada de uma linha de texto.

PASSWORD

Campo de entrada de senha.

CHECKBOX

Botes de rdio e botes de seleo mltipla.

BUTTON

Boto comum.

SUBMIT

Boto que envia o formulrio.

RESET

Boto que limpa os campos do formulrio.

NAME

String

Nome da varivel associada ao campo.

VALUE

String

Valor default do campo.

SIZE

Tamanho

Tamanho do campo TEXT ou PASSWORD.

MAXLENGTH Tamanho

Nmero mximo de caracteres a ser lido.

CHECKED

Define um campo CHECKBOX como selecionado.

56

Campo para entrada de uma linha de texto

A tag <INPUT> com o atributo TYPE=TEXT definido serve para criar um
campo para entrada de uma linha de texto. Deve-se definir o atributo NAME
com um nome que estar associado ao valor inserido no campo de entrada. O
exemplo abaixo faz com que o navegador exiba na pgina um campo de
entrada de texto; caso o usurio digite joao e envie o formulrio, a informao
ser recebida pelo programa na forma de conta=joao:
Conta:<INPUT TYPE=TEXT NAME=conta>
A tag <INPUT> com o atributo TYPE=PASSWORD definido serve para
entrar informaes sigilosas, como uma senha por exemplo. Neste caso, o que
digitado pelo usurio no exibido na janela do navegador. Para tirar
proveito do sigilo, este tipo de campo deve ser enviado pelo mtodo POST. No
exemplo abaixo se o usurio digitar pcpw99 e enviar o formulrio, a
informao recebida pelo programa ser senha=pcpw99:
Senha:<INPUT TYPE=PASSWORD NAME=senha>
possvel definir o tamanho da rea para entrada de texto atravs do
atributo SIZE. Este atributo no limita o nmero de caracteres que o usurio
pode digitar, apenas o tamanho do campo. Para se indicar o nmero mximo
de caracteres que pode ser digitado pelo usurio deve-se definir o atributo
MAXLENGTH. No exemplo abaixo a rea de entrada de texto tem o tamanho
de 7 caracteres mas o usurio pode digitar at 11 caracteres:
Telefone:<INPUT TYPE=TEXT NAME=telef SIZE=7 MAXLENGTH=11>
possvel preencher o campo com um valor padro que exibido antes
do usurio digitar qualquer coisa. Isso feito atravs do atributo VALUE. A
omisso do atributo TYPE faz com que o navegador assuma o tipo TEXT.
Botes de rdio
Um tipo de elemento de interao muito comum so os botes de rdio
(Radio Buttons). Estes botes so utilizados quando o usurio deve escolher
57

uma nica resposta entre vrias. Quando um dos botes selecionado,

automaticamente todos os outros so desselecionados. Estes elementos so
criados pela tag <INPUT> com o atributo TYPE=RADIO. Para indicar ao
navegador quais botes so mutuamente exclusivos preciso que eles tenha o
atributo NAME definido com o mesmo valor. O atributo VALUE deve ser
definido e indica o valor que ser enviado. Atravs do atributo CHECKED
possvel indicar que uma das alternativas estar previamente selecionada. No
exemplo abaixo, a opo Superior est previamente selecionada; se o usurio
selecionar Analfabeto a informao enviada ao programa ser instruc=A:
Nvel de Instruo:<BR>
<INPUT TYPE=RADIO NAME=instruc
<INPUT TYPE=RADIO NAME=instruc
<INPUT TYPE=RADIO NAME=instruc
<INPUT TYPE=RADIO NAME=instruc

VALUE=A>Analfabeto<br>
VALUE=1>1o grau<br>
VALUE=2>2o grau<br>
VALUE=S CHECKED>superior<br>

Botes de seleo mltipla

Quando desejvel escolher mais de uma resposta utiliza-se botes de
seleo mltipla (toggle buttons). A criao destes botes feita atravs da tag
<INPUT> com o atributo TYPE=CHECKBOX. Diferente dos botes de rdio,
cada um dos botes deve definir um valor diferente ao atributo VALUE. Como
vrios botes podem estar selecionados, vrios deles podem ter o atributo
CHECKED definido. No exemplo abaixo as opes Netscape e Explorer
estavam previamente definidas; se o usurio enviar o formulrio sem fazer
nenhuma modificao o programa vai receber nav1=N e nav3=E:
Navegador utilizado:<BR>
<INPUT TYPE=CHECKBOX NAME=nav1
<INPUT TYPE=CHECKBOX NAME=nav2
<INPUT TYPE=CHECKBOX NAME=nav3
<INPUT TYPE=CHECKBOX NAME=nav4

VALUE=N CHECKED>Netscape<br>
VALUE=M>Mosaic<br>
VALUE=E CHECKED>Explorer<br>
VALUE=H>HotJava<br>

Boto de envio de dados e limpeza do formulrio

A tag <INPUT> permite a criao de dois tipos de botes que agem sobre
todo o formulrio. A definio do atributo TYPE=SUBMIT inclui um boto que
faz o envio do formulrio. A definio do atributo TYPE=RESET inclui um boto
58

que limpa os campos do formulrio. Em ambos os casos, o atributo VALUE

define um texto para ser escrito no interior do boto. A omisso deste atributo
faz com que o navegador exiba um texto default. Normalmente estes dois
botes so colocados no fim do formulrio. O exemplo a seguir mostra a
utilizao destes botes:
<FORM>
...
<INPUT TYPE=SUBMIT NAME=Envia>
<INPUT TYPE=RESET NAME=Limpa>
</FORM>
rea de texto
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 varivel que ser associada ao texto inserido. O tamanho da rea de
texto definido pelo nmero de linhas (atributo ROWS) e pelo nmero de
colunas (atributo COLS). No interior da tag possvel colocar um texto a ser
exibido antes do usurio digitar qualquer coisa. O exemplo a seguir mostra a
utilizao desta tag:
Comentrios:<BR>
<TEXTAREA NAME=coment ROWS=3 COLS=40>
Faa aqui seus comentrios
</TEXTAREA>
Listas de seleo
Quando h muitas opes a escolher pode no ser muito prtico utilizar
botes de rdio ou botes de seleo mltipla pelo espao que eles ocupam.
Um alternativa so as listas de seleo criadas atravs de tag <SELECT> ...
</SELECT>. O atributo NAME deve ser utilizado para definir o nome da
varivel que ser enviada ao programa. O atributo SIZE indica o nmero de
opes mostradas de uma s vez pelo navegador (as demais opes podem
ser acessadas atravs de uma barra de rolagem exibida direita da lista). O
atributo MULTIPLE indica que mais de uma opo pode ser selecionada.
59

No interior do <SELECT> devem ser colocadas cada uma das opes da

lista, indicadas pela tag <OPTION>. O atributo SELECTED pode ser utilizado
para definir qual opo est previamente selecionada. Se o atributo MULTIPLE
foi definido na tag <SELECT> possvel definir o SELECTED para mais de
uma opo.
O exemplo a seguir mostra a utilizao destas tags:
Sexo:
<SELECT NAME=sexo>
<OPTION SELECTED>Masculino
<OPTION>Feminino
</SELECT>

60

15.

Folhas de estilo
At a verso 4 da linguagem HTML, as tags tinham uma definio e

comportamento padro, que uns poucos atributos podiam modificar. Caso se

desejasse criar pginas cuja aparncia fosse ligeiramente diferente do
comportamento padro era necessrio incluir os atributos e tags que
definissem essa aparncia nos pontos do documento onde fosse necessrio,
misturados a prpria estrutura do documento.
Por exemplo, num documento cujo texto fosse de cor preta (definida na
tag <BODY> atravs do atributo TEXT), caso se desejasse cabealhos de cor
azul marinho seria necessrio envolver cada ocorrncia da tag <H1></H1>
com a tag <FONT

color=navy></FONT>. Qualquer modificao a ser

realizada nesta definio tornava necessrio buscar por todo o documento o

que deveria ser modificado.
Cascade Style Sheets (CSS)
A verso 4 do HTML introduziu o conceito de folhas de estilo (CSS
cascade style sheets). Atravs dos estilos possvel definir informaes de
tipografia, cor, layout e alinhamento de forma independente da estrutura do
documento. Estas informaes podem inclusive estar contidas em um arquivo a
parte que pode ser includo nos diversos documentos que compem o site,
garantindo assim uma apresentao comum em todas as pginas. Alm das
facilidades de formatao j existente foram acrescentadas novas facilidades, o
que permite um controle muito maior do layout.
A folha de estilos definida por meio da tag <STYLE> ... </STYLE> que
deve ser colocada na seo <HEAD> do documento. Esta tag tem um atributo
TYPE que indica a sintaxe dos estilos contidos na tag. H dois tipos de sintaxe
possvel: a sintaxe CSS (normalmento o padro, valor text/css do atributo
TYPE) e a sintaxe javascript (reconhecida apenas pelo navegador netscape,
valor text/javascript do atributo TYPE).

61

O exemplo a seguir faz com que todos os cabealhos do tipo 1

(<H1>...</H1>) sejam escritos utilizando o fonte arial e a cor azul; e todos os
cabealhos do tipo 2 (<H2>...</H2>) sejam escritos utilizando o fonte arial e a
cor verde:
<STYLE TYPE=text/css>
<!-H1 {
font-family: arial;
color: blue;
}
H2 {
font-family: arial;
color: green;
}
-->
</STYLE>
A colocao dos estilos entre os smbolos <!-- e --> no obrigatria. A
utilizao deste smbolos ignorada pelos navegadores que conhecem a tag
<STYLE> (explorer e netscape de verso igual ou superior a 4), mas no pelos
navegadores de verses anteriores que desta forma tomam a definio dos
estilos como comentrio. O texto do interior da tag <STYLE> no HTML e
segue a seguinte sintaxe:
<STYLE TYPE=text/css>
/* comentrio */
seletor {
propriedade: valor;
propriedade: valor valor valor ...;
...
}
seletor, seletor {
propriedade: valor;
...
}
</style>
Propriedades dos Estilos
Propriedades so atributos que definem a forma de visualizao de uma
determinada tag ou de um grupo de tags. Elas podem ser divididas em 7
grupos, de acordo com sua funo e nem sempre so aplicveis a qualquer
62

tag. H pequenas incompatibilidades entre a forma como os dois principais

tipos de navegadores (explorer e netscape) so afetados por algumas
propriedades, que podem, inclusive, ser ignoradas. A implementao de estlos
por parte do Netscape mais recente e nem tudo que foi implementado no
explorer reconhecido por esse navegador. Os 7 tipos de propriedades so as
que modificam: fontes de caracteres, cor e imagem de fundo, espaamento,
caractersticas de listas, alinhamento de texto, bordas e posicionamento de
camadas. Os quadros a seguir mostram as propriedades de cada tipo, seus
valores possveis e o navegador(es) que as implementam (apenas excludo
posicionamento de camadas que est fora do programa do curso).
Valores
H 5 tipos distintos de valores de propriedades:

palavras chave - so palavras prdefinidas que podem expressar uma

dimenso (small - pequeno), uma relao (bolder - mais escuro) ou o nome
de um fonte de caracteres (arial, times, etc). Estas palavras no so casesensitive.

tamanho - um valor numrico, precedido ou no de sinal e seguido da

indicao da unidade. As unidades vlidas so: pixel (px), polegadas (in),
centimetros (cm), milimetros (mm), pontos (pt - 1 / 72 de uma polegada) ou
picas (pc - 12 pontos). Por exemplo: 1in, 1.5cm, -3pt, +0,25mm.

percentuais - um valor numrico seguido do simbolo %. Este valor no

dinmico e diz respeito apenas ao momento em que o navegador for aplicar
o estilo. Por exemplo: 120%.

URLs - a forma de indicar uma URL diferente da utilizada em HTML e

segue a seguinte sintaxe: url(endereo). So, portanto, valores vlidos de
URL: url(http://equipe.nce.ufrj.br/joao/home.html) e url(foto.jpg).

cores - h 3 formas de especificar uma cor: seu nome em ingls, a definio

RGB do HTML (#RRGGBB - no pode estar entre aspas) ou atravs da
63

sintaxe rgb(vermelho, verde, azul). So, portanto, valores vlidos de cor:

yellow, #FFFF00, rgb(125, 100, 70) ou rgb(50%, 50%, 20%).
Fonte
Propriedades

Valores Possveis

browser

font-family

lista de nome de fontes

font-size

tamanho, percentual, xx-small, x-small, small, ambos

medium, large, x-large, xx-large, larger,
smaller

font-style

normal, oblique, italic

font-weight

normal, bold, bolder, lighter, 100, 200, 300, ambos

400 (normal), 500, 600, 700, 800, 900

font-variant

normal, smallcaps

explorer

font

family size style weight variant

explorer

color

nome da cor, #RRGGBB

ambos

text-decoration

none, overline, underline, overline, blink, ambos

line-through

text-transform

capitalize, lowercase, none, uppercase

ambos

ambos

ambos

Cor e imagem de fundo

Propriedades

Valores Possveis

browser

background-position

tamanho (x y), percentual (x y), top, explorer

center, bottom, left, right

background-image

url da imagem

ambos

background-color

transparent, nome da cor, #RRGGBB

ambos

background-attachment scroll, fixed

explorer

background-repeat

repeat, repeat-x, repeat-y, no-repeat

ambos

background

attachment color image position repeat

explorer

64

Espaamento
Propriedades

Valores Possveis

browser

letter-spacing

tamanho

explorer

white-space

normal, nowrap, pre

netscape

line-height

tamanho, percentual, normal

ambos

margin-top

tamanho, percentual, auto

ambos

margin-bottom

tamanho, percentual, auto

ambos

margin-right

tamanho, percentual, auto

ambos

margin-left

tamanho, percentual, auto

ambos

margin

tamanho, percentual, auto

explorer

padding-top

tamanho, percentual, auto

ambos

padding-bottom tamanho, percentual, auto

ambos

padding-right

tamanho, percentual, auto

ambos

padding-left

tamanho, percentual, auto

ambos

padding

tamanho, percentual, auto

explorer

word-spacing

tamanho

ambos

float

none, left, right

ambos

clear

none, both, left, right

ambos

Listas
Propriedades

Valores Possveis

list-style-image URL, none

browser
explorer

list-style-type

circle, square, disc, lower-alpha, upper-alpha, ambos

lower-roman, upper-roman, decimal, none

list-style

image type

ambos

65

Alinhamento de texto
Propriedades

Valores Possveis

browser

text-indent

tamanho, percentual

ambos

text-align

left, center, right, justify

ambos

vertical-align

baseline, middle, sub, super, text-bottom, ambos

text-top, percentual

Bordas
Propriedades

Valores Possveis

browser

border-top-width

tamanho, thin, thick, medium

ambos

border-bottom-width

tamanho, thin, thick, medium

ambos

border-right-width

tamanho, thin, thick, medium

ambos

border-left-width

tamanho, thin, thick, medium

ambos

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, groove, ambos

inset, outset, ridge. solid

border

cor width style

ambos

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

<STYLE>
H1, H2, H3, B {
color: blue;
}
</STYLE>
Seletor contextual
possvel indicar que as propriedades de uma determinada tag s sero
modificadas quando ela se encontrar no interior de uma ou mais tags container.
No exemplo a seguir e todo textos em itlico dentro de cabealhos H1 (apenas
estes) sero escritos com a cor verde, os demais textos em itlico tero a cor
padro :
<STYLE>
H1 i {
color: green;
}
</STYLE>
Compartilhando estilos
possvel compartilhar estilos entre vrios documentos HTML. Os estilos
devem estar contidos num arquivo com extenso css, que pode ser includo
num documento por meio da tag <LINK> colocada em sua seo <HEAD>. A
utilizao de um arquivo de estilo permite criar uma verdadeira uniformizao
das pginas de um site. Qualquer modificao neste arquivo modifica todas as
pginas de uma vez. O exemplo a seguir mostra a sintaxe da tag <LINK> para
incluir o arquivo estilo.css num documento HTML:
<link rel=stylesheet type=text/css href=estilo.css>
O valor do atributo HREF indica o nome do arquivo de estilos e alm dele
necessrio definir tambm os atributos REL e TYPE com os valores
mostrados no exemplo. Um arquivo de estilos no um arquivo HTML, ou seja,
no necessrio nem se deve colocar os estilos dentro de uma tag <STYLE>.

67

Classes de estilo
Com o que foi visto at o momento, ao definir o estilo de uma tag, sempre
que ela for utilizada no documento ter o aspecto determinado por este estilo.
Muitas vezes porm desejvel que uma tag tenha vrios aspectos de acordo
com o local onde utilizada. possvel, portanto, criar diferentes estilos para
uma tag criando vrias classes. Para criar uma classe basta acrescentar ao
nome da tag no seletor o caracter ponto (.) seguido de um nome para a
classe. No exemplo a seguir mostra uma definio aplicada a todos os
cabealhos do <H1> (tipo e tamanho de fonte) e as definies de cor aplicveis
apenas aos cabealhos <H1> pertencentes as classes vermelho (cor de texto
vermelha) e verde (cor de texto verde):
<style>
h1 {
font-family: arial;
font-size: 20pt;
}
h1.vermelho {
color: red;
}
h1.verde {
color: green;
}
</style>
Para aplicar o estilo definido numa classe a uma tag basta utilizar o
atributo class, definindo como valor o nome da classe desejado. No exemplo a
seguir o primeiro cabealho estar sujeito a definio de tamanho e tipo de
fonte e ser escrito na cor padro; o segundo e o quarto cabealho tambm
estaro sujeitos a definio de tamanho e tipo de fonte mas sero escritos na
cor vermelha; o terceiro, por sua vez, estar sujeito a definio de tamanho e
tipo de fonte mas ser escrito na cor verde:
<h1>Cabealho normal</h1>
<h1 class=vermelho>Cabealho Vermelho</h1>
<h1 class=verde>Cabealho Verde</h1>
<h1 class=vermelho>Outro Cabealho Vermelho</h1>

68

Classes genricas
As classes definidas no exemplo da seo anterior s podem ser
aplicadas a tags do tipo <H1> pois esta tag foi includa no seletor. possvel
criar classes aplicveis a qualquer tipo de tag, bastando para isso omitir o
nome da tag como mostrado no exemplo a seguir:
<STYLE>
.verde {
color: green;
}
</STYLE>
A utilizao de uma classe genrica tambm feita por intermdio do
atributo CLASS como mostra o exemplo a seguir:
<h1 class=verde>Este um cabealho verde</h1>
<p class=verde>Este um texto verde
Pseudo-classes
A tag <A> tem algumas classes com nomes pr-definidos, que so
associadas a estados assumidos por esta tag. Estes estados so:
Pseudo-classe

Descrio

browser

link

Link que ainda no foi visitado.

active

Link no momento que o usurio tem o boto do ambos

mouse pressionado.

visited

Link que j foi visitado.

hover

Link no momento em que o usurio passa o Explorer

cursor do mouse sobre ele.

ambos

ambos

No caso da pseudo-classe, diferente de uma classe comum, o nome da

classe separado do nome da tag no seletor pelo caracter :. No existem
pseudo-classes genricas e, portanto, sempre necessrio indicar o nome da
tag. O exemplo a seguir define a cor azul para os links no visitados, a cor
vermelha e negrito para os links no momento em que o boto do mouse est
pressionado sobre o link, a cor verde para os links que j foram visitados e a
69

cor vermelho escura para quando o cursor do mouse passar sobre o link (isto
s funcionar para o explorer, sendo ignorado se o navegador for netscape):
<STYLE>
A:link
A:active
A:visited
A:hover
</STYLE>

{
{
{
{

color:
color:
color:
color:

blue; }
red; font-weight: bold; }
green; }
darkred; }

Identificadores
Da mesma forma que uma classe modifica as definies feitas para uma
tag, possvel redefinir, em um determinado elemento do documento, as
definies de uma classe. Isso feito atravs da criao de um identificador no
interior da tag <STYLE>. O seletor de um identificador um nome qualquer
antecedido do caracter #. Ao definir um atributo ID com o nome de um
identificador numa tag qualquer, esta tag tem seu aspecto modificado conforme
o estilo definido no identificador. Se nesta tag tambm estiver definido o
atributo classe, as propriedades definidas no identificador tem prioridade sobre
as definidas na classe. Muito embora os navegadores normalmente no
imponham restries, um identificador deve ser utilizado em apenas uma tag,
criando uma instncia particular desta tag. No exemplo a seguir, os trs
cabealhos sero desenhados com o fonte arial e o tamanho grande, porm o
primeiro ser desenhado em verde (definio da classe), o segundo em azul e
o terceiro em amarelo (definies dos identificadores):
<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>

70

Estilos inline
Uma outra forma de redefinir o estilo de uma tag atravs do atributo
STYLE. Este atributo pode ser colocado em qualquer tag e tem precedncia
sobre os estilos definidos atravs dos atributos ID e CLASS. O valor do atributo
STYLE uma string contendo propriedades e valores separados por vrgulas,
da mesma forma que utilizada associado a um seletor na tag <STYLE>. No
exemplo a seguir, o segundo cabealho herda da classe o tipo do fonte, do
identificador o tamanho e assume a cor definida no atributo STYLE:
<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, verde e com fonte times</h1>
Tags div e span
Algumas vezes pode se interessante modificar a forma de apresentao
de um trecho do texto que no est associado a nenhuma tag em especial.
Nestes casos a linguagem HTML fornece duas tags que no tem nenhum
comportamento padro especial e cujo aspecto pode ser determinado por meio
de estilos: a tag <DIV> ... </DIV> e a tag <SPAN> ... </SPAN>.
A nica diferena entre estas duas tags que a tag <DIV> causa
necessariamente uma mudana de linha antes e depois de sua utilizao, ao
passo que a tag <SPAN> pode ser utilizada no meio de um pargrafo sem
causar nenhuma quebra de linha. A tag <DIV> pode ser utilizada para definir o
estilo de vrios pargrafos sem que seja necessrio definir um a um o estilo
das tag <P> destes pargrafos.
71

No exemplo a seguir a tag <DIV> define um pargrafo de cor vermelha,

no meio do qual foi includa uma palavra na cor verde:
<div style=color: red;>Este um pargrafo vermelho com
um texto <span style=color: green;>verde</span> no
meio</div>
Estas duas tags tem uma grande importncia em HTML 4 pois servem
para definir camadas.

72

Apndice A - Caracteres Especiais

Car. Nmero
&#00~&#08
&#09
&#10
&#11 -&#31
&#32
&#33
&#34
# &#35
$ &#36
% &#37
& &#38
&#39
&#40
&#41
&#42
+ &#43
&#44
&#45
&#46
&#47
0-9 &#48 - &#57
&#58
&#59
< &#60
&#61
> &#62
?
&#63
@ &#64
A-Z &#65 - &#90
&#91
&#92
&#93
&#94
&#95
&#96
a-z &#97 - &#112
&#123
1
&#124
&#125
~ &#126
&#127 - &#159
&#160

&#161

&#162

&#163

&#164

&#165
|
&#166

Cdigo

&quot;

&amp;

&lt;
&gt;

&nbsp;
&iexcl;
&cent;
&pound;
&curren;
&yen;
&brvbar;

Significado
No utilizado
Tabulao horizontal
Nova linha
No utilizado
Espao em branco
Ponto de exclamao
Aspas
Sinal numrico
Cifro
Sinal de porcentagem
E comercial
Apstrofo
Parntese esquerdo
Parntese direito
Asterisco
Sinal de mais
Vrgula
Hfen
Ponto final
Barra normal
Dgitos de 0 a 9
Dois pontos
Ponto e vrgula
Smbolo menor do que
Sinal de igual
Smbolo maior do que
Ponto de interrogao
Arroba
Letras de A at Z
Colchete esquerdo
Barra invertida
Colchete direito
Acento circunflexo
Sublinhado
Acento grave
Letras de a at z
Chave esquerda
Barra vertical
Chave direita
Til
No utilizado
Espao sem quebra
Ponto de exclamao invertido
Sinal de centavo
Libra esterlina
Smbolo monetrio geral
Iene
Barra vertical quebrada

73

Car. Nmero

Cdigo

Significado

&sect;
&umI;
&copy;
&ordf;
&laquo;
&not;
&shy;
&reg;
&macr;
&deg;
&plusmn;
&sup2;
&sup3;
&acute;
&micro;
&para;
&middot;
&cedil;
&supl;
&ordm;
&raquo;
&frac14;
&frac12;
&frac34;
&iquest;
&Agrave;
&Aacute;
&Acirc;
&Atilde;
&Aring;
&Aumi;
&Aelig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&lgrave;
&Iacute;
&lcirc;
&luml;
&ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Oumi;

Pargrafo (legal)
Trema
Copyright
Ordinal feminino
Aspas angulares de abertura
Sinal de no
Hfen longo
Marca registrada
Macron
Grau
Mais ou menos
Ao quadrado
Ao cubo
Acento agudo
Mcron
Sinal de pargrafo
Ponto no meio
Cedilha
Elevado a um
Ordinal masculino
Aspas angulares de fechamento
Frao de um/quarto
Frao de meio
Frao de trs/quartos
Interrogao invertida
A maisculo com crase
A maisculo com acento agudo
A maisculo com acento circunflexo
A maisculo com til
A maisculo com trema
A maisculo com anel
Ligatura AE maiscula
C cedilha maisculo
E maisculo com crase
E maisculo agudo
E maisculo com circunflexo
E maisculo com trema
I maisculo com crase
I maisculo com acento agudo
I maisculo com acento circunflexo
I maisculo com trema
Eth maisculo islands
N maisculo com til
0 maisculo com crase
0 maisculo com acento agudo
0 maisculo com acento circunflexo
0 maisculo com til
0 maisculo com trema
Sinal de multiplicao

&#167
&#168
&#169
&#170
&#171
&#172
&#173
&#174
&#175
&#176
&#177
&#178
&#179
&#180
&#181
&#182
&#183
&#184
&#185
&#186
&#187
&#188
&#189
&#190
&#191
&#192
&#193
&#194
&#195
&#196
&#197
&#198
&#199
&#200
&#201
&#202
&#203
&#204
&#205
&#206
&#207
&#208
&#209
&#210
&#211
&#212
&#213
&#214
&#215

74

Car. Nmero

Cdigo

Significado

&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;
&agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&acute;
&icirc;
&iuml;
&eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;

0 maisculo com uma barra

U maisculo com crase
U maisculo com acento agudo
U maisculo com acento circunflexo
U maisculo com trema
Y maisculo com acento agudo
Thom maisculo islands
Ligatura sz
a minsculo com crase
a minsculo com acento agudo
a minsculo com acento circunflexo
a minsculo com til
a minsculo com trema
a minsculo com anel
ligatura ae minscula
c cedilha minsculo
e minsculo com crase
e minsculo agudo
e minsculo com acento circunflexo
e minsculo com trema
i minsculo com crase
i minsculo com acento agudo
i minsculo com acento circunflexo
i minsculo com trema
eth minsculo isiands
n minsculo com til
o minsculo com crase
o minsculo com acento agudo
o minsculo com acento circunflexo
o minsculo com til
o minsculo com trema
Sinal de diviso
o minsculo com barra
u minsculo com crase
u minsculo com acento agudo
u minsculo com acento circunflexo
u minsculo com trema
y minsculo com acento agudo
thorn minsculo islands
y minsculo com trema

&#216
&#217
&#218
&#219
&#220
&#221
&#222
&#223
&#224
&#225
&#226
&#227
&#228
&#229
&#230
&#231
&#232
&#233
&#234
&#235
&#236
&#237
&#238
&#239
&#240
&#241
&#242
&#243
&#244
&#245
&#246
&#247
&#248
&#249
&#250
&#251
&#252
&#253
&#254
&#255

&oslash;
&ugrave;
&uacute;
&ucirc;
&uumi;
&yacute;
&thom;
&yuml;

75

Apndice B Manipulao de imagens

Como capturar uma imagem
Atravs do Lview possvel capturar a imagem de uma janela ou de todo
o contedo da tela:
1. Selecionar Edit > Capture > Window
2. Quando o Lview desaparecer clicar o mouse sobre a janela a capturar.
Alm de Window h duas outras opes: Desktop (permite capturar toda a
rea do vdeo) e Client Area (permite capturar apenas a rea til de uma janela
sem a barra da ttulos).

76

Recorte de uma imagem

Ao se capturar uma janela, em muitos casos o que se deseja apenas
uma parte dela. necessrio ento selecionar a parte da imagem que
interessa e descartar o resto.
1. Pressionar o boto esquerdo do mouse no canto superior esquerdo da
rea de interesse
2. Com o boto pressionado, arrastar o mouse at o canto inferior direito
da rea de interesse e soltar o boto. Aparecer um quadrado vermelho
mostrando a rea selecionada.
3. Selecionar Edit > Crop! e a figura ficar reduzida a rea marcada.

77

Figura com fundo transparente

No Lview:
1. Abrir o arquivo: File > Open.
2. Selecionar Retouch > Color Depth.
3. Na janela que abrir selecionar Palette image e Custom number of colors. Se
no souber o nmero de cores deixe 256 mesmo.
4. Selecionar Retouch > Background Color.
5. Ser aberta uma janela que permite escolher qual cor ficar transparente na
imagem.
6. Ao selecionar o boto Dropper, possvel selecionar a cor transparente
clicando sobre um ponto da imagem.
7. Aps fazer a seleo, preciso salvar o arquivo no formato GIF: File >
SaveAs. Na janela de seleo do nome de arquivo, mudar o campo Salvar
com o tipo para Gif89a (.gif).

78

Figuras transparentes bem acabadas

comum encontrar pginas na Internet onde as figuras de fundo
transparente apresentam linhas foscas residuais, normalmente brancas ou
pretas, destoando da prpria figura e do fundo da pgina. Estas linhas
aparecem porque na criao da figura foi utilizado o recurso de suavizao de
serrilhado.
A suavizao de serrilhado existe para criar uma rea de transio entre a
borda da figura e o fundo, disfarando o fato das imagens na tela do
computador serem formadas por pequenos pontos quadrados. Linhas
inclinadas, sem a suavizao de serrilhado, ficam com o aspecto de escada.
A figura a seguir mostra um mesmo desenho de mquina fotogrfica em
contraste com trs diferentes cor de fundo. Nos dois fundos de cor escura a
figura apresenta bordas residuais que esto disfaradas no fundo claro. Isso
ocorre pois a figura original tinha fundo de cor branca, que foi escolhida como
cor de fundo e portanto no sendo desenhada.
Por causa da suavizao de serrilhado, h uma zona de transio entre o
fundo branco e a cor preta da borda da mquina formada por pontos de cor
intermediria entre o branco e o preto. Como no Lview s possvel definir
uma cor como transparente, estes pontos da zona de transio continuam
visveis, contrastando com um fundo escuro.

79

O Photoshop oferece uma possvel soluo para este problema ao

permitir definir vrias cores como transparentes. Basta definir cada uma das
cores que destoa da borda da figura como transparente.
Para se criar uma GIF transparente no Photoshop os seguintes passos
devem ser seguidos:
1. Se estiver disponvel selecionar: Camada > Achatar imagem
2. Se j no estiver selecionado: Imagem > Modo > Cores indexadas
3. Selecionar: Arquivo > Exportar > Exportao para Gif89a, o que causa a
abertura da janela de seleo da cor de fundo.

Escolher vrias cores de fundo s resolve o problema satisfatoriamente se

nenhuma destas cores for utilizadas no interior da figura, o que faria com que
parte do interior tambm ficasse transparente (este risco tambm ocorre
quando escolhemos apenas uma cor como se pode notar pelo detalhe da
objetiva na figura da mquina fotogrfica).

80

Uma outra opo para resolver o problema das linhas residuais , antes
de salvar a figura como GIF, pintar a rea que vai ficar transparente com a cor
de fundo da pgina onde se ir colocar a figura. Isto feito no Photoshop da
seguinte maneira:
1. Se a janela de ferramentas no estiver visvel selecionar: Janela > Mostrar
ferramentas
2. Selecionar na janela de ferramentas o balde de tinta.
3. Definir a cor do primeiro plano na janela de ferramentas
4. Se a janela de opes no estiver visvel selecionar: Janela > Mostrar
opes.
5. Selecionar suavizao de serrilhado.
6. Modificar a tolerncia de forma a desaparecer com a linha residual sem
estragar a figura (tentativa e erro).
7. Clicar com o mouse sobre a rea a pintar.

O resultado pode ser conferido acima. Note que com fundo branco a
figura ficou serrilhada e com uma leve borda azul.

81

Criao de um ladrilho

Utilizando os comandos de edio do Photoshop possvel criar um

ladrilho a partir de uma figura qualquer. O exemplo abaixo mostra como isso
pode ser feito. Obviamente os passos podem variar conforme a figura inicial:
1. Abrir logoHF.jpg: Arquivo > Abrir (fig. 1).
2. Selecionar um quadrado em volta do leo utilizam a seleo
retangular da janela de ferramentas.
3. Selecionar > inverter
4. Apagar com a tecla del.
5. Selecionar > desfazer
6. Usar a borracha (janela de ferramentas) para apagar o
escudo em volta do leo.
7. Selecionar a rea de interesse da figura com a seleo
retangular e eliminar o resto utilizando: Imagem > corte
demarcado (fig. 2).
8. Tirar as cores: Imagem > ajustar > Remover saturao (fig. 3).
9. Modificar brilho e contraste at a figura ficar branca e preta:
Imagem > Ajustar > Brilho/Contraste (fig. 4).
10. Inverter as cores da imagem: Imagem > Ajustar > Inverter.
11. Diminuir o contraste: Imagem > Ajustar > Brilho/Contraste
(fig. 5).
12. Definir cor do primeiro plano: p. ex. 40, 100, 200.
13. Pintar a imagem selecionando: Editar > Preencher.
14. Na janela que se abrir mudar o modo para diviso (fig. 6).
15. Reduzir a imagem: Imagem > tamanho da imagem
16. Selecionar > Tudo
17. Editar > Copiar
18. Selecionar: Arquivo > Novo e definir tamanho como 200 x
200.
19. Preencher a cor de fundo.
20. Colar as figurinhas a gosto.

82

Criao de um boto
No Photoshop possvel criar botes para incluir numa pgina. A seguir
so descritos os passos para a criao de um boto:
1. Criar um arquivo novo de tamanho 80 x 40
2. Selecionar: Camada > Nova > Camada.
3. Usar a seleo para definir o rea do boto.
4. Definir a cor do boto (p. ex. 255, 200, 10).
5. Pintar a rea selecionada.
6. Selecionar: Camada > Efeitos > Chanfro & entalhe.
7. Na janela aberta definir (experimente valores a gosto):
a) Modo: Diviso; Modo: 85%; cor: 255,230,140
b) Modo: Multiplicao; Modo: 85%; cor: 175,124,7
c) Estilo: Chanfro interno
d) ngulo:140
e) Profundidade: 15; abaixo
f) Desfoque: 5
8. Selecionar > Desfazer seleo.
9. Selecionar ferramenta de texto na janela de ferramentas.
10. Escrever o texto ajustando a cor e o tamanho do fonte forma a caber no
boto e a ficar visvel.
11. Mover o texto de forma a ficar centralizado no boto.
12. Salvar como GIF transparente.

83

Ncleo de Computao Eletrnica

Universidade Federal do Rio de Janeiro

Cx. Postal: 2324 - CEP: 20001-970 - Rio de Janeiro - RJ

Tel.: PABX (021) 598-3212/598-3130 - FAX: (021) 270-8554