Aula 1 a 10

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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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. 
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: 
 
 
1 
 
 
 
 
 
 
 
Telnet é o serviço 
de conexões 
remotas 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. 
<UL> 
<LI>Correio Eletronico</LI> 
<LI>Telnet</LI> 
<LI>FTP</LI> 
</UL> 
 
Produz uma saída parecida com: 
o Correio Eletronico 
o Telnet 
o FTP 
 
1.1. 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çãoserá 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> 
 
 
2 
 
 
 
 
 
 
 
 
 
<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. 
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>&Eacute; o protocolo mais usado na 
Internet para criar uma conex&atilde;o com uma 
m&aacute;quina remota.</DD> 
<DT>FTP</DT> 
<DD>O "File Transfer Protocol" &eacute; o 
principal m&eacute;todo de se transferir 
arquivos pela Internet. </DD> 
</DL> 
 
Produz uma saída parecida com: 
Telnet 
É o protocolo mais usado na Internet para 
criar uma conexão com uma máquina remota. 
FTP 
O "File Transfer Protocol" é o principal método 
de se transferir arquivos pela Internet. 
 
A tabela 2.1 resume as tags relativas a listas. 
 
 
 
 
 
 
 
 
 
 
 
 
3 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 TYPE 
 ordenada 
<OL> ... </OL> Lista ordenada TYPE, 
 START 
<LI> ... </LI> Item de lista ordenada TYPE, VALUE 
<DL> ... </DL> Lista de definições nenhum 
<DT> Termo a ser definido nenhum 
<DD> Definição do Termo nenhum 
 
 
 
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. 
 
 
 
 
 
4 
 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> 
 
 
 
5 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 coma 
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> 
 
 
 
 
 
 
6 
 
 
 
 
 
Lembrete: 
as tags tanto 
podem ser 
escritas em 
maiúsculas 
como em 
minúsculas, 
mas nos links 
esta diferença 
é importante 
<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! 
 
7 
 
1 
Aula 8: Folhas de Estilo 
 
Nesta aula você estará se habilitando a usar Folhas de Estilo, um recurso que 
permite separar o estilo do documento da sua estrutura. A introdução das folhas 
de estilo representa um passo importante na evolução da Web, útil para facilitar 
a atualização e a manutenção do padrão de um conjunto de páginas sob sua 
administração. 
 
 
Objetivos: 
- Aprender a sintaxe básica das folhas de estilo. 
- Usar seletores, propriedades e valores. 
- Incluir seletores contextuais e múltiplos. 
- Conhecer as classes de estilo e as pseudo-classes. 
- Usar identificadores. 
- Fazer definição inline. 
- Estilos de divisão e de trecho de parágrafo. 
 
 
Pré-requisitos: 
Todas as aulas anteriores serão usadas nesta última aula, se algo ainda não 
estiver bem, especialmente até a aula 4, reveja estes tópicos e tire suas dúvidas. 
 
 
1. Folhas de Estilo 
Até a versão 4 da linguagem HTML, caso se desejasse criar páginas cuja 
aparência fosse ligeiramente diferente do comportamento padrão, era 
necessário incluir os atributos e tags que definissem essa aparência nos pontos 
do documento onde fosse necessário, misturados à própria estrutura do 
documento. 
 
Por exemplo, num documento cujo texto fosse de cor preta (definida na tag 
<BODY> através do atributo TEXT color=black), caso se desejasse 
cabeçalhos de cor azul marinho seria necessário incluir, em cada ocorrência da 
tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer 
modificação a ser realizada nesta definição tornava necessário buscar por todo 
o documento o que deveria ser modificado. 
 
A partir da versão 4 foi introduzido o conceito de folhas de estilo em cascata 
(CSS – cascade style sheets). A introdução das folhas de estilo representa um 
passo importante na evolução da Web, pois através delas os estilos (cores, 
fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o 
conteúdo do texto da página). 
 
