Todas as Aulas_de_Construção_de_página_web

Prévia do material em texto

1 
Aula 1: Introdução - a WEB e os 
Documentos HTML 
 
 
Antes da WWW atingir um grande público era privilégio de 
poucos, mas agora com uma Home Page de conteúdo 
interessante no ar pode-se ser achado e visitado por pessoas 
de todos os lugares do mundo, o tempo todo. Empresas e 
profissionais já notaram as grandes portas que se abrem com 
essa enorme possibilidade de divulgação. Mas para isso ser 
possível alguém tem que fazer a elaboração do site; é isso 
que você vai aprender nesse nosso curso. Não é o máximo? 
Você deixará de ser apenas mais um visitante para ser um 
criador de sites! 
 
 
Objetivos: 
Nesta primeira aula você: 
- aprenderá os conceitos básicos da WEB, 
- verá como é a estrutura de um documento HTML, 
desenvolvendo nosso primeiro exemplo, 
- conhecerá os comandos básicos de formatação. 
Você já terminará sua primeira aula aprendendo inclusive 
como acentuar palavras em HTML! 
 
 
Pré-requisitos: 
Não há pré-requisitos para essa nossa primeira aula, embora 
seja sempre desejável que você conheça a Internet ou tenha 
"navegado" por ela alguma vez! 
 
1. A World Wide Web - WWW 
A idéia inicial da Internet surgiu, em 1969, como uma rede 
descentralizada para interligar instalações militares 
(ARPANET). Durante a década de 70 várias outras redes 
foram sendo interligadas à ARPANET e, em 1980, ela passou 
a se chamar Internet. No início da década de 80 são criadas 
redes de interconexão de instituições científicas (BITNET, 
CSNET, NSFNET). O ano de 1983 é um marco para a 
Internet, pois nele os militares abandonam o controle da 
ARPANET. 
A World Wide Web (WWW), ou simplesmente Web, foi 
desenvolvida no final da década de 80 como uma forma de 
facilitar aos pesquisados o acesso a documentos científicos. 
Através da Web é possível, partindo de um determinado 
ponto, pesquisar outros documentos a ele relacionados, 
Referências módulo 1 
(até a aula 9): 
Severo, C. Internet: 
como criar home 
pages. Rio de Janeiro: 
Editora Campus, 1996. 
Lemay, L. Aprenda em 
uma semana HTML 4. 
Rio de Janeiro: Editora 
Campus, 1998. 
Alcântara, A. et al. 
Home pages: recursos 
e técnicas para criação 
de páginas WWW. Rio 
de Janeiro: Editora 
Campus, 2000. 
Campbell B. & Darnell 
R. Aprenda em uma 
semana Dynamic 
HTML. Rio de Janeiro: 
Editora Campus, 1998. 
ICMC-USP.Instituto de 
Ciências Matemáticas e 
de Computação. USP. 
Disponível em: 
http://www.icmsc.sc.us
p.br/manuals/HTML 
Home Pages 
Documento projetado 
para ser a página 
principal de um Site. 
Funciona como a porta 
de entrada e deve conter 
um ou mais links para as 
demais páginas do Site 
ou para outros Sites 
relacionados. 
 
Chama-se rede de 
computadores (Net) a 
utilização de diversos 
computadores que, de 
maneira interligada, 
trocam serviços ou 
informações. Se essa 
conexão se restringir a 
uma pequena região (um 
escritório por exemplo) 
é chamada intranet. 
Internet representa esta 
conexão em nível 
global. Mas esse é o 
assunto de outra 
disciplina, que tratará de 
redes de computadores. 
 
2 
independente de sua localização física (que o usuário não tem 
a mínima necessidade de conhecer). 
Com a Web, ganhou força a utilização, em larga escala, da 
técnica de hipertextos. Um hipertexto é um documento onde 
é possível incluir referências (em inglês, Links) a outros 
documentos. A seleção de uma destas referências, leva o 
usuário ao documento referenciado. 
Inicialmente, a informação disponível na Web era encontrada 
principalmente sob a forma de textos e hipertextos. Aos 
poucos foram sendo incorporados elementos gráficos e 
animações aos documentos. Tais recursos ajudaram muito a 
popularizar a Web, aproximando-a mais do cidadão comum. 
A popularização da Web criou uma série de novas aplicações, 
fazendo com que ela seja utilizada hoje para: divulgação 
científica, trabalho cooperativo, divulgação de informações 
culturais e livros eletrônicos, promoção de produtos e 
serviços, realização de comércio eletrônico e suporte técnico 
e vários outros usos que vão sendo inventados a cada 
instante. 
 
2. Conceitos Básicos da Web 
Uma característica importante da Web (ou Internet) é que a 
informação é disponibilizada de forma independente do tipo 
de computador que será utilizado para a sua visualização. 
Para isso é necessário que os documentos sejam escritos 
utilizando um formato padronizado. Esta padronização é 
obtida através de uma linguagem chamada HTML: 
HyperText Markup Language. O padrão HTML é definido 
pelo World Wide Web Consortium-W3C, que é uma das 
entidades que controla a Internet. O padrão atual é 
representado pelo HTML 4. 
O código HTML contém instruções de visualização de texto e 
informação para localização de outros documentos (links). 
Para poder visualizar corretamente o documento, o usuário 
necessita de um programa (navegador) capaz de interpretar 
esta linguagem, reconstituindo a informação segundo as 
instruções contidas no código. 
Para obter algum documento na Web, o usuário deve fornecer 
ao navegador um conjunto de informações sobre este 
documento: 
a) seu protocolo de comunicação, 
b) o endereço, na Internet, da máquina na qual se encontra o 
documento, 
c) o diretório onde o documento está arquivado na máquina e 
A história aqui no 
Brasil: 
A Internet surgiu no 
Brasil em 1991, num 
primeiro momento 
interligando 
instituições acadêmicas 
por meio da Rede 
Nacional de Pesquisa. 
A partir de 1995, 
começa a utilização 
comercial e a 
popularização da rede. 
 
Com o surgimento dos 
provedores de acesso, a 
Internet chega ao 
cidadão comum. A 
exposição e divulgação 
da rede através dos 
meios de comunicação 
de massa dão um 
grande impulso ao seu 
crescimento. 
Os principais serviços 
da Internet são descritos 
pelos diversos 
protocolos de 
comunicação que ela 
disponibiliza. Alguns 
deles são: 
• Correio Eletrônico - 
e-mail 
• Conexões Remotas 
-telnet 
• Transferência de 
Arquivos - ftp 
• Transferência de 
hipertextos - HTTP 
 
3 
d) o nome do documento. 
Estes dados devem ser informados ao navegador segundo um 
formato padronizado que chamamos de URL. 
A máquina que contém o documento a ser exibido deve estar 
executando um programa que se encarrega de receber o 
pedido do documento, localizá-lo no disco e enviá-lo para a 
máquina que o pediu. Este programa é chamado de Servidor 
de Web e o navegador que pede o documento é chamado de 
Cliente. 
Agora que você já viu como o documento chega até o 
usuário, após sua solicitação, veja alguns conceitos básicos 
envolvidos neste processo. 
2.1. Navegadores (Browsers) 
Para navegar pela Web é necessário um programa que 
chamamos de navegador (em inglês, Browser). Ele é 
responsável por: solicitar documentos na Internet e interpretá-
los, exibindo-os para o usuário. Exemplos de navegadores: 
Netscape, Internet Explorer, Mosaic, Lynx. 
 
 
2.2. Servidores (Web Servers) 
Para navegar pela Web também é necessário outro tipo de 
programa, chamado servidor. Os programas deste tipo foram 
especialmente elaborados para administrar o acesso às 
páginas HTML. Eles são executados nas máquinas onde estão 
guardados os documentos HTML. Estes programas são os 
responsáveis pelo envio dos documentos para as máquinas 
que os solicitam. Exemplos servidores: NCSA, CERN, 
Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite 
(em ambiente windows). 
 
 
2.3. HTML (Hypertext Markup Language) 
É a linguagem padrão usada para a escrita de páginas da 
Web. 
O HTML é uma linguagem de marcação, ou seja, seus 
comandos (chamados Tags) servem para informar aos 
programas de navegação os elementos que serão exibidos na 
página: cabeçalhos, textos em itálico, links, imagens etc. O 
navegador Web interpreta estes comandos e exibe a página 
para o usuário. 
Editores de HTML 
Atualmente, existe uma 
grande quantidade de 
ferramentas, para 
auxiliar o 
desenvolvimento de 
páginas de Web. 
 
 
Há vários níveis de 
ferramentas desde 
aquelas destinadas a 
converter documentos 
de um determinado 
formato para HTML, 
passandopor editores 
visuais simples, até 
ferramentas complexas 
de gerenciamento de 
sites. 
 
 
Exemplos destas 
ferramen-tas são: 
• 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 porém 
não eliminam a 
necessidade de conhecer 
a linguagem HTML. 
Mesmo as ferramentas 
mais complexas mantêm 
a facilidade de visualizar 
e editar diretamente o 
código HTML, o qual é 
muitas vezes a forma 
mais fácil de se obter o 
efeito desejado na 
página. 
 
4 
Um texto HTML não define a forma exata como o 
documento vai ser exibido. Isto depende do programa de 
navegação usado e das definições feitas pelo usuário. 
 
 
2.4. URL (Uniform Resource Locator) 
 
A URL é a convenção utilizada para indicar ao navegador a 
forma de localizar um endereço na rede. Por exemplo: 
http://www.receita.fazenda. 
gov.br/IR2002/devolucao.htm 
 
Uma URL obedece ao seguinte formato: 
protocolo://servidor/caminho/arquivo 
 
Onde: 
protocolo – Indica a forma como vai ser realizada a 
comunicação entre o servidor e o cliente e também o tipo de 
serviço que será prestado. No caso de HTML o protocolo é o 
http (HyperText Transfer Protocol). 
servidor – Endereço do servidor (ou maquina) na Internet. 
Pode ser dado na forma nome_da_máquina.domínio (como 
no exemplo acima) ou através do endereço IP da máquina 
(como em 146.164.2.68). 
caminho – Localização do arquivo no disco do servidor 
através de um diretório ou de uma lista de diretórios. (por 
exemplo: http://www.ic.uff.br/~aconci/curso 
/formatos.html, onde ~aconci e curso são 
diretórios ou "pastas"). 
arquivo – Nome do arquivo desejado. Esta informação 
pode ser omitida. Neste caso, o servidor assume um nome 
padrão, que pode variar de instalação para instalação, mas 
normalmente é home.html ou index.html. 
Você vai agora conhecer como se constitui um documento 
HTML, sua estrutura e seus comandos básicos de formatação. 
 
3. Características Gerais de HTML 
Um documento escrito em HTML é um arquivo ASCII 
comum, contendo apenas os caracteres ASCII visíveis. 
O navegador ignora qualquer caracter especial, inclusive 
aqueles que sugerem algum tipo de formatação ao texto 
(como TAB, CR, LF). Qualquer tipo de formatação deve 
ser informada através dos comandos conhecidos como tags. 
ASCII é abreviatura de 
American Standard 
Code for Information 
Interchange, e 
identifica uma 
convenção amplamente 
usada em computação 
para codificar 
caracteres (letras, 
números e símbolos 
gráficos). 
 