Essa estratégia torna sua página mais flexível e fácil de atualizar. Ela 
possibilita separar a tarefa de tornar o site graficamente atraente das tarefas 
ligadas à programação. Essa separação é importante pois geralmente é feita por 
pessoas com formações e experiências profissionais diferentes. A criação 
artística do visual do site é o trabalho de um designer visual, geralmente com 
formação na área de Artes. A geração do conteúdo do documento é o trabalho 
 
2 
do programador HTML ou de algum especialista em um utilitário de criação de 
páginas, ou seja, pessoas que são da área técnica em informática. 
 
Estas informações ligadas à aparência ou formato do site podem inclusive estar 
contidas em um arquivo à parte que pode ser incluído nos diversos documentos 
que compõem o site, garantindo assim uma apresentação comum em todas as 
páginas. Além das facilidades de formatação já existentes, foram acrescentadas 
novas facilidades (como a criação de classes), 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 seção <HEAD> do documento, antes que qualquer texto 
seja formatado. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos 
contidos na tag. 
 
Há dois tipos de sintaxe possível: a sintaxe CSS e a sintaxe JavaScript. A 
sintaxe CSS é normalmente a padrão e é definida atribuindo-se o valor 
"text/css" ao atributo TYPE. A sintaxe JavaScript é reconhecida apenas 
pelo navegador Netscape, é definida atribuindo-se o valor 
"text/JavaScript" ao atributo TYPE. 
 
Nesta aula veremos em detalhes a sintaxe padrão. O exemplo a seguir faz com 
que todos os cabeçalhos do tipo 1 (<H1>...</H1>) sejam escritos 
utilizando a fonte Arial e a cor azul; e todos os cabeçalhos do tipo 2 
(<H2>...</H2>) e 3 (<H3>...</H3>) sejam escritos utilizando a fonte 
Bazzoka e a cor verde: 
<STYLE TYPE="text/css"> 
<!-- 
H1 { 
 font-family: Arial; 
 color: blue;} 
H2,H3{ 
 font-family: Bazzoka; 
 color: green; } 
--> 
</STYLE> 
 
A colocação dos estilos entre os símbolos de comentário, <!-- e -->, não é 
obrigatória, mas é uma boa sugestão, pois a utilização destes símbolos é 
ignorada pelos navegadores que conhecem a tag <STYLE> (como o Explorer 
e o Netscape na versão 4 ou posterior), mas não é ignorada pelos navegadores 
que não as conhecem ou as versões anteriores destes, que desta forma tomam a 
definição dos estilos como comentário. 
 
O texto do interior da tag <STYLE> não é HTML e segue a seguinte sintaxe: 
<STYLE TYPE="text/css"> 
/* comentario */ 
seletor { propriedade: valor; 
propriedade: valor valor valor ...;...} 
seletor, seletor {propriedade: valor;...} 
</style> 
Ou seja, as folhas de estilo CSS são especificadas como uma lista de nomes de 
seletores com diversas propriedades especificadas pelos seus valores separados 
Você também pode definir 
os valores de estilo em 
qualquer tempo, mas 
definindo os estilos na 
seção <BODY>, eles não 
terão efeito imediato, ainda 
que as mudanças no estilo 
passem a aparecer se o 
usuário redimensionar a 
janela, causando uma 
reformatação no 
documento. 
 
3 
por ponto-e-vírgulas, onde cada nome de seletor com propriedades e valores 
comuns é separado por vírgula. 
 
Os seletores podem ser uma tag ou uma classe de HTML (ou uma única tag 
com o identificador especificado), podem-se também fazer diversas atribuições 
ao mesmo tempo ou fazer atribuições sensíveis a certo contexto. Você pode 
encontrar as especificações completas das CSS no site da W3E: 
http://www.w3.org . 
 
 
1.1. Seletor Múltiplo 
 
É possível atribuir o mesmo valor às propriedades de várias tags de uma só 
vez, colocando-as separadas por vírgulas antes da definição das propriedades. 
No exemplo a seguir, todos os cabeçalhos H1, H2 e H3 e todos os textos 
em negrito (bold), B, serão escritos com a cor azul: 
<STYLE> 
 H1, H2, H3, B {color: blue; } 