5 
As tags, ou marcas, se diferenciam do texto comum por 
estarem contidas entre o caracter "<" e o caracter ">". 
Algumas tags contêm atributos que permitem configurar 
algumas características. E alguns atributos podem ter 
valores específicos. Estes atributos são colocados entre os 
delimitadores (< e >), após o nome da tag. Os valores vêm 
depois de um sinal de "=" colocado junto aos atributos. A 
sintaxe genérica de uma tag é : 
<nome atributo1=valor atributo2= valor 
....> 
 
Como por exemplo: 
<A HREF="http://faperj.br"> 
<HR SIZE=8 WIDTH=80%> 
 
Há dois tipos de tags: container tags (ou emparelhada) e 
empty tags. 
 
Vejamos em que são diferentes. 
 
 
3.1. Container Tags 
 
Servem para definir um efeito sobre um trecho do 
documento. Estas tags vêm sempre aos pares: uma tag indica 
o início (tag de abertura) do trecho e uma outra tag 
derivada indica o fim (tag de fechamento). 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 utilizamos o par de tags <B> e </B>. 
 
O seguinte trecho HTML: 
 
Uma palavra em <B>negrito</B> 
 fica realcada 
 
Seria exibido da seguinte forma: 
 
Uma palavra em negrito fica realcada. 
 
 
As container tags podem ser colocadas umas dentro das 
outras. O texto contido na tag mais interior sofre o efeito 
cumulativo de todas as outras tags "mais externas". 
 
Por exemplo o seguinte trecho HTML: 
 
Palavras em <i>italico e <B>negrito</B> 
ficam realcadas </i> diferentemente 
Nos exemplos ao lado, 
A e HR são os nomes de 
duas tags. HREF, 
SIZE e WIDTH são 
os seus atributos. Os 
valores podem variar 
muito dependendo do 
significado do 
atributo! 
O que são tags 
derivadas? 
Uma tag derivada é 
igual à tag original 
exceto por conter o 
caracter barra: / . 
Veja o exemplo da 
tag que define o 
negrito! 
Ao construir uma 
página WWW, 
você precisa 
escolher uma 
estratégia de 
denominador 
comum para 
oferecer suporte à 
maioria dos 
navegadores, a 
menos que você 
objetive atender 
apenas a um grupo 
específico de 
usuários como nas 
situações de 
Intranet (ou redes 
locais). 
 
6 
 
Seria exibido da seguinte forma: 
Palavra em italico e negrito ficam realcadas diferentemente. 
 
 
3.2. Empty Tags 
São tags que produzem efeitos locais, normalmente 
introduzindo algum elemento no texto, e, portanto, não 
precisam de uma tag finalizadora. Um exemplo é a tag 
<BR> que insere no texto uma mudança de linha. 
 
Por exemplo, o seguinte trecho HTML: 
 
Um espaco em branco 
ou muitos na separacao de palavras tem o 
mesmo efeito.<br> Assim como uma linha em 
branco ou muitas.<br> Deve-se usar a tag 
adequada para mudar de linha. 
 
Seria exibido da seguinte forma: 
 
Um espaco em branco ou muitos na separacao de palavras tem o mesmo 
efeito. 
Assim como uma linha em branco ou muitas. 
Deve-se usar a tag adequada para mudar de linha. 
 
3.3. Estrutura de um Documento HTML 
Todo documento HTML tem a seguinte estrutura: 
 
<HTML> 
 
 < HEAD> 
 <TITLE> 
 Titulo da Pagina 
 </TITLE> 
 </HEAD> 
 
 <BODY> 
No corpo do documento descreve-
se tudo o que aparece dentro da 
pagina do navegador. 
 </BODY> 
 
</HTML> 
 
 
A linguagem HTML 
não faz a 
diferenciação entre 
letras maiúsculas e 
letras minúsculas. 
Assim escrever 
<BR> ou <br> tem 
o mesmo 
significado. 
No exemplo ao lado 
usamos a forma de 
escrever "mais 
internamente" as 
tags que são 
interiores a outras 
tags, para facilitar a 
identificação 
visual de onde as 
diversas partes do 
documento se 
iniciam e finalizam. 
 
Esta forma de 
escrever, muito 
usada em 
linguagem de 
programação, é 
chamada de 
endentação. 
 
Usar escrita 
endentada também 
pode ser útil para 
visualizar o efeito 
cumulativo que 
pode ocorrer com 
as tags containers, 
comentadas na 
página anterior. 
 
 
7 
A tag HTML indica a área onde deve estar contido o 
documento HTML. Isto não quer dizer que o Browser não 
exiba um texto colocado fora desta tag, mas essa não é uma 
boa prática. Porque dependendo do navegador que o usuário 
estiver usando algumas conseqüências não previsíveis podem 
ocorrer. Se você colocar o texto fora desta área, no mínimo 
você perde o controle sobre como o texto será visto pelo 
usuário. 
 
A tag HEAD é o cabeçalho do documento. Nesta área são 
colocadas tags com informações relativas ao documento. A 
mais importante destas informações está contida na tag 
TITLE que deve sempre ser incluída em todas as páginas. O 
texto do TITLE é utilizado pelo navegador para nomear os 
links adicionados ao arquivo de "favoritos" (bookmarks) do 
usuário. Normalmente, o texto que aparece no interior da tag 
TITLE é visualizado na barra de títulos da janela do browser. 
 
A tag BODY contém o documento propriamente dito. Nesta 
área, deve ser colocado tudo que representa a página a ser 
visualizada. Constitui a maior parte do documento HTML e 
inclui geralmente muitas outras tags no seu interior. 
 
No final desta aula, o "exemplo atividade" descreve em 
detalhes estas partes; que tal ir lá dar uma olhada? 
 
 
3.4. Comentários 
Como em outras linguagens de programação, é possível 
inserir parte de texto que o usuário não tem acesso. Essas 
partes são chamadas comentários. 
Num texto HTML, todo texto incluído entre <!-- e --> éignorado pelo Browser, ou seja é interpretado como um 
comentário do programador. 
 
3.5. Comandos Básicos de Formatação 
A linguagem HTML possui duas classes de elementos 
utilizados para modificar o estilo de apresentação de partes 
do texto: tags físicas e tags lógicas. 
 
As tags físicas indicam, explicitamente, a forma como o 
autor deseja ver exibido o seu texto. Elas são mostradas na 
tabela 1.1. 
Como projetar 
bons documentos ? 
 
Os passos a seguir 
dão algumas dicas 
dos aspectos que 
devem ser avaliados 
quando você for 
criar uma página na 
Web: 
 
• avaliação do 
público alvo; 
 
• definição do 
conteúdo; 
 
• organização da 
estru-tura da página; 
 
• redação do 
conteúdo; 
 
• programação 
visual e 
implementação da 
página. 
O principal 
diferencial é que as 
tags de formatação 
lógicas se 
preocupam em 
definir uma idéia e 
não em precisar 
exatamente como 
essa idéia 
aparecerá. 
 
Por exemplo, se 
você usar para 
ressaltar um texto, a 
tag <EM> fará com 
que ele seja exibido 
em itálico no 
Explorer e no 
Netscape, mas 
outro navegador 
poderá apresentá-lo 
em negrito, ou 
em um parágrafo à 
parte entre "aspas", 
etc. 
 
8 
Tabela 1.1 -Tags físicas 
Elemento Descrição Efeito 
<B>…</B> Negrito texto normal 
<i>…</i> Itálico texto normal 
<U>…</U> Sublinhado texto normal 
<TT>…</TT> Letras igualmente 
espaçadas 
texto normal 
<SUB> … </SUB> Subescrito texto normal 
<SUP> … </SUP> Sobrescrito texto normal 
<STRIKE> ... 
</STRIKE> 
Riscado texto normal 
<BIG> ... 
</BIG> 
Fonte grande texto normal 
<SMALL>...</SM
ALL> 
Fonte pequena texto normal 
 
As fontes (ou tipos de letras usadas para os textos), podem 
ser de dois tipos: proporcionais ou mono-espaçadas. As 
primeiras determinam um espaço para cada letra 
proporcional à sua largura. Nelas por exemplo, um ponto, 
'.', ocupa menos espaço que a letra 'i', e esta ocupa menos 
espaço que a letra 'm'. 
 
Já as fontes mono-espaçadas determinam o mesmo espaço 
para qualquer que seja o símbolo gráfico a ser escrito, como 
nas máquinas de escrever antigas. Fontes mono-espaçadas 
possibilitam que um texto seja exibido respeitando a 
endentação. Para ter um texto escrito deta forma em HTML 
você deve escrevê-lo entre as tags <TT> e </TT>. 
 
 
As tags lógicas expressam uma idéia que deve ser passada ao 
usuário e a forma como o texto será exibido depende do 
navegador. Algumas delas são descritas na tabela 1.2. 
 
Tabela 1.2 - Tags lógicas 
Elemento Descrição Explorer e 
Netscape 
<STRONG>... 
</STRONG> 
Texto forte Negrito 
<EM>...</EM> Texto enfatizado Itálico 
<CITE>...</CITE> Citação Itálico 
<CODE> ... 
</CODE> 
Código de 
programa 
Mono-espaçado
<ADRESS>... 
</ADDRESS> 
Endereço Itálico 
 
Como você pode ver, os dois navegadores principais 
(atualmente no mercado), as exibem da mesma maneira. Mas 
NOTA: 
 
O pouco rigor de 
alguns navegadores 
permite que algumas 
container tags 
HTML sejam 
representadas como 
empty tags. 
 
Uma destas é <P>. 
Pode acontecer do seu 
texto ser bem 
interpretado sem ser 
necessário colocar a 
tag de fim de 
parágrafo (</P>). 
No entanto, o World 
Wide Web 
Consortium-W3C 
recomenda que ela 
seja uma container 
tag. 
 
9 
isso é apenas por acaso. Nada garante que esta forma de 
exibição continue nas próximas versões destes navegadores 
ou que os outros façam o mesmo. 
 
 
 
4. Formatadores 
 
Como foi dito anteriormente, o navegador ignora qualquer 
caracter especial de formatação, como os caracteres de 
margem e mudança de linha existentes no arquivo HTML. 
Quando é necessária uma formatação num documento, deve-
se incluir uma das tags da tabela abaixo. 
 
Tabela 1.3 - Tags de formatação 
Elemento Descrição Atributos 
<BLOCKQUOTE> Aumentar a margem Nenhum 
<BR> Quebra de linha Nenhum 
<PRE> Parágrafos pré-
formatados Nenhum 
<P> Início de parágrafo ALIGN 
<HR> Linha horizontal SIZE, WIDTH, 
ALIGN e NOSHADE
 
O controle sobre o alinhamento da página pode ser 
conseguido através da margem. O par de tags 
<BLOCKQUOTE>...</BLOCKQUOTE> serve para 
aumentar a margem. Essa tag pode ser acumulada para 
conseguir margens maiores, como por exemplo: 
<BLOCKQUOTE> 
texto com mais margem 
<BLOCKQUOTE> 
texto com mais margem ainda... 
</BLOCKQUOTE> 
</BLOCKQUOTE> 
 