</STYLE> 
 
 
1.2. Seletor Contextual 
 
É possível indicar que as propriedades de uma determinadatag só serão 
modificadas quando ela se encontrar em um determinado contexto, por 
exemplo no interior de uma ou mais container tags. 
 
Para indicar o contexto, simplesmente se escreve sua especificação antes das 
chaves , { }. No exemplo a seguir, todos os textos em itálico, I , dentro de 
cabeçalhos H1 (apenas estes) serão escritos com a cor verde, os demais textos 
em itálico terão a cor padrão : 
<STYLE> 
 H1 I { color: green;} 
</STYLE> 
 
 
2. Propriedades dos Estilos 
 
Propriedades são atributos que definem a forma de visualização de uma 
determinada tag ou de um grupo de tags. Elas podem ser divididas em 7 
tipos, de acordo com sua função e nem sempre são aplicáveis a qualquer tag. 
 
Os 7 tipos de propriedades são as que modificam: 
• as fontes de caracteres, 
• a cor ou a imagem de fundo da página usada, 
• os espaçamentos, 
• as características das listas, 
• o alinhamento do texto, 
• as características das bordas, e 
• o posicionamento de camadas. 
 
Há pequenas incompatibilidades entre a forma como os dois principais tipos 
de navegadores (Explorer e Netscape) são afetados por algumas propriedades, 
que podem, inclusive, até mesmo serem ignoradas. 
 
4 
A implementação de estilos por parte do Netscape é mais recente e nem tudo 
que foi implementado no Explorer é reconhecido por esse navegador. 
Os quadros a seguir mostram as propriedades de cada tipo, seus valores 
possíveis e o(s) navegador(es) que as implementam. Será excluído o 
posicionamento de camadas por estar fora do objetivo do nosso curso. 
 
 
Tabela 8.1 - Propriedades relacionadas às fontes de caracteres 
Propriedades Valores Possíveis Browser 
font-
family 
lista de nome de fontes ambos 
font-size tamanho, percentual, xx-small, 
x-small,small,medium,large, 
x-large,xx-large,larger,smaller 
ambos 
font-style normal, oblique, italic ambos 
font-
weight 
normal, bold, bolder, lighter, 
100, 200, 300, 400 (normal), 500, 
600, 700, 800, 900 
ambos 
font-
variant 
normal, smallcaps Explorer 
font family size style weight variant Explorer 
color nome da cor, #RRGGBB ambos 
text-
decoration 
none, overline, underline, 
blink, line-through 
ambos 
text-
transform 
capitalize, lowercase, none, 
uppercase 
ambos 
 
 
Tabela 8.2 - Propriedades relacionadas às cores e imagem de fundo da 
página 
Propriedades Valores Possíveis Browser 
background-
position 
tamanho (x y), percentual (x y), top, 
center, bottom, left, right 
Explorer 
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 
 
5 
Tabela 8.3 - Propriedades relacionadas aos espaçamentos 
Propriedades Valores Possíveis 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 
Tabela 8.4 - Propriedades relacionadas às listas 
Propriedades Valores Possíveis Browser 
list-style-
image 
URL, none explorer 
list-style-
type 
circle, square, disc, lower-
alpha, upper-alpha, lower-roman, 
upper-roman, decimal, none 
ambos 
list-style image type ambos 
 
Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto 
Propriedades Valores Possíveis Browser 
text-
indent 
tamanho, percentual ambos 
text-align left, center, right, justify ambos 
vertical-
align 
baseline, middle, sub, super, 
text-bottom, text-top, percentual 
ambos 
Letter spacing 
define o espaçamento 
entre as letras do 
texto. 
 
White space 
define o espaçamento 
em branco. 
 
pre se refere à fonte 
mono-espaçada. 
 
nowrap impede a 
quebra de linha do 
texto dentro da célula. 
 
padding define as 
margens dentro da 
célula. 
 
word spacing 
refere-se ao 
espaçamento entre 
cada palavra do texto. 
 
6 
Tabela 8.6 - Propriedades relacionadas às bordas 
Propriedades Valores Possíveis 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, inset, outset, ridge. 
solid 
ambos 
border cor width style ambos 
 
 
2.1. Valores das Propriedades 
 
Como você deve ter notado nos quadros acima, há 5 formas distintas de 
definição dos valores das diferentes propriedades: 
• palavras-chave, 
• tamanhos, 
• percentuais, 
• URL's, e 
• cores. 
 
Palavras-chave se referem ao uso de palavras predefinidas, com significados 
definidos pelo contexto. Aparecem nas tabelas 8.1 a 8.6, na coluna "valores 
possíveis" escritas com fonte mono-espaçada para facilitar sua 
identificação. Elas podem expressar uma dimensão (small = pequeno), uma 
relação (bolder = mais em negrito), um comportamento (auto = 
automático, normal, both, left etc.), o nome de uma fonte de 
caracteres (arial, times etc.) ou outros valores. Estas palavras podem 
estar escritas em letras maiúsculas ou minúsculas (o que é chamado de case-
sensitive). 
 
Quando o valor da propriedade for um tamanho, corresponde ao fornecimento 
de um valor numérico, precedido ou não de sinal e seguido da indicação da 
unidade desejada. As unidades válidas são: pixel (indicada pelo símbolo px), 
polegadas (indicada pelo símbolo in), centímetros (indicada pelo símbolo 
cm), milímetros (indicada pelo símbolo mm), pontos (indicada pelo símbolo 
pt, sendo que um ponto eqüivale a 1 / 72 de uma polegada) ou picas (indicada 
pelo símbolo pc, sendo equivalente a 12 pontos). Por exemplo, são tamanhos 
possíveis: 1in, 1.5cm, -3pt, +0,25mm. 
 
Uma propriedade tem valores percentuais se definida por um valor numérico 
seguido do símbolo %. Este valor não é dinâmico e diz respeito apenas ao 
 
7 
momento em que o navegador for aplicar o estilo. Por exemplo: 120%. 
 