4.1. Tag <PRE> : texto pré-formatado 
Muitas vezes, é interessante fazer com que o navegador 
reproduza exatamente a formatação do texto escrito no 
arquivo HTML, sem ignorar espaços, mudanças de linha, 
tabulações e utilizando uma fonte mono-espaçada para exibir 
o texto. Um exemplo típico disso é quando se deseja incluir 
uma listagem de um programa de computador em uma página 
HTML. Um trecho do código de um programa é melhor 
descrito se endentado como já fizemos em alguns exemplos 
desta aula. 
Os atributos 
devem ser 
colocados dentro 
das tags de 
abertura e podem 
ter valores ou 
não. Os valores 
possíveis de cada 
atributo também 
variam com o 
significado 
destes atributos, 
como pode ser 
visto na tabela ao 
lado. 
 
10 
Para incluir um texto pré-formatado com fonte mono-
espaçada utiliza-se a tag <PRE> … </PRE>. Esta tag, 
porém, não impede o navegador de interpretar outras tags que 
estejam em seu interior, permitindo realizar mudanças de 
fonte, estilo e cor do texto. 
 
4.2. Alinhamento de Texto 
Os textos contidos nos arquivos HTML são exibidos, salvo 
indicação em contrário, alinhados à esquerda da janela. Para 
ter o texto alinhado de forma diferente é necessário modificar 
o atributo ALIGN existente em algumas tags (como 
cabeçalhos <P> e <HR>). 
 
O atributo ALIGN pode assumir os seguintes valores: RIGHT 
(direita), 
CENTER (centro) ou 
LEFT (esquerda). 
 
Exemplo: <P align=right> 
 
O alinhamento centralizado também pode ser obtido através 
da tag <CENTER> ... </CENTER>. 
 
Exemplo: <center>texto centralizado 
</center> 
 
A tag <DIV> ... </DIV> permite definir o alinhamento 
default para tudo que ela contiver. 
 
Exemplo: <DIV align=left> 
texto alinhado à esquerda 
</DIV> 
 
4.3. Atributos de Linha Horizontal <HR> 
O atributo SIZE é utilizado para definir a espessura da linha 
em número de pontos (pixels). 
O atributo WIDTH serve para definir a largura da linha. Esta 
largura pode ser especificada pelo número de pontos ou pelo 
percentual da janela que será ocupado pela linha. 
O atributo NOSHADE (no shade, isto é, sem sombra) não tem 
valor. A sua simples inclusão faz com que a linha não seja 
desenhada com efeito sombreado. 
O atributo ALIGN já foi descrito anteriormente na seção 
Alinhamento de Texto. Esse atributo aparece em diversas 
tags de HTML, com o mesmo conjunto de valores possíveis. 
 
11 
O exemplo abaixo, inclui uma linha de 2 pontos de espessura, 
ocupando 50% da janela e sem sombreado: 
<HR SIZE=2 WIDTH=50% NOSHADE> 
5. Cabeçalhos 
Ao se redigir um documento é conveniente organizá-lo de 
forma clara atribuindo títulos e subtítulos às suas diversas 
partes. 
A linguagem HTML oferece um conjunto de 6 cabeçalhos 
pré-definidos que podem ser incluídos no documento através 
da tag <Hn> ... </Hn>, onde n pode ser um número de 1 
a 6. 
Os cabeçalhos aceitam o atributo ALIGN já descrito (o valor 
padrão, se não houver qualquer definição de alinhamento, é 
centralizado). Os textos nos cabeçalhos são escritos em 
negrito e seus tamanhos variam do maior H1 até o menor H6. 
<H1>Titulo Principal</H1> 
<H2 align=left>Titulo</H2> 
<H3 align=right>Subtitulo</H3> 
<H6>Todo este texto vai ser escrito em 
negrito e centralizado como se fosse um 
titulo</H6> 
 
 
6. Acentuação em HTML 
Não existe uma padronização universal para definir os 
códigos associados aos caracteres acentuados. Quando 
produzimos uma página no ambiente Windows, utilizando 
diretamente os caracteres do Windows, esta página será 
visualizada sem problemas em grande parte das máquinas 
que utilizam este mesmo sistema (se o sistema estiver 
configurado para utilizar a norma ISO Latin 1), mas isso não 
será verdade para qualquer ambiente. 
Como conseqüência é possível que um texto,cheio de 
caracteres acentuados e visualizados de forma perfeita na tela 
de quem o produziu, apareça cheio de caracteres estranhos na 
tela de alguém que esteja trabalhando em um ambiente 
diferente. Para garantir a portabilidade dos documentos nas 
mais diferentes plataformas, o HTML prevê uma série de 
códigos que devem ser utilizados no lugar de caracteres 
acentuados e outros caracteres especiais. A tabela 1.4 resume 
estes caracteres. 
 
 
Portabilidade é a 
qualidade de um 
componente de 
hardware ou software 
que o torna capaz de 
ser utilizado em 
diferentes tipos de 
computadores. 
Algumas vezes a 
portabilidade ocorre 
mediante pequenas 
alterações, mas quanto 
menores 
essas alterações mais 
portável ou maior será 
o grau de 
portabilidade do 
componente. 
Houaiss, A. 
Dicionário da língua 
portuguesa, Rio de 
Janeiro, Editora 
Objetiva, 2001. 
 
 
12 
Tabela 1.4 - Caracteres especiais e para acentuação 
Codificação em HTML 
á &aacute; é &eacute; Ç &ccedil; & &amp; 
ã &atilde; ê &ecirc; Ç &Ccedil; “ &quot; 
â &acirc; ó &oacute; < &lt; ® &reg; 
à &agrave; ü &uuml; > &gt; © &copy; 
 
A melhor maneira de aprender é fazendo! Por isso estamos 
propondo um exemplo atividade que além de resumir o que 
vimos nesta aula, servirá para você exercitar o conteúdo. 
 
 
Exemplo Atividade: 
 
<HTML> 
 <HEAD> 
<TITLE>Curso de 
Constru&ccedil;&atilde;o de 
P&aacute;ginas WEB</TITLE> 
 </HEAD> 
 <BODY> 
<H1 align=center > 
Primeiro Exemplo</H1> 
Primeiro leia este exemplo procurando 
identificar cada um dos elementos 
comentados na aula. 
Segundo, identifique quais as "Tags" 
que são "containers" e seus inicios e 
fins. 
Terceiro, vamos usar este exemplo 
para testar cada das formas de 
formatacao aprendidas. Assim copie 
este exemplo e salve-o em um editor 
de texto. Logo que ele seja salvo com 
a terminacao .htm, voce pode 
visualiza-lo em um navegador. Abra o 
arquivo escolhendo Arquivo/Abrir (ou 
File/Open)no menu Arquivo (ou File) 
do navegador. Depois de visualiza-lo 
como esta escreva cada frase de forma 
diferente no navegador, usando para 
isso cada uma das 9 formas diferentes 
de Tags Fisicas descritas: negrito, 
italico, sublinhado,etc. 
Quarto, vamos fazer todos os demais 
exercicios que seguem!!! 
 </BODY> 
</HTML> 
Nota: 
 
O exemplo 
atividade está 
propositadament
e alguns 
acentos. Você 
entenderá o 
porquê quando 
finalizar os 
exercícios desta 
aula!!! 
 
Mas ainda há 
muito mais 
coisas nele! 
Entenda ainda 
mais na próxima 
aula!!! 
 
 
13 
 
Exercícios: 
 
1. Utilize, no exemplo atividade, os separadores de quebra de 
linha <BR> e parágrafo <P>, separando adequadamente o 
texto. Além disso, desenhe linhas horizontais ocupando 25% 
da janela, separando os parágrafos que iniciam com as 
palavras: Segundo, Terceiro e Quarto dos parágrafos 
anteriores. Visualize o novo aspecto que o exemplo terá 
agora! 
 
2. Atribua subtítulos aos parágrafos que você separou no 
exercício anterior, utilizando <H3> </H3>. Compare como 
fica a página se você agora usar <H5> </H5>. 
 
3. Ao final do arquivo inclua (usando as opções Copiar e 
Colar, que geralmente estão nos menus Editar dos programas 
de edição de texto) como "texto formatado", um arquivo de 
texto qualquer que você já tenha armazenado antes (você 
deve usar que tag para isso?). Veja o resultado e responda: as 
tags <PRE> </PRE>, realmente funcionaram? 
 
4. Mude o alinhamento de cada parágrafo e cabeçalho do 
texto (o subtítulo que você escreveu no exercício 2). Faça o 
primeiro estar à direita, o segundo centrado, o terceiro à 
esquerda e no quarto use a tag <DIV></DIV>. Depois 
responda: o que ocorreu no último caso? 
 
5. Você já deve ter notado que o texto está sem acentos! 
Você sabe como melhorar isso, não? Então, mãos à obra! 
 
 
Resumo: 
Nesta aula, você aprendeu: a estrutura básica da linguagem 
HTML, a formatar um documento, a incluir títulos, subtítulos 
e, a acentuar o texto corretamente, independentemente do 
navegador que esteja usando. Fez sua primeira "obra" em 
HTML e testou seus novos conhecimentos nos exercícios. 
 
 
Auto-avaliação: 
Se você concluiu com sucesso os exercícios, podemos dizer 
que você fixou todos os detalhes desta aula e está pronto para 
tornar qualquer texto um hipertexto. Este é o assunto da 
próxima aula: Listas e Links. 
Depois de 
responder cada 
exercício, 
salve-o em um 
editor de texto. 
Logo que ele 
seja salvo com 
a terminação 
.htm, é 
importante que 
você visualize-
o em um 
navegador. 
 
 
1 
 
 
 
 Aula 2: Listas e Links 
 
Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a 
entender o que são listas de definições e como fazer referências a outros 
documentos. Vamos entender a diferença entre caminhos relativos e absolutos. 
Aprenderemos a utilizar âncoras e a tornar possível o envio de mensagens pela 
página que construiremos via e-mail. Além disso, veremos como fazer 
referências a documentos não HTML (como imagens, som, vídeo). Ou seja, 
juntos faremos nossa página ter toda a versatilidade de um hipertexto!!! 
 
 
Objetivos: 
- Aprender a utilizar listas numeradas. 
- Compreender listas de definição. 
- Aprender a referenciar outros documentos. 
- Diferenciar caminhos relativos de absolutos. 
- Aprender a utilizar âncoras. 
- Possibilitar o envio de mensagens via e-mail pela página HTML. 
- Referenciar documentos de outros tipos. 
 
 
Pré-requisito: 
Você entendeu bem a aula anterior? Fez com facilidade os exercícios? Se 
respondeu afirmativamente estas perguntas está pronto para esta aula! Se não, 
tire suas dúvidas e releia a aula anterior! 
 
 
 
1. Listas e Enumerações 
Uma forma muito comum de organizar a informação é através de listas. A 
linguagem HTML oferece 3 formas diferentes de criar uma lista: 
• listas não numeradas, 
• listas numeradas, e 
• listas de definição (tipo verbete de dicionário). 
Vamos ver o que cada uma delas representa. 
 
 
 
1.1. Listas Não Numeradas 
 
As listas não numeradas são formadas por itens precedidos de um símbolo 
gráfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista, 
sendo que cada item é indicado pela tag <LI>. 
 
Tanto a tag <UL> como a tag <LI> têm o atributo TYPE. Este atributo indica 
qual símbolo é colocado antes de cada item: disc (um círculo cheio, é o 
default), circle (um círculo vazado) e square (um quadrado cheio). 
 
Por exemplo, o código HTML: 
<LI> também 
pode ser interpretado 
por alguns 
navegadores 
corretamente se não 
for escrita como do 
tipo empty, mas a 
W3C recomenda que 
seja usada como 
container tag. 
 
 
Default é um termo 
muito usado em 
computação para 
indicar o valor que é 
assumido na falta de 
qualquer 
especificação. 
 
2 
 
 
 
<UL> 
<LI>Correio Eletronico</LI> 
<LI>Telnet</LI> 
<LI>FTP</LI> 
</UL> 
 
Produz uma saída parecida com: 
• Correio Eletronico 
• Telnet 
• FTP 
 
 
1.2. Listas Numeradas 
 
As listas numeradas são formadas por itens precedidos de um número 
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 <OL> como a tag <LI> têm o atributo TYPE, que no caso deste 
tipo de lista, indica qual a forma de numeração será usada em cada item. As 
formas possíveis são: 
• 1 (números arábicos, é o default), 
• A (letras maiúsculas), 
• a (letras minúsculas), 
• I (números romanos com letras maiúsculas) e 
• i (números romanos com letras minúsculas). 
 
A tag <OL> tem também o atributo START, que indica qual será o primeiro 
número da lista. 
 
A numeração também pode ser modificada através do valor do atributo VALUE 
da tag <LI>. 
 
Por exemplo, o código HTML: 
<OL TYPE=A> 
<LI> Correio Eletronico</LI> 
<LI VALUE=4> Telnet</LI> 
<LI> FTP</LI> 
</OL> 
 
Produz uma saída parecida com: 
A. Correio Eletronico 
D. Telnet 
E. FTP 
 
Enquanto que: 
<OL TYPE=1 START=5> 
<LI> Correio Eletronico</LI> 
<LI VALUE=1> Telnet</LI> 
<LI> FTP</LI> 
</OL> 
Telnet é o serviço 
de conexõesremotas 
da WEB. 
Esse sistema permite 
que sua máquina 
possa ser um 
terminal de outra 
máquina na 
Internet. Para isso o 
usuário deve ter uma 
conta (login) na 
máquina remota. A 
utilidade principal 
do Telnet é 
possibilitar a 
execução de 
programas na 
máquina remota. 
 
FTP é o protocolo 
usado na Internet 
para transferência de 
arquivos entre 
computadores. 
O FTP é um dos 
recursos mais 
importantes da 
Internet, sendo 
responsável por um 
grande volume de 
tráfego de dados. 
Para você se 
conectar a uma 
máquina remota 
através do FTP é 
necessário que a sua 
máquina e a remota 
estejam executando 
um programa 
servidor de FTP. 
 
 
3 
 
resultaria: 
5.Correio Eletronico 
1.Telnet 
2.FTP 
 
1.3. Listas de Definições 
As listas de definição (ou do tipo verbete de dicionário) consistem de uma lista 
de termos, seguido de um parágrafo deslocado, contendo sua descrição. 
 
Em HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de 
definições. Cada termo a ser definido é indicado pela tag <DT> ... </DT> 
e a sua definição é indicada pala tag <DD>...</DD>. 
 
Uma possível aplicação para as listas de definição é criar listas endentadas que 
não são precedidas pelos símbolos gráficos padrão ou por numeração. O autor 
da página pode criar os símbolos que deseja colocar no início de cada item, 
utilizando a tag que inclui imagens no documento. Você verá como incluir 
imagens mais adiante em nosso curso. 
 
Por exemplo, o código HTML: 
<DL> 
<DT>Telnet</DT> 
<DD>&&EEaaccuuttee;; oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett 
ppaarraa ccrriiaarr uummaa ccoonneexx&&aattiillddee;;oo ccoomm uummaa 
mm&&aaaaccuuttee;;qquuiinnaa rreemmoottaa..</DD> 
<DT>FTP</DT> 
<DD>OO ""FFiillee TTrraannssffeerr PPrroottooccooll"" &&eeaaccuuttee;; oo 
pprriinncciippaall mm&&eeaaccuuttee;;ttooddoo ddee ssee ttrraannssffeerriirr aarrqquuiivvooss 
ppeellaa IInntteerrnneett.. </DD> 
</DL> 
 
Produz uma saída parecida com: 
Telnet 
ÉÉ oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett ppaarraa ccrriiaarr 
uummaa ccoonneexxããoo ccoomm uummaa mmááqquuiinnaa rreemmoottaa.. 
FTP 
O "File Transfer Protocol" é o principal método 
de se transferir arquivos pela Internet. 
 
 
A tabela 2.1 resume as tags relativas a listas. 
<DT> e <DD> 
também podem 
ser corretamente 
interpretadas 
como empty tag 
nas versões 
menos rigorosas 
(isto é, que não 
seguem 
precisamente 
todas as 
recomendações 
da W3C) de 
alguns 
navegadores 
HTML. 
 
 
 
4 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Note que: 
Os caminhos de 
diretórios seguem a 
convenção do 
sistema operacional 
Unix utilizando o 
caracter / em vez de 
usar o caracter \. 
 
 
 
 
Tabela 2.1 - Resumo das Tags de Listas 
Elemento Descrição Atributos 
<UL> ... </UL> Lista não ordenada TYPE 
<LI> ... </LI> Item de lista não 
ordenada 
TYPE 
<OL> ... </OL> Lista ordenada TYPE, 
START 
<LI> ... </LI> Item de lista ordenada TYPE, VALUE 
<DL> ... </DL> Lista de definições nenhum 
<DT> Termo a ser definido nenhum 
<DD> Definição do Termo nenhum 
 
 
2. Interligando Documentos 
Uma das principais características do hipertexto é a possibilidade de incluir 
referências no documento. As referências são denominadas Links e quando 
selecionadas levam à exibição do documento referenciado. 
 
As referências ou Links podem ser feitas a: 
• documentos na mesma máquina, 
• documentos em uma máquina completamente diferente (que pode estar até 
do outro lado do mundo),e 
• um outro ponto do próprio documento. 
 
Ao se fazer uma referência a um outro documento é necessário indicar a sua 
URL. Caso o documento referenciado esteja na mesma máquina é possível (e 
recomendável) utilizar uma URL relativa (utilizando o caminho de diretórios 
para chegar ao novo documento a partir do atual), ao invés da URL absoluta 
(ou seja o endereço completo na Internet do novo documento). 
 
Por exemplo, se na página: 
equipe.nce.ufrj.br/joao/Programa.htm 
houver uma referência a um arquivo que se encontra no endereço: 
 
equipe.nce.ufrj.br/Exemplos/arq.htm 
 
não é necessário escrever a URL completa. Basta escrever o caminho relativo 
até ela: 
 
../Exemplos/arq.html 
 
Pois "../ " significa: "a partir do diretório atual" (que no caso é joao), 
vá ao diretório anterior (no caso equipe.nce.ufrj.br) e de lá para um 
sub-diretório filho chamado Exemplos, onde há o arquivo arq.html. 
 
5 
 
Márcia e 
Glaucia: este 
Outro é mesmo 
maiusculo? 
 
 
Voces falaram 
que deveria ser 
minuscula, mas 
eu acho que não. 
 
Continuo com a 
dúvida acima, 
o outro tem a 
mesma função do 
"Próprio " no 
próximo título, 
e ai em 2.2 voces 
mandaram por 
maiuscula! 
Ele tambem não 
é apenas uma 
"ligação " entre 
as palavras..... 
 
2.1. Referência a Outro Documento 
A forma de inserir referência em arquivo HTML é através da tag <A> ... 
</A> e de seus atributos. 
 
O atributo HREF serve para definir a URL que será aberta se o usuário 
selecionar, com o mouse, o texto contido entre o <A> e o </A>. Os 
navegadores costumam exibir este texto utilizando caracteres sublinhados e o 
cursor do mouse é modificado ao passar por cima dele. 
 
No exemplo a seguir, a seleção do texto “Pagina do NCE” faz com que o 
navegador abra a página “http://www.nce.ufrj.br”: 
 
<A HREF="http://www.nce.ufrj.br"> 
Pagina do NCE 
</A> 
 
É importante lembrar que, apesar da HTML não diferenciar maiúsculas de 
minúsculas, o mesmo não é válido para as URLs. É necessário indicar 
corretamente quais letras estão em minúsculas e quais estão em maiúsculas 
para que o arquivo possa ser encontrado. 
 
O arquivo destino não precisa necessariamente ser um documento HTML, 
pode ser um arquivo de qualquer tipo: imagens, música, arquivos comprimidos 
etc. Caso o navegador não saiba como exibir este arquivo, ele permite ao 
usuário receber o mesmo e salvá-lo em um diretório de sua escolha. 
 
2.2. Referências a Pontos no Próprio Documento 
Como foi dito anteriormente, em um arquivo HTML é possível fazer uma 
referência a uma outra parte do mesmo arquivo. Neste caso, é necessário 
indicar ao navegador o ponto exato que será referenciado. Isto é feito 
colocando-se uma “âncora” no ponto desejado através da tag <A> ... 
</A> com a definição do atributo NAME. 
 
O código HTML do exemplo abaixo associa o nome “inicio” a um 
determinado ponto do documento. 
<A NAME="inicio"></A> 
 
Uma âncora colocada no meio do texto não tem efeito algum no aspecto da 
página que será visualizada. 
 
O código HTML abaixo permite incluir uma referência no ponto do documento 
marcado pela âncora acima: 
 
<A HREF="#inicio"> 
Início da Página 
</A> 
 
6 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Correio eletrônico 
ou e-mail é o serviço 
que permite a 
qualquer usuário da 
Internet enviar e 
receber mensagens. 
O endereço 
eletrônico de um 
usuário contém todas 
as informações 
necessárias para que 
a mensagem chegue 
ao seu destino. Ele é 
composto de uma 
parte que identifica o 
destinatário 
(username) e uma 
parte relacionada à 
sua localização, no 
formato: 
 
username@subdomí
nios. domínio 
 
Por exemplo: 
 
biba@ic.uff.br 
As âncoras têm duas utilidades básicas: 
• permitir a criação de índices no início da página, e 
• permitir ao usuário voltar imediatamente ao início da página. 
 
Através da seleção do tópico de interesse no índice, o usuário é diretamente 
remetido a este tópico, sem precisar avançar página a página à procura do item 
desejado. 
 
Na URL é possível fazer referência a uma âncora de uma página. No exemplo 
abaixo, o link encontrará a âncora "bibliografia" na página em 
referência: 
 
<A HREF= 
"http://www.ic.uff.br/~aconci/II.htm#bibliografia"> 
Bibliografia 
</A> 
 
3. Enviando Mensagens de Correio Eletrônico 
Além de criar links para a exibição de arquivos, a tag <A>...</A> permite que 
o usuário execute outros serviços da Web como: telnet, ftp, mail e news. 
 
No exemplo a seguir, quando o link for acionado, o navegador abriráo 
programa de correio eletrônico, permitindo que o usuário envie uma 
mensagem para o endereço especificado (no caso: maria@ig.com.br). 
<A HREF="mailto:maria@ig.com.br"> 
Mande um mail!</A> 
 
 
Exercícios: 
 
1. Substitua no exemplo atividade utilizado na aula passada, os textos 
Primeiro, Segundo, Terceiro e Quarto no início dos parágrafos 
por uma lista numerada. 
 