URLs se referem à indicação de um endereço. A forma de indicar uma URL 
nas folhas de estilo é diferente da utilizada em HTML, pois deve-se apresentar 
o endereço entre parênteses e precedido das letras url. Ou seja, segue a 
seguinte sintaxe: url(endereço). São, portanto, valores válidos de URL: 
url(http://equipe.nce.ufrj.br /joao/home.html) e 
url(foto.jpg). 
 
Quando na coluna valores possíveis aparece “cor”, esta pode ser descrita por 
até 3 formas: 
• seu nome em inglês; 
• a forma usada em HTML; e 
• na forma rgb(valor,valor, valor). 
 
As duas primeiras formas foram assunto na aula 4. Na primeira forma é 
descrito o nome da cor em inglês. Na segunda, é usada a definição RGB em 
hexadecimal precedida do símbolo # da linguagem HTML (isto é #RRGGBB). 
A terceira forma é uma variação da segunda, onde não é necessário conhecer 
como definir valores em hexadecimais pois a intensidade das cores vermelho, 
verde e azul é definido através da sintaxe rgb(vermelho, verde, 
azul) por valores numéricos decimais usuais. 
 
No caso da forma da linguagem HTML, essa definição nas folhas de estilo não 
pode estar entre aspas. Os valores de vermelho, verde e azul da última forma 
podem aparecer definidos em valores absolutos correspondendo a números de 
0 a 255 ou em percentagens.São, portanto, valores válidos de cor: yellow, 
#FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%). 
 
 
3. Compartilhando Estilos 
 
É possível compartilhar estilos entre vários documentos HTML. Os estilos 
devem estar contidos num arquivo com extensão css, que pode ser incluído 
num documento por meio da tag <LINK> colocada em sua seção <HEAD>. 
 
A utilização de um arquivo de estilo permite criar uma verdadeira 
uniformização das páginas de um site. Qualquer modificação neste arquivo 
modifica todas as páginas de uma só vez. 
 
O exemplo a seguir mostra a sintaxe da tag <LINK> para incluir o arquivo 
“estilo.css” num documento HTML: 
<LINK REL=stylesheet TYPE=“text/css” 
HREF=“estilo.css”> 
 
O valor do atributo HREF indica o nome do arquivo de estilos e além dele é 
necessário definir também os atributos REL e TYPE com os valores 
mostrados no exemplo. 
 
Um arquivo de estilos não é um arquivo HTML (no segundo módulo do curso 
você entenderá melhor isso, já estamos quase lá!) , ou seja, não é necessário 
nem se deve colocar os estilos dentro de uma tag <STYLE>. 
 
8 
4. Classes de Estilo 
 
Com o que foi visto até o momento, ao definir o estilo de uma tag, sempre que 
ela for utilizada no documento terá o aspecto determinado por este estilo. 
Muitas vezes porém é desejável que uma tag tenha vários aspectos de acordo 
com o local onde é utilizada. 
 
É possível, portanto, criar diferentes estilos para uma tag criando várias 
classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o 
caracter ponto (‘.’) seguido de um nome para a classe. 
 
O exemplo a seguir mostra uma definição aplicada a todos os cabeçalhos do 
tipo <H1> (tipo e tamanho de fonte) e as definições de cor aplicáveis apenas 
aos cabeçalhos <H1> pertencentes às classes vermelho (cor de texto 
vermelha) e verde (cor de texto verde): 
<style> 
H1 { font-family: Arial; 
 font-size: 20pt;} 
H1.vermelho { color: red;} 
H1.verde {color: green;} 
</style> 
 
Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo 
class, definindo como valor o nome da classe desejada. No exemplo a seguir, o 
primeiro cabeçalho estará sujeito à definição de tamanho e tipo de fonte e será 
escrito na cor padrão; o segundo e o quarto cabeçalho também estarão sujeitos 
à definição de tamanho e tipo de fonte mas serão escritos na cor vermelha; o 
terceiro, por sua vez, estará sujeito à definição de tamanho e tipo de fonte, mas 
será escrito na cor verde: 
<h1> Cabecalho normal</h1> 
<h1 class=vermelho> Cabecalho Vermelho</h1> 
<h1 class=verde> Cabecalho Verde</h1> 
<h1 class=vermelho> Outro Cabecalho Vermelho</h1> 
 
 
 
4.1. Classes Genéricas 
 
As classes definidas no exemplo anterior só podem ser aplicadas a tags do tipo 
<H1>, pois só esta tag foi incluída no seletor. É possível criar classes 
aplicáveis a qualquer tipo de tag, bastando para isso omitir o nome da tag 
como mostrado no exemplo a seguir: 
<STYLE> 
.verde { 
 color: green; 
 } 
</STYLE> 
 
A utilização de uma classe genérica também é feita por intermédio do atributo 
class como mostra o exemplo a seguir: 
<h1 class=verde> 
 Este é um cabeçalho verde 
</h1> 
<p class=verde>Este é um texto verde</p> 
 
9 
4.2. Pseudo-classes 
 
A tag <A> tem algumas classes com nomes pré-definidos que são associadas a 
estados assumidos por esta tag. Estes estados são descritos na tabela 8.7. 
 
Tabela 8.7 - Estados da tag <A> 
Pseudo-classe Descrição Browser 
link Link que ainda não foi visitado ambos 
active Link selecionado no momento pelo usuário ambos 
visited Link que já foi visitado ambos 
hover Link no momento em que o usuário passa o 
mouse sobre ele 
Explorer 
 
No caso da pseudo-classe, diferentemente de uma classe comum, o nome da 
classe é separado do nome da tag no seletor pelo caracter ":". 
 
Não existem pseudo-classes genéricas e, portanto, sempre é necessário indicar 
o nome da tag. O exemplo a seguir define a cor azul para os links não visitados, 
a cor vermelha e negrito para os links no momento em que o botão do mouse 
está pressionado sobre o link, a cor verde e itálico para os links que já foram 
visitados e a cor vermelho escura para quando o cursor do mouse passar sobre 
o link (este último só funcionará para o Explorer, sendo ignorado se o 
navegador for o Netscape): 
<STYLE> 
A:link {color:blue;} 
A:active {color:red; font-weight:bold;} 
A:visited{color:green;font-style:italic;} 
A:hover {color:darkred;} 
</STYLE> 
 
 
5. Identificadores 
 
Da mesma forma que uma classe modifica as definições feitas para uma tag, é 
possível redefinir, em um determinado elemento do documento, as definições 
de uma classe. 
 
Isso é feito através da criação de um identificador no interior da tag 
<STYLE>. O seletor de um identificador é um nome qualquer antecedido do 
caracter ‘#’. Ao definir um atributo ID com o nome de um identificador numa 
tag qualquer, esta tag tem seu aspecto modificado conforme o estilo definido 
no identificador. 
 
Se nesta tag também estiver definido o atributo classe, as propriedades 
definidas no identificador têm prioridade sobre as definidas na classe. Muito 
embora os navegadores normalmente não imponham restrições, um 
identificador deve ser utilizado em apenas uma tag, criando uma instância 
particular desta tag. 
 
No exemplo a seguir, os três cabeçalhos serão desenhados com a fonte Arial 
e o tamanho Grande, porém o primeiro será desenhado em verde (definição 
da classe), o segundo em azul e o terceiro em amarelo (definições dos 
identificadores): 
 
10 
<STYLE> 
H1.grande { 
 font-family: arial; 
 font-size: large; 
 color: green; 
 } 
#azul { color: blue; } 
#amarelo { color: yellow; } 
</STYLE> 
... 
<H1 class=Grande> 
 Grande e verde 
</H1> 
<H1 class=Grande id=azul> 
 Grande e azul 
</H1> 
<H1 class=Grande id=amarelo> 
 Grande e amarelo 
</H1> 
 
 
6. Estilos inline 
 
Uma outra forma de redefinir o estilo de uma tag é através do atributo STYLE. 
Este atributo pode ser colocado em qualquer tag e tem precedência sobre os 
estilos definidos através dos atributos ID e CLASS. 
 
O valor do atributo STYLE é uma string contendo propriedades e valores 
separados por vírgulas, da mesma forma que é utilizado associado a um seletor 
na tag <STYLE>. Esta forma é denominada “inline”. 
 
No exemplo a seguir, usa-se esta forma para fazer o segundo cabeçalho herdar 
da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor 
definida no atributo STYLE: 
<STYLE> 
H1.grande { 
 font-family: arial; 
 font-size: xx-large; 
 color: green; 
 } 
#azul { 
 font-size: x-large; 
 color: blue; 
 } 