2. Faça com que cada uma das frases do parágrafo que antes iniciava com a 
palavra Terceiro transforme-se em um item de uma lista não numerada 
iniciada por ■ (quadrado). 
Depois mostre como você faria para cada item corresponder a um símbolo 
diferente (● ◦ ■)? 
 
3. Examine as linhas que seguem: 
<HTML> 
 <HEAD> 
 <TITLE> Construção de Páginas Web </TITLE> 
 </HEAD> 
 
7 
 <BODY> 
 <CENTER> 
 <P><A NAME="inicio"></A> 
 <B>Construção de Páginas de Web</B> 
 </P> 
 </CENTER> 
 <P>O que já aprendemos:</P> 
 <P>Aula 1: Introdução</P> 
 <ul> 
<li>Conceitos básicos: URL, Navegadores e 
Servidores</li> 
<li>Estrutura de um documento HTML</li> 
<li>Comandos básicos de formatação.</li> 
 </ul> 
 <P>Aula 2. Listas e Links</P> 
 <ul> 
<li>Listas numeradas, não numeradas e de 
definições</li> 
<li>Caminhos relativos e absolutos</li> 
<li>Referências a outras páginas</li> 
<li>Âncoras</li> 
<li>Enviando mensagens</li> 
<li>Referencias a outros documentos (<A HREF= 
"http://www.ic.uff.br/~aconci/curso/imagem~1.htm"> 
imagens</A>, som, vídeo)</li> 
 </ul> 
 <HR WIDTH="100%"> 
<p><a href="mailto:aconci@ic.uff.br"> enviar 
messagem</a></P> 
 <P><A HREF="#inicio">voltar inicio</A></P> 
<p><A HREF="http://www.faperj.br">conhecer mais 
sobre a FAPERJ</A></P> 
 </BODY> 
</HTML> 
 
Agora, faça com que cada item das aulas seja referenciado da seguinte forma: 
procure na Internet sites relacionados a estes itens, e crie os links para a partir 
deles visualizar os sites encontrados. 
 
 
Resumo: 
 
Nesta aula, você aprendeu a incluir listas e links em uma página e a 
transformar um texto em um hipertexto. Mas ainda há muitos recursos para sua 
página! Imagens estão esperando por você na próxima aula. 
 
 
Auto-avaliação: 
Você concluiu com facilidade os exercícios? Então podemos dizer que você 
entendeu bem os detalhes desta aula e está pronto para nossa próxima aula. 
Mas se algo não ficou bem fixado, a melhor coisa a fazer é rever esse ponto e 
não acumular dúvidas! 
Lembrete: as 
tags tanto 
podem ser 
escritas em 
maiúsculas 
como em 
minúsculas, 
mas nos links 
esta diferença 
é importante 
..
1 
1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Os arquivos de 
imagem possíveis de 
serem incluídos em 
HTML são dos tipos 
GIF ou JPEG. Você 
pode ler mais sobre 
esses formatos em: 
http:// 
ic.uff.br/ 
~aconci/ 
curso/ 
jpggif.htm 
(tudo em 
minúsculas, com o 
"til" ao lado do "ä" 
mesmo e sem 
espaços). 
 
 
 
 
 
 
 
 
Embora não seja 
muito conveniente, 
nada impede que a 
imagem esteja em 
outra máquina! Isto 
é, a URL indicada 
pode ser um 
endereço qualquer 
na Internet! 
 
Aula 3: Imagens 
 
A WWW é sem sombra de dúvidas o lugar mais visitado da atualidade, onde os 
internautas passam a maior parte do tempo e onde proliferam as cenas mais 
quentes! 
Nesta aula você verá como se inclui imagens em um documento HTML. Com 
essa possibilidade você tornará suas páginas muito mais cheias de vida! 
 
 
Objetivos: 
- Aprender a incluir imagens nas páginas. 
- Definir como as imagens aparecerão na página. 
- Escolher o tipo de arquivo de imagens a ser usado. 
- Fazer partes de imagens serem links. 
 
 
Pré-requisitos: 
Para essa nossa terceira aula, você deve ter entendido os conceitos de HTML 
das aulas anteriores. Em caso de dúvidas, volte e releia a aula 1 e pelo menos a 
segunda parte da aula 2: links . 
 
 
1. Imagens 
Vamos mostrar-lhe, agora, como trabalhar com imagens em documentos 
HTML. Neste sentido vamos estudar uma das tags mais importantes: <IMG>. 
 
Na tag <IMG> o atributo SRC deve sempre estar presente para indicar, através 
de sua URL, que arquivo contém a imagem. Exemplificando, as linhas: 
 
<p>Aula 3. Imagem, cores 
<IMG SRC=nota.gif> 
e movimento. 
</p> 
 
fazem com que a imagem nota.gif seja exibida na página, junto com o 
texto, após a palavra “Imagem, cores” e antes de “e movimento”. 
 
Os navegadores usam algum símbolo padrão no caso de não poderem 
"localizar" a imagem. O Netscape, por exemplo, mostraria: 
 
no caso de não localizar o arquivo de imagens especificado no atributo SRC. 
..
2 
2 
 
 
 
 
 
 
Os valores de 
alinhamento da 
imagem em relação 
ao texto 
apresentados na 
tabela 3.1, irão 
aparecer também em 
outras tags. Os 
nomes TOP, 
MIDDLE e 
BOTTOM se referem 
ao alinhamento na 
direção vertical, 
enquanto que LEFT 
e RIGHT indicam 
alinhamentos na 
direção horizontal. 
 
 
 
Denomina-se pixels 
a cada um dos 
pontos do vídeo que 
podem ser acessos, 
ou a cada um dos 
pontos de uma 
imagem que podem 
ter sua cor 
determinada. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
(*) Alguns 
Navegadores 
aceitam também as 
formas: 
BASELINE, 
ABSMIDDLE, 
ABSBOTTOM e 
TEXTTOP 
 
 
1.1. Atributos de <IMG> 
Os atributos possíveis da tag <IMG> e alguns dos seus valores possíveis estão 
resumidos na tabela abaixo: 
 
Tabela 3.1 - Atributos da tag <IMG> e seus valores 
Atributos Descrição ou valores possíveis: 
ALT texto alternativo mostrado no lugar da imagem 
ALIGN (vertical) TOP, MIDDLE, BOTTOM, 
(horizontal) LEFT, CENTER, RIGHT 
BORDER largura da borda quando usada como link 
WIDTH largura em pixels 
HEIGHT altura em pixels 
VSPACE espaço vertical ao redor da imagem em pixels 
HSPACE espaço horizontal (pixels) ao redor da imagem 
SRC URL do arquivo de imagem que será visualizado 
 
 
O atributo ALT serve para associar uma descrição à imagem. Essa descrição é 
mostrada pelo navegador em duas ocasiões: quando o usuário deixa o cursor do 
mouse sobre a imagem ou enquanto a página está sendo carregada (mas a 
imagem ainda não começou a aparecer). Neste segundo caso, o usuário pode 
decidir se deseja ou não carregar a imagem. Além disso, caso ela não tenha 
sido carregada, por algum motivo, o usuário tem como saber que naquele ponto 
da página havia uma imagem e o que ela retratava. 
 
O atributo ALIGN define o alinhamento do texto próximo à imagem. Este 
alinhamento pode ter o sentido de como a imagem se encontrará 
horizontalmente na página HTML, ou pode ter o sentido de como uma linha do 
texto próximo à imagem ficará posicionada verticalmente em relação à 
imagem. 
 
A imagem pode ficar à esquerda ou à direita da página, considerando a direção 
horizontal. Isso será definindo fornecendo ao atributo ALIGN os valores 
LEFT ou RIGHT. 
 
Se este atributo receber os valores LEFT ou RIGHT, a imagem é posicionada 
num canto da janela (esquerdo ou direito respectivamente) e o texto seguinte à 
tag é exibido ao lado da imagem. As várias linhas do texto vão sendo 
posicionadas pela lateral da imagem, envolvendo-a como na figura 3.1, até que 
a lateral esteja toda tomada. A figura 3.1 ilustra o caso de ser usado o valor 
LEFT. Se for necessário interromper o fluxo do texto, pode-se usar a tag <BR> 
com o atributo CLEAR=ALL. 
 
No caso do alinhamento definido como TOP, BOTTOM, CENTER ou 
MIDDLE o texto que completar a linha é alinhado respectivamente pelo topo, 
base e meio da imagem, mas apenas uma linha é colocada ao lado da imagem 
(*). As linhas seguintes do texto são posicionadas abaixo da imagem. O efeito 
do valor center e middle é idêntico e produz o resultado mostrado na 
figura 3.2, que segue. 
..
3 
3 
 
 
 
 
 
Imagens para Web 
A rede está cheia de 
figuras que podem 
ser aproveitadas na 
confecção de uma 
página. Antes porém 
de utilizar uma 
imagem retirada da 
Web, convém 
verificar se quem a 
publicou permite a 
sua livre utilização 
ou não. 
Há dezenas de site 
que oferecem 
imagens de domínio 
público, por 
exemplo: 
http://www.sct.gu. 
edu.au/~anthony/ 
icons/index.html 
http://www. 
iconbazaar.com 
http://www.gifworks
.com 
http://www. 
aaaclipart.com 
http://daniweb.com/graphics 
http://www.clipart. 
com 
(tudo em minúsculas 
e sem espaços). 
Figura 3.1 - Efeito causado por ALIGH=LEFT 
 
Figura 3.2 - Efeito causado por ALIGH=CENTER 
 
Pode ser interessante permitir ao usuário selecionar um link através de uma 
imagem. Para que isso seja possível, basta colocar a tag <IMG> dentro da tag 
<A> ... </A>, como é mostrado no exemplo a seguir: 
<A HREF=“link.htm”><IMG SRC=nota.gif></A> 
 
Neste caso, uma borda (como a das duas figuras anteriores) aparece em torno 
da imagem. A borda da imagem indica que ela é um link, assim como o 
sublinhado indica um link textual (como comentado na aula 2). Este efeito é 
muitas vezes indesejável e aí o atributo BORDER da tag <IMG>, entra em ação! 
Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente 
BORDER. Mas o atributo também pode ser usado para definir bordas com 
quaisquer número de pixels. O valor default da borda é 1 e ela muda de cor 
para assumir a cor do link. 
 
Os atributos WIDTH e HEIGHT indicam a largura e a altura da imagem para o 
navegador. A presença destes atributos permite ao navegador posicionar os 
demais elementos da página mesmo antes de carregar a imagem. Se os valores 
não corresponderem aos valores reais da imagem, esta é redimensionada para 
se adaptar ao espaço definido para ela pelos valores dos atributos. 
 