</STYLE> 
... 
<H1 class=grande> Muito grande e verde </H1> 
<H1 class=grande id=azul STYLE=“color: red;”> 
 Grande, vermelho e com fonte Arial 
</H1> 
 
 
7. Tags <div> e <span> 
 
Algumas vezes pode ser interessante modificar a forma de apresentação de um 
trecho do texto que não está associado a nenhuma tag em especial. Nestes 
casos, a linguagem HTML fornece duas tags que não têm nenhum 
comportamento padrão especial: a tag <DIV> ... </DIV> e a tag 
 
11 
<SPAN> ... </SPAN>. O aspecto dessas tags pode ser determinado por 
meio de estilos. 
 
A única diferença entre estas duas tags é que a tag <DIV> causa, 
necessariamente, uma mudança de linha antes e depois de sua utilização, ao 
passo que a tag <SPAN> pode ser utilizada no meio de um parágrafo, sem 
causar nenhuma quebra de linha. 
 
A tag <DIV> pode ser utilizada para definir o estilo de vários parágrafos, sem 
que seja necessário definir um a um o estilo das tags <P> destes parágrafos. 
 
No exemplo a seguir, a tag <DIV> define um parágrafo de cor vermelha, no 
meio do qual foi incluída uma palavra na cor verde: 
<div style=“color: red;”> 
Este é um paragrafo vermelho com um texto 
<span style=“color: green;”> 
verde 
</span> 
no meio 
</div> 
 
Estas duas tags têm uma grande importância em HTML 4 pois servem para 
definir camadas (ou em inglês layers, o que está associado a posicionamento 
dinâmico, um assunto importantepara DHTML- Dynamic HTML). 
 
 
Exercícios: 
 
1. Utilize, nos exercícios 1 a 4 que usam o exemplo atividade da aula 1, as 
possibilidades de definir o estilo por CCS que você aprendeu nesta aula. Faça 
diversas versões do mesmo site, todas com o mesmo conteúdo, mas com as 
aparências mais diversas possíveis de formato. Ficou mais fácil para você 
agora manipular cada versão? 
 
2. Atribua, no exercício anterior, as características de formatação a um arquivo 
separado do anterior. Compare como fica a página agora. Associe o mesmo 
arquivo de estilo a diversas outras páginas suas, padronizando suas aparências. 
 
3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo. 
<style type=“text/css”> 
H1,H2 { color:blue;font-style:italic} 
<--! elementos da classe aviso 
tem aparencia especial --> 
.aviso{ 
 font-weight:bold; 
 background-color:yellow; 
 margin-left:1in; 
 margin-right:2cm; 
 border-color:red; 
 border-width:8px; 
 border-style:solid 
 } 
<--! os tipos H1 e H2 na classe aviso estarao 
centrados --> 
.aviso H1, .aviso H2{text-align:center} 
 
12 
<--! define um elemento especial 
:ID=“P23 --> 
#P23 { 
 text-align:center; 
 text-transform:uppercase; 
 } 
</style> 
<H1>Exemplo de folhas de estilo em cascata 
</H1> 
<div class=“aviso”> 
<H2>Cuidado</H2> 
Esteja atento! Note que chamou-se a atencao com um 
texto em negrito e cores brilhantes. Note ainda que o 
titulo "Cuidado" aparece centrado em italico e azul. 
</div> 
<p ID=“P23”> 
Este paragrafo ficou centrado<br> 
e em letras maiusculas.<br> 
<span style=“text-transform:none”> 
Aqui explicitamente usou-se um estilo inline para se 
sobrepor as maiusculas. 
</span> 
</p> 
 
Após entender o que elas fazem no arquivo, inclua-as na posição adequada. 
Depois modifique o documento de modo que os formatos fiquem em um 
arquivo separado. Inclua no seu computador ambas as formas e compare-as 
(veja o resultado, você mesmo avaliará se ficaram idênticas). 
 
4. Associe o mesmo arquivo de estilo às páginas do exercício 2 e 3. Faça o 
mesmo com diversas outras páginas suas, padronizando suas aparências. As 
mudanças não ficaram mais fáceis agora! 
 
 
Resumo: 
Nesta aula você aprendeu a usar CSS em HTML, ou seja, aprendeu como 
estruturar sua página para ter sua formatação (a forma como ela aparece) 
separada do conteúdo do documento. A vantagem desta estratégia é que agora 
um artista gráfico pode modificar o arquivo CSS e propiciar uma aparência 
melhor, sem tocar em seu código. Pois afinal um layout agradável sempre atrai 
mais a atenção dos visitantes, possibilita que eles encontrem facilmente o que 
desejam ver em sua página e voltem com mais freqüência ao site! Essa 
aparência pode ser associada a um grupo inteiro de páginas e modificada de 
tempos em tempos com muita facilidade. Este é um elemento importante para 
você reduzir seu tempo de manutenção dos sites. O que abre para você 
caminhos para ser um construtor profissional de páginas Web! 
 
Auto-avaliação: 
Esta é uma das aulas mais complexas, ela apresentou um conjunto muito 
grande de novas informações. Você realmente só ficará à vontade com elas 
depois de concluir a execução de um razoável número de atualizações de 
páginas usando CSS. Talvez o mais importante neste ponto seja o 
conhecimento dos caminhos que ela lhe abre e isso você pode antever 
executando bem os exercícios. 
..
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 alinhamentodefinido 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