Os atributos HSPACE e VSPACE servem para definir (em pixels) o 
espaçamento horizontal e vertical do texto em relação à imagem, evitando que 
o ele fique muito próximo à sua borda. Cada um desses atributos adiciona 
espaço nas duas faces da imagem (acima e abaixo ou à direita e à esquerda). 
Não há como definir espaços só à direita ou só acima da imagem. 
..
4 
4 
As imagens 
entrelaçadas são 
carregadas em 
quatro passos de 
preenchimento 
sucessivo pelo 
navegador. A 
primeira passada 
preenche a primeira 
linha e as linhas 
múltiplas de 8 (se 
imaginarmos que a 
primeira linha da 
imagem tenha 
número 0, a segunda 
1, a terceira 3 e 
assim por diante, 
seriam primeiro 
preenchidas as linhas 
0, 8, 16, 24, 32 ...). 
A segunda passada 
preenche linhas de 8 
em 8 a começar pela 
quinta (linhas de 
número 4,12, 20, 
28...). A terceira 
passada desenha as 
linhas de 4 em 4 a 
começar da terceira 
(linhas de número 2, 
6, 10, 14, 18, 22...). 
A última passada 
escreve as linhas 
restantes (de 2 em 2 
começando da 
segunda: 1, 3, 5, 7, 
9...). Mas após o 
primeiro passo já é 
possível ter uma 
idéia de toda a figura 
(embora de 8 em 8 
linhas). Muitas vezes 
esta primeira 
visualização já 
permite ao usuário 
decidir se deseja 
continuar a carregar 
a figura ou não, 
poupando tempo de 
transmissão. Os 
passos seguintes vão 
acrescentando linhas 
progressivamente na 
imagem até ela estar 
completamente 
definida. 
 
 
2. Quando usar imagens GIF ou JPEG 
GIF é abreviação de “Graphics Interchange Format” e foi desenvolvido pela 
CompuServe. Neste formato, as imagens são comprimidas através da 
codificação LZW (Lempel-Ziv and Welsh que é um processo de compressão 
sem perdas) e armazenadas em arquivos de extensão .gif , permitindo que tenha 
um carregamento progressivo ao ser visualizada. 
 
O formato GIF usa tabela de até 256 cores e pode apresentar imagens 
entrelaçadas, permitindo que tenha um carregamento progressivo ao ser 
visualizada. Existem duas versões do formato: GIF87 e GIF89a. Nesta última 
versão é possível gravar imagens onde uma cor é definida como transparente. 
 
Há vários programas freewares (obtidos de graça na internet) que permitem a 
criação de imagens no formato GIFs transparentes e com animação. Tente 
achá-los em um site de buscas e você terá ótimas surpresas!!!! 
 
JPEG é um padrão internacional, proposto pelo comitê ISO “Joint 
Photographers Expert Group”. As imagens são codificadas por transformações 
matemáticas, o que permite a remoção de um certo nível de informações 
gráficas sem grande perda de qualidade. Este formato permite vários níveis de 
compressão, possibilitando escolher a melhor relação entre o tamanho do 
arquivo e a qualidade da imagem. 
 
Arquivos de imagens que seguem o padrão JPEG têm extensão .jpeg ou .jpg. 
Este formato não usa tabela de cores, sendo o ideal para imagens fotográficas 
nas quais a utilização de um byte por cor (técnica chamada de "true-color") 
pode ser importante para a qualidade da imagem. Mas, por ser um formato com 
perdas, pode não dar bons resultados em imagens compostas por desenhos 
geométricos, textos ou linhas. 
 
A decisão a respeito de qual formato utilizar depende basicamente do tipo da 
imagem e da qualidade desejada. De maneira geral, JPEG é mais adequado a 
imagens de cenas reais digitalizadas ou imagens com grandes variações de 
tonalidade, onde a grande variação de cor é mais importante que a perda de 
algum detalhe na imagem. 
 
O formato GIF é melhor para imagens que não podem ter perdas de detalhes, 
para desenhos e gráficos com áreas de cores constantes. Para este tipo de 
imagem, o GIF realiza uma compressão muito maior e de qualidade melhor do 
que o JPEG, já que este sempre apresenta alguma perda de qualidade. 
 
3. Mapas Clicáveis 
Até agora você viu como é possível ativar um link através da seleção de uma 
imagem. Em muitas situações, porém, pode ser interessante associar vários 
links a uma única imagem. Desta forma, dependendo da região da imagem que 
for selecionada, o navegador exibirá um documento diferente. 
..
5 
5 
Imagens que se 
misturam com o 
fundo da página, que 
dão a impressão de 
não terem a forma 
retangular dos 
arquivos de imagens 
comuns são 
conseguidas graças a 
este efeito de 
transparência, que 
é possível através da 
utilização do 
formato GIF89a. 
 
Você já deve ter 
reparado que 
algumas páginas na 
WWW possuem 
imagens que não são 
só figuras 
decorativas e 
funcionam como 
uma plataforma para 
ligação a diversos 
links de hypertexto. 
São as imagens 
sensíveis ou os 
mapas clicáveis. O 
exemplo típico de 
utilização de um 
mapa clicável é 
quando temos uma 
barra de navegação. 
Outro exemplo seria 
a figura de um mapa 
de um país onde a 
seleção de um estado 
específico leva a 
uma página 
descrevendo este 
estado. 
 
Com certeza você 
deve estar achando 
que isso é muito 
complexo, mas está 
enganado! E como 
não queremos que 
você saia por aí sem 
saber direito o que 
está fazendo, que tal 
primeiro entender 
um pouco melhor 
como isso funciona? 
 
Essas figuras são chamada de mapas clicáveis na linguagem HTML. Em geral, 
é possível definir 3 tipos de região sensíveis nos mapas: 
• circulares, 
• retangulares e 
• poligonais. 
 
Pode-se também implementar os mapas clicáveis de 2 maneiras, que são 
denominadas: 
• mapas processados no servidor ou Server Side Maps e 
• mapas processados no cliente ou Client Side Maps . 
 
A escolha entre uma ou outra forma de implementação dos mapas só pode ser 
feita após entendermos suas características principais. Vejamos então cada uma 
delas. 
 
3.1. Mapas processados no servidor ou Server Side Maps 
A primeira forma de implementar mapas clicáveis funciona distribuindo, entre 
o cliente e o servidor, a tarefa de interpretar qual documento deve ser carregado 
ao se "clicar" em um ponto da imagem. 
 
Neste caso, o cliente deve, primeiro, determinar o ponto exato que foi 
selecionado na figura e enviar a coordenada deste ponto 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 finalmente carrega a 
página. 
 
No servidor há um arquivo associado a cada mapa clicável, onde estão 
definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o 
ponto esteja dentro desta região. 
 
Esta forma de selecionar as regiões de uma imagem está caindo em desuso, 
pois apresenta várias desvantagens. A primeira delas é que o formato deste 
arquivo de definição das áreas é dependente do tipo de servidor. Ao mudar uma 
página de um servidor para outro é necessário converter os arquivos. Outra 
desvantagem é que costumaser necessário pedir a intervenção do 
administrador do servidor para atualizar o arquivo. Além disso, a cada seleção 
é necessário uma consulta ao servidor para determinar o documento que foi 
selecionado (o que implica um maior tempo de resposta). Por fim, o usuário 
não tem nenhuma indicação, no mesmo documento, de qual URL ele está 
selecionando, pois esta informação está no servidor. 
 
 
3.2. Mapas processados no cliente ou Client Side Maps 
 
Neste tipo de mapa clicável, a definição das regiões de uma figura é feita no 
próprio arquivo HTML. É preciso que o navegador seja capaz tanto de 
determinar qual ponto da figura foi selecionado quanto descobrir em qual área 
está contido este ponto. 
 
..
6 
6 
O Netscape, a 
partir da versão 
2.0, e o Explorer, 
a partir da versão 
3.0, já 
implementam 
essa possibilitade 
de interpretação 
no navegador. 
 
Perceber, 
claramente, a 
diferença entre os 
dois métodos é 
muito importante. O 
server side é uma 
combinação de CGI 
(Common Gateway 
Interface), HTML e 
um arquivo que 
informa as regiões 
sensíveis que 
residem no servidor. 
Por outro lado, 
quando você usa um 
client side, todas as 
informações estão 
dentro do próprio 
código HTML da 
sua página! Isso gera 
menos tráfego na 
rede e aumenta a 
eficiência do 
navegador! 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
..
7 
7 
Veja a seguir um 
exemplo que 
ilustra a criação 
de um mapa 
clicável. A 
página criada 
pelo exemplo é a 
mostrada na 
figura 3.3 que 
segue. 
 
<HTML> 
 <HEAD> 
 <!-- 
EXEMPLO DE 
MAPAS 
CLICAVEIS 
--> 
 
<TITLE>CLIQ
UE NA 
IMAGEM</TIT
LE> 
 </HEAD> 
 
 <BODY 
BGCOLOR="WH
ITE"> 
 
<CENTER> 
 
<p>Clique 
na 
imagem!</p> 
 
 <MAP 
NAME="MAPA"
> 
<AREA 
SHAPE=C
IRCLE 
COORDS=
"50,50,
25" 
HREF="H
TTP://W
WW.CNPQ
.BR" > 
 
<AREA 
SHAPE=P
OLYGON 
COORDS=
"0,50,100,50,50,100,0,50" 
HREF="HTTP://ALTAVISTA.COM" > 
 
<AREA SHAPE=RECT COORDS="0,0,100,100" 
HREF="HTTP://WWW.UFF.BR" > 
 
</MAP> 
 
<IMG SRC="NOTA.GIF" WIDTH="100" HEIGHT="100" 
BORDER="1" ALT="BANDEIRA COM NOTA MUSICAL" 
USEMAP="#MAPA"> 
 </CENTER> 
 </BODY> 
</HTML> 
 
Como você deve ter observado, surgiram muitas tags novas neste exemplo! 
Para definir as diferentes regiões da figura e associá-las a diversas URLs são 
necessárias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>. 
 
Figura 3.3 - Página gerado pelo código html 
..
8 
8 
 
À medida que sua 
imagem tiver áreas 
poligonais 
complexas, pode ser 
mais difícil 
encontrar as 
coordenadas das 
áreas. Existem 
diversos programas 
disponíveis na 
Internet que podem 
criar estes mapas 
para você. (Use um 
site de buscas para 
localizá-los!) 
 
Um destes 
programas muito 
simples é o 
Mapedit: 
http://www.boutell. 
com/mapedit/ 
#download 
 
Uma interface 
melhor é encontrada 
no MapThis!: 
http://galadriel. 
exaetc.ohio-
state/tc/mt/ftp/ 
mapthis 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
A tag <MAP> ... </MAP> tem apenas o atributo NAME que serve para 
definir um nome que será utilizado para associar às regiões a um determinado 
arquivo de imagem (incluído através do atributo usemap da tag <IMG>). 
 
Mas a tag <MAP> ... </MAP>, como pode ser visto no exemplo anterior, 
contem uma série de tags que farão a definição de cada uma das áreas sensíveis 
da página. 
 
Assim, uma ou mais tags <AREA> são colocadas dentro de <MAP> ... 
</MAP> para definir cada uma das áreas clicáveis da figura. Há três tipos de 
áreas: 
• circulares, 
• retangulares e 
• poligonais. 
 
O valor do atributo SHAPE especifica a forma da área e pode receber os 
seguintes valores: CIRCLE, RECT (valor default) e POLYGON (ou 
POLY). 
 
O atributo COORDS fornece um conjunto de coordenadas para definir a área. O 
significado e o número de coordenadas variam de acordo com a forma 
escolhida: 
 
CIRCLE – requer três valores x, y e r, onde (x, y) é o centro do círculo e r o 
raio. No exemplo acima, é definida uma área circular de 25 pontos de raio, 
posicionada no centro da (coordenada 50, 50) da figura. 
 
RECT – requer quatro valores x1, y1, x2, y2, onde (x1, y1) é o vértice 
superior esquerdo do retângulo e (x2, y2) é o vértice inferior direito. No 
exemplo anterior, é definido um retângulo envolvendo toda a figura. 
 
POLYGON – requer um número par de valores x1, y1, ... xn, yn, onde cada par 
(xn, yn) corresponde a um dos vértices do polígono. No exemplo, é definido 
um losango com os vértices (50,0), (100, 50), (50, 100) e (0,50). 
 
Nas tags <AREA> o atributo HREF serve para indicar a URL que deve ser 
carregada após a seleção da região. É possível também utilizar o atributo ALT 
para exibir um texto explicativo quando o cursor do mouse passar sobre a área. 
 
O atributo NOREF na tag AREA pode ser usado para indicar que determinada 
área não chama arquivo algum. 
 
Nada impede que haja sobreposição de áreas. Quando a coordenada 
selecionada se encontra na interseção de duas áreas, a região selecionada será 
aquela que foi definida primeiro. 
 
Após a definição do mapa, é necessário associar uma figura a ele. A tag 
<IMG> usa para isso o atributo USEMAP que deve receber como valor o nome 
do mapa associado. 
..
9 
9 
 
GIFS animadas são 
pequenas seqüências 
de animação 
compostas por várias 
imagens do tipo GIF 
agrupadas em um 
arquivo. 
 
 
Há diversos 
programas que 
auxiliam a criação 
de GIFs animadas 
disponíveis na rede, 
como 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/ 
 
 
 
 
Um applet é um 
pequeno programa 
em Java voltado 
para utilização na 
Web. 
 
Javascript é o 
assunto do segundo 
módulo deste curso. 
 
4. Animações 
 
Há várias formas de criar animações em páginas de Web. Usar GIFs animadas, 
Applets JAVA, HTML dinâmico e Javascript são algumas delas! 
 
A criação de uma GIF animada é muito simples. Basta criar cada uma das 
imagens que vão compor a seqüência, com pequenas variações no desenho para 
cada instante de tempo (como num desenho animado). Estes arquivos de 
imagens são posteriormente agrupados por meio de um programa. 
 
Para animações mais complexas e de figuras maiores pode-se optar por usar 
applets Javascript. Mesmo que não se saiba como criá-los é possível utilizar 
applets prontos, que permitam reconfiguração. Um exemplo é disponibilizado 
pela Sun no endereço: 
http://java.sun.com/applets/Animator/index.html 
 
 
 
Exercícios: 
 
1. Substitua, no exemplo de mapas clicáveis, o pequeno texto entre 
<P>...</P> por algo que ocupe diversas linhas. Depois experimente usar 
todas as opções de alinhamento de imagens vistas na aula. Use em cada caso 
cores diferentes para o seu texto, borda da imagem e fundo da página. 
 
2. Faça o seu próprio mapa clicável e o inclua no exercício anterior. 
 
3. No exemplo anterior, inclua uma animação. 
 
 
 
Resumo: 
 
Nesta aula você aprendeu tudo sobre imagens. Viu como incluir imagens e 
formatar sua borda, seu espaçamento, alinhamento, dimensões e texto 
alternativo. Entendeu a utilização da imagem como link, quais formatos de 
imagens podem ser usados e as diferenças entre os formatos. Imagens com 
transparência e animações não são mais segredo para você. Conheceu as 
formas de implementar mapas clicáveis e como tornar áreas de figuras 
sensíveis ao click! Depois desta aula, suas páginas certamente serão muito mais 
animadas!!!! 
 
 
Auto-avaliação: 
 
Com que facilidade você fez os exercícios acima? Não deixe de voltar a ler o 
ponto em que sentiu mais dificuldade. Depois disso você estará pronto para 
nossa próxima aula , na qual um mundo de cores, sons e movimento estará 
esperando por você! 
02 
1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Embora não seja 
muito conveniente, 
nada impede que a 
imagem esteja em 
outra máquina! Isto 
é, a URL indicada 
pode ser um 
endereço qualquer 
na Internet! 
 
 
Os valores RGB 
(forma simplificada 
de escrever Red-
Green-Blue) de umacor são as 
quantidades das 
cores vermelha, 
verde e azul que 
formam esta cor. 
 
Aula 4: Cores e Multimídia 
 
Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos 
como definir a cor da página e dos textos. Aprenderemos a incluir recursos 
multimídia de som e vídeo em um documento HTML. Prontos? Então: luzes, 
cores, ação!! 
 
 
Objetivos: 
- Definir as cores a serem usadas na WWW. 
- Aprender a incluir vídeos e som nas páginas. 
- Determinar o tipo e a cor das fontes de texto. 
- Incluir imagem e cor de fundo. 
 
 
Pré-requisitos: 
Para essa aula, você deve ter entendido os conceitos de HTML das duas aulas 
anteriores. Em caso de dúvidas, volte e releia, pelo menos, a primeira parte da 
aula 3! 
 
1. Definição de Cores 
Vamos agora mostrar como trabalhar com cores. Há duas formas de definir 
cores em HTML: 
• através de seu nome ou 
• através dos valores RGB da cor. 
 
Para definir uma cor através do nome é preciso saber o nome das cores em 
inglês. Por exemplo: Aqua, Maroon, Purple, Fuchsia, Teal, Silver, Gray, Lime, 
Olive e Gold correspondem às cores azul-piscina, castanho, púrpura (que é 
uma cor entre o vermelho e o violeta), fúcsia (vermelho-púrpura vivo ou rosa-
choque), azul-esverdeado escuro, prateado, cinza, lima (cor verde amarelada), 
verde oliva e dourado. As cores intermediárias, como as cores combinadas, 
também são denominadas em inglês. Por exemplo: cadet Blue, corn flower 
Blue, dark slate Blue, dark turquoise, light Blue, light steel Blue, medium 
aquamarine, medium Blue, medium slate Blue, medium turquoise, midnight 
Blue, neon Blue, new midnight Blue, plum, rich Blue, sky Blue, steel Blue, 
summer sky, turquoise são as variações possíveis da cor azul. Use estes nomes 
para definir o fundo de uma página, assim que aprender isso na seção 2, e verá 
o que essas cores representam! 
 
A definição pelo valores RGB é feita indicando a quantidade de vermelho 
(Red), verde (Green) e azul (Blue) necessária para compor a cor. Cada uma 
destas quantidades é indicada por um número entre 0 e 255. 
 
Esta segunda forma permite que você defina qualquer cor, desde que seja 
entendido o mecanismo usado para descrever cores a partir das 3 luzes 
primárias do sistema RGB. 
02 
2 
Os números 
hexadecimais usam 
uma base de 16 
símbolos e não 10 
como os decimais. 
Os números de 0 a 9, 
isto é, os primeiros 
10, são os mesmos 
dos decimais. 
 
Depois são usadas as 
letras de A a F (em 
maiúsculas ou 
minúsculas) para 
compor os 16 
símbolos diferentes 
da base. Veja a 
tabela abaixo: 
Símbolo Valor 
0 0 
1 1 
2 2 
3 3 
4 4 
5 5 
6 6 
7 7 
8 8 
9 9 
A ou a 10 
B ou b 11 
C ou c 12 
D ou d 13 
E ou e 14 
F ou f 15 
 
Esses números 
hexadecimais são 
posicionais como os 
decimais. Isso quer 
dizer que cada vez 
que se deslocar um 
dígito, uma posição 
para à esquerda, seu 
valor passa a ser 
multiplicado pelo 
valor da base, que 
neste caso é 16. (A 
menos que seja um 
"zero à esquerda", 
como naquele 
trocadilho!! Mas 
mesmo assim, a 
regra é a mesma, 
pois "zero" 
multiplicado por 
qualquer número é 
zero! 
mbora esta seja, basicamente, a mesma forma de descrever cores no vídeo de 
seu computador, em HTML o formato utilizado é #RRGGBB, com 2 dígitos 
para o R, 2 dígitos para o G e 2 dígitos para o B. Para que os valores possam 
"caber" em dois dígitos eles são escritos em hexadecimal (base 16). 
 
A menor intensidade possível para cada cor R, G ou B é 00. A intensidade 
máxima é FF (255). O efeito produzido por cada uma das cores (vermelha, 
verde e azul) é aditivo e influencia na cor resultante. A tabela abaixo mostra 
algumas cores e seus valores RGB. 
 
 
Tabela 4.1- Definição de algumas cores usando o sistema RGB/HTML 
Nome Definição R G B 
Black #000000 0 0 0 
White #FFFFFF 255 255 255 
Red #FF0000 255 0 0* 
Green #00FF00 0 255 0 
Blue #0000FF 0 0 255 
Yellow #FFFF00 255 255 0 
Magenta #FF00FF 255 0 255 
Cyan #00FFFF 0 255 255 
Gray #C0C0C0 192 192 192 
Coral #FF7F00 255 127 0 
Gold #CD7F32 205 127 50 
Silver #E6E8FA 230 232 235 
Aqua #70DB93 112 206 147 
Lime #32CD32 50 205 32 
Medium Blue #3232CD 50 50 205 
Slate Blue #007FFF 0 127 255 
 
 
 
2. Cor ou Imagem de Fundo da Página 
 
A tag <BODY> ... </BODY> tem uma série de atributos que permitem definir 
características gerais do documento HTML. Pode-se, nestes atributos, definir: 
• a imagem de fundo da página (atributo BACKGROUND), 
• a cor de fundo da página (atributo BGCOLOR), 
• a cor do texto (atributo TEXT), 
• a cor de links ainda não visitados (atributo LINK), 
• cor de links enquanto selecionados ou ativos (atributo ALINK) e 
• cor de links já visitados (atributo VLINK). 
 
A tabela 4.2 resume estes atributos. 
 
02 
3 
 
Exemplificando, o 
hexadecimal A0 tem 
valor de A 
multiplicado por 16 
(isso é 10x16 + 0 = 
160). C0 vale 12x16 
=192. AB tem valor 
de A0 + B, isto é: 
160 + 11 = 171. 7F 
será = 7x16 +15 = 
127. 
Exatamente como se 
faz na base decimal 
!!! O número 21 em 
decimal não seria 
2x10+1 !!!! 
 
 
 
 
 
 
 
 
 
 
 
Ao definir uma cor 
ou imagem para o 
fundo da página, 
você deve levar em 
consideração a cor 
do que será colocado 
por cima. Por isso, 
atenção com o 
contraste que você 
poderá obter na 
página com a 
combinação de cores 
escolhida! 
 
Tabela 4.2 - Atributos da tag <body> relacionados à definição de cor 
Atributos Descrição 
BACKGROUND Imagem de fundo 
BGCOLOR Cor de fundo 
TEXT Cor do texto 
LINK Link ainda não visitado 
ALINK Link sendo visitado (ativo) 
VLINK Link já visitado 
 
O atributo BACKGROUND define uma imagem que será utilizada como 
"ladrilho" de fundo da página. Como na figura 4.1. 
 
Figura 4.1 - Página "ladrilhada com uma imagem de fundo 
 
Ao definir uma imagem para fundo de página, deve-se ter o cuidado de evitar 
que a junção dos ladrilhos fique nítida. A menos que você realmente queira 
isso! Imagens em que os quatro lados são de uma única cor (sem variações de 
tonalidade) e que os desenhos iniciam e terminam no mesmo ponto, não 
apresentam o problema de bordas nítidas. Isso não ocorreu na imagem da 
página anterior, onde a descontinuidade dos motivos de cada ladrilho 
salientaram a junção deles e não forneceram a idéia de um fundo contínuo à 
página. 
 
Se o atributo BACKGROUND estiver definindo a cor de fundo (BGCOLOR), esta 
só é visível até que a imagem de fundo seja carregada (o que às vezes pode 
demorar um pouco), ou se não houver imagem de fundo. 
 
No exemplo abaixo, você pode observar a definição de nota.gif como 
imagem de fundo e da cor azul-marinho ("navy" em inglês) para o texto da 
página: 
<BODY BACKGROUND=nota.gif TEXT=NAVY> 
02 
4 
 
 
 
 
 
 
 
 
 
 
Para que uma 
determinada fonte 
seja vista, é 
necessário que ela 
esteja instalada no 
computador do 
usuário que está 
vendo a página. 
 
Quando no 
computador do 
usuário não existe 
nenhum dos tipos 
definidos de fonte, 
ela é, geralmente, 
substituída por 
alguma outra, de 
modo que a página 
possa ser lida! 
 
 
 
A tag <BODY> tem ainda alguns atributos adicionais, que permitem controlar o 
tamanho das margens do documento (em pontos do vídeo ou pixels). Mas não 
existe compatibilidade entre os dois principais navegadores (Netscape e 
Explorer) quanto a estes atributos. A tabela 4.3 mostra estes atributos. 
 
Tabela 4.3 - Atributos adicionais da tag <body> nos dois principais 
navegadores 
Netscape Explorer Descrição 
marginHeight topMargin Margem superior 
marginWidth leftMargin Margem esquerda 
 
No exemplo a seguir, mostramos como eliminar a distância entre o conteúdo da 
página e as bordas da janela, tanto para o Netscape quanto para o Explorer: 
 
<BODY topMargin=0 leftMargin=0 
marginHeight=0 marginWidth=0> 
 
 
3. Definindo a Fonte e a Cor dos Caracteres 
No que tange à fonte dos textos e suas cores, existem duas tags com as quais 
você pode trabalhar: <FONT> e <BASEFONT>. 
 
A tag <FONT> ... </FONT> permite, através de seus atributos, modificar 
o tamanho, cor e tipo de fonte dos caracteres de partes do documentocontidos 
dentro da tag. Os atributos desta tag podem ser vistos na tabela 4.4. 
 
Tabela 4.4 - Atributos adicionais da tag <FONT> 
Atributos Descrição 
SIZE Tamanho da fonte 
FACE Tipo de fonte e alternativas 
COLOR Cor da fonte 
 
O atributo SIZE permite definir o tamanho da fonte de caracteres. Este pode 
assumir valores de 1 a 7, sendo que o tamanho default é 3. Ao se atribuir ao 
SIZE um valor precedido de + ou -, este valor tem um significado (de 
aumentar ou diminuir a fonte) relativo ao tamanho atual. 
 
Por exemplo: se essa tag tem como atributo em determinado ponto da página o 
tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passará a 
ser 2. Obviamente respeitando os limites possíveis que são os números de 1 
a 7. 
 
O atributo FACE serve para definir o tipo de fonte a ser utilizado. Várias 
alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte 
não estar disponível. Cada um dos tipos de fonte é separado do outro por 
vírgulas. Como no exemplo abaixo: 
<font face="New York, Times New Roman, Times" 
size="5"> 
02 
5 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Um pluggin é um 
módulo auxiliar 
incorporado ao 
navegador. 
 
 
 
 
Mais informações 
sobre formatos de 
Imagens, Som, e 
Movies podem ser 
encontradas nos 
endereços: 
 
www.ic.uff.br/ 
~aconci/CV.htm 
 
www.wotsit.org 
 
www.dcs.ed.ac.uk/ 
home/mxr/gfx/ 
index-hi.html 
 
www.cica.indiana. 
edu/graphics/ 
image_specs 
 
O atributo COLOR permite definir a cor na qual será escrito o texto. No 
exemplo abaixo, o texto “tudo verde” vai ser escrito em tamanho 6, na cor 
verde e com a fonte "Bazzoka": 
 
<BASEFONT SIZE=5> 
<FONT SIZE=+1 FACE=Bazzoka COLOR=green> 
tudo verde e maior 
</FONT> 
 
A tag <BASEFONT>, exemplificada acima, modifica a formatação padrão de 
todo o texto da página, a partir do ponto onde aparece. Ela tem o atributo size, 
que trabalha de forma idêntica ao da tag <font>. 
 
 
4. Multimídia 
Os navegadores também podem ser utilizados para reproduzir arquivos de 
áudio e vídeo. Como há uma infinidade de formatos para estes tipos de dados, a 
reprodução destes arquivos é realizada através de módulos incorporados ao 
navegador (pluggin) ou a programas externos. 
 
Alguns navegadores costumam, durante a sua própria instalação, instalar junto 
os pluggins para os tipos de arquivos mais comuns. Para outros pluggins é 
necessário que o próprio usuário faça a instalação. 
 
Quando o navegador não tem determinado pluggin, ele simplesmente ignora o 
arquivo requisitado. Nas tabelas 4.5 e 4.6 a seguir, alguns formatos comuns são 
relacionados. 
 
Tabela 4.5 - Formatos de áudio 
Tipo Descrição 
Wav Formato padrão Windows 
Au Formato padrão Unix 
Mp3 Formato compactado 
Mid Música produzida por sintetizador 
ra Real Audio (execução por demanda) 
 
Tabela 4.6 - Formatos de vídeo 
Tipo Descrição 
Avi Formato padrão Microsoft 
Mov Formato padrão Apple 
Mpeg Formato compactado (equivalente ao JPEG) 
 
4.1. Inserindo Áudio e Vídeo 
Uma das formas de fazer com que um arquivo de áudio ou vídeo seja 
executado é incluí-lo no documento sob a forma de um link. Assim, ele só será 
executado se o usuário selecionar o link. 
02 
6 
 
O Nescape e o 
Internet Explorer 
reconhecem a tag 
<EMBED> que serve 
para exibir 
informação 
produzida por um 
módulo incorporado 
ao navegador 
(pluggin). Para cada 
um deles, porém, é 
necessário definir 
determinados 
atributos para que 
seja produzido um 
resultado 
satisfatório. 
 
 
Em qualquer caso, é 
fundamental definir 
o atributo SRC com 
a URL do arquivo 
que vai ser exibido 
(arquivo de som ou 
de vídeo). Para os 
demais atributos é 
necessário analisar 
caso por caso. 
 
 
Obviamente, estas 
formatações 
multimídias não 
terão efeito algum se 
o browser não 
estiver configurado 
para tocar música ou 
se o computador que 
receber a página, não 
tiver uma placa de 
som. 
 
 
 
 
 
 
 
AVI é sigla de 
Audio Video 
Interleave. 
 
No exemplo abaixo, a seleção do texto “link p/ música” faz com que 
o navegador carregue e execute o arquivo "greeting.wav" do diretório 
som: 
<A HREF="/som/greeting.wav">link p/ música</A> 
Algumas vezes é interessante executar o áudio ou o vídeo independentemente 
da intervenção do usuário. Um exemplo deste tipo de procedimento é a 
inclusão de uma música de fundo numa página. Neste caso, não há uma 
padronização muito rigorosa entre os navegadores. 
 
4.2. A Tag <EMBED> no Netscape 
O uso da tag <EMBED> apenas com o atributo SRC definido faz com que o 
Netscape inclua na página o painel de controle do pluggin. O som ou a imagem 
não são exibidos imediatamente, mas o usuário pode, através do painel de 
controle, exibi-los quantas vezes desejar. 
 
Normalmente, o Netscape não sabe que espaço reservar na página para o painel 
de controle e por isso é necessário definir também os atributos WIDTH e 
HEIGHT, que informam a largura e a altura a ser ocupada. 
 
A inclusão do atributo HIDDEN="True" faz com que, no caso de um arquivo 
de som, o painel de controle não seja exibido e o som seja tocado 
imediatamente após o carregamento da página. No caso de um vídeo este 
atributo define a largura e a altura da janela de exibição como zero, o que faz 
com que o navegador não possa mostrar nada (normalmente isso causa um erro 
no pluggin). 
 
Para fazer com que o vídeo comece a ser "visto" após o carregamento da 
página é necessário definir o atributo AUTOSTART="True". Quando este 
atributo está definido, o Netscape não exibe o painel de controle do pluggin, 
apenas o próprio vídeo. 
 
A tag <EMBED> também conta com o atributo ALIGN que pode receber os 
mesmos valores e se comporta como na tag <IMG>. 
 
O atributo LOOP recebe um valor que indica o número de vezes que o som 
deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10 
vezes). Este atributo não tem nenhum efeito em arquivos de vídeo. 
 
As linhas que seguem mostram a utilização desta tag para reproduzir vídeo e 
som. 
<EMBED SRC="x.avi" AUTOSTART="True" width=200 
height=200> 
<EMBED SRC="/som/greeting.wav" HIDDEN="True" LOOP=2> 
 
02 
7 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DYNSRC significa 
(dynamic source) 
fonte dinâmica ! 
 
4.3. A Tag <EMBED> no Explorer 
 
Quando se define a tag <EMBED> apenas com o atributo SRC, o Explorer 
também exibe o painel de controle do pluggin. Diferentemente do Netscape 
não é necessário definir a largura e a altura, pois este navegador consegue 
determinar o espaço ocupado pela janela do pluggin. O atributo ALIGN tem no 
Explorer o mesmo efeito que no Netscape. 
 
O atributo HIDDEN também tem o efeito de fazer desaparecer o painel de 
controle do pluggin, mas não faz com que ele seja executado automaticamente. 
Para que isso aconteça é necessário definir o atributo AUTOSTART="True" 
mesmo para arquivos de som. 
 
O atributo LOOP tem efeito tanto sobre arquivos de som como de imagem e 
basta definir um valor diferente de zero para que o arquivo seja reproduzido 
infinitamente. 
 
O exemplo a seguir permite exibir arquivos de som e imagem em ambos os 
tipos de navegador (quase que com o mesmo efeito): 
<EMBED SRC="x.avi" AUTOSTART=”True” width=200 
height=200> 
<EMBED SRC="="/som/greeting.wav" AUTOSTART=”True” 
HIDDEN=”True” LOOP=100> 
 
No Explorer é possível utilizar a tag <IMG> para exibir vídeos, definindo o 
atributo DYNSRC para indicar o arquivo a ser carregado. É conveniente, neste 
caso, definir o atributo SRC com uma imagem alternativa. O Explorer vai 
ignorar o SRC e exibir o vídeo, já o Netscape fará o contrário. 
 
Arquivos de som podem ser exibidos utilizando a tag <BGSOUND>. O exemplo 
acima poderia ser escrito então como: 
<IMG DYNSRC="x.avi" SRC=”alt.jpg” loop=yes> 
<BGSOUND SRC="/som/greeting.wav" loop=yes> 
 
 
Exercícios: 
 
1. Enfatize a separação entre cada "aula" no exercício 3 da aula 2, substituindo 
a fonte única usada por diversos outros tipos de fontes. 
 
2. Depois experimente usar todas as opções de definir cor (por