P. 1
CriacaoWebSites_1_IBPI

CriacaoWebSites_1_IBPI

|Views: 223|Likes:
Publicado porHelder Da Rocha
Apostila que escrevi para o curso Formação Profissional WebDesigner do IBPINET, em 2000.
Apostila que escrevi para o curso Formação Profissional WebDesigner do IBPINET, em 2000.

More info:

Published by: Helder Da Rocha on Feb 28, 2011
Direitos Autorais:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/31/2015

pdf

text

original

1

Criação de
Web
Sites
Web e Internet
Web Design com HTML e CSS
Layout e design de páginas
Helder da Rocha
w
w
w
.
i
b
p
i
n
e
t
.
n
e
t
/
w
d
e
s
i
g
n
e
r

!"#$%&'%(&&&)&*
!"#$"% $' ()*+'




"#$%&'( )*
+*, -$.*/ 0

+*, * 01.*#1*.
+*, )*/$21
3*41(5(2$%/ )* %6#*/*1.%&'(





7*89: "+-;<=><?===@=; AB
Copyright © 2000 por lelder Lima Santos da Rocha. 1odos os direitos reser·ados. Os direitos
do autor sobre esta obra estao protegidos pela Lei 9.610,98 ,Lei de Direitos Autorais,.

Nenhuma parte desta publicaçao podera ser reproduzida ou utilizada em outros cursos sem a
autorizaçao, por escrito, do autor. Alunos, proíessores ou íuncionarios de instituiçoes educa-
cionais ou íilantrópicas podem requerer autorizaçao gratuita para a reproduçao deste material
para uso próprio, ou para uso em treinamentos sem íins lucrati·os. O autor pode ser contata-
do atra·és dos endereços eletronicos hlsr¸uol.com.br ou helder¸ibpinet.net.

Lste li·ro íaz parte da série Criaçao de \eb Sites` de propriedade de lelder Lima Santos da
Rocha. Lsta ediçao destina-se exclusi·amente ao uso como material didatico do curso lorma-
çao \ebDesigner`, da IBPI Soítware e Ser·iços Ltda. e nao pode ser ·endida separadamente
nem utilizada como material didatico de outros cursos.

Lmbora todos os cuidados tenham sido tomados na preparaçao deste li·ro, o autor nao assu-
me responsabilidade por erros e omissoes, ou por quaisquer danos resultantes do uso das in-
íormaçoes nele contidas.

!"# %&'"( http:,,www.ibpinet.net,helder,wd,cws1,

)*+*, "-&'./*01. "2"'/34&5* " /"6&71.( o autor.
)8-&9. -"7'* "-&01.( !"#$%&'%(&&&)&$ ,Primeira ediçao,
:./;*'.( A4 - apostila ,numeraçao de paginas por capítulo,.
<"7+.47=6"2 +./ "7'* '&/*9";( IBPINL1 Sao Paulo
>&/*9"; -"7'* "-&01.( 80 cópias ,juntamente com a ediçao 0` para a IBPINL1,.

R6¯2s Rocha, lelder Lima Santos da, 1968-

Criaçao de \eb sites I - tecnologias de apresentaçao`. 1a. ediçao com tiragem limitada
e autorizada apenas para cursos da IBPINL1 realizados até 31,12,2000.
140 p. A4. Acompanha disquete ou CD de 3 '` ou !"# 7&'" com código e exemplos.
<"+/.-?01.: IBPINL1 - Sao Paulo, SP, Março de 2000.

1. \eb design - criaçao e apresentaçao de conteúdo interati·o para a \orld \ide \eb.
2. l1ML - lyper1ext Markup Language ,linguagem usada para criar paginas,. 3. CSS -
Cascading Style Sheets ,linguagem usada para controlar íorma,. 4. \orld \ide \eb
,ser·iço de recuperaçao de iníormaçoes da Internet, - Programaçao. 5. Internet ,rede de
computadores, meio de comunicaçao, - Programaçao. I. 1ítulo: Criaçao de \eb Sites I
- 1ecnologias de apresentaçao. II. Série.
CDD 005.133

Quaisquer marcas registradas citadas nesta obra pertencem aos seus respecti·os proprietarios.
&&
).4'"@-.
A+/"7"4'*01.
B/"C=5&.
B*/'" D( !"# " E4'"/4"'
DF E4'/.-?01.
GF )/&*01. -" !"# 7&'"7
B*/'" G( H>IJ
DF :?4-*;"4'.7 -. H>IJ
GF B*/=9/*C.7 " #2.5.7
KF J&7'*7
LF E;*9"47
MF :./;*'*01. -" 5*/*5'"/"7 N&42&4" "2";"4'7O
PF Q45./*7 " RS45?2.7
TF >*#"2*7
UF V2";"4'.7 -"+/"5*-.7
WF >"7'"7
B*/'" K( :.2X*7 -" V7'&2.
DF E4'/.-?01.
GF <"9/*7 Y=7&5*7
KF :.4'"7
LF A'/&#?'.7 -" '"Z'.
MF )./"7
PF B/.+/&"-*-"7 -" 52*77&C&5*01.
TF ).4'/.2" -" #2.5.7
&&&
UF B.7&5&.4*;"4'.
WF VZ"/5S5&.7
B*/'" L( <"5?/7.7 A6*40*-.7
DF J*[.?' 5.; '*#"2*7
GF :/*;"7
KF I?2'&;S-&*
LF A++2"'7 \*6*
MF VZ"/5S5&.7
A+]4-&5" A ^ Y&#2&.9/*C&*
&6
A+/"7"4'*01.

!"# -"7&94 ,_"# ~ teia, -"7&94 ~ projeto, é, em inglês, o nome da arte` milenar praticada pelos
seres artrópodes da ordem A/*54"*", ou aracnídeos, mais popularmente conhecidos como as
*/*4X*7!
Lssa seria uma boa deíiniçao para o termo _"# -"7&94` ha 10 anos! loje, !"# -"7&94 é a
arte de tecer um outro tipo de teia, razoa·elmente organizada, para depois liga-la a uma teia
enorme, muito desorganizada e caótica, e que nao é controlada por nenhuma aranha indi·idual:
a !./2- !&-" !"#. !"# -"7&94 é, portanto, a concepçao e projeto de coleçoes de paginas de in-
íormaçao e aplicaçoes interati·as, mantidas no ar` por um programa chamado de ser·idor
!"#, o mesmo que mantém cada site acessí·el atra·és da !./2- !&-" !"#.
Na época em que as aranhas perderam a exclusi·idade da sua arte, a administraçao da
!"# cabia a programadores que precisa·am codiíicar toda a iníormaçao de texto usando uma
linguagem: o l1ML, para depois armazena-las em uma area especial de uma maquina Unix,
onde roda·a um ser·idor \eb. O !"# -"7&94 na época era totalmente dependente do l1ML.
Pouco tempo depois, com a chegada da \eb graíica, as imagens tornaram a teia cibernética
um pouco mais colorida. loje, a arte de criar paginas !"# continua a exigir mais e mais conhe-
cimentos de programaçao... programaçao ·isual! Saber l1ML hoje é menos importante que
saber organizar iníormaçao graíicamente, em um meio dinamico e heterogêneo que tem altura,
largura e proíundidade.
A criaçao das paginas para a !"# hoje se assemelha mais a editoraçao eletronica que a
programaçao. Os programadores nao estao mais codiíicando l1ML. Lles agora se preocupam
com Ja·a, Perl, ASP e outras linguagens de ·erdade`. Sao os designers que tomaram conta da
!"#, e agora eles querem domina-la.
Mas nao é íacil dominar algo que muda todos os dias. Os caminhos do !"# -"7&94 sao
bem diíerentes daqueles seguidos na criaçao para mídia impressa, de onde ·êm muitos -"7&94"/7
de interíace. O \eb designer de·e conhecer nao só as possibilidades do meio onde publicara a
sua iníormaçao, como também, e principalmente, suas limitaçoes. No·as tecnologias nem
sempre podem ser apro·eitadas. O que é melhor, nem sempre é ·ia·el.
A arte do !"# -"7&94 consiste em apro·eitar ao maximo os recursos oíerecidos pela \eb,
garantindo a melhor apresentaçao, na·egabilidade e interati·idade de um \eb site, dentro dos
limites impostos pelo meio. L necessario atrair os ·isitantes e estimula-los a ·oltar outras ·e-
zes. As ·ezes é necessario sacriíicar a qualidade da apresentaçao ou deixar de usar algum recur-
6
so útil de·ido a lentidao da rede ou incompatibilidades de na·egadores - problemas típicos
desse meio. L importante que o \eb designer aprenda a traçar uma linha de equilíbrio entre os
impedimentos tecnológicos e as possibilidades criati·as dessa no·a mídia, para tirar o maior
pro·eito do seu potencial. L preciso estar mais atento as no·as tecnologias, as no·as ·ersoes
dos na·egadores e a demora dos ·elhos na·egadores em desaparecerem totalmente que qual-
quer recurso oíerecido por uma no·a íerramenta de desen·ol·imento. A !"# é aberta e as
tecnologias que a sustentam também sao abertas e gratuitas.
Um !"# -"7&94"/ nao de·e ser limitado pelos recursos tecnológicos que tem a disposiçao,
nem pelas íerramentas que permitem que ele nao precise se preocupar com tais recursos. O
bom !"# -"7&94 começa longe do computador. Planejar a estrutura da teia e sua identidade com
base nos objeti·os a que se destina ,comercio, iníormaçao, promoçao, intranet, captura de
insetos, antes de iniciar a implementaçao libera a criati·idade, preser·a o conceito por tras do
-"7&94 da interíace e diminui os limites impostos pela tecnologia. Por outro lado, conhecer as
tecnologias en·ol·idas e nao se contentar em apenas usar os recursos oíerecidos pelas íerra-
mentas que as escondem é essencial para o !"# -"7&94"/ que deseje dominar a !"#, e nao íicar
eternamente nas maos dos que desen·ol·em tais íerramentas.
O objeti·o deste curso é oíerecer os conhecimentos necessarios para íormar esse tipo de
!"# -"7&94"/, que sabe projetar o ·isual, identidade e estrutura de na·egaçao de um site e ao
mesmo tempo conhece as tecnologias que as suas íerramentas estao gerando, para que possa,
quando íor preciso, supera-las.
6&
B/"C=5&.
Lste material didatico contém textos selecionados e organizados especialmente para o curso
)/&*01. -" !"# %&'"7 E. A íinalidade deste material é ser·ir de apoio ao curso como íonte de in-
íormaçoes teóricas e exercícios.
A íinalidade do curso )/&*01. -" !"# %&'"7 E é capacitar o aluno a desen·ol·er \eb sites
eíicientes, de íacil manutençao, esteticamente atraentes, na·ega·eis, acessí·eis e compatí·eis
com os na·egadores do público-al·o ao qual se destinam. O curso concentra-se nas tecnologi-
as utilizadas para o desen·ol·imento de sistemas de iníormaçao em hipertexto: l1ML e CSS e
também discute aspectos de -"7&94 e acessibilidade.
O curso )/&*01. -" !"# %&'"7 E é o primeiro de uma seqüência de três cursos, de igual du-
raçao, que exploram a maior parte das tecnologias essenciais e de domínio público para criar
\eb sites interati·os. Nao íaz parte do programa desses três cursos o tratamento de imagens
para a \eb, o uso de íerramentas graíicas e de produti·idade, nem o projeto super·isionado
de um site eníatizando critérios de -"7&94. 1ais assuntos, importantes em um programa comple-
to para íormaçao de um \eb designer, poderao ser abordados em outros cursos ,e realizados
na seqüência ou paralelamente.,
` a?" 6.5] b= -"6" 7*#"/
Para ter o melhor rendimento neste curso, ·ocê de·era saber:
usar um computador PC,\indows, Macintosh ou Unix ,copiar arqui·os, remo·er
arqui·os, mudar o nome de arqui·os, criar diretórios, mudar de diretório, rodar apli-
caçoes,.
conectar-se e na·egar na Internet usando um na·egador.
usar um editor de textos para alterar e criar no·os textos.
O laboratório onde este curso sera ministrado em geral só contém um tipo de computa-
dor ,PC, Mac ou Linux - consulte a coordenaçao do curso para saber qual,. Usuarios de outros
sistemas de·erao re·isar as tareías basicas do sistema disponí·el no laboratório antes de iniciar
o curso de íorma a obter o melhor rendimento em sala de aula.
6&&
No \eb site dedicado a este curso ,·eja pagina de 5.+[/&9X', ha links para material adicio-
nal de reíerência, aplicati·os ,para Linux, Macintosh e \indows, usados em sala de aula e al-
ternati·as, programa do curso ,datas, e outras iníormaçoes.
c"75/&01. -. 5.4'"@-.
Lsta apostila consiste de quatro partes. A primeira traz uma introduçao a \eb e Internet, com
a deíiniçao de conceitos essenciais que serao usados ao longo do curso e aspectos importantes
do desen·ol·imento de \eb sites.
A segunda parte trata exclusi·amente da tecnologia l1ML que sera apresentada de íor-
ma interati·a. Lla nao cobre todo o l1ML, mas apenas mostra como usar os principais descri-
tores l1ML e seus atributos mais importantes, destacando o uso de tabelas, ·ínculos e ima-
gens com di·ersos exemplos e ilustraçoes.
A terceira parte introduz a linguagem CSS, usada para criar sites controlados por íolhas
de estilo. Com essa tecnologia é possí·el ter controle quase absoluto sobre a aparência de um
site, com ·antagens que íacilitam a manutençao, tornam o site mais le·e e acessí·el e permite o
suporte a tecnologias interati·as como o Dl1ML ,Dynamic l1ML,.
A quarta e última parte apresenta aspectos a·ançados do l1ML como o uso de tabelas
para organizar o layout de paginas, o uso de imagens para espaçamento, janelas com múltiplos
documentos ,C/*;"7,, imagens mapeadas, audio, ·ídeo, plug-ins e applets Ja·a.
Lsta apostila nao contém tudo sobre l1ML 4.0 e CSS. Para complementa-la ·ocê de·e
íazer o -._42.*- de guias de reíerência completos disponí·eis na Internet. Veja no site deste
curso os endereços onde eles podem ser encontrados. Ao longo do curso, anexos poderao ser
distribuídos ,ou colocados na Internet para -._42.*-, para complementar ou atualizar assuntos
que e·entualmente precisem ser tratados em maior detalhe.
B/.9/*;* -. 5?/7.
O programa do curso cobre a maior parte dos assuntos discutidos nesta apostila, mas nao to-
dos. Alguns assuntos sao temas de outros cursos e estao na apostila apenas para ser·ir de reíe-
rência. O programa abaixo nao é estatico. A ordem e proíundidade dos assuntos abordados em
sala poderao ser modiíicadas pelo instrutor, ·isando o melhor aprendizado e o cumprimento
dos objeti·os do treinamento.
1. IN1RODU(AO A PLA1AlORMA \LB: Conceitos essenciais. >8+&5.7( Princípios de In-
ternet,Intranet, A \eb e a Internet, Protocolos, Ser·iços, A plataíorma \eb, Arqui-
tetura da \eb, Browsers e ser·idores, l11P, l1ML e URI ,URL,. 1estes
2. l1ML - l\PLR1LX1 MARKUP LANGUAGL: Introduçao pratica a linguagem declara-
ti·a usada para a descriçao da estrutura de uma pagina de hipertexto. >8+&5.7( 1ecno-
logias de apresentaçao, l1ML e CSS, lundamentos do l1ML 4, Blocos e paragra-
íos: •P, •ln€, ..., Listas •UL€, •OL€, •LI€, 1exto •B€, •I€, •SPAN€, ...,
6&&&
&Z
Vínculos •A€, Imagens •IMG€, 1abelas •1ABLL€, •1R€, •1D€, •COL€.
1estes e exercícios
3. CSS - lOLlAS DL LS1ILO: Linguagem declarati·a usada para a deíiniçao do estilo e
aparência de um \eb Site ou pagina. >8+&5.7( lundamentos de íolhas de estilo, Re-
gras e Sintaxe, Propriedades do CSS, Cores e imagens de íundo, lontes, Margens e
posicionamento. 1estes e exercícios.
4. RLCURSOS AVAN(ADOS DO l1ML: lrames, imagens mapeadas e recursos de estilo
para sites cujo público-al·o nao suporta l1ML 4 ou CSS. >8+&5.7( Imagens mapea-
das, írames, layout com tabelas, estilos com l1ML. Lxercícios. Projetos usando
l1ML e CSS.
1estes, exercícios e projetos poderao ser propostos para a realizaçao íora do horario de
aula. Reser·e pelo menos algumas horas por semana para dedicar-se a eles. Lxercícios adicio-
nais, além de testes e projetos para a·aliaçao ,obrigatórios em alguns cursos,, estarao disponí-
·eis no \eb site dedicado ao curso ,·eja pagina de 5.+[/&9X',.
IS-&* "2"'/34&5* " *'?*2&d*0e"7
1odos os exemplos, exercícios resol·idos e soluçoes de alguns exercícios propostos estao ou
distribuídos em um disquete ou CD que acompanha este li·ro ou disponí·eis na Internet. Veja
na pagina de 5.+[/&9X' ,logo após a capa desta apostila, qual o endereço na Internet onde os
arqui·os deste curso se encontram disponí·eis para -._42.*-.
)/S'&5*7 " 7?9"7'e"7
Os textos contidos nesta ediçao estao sempre sendo re·isados, atualizados e ampliados perio-
dicamente e cada ·ez que sao utilizados em cursos. Cuidados íoram tomados para garantir a
apresentaçao dos assuntos de íorma clara, didatica e precisa, mas e·entualmente podem esca-
par erros, imprecisoes e trechos de pouca clareza. Sugestoes, críticas e correçoes sao sempre
bem ·indas e podem ser en·iadas por e-mail a hlsr@uol.com.br ou helder@ibpinet.net.
Sua opiniao é muito importante e contribuira para que íuturas ediçoes possam ser cada ·ez
melhores.


lelder L. S. da Rocha
Sao Paulo, 16 de março de 2000.


!"#$%&' )* +*, -#.*/ 0









" #$%"&$"%
!"#$% ' ( )%* % +,$%#,%$
!"#$%&'"
)* +#$,"'-./"*************************************************************************************************************** 0
'-'- .#%/% 012$3#1" 4" +,$%#,%$ -------------------------------------------------------------------------------------------- 5
6 #%4% "7"48917" ----------------------------------------------------------------------------------------------------------------- 5
: 2;#<19%,$= 4" )%* --------------------------------------------------------------------------------------------------------- >
: ?=4%# 4" )%* 7=9= 9%1= 4% 7=9;,17"@A=---------------------------------------------------------------- B
'-C- D=9= E;,71=," " )%* % " +,$%#,%$ ---------------------------------------------------------------------------- B
!#=$=7=F=2 ----------------------------------------------------------------------------------------------------------------------------- B
G,4%#%@=2 +,$%#,%$ -------------------------------------------------------------------------------------------------------------- H
I%#/1@= 4% J=9%2 KLJI ( L=9"1, J"9% I%#/17%M------------------------------------------------------- H
!=#$"2 % 2%#/1@=2 4" +,$%#,%$ ---------------------------------------------------------------------------------------------- N
6 )%* %,$#% =2 2%#/1@=2 4" +,$%#,%$ --------------------------------------------------------------------------------- N
'-5- 6 ?F"$"E=#9" )%*--------------------------------------------------------------------------------------------------------- O
P1?%#$%Q$= ----------------------------------------------------------------------------------------------------------------------------- O
PRST------------------------------------------------------------------------------------------------------------------------------------ O
I%#/14=# PRR!-------------------------------------------------------------------------------------------------------------------'U
VW+2 KVWT2M -----------------------------------------------------------------------------------------------------------------------''
.#=X2%#--------------------------------------------------------------------------------------------------------------------------------'C
R1?=2 S+SG-----------------------------------------------------------------------------------------------------------------------'C
'->- R%7,=F=<1"2 4% 6?#%2%,$"@A=------------------------------------------------------------------------------------'5
PRST----------------------------------------------------------------------------------------------------------------------------------'5
P12$3#17= 4= PRST ----------------------------------------------------------------------------------------------------------'>
PRST > % DII-------------------------------------------------------------------------------------------------------------------'B
YST % YIT-------------------------------------------------------------------------------------------------------------------------'B
'-B- GQ%#7Z71=2 ---------------------------------------------------------------------------------------------------------------------'[
1* !,23./" '% 4%5 62$%7 ******************************************************************************************** )8
C-'- \;"12 E%##"9%,$"2 %Q12$%9 ?"#" 7#1"# % 9",$%# 21$%2] --------------------------------------------'O
G41$=#%2 <#^E17=2 K)_I+)_`M ---------------------------------------------------------------------------------------'O
G41$=#%2 4% $%Q$=----------------------------------------------------------------------------------------------------------------CU
G41$=#%2 4% PRST ------------------------------------------------------------------------------------------------------------CU
C-C- !=# a;% 2% ?#%=7;?"# 7=9 = ?%#E1F 4=2 /121$",$%2]-------------------------------------------------C'
C-5- !=# a;% "?#%,4%# PRST] -----------------------------------------------------------------------------------------C'

C
!"#$% ' ( )%* % +,$%#,%$
!" $%&'()*+,(
- .*/%$01. 2%3$% 4"56$78. 9 2%:0,0# .3 $%#;.3 % 2%:0,0<=%3 %33%,40"03 #%8"40.,"2"3 4.; " )%* %
" +,$%#,%$> ?3 0,:.#;"<=%3 2%3$% 4"56$78. ,@. 3@. %33%,40"03 5"#" " 4#0"<@. 2% 5AB0,"3C ;"3
4.,D%4EF8"3 9 7;" 1",$"B%; G7% 2"#A ;"0.# 5.2%# ". )%* 2%30B,%#C 5.03 %,$%,2%,2. 4.;.
:7,40.," . ;%0. ,. G7"8 0#A 57*804"# 3%73 30$%3C $%#A ;%8D.#%3 4.,20<=%3 2% 2%$%4$"# % 3.8740.F
,"# .3 5#.*8%;"3 G7% 37#B0#%; ," 57*804"<@. % ;",7$%,<@. 2%8%3>
!"!" -'./. 012&3'14 )4 $%&.'%.&
? +,$%#,%$ 9 7;" #%2% ",$0B"> H%; ;"03 2% IJ ",.3 2% 02"2%> K;" 2"3 5%33."3 G7% $%1%
7; 5"5%8 2%40301. ," 37" 4#0"<@.C %;*.#" ,7,4" 3%/" 8%;*#"2. 5.# 03$.C :.0 . 5#%302%,$% 47*"F
,. L02%8 M"3$#.> -3 N3$"2.3 K,02.3 $0,D"; 5"33"2. 5.# 7;" 5.330*0802"2% #%"8 2% "$"G7% ,7F
48%"# 2%5.03 2" 0,3$"8"<@. 2% ;633%03 #733.3 %; M7*" % " 0,$%#80B"<@. 2"3 *"3%3 ;080$"#%3 %;
#%2% :.0 7;" %3$#"$9B0" ;080$"# 5"#" 5#.$%B%# " 4.;7,04"<@. %; 4"3. 2% "$"G7%> N8" 80B"1" ;AF
G70,"3 20:%#%,$%3 %,$#% 30 "$#"193 2% 80,D"3 #%27,2",$%3 2% ;",%0#" G7%C ;%3;. G7% 7;" .7
1A#0"3 *"3%3 :.33%; #%27O02"3 " 5PC "3 .7$#"3 %3$"<=%3 "0,2" 4.,3%B70#0"; 3% 4.;7,04"# %,$#%
30> N,$@.C 4.; ;%2. G7% L02%8 % 3%73 4D"#7$.3 ,748%"#%3 5"#"803"33%; . 303$%;" 2% 2%:%3" 2.
5"63 :.0 4#0"2" " #%2% ?Q!?RNH S5)/4%6.) 7.2.4'60 8'(9.6&2 5:.%6; <.&=('>T> ? #%2% 0,$%#80B.7
1A#0.3 4.;57$"2.#%3 %; "8B7;"3 7,01%#302"2%3 % 4%,$#.3 2% 5%3G703" %,1.8102.3 4.; 5#./%$.3
;080$"#%3> R" 95.4"C 4.;57$"2.# "0,2" %#" 4.03" #"#"> M.;57$"2.# %; #%2%C ;"03 #"#. "0,2">
5 '.). 464)?@164
-3 5#0;%0#.3 737A#0.3 S40%,$03$"3T 73"1"; " #%2% 5"#" $#.4"# ;%,3"B%,3 2% 4.##%0. %8%F
$#U,04. % 80B"#%;F3% #%;.$";%,$% " 4.;57$"2.#%3 203$",$%3> - 3%#10<. $.#,.7F3% $@. V$08 G7%
"3 7,01%#302"2%3 %,1.8102"3 4.;%<"#"; " 80B"# 3%73 2%5"#$";%,$.3C ;%3;. .3 G7% ,@. $0,D";
,"2" " 1%# 4.; . 5#./%$.> R" 294"2" 2% WJC :.0 " 1%O 2" RXLRNHC " #%2% ,"40.,"8 2% 5%3G703"
2.3 N3$"2.3 K,02.3C G7% 4.,%4$.7 .3 40,4. B#",2%3 4%,$#.3 #%B0.,"03 2% 375%#4.;57$"<@. %
5"33.7 $";*9; " :"O%# 5"#$% 2" ?Q!?RNH> ? RXLRNH 3% $.#,.7 %350,D" 2.#3"8 2"3 27"3
#%2%3C 2%5.03 4D";"2" 2% +,$%#,%$>
? RXLRNH 8%1.7 4.,30B. 7;" 8%B0@. 2% 5%G7%,"3 #%2%3 G7% " %8" %3$"1"; 4.,%4$"2"3>
N "330; " +,$%#,%$ :.0 4#%34%,2. % 4#%34%,2.C 3%; ,%,D7;" .#B",0O"<@. 4%,$#"8> Y7"8G7%#
4%,$#. G7% "4D"33% 3%73 3%#10<.3 4.,1%,0%,$%3 5.20" 3% ";"##"# ". ,P ;"03 5#PZ0;. 30;58%3F
I
Parte 1 - \eb e Internet
mente pagando as despesas de uma linha dedicada de dados. Lm pouco tempo, a Internet ja
interliga·a os maiores centros de pesquisa do mundo.
A expansao íoi trazendo no·os ser·iços e outras redes de pesquisa, como a Usenet, a
Bitnet, LARN e redes de BBSs. O crescimento ja era impressionante, mas a popularidade ain-
da era limitada. Grande parte do traíego era acadêmico. Operar um sistema de correio eletro-
nico em geral signiíica·a saber operar um jurassico terminal IBM ou maquina Unix, e ter al-
guma íamiliaridade com suas interíaces hostis. Para transíerir um arqui·o era necessario saber
usar um programa especial ,l1P,, mandar comandos para ele e entender os códigos que ele
retorna·a.
O maior problema na época, maior tal·ez que a complexidade, ja que os usuarios eram
todos acadêmicos, era a desorganizaçao generalizada da Internet. A Internet era um tremendo
caos. Sabíamos que era possí·el transíerir um arqui·o de iníormaçoes de qualquer lugar do
mundo. O problema era como saber se ele existia e onde esta·a!
! #$%&'()*+, -. /)0
A Internet começou a crescer de íorma explosi·a em 1992, com o surgimento da /,%1-
/'-) /)0 - a e·oluçao de um projeto desen·ol·ido por 1im Berners-Lee no laboratório
CLRN em Genebra. A CLRN - Laboratório Luropeu para lísica de Partículas - é uma das
maiores instituiçoes cientííicas do mundo e seus laboratórios estao distribuídos por ·arias ci-
dades localizadas em 19 países da Luropa. Berners-Lee demonstrou como a iníormaçao se
perdia diariamente no CLRN, um ambiente que ele classiíicou como um modelo em miniatu-
ra do resto do mundo em alguns anos`. O sistema proposto, inicialmente chamado de Mesh`
íoi implantado no CLRN no ano seguinte ja com o nome de \orld \ide \eb`.
Berners-Lee esta·a certo. O CLRN era uma miniatura do mundo. loje, 10 anos depois,
a Internet nao é mais a mesma. 1odos os ser·iços da Internet se renderam ao poder da \eb e
a linguagem l1ML, que a sustenta. Até o ser·iço de correio eletronico, campeao de traíego na
Internet por muitos anos, que por muito tempo exigia aplicaçoes especííicas, separadas do
browser, hoje é lido dentro de um browser, atra·és de paginas l1ML.
A \eb conseguiu íinalmente organizar um pouco as iníormaçoes da Internet atra·és do
hipertexto mas íoi só no ano seguinte que começou a tomar conta da Internet com a chegada
do primeiro na·egador graíico: o 234,#.'5 - programa desen·ol·ido por um grupo de estagia-
rios do NCSA - Centro Nacional de Supercomputaçao da Uni·ersidade de Illinois. Pouco de-
pois surgiram ·ersoes para /'*-,6# e 4.5'*+,#7 que, oíerecendo pela primeira ·ez uma intería-
ce graíica para a \eb, acessí·el atra·és de um 89 ou 4.5, trouxe a grande massa de usuarios
domésticos para dentro da rede. Os pro·edores de acesso e iníormaçao comerciais se multipli-
caram, oíerecendo as pessoas comuns o mesmo acesso que antes só tinham as grandes organi-
zaçoes e o meio acadêmico, e a NSlNL1 íinalmente se entregou a iniciati·a pri·ada.
Os criadores do 4,#.'5, entre eles Marc Andreesen, pouco depois de deixar a uni·ersida-
de criaram uma empresa: a :)+#5.;), que íoi pro·a·elmente a empresa que te·e a maior inílu-
ência nos rumos seguidos pela \eb na sua e·oluçao até os dias de hoje.
4
!"#$% ' ( )%* % +,$%#,%$
! #$%&' %( )&* +$,$ ,&-$ %& +$,./-+(01$
-.%/"# 0% $%# /1#2304 3,353"67%,$% 5474 17 /%#8394 03/.4,:8%6 %7 17" #%0% 0% 547.1;
$"04#%/< " )%* $%7 =4>% 17 .".%6 713$4 7"3/ 37.4#$",$%? @6" A 54,B1,030" 547 " .#C.#3"
+,$%#,%$< 0" D1"6 B"E ."#$%? !"#" %F.64#G;6"< ,%7 A 7"3/ ,%5%//G#34 $%# 17 !H? !"#" .1*635"#
3,B4#7"9I%/ "$#"8A/ 0%6"< ,J4 A .#%53/4 /"*%# ,"0" /4*#% .#42#"7"9J4 41 #%0%/? K%5,46423"/
#%5%,$%/ 5474 4 2&34$'5 6$,#.3&' LMHN ( A 17 $%#73,"6 3,$%632%,$% ."#" " )%*< $%6%B4,%/ 5%61;
6"#%/ 547 ,"8%2"04#%/ %7*1$304/ % " #%0% )&*78 74/$#"7 D1% " )$'9% )-%& )&* %/$G 0%/$3;
,"0" " .#%%,5=%# $404/ 4/ %/."94/ 0" 7:03" 0% 03B1/J4< ,J4 /% 6373$",04 OD1%6%/ D1% .4//1%7
17 547.1$"04#?
- )%*< 0%//" B4#7"< .4//13 17 .4$%,53"6 3,321"6G8%6 ," =3/$C#3" 0"/ $%6%5471,35"9I%/? P
5"."E 0% /%#83# 0% .4#$" 0% %,$#"0" ,J4 /C " $404/ 4/ /%#8394/ 0" +,$%#,%$ 7"/ $"7*A7 3,8"03#
" .#"3" 04/ $#"03534,"3/ /%#8394/ 0% 84E L$%6%B4,%N< $%6%83/J4< #G034 % 7:03"/ 37.#%//"/< /%7 B"6"#
04 37."5$4 D1% %/$G $%,04 03#%$"7%,$% ,4/ =G*3$4/ 0" /453%0"0%< 710",04 "/ #%2#"/ 04 54;
7A#534 % 0"/ #%6"9I%/ =17","/?
Q3B%#%,$% 04/ 7%34/ $#"03534,"3/ 0% 5471,35"9J4 0% 7"//"< " )$'9% )-%& )&* A 17" 7:;
03" 0%745#G$35" L3/$4 A 0%74,/$#"04 .%64 B#"5"//4 0"/ $%,$"$38"/ 0% 54,$#46% 0" 3,B4#7"9J4
.4# 248%#,4/ $4$"63$G#34/?N R ."#$353.",$% 0" 5471,30"0% 83#$1"6 ,J4 .#%53/" .4//13# 17" %/$";
9J4 03B1/4#"< 17" 54,5%//J4< 17" 2#GB35" % ,%7 /%D1%# 17 547.1$"04# ."#" .40%# .1*635"#
/1" 3,B4#7"9J4 % 3,B61%,53"# /1" "103S,53"< >G D1% %F3/$%7 .#48%04#%/ 0% "5%//4 % =4/.%0%3#4/
0% 3,B4#7"9I%/ D1% ,"0" 54*#"7? K404/ .40%7 #%5%*%# "/ 3,B4#7"9I%/ 0% $404/? T1"6D1%#
17 .40% .#48%# 3,B4#7"9J4? R .40%# 0" 3,B4#7"9J4 %/$G ,"/ 7J4/ 0% $404/ 4/ D1% .10%#%7
$%# 17 %/."94 ," K%3"< % ,J4 7"3/ ".%,"/ 547 "D1%6%/ D1% 54,$#46"7 4/ 7%34/ 0% 03B1/J4 $#";
03534,"3/?
:;<; 6$,$ =./+-$/( ( )&* & ( >/3&'/&3
H474 0%8% $%# B35"04 56"#4 /% 845S 6%1 " =3/$C#3" 0" +,$%#,%$< 4/ $%#74/ )&* % >/3&'/&3
,J4 /J4 /3,U,374/? - )$'9% )-%& )&* A 4 ,47% 04 ?&'@-0$ 7"3/ .4.16"# 0" +,$%#,%$? !4# %//%
74$384< A B#%DV%,$%7%,$% 54,B1,030" 547 " .#C.#3" +,$%#,%$? >/3&'/&3< .4# /1" 8%E< A 4 ,47%
0"04 "4 54,>1,$4 0% 547.1$"04#%/< .#48%04#%/ 0% "5%//4< /"$A63$%/< 5"*4/ % /%#8394/ D1% B4#;
7"7 17" '&%& ,./%-(9 *"/%"0" %7 17" 546%9J4 0% #'$3$+$9$? %& +$,./-+(01$ 54,=%5304/ 5474
KH!W+!? @//" 03/$3,9J4 .40% B"E%# .415" 03B%#%,9" ."#" D1%7 ".%,"/ ,"8%2" .%6" )%* 7"/ A
%//%,53"6 ."#" D1%7 .#%$%,0% 0%/%,8468%# % 54645"# ,4 "# .G23,"/ % ".635"9I%/?
A'$3$+$9$?
P "$#"8A/ 0% .#4$45464/ 0% 5471,35"9J4 D1% 17 547.1$"04# .40% /% 5471,35"# 547
41$#4 "$#"8A/ 0% 17" 63,=" $%6%BU,35" 41 .6"5" 0% #%0% /%7 D1% 4 1/1G#34 .#%53/% /% .#%451."#
%7 /"*%# D1"6 4 7%34 B:/354 D1% %/$G /%,04 1$363E"04? R /3/$%7" )3,04X/ .4//13 .#4$45464/
D1% .%#73$%7 B"5367%,$% 3,$%#632"# 547.1$"04#%/ #40",04 )3,04X/ %,$#% /3? R/ 7%/74/ .#4;
$45464/ .40%7 ,J4 /%#83# ."#" B"E%# 547 D1% 17" 7GD13," )3,04X/ /% 5471,3D1% 547 17"
Y
Parte 1 - \eb e Internet
maquina Unix ou Macintosh, pois essas maquinas possuem arquiteturas diíerentes. 1CP,IP é
uma suite de protocolos padrao que íoi adotado como língua oíicial` da Internet. Para íazer
parte da Internet, um computador precisa saber se comunicar em 1CP,IP. 1odas as operaçoes
de rede sao traduzidas para 1CP,IP antes que possam íuncionar na Internet.
Protocolos 1CP,IP atuam em ·arios ní·eis ou camadas dentro de uma rede ou compu-
tador. Um grupo de protocolos lida com os detalhes da rede íísica, como a con·ersao dos da-
dos para que possam ser en·iados pela linha teleíonica ou cabos de rede. Sao chamados de
protocolos da camada !"#$%&. Uma segunda classe de protocolos ser·e para organizar geograíi-
camente a rede, atribuindo a cada pedaço de iníormaçao que circula por ela um endereço de
origem e destino. Lsses sao os protocolos de ní·el de '()(. Garantir que as iníormaçoes che-
gam ao seu destino inteiras e na ordem correta é uma tareía realizada por uma classe de proto-
colos chamados de protocolos de *'&+#,-'*(. linalmente, ha protocolos que se preocupam ape-
nas com a comunicaçao entre aplicaçoes rodando em maquinas diíerentes. Lsses sao os proto-
colos de ní·el de &,.$%&/0-.
Para que qualquer iníormaçao na Internet saia de um computador e chegue até outro,
precisara ser transíormada por esses quatro tipos de protocolos em seqüência. Cada camada
íragmenta ou transíorma os dados mais e mais até que estejam em um íormato que possa ser
usado pelo protocolo seguinte ou adequado a transmissao pela rede. Ao chegar do outro lado,
os dados sao decodiíicados na ordem in·ersa. A relaçao abaixo apresenta um resumo desses
quatro tipos de protocolos ,com as siglas de alguns deles entre parênteses,:
1&2&)& 4 52&$# &.*&67 protocolos de aplicaçao - oíerecem ser·iços como acesso remo-
to ,1elnet,, e-mail ,SM1P, POP3,, transíerência de arqui·os ,l1P,, ser·iço de no-
mes ,DNS,, ser·iço \eb ,l11P, entre outros. Lidam com a comunicaçao aparente
entre duas aplicaçoes rodando em computadores diíerentes.
1&2&)& 87 protocolos de transporte - realizam a transíerência dos dados organizados
em pacotes` de uma maquina para outra. A transíerência pode ser coníia·el ,1CP,
ou nao-coníia·el ,UDP,. 1ransíerências nao coníia·eis sao mais rapidas e por isso
sao usadas para transmitir audio e ·ídeo eíicientemente.
1&2&)& 97 protocolos de ní·el de rede - identiíicam as maquinas e pacotes de iníor-
maçao atra·és de endereços ,IP, de origem e destino, íormados por códigos distintos
como 200.231.19.1
1&2&)& :7 protocolos da camada íísica - realizam a interíace entre as camadas anteri-
ores e o meio de transmissao que pode ser íormado por linhas teleíonicas ,PPP,
SLIP, ...,, placas e cabos de rede, transmissores e receptores de radio e iníra·erme-
lho, links de satélite, etc.
6
Parte 1 - \eb e Internet
A íigura abaixo ilustra a transíerência de iníormaçoes entre computadores, passando pe-
las 4 camadas interligadas pelos protocolos 1CP,IP:
!""#
"$#
%#
###
!""#
"$#
%#
###
$&'()*(
+(,-'./,
0')12 *(&(45)'62
%)*(,)(*
0')12 *(&(45)'62
$/78)'629:/
;<2,()*(
!"#$%$&'( *"+$%"$+
Um dos protocolos mais importantes da suite 1CP,IP é o protocolo de ní·el de rede IP
- *"+$%"$+ ,%'+'-'.. Lle deíine a /'%01 #$ $"#$%$&10$"+' que permite a localizaçao de um computador
na Internet, atra·és de um conjunto de dígitos chamado de $"#$%$&' *,. Qualquer maquina aces-
sí·el atra·és da Internet tem um endereço IP $2-.3(45'. Lsse endereço pode ser +$06'%7%4' ou
6$%01"$"+$. Quando ·ocê se conecta a um pro·edor ·ia linha teleíonica, ele atribui um número
IP temporario a sua maquina que permitira que ela íaça parte da Internet enquanto durar a sua
sessao no pro·edor. Só assim é possí·el receber iníormaçoes em um browser ou en·iar e-mail.
Computadores que hospedam paginas \eb e que oíerecem outros ser·iços pela Internet preci-
sam de um endereço IP /42', para que ·ocê possa localiza-los a qualquer hora. Por exemplo,
200.231.191.10 é o endereço IP da maquina onde esta localizado o ser·idor \eb do IBPINL1
em Sao Paulo. Você pode localiza-lo digitando http:,,200.231.191.10, no campo de endereços
do seu na·egador.
8$%54&' #$ 9'0$( :;98 < ;'014" 910$ 8$%54-$=
Lmbora cada computador seja identiíicado de íorma exclusi·a atra·és de um endereço
IP, nao é dessa íorma que costumamos localiza-los na Internet. Um dos ser·iços íundamentais
ao íuncionamento da Internet é o ($%54&' #$ "'0$( #$ #'0>"4'. Lsse ser·iço é oíerecido por ·arias
maquinas espalhadas pela Internet e que guardam tabelas que associam o "'0$ de uma maquina
ou de uma rede a um endereço IP. Quando ·ocê digita o nome de uma maquina no seu brow-
ser ,por exemplo, ???@4A64"$+@"$+,, o browser primeiro tenta localiza-la consultando uma outra
maquina ,cujo endereço IP o browser ja conhece, que oíerece o ser·iço de nomes. Lssa ma-
quina consulta outros ser·iços de nomes espalhados pela Internet e em pouco tempo de·ol·e
o endereço IP correspondente ao nome solicitado ,???@4A64"$+@"$+ de·ol·era 200.231.191.10,.
Se o sistema de nomes íalhar, o browser nao conseguira o número IP que precisa e assim
nao localizara a maquina correspondente ,mesmo que ela nao esteja íora do ar,.
¯
Parte 1 - \eb e Internet
!"#$%& ( &(#)*+"& ,% -.$(#.($
A Internet existe ha mais de três décadas. Na maior parte desse período ela era restrita
aos meios acadêmicos e militares e oíerecia poucos ser·iços. Os principais &(#)*+"& utilizados na
rede eram a $#%.&/(#0.1*% ,( %#23*)"& entre computadores ,usando aplicaçoes que se comunica·am
atra·és do protocolo l1P - 4*5( 6#%.&/(# !#"$"1"5,, o 1"##(*" (5($#7.*1" e a (835%+9" ,( $(#8*.%5, que
permitia o acesso a computadores remotos. Lsses ser·iços eram oíerecidos em algumas ma-
quinas onde roda·am programas ser·idores, permanentemente no ar aguardando a conexao de
um cliente em uma de suas :"#$%& ,( 1"83.*1%+9".
Uma mesma maquina pode oíerecer ·arios ser·iços, desde que em portas diíerentes. I-
magine que o endereço IP de uma maquina seja como o endereço de um prédio de escritórios.
Localizando o prédio, ·ocê procura por um determinado ser·iço que é prestado por uma em-
presa. Pode ha·er ·arias empresas no prédio. Cada uma tem uma sala identiíicada por um nú-
mero. O número da sala é analogo a porta de ser·iços de uma maquina. Para íacilitar a ·ida
dos clientes, ·arias portas, identiíicadas por um número, íoram padronizadas, ou seja, em
computadores diíerentes, ·ocê geralmente encontra os mesmos ser·iços localizados em portas
com os mesmos números.
Para ter acesso a um ser·iço é preciso ter uma aplicaçao 15*(.$( apropriada que saiba con-
·ersar na língua ,protocolo de ní·el de aplicaçao, de uma aplicaçao &(#)*,"#% ,programa que
oíerece o ser·iço na porta buscada pelo cliente,. Como as portas sao padronizadas, um cliente
muitas ·ezes só precisa saber o nome ou endereço IP da maquina que tem determinado ser·i-
ço, pois o número da porta ele supoe que seja o número padrao.
Se ·ocê usa o -.$(#.($ ;<:5"#(# para ter acesso ao site do IBPINL1 ou o =3$5""> ;<:#(&&
para ler seu e-mail no IBPINL1, é possí·el que ·ocê esteja se conectando a mesma maquina.
O =3$5""> ;<:#(&& se conectara a porta 110 para ·eriíicar suas mensagens. Na hora de en·iar,
utilizara os ser·iços da porta 25. O -.$(#.($ ;<:5"#(# buscara a ?"8( :%@( do IBPINL1 na porta
80, mas se ·ocê decidir íazer compras e utilizar o ser·idor seguro do IBPINL1, seu browser
utilizara a porta 443.
A B(C (.$#( "& &(#)*+"& ,% -.$(#.($
O ser·iço de emulaçao de terminal remoto - 6(5.($, requer que o usuario conheça o sis-
tema remoto, tenha permissao de acesso e saiba utiliza-lo. O acesso é orientado a caracter e
pode ser íeito em MS-DOS. No início da popularizaçao da Internet, ·arios ser·iços eram oíe-
recidos apenas ·ia 6(5.($, que íunciona·a como uma espécie de cliente uni·ersal. O usuario,
ligado a Internet, poderia pesquisar o banco de dados da Nasa, bater papo com usuarios remo-
tos e pesquisar repositórios de iníormaçoes pelo mundo aíora. A B"#5, B*,( B(C surgiu inici-
almente como mais um desses ser·iços, que poderia ser utilizado atra·és de um cliente 1elnet
apontando para o endereço inío.cern.ch. O ser·iço ainda existe, por razoes históricas. L possí-
·el acessa-lo ·ia linha de comando no DOS ou Unix usando:
telnet info.cern.ch
8
Parte 1 - \eb e Internet
L um acesso orientado a caracter e na época concorria com outros ser·iços de iníorma-
çoes mais populares como o !"#$, o %&'()* e o "*+(,), que também tenta·am organizar as
iníormaçoes da Internet.
O acesso direto ao ser·idor, usando um cliente conectado a sua porta de comunicaçao é
sempre mais rapido e eíiciente que o acesso ·ia 1elnet. Os primeiros clientes \eb eram orien-
tados a caracter ,nao exibiam íontes nem imagens, e roda·am apenas em ambientes Unix. loi
somente com o surgimento do -./&01,+ que a \eb se tornou graíica ,e começou a se tornar
popular., O /&01,+ abriu caminho para ·arios outros clientes \eb, hoje chamados de browsers
ou na·egadores, e que passaram a ser o primeiro ,e as ·ezes único, contato de muitos usuarios
com a Internet.
Os browsers de hoje nao sao mais apenas clientes \eb. Lles lêem paginas locais, en·iam
e-mail, permitem que o usuario leia grupos de notícias, e-mail, execute aplicaçoes locais, acesse
aplicaçoes remotas e di·ersos outros ser·iços da Internet. O browser moderno é um +2,)34)
63,7)*012 para toda a Internet, embora esse acesso ocorra atra·és da !&*28 !,8) !)9.
:;<; " '2141=&*>1 !)9
A \orld \ide \eb é um ser·iço 1CP,IP baseado no '*&4&+&2& 8) 3?7)2 8) 1'2,+1@A& l11P
,BC')*D)E4 D*130=)* F*&4&+&2, - F*&4&+&2& 8) D*130=)*G3+,1 8) B,')*4)E4&. A plataíorma \eb é o meio
·irtual íormado pelos ser·idores l11P ,ser·idores \eb que mantém sites,, clientes l11P
,browsers, e protocolo l11P ,a língua comum entre o cliente e o ser·idor,.
B,')*4)E4&
B,')*4)E4& é uma íorma nao linear de publicaçao de iníormaçoes onde pala·ras que apare-
cem no texto podem le·ar a outras seçoes de um documento, outros documentos ou até outros
sistemas de iníormaçao, íugindo da estrutura linear original de um texto simples. O hipertexto
baseia-se em ligaçoes entre dois pontos chamados de H3+&*10. As ligaçoes entre as ancoras sao
chamadas de 7?3+62&0 ,2,3I0,. Vínculos de hipertexto sao implementados em textos publicados na
\eb usando uma linguagem declarati·a chamada BD/J . BC')*D)E4 /1*I6' J13K61K).
BD/J
l1ML é usada para >1*+1* um arqui·o de 4)E4& 0,>'2)0 ,texto simples é texto sem íorma-
taçao alguma, ·isualiza·el em L612L6)* editor de textos,. Se um arqui·o de texto simples receber
uma extensao de nome de arqui·o .html` ou .htm`, um na·egador como o Internet Lxplo-
rer ira tentar interpreta-lo como l1ML. Dentro do texto, pode-se deíinir descritores ,ou co-
mandos l1ML, entre os símbolos ·` e ·`:
!"#$Arquivo de texto!%"#$
!&$Este é o !'$primeiro!%'$ parágrafo.!%&$
9
Parte 1 - \eb e Internet
Os descritores só serao ·isí·eis quando o arqui·o íor ·isualizado em um editor de tex-
tos ,como o !"#$# &' (#)*+ do \indows,. Ao ser ·isualizado em um programa capaz de enten-
der l1ML, apenas o texto aparece, com uma aparência determinada pelos descritores:
!"#$%&' )* +*,+'
Lste é o ,-./'.-# paragraío.
O texto com marcadores é chamado $0&.1#23#4)' 5678. O código-íonte é usado para
produzir a pagina ·isualizada o browser que é chamada de ,91.4* 5678 ou ,91.4* :';.
O browser, por ser capaz de exibir di·ersos tipos de iníormaçao, depende totalmente da
'<)'4+=# &# *->?.@# para saber o que íazer com ele. Se a extensao .htm` ou .html` nao esti·er
presente ou se o arqui·o ti·er a extensao .txt`, o browser exibira o código-íonte.
Além da íormataçao da pagina, o l1ML é responsa·el também pela inclusao de imagens
e deíiniçao dos links que permitem a na·egaçao em hipertexto.
A'-@.&#- 566B
O ser·iço l11P íunciona de íorma semelhante ao ser·iço C6B 2 C."' 6-*4+3'- B-#)#$#"
,protocolo de comunicaçao usado na \eb para operaçoes de transíerência de arqui·os,. Am-
bos oíerecem aos seus clientes um +.+)'/* &' *->?.@#+ @.-)?*" onde podem localizar -'$?-+#+ ,arqui-
·os, programas, etc., e transíeri-los de um computador para outro. O sistema ·irtual pode ter
uma D.'-*->?.* própria e totalmente diíerente do +.+)'/* &' *->?.@#+ -'*" &# $#/,?)*&#-E ao qual esta
·inculado. Geralmente um ser·idor tem acesso a uma area restrita da maquina e só permite a
·isualizaçao dos arqui·os la contidos. O sistema de arqui·os ·irtual usa uma notaçao diíerente
daquela usada pelo sistema real. Por exemplo, considere o seguinte sistema de diretórios no
\indows:
C:\
C:\Windows
C:\Documentos
C:\Documentos\Web\
C:\Documentos\Web\Imagens
C:\Documentos\Web\Videos
Suponha que um ser·idor l11P íoi instalado nessa maquina. Na instalaçao, ele é coníi-
gurado para administrar um sistema de diretórios a partir de um certo diretório. Suponha que
esse diretório é C:\Documentos\Web\. Para o ser·idor, isto é seu diretório raiz. No sistema de
diretórios ·irtual, o diretório raiz de um ser·idor é chamado de , ,barra,. O sistema de arqui-
·os ·irtual ,a parte que um browser podera ter acesso, é:
/ (C:\Documentos\Web\)
/Imagens (C:\Documentos\Web\Imagens)
10
Parte 1 - \eb e Internet
/Videos (C:\Documentos\Web\Videos)
Um browser jamais tera acesso ao diretório \indows, por exemplo. A principal íunçao
de um ser·idor \eb é, portanto, !"#$%$&'(!( um sistema de arqui·os e diretórios ·irtual e !')%")(
+ (),-$&$./)& "0& 12$)%')& l11P ,os browsers,, que, na maior parte das ·ezes, en·iam comandos
l11P pedindo que o ser·idor de·ol·a um ou mais arqui·os localizados nesses diretórios. Os
pedidos sao íeitos atra·és de uma sintaxe especial chamada de URI.
345& 6347&
8
9
1odas as comunicaçoes na plataíorma \eb utilizam uma sintaxe de endereçamento
chamada 345 : 3%$;0(# 4)&0-(1) 5")%'$;$)( - para localizar os recursos que sao transíeridos. O
ser·iço l11P depende da URI que é usada para localizar ,-!2,-)( 10$&! na Internet. Contém
duas iníormaçoes essenciais: 1, COMO transíerir o objeto ,o protocolo,, 2, ONDL encontra-
lo ,o endereço da maquina e o caminho ·irtual,. URIs tipicamente sao constituídas de três par-
tes:
mecanismo ,protocolo, usado para ter acesso aos recursos ,geralmente l11P,
nome da maquina ,precedido de //, onde o ser·iço remoto é oíerecido ,e a porta, se
o ser·iço nao esti·er em uma porta padrao, ou outro nome atra·és do qual o ser·iço
possa ser localizado ,sem //,.
nome do recurso ,arqui·o, programa, na íorma de um caminho ,no sistema de ar-
qui·os ·irtual do ser·idor, onde se possa encontra-lo dentro da maquina.
Sintaxe típica:
protocolo://maquina:porta/caminho/recurso
As URIs mais comuns sao os endereços da \eb, que utilizam o mecanismo l11P para
realizar a transíerência de dados:
http://www.maquina.com.br/caminho/para/minha/página/texto.html
Veja algumas outras URLs:





ftp://usuario:senha@maquina.com/pub/arquivo.doc
Acesso a ser·idor l1P que exige usuario e senha para íazer download de arqui·o.doc
nntp://news.com.br/comp.lang.java
Acesso a ser·idor de %)<&=(0->& para ler o grupo comp.lang.java
news:comp.lang.java
Acesso ao grupo comp.lang.ja·a atra·és de ser·idor ");!-2' ,deíinido localmente,
http://www.ibpinet.net/
Acesso a pagina ");!-2' disponí·el no diretório raiz do ser·idor \eb de
www.ibpinet.net

1
URIs também sao írequentemente chamadas de URLs ,Uniíorm Resource Locators,. A URL é um tipo
particular de URI mas, para a nossa discussao, essa distinçao é irrele·ante. A documentaçao l1ML
,especiíicaçao, sempre reíere-se a essa sintaxe como URI.
11
!"#$% ' ( )%* % +,$%#,%$
http://www.algumlugar.com:8081/textos/



-.%//0 1 2345," !"#$%&' 65/20,78%9 ,0 65#%$:#50 $%;$0/ 60 /%#8560# )%* <=% #06" ," 20#$"
>?>' 6" @3<=5," AAAB"94=@9=4"#B,%$
http://www.busca.com/progbusca.exe?opcoes=abc&pesquisa=dracula
!"//"4%@ 6% 2"#C@%$#0/ 6% 2%/<=5/" 2"#" 2#04#"@" 6% *=/." 2#04*=/."B%;% <=% $%#3 /="
%;%.=DE0 5,5.5"6" 2%90 /%#8560# FGG! <=% #06" ," 20#$" >? H!"#$%&'I 6% AAAB*=/."B.0@B
http://www.ibpinet.net/helder/dante/pt/inferno/notas_4.html#cesar
-.%//0 1 =@" /%DE0 6" 2345," FGJK ,0$"/LMBN$@9 56%,$5O5."6" .0@0 P.%/"#QR 90."95S"6"
,0 /=*65#%$:#50 85#$="9 /helder/dante/pt/inferno/ 60 /%#8560# )%* 6%
www.ibpinet.netB
mailto:helder@ibpinet.net
-.%//0 1 T",%9" 6% %,850 6% %U@"59 60 .95%,$% 6% .0##%50 %9%$#V,5.0 90."9B
()*+,")
W *#0A/%# X =@ 2#04#"@" <=% /%#8% 6% 5,$%#O".% =,58%#/"9 " $060/ 0/ /%#85D0/ <=% 20U
6%@ /%# 0O%#%.560/ 85" )%*B Y 2"#" " 29"$"O0#@" )%* 0 <=% 0 /5/$%@" 02%#".50,"9 H./0!*+,R
1/0%2R 3$4I X 2"#" 0 .0@2=$"60#B - 2#5,.52"9 O=,DE0 6% =@ *#0A/%# X &") % %;5*5# 0 .0,$%Z60
6% =@" 2345," )%*B - @"50# 2"#$% 60/ *#0A/%#/ $"@*X@ X ."2"S 6% %;5*5# 83#50/ 0=$#0/ $520/
6% 5,O0#@"DE0 .0@0 658%#/0/ O0#@"$0/ 6% 5@"4%,/R 876%0/R %;%.=$"# /0,/ % #06"# 2#04#"@"/B
[@ *#0A/%# 4%#"9@%,$% X =/"60 .0@0 4&/"0'" 5667 ( "295."DE0 6% #%6% <=% %,85" #%<=5U
/5D\%/ " =@ /%#8560# FGG! % #%.%*% 0/ 6"60/ H=@" 2345," FGJKR =@" 5@"4%@R =@ 2#04#"U
@"I 2"#" %;5*5DE0R %;%.=DE0 0= !*+0&*$!B ]#0A/%#/ $"@*X@ 206%@ /%# =/"60/ *##8&/0" .0@0
"295."DE0 90."9 60 /5/$%@" 02%#".50,"9 2"#" ,"8%4"# %@ /5/$%@"/ 6% N52%#$%;$0 .0,/$#=760/ .0@
"#<=580/ FGJK H/%@ 2#%.5/"# 6% /%#8560# FGG!IB ^%//% ."/0R ,E0 /% .0@20#$"@ .0@0 .95%,U
$%/ FGG! HT3 <=% ,E0 %/$E0 #%"95S",60 02%#"D\%/ %@ #%6%I @"/ "2%,"/ .0@0 9/,%$&/:$!*)", !"
;<!/$ /0'")$'/9$ ."2"S%/ 6% 85/="95S"# FGJKR 5@"4%,/R /0,/R 2#04#"@"/R %$.B
_0@0 0/ *#0A/%#/ 2#%.5/"@ 5,$%#2#%$"# 83#50/ $520/ 6% .:6540 H.:6540 6% 5@"4%,/ `+aR
b!c`R .:6540 6% 2#04#"@"/ =$9$ % >&$,?R .:6540/ 6% $%;$0 FGJK 0= $%;$0 /5@29%/I X 2#%.5/0
<=% %9% /"5*" 56%,$5O5."# 0/ 6"60/ <=% #%.%*% 60 /%#8560#B +/$0 ,E0 X " @%/@" .05/" <=% 56%,$5U
O5."# =@ "#<=580 ."##%4"60 60 65/.0 90."9R 0,6% %9% 206% 56%,$5O5."# 0 $520 "$#"8X/ 6" %;$%,/E0B
d=",60 0/ 6"60/ .N%4"@ "$#"8X/ 6" #%6%R " %;$%,/E0 ,E0 /54,5O5." ,"6"B W /%#8560# 2#%.5/"
5,O0#@"# "0 *#0A/%# 0 <=% %9% %/$3 %,85",60B ^" )%*R 5/$0 X O%5$0 "$#"8X/ 6% =@" /5,$";% 2"U
6#E0 2"#" 6%O5,5# $520/ .N"@"6" 3@3A U 3%&'/B$)' @0'")0"' 3$/& A2'"0,/*0,B
6/B*, 3@3A
J+Jc X =@" /5,$";% =,58%#/"9 2"#" 56%,$5O5."# $520/ 6% 6"60/ 0#545,"9@%,$% =$595S"6" 2"U
#" 2%#@5$5# 0 %,850 6% "#<=580/ ",%;"60/ 85" %U@"59B W /%#8560# )%* 20//=5R 5,$%#,"@%,$%R
$"*%9"/ <=% #%9".50,"@ 0/ $520/ 6% 6"60/ H," /5,$";% J+JcI .0@ " %;$%,/E0 60/ "#<=580/ 20#
%9% 4%#%,.5"60/B d=",60 %9% %,85" =@ .0,T=,$0 6% *e$%/ 2"#" 0 *#0A/%#R %,85" ",$%/ =@ 4$C"D$8
&?* H/%@%9N",$% "0 ."*%D"9N0 6% %U@"59I 5,O0#@",60 0 0E;")* !" CF'", %,85"60/ % 0 '/B* 3@3A
'f
Parte 1 - \eb e Internet
dos dados para que o browser saiba o que íazer com a iníormaçao. A sintaxe MIML tem a
seguinte íorma:
tipo/subtipo
O !"#$ classiíica um conjunto de bytes como imagens, textos, ·ídeos, programas ,aplica-
çoes,, etc. O %&'!"#$ iníorma características particulares de cada tipo. Nao basta saber que o
arqui·o é uma imagem, é preciso saber qual o ($)*+!$, pois o códigos usados para produzir
imagens de mesma aparência graíica podem diíerir bastante entre si. 1anto no ser·idor como
no browser ha tabelas que relacionam extensoes de arqui·o a tipos MIML:
image/jpeg .jpe, .jpg, .jpeg
image/png .png
image/gif .gif
text/html .html, .htm, .jsp, .asp, .shtml
text/plain .txt
x-application/java .class
,-.- 0123$4$5"+% 61 7#)1%13!+89$
As tecnologias utilizadas na plataíorma \eb podem ser classiíicadas de acordo com sua
íinalidade em !123$4$5"+% 61 +#)1%13!+89$ e !123$4$5"+% "3!1)+!":+%. As tecnologias de apresentaçao sao
aquelas que se destinam unicamente a íormataçao e estruturaçao das paginas \eb. Podem ser
usadas também para construir a interíace de aplicaçoes \eb no browser. Os principais padroes
em uso atualmente sao l1ML, CSS, XML e XSL. As tecnologias interati·as sao as que permi-
tem o desen·ol·imento de aplicaçoes e paginas com alto ní·el de interati·idade com o usuario.
Lm geral consistem da combinaçao de uma linguagem de programaçao com uma arquitetura
ou modelo que possibilita a sua integraçao com uma pagina l1ML ou ser·idor l11P. Po-
dem, portanto, executar do lado do ser·idor ,como CGI, ASP, ADO, Ser·lets, ISAPI, JSP,
PhP, Cold lusion e Li·e\ire, ou do lado do cliente ,como Ja·aScript, Dl1ML, Ja·a Applets,
Acti·eX e VBScript,.
;0<=
l1ML - ;>#1)01?! <+)@&# =+35&+51 é a linguagem uni·ersal da \eb. L atra·és dela que a in-
íormaçao disponí·el nas paginas da \\\ pode ser acessada por maquinas de arquiteturas e
sistemas operacionais diíerentes. Nao é uma linguagem de programaçao com a qual se possa
construir algoritmos, mas uma linguagem declarati·a que ser·e para organizar iníormaçoes em
um arqui·o de textos que sera ·isualizado em um browser. Deíine uma coleçao de elementos
para marcaçao ,deíiniçao de estrutura, de texto. Se ·ocê, no passado, ja usou um editor de
textos como A$)6B!+) ou C+)!+ C1)!+, de·era se sentir em casa` com l1ML. Coo íoi mencio-
nado anteriormente, um +)D&":$ ;0<= é um arqui·o de !1?!$ %"*#41% recheado de marcadores
que se destacam do texto pelos caracteres especiais "·" e "·".
13
!"#$% ' ( )%* % +,$%#,%$
-./0$%1 23#/"0 4/,56"5%,0 7"#" 89#1"$":;9 <% $%.$90= >6"4?6%# $%.$9 ?6% "7"#%@% 89#1"A
$"<9 B@91 89,$%0C @9#%0C $"1",D90E %1 61 @9176$"<9# $%1 61" 4/,56"5%1 <% 89#1"$":;9
79# $#30= F 1"/9#/" 0;9 4/,56"5%,0 7#97#/%$3#/"0 ?6% 0G 86,@/9,"1 %1 098$H"#%0 %07%@I8/@90
B$%.$90 %1 89#1"$9 !"#$C 79# %.%1749E= -./0$%1 "456,0 89#1"$90C 79#J1C ?6% 0% $9#,"#"1
7"<#K%0C 0%#2/,<9 *"0/@"1%,$% 7"#" #%"4/L"# @9,2%#0K%0 %,$#% 90 89#1"$90 7#97#/%$3#/90
BMNOP % QRSC !90$M@#/7$C R%TC !USE= VROP J 61 89#1"$9 %&'()*" B,;9 7%#$%,@% " 61 8"*#/A
@",$% %07%@I8/@9EC % J (+,+ B,;9 7#9<6L "#?6/290 %,9#1%0 @919 9 !"#$E 0%,<9 79# %00"0 % 96$#"0
#"LK%0 "<%?6"<9 W </860;9 <% /,89#1":K%0 ?6% 0%#;9 2/06"4/L"<"0 %1 13?6/,"0 </8%#%,$%0=
X91 VROP J 7900I2%4 76*4/@"# <9@61%,$90 %0$#6$6#"<90 "-.()-+C #%@67%#"# /,89#1":K%0
"$#"2J0 <% 2I,@6490 <% D/7%#$%.$9C 7#9Y%$"# 61" /,$%#8"@% /,$%#"$/2" @91 89#1643#/90 7"#" "@%0A
09 " 0%#2/:90 #%19$90 @919 *60@"0 % @91J#@/9 %4%$#Z,/@9C % /,@46/# /1"5%,0C 2I<%90C 09,0C ",/A
1":K%0 % 96$#"0 "74/@":K%0 /,$%#"$/2"0 <%,$#9 <% <9@61%,$90 2/0I2%/0 ,9 *#9H0%#=
/)012#)*" $" /456
VROP 89/ <%0%,2942/<" 9#/5/,"41%,$% 79# R/1 [%#,%#0AP%% ,9 X-Q\ A P"*9#"$G#/9
-6#97%6 <% SI0/@" <% !"#$I@64"0= M6" 79764"#/<"<% @#%0@%6 Y6,$9 @91 " 79764"#/L":;9 <" )%*C
"$#"2J0 <9 789: 5"0;)*= U%2/<9 "9 06#5/1%,$9 <% 23#/90 *#9H0%#0 ?6% 6$/4/L"2"1 VROP
7"#" ,"2%5"# ,9 0/0$%1" <% /,89#1":K%0 7#979#@/9,"<9 7%4" )%*C 5#6790 <% $#"*"4D9 89#"1
89#1"<90 @91 " /,$%,:;9 <% 7"<#9,/L"# %07%@/8/@":K%0 7"#" 9 VROP=
VROP ]=^C @9,@46I<" %1 '__`C 89/ " 7#/1%/#" 2%#0;9 #%@91%,<"<" 7%49 +-RS A <-1+#-+1
=->)-++#)-> 4;0? @"#*+ % 0% $9#,96 61 7"<#;9 <" +,$%#,%$= VROP ]=^ %#" 61" 4/,56"5%1 0/1A
74%0 ?6% </L/" @919 61 *#9H0%# <%2%#/" %0$#6$6#"# 61" 735/,"C 1"0 ,;9 @919 90 $I$6490C 7"#3A
5#"890 % 4/0$"0 <%2%#/"1 "7"#%@%# 5#"8/@"1%,$%= U6#",$% 9 <%0%,2942/1%,$9 <9 VROP a=^C "
)%* %0$"2" %1 8#",@" %.7",0;9 % 90 %089#:90 <% 7"<#9,/L":;9 ,;9 76<%#"1 "@917",D"# "0
$%,<b,@/"0 <9 1%#@"<9C ?6% %./5/"1 1"/9#%0 #%@6#090 <% "7#%0%,$":;9 5#38/@" "9 VROP ]=^=
c VROP a=^ "@"*96 ,;9 0%,<9 "7#92"<9 % ",90 <%79/0C "7#9296A0% 61" #%@91%,<":;9 @D"A
1"<" VROP a=] %1 '__dC ?6% /,$#9<6L/" #%@6#090 <% "7#%0%,$":;9 5#38/@" ,9 VROP=
+,8%4/L1%,$% " 1"/9#/" <90 #%@6#090 5#38/@90 <9 VROP a=] 89#"1 /,@9#79#":K%0 <% %.A
$%,0K%0 7#97#/%$3#/"0 <" 7+10*;%+ % 5)*#"0"A1C @#/"<"0 0%1 4%2"# %1 @9,$" " 8/49098/" <9 VROP <%
5"#",$/# " @917"$/*/4/<"<% <" 4/,56"5%1 %1 74"$"89#1"0 </8%#%,$%0= +0$9 "@"*96 "$#"0",<9 9
<%0%,2942/1%,$9 <% 8%##"1%,$"0 <% <%0%,2942/1%,$9 %8/@/%,$%0C 79/0 %#" /17900I2%4 2"4/<"#
VROP 7"#" 74"$"89#1"0 ?6% ,;9 0679#$"2"1 @%#$90 #%@6#090 5#38/@90 1"/0 098/0$/@"<90=
VROP 89/ <%0%,2942/<" 9#/5/,"41%,$% 7"#" ?6% BC;(BC+# $)0%"0)1)," 76<%00% $%# "@%009 W
/,89#1":;9 <" )%*= +0$9 /,@46/ !X0 @91 19,/$9#%0 5#38/@90 <% </2%#0"0 #%0946:K%0C $%#1/,"/0
9#/%,$"<90 " @"#"@$%#C $%4%89,%0 @%464"#%0C </0790/$/290 5%#"<9#%0 <% 29LC %$@= VROP a=] $/,D"
%4%1%,$90 ?6% 7#%Y6</@"2"1 %00" 1%$"= S/,"41%,$%C <%79/0 <% 16/$" </0@600;9C "0 %17#%0"0
%,$#"#"1 %1 61 "@9#<9 % <%0%,2942%#"1 9 VROP e=^C ?6% %0$%,<% 9 VROP @91 1"/0 #%@6#A
090 2/0",<9 61 "@%009 1"/0 6,/2%#0"4 W /,89#1":;9 <" )%*C @919 #%@6#090 <% "@%00/*/4/<"<% W
7%009"0 @91 <%8/@/b,@/"0C 0679#$% " @9,2%,:K%0 /,$%#,"@/9,"/0 B96$#"0 4I,56"0C 96$#90 "48"*%A
'e
Parte 1 - \eb e Internet
tos,, separaçao da estrutura, conteúdo e apresentaçao, recursos interati·os do lado do cliente e
otimizaçao em tabelas e íormularios.
!"#$ & ' ())
Varios elementos do l1ML 3.2 íoram considerados *'+,'-.*/0 ,candidatos a se tornarem
obsoletos, pelo l1ML 4. Sao todos elementos que permitem deíinir cores, íontes, alinhamen-
to, imagens de íundo e outras características da apresentaçao da pagina que dependem da pla-
taíorma onde a iníormaçao é ·isualizada. l1ML nunca realizou bem o trabalho de íormataçao
graíica de uma pagina. loi criada inicialmente para apenas dar estrutura a um conteúdo. Nunca
pre·iu íormas de posicionar imagens e texto de íorma absoluta em uma pagina e as soluçoes
desen·ol·idas pelos \eb designers, por nao serem soluçoes pre·istas na especiíicaçao, têm
causado problemas de acesso em ·arios sites e impedido o acesso de dispositi·os mais limita-
dos como a 1'2"3 e 1'245/6' de terem acesso total a \eb. A soluçao do l1ML 4.0 íoi
separar a '07,878,. da .+,'0'67.9:/, deixando que a linguagem l1ML ·oltasse as suas origens
,nos tempos do l1ML 2, para deíinir apenas a íunçao do texto marcado ,o ;8' < título, para-
graío, etc., Uma outra linguagem íoi criada para se preocupar com a aparência ,-/=/ o título e
paragraío serao exibidos na tela,. A principal linguagem usada para esse íim é CSS - (.0-.*>6?
)7@A' )5''70, que permite a criaçao de B/A5.0 *' '07>A/ aplica·eis a ·arias paginas de um site. Se um
dispositi·o limitado nao consegue exibir os estilos deíinidos no CSS, ele pelo menos consegue
entender a estrutura do texto e imagens de íorma que mesmo usuarios com menos recursos
podem ter acesso a iníormaçao.
Lscre·er l1ML nao é diíícil, apenas toma tempo, por isso usar um editor apropriado
pode tornar o processo de criaçao de paginas mais produti·o. Um arqui·o de texto simples
com descritores l1ML, quando carregado em um browser, tem os descritores interpretados e
as suas iníormaçoes íormatadas na tela de acordo com a estrutura pre·ista pelos marcadores e
uma íolha de estilos, geralmente deíinida pelo próprio browser. A íolha de estilos pode ser
deíinida pelo programador usando uma linguagem como CSS e ·inculada a pagina para mudar
sua aparência.
C#$ ' C)$
XML - 'C7'60>2A' #.,D8+ $.6?8.?' e XSL - 'C7'60>2A' )7@A' $.6?8.?' sao as no·as criaçoes
do \3C - 1/,A* 1>*' 1'2 (/60/,7>8= ,consórcio das empresas que desen·ol·em os padroes
para a \\\,. Nao pretendem substituir o l1ML mas, em ·ez disso, oíerecer meios de es-
tender e ampliar as possibilidades da \eb. XML é uma especiíicaçao ou ='7.EA>6?8.?'= que
deíine uma sintaxe que pode ser usada para criar no·as linguagens semelhantes a l1ML. A
própria linguagem l1ML pode ser ·ista como um tipo especial de XML. Com XML ·ocê
pode criar sua própria linguagem de marcaçao MinhaML`, deíinir seus próprios marcadores e
esquemas para aplicaçoes especííicas, por exemplo, poderia conter algo como:
<!"#$%& id="xyz"><'&(&>26/12/1999</'&(&>...</!"#$%&> ...
15
Parte 1 - \eb e Internet
Depois ·ocê pode usar CSS ou XSL para deíinir a aparência dos seus marcadores em um
browser XML. Para que um browser XML seja capaz de compreender a linguagem que ·ocê
criou, é preciso deíinir um !"#"$%&'"$ e uma (')*&+"#) ,usando as regras da especiíicaçao XML,
para ela. A gramatica para a analise da sua linguagem de·e íicar armazenada em um documento
chamado D1D - ,$#-*.%+ 012. ,.3"%"+"$%. Carregando o D1D, o browser XML aprendera a
no·a linguagem e sera capaz de íormatar a iníormaçao que ·ocê estruturou com seus marcado-
res, e apresentar as iníormaçoes na tela de acordo com as regras de estilo deíinidas no CSS ou
em um XSL criado por ·ocê.
As tecnologias XML e XSL nao serao abordadas neste curso mas ·ocê pode obter maio-
res iníormaçoes sobre as duas tecnologias, além de ter acesso a guias de reíerência e tutoriais
atra·és do site do 4$'5! 4"!. 4.6 7$%8$'+"-* ,\3C, em http://www.w3.org/XML/.
9:;: <=.'#>#"$8
1. Lntre as opçoes abaixo, quais representam protocolos da Internet· Marque uma ou mais
de uma.
a, l1ML
b, l11P
c, CSS
d, l1P
e, URI
2. Marque apenas as aíirmaçoes ·erdadeiras:
a, 4$'5! 4"!. 4.6 e ?%+.'%.+ sao dois nomes usados para representar o conjunto de
computadores, pro·edores de acesso, satélites, cabos e ser·iços que íormam uma
rede de alcance mundial.
b, Um 2'$+$#$5$ !. #$*-%"#)@A.8 é essencial para que computadores diíerentes possam se
comunicar uns com os outros.
c, A Internet se baseia em um protocolo de comunicaçoes chamado de l11P - B1C
2.'0.=+ 0')%83.' D'$+$#$5. Para íazer parte da Internet, um computador precisa saber
íalar` l11P.
d, Qualquer maquina acessí·el atra·és da Internet tem, em algum momento, um ende-
reço IP .=#5-8"E$.
e, Nao é possí·el que um computador utilize programas como browsers e aplicati·os
de correio eletronico para na·egar, receber e en·iar e-mail sem que ele possua, ne-
cessariamente, um endereço IP.
3. Marque apenas as alternati·as íalsas:
a, Se um computador é identiíicado atra·és de um nome, por exemplo,
www.se·erino.com.br, ele nao precisa ter um endereço IP.
b, Se o sistema de pesquisa de nomes ,DNS, íalhar o browser nao localizara a maqui-
na procurada na Internet. Isto nao quer dizer que o site esta íora do ar. Se ·ocê in-
íormar diretamente o endereço IP da maquina, existe a possibilidade que o site seja
alcançado.
16
Parte 1 - \eb e Internet
c, Uma mesma maquina pode oíerecer ·arios ser·iços 1CP,IP, como o ser·iço
l11P ,\eb,, oíerecido por maquinas que hospedam sites, o ser·iço de caixa-
postal, e o ser·iço de en·io de correio eletronico.
d, Uma !"#$% '()*+) pode oíerecer apenas um tipo de ser·iço.
e, Os números das principais portas de ser·iço 1CP,IP sao padronizadas, ou seja, em
computadores diíerentes, ·ocê geralmente encontra os mesmos ser·iços localiza-
dos em portas com os mesmos números.
4. Ser·idor e cliente sao papéis diíerentes exercidos por um computador em rede ,os termos
também sao usados para se reíerir aos programas usados para esses íins,. Uma mesma ma-
quina pode, simultaneamente, exercer os dois papéis, desde que rode programas capazes de
oíerecer ser·iços e de consumi-los. Lntre as alternati·as abaixo, marque apenas as que des-
cre·em características de ,-#./0"#-, \eb:
a, Monitoramento da porta 1CP,IP de número 80 em uma única maquina.
b, lospedagem e gerenciamento de arqui·os em um site na \eb
c, Interpretaçao de arqui·os l1ML
d, Lxibiçao de imagens
e, Requisiçao de iníormaçoes remotas atra·és de URIs
5. Qual a principal íunçao da sintaxe MIML - 123$/!%#$ +4$-#4-$ 1%/3 56$-4,/"4,· Marque uma
alternati·a.
a, localizar paginas na Internet
b, tornar possí·el o en·io de e-mail atra·és de uma pagina \eb
c, identiíicar tipos de arqui·os
d, permitir que um browser íuncione como ser·idor de e-mail
e, nenhuma das alternati·as anteriores
6. Marque as opçoes ·erdadeiras. Uma pagina l1ML ...
a, ... geralmente é um arqui·o de texto com extensao !"#$ ou !"#$&
b, ... podera exibir imagens, texto íormatado, ·ínculos de hipertexto e cores ao ser lida
por uma aplicaçao como o +4$-#4-$ 56!3"#-#.
c, ... exibira seu código-íonte, consistindo de símbolos especiais entre ·` e ·`
quando íor lida por um editor de textos comum, e nao mostrara imagens.
d, ... nao pode ser criada atra·és de um editor de textos qualquer. L preciso usar uma
íerramenta como o 7#-%89-%.-# ou :"8-;/$-.
e, ... pode ter ·ínculos interligando-a com outras paginas e com imagens.
í, ... se ti·er ·ínculos de·e expressa-los usando a notaçao de URIs, absolutas ou rela-
ti·as, para que íuncionem quando a pagina íor publicada em um ser·idor \eb.
¯. O que acontece quando um browser carrega um arqui·o de texto simples, com extensao
!"#$& ou !"#$, mas sem íormataçao l1ML alguma·
a, A pagina nao é carregada
b, A pagina é carregada mas toda a íormataçao do texto original ,paragraíos, títulos,
quebras de linha, etc., é perdida na ·isualizaçao
c, A pagina é interpretada como texto simples e exibida em íonte de largura íixa
,Courier, por exemplo,, preser·ando a íormataçao original
d, O browser causa a abertura de uma aplicaçao para a leitura de textos ,o 9"#0, por
exemplo,.

Parte 1 - \eb e Internet
e, O browser exibe uma mensagem de erro
8. Considere o seguinte sistema de diretórios no !"#$%&', em uma maquina acessí·el ·ia In-
ternet chamada www.tribos.com.br:
C:\
C:\Windows
C:\Apache
C:\Apache\htdocs\
C:\Apache\htdocs\ongs\
Suponha que um ser·idor l11P íoi instalado nessa maquina e coníigurado para admi-
nistrar um sistema de diretórios a partir do diretório C:\Apache\htdocs\ ,diretório raiz do
ser·idor,. Qual das URLs abaixo permite a ·isualizaçao do arqui·o index.html, armazenado
em C:\Apache\htdocs\ongs\ atra·és de um browser localizado em uma maquina remota·
a, http://www.tribos.com.br/Apache/htdocs/ongs/index.html
b, http://www.tribos.com.br/C:/Apache/htdocs/ongs/index.html
c, http://www.tribos.com.br/ongs/index.html
d, http://www.tribos.com.br/C:/Apache/htdocs/index.html
e, http://www.tribos.com.br/index.html
í, http://www.tribos.com.br/
g, C:\Apache\htdocs\ongs\index.html
9. No mesmo ser·idor \eb da questao anterior ha uma imagem logotipo.gif` armaze-
nada no diretório C:\Apache\htdocs\. O arqui·o index.html localizado em
C:\Apache\htdocs\ongs\ reíere-se a essa imagem atra·és de um descritor <IMG>. Quais,
entre as sintaxes abaixo para o descritor <IMG> de index.html, causarao a exibiçao da i-
magem dentro da pagina, quando ·isualizada por um browser em uma maquina remota·
Marque no mínimo uma.
a, <IMG SRC="logotipo.gif">
b, <IMG SRC="C:\Apache\htdocs\logotipo.gif">
c, <IMG SRC="../logotipo.gif">
d, <IMG SRC="/logotipo.gif">
e, <IMG SRC="http://www.tribos.com.br/logotipo.gif">
í, <IMG SRC="http://www.tribos.com.br/Apache/htdocs/logotipo.gif">
10. Qual dos caminhos abaixo nao é uma URI ,ou URL,·
a, ftp://usuario:senha@maquina.com/pub/arquivo.doc
b, news:comp.lang.java
c, http://www.algumlugar.com:8081/textos/
d, c:\wd\paginas\html\
e, /progbusca.exe?opcoes=abc&pesquisa=dracula
í, mailto:helder@ibpinet.net

18
!"#$% ' ( )%* % +,$%#,%$
!" $%&'()* +, -,. /&0,1
!"2" 34'&1 5,%%'6,70'1 ,8&10,6 9'%' :%&'% , 6'70,% 1&0,1;
!-.%/-0 1#2"# 3/" 4562," )%* 02/47%0/%,$% 30",.- 3/ %.2$-# .% $%8$-0 91-/- - *7-:
1- .% ,-$"0 .- )2,.-;0< % 3/ *#-;0%# 4"#" =203"72>"?@-A B/*-#" %0$" 0%C" 3/" *-" D-#/" .%
"4#%,.%#E F 4-31- 4#-.3$2=" 4"#" .%0%,=-7=%# 02$%0 1-/47%8-0 G3% 30"/ $"*%7"0E 5%'6,1 % .%:
026, 0-D20$21".-A H763,0 %.2$-#%0 0@- *"0$",$% =203"20 % /-0$#"/ $-.- - 4#-1%00- .% 1#2"?@- .-
02$%E D">%/ *301" % 03*0$2$32?@- %/ $-.- - 02$%E 3$272>"/ 0,69<'0,1E 4%#/2$%/ %.2?@- .2#%$" .-
1I.26- % D">%/ " 4#%=20@- 0%/ " ,%1%002.".% .% 3/ *#-;0%#A J - 1"0- .- =&:%*1*50 >%*70?'@,E
.- =':%*6,+&' A%,'6-,'B,%E .- $*%,< -,.='10,%E % .- C+*., D*E&B," K3$#-0E 02/47%0/%,$% 0%#:
=%/ 4"#" %1-,-/2>"# *"$2."0 .% $%17"0 % %=2$"# %##-0 .% 02,$"8% ," L-#" .% %01#%=%# - 1I.26-
MNOPA B.2$-#%0 .% 1I.26- MNOP 1-/- - F*0 A*@E F*0 =,0'<E F*6,/&0,E G'%,G*7,1E %$1A #%"72:
>"/ %0$" D3,?@-A Q"0 0%?R%0 " 0%632#E .2013$2#%/-0 "0 .2D%#%,?"0 %,$#% 1"." $24- .% %.2$-#A
H+&0*%,1 @%I5&:*1 J-K/L-KDM
K0 %.2$-#%0 /"20 D51%20 .% 30"#E G3% .204%,0"/ $-$"7/%,$% - 30- .% MNOP 0@- -0 %.2$-:
#%0 )ST+)SUA B00% ,-/% %0G3202$- F 3/" 0267" *"0$",$% 30"." ,-0 4#2/%2#-0 $%/4-0 ." %.2:
$-#"?@- %7%$#V,21" 4"#" 1"#"1$%#2>"# 4#-6#"/"0 G3% #%4#%0%,$"="/ ," $%7" .- 1-/43$".-# 3/"
4562," ." D-#/" 1-/- 0%#2" 2/4#%00"A Q"G3%7% $%/4-E %#" 1-/3/ " %820$W,12" .% 4#-1%00".-:
#%0 .% $%8$- -3 D-#/"$".-#%0 .% $%8$- G3% 30"="/ 1-/",.-0 4"#" .%01#%=%# 1-/- - $%8$- 2#2"
"4"#%1%# ," L-#" ." 2/4#%00@-A !"#" 0% $%# 3/" 2.F2" .- #%037$".- D2,"7E %#" ,%1%005#2- -3 2/:
4#2/2# -3 #-."# 3/ 4#-6#"/" " 4"#$% G3% D2>%00% 3/ 9%,B&,N ." 4562," 1#2"."A X-/ - ".=%,$-
." %.2$-#"?@- %7%$#V,21"E 03#62#"/ 4#-6#"/"0 1-/- - C<+41 ?'@,='O,% ,- =':&70*1P % Q,704%'
?4.<&1P,% ,- !X G3% /-0$#"="/ ," $%7" " 4#I4#2" 4562,"E % ,@- 3/ /-,$% .% 1I.26-0 .%
1-,$#-7% /20$3#".-0 "- $%8$-A B7%0 0% .%D2,2"/ 1-/- 4#-6#"/"0 )ST+)SUE G3% G3%# .2>%#
-P'0 K*4 /,, L1 -P'0 K*4 D,0E -3E Y- G3% =-1W =W F - G3% =-1W -*$F/ZE 036%#2,.- G3% - G3% -
"3$-# =203"72>" ," $%7" F 3/" #%4#%0%,$"?@- *"0$",$% D2%7 .- #%037$".- D2,"7 G3% -*$%#5 ," 2/:
4#%00-#"A )ST+)SU ," )%* F *%/ /%,-0 D2%7 G3% ," 2/4#%00@-A !"#" $#"*"7L-0 2/4#%00-0E $%/:
0% 3/" #%4#%0%,$"?@- ." 4562," %/ 3/" .%$%#/2,"." 2/4#%00-#"E 1-/ .%$%#/2,"."0 D-,$%0E
1-#%0E %$1A Q" )%* F 2/4-00[=%7 0"*%# 0% " 4%00-" G3% 2#5 =%# " 03" 4562," $%#5 "0 /%0/"0 D-,:
$%0E 1-#%0E =%#0R%0 .% *#-;0%# G3% "G3%7" -,.% =-1W D%> - 0%3 $%0$% Y)ST+)SUZA !-#$",$-E
'\
!"#$% ' ( )%* % +,$%#,%$
-. %/0$-#%. 1#2304-. /% 5210,". )%* .6- ,- 72807- )9:+:)+; -< )="$ 9-< :%% +. !"#$%&'
#$( )="$ 9-< ;%$ >- ?<% @-4A @A B C. @%D%. - ?<% @-4A -*$B7EFE
G 7<H$05H040/"/% /%
*#-I.%#. % 5H"$"3-#7".
?<% %80.$%7 ," +,$%#,%$
%801% /- )%* /%.01,%#
7"0. ?<% ."*%# 3"D%# 5210J
,". ?<% 304"7 *-". %7
<7" K,04" 5H"$"3-#7" %
*#-I.%#E L ,%4%..2#0-
$%.$"# - .0$% %7 .0.$%7".
/03%#%,$%. H%@",/- %7
4-,$" - 5K*H04-J"H@- /-
.0$% % 7<0$". @%D%. B ,%J
4%..2#0- #%4-##%# C 4-/030J
4"M6- NOPQ 5"#" #%.-HJ
@%# "H1<7 5#-*H%7" ,6-
5#%@0.$- 5%H-. %/0$-#%.E
O-/-. -. )"*( %/0$-#%. 1#2304-. 5%#70$%7 " %/0M6- /- 4R/01- NOPQ "..07 4-7- - /%.%,@-HJ
@07%,$- 1#2304-E G 07"1%7 "407" 7-.$#" - "7*0%,$% /- +,-."#$/&, 1.$,#2$,3$. 4E
5/&%".$( /$ %$6%"
!-/%J.% <."# ?<"H?<%# %/0$-# /% $%8$- ?<% $%,=" " 4"5"40/"/% /% ."H@"# <7 "#?<0@- /%
$%8$- S5<#-TU 4-7 "H3"*%$- +:VJQ"$0,J' >+:VJWWXYJ'F -< G:Z++ 5"#" 4#0"# 5210,". NOPQE :%
- .%< %/0$-# .R 4-,.%1<0# ."H@"# [:JG:Z++U .%#2 7"0. /03\40H - <.- /% "4%,$-. >@-4A $%#2 ?<%
<."# 4R/01-. %.5%40"0.FE GH1<,. %8%75H-. /% %/0$-#%. ?<% 5-/%7 .%# <."/-. .6- - 78"-" /$ 9"%,(
/- )0,/-I.U - :"./;,/ >/%./% ?<% .% ."H@% " 5210," 4-7- S$%8$-TFU - 5/&%;,/U - :&*5/&% %
-<$#-. %/0$-#%. (<,.$2,.$=>.$$2,.$ 5-5<H"#%. /0.5-,\@%0. ," +,$%#,%$E
5/&%".$( /$ ?@+A
]/0$-#%. /% NOPQ .6- 4-7- -.
%/0$-#%. /% $%8$- 7". 5-..<%7 <7" .B#0%
/% "$"H=-. 5"#" "10H0D"# " %,$#"/" /% 4R/0J
1- NOPQE V. "$"H=-. $"7*B7 %@0$"7
?<% .% 4-7%$"7 %##-. /% .0,$"8%E V.
%/0$-#%. NOPQ 7"0. .-30.$04"/-. 5-..<J
%7 <7 .0.$%7" /% B.$3&$2 %7*<$0/-U 5%#J
70$%7 " /%30,0M6- /% 1"*"#0$-. " .%#%7
"5H04"/-. " <7 4-,^<,$- /% 5210,".U .<J
_`
Parte 1 - \eb e Internet
portam macros, busca e substituiçao em di·ersos arqui·os e íiltros di·ersos. A íigura acima
mostra o ambiente do !""#$%& ()*&+$,& -./.
A maioria dos editores l1ML estao disponí·eis na Internet pelo sistema de 0%&&1#%& ou
23#%&1#%&. O site das duas ·acas, ou 1UCO\S ,http:,,www.tucows.com, possui uma lista
crescente destes programas. Você também encontra editores em http:,,www.shareware.com.
Lntre os comerciais, um dos mais populares é o ()*&+$,&.
4.4. 5)% 67& 2& 8%&)978#% 9)* ) 8&%0$" :)2 ;$2$,#<,&2=
Qualquer \eb designer que queira desen·ol·er paginas seriamente hoje em dia de·e ter
as ·ersoes dos browsers mais populares entre o público. Nao basta testar somente na última
·ersao. Geralmente a grande massa de usuarios que na·ega na Internet nao possui a última
·ersao do seu browser.
Os browsers sao a janela do usuario para a \eb. Dependendo da ·ersao ou do tipo de
browser que o seu ·isitante esta usando, e qual o seu computador, a sua pagina pode aparecer
para ele como uma experiência agrada·el que o íara ·oltar muitas e muitas ·ezes, ou como um
pesadelo horrí·el, que ele jamais esquecera. L trabalho do \eb designer resol·er ao maximo
esses problemas de compatibilidade de íorma a garantir que pelo menos a iníormaçao essencial
seja acessí·el ,isto inclui a identidade ·isual e a na·egaçao do site,. L essencial testar as paginas
em browsers e plataíormas diíerentes antes de publica-las.
Os browsers mais populares hoje continuam sendo o >&,29#8& ?)**7<$9#,)% e @$9%)2)0, A<B
,&%<&, CD8")%&%. As plataíormas de na·egaçao mais populares ainda sao PC e Mac. Mas o que é
usado por todo o mundo pode nao ser o mais importante no seu caso: se seu 8EF"$9)B#";) é íor-
mado em grande parte por usuarios de maquinas Sun é essencial testar suas paginas nessas
plataíormas também.
la ainda uma outra questao. Mesmo que ·ocê saiba que 99° do seu público usa brow-
sers Netscape ou Microsoít, é importante saber as ;&%2G&2 que eles usam. A grande maioria dos
usuarios <H) 8)227$ as últimas ·ersoes dos seus browsers ,os pro·edores continuam distribuindo
·ersoes antigas,. la muitos recursos no·os nas no·as ·ersoes do ?)**7<$9#,)% e do A<,&%<&,
CD8")%&% que nao sao suportados nas ·ersoes anteriores. Se ·ocê usa-los sem prestar atençao ao
eíeito que causam em ·ersoes antigas, uma grande parte do público que ·isitar suas paginas
poderao nunca mais ·oltar.
4.I. 5)% 67& #8%&<:&% (J@K=
Se é possí·el íazer todo um site, com 29%$8,2 interati·os, imagens, animaçoes, Ja·a, etc.
sem escre·er uma linha sequer de l1ML, por que perder tempo aprendendo códigos que nao
·ao ser·ir para nada· Nao seria programar em l1ML um desperdício de tempo e criati·idade
que um \eb designer poderia economizar usando íerramentas que escondessem o código,
dando maior êníase ao aspecto ·isual·
21
!"#$% ' ( )%* % +,$%#,%$
--
./ #%/01/$"/ 2/ 0%#34,$"/ 51 0"#63#"71 ",$%#81# 5%0%,5%9 51 :4% ;1<= 0#%$%,5% 7">%# %
51 <1,$#1?% :4% ;1<= 0#%$%,5% $%# /1*#% " /4" 1*#"@ A% 1 /%4 1*B%$8;1 C 7">%# 0638,"/ 0#6$8<"/ %
#6085"/D <191 49" !"#$ &'($ 0%//1"? 14 0"#" 49 /8/$%9" +,$#",%$ /890?%/D 015% #%"?8>"# $151 1
$#"*"?E1 /%9 /%:4%# $19"# <1,E%<89%,$1 51 FGHID 4/",51 "/ 7%##"9%,$"/ :4% %J8/$%9 01#
"K@ H"/ /% ;1<= 5%/%B" 7">%# <18/"/ 9"8/ /178/$8<"5"/D <191 $%# 9"8/ <1,$#1?% /1*#% 1 )$*+(, 5"
/4" 0638,"D <#8"# 0638,"/ :4% 8,$%#"B"9 <19 14$#1/ 0#13#"9"/ L<191 /%#;851#%/ 5% *",<1/ 5%
5"51/M % 4/"# #%<4#/1/ ,1;1/ <191 -.,'#+/ 0123D 4'5'6/7+&8D <","8/ % 71?E"/ 5% %/$8?1D ;1<=
0#1;";%?9%,$% ,N1 ;"8 %/<"0"# 5% $%# :4% %58$"# /4" 0638," 0%?1 9%,1/ 49" 14 54"/ ;%>%/@
G"?;%> 0"#" 7">%# "?34,/ "B4/$%/D $"?;%> /890?%/9%,$% 0"#" ?1<"?8>"# 1 01,$1 51 <O5831 1,5%
/%#6 8,/%#85" 49" #1$8," P";"A<#80$ :4% "?349 0#13#"9"51# %/<#%;%4@ A"*%# FGHI /83,878<"
9"8/ 015%# /1*#% " /4" 1*#"@
H"/ ,N1 /% 0#%1<40% %9 ;N1@ . ,1$K<8" *1" C :4% FGHI C 76<8?@ QN1 C ?8,34"3%9 5%
0#13#"9"RN1D ,N1 $%9 <18/"/ <191 #%<4#/N1D 01,$%8#1/ 14 ,"5" 51 $801@ )%* 5%/83,%#/ 015%9
% 5%;%9 "0#%,5%# FGHI@ S /19%,$% 9"#<"RN1 5% $%J$1@ S 49" ?8,34"3%9 $#8;8"? 0"#" ":4%?%/
:4% 4/"9 <1904$"51#%/ 5%/5% 1 $%901 51 HATUVA % )1#5A$"# ( 0#13#"9"/ *%9 9"8/ <19T
0?%J1/ :4% 1 FGHI@
!"#$%&' )* +*, -#.*/ 0




!"#$% ' ( )*+,
!"#$%&'"
)* +,#'-.%#$"/ '" 0123************************************************************************************** 45
-./. 01%2%3$45 % 6%57#8$4#%5 9$":5;...................................................................................'<
-.'. =$#8>?$45.......................................................................................................................'@
-.-. A"#"7$%#%5 6% %57"B% ...................................................................................................'@
-.C. A42%3$D#845.................................................................................................................-/
-.E. 05$#?$?#" 64 647?2%3$4............................................................................................-/
-.F. 01%2%3$45 64 )0=G.................................................................................................-'
*H*,0..................................................................................................................................-'
+0*=..................................................................................................................................-'
,HIJ...................................................................................................................................--
K=L0 ...................................................................................................................................--
-.<. 01%2%3$45 6% KMGN.................................................................................................--
6* 7-89:8-;"/ % <=">"/ ************************************************************************************************ )?
C./. !"#D:#"O45 P!Q...........................................................................................................-E
C.'. A">%R"1S45 P)/Q " P)FQ.......................................................................................-F
C.-. T?%>#"5 6% 183S" PKUQ.............................................................................................-<
C.C. ,83S"5 S4#8V43$"85 P)UQ.........................................................................................-<
C.E. A8$"RW4 6% >1474 PK,MAJTXM*0Q ...................................................................-<
C.F. *%Y$4 B#Z(O4#2"$"64 P!U0Q...................................................................................-[
C.<. K1474 :%3Z#874 6% 5%RW4 PGH\Q..............................................................................-@
C.[. K1474 6% %36%#%R4 P=GGU0LLQ...........................................................................-@
?* 3@/$-/ ******************************************************************************************************************* 6A
E./. ,85$"5 3W4(4#6%3"6"5 PX,Q] P,HQ.........................................................................C^
E.'. ,85$"5 4#6%3"6"5 PM,Q] P,HQ ................................................................................C/
E.-. ,85$"5 6% 6%O838R_%5 PG,Q] PG*Q] PGGQ..........................................................C/
5* B.-:%#/***************************************************************************************************************** 6)
F./. M 4>`%$4 PH+aQ .......................................................................................................C-
XUH5 #%1"$8b"5......................................................................................................................C-
F.'. =183S"2%3$4 6% 82":%35............................................................................................CC
F.-. G82%35843"2%3$4.......................................................................................................CC
C* +"8.-$-DE" '% $%F$" G@#=@#% %=%.%#$/H ******************************************************************* 65
I* J#>"8-/ % KL#>,="/ ********************************************************************************************** 6I
M* 1-<%=-/***************************************************************************************************************** 6M
@./. !#8378B"85 %1%2%3$45 %5$#?$?#"85 P*=K,0Q] P*UQ] P*GQ 4? P*)Q...........C@
@.'. *">%1" 5%2 >4#6"5 ......................................................................................................E^
@.-. K4#6"5 ...........................................................................................................................E/
@.C. 05B"R"2%3$4................................................................................................................E/
'C
!"#$% ' ( )*+,
-./. ,"#01#" 2" $"3%4" ........................................................................................................./'
-.5. 64$1#"7 89:;<;9=">%=$9 % <9#%:................................................................................./?
-.@. 64;=A">%=$9 2% <B414": ............................................................................................../C
-.D. E9>3;="FG9 2% <B414": ...............................................................................................//
-.-. H$;>;I"FG9 J*)K6LM7 J*NHLOM7 JEH,PQHR!M7 JEH,M..................//
-.ST. ,%0%=2" JE6!*UHVM ............................................................................................./5
!"#$%&'&()*+ -&./&01-*+############################################################################################ 23
ST.S. N49<9: W1% "4$%#"> %:$;49 X2%8#%<"29:Y..................................................................../@
ST.'. N49<9 <%=$#"29 JEKV*KQM.................................................................................../@
ST.?. N49<9 :%> W1%3#": 2% 4;=A" JVHNQM % JZNQM.............................................../D
ST.C. K4%>%=$9: 2% %:$;49 X2%8#%<"29: =9 )*+, C.TY .................................................../D
ST./. 6$#;31$9: 2% 1>" 8[0;=" JNHLO "$#;31$9:M......................................................./-
ST.5. E9#%: % \9=$%: J]HV*M ........................................................................................../-
ST.@. E9=<41:G9.....................................................................................................................5T
!!#4&+)&+ ################################################################################################################### 5!


'/
!"#$% ' ( )*+,
!" $%&'()*&+,- ',
./01
- "#./012 /3"42 5"#" 6273$#/0# /8" 59:07" ;%< = $%>$2 3085?%3@ +%382 ./% " 59:07" 103/"?0(
A"4" 72 <#2B3%# 823$#% 08":%73C "55?%$3 D"1"C 5?/:(073 E6282 $2(-3F % 2/$#23 #%6/#323C 52#
$#93 4% $/42 %>03$% /8" 59:07" 4% $%>$2 % 19#023 2/$#23 "#./0123 3%5"#"423C ./% G2#"8 827$"(
423 %8 /8" 59:07" 5%?2 <#2B3%#@ - 6H40:2 = $%>$2C 8"3 7I2 = -4 $%>$2@ J $%>$2 )(56(', 628
)*+,@ )*+, 4%G07% +,'( " %3$#/$/#" 4% /8" 59:07" 5"#" ./% /8 <#2B3%# 5233" G2#8"$9(?" %
5#24/A0# " "5#%3%7$"KI2 4%3%L"4"@ )*+, $"8<=8 7)8,5+( "3 08":%73C 5#2:#"8"3C 3273 % 1M4%23
./% /8" 59:07" %>0<% %8 3%/ 07$%#02#@ +"3 6282 )*+, = $%>$2 3085?%3C 524% 3%# %40$"4" %8
./"?./%# %40$2# 4% $%>$2 E6282 2 92,6, '* :,+(- 42 ;7&',<-F@
N2 ?%# /8 426/8%7$2 )*+,C /8 <#2B3%# $%7$" 07$%#5#%$"# $24"3 "3 3%.OP760"3 4% 6"(
#"6$%#%3 ./% G06"8 %7$#% 23 3M8<2?23 QRQ % QSQ@ - <#2B3%# %7$%74% ./% =%(2=%*5 6,7-( ./% %3$0(
1%# %7$#% %33%3 6"#"6$%#%3 = /8 '*-657+,5 ./01 E+(>F % 7I2 4%1% 3%# 823$#"42 7" $%?"@ T% 2 4%3(
6#0$2# G2# 4%3627U%6042 %?% 3085?%38%7$% 2 7>&,5( E% 7I2 823$#" 2 627$%V42 7" $%?"F 8"3 3%
#%"?8%7$% G2# /8 *2*)*&+, ./01 E4%G07042 7" %35%60G06"KI2 3/52#$"4" 5%?2 <#2B3%#FC %?% /3"#9
"3 07G2#8"KW%3 627$04"3 %7$#% 23 3M8<2?23 %3$#/$/#"# " 59:07"C G2#8"$"742(" 4% "62#42 628
"?:/8" #%:#" 4% %3$0?2 5#%10"8%7$% 4%G0704"@
*24" " G2#8"$"KI2 4% /8 "#./012 )*+, = G%0$" *?62%-7@()*&+* "$#"1=3 423 4%36#0$2#%3@ -
<#2B3%# 3"<% ./% 2 "#./012 627$=8 6H40:2 )*+, "$#"1=3 4% 3/" %>$%73I2 E2/ $052 +X+Y
%710"42 5%?2 3%#1042#F@ T% /8 "#./012 4% $%>$2 628 %>$%73I2 )*+, 8"3 3%8 4%36#0$2#%3 G2#
6"##%:"42C 72 <#2B3%#C $24" " 3/" 07G2#8"KI2 "5"#%6%#9 %8 /8 V7062 5"#9:#"G2C 3%8 4%3$"(
./%3C 3%8 G2#8"$"KI2 "?:/8"@ Z%L" "3 G0:/#"3 "<"0>2@ Y?"3 0?/3$#"8 /8 8%382 $%>$2 4% /8
426/8%7$2 )*+, 40:0$"42 72 92,6, '* :,+(- 42 ;0742B3 % ?0423 "$#"1=3 42 A&+*5&*+ B?82,5*5@
[" 5#08%0#" G0:/#"C 7I2 U9 4%36#0$2#%3 )*+, %C "5%3"# 423 %35"K23C $"</?"KW%3 % 721"3(?07U"3
%>03$%7$% 72 "#./012 4% $%>$2 103/"?0A"42 72 %40$2# 4% $%>$23C 2 <#2B3%# 0:72#" $24" " G2#8"$"(
KI2@ D9 7" 3%:/74" G0:/#" 4%36#0$2#%3 )*+, G2#"8 076?/M423 % 2 <#2B3%# G20 6"5"A 4% G2#8"$"#
" 59:07" 4% /8" 8"7%0#" %3$#/$/#"4"@
'\
!"#$% ' ( )*+,
-#./012 3% $%4$2
5627 %4$%89:2
;<$7=> 9%7 7"#6"(
?:2 )*+, "2 9%#
109/"=0@"32 82
A#2B9%# % 82
%30$2# C=262 3%
D2$"9 5E0832B9>;
-#./012 3% $%4$2
5627 %4$%89:2
;<$7=> 628$%832
7"#6"?:2 )*+,
"2 9%# 109/"=0@"32
82 A#2B9%# % 82
%30$2# C=262 3%
D2$"9 5E0832B9>;

!"#" %&'(')*+, ' -',./0*+/', 1*23,4
- 7"02#0" 329 '&'(')*+, 5678 F299/0 /7 -',./0*+/ 0)0.02& % /7 -',./0*+/ 90)2&G 6%#6"832 2
$%4$2 ./% H 7"#6"32 F2# %=%9; - 908$"4% AI906" H
<Elemento> Texto marcado por Elemento </Elemento>
J $%4$2 7"#6"32 F"99" " $%# /7" 9:);<+G 3%$%#708"3" F%=2 K=%7%8$2; D%7 9%7F#% 09$2
90L80M06" ./% 2 $%4$2 7"#6"32 $%#I 9/" "F"#N860" "=$%#"3" ./"832 " FIL08" )*+, "F"#%6%# 82
A#2B9%#; )I A#2B9%#9 2#0%8$"329 " 6"#"6$%#% ./% 8:2 9:2 6"F"@%9 3% %40A0# $"7"8<29 3% M28$%G
F2# %4%7F=2; J/$#29 F23%7 8:2 $%# /7" M2#7" "99260"3" " /7 %=%7%8$2; D%9$% 6"92G 2 "/$2#
'O
Parte 2 - l1ML
da pagina podera deíinir a íorma atra·és de uma íolha de estilos usando CSS, caso o browser a
suporte. Os elementos também podem iníluenciar o comportamento de mecanismos de busca,
que atribuem maior importancia ou íiltram dados de acordo com a sua íunçao determinada
pelos elementos l1ML. O texto marcado e o elemento l1ML também assumem o papel de
!"#$%! '"(%)'%! utiliza·el por linguagens embutidas na pagina como CSS e Ja·aScript. Lssas lin-
guagens interagem com o l1ML atra·és de um modelo de objetos que relaciona as estruturas
l1ML com comportamentos interati·os ,em Ja·aScript e Dl1ML, e íorma graíica ,CSS,.
Veja alguns exemplos de texto rotulado com descritores l1ML:
<b> Texto em negrito </b>
<h2> Subtítulo </h2>
Obser·e que o descritor íinal é praticamente idêntico ao descritor inicial. A única diíe-
rença é que este último é precedido por uma barra ,",",. Nao íaz diíerença utilizar letras mai-
úsculas ou minúsculas para os descritores l1ML.
Os blocos de texto marcados pelo l1ML podem conter outros blocos. Sempre que isto
ocorrer, o bloco mais interno de·era ser íechado antes do descritor de íechamento do bloco
externo. Veja um exemplo:
<h1> Texto <b>muito <i>importante</i></b> para todos</h1>
Lste outro exemplo esta incorreto pois o bloco ·b· íecha sem que o bloco ·i· tenha
íechado.
<h1> Texto <b>muito <i>importante</b></i> para todos</h1>
Nem todo elemento l1ML pode conter outros descritores e mesmo os que podem têm
regras que deíinem quais os elementos permitidos.
Lxistem elementos que nao precisam ter descritores de íechamento. O paragraío, por
exemplo, marcado por ·P· e ·,p· pode omitir o descritor íinal. Isto é permitido porque nao
pode ha·er um paragraío dentro de outro, portanto, se o browser encontra um ·p· pouco
depois de outro ·p· ele automaticamente coloca um ·,p· antes.
<p>Primeiro parágrafo. <p>Início de outro parágrafo.</p>
linalmente, ha também elementos que nao podem conter texto ou quaisquer descritores
l1ML. Lles precisam ser ·azios. O descritor íinal nesses casos sequer é permitido ,a nao ser
que apareça logo após o descritor inicial,.
<p>Esta é uma frase<br>que ocupa duas linhas.
No exemplo acima ·br· ,quebra de linha, marca a posiçao onde a linha de·e ser que-
brada ,nao contém ou marca texto algum,.
28
Parte 2 - l1ML
!"#" %&'()*&+,
Alguns elementos l1ML podem ter um ou mais -&'()*&+,, opcionais ou nao, que modiíi-
cam alguma propriedade do texto marcado ou acrescentam alguma iníormaçao necessaria.
Geralmente os atributos sao pares do tipo:
propriedade="valor"
Quando presentes, os atributos aparecem apenas no descritor inicial separados por espa-
ços, logo após o nome do elemento:
<h1 align="center">Título centralizado</h1>
Um descritor pode ter ·arios atributos. A +'./0 em que aparecem 12+ 3-4 .(3/'/15- desde
que apareçam no ./,6'(&+' (1(6(-7 e estejam separados dos outros atributos e do nome do elemen-
to por /,8-5+,. Se um atributo íor escrito incorretamente ou se o browser nao o reconhecer, ele
sera ignorado. Di·ersos atributos sao comuns a todos os elementos l1ML. Outros só íazem
sentido em certos elementos.
O ·alor do atributo nao precisa estar entre aspas se conti·er apenas letras ,A-Z, a-z,,
números, ponto ,.,, dois pontos ,:,, hííen ,-, e sublinhado ,_,. Se o ·alor atribuído a proprie-
dade ti·er espaços, é preciso coloca-lo entre aspas ou apóstroíes. Nao pode ha·er espaço entre
a propriedade e o ~` nem entre o ~` e o ·alor:
propriedade="Valor com espaços"
propriedade = "Sintaxe incorreta"
O segundo exemplo acima sera interpretado incorretamente pelo browser como tendo
três atributos e nao um ,nao pode ha·er espaços!,.
Atributos geralmente sao opcionais. Lm alguns casos sao obrigatórios, como os atribu-
tos HREF e SRC em ·ínculos de hipertexto e imagens, respecti·amente. Ambos iníormam uma
URI onde se encontra um recurso na \eb.
<a href="http://www.ibpinet.net/"
title="Vai logo! Clica!"> Clique aqui </a>
<img src="antas.gif"
height=120 width=400
alt="Um casal de antas">
!"!" 9-'-6&/'/, ./ /,6-8/
Os caracteres "·" e "·", por deíinirem o início e íinal dos descritores, nao podem ser
impressos na tela do browser. Quando é necessario produzi-los, de·e-se utilizar uma ,/:;<16(-
./ /,6-8/. Lsta seqüência é iniciada por um "&" seguido de uma abre·iaçao e um ponto-e-
·írgula, que indica o íinal da seqüência. Como o "&" também é caractere especial, ha também
29
Parte 2 - l1ML
uma seqüência para produzi-lo. As principais seqüências de escape, necessarias para produzir
"·", "·", "&" e aspas ,quando necessario, sao:

!"#"$%&#& (&)*+,$-" .& /0$"1&
< &lt;
> &gt;
& &amp;
" &quot;

Por exemplo, para produzir as seguintes linhas no browser:
144 < 25 + x < 36 + y
Fulano, Sicrano & Cia.
é preciso digitar no editor de textos ,código l1ML,:
144 !"#$ 25 + x !"#$ 36 + y
Fulano, Sicrano !%&'$ Cia.
As seqüências de escape também sao usadas para produzir caracteres que nao sao encon-
trados no teclado, como letras acentuadas, símbolos de $213#-45%, etc. Por exemplo, para produ-
zir, no browser, as pala·ras:
Plantação
maßgebend
håndbfger
enciclopædia
©
sueño
pode-se usar, no editor de textos:
Planta&ccedil;&atilde;o <BR>
ma&szlig;gebend <BR>
h&aring;ndb&oslash;ger <BR>
encilop&aelig;dia <BR>
&copy; <BR>
sue&ntilde;o
L possí·el usar também códigos numéricos, porém eles sao dependentes do alíabeto uti-
lizado. Consulte a documentaçao l1ML para uma lista completa de todos os códigos.
Os editores mais soíisticados, como por exemplo o 627&(-%&, íacilitam a entrada de ca-
racteres especiais e geram automaticamente as seqüências de escape. Se ·ocê esta usando um
editor comum, como o 892$2 .& :2%"0, de·e ter o cuidado de digitar corretamente as seqüências.
Alguns browsers simplesmente ignoram seqüências que nao conhecem, outros engolem linhas
e pala·ras. Lm qualquer um dos casos ha perda de iníormaçao. Nunca é necessario digitar se-
qüências de escape se:
·ocê tem os caracteres no seu teclado
30
Parte 2 - l1ML
eles íazem parte do conjunto de caracteres ISO-Latin-1 ,alíabeto !"#$%&' do l1ML,
alíabeto deíault da pagina nao íoi alterado atra·és de um descritor ·ML1A· ou de
um cabeçalho l11P.
1odos os browsers ha mais de 4 anos entendem acentos e cedilha sem que seja necessa-
rio digitar os códigos.
L indiíerente usar letras maiúsculas ou minúsculas para o nome do descritor ou seus a-
tributos. 1anto íaz usar ·BOD\·, ·body·, ·Body· ou ·bOd\·, ·a lRLl~"a.html"· ou
·A hreí~"a.html"·. De·e-se tomar cuidado, porém, com o ()*'"+!) dos atributos ,o ·alor que
as ·ezes precisam ·ir entre aspas,. Lm alguns casos, principalmente quando se lida com URIs
ou quando se usa Ja·aScript, o íormato maiúsculo ou minúsculo #$, diíerença e de·e ser res-
peitado.
-./. 1)2"*'345)6
Llementos desconhecidos pelo l1ML sao ignorados quando colocados entre sinais de
· e ·. Se ·ocê deseja íazer isto intencionalmente para acrescentar comentarios no código ,que
nao aparecerao na pagina,, de·e usar os comentarios l1ML, identiíicados entre <!--e -->.
Qualquer texto ou código entre esses símbolos sera ignorado na íormataçao da pagina pelo
browser.
-.7. 86'4%'%4$ !) !)(%2"*')
A maioria dos elementos l1ML segue uma estrutura hierarquica. la uma estrutura ba-
sica ,mínima, para uma pagina l1ML, construída de acordo com a especiíicaçao padrao, que
de·e ser respeitada para garantir uma compatibilidade com o maior número de browsers pos-
sí·el. Lsta estrutura esta mostrada na íigura abaixo:

<!DOCTYPE HTML Public "-//IETF//DTD HTML 4.0//EN" -->
<HTML>
<HEAD>
<TITLE> Descrição do documento </TITLE>
Aqui ficam blocos de controle, folha de estilo, funções de
scripts, informações de indexação, atributos que afetam todo
o documento, etc.
</HEAD>
<BODY>
Toda a informação visível da página vem aqui.
</BODY>
</HTML>

A primeira linha: ·!DOC1\PL l1ML Public "-,,IL1l,,D1D l1ML 4.0,,LN" --·
é um !"6(45')4 9:;< que iníorma ao browser que ele de·e interpretar o documento de acordo
com a deíiniçao do l1ML ·ersao 4.0, se possí·el. l1ML é uma linguagem deri·ada e comple-
31
Parte 2 - l1ML
tamente especiíicada a partir da linguagem SGML - !"#$%#&% ()$)&#*+,)% -#&./0 1#$2/#2). Você
nao precisa saber SGML para usar l1ML, basta recortar e colar a linha acima que ser·e para
orientar o browser e permitir a ·alidaçao do código de sua pagina.
O elemento ·l1ML·...·,l1ML· marca o início e o íinal do %34/5)$"3 67-1. De·e
conter duas sub-estruturas distintas: o 4#8)9#*:3, delimitado por ·lLAD· e ·,lLAD·, e o
43&03 %3 %34/5)$"3, entre os descritores ·BOD\· e ·,BOD\·.
;<=< >*)5)$"3? %3 6>@A
O bloco do cabeçalho, marcado por ·lLAD· e ·,lLAD· pode conter iníormaçoes
?38&) o conteúdo do documento utilizada para íins de indexaçao e organizaçao. Nao contém
iníormaçao que sera exibida na pagina.
7B71>
·1I1LL· é o único elemento obrigatório do bloco do cabeçalho. De·e conter o título
do documento que aparece íora da pagina, na barra de título do browser. L o que aparece
também nos :3"*+?"? e 833.5#&.?. O título de·e conter iníormaçoes que descre·am o documen-
to.
<!"!#$>HTML e CSS: Introdução</!"!#$>
->7@
·ML1A· é usado para incluir meta-iníormaçao como pala·ras-cha·e, descriçoes, etc.
que podem ser usadas por mecanismos de busca, soítwares de pesquisa e catalogaçao. A in-
íormaçao adicional de·e ·ir nos atributos NAML ,descre·e o tipo de meta-iníormaçao, por
exemplo C)DE3&%?, e CON1LN1 ,descre·e o conteúdo da meta-iníormaçao, por exemplo, uma
lista de pala·ras-cha·e separadas por ·írgula,. ·ML1A· também pode ser usado para adicio-
nar ou redeíinir 4#8)9#*:3? 677F. Isto é íeito atra·és do atributo l11P-LQUIV. Neste caso, o
CON1LN1 de·e conter o conteúdo do cabeçalho.
<%$!& HTTP-EQUIV="Set-Cookie" CONTENT="pag=12">
<%$!& NAME="Keywords" CONTENT="html, css, folhas de estilo, estilo">
<%$!& NAME="Description" CONTENT="Esta página explica os fundamentos
básicos de HTML e folhas de estilo usando a linguagem CSS.">
<%$!& HTTP-EQUIV="Refresh" CONTENT="10;url=pag13.html">
<%$!& HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
32
Parte 2 - l1ML
!"#$
·LINK· é usado para ·incular uma pagina a outro recurso. Na maioria dos casos, o
·ínculo é simbólico e nao tem outra íinalidade a nao ser íacilitar a indexaçao e organizaçao do
site por íerramentas de ·alidaçao e busca. Vínculos a íolhas de estilo incorporam o arqui·o que
é interpretado pelo browser antes de íormatar a pagina..
<!"#$ REL="StyleSheet" HREF="../estilos/default.css">
&'()
·BASL· altera os ·ínculos de origem e destino da janela, ou seja, a parte absoluta da
URL das imagens e ·ínculos, especiíicados com URLs relati·as, e a janela onde o resultado dos
·ínculos sera mostrada. Normalmente a URL base de origem é o local onde a pagina se encon-
tra no momento em que carrega a imagem ou o usuario clica no ·ínculo ,protocolo atual, ma-
quina atual e diretório atual ou ".,",. Com ·BASL·, o autor pode alterar a URL base para que
as imagens e links sejam buscados em outros lugares. Normalmente a janela atual ,_selí, é a
responsa·el por receber o resultado dos ·ínculos. O autor também pode, com ·BASL·, íazer
com que links abram em outra janela, em no·as janelas ,_blank, ou em outras partes de estru-
tura de *+,-./ ,_top e _parent,.
<%&'( HREF="." TARGET="_self"> <!-BASE default -->
<%&'( HREF=" http://www.a.com/dados/">
<!-Os links relativos serão procurados em http://www.a.com/dados/-->
<%&'( TARGET="lateral2"> <!- links abrirão na janela lateral2 -->
0121 )3.-.456/ 7. &89:
O bloco marcado por ·BOD\· e ·,BOD\· contém a parte do documento onde sera
colocada a iníormaçao que eíeti·amente sera mostrada e íormatada na tela pelo browser. 1o-
dos os elementos que serao apresentados daqui em diante tratam da íormataçao do texto ,ou
imagens, da pagina e de·em, portanto, estar presentes no bloco ·BOD\·. Llementos l1ML
podem ser de ·arios tipos e têm regras especííicas sobre o que podem conter e onde podem
ser usados. Quanto a estrutura que assumem na pagina, podem ser classiíicados da seguinte
íorma:
Llementos de ;36<6 ,contém texto ou agrupam outros elementos de bloco,





Llementos =43=4. ,em linha - usados dentro do texto,
Llementos de 3=/5, ,usados para construir listas,
Llementos de 5,;.3, ,usados para construir tabelas,
Llementos de *6+->3?+=6 ,usados para construir íormularios,
Llementos para embutir 6;@.56/ ,usados para incluir imagens, applets, ·ídeos, etc.,
33
!"#$% ' ( )*+,
-.$#% /0 %1%2%.$/0 !"#!"$ %0$3/ /0 45.671/0 8#!"%&9 :% ;<=%#$%>$/? @7% =%#2<$%2 2"#6"#
$%>$/ @7% 0%#4<#A :% 1<B"C3/ " /7$#" =AB<." /7 #%67#0/ ." D.$%#.%$E
F /GH%$<4/ :"0 0%CI%0 0%B7<.$%0 0%#A "=#%0%.$"# 72" <.$#/:7C3/ GA0<6" "/0 =#<.6<="<0 %(
1%2%.$/0 )*+,E J3/ K 72" <.$#/:7C3/ %>"70$<4"E L/.071$% "0 #%M%#N.6<"0 % :/672%.$"C3/
/M<6<"1 ="#" 72" "G/#:"B%2 6/2=1%$" :% 6":" %1%2%.$/ )*+,E
OP
Parte 2 - l1ML
!" $%&'(&%)*+ , -.*/*+

0.*/*+ sao elementos que podem ocorrer dentro de ·BOD\·. Nao é permitido existir texto
diretamente abaixo de ·BOD\·. O texto de·era estar dentro de um bloco, tabela, lista ou
íormulario. Alguns blocos l1ML só permitem que haja outros blocos dentro deles ,é o caso
de ·BOD\·. Outros só admitem texto e elementos 12.12, ,,3 .124% - elementos que nao sao
blocos e podem ser usados dentro de paragraíos para íormatar texto, marcar posiçoes ou
incluir imagens,. Alguns admitem blocos e texto ,·1D·, ·LI·, etc.,.
!"5" $%&'(&%)*+ 6$7
O descritor ·P· abre um paragraío em l1ML. O descritor ·,P· o íecha. 1udo o que
esta entre ·P· e ·,P· é tratado como um bloco. Se esse nosso paragraío ti·er atributos, eles
aíetarao todo o bloco.
Se seu arqui·o l1ML conti·er:
<P>Um parágrafo</P> <P>Outro parágrafo</P>
um browser como o 8,9+/%:, ou o ;29,&2,9 <=:.*&,& mostrara na tela algo parecido com:

Um paragraío

Outro paragraío

·P· pode ter atributos. Um deles é o atributo ALIGN. Se ele nao íor usado, cada para-
graío alinha pela esquerda. Lle pode ser usado para íazer o paragraío alinhar pelo centro ou
pela direita, por exemplo:
<P ALIGN=center>Um parágrafo</P> <P ALIGN=right>Outro parágrafo</P>
·ai resultar em:
Um paragraío

Outro paragraío
35
Parte 2 - l1ML
O atributo ALIGN, como qualquer outro atributo que altera o posicionamento ou apa-
rência atra·és do l1ML, íoi !"#$"%&!' na especiíicaçao l1ML 4 em beneíício das íolhas de
estilo. Nem todos os browsers suportam, porém, os recursos de íolha de estilo que substituem
o ALIGN. Mas as íolhas de estilo, quando presentes, sempre têm precedência. Se uma íolha de
estilos ditar um alinhamento, aquele proposto pelo atributo ALIGN é ignorado.
O elemento ·,P· de um paragraío é opcional. Como nao pode ha·er um paragraío
dentro de outro ou qualquer "(")"*+' !" -('%' dentro de um paragraío, o browser automatica-
mente íecha o paragraío quando encontra um ·P·, ·l1·, ·DIV·, ·BLOCKQUO1L·,
·PRL· ou outro elemento de bloco. Blocos em l1ML nunca podem ocorrer dentro do texto
de um paragraío.
./0/ 1&-"2&(3'4 5678 & 5698
Um outro bloco importante na organizaçao do texto é o cabeçalho. la seis ní·eis diíe-
rentes. O mais importante é deíinido com ·l1· e pode ser usado para destacar, por exemplo,
o título de um documento. Nao coníunda esse título com ·1I1LL·, elemento de ·lLAD·,
que deíine um título para a pagina mas nao aparece na mesma.
<h1>La Cosa Nostra Pizzaria i Ristorante</h1>
Obser·e no seu browser que o texto aparece grande e em negrito ,por causa da íolha de
estilos do browser,.
Assim como ·P·, ·l1· também suporta o atributo ALIGN, portanto, pode-se usa-lo
para colocar o título alinhado pelo centro:
<h1 align=center>La Cosa Nostra Pizzaria i Ristorante</h1>
Além do l1, ha mais 5 ní·eis de cabeçalho que podem ser usados para organizar os pa-
ragraíos de uma pagina em seçoes. Veja na íigura abaixo o código e o resultado no browser de
textos marcados com l1, l2, l3, l4, l5 e l6.
36
Parte 2 - l1ML

!"#" %&'()*+ ,' -./0* 1234
Os paragraíos sempre têm uma linha em branco separando-os dos outros blocos ,por
causa da íolha de estilos do browser,. Pode-se quebrar uma linha e ainda assim se manter no
mesmo paragraío usando o marcador ·BR·. ·BR· é um marcador ·azio. Nao pode ter des-
critor de íechamento. ·BR· sempre quebra a linha na posiçao onde íor colocado:
<p align=center>"Tradição, qualidade e<br>
segurança são nossas<br>
prioridades"</p>
Quebras de linha só podem ser usadas dentro de paragraíos, cabeçalhos e outros ele-
mentos de bloco que contém texto.
!"!" 5./0*+ 06).76/8*.+ 1934
Linhas horizontais decorati·as podem ser produzidas pelo ·lR·. ·lR· é como
·BR·. Nao tem marcador íinal de íechamento. Acontece no lugar onde o colocarmos e ainda
introduz uma quebra de linha antes e depois.:
<h1 align=center>La Cosa Nostra Pizzaria i Ristorante</h1>
<hr>
<h2 align=center>Una impresa de la famiglia Corleone</h2>
A linha atra·essa toda a largura do browser. Podemos usar o atributo \ID1l para tor-
na-la menor. \ID1l aceita um número absoluto em pixels ou uma porcentagem:
<hr width=50%>
la ·arios outros atributos. Consulte a documentaçao ,ou digite a tecla l1 quando esti·er
com o cursor dentro do elemento ·lR· no 96:';.8', e teste os possí·eis resultados no seu
browser.
Linhas horizontais sao elementos de bloco, ou seja, eles quebram a linha antes e depois.
Você nao pode ter uma linha horizontal dentro de um paragraío ou cabeçalho.
!"<" =.8*>?6 ,' (-6@6 125A=B%CADE4
Com a íunçao de dar o destaque de um bloco de @.8*>?6 em um texto, íoi criado o descri-
tor ·BLOCKQUO1L·. Na época em que ha·ia mais de dois browsers di·idindo as preíe-
rências na \eb, alguns browsers o íormata·am em italico, outros em íonte menor, outros en-
denta·am. loje, com o monopólio F.@)6+6G8HI'8+@*J', todos os browsers íormatam
·BLOCKQUO1L· endentado e com uma linha em branco antes e depois. O que era uma
questao de estilo acabou ·irando regra de íormataçao. Na íalta de um mecanismo de controle

Parte 2 - l1ML
graíico como as íolhas de estilos, a íunçao de ·BLOCKQUO1L· acabou reduzida a bloco
endentado`.
<blockquote>
<p>"Tradição, qualidade e<br>
segurança são nossas<br>
prioridades"</p>
</blockquote>
Mas ·BLOCKQUO1L· nao de·e ser u-
sado pensando só na aparência. Qualquer íolha
de estilos pode endentar um paragraío ou mudar
a aparência de ·BLOCKQUO1L·. Com o su-
porte crescente de CSS, o uso de
·BLOCKQUO1L· apenas com a íinalidade de
endentar o texto de·e diminuir.
!"#" %&'() *+,-.)+/0(01) 23456
Vimos que o l1ML ignora espaços, tabulaçoes, no·as-linhas e coisas parecidas. Se isto
íor necessario, podemos resol·er o problema usando o descritor ·PRL·. Lsse descritor pre-
ser·a as características do texto pre·iamente íormatado e le·a em consideraçoes as no·as-
linhas, espaços e tabulaçoes:
<pre>
<p>Número de Assassinatos La Cosa Nostra La Santa Camorra
Janeiro 1 12
Fevereiro 7 12
Março 0 6
Abril 3 9
Total 11 39</p></pre>
Se a largura da tabela passar da largura da pagina, é só ajustar diminuindo um pouco o
número de tabulaçoes ou trocando por espaços que o ajuste íica períeito.
la íormas melhores de criar tabelas em l1ML, como ·eremos adiante.
38
!"#$% ' ( )*+,
!"#" %&'(' )*+,-.(' /* 0*12' 34567
!-.%/-0 .%12.2# 1#2"# .23204%0 5" 67825" 6%9-0 /"20 .23%#0-0 /-$23-0: ;$< 6-# /-$23-0
.% %0$#=$=#" 9>821" ?/%0/- @=% - #%0=9$".- 5A- "6"#%B" 320="9/%5$%C 6-.% 0%# =0".- 6-# =/
/%1"520/- .% D=01" -= 25.%E"BA-F: G-/ H-9I"0 .% %0$29-C 6-.%/-0 "$#2D=2# =/ %0$29- $-$"9(
/%5$% .2H%#%5$% " =/" 0%BA- ." 67825"C 1-/- /=."# H=5.-C H-5$%0C 1-#%0C %$1:
J .%01#2$-# KLMNO < =0".- 6"#" .%H252# =/" 5-3" 0%BA- ?-= .2320A-F: P0$% .%01#2$-# 5A-
H"Q 5"." 0% 5A- $23%# "$#2D=$-0: R/ .-0 "$#2D=$-0 < ;,MSTC @=% $%/ " /%0/" H=5BA- @=% -
;,MST .% K!O % K)UO 0> @=% "H%$" =/ D9-1- 25$%2#-C 1-/ $-.-0 -0 .%01#2$-#%0 @=% I-=3%#
.%5$#-: ; 6#%1%.V512" -1-##% .% .%5$#- 6"#" H-#": W% I-=3%# =/ K! ;,MSTX1%5$%#O .%5$#-
.% =/ KLMN ;,MSTX#28I$OC - "925I"/%5$- .% K!O 6#%3"9%1%:
KLMNO < =/ .-0 .%01#2$-#%0 /"20 Y$%20 %/ 67825"0 H-#/"$"."0 6-# H-9I"0 .% %0$29-:
!"8" %&'(' /* *+/*-*1' 3944:;<<7
J D9-1- K;LLZPWWO $%/ "6%5"0 H25"92.".% H=512-5"9: M5.21" =/ D9-1- @=% 1-5$</
=/ %5.%#%B-: J D#-[0%# "6%5"0 H-#/"$" - $%E$- 1-5$2.- %/ K;LLZPWWO .% H-#/" .2H%#%5(
$% ?%/ 2$7921-C 6-# %E%/69-F: G-/- $%/ 6-=1- 3"9-# 6"#" 1-5$#-9"# " "6"#V512" .% =/" 67825"C
< 6-=1- =0".- % #"#"/%5$% < 8%#".- 6-# H%##"/%5$"0 8#7H21"0 1-/- =-'+>?@)* -= 4-*@AB*@C*-:
\ Y$29 %/ 192%5$%0 5A- 8#7H21-0 1-/- /%1"520/-0 .% D=01"C H29$#-0C %$1:
<ADDRESS>
<P>Copyright &copy 2000,
<a href="mailto: fulano@tal.com">Fulano de Tal</a>.
<P>Rua Agá tê Eme-éle, 4, Cê-ésse Ésse, WebCity, Internet.
</ADDRESS>

]^
Parte 2 - l1ML
:. íi.ta.
l1ML deíine ·arias íormas de apresentar listas de iníormaçao em um documento. 1oda lista é
um elemento de bloco que possui um descritor inicial e íinal e só pode conter "itens de lista".
Os itens de lista também sao blocos que podem conter texto, paragraíos ou ainda outras listas.
l1ML deíine três tipos de listas: as listas ordenadas, marcadas pelos descritores ·OL· e
·,OL·, as listas nao-ordenadas marcadas por ·UL· e ·,UL· e as listas de deíiniçoes, mar-
cadas por ·DL· e ·,DL·.
:.1. íi.ta. vao·oraevaaa. ·|í>, ·íí>
Nas listas UL, cada item da lista é contido
dentro de ·LI· e ·,LI·. O browser geral-
mente íormata os itens com marcadores ,boli-
nhas pretas,. Veja a imagem ao lado e o código
abaixo:
<ul>
!"#$Pizza a moda del Capo!%"#$
!"#$Pizza di pepperonni!%"#$
!"#$Pizza siciliana!%"#$
</ul>
Você também pode criar listas de ní·el
hierarquico iníerior. O browser íormatara a
sub-lista de uma íorma diíerente ,geralmente
endentada e com um marcador diíerente,. Por
exemplo, para íazer a seguinte lista:
item 1
item 2
º item 2.1
º item 2.2
item 3
pode-se utilizar o seguinte código:
40
Parte 2 - l1ML
!"#$
<li>item 1</li>
<li>item 2</li>
!"#$
<li>item 2.1</li>
<li>item 2.2</li>
!&"#$
<li>item 3</li>
!&"#$
!"#" %&'()' *+,-.),)' /0%12 /%31
As listas ordenadas sao marcadas pelos descritores ·OL· e ·,OL·. Da mesma íorma
que nas listas nao-ordenadas, cada item é contido dentro de ·LI·. Poderíamos numerar as
pizzas trocando os UL por OL:

!'#$
<li>Pizza a moda del Capo</li>
<li>Pizza di pepperonni</li>
<li>Pizza siciliana</li>
!&'#$

1. Pizza a moda del Capo
2. Pizza di pepperonni
3. Pizza siciliana

As listas e seus itens podem ter atributos que mudam suas características como tipo de
marcador, início da contagem ,para listas ordenadas,, tipo de numeral ,arabico, latino, etc., A
maior parte dessas alteraçoes pode também ser realizada em íolhas de estilo.
!"4" %&'()' ,- ,-5&.&67-' /8%12 /8912 /881
linalmente, existem as listas de deíiniçoes. Lsse tipo de lista é usado quando ha ·arios
tópicos curtos acompanhados de uma deíiniçao mais longa ,em um glossario, por exemplo,.
Alista de deíiniçoes consiste de um conjunto de três descritores:
·DL· e ·,DL· que delimitam toda a lista,
·D1··,D1· que marca o termo, e
·DD··,DD· marca a deíiniçao.
A imagem ao abaixo íoi produzida com os descritores ao lado:

41
!"#$% ' ( )*+,
<dl>

<dt>Caos</dt>
<dd>O nada absoluto que exis-
tia antes do princípio das coi-
sas.</dd>
<dt>Urano</dt>
<dd>O deus dos Céus.</dd>
<dt>Gaia</dt>
<dd>A deusa da Terra.</dd>
<dt>Cronos</dt>
<dd>Saturno. Filho da união
de Gaia com Urano. Deus do Tem-
po.</dd>

</dl>
-'
Parte 2 - l1ML
!" $%&'()*
Ja ·imos que uma pagina l1ML é uma mera pagina de texto. Mesmo com imagens, ela
continuara a ser uma mera pagina de texto, nao ·ai aumentar de tamanho pois as imagens
sempre íicarao separadas. As imagens sao carregadas na hora em que o browser lê a pagina,
atra·és de um ·ínculo ,link, para a sua localizaçao atra·és de uma URL. Lla pode estar no
mesmo diretório que a pagina ou em outra parte do mundo. Desde que se iníorme o seu ende-
reço corretamente e que a rede nao esteja sem comunicaçao, o browser localizara a imagem e a
colocara na pagina no local onde esti·er o descritor ·IMG· que a solicitou.
!"+" , -./(0- 1$234
·IMG· é como ·BR· e ·lR· que nao marcam texto, mas uma posiçao, por isso nao
têm descritores de íechamento. No caso de ·IMG·, o atributo SRC é obrigatório pois é ele
quem iníorma a localizaçao da imagem atra·és de sua URL. A URL pode ser tanto um endere-
ço absoluto ,http://alguma.coisa/, como um endereço relati·o a URL da própria pagina.
Por exemplo, se a URL pagina esta em http://blablabla.com/dirdir/pagina.html e a
URL da imagem que a pagina carrega é http:,,blablabla.com,dirdir,imagem.gií, pode-se sim-
plesmente chamar a imagem pelo endereço relati·o "imagem.gif", usando ·IMG
SRC~"imagem.gií"· na posiçao, relati·a ao texto, onde ela de·a aparecer.
56$* 7(8&09:&*
O browser, como esta remoto, precisa utilizar uma 56$ &.*-8;0& que contenha o protoco-
lo, o nome da maquina onde roda o ser·idor e a porta de ser·iços ,se nao íor a porta padrao,.
A URI usada internamente no ser·idor ,o sistema de arqui·os ·irtual, contém apenas o cami-
nho absoluto dentro do mesmo ,/, /Imagens ou /Videos,. As paginas l1ML disponí·eis ·ia
ser·idor \eb estao armazenadas em determinada maquina e diretório e podem usar, para co-
municaçao entre si, 56$* 7(8&09:&* a sua localizaçao.
As URIs relati·as sao úteis em l1ML. Um ·ínculo em uma pagina pode se reíerir a um
arqui·o que ocupa o mesmo diretório que ela simplesmente usando o nome do arqui·o como
URI ,e omitindo http://maquina:porta/caminho/,. Para ter acesso a um diretório anteri-
or, usa-se a notaçao Unix: ../arquivo.txt reíere-se a um arqui·o chamado arquivo.txt
localizado no diretório anterior..
43
Parte 2 - l1ML
Resumindo: ser·idores e browsers só localizam recursos usando URIs. Nao íaz sentido
escre·er C:\qualquercoisa\x.txt no browser a nao ser para utiliza-lo como ·isualizador de
paginas l1ML armazenadas !"#$!%&'(&. 1ambém nao íaz sentido usar caminhos desse tipo em
arqui·os l1ML ,como ·eremos,. Lles podem até íuncionar localmente, sem ser·idor, mas
nao mais íuncionarao quando íorem publicados em um ser·idor \eb. O ideal é usar URIs
relati·as que íuncionam em qualquer situaçao.
)*+* -!.'/$%&'(" 0& .%$1&'2
A imagem pode ser alinhada de ·arias íormas em relaçao ao texto usando l1ML ,ou ío-
lhas de estilo,. Veja abaixo alguns exemplos.
<img src="pizza_calabresa.gif" align=middle> e outros...


Use ALIGN~leít ou ALIGN~right para íazer com que o texto corra a esquerda ou a di-
reita da imagem:
<img src="pizza_calabresa.gif" align=left>
)*3* 4.%&'2."'$%&'("
Se a imagem íicar muito grande, podemos reduzi-la um pouco usando os atributos
lLIGl1 e \ID1l. Atra·és deles podemos mudar quaisquer dimensoes da imagem ao ser
exibida, em pixels. Mas cuidado! A qualidade da imagem e seu tamanho continuam os mesmos.
Carregar uma imagem gigantesca para depois reduzi-la é desperdício assim como ha perda de
qualidade ao se ampliar uma imagem pequena.
44
!"#$% ' ( )*+,
)-./)* % 0.1*) 234
5%#6%7 58 9"#" #%:;7%25;42"#
;7"<%25= >5"2:4 %55%5 "$#;?@$45
%7 $4:"5 "5 5@"5 ;7"<%25 A47
"5 5@"5 :;7%25B%5 6%#:":%;#"5
$4#2" 4 A"##%<"7%2$4 :" 9C<;2"
7";5 #C9;:4= !4# D@% ;5$4E !4#(
D@% 4 ?#4F5%# 234 6"; 9#%A;5"#
A"GA@G"# "5 :;7%25B%5 :" ;7"(
<%7 9"#" 5"?%# 42:% A4G4A"# 4
$%H$4= I% 234 J4@6%# )-./)*
% 0.1*) %G% 58 94:% 745$#"#
4 $%H$4 :%94;5 :% 5"?%# 4 $"7"(
2J4 :"5 ;7"<%25= !"#" :%5A4?#;#
4 $"7"2J4 :" ;7"<%7K @5% @7
%:;$4# <#CL;A4 A474 4 !"#$% 4@ &'()(*'(+= M@% $"G @7" 9;NN" %5$;A":"E
<img src="pizza_calabresa.gif" align=left height=100 width=20>
I% 64AO 234 <45$4@ :" 9;NN" %5$;A":"K @5% "5 :;7%25B%5 A4##%$"5 %7 9;H%G5 D@% 534
)-./)*PQRS % 0.1*)PQRT=
U;2:" JC "G<@25 "$#;?@$45 D@% 9%#7;$%7 D@% 5% %79@##% 4 $%H$4 9"#" G42<% :" L;<@#"= V"
6%#:":%K A#;"7 @7" 7"#<%7 ;26;5W6%G "4 #%:4# :%G"= )I!UX- % YI!UX-K #%59%A$;6"7%2$%
"A#%5A%2$"7 7"#<%25 J4#;N42$";5 % 6%#$;A";5K %7 9;H%G5K %7 64G$" :" L;<@#"= *4:45 45 "$#;?@$45
:% "G;2J"7%2$4 94:%7 5%# 5@?5$;$@W:45 94# L4GJ"5 :% %5$;G4=
<img src="pizza_calabresa.gif" align=left hspace=10>

TZ
Parte 2 - l1ML
!" $%&'()(*+% ,- )-.)%
/01201- -2-'-1)34
la ·arios descritores que têm a
íunçao de atribuir um papel a
trechos de texto. Na pratica, este
"papel" se reílete na íorma de um
destaque diíerente. Somente com
íolhas de estilo o "papel" é apro-
·eitado totalmente.
Os descritores de íormata-
çao de caracteres sao de dois ti-
pos:
descritores 25607%3 ,aqueles
que tem uma 891*+%,:
·S1RONG·, ·CI1L·,
·DlN·, ·CODL·,
·Q·, ·VAR·, ·KBD·,
·SAMP·, ·LM·,
·SPAN·, ·ABBR· e
·ACRON\M·

os 8:307%3 ,aqueles que nao
tem íunçao estrutural, só
(;(&<170(,: ·B·, ·I·,
·BIG·, ·SMALL·,
·S·, ·S1RIKL·,
·SUB·, ·SUP·, ·11·,
·U·
Lsses elementos ser·em para marcar texto dentro de blocos que os contém como para-
graíos, cabeçalhos, células de tabelas, etc. Os descritores íísicos têm um nome associado a sua
46
Parte 2 - l1ML
aparência, mas nada impede que uma íolha de estilos mude isto. Os descritores lógicos têm
uma aparência !"#$%&' mas o que interessa é a sua íunçao ,CI1L de citaçao, ABBR de abre·ia-
çao, VAR de ·aria·el,. Alguns sequer mudam a aparência do texto a nao ser que um estilo seja
atribuído atra·és de CSS ,·SPAN·, ·ABBR· e ·ACRON\M·, por exemplo, nao mudam a
aparência do texto,.
A íigura acima mostra a aparência !"#$%&' de alguns dos elementos. A sua íunçao esta
descrita abaixo:
Os elementos abaixo signiíicam mais pela sua íunçao que pela sua aparência. Sao ele-
mentos lógicos.
LM texto griíado
S1RONG texto íortemente griíado
DlN deíiniçao
CODL código
SAMP amostra
KBD teclado
VAR ·aria·el
CI1L citaçao
SAMP amostra
ABBR abre·iaçao
ACRON\M sigla
SPAN container genérico
Q texto de citaçao ,entre aspas,

Lstes outros elementos têm um nome que eníatiza a sua aparência ,sao os elementos íí-
sicos,. lolhas de estilo, porém, podem alterar tudo.

11 texto de espaçamento íixo
I texto em italico
B texto em negrito
S texto riscado ,mesmo que S1RIKL,
S1RIKL texto riscado
U texto sublinhado
BIG texto em íonte maior
SMALL texto em íonte menor
SUB texto sub-escrito
SUP texto sobre-escrito

Parte 2 - l1ML
!" $%&'()* + ,-%&./'*
Uma ancora é qualquer um dos lados de um ·ínculo de hipertexto. Lm outras pala·ras, tanto a
origem quanto o destino de um link sao ancoras. Você pode criar uma ancora destino em uma
pagina l1ML usando o elemento ·A· com atributo NAML ,para dar um nome a ancora,:
<A NAME="cap1"></A> <H1>Capítulo 1 </H1>
O descritor pode íicar ·azio, ja que só marca uma posiçao, mas o marcador íinal é ne-
cessario.
Para criar um ·ínculo a ancora, utiliza-se o mesmo elemento ·A·, em outro lugar da
pagina ou em outra pagina, marcando um texto ou imagem que ser·ira de ponto de partida,
indicando o destino atra·és do atributo lRLl:
<A HREF="#cap1">Ir até o capítulo 1</A>
O trecho acima ·incula a írase "Ir ao capítulo 1" com a posiçao onde esta a ancora
"cap1", desde que ela esteja deíinida no mesmo arqui·o.
Para especiíicar um destino externo, é preciso usar uma URI ,relati·a ou absoluta,. A
URI pode apontar para qualquer coisa ,nao precisa ser uma pagina l1ML,.
<A HREF="http://www.abc.com/dados/index.html">Ir até o arquivo In-
dex.html</A>
Se o destino íor uma determinada seçao da pagina, pode-se complementar a URI com o
íragmento correspondente ao nome da ancora deíinida no arqui·o:
<A HREF="http://www.abc.com/dados/index.html#cap1">Ir até o capítulo
1 no arquivo Index.html</A>
48
!"#$% ' ( )*+,
·. 1abeta.
-$. " /%#012 '345 )*+, 06 72#8%9:" ;%:20 <% %0$#=$=#"# :872#;">12 ?=% 7200% 72#;"$"<" 0%(
?@%89:"A;%8$%5 2= 0%B"5 2 7A=C2 <2 $%C$2 % :;"D%80 %#" E8:92 % "928$%9:" <" %0?=%#<" F"#" "
<:#%:$" % <% 9:;" F"#" G":C23 H12 I"/:" ;%:20 <% <:0F2#5 F2# %C%;FA25 <2:0 F"#JD#"720 A"<2("(
A"<2 " 812 0%# ?=% $2<2 2 $%C$2 7200% 72#;"$"<2 =0"8<2 %0F">20 % $"G=A">K%0 % F20$%#:2#;%8$%
:89A=L<2 %; =; GA292 M!NOP3 - :8$#2<=>12 <"0 $"G%A"05 F#2F20$" 82 )*+, Q34 R;"0 "<2$"(
<" F%A20 G#2S0%#0 ;":0 F2F=A"#%0 92;2 =;" %C$%8012 <2 )*+, '34T5 $2#82= F200L/%A " 9A"00:(
7:9">12 <" :872#;">12 92; ;"#9"<2#%0 )*+, ?=% 0%#:" 72#;"$"<" 82 G#2S0%# %; A:8I"0 %
92A=8"03
U0 ;"#9"<2#%0 %#"; :8:9:"A;%8$% <%0$:8"<20 V 2#D"8:W">12 <% <"<20 %; 72#;" <% $"G%(
A"05 ;"0 %; F2=92 $%;F2 F"00"#"; " 0%# =0"<20 F%A20 X%G <%0:D8%#0 F"#" 2G$%# ;":2# 928$#2(
A% 02G#% " "F#%0%8$">12 <2 928$%E<2 <"0 0="0 FJD:8"03 Y;"D%80 92; F"#$%0 <:8Z;:9"05 FJD:8"0
<% ;":0 <% =;" 92A=8" % 928$#2A% <" A"#D=#" <" FJD:8" 012 "AD=;"0 <"0 02A=>K%0 F200L/%:0 %;
)*+, =0"8<2 $"G%A"03
!2# $%# $"8$"0 =$:A:<"<%05 "0 $"G%A"0 012 =; $6F:92 92;FA%C2 %; )*+,5 ;"0 "0 F200:G:(
A:<"<%0 ?=% 27%#%9%; 92;F%80"; 2 %072#>2 <% 928I%9%# G%; 9"<" =; <20 0%=0 "$#:G=$203
·.1. Privci¡ai. etevevto. e.trvtvrai. ·1.ßíí>, ·1R>,
·1D> ov ·1í>
[;" $"G%A" F#%9:0" $%# 82 ;L8:;2 $#\0 %A%;%8$20 )*+,3 U %A%;%8$2 M*-],OP #%F#%(
0%8$" " $"G%A" % 928$.; =;" 2= ;":0 A:8I"05 #%F#%0%8$"<"0 F%A2 %A%;%8$2 M*NP3 U %A%;%8$2
M*NP . 2 E8:925 <%8$#2 <% =; GA292 M*-],OP333M^*-],OP ?=% 928$.; " :872#;">12 <"
$"G%A"3 O00" :872#;">12 ¡reci.a %0$"# <%8$#2 <% %A%;%8$20 M*_P 2= M*)P5 ?=% 012 20 E8:920
F%#;:$:<20 <%8$#2 <% =; M*NP3
M*NP333M^*NP #%F#%0%8$" =;" A:8I" <" $"G%A" R1abte RorT3 `"<" A:8I" F2<% $%# =;" 2=
;":0 9.A=A"0 <% <"<20 %; GA2920 M*_P333M^*_P R1abte DataT 2= M*)P333M^*)P R1abte íea·
aerT3 U 8E;%#2 <% 92A=8"0 <" $"G%A" .5 F2#$"8$25 <%#:/"<2 <2 8E;%#2 <% 9.A=A"0 928$:<"0 82
GA292 M*NP333M^*NP ?=% $:/%# ;":0 GA2920 M*)P333M^*)P 2= M*_P333M^*_P 3
`2;2 20 %A%;%8$20 M*_P5 M*)P % M*NP 812 F2<%; 292##%# <%8$#2 <% GA2920 <2
;%0;2 $:F25 20 <%09#:$2#%0 7:8":0 M^*_P5 M^*)P % M^*NP 012 2F9:28":03
ab
Parte 2 - l1ML
Os exemplos abaixo ilustram tabelas simples. O código l1ML:
<p><table border>
<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr>
<tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr>
<tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </tr>
</table>
resulta na seguinte íormataçao:
1,1 1,2 1,3
2,1 2,2 2,3
3,1 3,2 3,3

Lste outro exemplo
<TABLE BORDER=1>
<TR><TD>Mercúrio</TD><TD>Venus</TD><TD>Terra</TD></TR>
<TR><TD>Marte</TD><TD>Júpiter</TD><TD>Saturno</TD></TR>
<TR><TD>Urano</TD><TD>Netuno</TD><TD>Plutão</TD></TR>
</TABLE>
produz:

!"#" %&'()& *(+ ',-.&*
BORDLR é um atributo de ·1ABLL· que íaz com que a tabela seja desenhada com
uma borda .(/&0)1 ,1 pixel,. Se o nome BORDLR nao esti·er presente, a borda nao aparecera,
embora o espaço de 1 pixel em ·olta da tabela permaneça. Veja o exemplo abaixo ,tabela sim-
ples sem bordas,:
<TABLE>
<TR><TD>Maranhão</TD><TD>Piauí</TD><TD>Ceará</TD></TR>
<TR><TD>Rio Grande do Norte</TD><TD>Paraíba</TD>
<TD>Pernambuco</TD></TR>
<TR><TD>Alagoas</TD><TD>Sergipe</TD><TD>Bahia</TD></TR>
</TABLE>
50
Parte 2 - l1ML
Os elementos ·1D· e ·1l· de ·1ABLL· podem conter qualquer texto ou elemen-
tos l1ML utilizados dentro de ·BOD\·, como imagens:
<table>
<tr><td><img src="ball.gif"></td> <td>Altímetro </td></tr>
<tr><td><img src="ball.gif"></td> <td>Taquímetro </td></tr>
<tr><td><img src="ball.gif"></td> <td>Indicador ...</td></tr>
<tr><td><img src="ball.gif"></td> <td>Bússola </td></tr>
<tr><td><img src="ball.gif"></td> <td>Nível de ... </td></tr>
<tr><td><img src="ball.gif"></td> <td>Termômetros </td></tr>
</table>
!"#" %&'()*
O elemento ·1ABLL· contém ·arios outros atributos que alteram a aparência de toda
a tabela. BORDLR~·alor permite especiíicar a largura da borda da tabela atra·és de um ·alor
absoluto em pixels. A tabela abaixo possui uma borda de 10 pixels:

<TABLE BORDER=10>
<TR><TD><a href="estate.html">Estate</a></TD>
<TD><a href="autunno.html">Autunno</a></TD></TR>
<TR><TD><a href="primavera.html">Primavera</a></TD>
<TD><a href="inverno.html">Inverno</a></TD></TR>
</TABLE>
!"+" ,*-).)/012&
CELLSPACING=valor controla a quantidade de espaço entre as células de uma tabela.
Normalmente esse espaço é de 1 pixel. CELLPADDING=valor controla a quantidade de espaço
entre o texto da célula e suas bordas ,margens internas das células,. O ·alor (03)452 é de 2 pixels,
portanto, se as bordas íorem zero, ha·era 3 pixels entre os elementos da tabela a nao ser que
esse espaço seja alterado com CELLSPACING e CELLPADDING. Veja os exemplos abaixo:
51
Parte 2 - l1ML
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR><TD>Aranha</TD><TD>Lacrau</TD><TD>Escorpião</TD></TR>
<TR><TD>Barata</TD><TD>Formiga</TD><TD>Mosca</TD></TR>
</TABLE>
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
(...) </TABLE>
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
(...) </TABLE>
Se os atributos BORDLR, CLLLPADDING e CLLLSPACING íorem deíinidos com o
·alor "0", nao ha·era espaço algum entre os elementos da tabela a nao ser que o espaço seja
adicionado de íorma explícita ,linhas em branco, &nbsp; tabulaçoes ou espaços dentro do
bloco ·1D·,.
!"#" %&'()'& *& +&,-.&
O atributo \ID1l~numero ou percentagem permite especiíicar a largura da tabela, a-
tra·és de uma medida absoluta em pixels ou atra·és de uma percentagem da largura ·isí·el da
pagina. Sem \ID1l, a tabela ocupara apenas o espaço horizontal necessario para conter to-
dos os seus elementos, as bordas e margens. Se uma tabela íor deíinida com \ID1l~100°,
ela ocupara toda a largura ·isí·el da pagina e mudara de tamanho caso a janela seja redimensi-
onada ,e a area ·isí·el seja alterada,. Se íor deíinida com \ID1l~500, tera uma largura íixa e
que nao mudara mesmo com o redimensionamento da janela.
No uso de tabelas como íerramenta para o .&/0)+ das paginas, \ID1l é usado para de-
terminar a largura da pagina que esta contida em uma tabela de única célula. Paginas criadas
para a resoluçao de 640x480 sao tipicamente deíinidas dentro de tabelas com largura de 600
pixels. Para 800x600, é comum usar ¯50 pixels:
52
!"#$% ' ( )*+,
<body>
<table width=750>
<tr><td> (... a página inteira ...) </td></tr>
</table>
</body>
-. %/%012. "3"4/. 56 78"9 $"3%2"9: ; 1#40%4#" <=. 1.9984 . "$#438$. >?@*): ; 9%(
A8<7" 1.9984 . "$#438$. >?@*)BCDE:
<TABLE BORDER>
<TR><TD>16</TD> <TD>25</TD> <TD>26</TD></TR>
<TR><TD>34</TD> <TD>40</TD> <TD>43</TD></TR>
</TABLE>

<TABLE BORDER WIDTH="50%">
<TR><TD>16</TD> <TD>25</TD> <TD>26</TD></TR>
<TR><TD>34</TD> <TD>40</TD> <TD>43</TD></TR>
</TABLE>
!"#" %&'()*+ ,-./0/-1*231'- 3 0-)3.
@% F.#0" "<62.A" ". "$#438$. >?@*)G )H?I)*B<80%#. .8 1%#J%<$"A%0 1%#04$% %9(
1%J4F4J"# " "2$8#" 7" $"3%2": K 981.#$% " %99% #%J8#9.G 1.#L0G <=. L J.<949$%<$% %0 3#.M9%#9
N8% <=. 981.#$"0 $.$"20%<$% . )*+, O:
; $"3%2"G 9% $4P%# 80" 2"#A8#" 0%<.# N8% . %91"Q. 5.#4R.<$"2 P49SP%2G 9%#6 "24<5"7" 1%2"
0"#A%0 %9N8%#7" 7" 16A4<" " <=. 9%# N8% 1.998" . "$#438$. ;,?I- J.0 . P"2.# T#4A5$U VW
74#%4$"X .8 TJ%<$%#U: )Y!;ZH % [Y!;ZH 1.7%0 9%# 89"7.9 1"#" "J#%9J%<$"# %91"Q. P%#$4J"2 %
5.#4R.<$"2 J.0. 0"#A%<9 %/$%#<"9 1"#" $.7" " $"3%2"G 7" 0%90" F.#0" J.0. 9=. 89"7.9 1.#
40"A%<9:
K "$#438$. \;Z]I^K_-@G 9% 1#%9%<$%G 7%P% #%J%3%# " _^, 7% 80" 40"A%0 N8% 4#6
9% #%1%$4# <. F8<7. 7" $"3%2"G 7" 24<5" .8 7" JL282": \IZK,K^ 1%#04$% N8% 9% 7%F4<" 80"
J.#: ` 401.#$"<$% .39%#P"# N8% " J.# 435*(&' 7" $"3%2" V*;\,HX 7"9 JL282"9 V*@X % 24<5"9 V*^X
L ')*1.,*)31'3G .8 9%a"G 9% 5.8P%# 40"A%<9 .8 J.#%9 7% F8<7. <" 16A4<"G %2"9 9%#=. P49SP%49 "$#"PL9
7" $"3%2": ?9$. L P%#7"7% "1%<"9 9% " $"3%2" .8 JL282"9 <=. $4P%#%0 "$#438$.9 \;Z]I^K_-@
Cb
Parte 2 - l1ML
e BGCOLOR. A cor da tabela podera nao ser ·isí·el se cores opacas ti·erem sido atribuídas a
blocos 1D e 1R.
Veja agora a tabela que antes construímos com ·PRL·:
<table border>
<tr><th>Número de Assassinatos</th>
<th>La Cosa Nostra</th><th>La Santa Camorra</th></tr>
<tr><td>Janeiro </td><td> 1 </td><td> 12</td></tr>
<tr><td>Fevereiro </td><td> 7 </td><td> 12</td></tr>
<tr><td>Março </td><td> 0 </td><td> 6 </td></tr>
<tr><td>Abril </td><td> 3 </td><td> 9 </td></tr>
<tr><td>Total </td><td>11 </td><td> 39</td></tr>
</table>

A tabela íica melhor alinhada pelo centro. Use ·DIV· para íazer isto.
<div align="center"><table border>(...)</table></div>
Obser·e que, por !"#$%&', os
dados de ·1l· sao alinhados
pelo centro, enquanto que os
dados de ·1D· sao alinhados
com a margem esquerda. 1udo
isto e muito mais podem ser alte-
rados usando atributos como
ALIGN, VALIGN ,alinhamento
·ertical, além, é claro, íolhas de
estilo.
1abelas tendem a íicar mui-
to complexas, principalmente
quando usadas umas dentro das
outras, o que é bastante comum
no l1ML. L importante entender como íuncionam as tabelas mas o ideal é cria-las atra·és de
programas graíicos como o ()"$*+"$,") ou -)./'0$1". As ·ezes, porém, é necessario íazer pe-
quenas alteraçoes por causa de diíerenças entre browsers e assim, saber identiíicar as células de
uma tabela no código l1ML é essencial.
2343 6&7/8$*"/'. !" 9:&%&$;
Células e linhas de tabelas podem ter seu conteúdo alinhado sem usar íolhas de estilo a-
tra·és dos atributos ALIGN e VALIGN aplicados a ·1D· e ·1R·. ALIGN pode assumir os
·alores leít, right ou center. VALIGN pode ser top, bottom ou center. Com os dois é possí·el
colocar um objeto alinhado em qualquer posiçao da tabela.
54
Parte 2 - l1ML
Qualquer ·1D· também pode ter atributos lLIGl1 e \ID1l para controlar a altura
e largura da célula, respecti·amente. Lsse ·alor pode ser absoluto ,em pixels, ou relati·o a altu-
ra,largura totais da tabela.
Mas lLIGl1 e \ID1l de·em ser usados com cautela. Nem sempre é possí·el de-
terminar essas dimensoes. Blocos ·NOBR· e ·PRL· podem íazer a tabela crescer além de
sua largura maxima estabelecida. A altura nao pode ser limitada pois o texto contido na tabela
sempre pode íazer com que ela tenha que crescer. Imagens tem todo o poder para destruir
completamente quaisquer limitaçoes de altura e largura deíinidas nas tabelas.
!"#" %&'()*+,-& ./ 01232+4
Células podem ser mescladas em uma só atra·essando colunas e linhas com os atributos
RO\SPAN e COLSPAN aplica·eis a ·1D· ou ·1l·. Com esses recursos é possí·el cons-
truir tabelas
O seguinte exemplo utiliza COLSPAN e
RO\SPAN para construir uma tabela conten-
do ·arias células mescladas:

<table border=2 cellpadding="5">
<tr>
<td colspan="3">Três colunas combinadas</td>
<td rowspan="3">Coluna 4<br>ocupa três<br>linhas</td>
</tr>
<tr>
<td rowspan="2">Coluna 1<br>2 linhas</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td colspan="2">Colunas 2 e 3 juntas</td>
</tr>
·,table·
!"!" 56)')7+,-& 89:;<=>? 89@5=A>?
8%5BCD5EF>? 8%5B>
Para poder desenhar uma tabela na tela, o browser tem que carregar todo o código antes.
Se a tabela íor muito complexa ou muito longa, isto pode demorar. Os elementos ·COL· e
·COLGROUP· permite que se iníorme o browser com antecedência o número de colunas
que a tabela tera, íazendo com que ele ganhe tempo ao desenha-la. Lsses elementos também
permitem que se aplique uma íormataçao em uma coluna ou grupo de colunas ,e nao apenas
nas linhas, como ocorre atualmente,.
55
Parte 2 - l1ML
<table border=1>
<colgroup width=100>
<col>
<col align=right>
</colgroup>
<tr><td>Dados 1.1</td><td>Dados 1.2</td><td>Dados 1.3</td></tr>
<tr><td>Dados 2.1</td><td>Dados 2.2</td><td>Dados 2.3</td></tr>
<tr><td>Dados 3.1</td><td>Dados 3.2</td><td>Dados 3.3</td></tr>
</table>
Os elementos ·1lLAD·, ·1BOD\·, e ·1lOO1· ser·em para identiíicar o cabeça-
lho, o corpo e o rodapé de uma tabela para poder controlar sua aparência e permitir ,íutura-
mente, a impressao de tabelas em múltiplas paginas com repetiçao do cabeçalho e rodapé. Se
nenhum desses elementos esti·er presente, toda a tabela sera considerada ·1BOD\·. Se
hou·er ·1lLAD·, a ocorrência de ·1BOD\· marcara o íim daquele bloco ,·,1lLAD·
é opcional nesse caso,. Veja um exemplo:
<table border=1>
<thead valign=top align=center>
<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
</thead>
<tfoot valign=bottom align=center>
<tr><td>Rodapé 1</td><td> Rodapé 2</td><td> Rodapé 3</td></tr>
</tfoot>
<tbody>
<tr><td>Dados 1.1</td><td>Dados 1.2</td><td>Dados 1.3</td></tr>
<tr><td>Dados 2.1</td><td>Dados 2.2</td><td>Dados 2.3</td></tr>
<tr><td>Dados 3.1</td><td>Dados 3.2</td><td>Dados 3.3</td></tr>
</tbody>
</table>
A utilidade de ·1BOD\·, ·1lOO1· e ·1lLAD· é maior com íolhas de estilo.
Consulte a documentaçao para conhecer os atributos usados nesses elementos para controlar a
íormataçao das tabelas.
!"#$" &'(')*+ ,-./01234
O bloco ·CAP1ION· pode ser usado dentro de ·1ABLL·...·,1ABLL· para incluir
uma legenda numa tabela. Pode-se usar o atributo ALIGN para posicionar a legenda acima ou
ao lado da tabela.
<TABLE border=1>
(...)
<CAPTION> Tabela 1: Preços e quantidade</CAPTION>
</TABLE>
56
Parte 2 - l1ML
!"# %&'(')*+, -'./'01-+,
!"#!# 2&+0+, 34' 1&*'/1( ',*5&+ 6-'./'01-+,7
O bloco ·ADDRLSS· é pouco usado atualmente. ·BLOCKQUO1L· é usado bas-
tante, porém somente para endentaçao. Isto reílete uma preocupaçao maior com a 1.1/8)051 da
pagina que com sua estrutura. Com a possibilidade de uso de íolhas de estilo, a íormataçao
oíerecida pelo l1ML perde importancia pois um estilo endentado, por exemplo, pode ser
aplicado a qualquer elemento. ·BLOCKQUO1L· entao passara a ter uma importancia me-
nor. Só seria usado com a íinalidade de marcar uma citaçao e nao meramente para empurrar o
texto um pouco para a direita. A íunçao do texto marcado é o que importa em l1ML e isto
interessa nao só a browsers mas a qualquer cliente \eb, como por exemplo, os mecanismos de
busca. Lstes nao estao interessados na íormataçao da pagina, mas na importancia de cada blo-
co. Para um mecanismo de busca, um bloco ·l1· é mais importante que um ·P· ou ·l2·
independente da aparência que ele apresente no browser. Um bloco ·ADDRLSS· pode ser
usado para íiltrar os autores de cada pagina de um site, mesmo que o texto marcado por ele
sequer altere a aparência ·isual do endereço, nome ou e-mail do autor quando mostrado na
pagina. Mas como as íolhas de estilo chegaram ha pouco tempo, ainda ha ·estígios de elemen-
tos que íoram criados com íinalidades puramente ·isuais. Lles íoram -'./'01-+, ,uso nao reco-
mendado, pelo l1ML 4.0, e podem ser substituídos por elementos no·os, mas ·ale a pena
conhecê-los pois ainda aparecem em paginas geradas por íerramentas como o 9/+)*:1;', </'=
1(>'1?'/ e @'*,01.' A+(.+,'/.
!"#B# 2&+0+ 0')*/1-+ CA%@D%EF
O Netscape 3.0 nao reconhece ·DIV ALIGN~center·. O Netscape 4 reconhece o e-
lemento ·DIV· mas nao permite que um bloco ·DIV· contenha outro bloco ·DIV·. Se o
objeti·o de um ·DIV· é meramente centrar um conjunto de paragraíos nele contidos, pode-
se substituí-lo por um bloco ·CLN1LR·...·,CLN1LR·:
!"#$%#&'
<TABLE BORDER=1>
<TR><TD> Tabela centrada na página </TD></TR>

!"#$% ' ( )*+,
</TABLE>
</CENTER>
!"#$# &'()( *+, -.+/01* 2+ '3451 678&9: + 6;&9:
-% ./01 0/2/0"# 34 5"#67#"8/ 9%:$#/ 9% 34 ;2/0/ <=>?@ABBB<C=>?@AD %2% :E/ 8/#(
4"$"#6 0/4/ /F 5"#67#"8/F 0/43:FD G3%;#":9/ 2H:I"F 5"#" G3% $/9/ / $%J$/ 8HG3% .HFK.%2B -% /
$%J$/ 8/# 7#":9% / F38H0H%:$% ./01 $%#6 G3% #/2"# " $%2" I/#HL/:$"24%:$% 5"#" .1(2/B MF$/ 5/9%
F%# N$H2 %4 2HF$"7%:F 9% 5#/7#"4"F % /3$#/F $%J$/F /:9% " G3%;#" 9% 2H:I" "3$/46$H0" 5/9% 5#%(
O39H0"# " 5#%0HFE/ 9"F H:8/#4"PQ%FB
R%:$#/ 9% 34 ;2/0/ <=>?@AD $"2.%L I"O" " :%0%FFH9"9% 9% F% G3%;#"# " 2H:I" :34 9%(
$%#4H:"9/ 5/:$/B !"#" HF$/ F%45#% 5/9%(F% 3F"# <?@AB S4 /3$#/F 0"F/FD G3%;#"# " 2H:I" :E/
T 9%F%O"9/ 4"F F% 8/# :%0%FF6#H/D 5/9%4/F G3%#%# G3% " G3%;#" /0/##" %4 34 237"# %F5%0K8H0/B
!"#" HF$/ $%45/F / %2%4%:$/ <U?@AD G3% FV $%4 3$H2H9"9% 9%:$#/ 9% 34 ;2/0/ <=>?@AB
<U?@A H:9H0" 34 5/:$/ 9% G3%;#" 9% 2H:I" %4 5/$%:0H"2B -% / ;#/WF%# 5#%0HF"# G3%;#"# 34"
2H:I" 5"#" $/#:6(2" .HFK.%2 :/ ;#/WF%#D %2% / 8"#6 :" 5/FHPE/ <U?@AB -% HF$/ :E/ 8/# :%0%FF6#H/
X$/9/ / 5"#67#"8/ %F$6 .HFK.%2YD %:$E/ %2% H7:/#"#6 / <U?@AB
<NOBR>
<P>Se tiver que ser quebrado, que ocorra aqui<WBR> e não em outro
lugar.</P>
</NOBR>
> 0/45/#$"4%:$/ 9/ <=>?@A 5/9% F%# "52H0"9/ " ;2/0/F <RMZAD 5"#67#"8/F H:9H.H(
93"HFD 0";%P"2I/F <)[A " <)\A % /3$#/F ;2/0/F "$#".TF 9% 8/2I"F 9% %F$H2/FB > 3F/ 9%
<=>?@A "H:9" 5/9% F%# O3F$H8H0"9/ 5"#" 7"#":$H# " 0/45"$H;H2H9"9% 0/4 ;#/WF%#F 7+<*)1=+
G3% :E/ H452%4%:$"4 $/$"24%:$% " %F5%0H8H0"PE/ 9% 8/2I"F 9% %F$H2/B
!"#># ?'+,+4<(* 2+ +*<3'( @2+=0+)12(* 4( ABCD >#"E
=E/ 5#%0HF"4/F 8H0"# F"$HF8%H$/F 0/4 / 83:9/ 0H:L"D 2%$#"F 5#%$"F % 2H:]F "L3HFB !/9%4/F
439"# $/9"F "F 0/#%FB Z%#%4/F 83$3#"4%:$% 0/4/ 8"L%# $39/ HF$/ 3F":9/ 8/2I"F 9% %F$H2/D 4"F
/ )*+, $"4;T4 /8%#%0% 4%H/F 9% #%"2HL"# "2$%#"PQ%F 9% %F$H2/B ^ %F5%0H8H0"PE/ )*+, #%0/(
4%:9" 8/#$%4%:$% G3% %FF%F %2%4%:$/F :E/ F%O"4 3F"9/FD 4"F G3% F% 5#%8H#" 3F"# 8/2I"F 9%
%F$H2/D 4"FD 0/4/ / F35/#$% " 8/2I"F 9% %F$H2/ :E/ 0I%7" "/F ;#/WF%#F .%#FE/ _B`D % ./01 "H:9"
5/9% $%# 02H%:$%F 0/4 $"HF ;#/WF%#F G3% :E/ .E/ 8H0"# F"$HF8%H$/F 0/4 567H:"F 4/:/0#/46$H0"FD
T H45/#$":$% 0/:I%0%# %FF%F %2%4%:$/FB a 4%9H9" %4 G3% /F ;#/WF%#F .%#FE/ _B` 8/#%4 %:(
$#":9/ %4 %J$H:PE/D 9%.%(F% 7#"93"24%:$% ";":9/:"# $/9" " 8/#4"$"PE/ 9% 0/#%F % 8/:$%F "(
$#".TF 9/ )*+,D 5/HF 5#%O39H0" %:/#4%4%:$% " 4":3$%:PE/ 9% 34 FH$%D "2T4 9% $/#:6(2/
4"H/# % 4"HF F3O%H$/ " %##/FB
bc
Parte 2 - l1ML
!"#$# &'()*+',- ./ +01 234)51 6789: 1'()*+',-;
Os atributos podem ser mu-
dados atra·és do descritor
·BOD\·. Varios atributos permi-
tem deíinir uma imagem de papel
de parede, uma cor de íundo, cor
para todo o texto e links. As cores
sao iníormadas usando ou um có-
digo RGB em hexadecimal ou um
nome padronizado.
Para mudar a cor de íundo,
utilizamos o atributo BGCOLOR.
<body bgcolor="white"
text="green" link="red"
vlink="black">
Usamos nomes de cores. Se quiséssemos usar uma cor diíerente das 16 cores daquela ta-
bela basica ,·eja apêndice,, precisaríamos usar códigos hexadecimais. Os códigos sao um con-
junto de 6 algarismos hexadecimais precedidos de um "4". Pode-se, atra·és deles, obter mais
de 200 cores diíerentes.
O papel de parede é uma imagem que é repetida ·arias ·ezes no íundo. Pode-se usar
qualquer imagem mas ela nao de·e atrapalhar a leitura do texto. De·e ser iníormada a URL
completa ou relati·a:
<body background="fundo.jpg"
bgcolor="white" text="green" link="red" vlink="black">
!"#<# =,(/- / >,5'/- 6?8@A;
Cores de texto indi·iduais, íontes e tamanhos podem ser alterados com um descritor )5B
C)5/ chamado ·lON1·, que pode receber três atributos:
SIZL, que iníorma o tamanho ,·ariando de 1 a ¯ ou de -3 a -3,,


lACL, que iníorma o nome exato de uma íonte ou uma lista delas separadas por
·írgula ,terminando em uma íonte genérica serií, sans-serií ou monospace,, e
COLOR, que iníorma uma cor em código hexadecimal ,por exemplo 4ll0080, ou
pelo nome ,red, blue, na·y,, da mesma íorma como é íeito em BOD\.
·lON1· é totalmente dispensa·el íorem utilizadas íolhas de estilo, mas, como alguns
browsers ainda nao suportam íolhas de estilo, pode-se usar esse elemento para garantir uma
aparência melhor as paginas \eb.
59
!"#$% ' ( )*+,
<li>
<font face="Palatino, serif" size=5 color="#80001F">
Pizza a moda del Capo</font>
</li>
- ."/0# 1"#$% 2"3 4%##".%5$"3 6#74/8"3 9:% 8#/". 176/5"3 )*+, :3". ;<=>*? 1"#"
$%# 805$#0@% 30A#% " "1"#B58/" 20 $%C$0D -@6:53 /650#". $0$"@.%5$% " %3$#:$:#" E":.%5$"520 "
405$% 2% ;!? %. F%G 2% :3"# ;)H?ID J3$0 5K0 3L 1#%M:2/8" " %3$#:$:#" 20 )*+,N 9:% $".(
AO. $%. 0:$#"3 4/5"@/2"2%3 "@O. 2% 40#."$"# $%C$0 %. :. A#0P3%# 6#74/80N 80.0 2/4/8:@$" "
."5:$%5QK0 20 3/$% 80. 40@R"3 2% %3$/@0D *:20 0 9:% O 1033SF%@ 4"G%# 80. ;<=>*? 3% 102%
4"G%# 80. 40@R"3 2% %3$/@0 % A%. .%@R0#D =3 A#0P3%#3 !"#$%&'" )*+N ,-#".-"# /0'12.". 3*+ % )*+
3:10#$". "3 1#01#/%2"2%3 2% 40@R"3 2% %3$/@0 9:% 3:A3$/$:%. $0$"@.%5$% " 5%8%33/2"2% 2% 3%
:3"# ;<=>*?N 9:% O :. %@%.%5$0 2%1#%8"20 5" %31%8/4/8"QK0 )*+, TDUD

4+*5* 62-%17$82
- 4/5"@/2"2% 2%3$% .L2:@0 40/ 1#010#8/05"# :." /5$#02:QK0 V V @/56:"6%. )*+,D >K0
2%/C% 2% 8053:@$"# 03 $:$0#/"/3 % 6:/"3 2% #%4%#B58/" 30A#% )*+, 1"#" 805R%8%# 0:$#03 %@%.%5(
$03 % "$#/A:$03 9:% 40#". 2%/C"203 2% 40#" 2%3$" %C103/QK0D -5$%3 2% :3"# :. 2%$%#./5"20
#%8:#30N 10#O.N $%3$% 503 A#0P3%#3 % 1@"$"40#."3 :$/@/G"2"3 1%@0 1WA@/80("@F0 2% 3%: 3/$%D >%.
$:20 0 9:% O 1"2#K0 O /.1@%.%5$"20 503 A#0P3%#3 9:% "$:"@.%5$% 20./5". 0 .%#8"20D
XU
!"#$% ' ( )*+,
!!" $%&'%&
-. +"#/0% "1%2"3 "3 "4$%#2"$56"3 6%#7"7%5#"38
"9 :; 0; "#/056< )*+,= 0; >4<?< 7% $%@$< ?%#?"7< 1<# 0; 1"# 7% 7%3?#5$<#%3
)*+, 1<7%#A 2B< $%# 30" "1"#C2?5" "4$%#"7" /0"27< < "#/056< D<# ?"##%E"7< %;
0; >#<F3%#.
>9 G$#5>0$<3 3H 1<7%; <?<##%# 2< 7%3?#5$<# 525?5"4 7% 0; %4%;%2$< )*+,
?9 G$#5>0$<3 1<7%; <?<##%# %; /0"4/0%# <#7%; 7%2$#< 7% 0; 7%3?#5$<# )*+,.
79 I%3?#5$<#%3 % "$#5>0$<3 7%3?<2J%?57<3 1%4< >#<F3%# 3B< 5E2<#"7<3
%9 K3 6"4<#%3 7<3 "$#5>0$<3 7%6%; 3%# 7%D5257<3 %2$#% "31"3= 3%;1#%.
'. K /0% "?<2$%?%#A ?<; < $#%?J< 7% ?H75E< )*+, ">"5@<
<!-- Informação muito importante! -->
/0"27< " 1AE52" 2< /0"4 %3$A ?<2$5E< 7<# 6530"45L"7" %; 0; >#<F3%#M
"9 :4% "1"#%?%#A %; 7%3$"/0% 2" >"##" 7% $N$04< 7< >#<F3%#
>9 :4% "1"#%?%#A 2" 1AE52" %2$#% 70"3 452J"3 J<#5L<2$"53
?9 :4% 3%#A ?<;14%$";%2$% 5E2<#"7< 1%4< >#<F3%#
79 :4% 2B< "1"#%?%#A 2" 1AE52" ;"3 ?"03"#A < "1"#%?5;%2$< 7% 0;" 452J" %; >#"2?<
2< 40E"# <27% 7%6%#5" "1"#%?%#.
%9 K >#<F3%# ;<3$#"#A 0;" ;%23"E%; 7% %##<.
O. P0"53 $#%?J<3 7% ?H75E< )*+, ">"5@< %3$B< 52?<##%$<3M +"#/0% 0; <0 ;"53.
"9 <p>Este é um parágrafo <b>importante</b>.</p>
>9 <h1>Título do capítulo</h1 align="center">
?9 <td>Voltar para <a href="casa.html">Casa</a></td>
79 <p><a href="../index.html"><b>Retornar</a></b></p>
%9 <p>Parágrafo um. <p>Parágrafo dois.
D9 <A HREF="arquivo.gif">Link para imagem</A>
E9 <IMG SRC = "imagem.jpg" ALT = "Figura 1">
J9 <p align=center>Texto alinhado pelo centro</p>
59 <p>O elemento <table> serve para construir tabelas</p>
Q9 <p>Copyright &copy 2000, José Severino da Silva</p>
R. +"#/0% "1%2"3 "3 "D5#;"ST%3 D"43"38
"9 :31"S<3 %@$#"3= $">04"ST%3 % /0%>#"3 7% 452J" /0% <?<##%; 2< $%@$< 3B< E%#"4;%2$%
5E2<#"7<3 %; 1AE52"3 )*+,.
>9 *07< < /0% "1"#%?% 2" 1AE52" 7%6% %3$"# 7%2$#< 7% 0; >4<?< 7%45;5$"7< %;
)*+, 1%4<3 7%3?#5$<#%3 <BODY> % </BODY>.
U-
Parte 2 - l1ML
c, O elemento <META> ser·e para incluir iníormaçoes sobre a pagina que podem ser
úteis para íacilitar a localizaçao da pagina por mecanismos de busca.
d, Se uma pagina ti·er o descritor <BASE TARGET="nova">, clicar em um de seus
·ínculos ,!"#$%, podera causar a abertura de no·as janelas.
e, O título do documento, expresso entre <TITLE> e </TITLE> aparece no início da
pagina l1ML, antes do restante do texto ou imagens.
5. Para criar uma lista simples de itens numerados, qual conjunto de elementos l1ML ·ocê
utilizaria· Lscolha uma alternati·a.
a, <P> e <LI>
b, <UL> e <LI>
c, <OL> e <LI>
d, <TD> e <LI>
e, <UL>, <OL> e <LI>
6. Quais trechos de código l1ML abaixo sempre serao exibidos em italico em qualquer
browser· Marque uma ou mais opçoes.
a, <I>Texto grifado</I>
b, <EM>Texto grifado</EM>
c, <CITE>Texto grifado</CITE>
d, <ADDRESS>Texto grifado</ADDRESS>
e, Nenhuma das alternati·as acima garante que o texto aparecera em italico.

Para as três próximas questoes a seguir, considere a seguinte estrutura de arqui·os ,em itáli-
co, e diretórios ,em negrito,:

/____ index.html
|____ documentos
| |____ mar.html
| |____ ondas.jpg
|____ imagens
|___ barco.gif
¯. Qual das alternati·as abaixo contém o código l1ML para que o arqui·o index.html
mostre a imagem barco.gif e contenha um !"#$ para o arqui·o mar.html· Marque uma
alternati·a.
a, <img src="barco.gif"> <a href="mar.html">Mar</a>
b, <img src="../imagens/barco.gif">
<a href="../documentos/mar.html">Mar</a>
c, <img src="imagens/barco.gif">
<a href="documentos/mar.html"></a>Mar
d, <img src="/imagens/barco.gif">
<a href="documentos/mar.html">Mar</a>
e, <img src="../barco.gif"> <a href="../mar.html">Mar</a>
8. Qual das alternati·as abaixo contém o código l1ML para que o arqui·o mar.html mostre
respecti·amente as imagens ondas.jpg e barco.gif· Marque uma alternati·a.
a, <img src="documentos/ondas.jpg"> e <img src="/imagens/barco.gif">
62
!"#$% ' ( )*+,
-.
/0 <img src="ondas.jpg"> e <img src="../imagens/barco.gif">
10 <img src="/documentos/ondas.jpg"> e <img src="../barco.gif">
20 <img src="ondas.jpg"> e <img src="/barco.gif">
%0 <img src="ondas.jpg"> e <img src="barco.gif">
34 56789:" ;6% 8 "#;6<=8 index.html 78>>6" 6?" >%@A8 "918#"2" 78# 6? %B%?%9$8 <a
name="secao2"></a>4 C6"B 2"> "B$%#9"$<="> "/"<D8 189$E? 8 1F2<G8 )*+, 7"#" ;6% 8
"#;6<=8 mar.html 189$%9:" 6? B<9H ;6% "789$% 7"#" %>>" I918#" 28 "#;6<=8 in-
dex.htmlJ +"#;6% 6?" "B$%#9"$<="4
"0 <a name="/index.html#secao2">Seção 2 do Indice</a>
/0 <a href="index.html#secao2">Seção 2 do Indice</a>
10 <a href="../index.html">Seção 2 do Indice</a>
20 <a href="#secao2">Seção 2 do Indice</a>
%0 <a href="/index.html#secao2">Seção 2 do Indice</a>
KL4 C6"B 28> $#%1:8> 2% 1F2<G8 )*+, "/"<D8 2%>%9:"#M " >%G6<9$% $"/%B"J

"0 <table border="1" width="80">
<tr> <td colspan="2">!</td> </tr>
<tr> <td rowspan="2">"</td>
<td>#</td>
<td rowspan="2">$</td> </tr>
<tr> <td colspan="2">%</td> </tr>
</table>
/0 <table border="1" width="80">
<tr> <td colspan="2">!</td>
<td rowspan="2">$</td>
<td rowspan="2">"</td>
<td>#</td>
<td colspan="2">%</td> </tr>
</table>
10 <table border="1" width="80">
<tr> <td colspan="2">!</td>
<td rowspan="2">$</td> </tr>
<tr> <td rowspan="2">"</td>
<td rowspan="1">#</td> </tr>
<tr> <td colspan="2">%</td> </tr>
</table>
20 <table border="1" width="80">
<tr> <td rowspan="2">!</td>
<td colspan="2">$</td> </tr>
<tr> <td colspan="2">"</td>
<td>#</td> </tr>
<tr> <td rowspan="2">%</td> </tr>
</table>
%0 N%9:6?" 2"> "B$%#9"$<="> "9$%#<8#%>
!"#$%&' )* +*, -#.*/ 0


"#
!"#$% ' ( )*+,"- .% /-$0+*
!"#$%&'"
)*+ ,#$-"'./0"+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 12
12313 4 56% -7* 8*+,"- .% %-$0+*9 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333:;
12323 !"#" 56% -%#<%= "- 8*+,"- .% %-$0+* 3333333333333333333333333333333333333333333333333333333333333333333333333333:>
?%@"#"# "@#%-%A$"B7* ." %-$#6$6#"333333333333333333333333333333333333333333333333333333333333333333333333333333333333:>
C*A$#*+% "D-*+6$* ." "@"#EAF0" ." @GH0A"3 333333333333333333333333333333333333333333333333333333333333333333333:>
!GH0A"- ="0- +%<%- 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333:>
I"A6$%AB7* .% 6= H#"A.% -0$% 3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333:>
)3+ 4%5-67 897:;67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2<
1'313 J%H#"-K .%F+"#"BL%- % -%+%$*#%- 333333333333333333333333333333333333333333333333333333333333333333333333333333333333;M
1'323 IN+$0@+"- .%F+"#"BL%- % -%+%$*#%-333333333333333333333333333333333333333333333333333333333333333333333333333333333;1
1'3'3 C*=%A$G#0*- % 0A-$#6BL%-333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;1
1'3O3 P"+*#%- 3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;2
1'3Q3 R%#"AB"333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;'
1'3:3 S%-F#0$*#%- RTIU %-@%F0"0- 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;'
1'3;3 C*=* 0AF+60# %-$0+*- %= 6=" @GH0A" 33333333333333333333333333333333333333333333333333333333333333333333333333;O
1'3>3 C+"--%- % VS-333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;:
1'3W3 U0AX- Y@-%6.*ZF+"--%- % @-%6.*Z%+%=%A$*-[ 33333333333333333333333333333333333333333333333333333333333333;;
1'31M3 ?%+%$*#%- .% F*A$%\$*33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;;
1'3113 C"-F"$" .% 8*+,"- .% %-$0+* 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;;
)=+ >"#$%7 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2?
1O313 8*A$Z8"=0+]3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333;W
1O323 8*A$Z-0^% 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>M
1O3'3 8*A$Z-$]+% % 8*A$Z_%0H,$ 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>2
1O3O3 8*A$Z<"#0"A$333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>O
1O3Q3 ` @#*@#0%.".% 8*A$33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>Q
)@+ A$-:B.$"7 '% $%C$" +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ D1
1Q313 $%\$Z$#"A-8*#=3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>:
1Q323 $%\$Z.%F*#"$0*A333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>;
1Q3'3 $%\$Z"+0HA % <%#$0F"+Z"+0HA33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>>
1Q3O3 $%\$Z0A.%A$ 3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>W
1Q3Q3 +0A%Z,%0H,$33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>W
1Q3:3 +%$$%#Z-@"F0AH333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333WM
)1+ !"-%7 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ?)
1:313 F*+*# 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333W2
1:323 D"FXH#*6A.ZF*+*# 3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333W2
1:3'3 D"FXH#*6A.Z0="H%333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333W'
1:3O3 D"FXH#*6A.Z#%@%"$ 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333W'
:Q
!"#$% ' ( )*+,"- .% /-$0+*
12343 5"678#*9:.;<*-0$0*: % 5"678#*9:.;"$$"6,=%:$3333333333333333333333333333333333333333333333333333333>'
12323 5"678#*9:.333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>4
!"# %&'(&)*+,+*- +* ./,--)0).,12' ############################################################################### 34
1?313 .0-<+"@ 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>2
1?3A3 B,0$%;-<"6%333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>2
1?3'3 +0-$;-$@+% 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>?
!5# 6'78&'/* +* 9/'.'- ################################################################################################ 35
1C313 ="#80: % <"..0:833333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333>>
1C3A3 5*#.%#;B0.$, 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DD
1C3'3 5*#.%#;6*+*# 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DD
1C3E3 5*#.%#;-$@+% 3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331D1
1C343 5*#.%#33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DA
1C323 B0.$, % ,%08,$ 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DA
1C3?3 F+*"$333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DA
1C3C3 6+%"# 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331D'
!3# %'-).)'7,:*78'################################################################################################## !;<
1>313 <*-0$0*:G $*< % +%F$ 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331DE
1>3A3 H;0:.%I3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331D2
1>3'3 J0-050+0$@33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333331D2
=;# >?*&.@.)'- ######################################################################################################### !;"
AD313 K%-$%- -*5#% )*+,"- .% /-$0+*3333333333333333333333333333333333333333333333333333333333333333333333333333333333331D?
AD3A3 /I%#6L60*- 6*= )*+,"- .% /-$0+*33333333333333333333333333333333333333333333333333333333333333333333333333333331D>

22
Parte 3 - lolhas de Lstilo
!"# %&'()*+,-)
!"#!# . /+0 1-) 2)3451 *0 01'63)7
Uma íolha de estilos é um conjunto de regras que iníorma a um programa, responsa·el pela
íormataçao de um documento, como organizar a pagina, como posicionar e expor o texto e,
dependendo de onde é aplicada, como organizar uma coleçao de documentos.
A maior parte dos programas de editoraçao eletronica e processadores de texto moder-
nos trabalham com íolhas de estilos. O processo consiste em deíinir um rótulo ,nome do esti-
lo, para um determinado paragraío e em seguida alterar os seus atributos. 1odo paragraío que
íor rotulado com aquele estilo passara a exibir as características deíinidas anteriormente. Qual-
quer alteraçao nos atributos de um estilo aíetara todos os paragraíos que esti·erem rotulados
com ele.
Lsta descriçao, que se aplica a estilos em processadores de texto e programas de editora-
çao eletronica, também ·ale para a \eb. Na \eb, os "paragraíos" sao blocos marcados por
descritores l1ML como ·l1·, ·P·, etc. Para íazer com que todos os blocos de textos mar-
cados com ·l1· em um documento sejam exibidos em tamanho de 48 pontos, basta deíinir a
regra:
H1 {font-size: 48pt}
dentro de uma "íolha de estilos" aplicada ao documento.
A íolha de estilos pode ser um arqui·o de textos simples ,alíabeto ISO-Latin1, com a
extensao .css. Para ·incula-lo a uma pagina l1ML, esta de·e ter dentro do seu bloco ·lL-
AD· ... ·,lLAD· o seguinte descritor:
<LINK REL="stylesheet" HREF="url_do_arquivo.css">
O restante deste artigo tratara dos íundamentos da tecnologia de íolhas de estilos aplica·eis ao
l1ML, chamada de 85195*6&: ;'<30 ;400'1 ,íolhas de estilo em cascata,, mostrando como estabelecer
as regras de estilo para um bloco de texto, uma pagina ou todo um site. Seçoes especííicas abordarao
cores, imagens, tipologia e posicionamento. Lste texto nao é completo. Omitimos propriedades e
recursos nao suportados nos browsers e nos limitamos aqueles recursos que constam da especiíica-
çao CSS1 ,nao incluímos recursos proprietarios nem a maior parte das no·idades do CSS2 que nao

Parte 3 - lolhas de Lstilo
íuncionam nos browsers disponí·eis no mercado,. Para uma abordagem mais completa, consulte a
documentaçao oíicial do \3C: http://www.w3.org/Style/.
!"#"# %&'& ()* +*',*- &+ ./01&+ 2* *+340/
5*6&'&' &6'*+*73&89/ 2& *+3')3)'&
Com isto é possí·el ·oltar a suportar browsers antigos que antes esta·am condenados
por nao conseguirem ler a iníormaçao sem perdas. Com a iníormaçao toda armazenada no
l1ML ,estrutura,, a apresentaçao ,estilo, seria uma camada a mais, alterando a disposiçao do
texto, cores, etc. mas sem aíetar a estrutura essencial da iníormaçao. Isto permite que uma
pagina tenha ·arios estilos e use +:'463+ ,programas embutidos, para decidir qual carregar ,em
íunçao do browser e da plataíorma,. Isto é muito menos trabalho que íazer uma pagina para
cada browser e plataíorma, pois a atualizaçao é íeita apenas no l1ML. 1ambém, com isso, é
possí·el ter uma íolha de estilos especial somente para impressao, onde ha·eria iníormaçoes de
quebra de paginas, etc. ,este recurso nao íaz parte da ·ersao 1 do CSS,.
;/73'/0* &<+/0)3/ 2& &6&'=7:4& 2& 6>?47&#
L algo que nao se tem com o l1ML. Pode-se usar tabelas, GIls in·isí·eis de um pixel e
mais uma dúzia de "macetes" mas nao se consegue íazer o texto íluir sua·emente em ·olta de
uma imagem irregular, por exemplo. Além do mais, quanto mais soíisticada a técnica, mais
diíícil é de codiíicar e mais "sujo" íica o código, o que o torna mais sujeito a erros. Com CSS,
pode-se colocar uma imagem em qualquer lugar da pagina ,até íora dela,, usando técnicas de
posicionamento absoluto ou relati·o. Pode-se escolher a posiçao exata da imagem de <&:@A
?'/)72 e íazê-la combinar com algo no ./'*?'/)72. As dimensoes e posiçoes sao exatas e dadas
em unidades conhecidas no mundo da tipograíia como pixels, pontos, 6&4:&+, milímetros.
%>?47&+ -&4+ 0*,*+
Com íolhas de estilo é possí·el criar muitas paginas com um layout soíisticado que antes
só era possí·el usando imagens, tecnologias como B0&+1 ou applets Ja·a. Lstas paginas eram
sempre mais pesadas, pois precisa·am carregar imagens, componentes, programas. Com CSS é
possí·el deíinir texto de qualquer tamanho, posiciona-lo por cima de outros objetos, ao lado
ou por cima de texto e conseguir eíeitos soíisticados a um custo ,banda de rede, baixo. L pos-
sí·el ainda importar íontes ,que o usuario tal·ez nao tenha,.
C&7)3*789/ 2* )- ?'&72* +43*
Uma íolha de estilos ser·e para toda uma coleçao de paginas, podendo ser usada para
dar um estilo consistente a todo o site. Sendo aplicada em separado da iníormaçao e estrutura,
nao precisara ser atualizada todas as ·ezes em que a iníormaçao íor mudada. A pagina pode ser
atualizada em um editor l1ML ou gerador de l1ML simples, sem recursos de cor ou alinha-
68
Parte 3 - lolhas de Lstilo
mento, e ser íormatada na hora em que íor carregada pelo browser. L possí·el também íazer o
contrario: mudar o estilo sem alterar a iníormaçao, como ter uma pagina que sempre carrega
com um estilo diíerente.
O uso das íolhas de estilo depende da boa estrutura do l1ML. A linguagem CSS ,é uma
linguagem declarati·a, trabalha com os elementos tratando-os como "objetos". Cada paragraío
·P·, cada ·l1·, cada ·IMG· é um objeto. Objetos podem ser agrupados de ·arias íormas.
A cada objeto ou grupo de objetos podem ser atribuídas propriedades de estilo deíinidas em
regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' sera azul,
tera tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usara a íamília de
íontes Arial, ou, se esta nao existir, lel·etica, ou entao a íonte sem-seriía !"#$%&' do sistema".
Um arqui·o CSS com apenas a regra acima conteria o texto:
P.editorial {color: 0000ff;
font-size: 12pt;
line-height: 24pt;
text-align: right;
font-family: arial, helvetica, sans-serif}
Se a íolha de estilos acima íor aplicada a uma pagina que possua paragraíos ·P· rotula-
dos com o nome "editorial" ,atributo 'CLASS~editorial',, eles serao íormatados de acordo com
as propriedades especiíicadas se o browser suportar CSS. Se o browser nao suportar CSS, a
estrutura sera mantida ,embora a aparência nao seja a ideal, e o usuario conseguira ter acesso a
iníormaçao estruturada, mesmo em um meio de ·isualizaçao mais limitado.
Quando se usa CSS, sao poucas as modiíicaçoes necessarias no l1ML. Nao sao neces-
sarios no·os descritores ou extensoes. No exemplo acima, teremos que incluir apenas um atri-
buto a mais ,o atributo CLASS, do l1ML 4, classiíicando os paragraíos que íazem parte do
nosso 'editorial' ,paragraíos que tem uma íunçao diíerente dos demais,.
A grande ·antagem das íolhas de estilo é a preser·açao da estrutura do l1ML e um
controle muito melhor do autor sobre a sua aparência na tela do usuario íinal. Uma pagina
de·era aparecer da melhor íorma possí·el tanto num ()*"+(, soíisticado como naquele IBM
PCX1 4.¯¯Mlz rodando o -./0 íor DOS. O primeiro utilizara todos os recursos graíicos
determinados pelas íolhas de estilo. O segundo as ignorara, mas preser·ara a estrutura e a in-
íormaçao
69
Parte 3 - lolhas de Lstilo
!"# %&'()* +,*-.)*
!"#!# %&'()*/ 0&.1)()23&* & *&1&45(&*
A estrutura dos estilos é bastante simples. Consiste de uma 1-*4) 0& (&'()*. Cada regra pos-
sui um bloco, entre cha·es ,¦ e },, de uma ou mais declaraçoes aplica·eis a um ou mais *&1&45(&*.
Um seletor é algo no qual pode-se aplicar um estilo. Pode ser um descritor l1ML, uma hie-
rarquia de descritores ou um atributo que identiíique um grupo de descritores. Uma 6517) 0&
&*4-15* consiste de uma ou mais linhas de regras, da íorma:
seletores { declarações }
As regras podem estar dentro de um arqui·o de texto ,ISO Latin1 ou ASCII 8-bit, com
extensao ".css" ou &89:4-0)* em um arqui·o l1ML ,as ·arias maneiras de aplicar estilos a um
arqui·o l1ML serao ·istas na seçao seguinte,.
Um exemplo de íolha de estilos com apenas uma regra íoi mostrada na seçao anterior:
H1 {font-size: 48pt}
Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaraçao, que estabele-
ce um tamanho de íonte ,prop. font-size, para todos os objetos ,paragraíos, marcados com
<H1>.
As declaraçoes sao íeitas usando a sintaxe:
propriedade: valor
Obser·e que se usa dois-pontos ,:, e nao igual ,=, para aplicar um ·alor a uma proprie-
dade. Pode ha·er mais de uma declaraçao de estilo para um seletor. Isto pode ser íeito em ou-
tro bloco. Cada linha acrescenta ou sobrepoe declaraçoes íeitas em linhas anteriores:
H1 { font-size: 24pt }
H1 { color: blue }
H1 { font-size: 18pt }
No trecho acima, o texto marcado com <H1> sera azul e tera tamanho de 18pt porque a
regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size: 24pt }.
¯0
Parte 3 - lolhas de Lstilo
!"#$# &'()*+(,- ./0(,1,23/- / -/(/)41/-
Varias declaraçoes de estilo podem ser aplicadas de uma ·ez a um seletor. As declara-
çoes, entao, precisam ser separadas por ponto-e-·írgula ,;, :
H1 {font-size: 18pt; color: blue; font-family: Caslon, serif }
BODY { background : navy; color : white }
Os espaços em branco ,espaços, no·as-linhas e tabulaçoes, sao ignorados pelo browser
na hora de interpretar uma íolha de estilos e podem ser usados para melhorar a sua legibilida-
de. As duas linhas acima íicariam mais legí·eis da íorma:
BODY {background : navy;
color : white }
H1 {color: blue;
font-size: 18pt;
font-family: Caslon, serif }
Uma declaraçao só termina com uma íecha-cha·es ,}, ou com um ponto-e-·írgula ,;,.
Dependendo da propriedade, esta pode ter ·arios ·alores separados por ·írgulas ou ·alores
compostos com as pala·ras separadas por espaços:
P { font: 12pt "Times New Roman" bold }
H2 { font-family: Arial, Helvetica, Sans-serif }
As aspas de·em ser usadas quando uma pala·ra que tem espaços precisar ser usada. No
exemplo acima, o nome "1imes New Roman" de·eria ser tratado como o nome de uma íonte
distinta, e nao como três ·alores, o que ocorreria se as aspas nao esti·essem presentes.
Assim como um seletor pode ter ·arias propriedades deíinidas para ele, um mesmo con-
junto de propriedades pode ser aplicada a um grupo de seletores, separando-os com ·írgulas:
H1, H2, H3 { color: blue;
font-size: 18pt;
font-family: Arial, Helvetica, Sans-serif }
As declaraçoes de estilo podem ser aplicadas em quase qualquer descritor l1ML - no
mundo períeito! Na pratica, muitos browsers ainda têm problemas de compatibilidade, e nao
implementam a especiíicaçao a risca, como ·eremos adiante.
Ao utilizar íolhas de estilo, de·e-se respeitar os elementos l1ML que possuem descrito-
res íinais íreqüentemente ignorados, como ·,P·, ·,LI·, etc. A íalta do ·,P· pode causar o
"·azamento" das declaraçoes de estilo para íora do paragraío em alguns browsers.
!"#"# 546/7)81*4- / *7-)1923/-
Além das regras, um arqui·o CSS pode ter ainda comentarios e instruçoes ,precedidas de
¸,. No CSS1 apenas uma instruçao é deíinida: @import. Lla é usada para que uma íolha de
estilos possa importar estilos de outro arqui·o CSS atra·és de uma URL. Os estilos importados
¯1
Parte 3 - lolhas de Lstilo
sempre têm menos precedência que os locais ,ou seja, os locais podem sobrepor os importa-
dos,. A sintaxe da instruçao @import é:
@import url(url_da_folha_de_estilos)
Nao de·e ha·er outras estruturas ,a nao ser comentarios, na linha onde ha uma instru-
çao. Lxemplos do uso de @import:
@import url(../basico.css)
@import url(http://longe.com/estilos/basico.css)
Pode-se inserir trechos que serao ignorados pelo browser ao interpretar íolhas de estilo
usando blocos de comentario. Comentarios em íolhas de estilos sao iguais a comentarios em
linguagens como C ou Ja·a: entre /* e */:
/* este texto é ignorado até que seja encontrado
um asterisco seguido por uma barra */
!"#$# &'()*+,
Os ·alores que sao aplicados as propriedades têm uma sintaxe que depende da proprie-
dade que os usa. Propriedades que en·ol·em tamanho ,tamanho de íontes, espaçamento, etc.,
geralmente recebem ·alores que consistem de um número e uma unidade ou porcentagem. O
sinal de porcentagem ou unidade de·e estar junto ao número correspondente sem espaços. Ou
seja, de·e-se escre·er font-size: 24pt e nao font-size: 24 pt.
Cores e arqui·os externos podem requerer uma íunçao para serem deíinidos. Sao duas
as íunçoes ,ou procedimentos, do CSS1: rgb(), que constrói uma cor, e url(), que retorna
um ·ínculo para uma imagem ou arqui·o CSS ,usada em instruçoes @import,.
la quatro maneiras diíerentes de especiíicar cores em CSS: usando o nome do sistema
,red, yellow, blue, black, lightGray,, usando seu código RGB hexadecimal ,íí0000, íííí00,
0000íí, 34adíc, 80a¯a¯, ou usando a íunçao rgb(). A íunçao rgb() requer três argumentos
que representam a intensidade dos componentes ·ermelho ,R,, ·erde ,G, e azul ,B, de uma
cor em íorma de luz ,nao opaca,. A intensidade pode ser expressa em ·alores inteiros de 0
,mínimo, a 255 ,maximo, ou em ·alores íracionarios de 0° a 100°. As instruçoes abaixo de-
íinem a mesma cor para um paragraío:
P {color: red}
P {color: ff0000}
P {color: rgb(100%, 0%, 0%)}
P {color: rgb(255, 0, 0)}
Nao de·e ha·er espaço entre o "b" de rgb e o abre-parênteses.
A íunçao URL pode ser usada em propriedades que requerem arqui·os ,no caso, ima-
gens, como ·alores. Lla recebe um argumento apenas com a URL ,relati·a ou absoluta, da
imagem:
¯2
Parte 3 - lolhas de Lstilo
P {background-image: url(../imagens/tijolos.gif)}
P {background-image: url(http://longe.com/imagens/pedras.png)}
!"#$# &'()*+)
Os estilos "herdam" propriedades de ·arias maneiras. Uma das íormas é atra·és da pró-
pria hierarquia do l1ML. Se ·ocê declara propriedades para BOD\, todos os descritores se-
rao aíetados a nao ser que tenham as suas propriedades redeíinidas dentro de um no·o bloco
de declaraçoes CSS. Se um ·I· esta dentro de um ·P· e todos os ·P· sao declarados como
tendo a cor ·ermelha, o ·I· também sera ·ermelho a menos que haja um bloco, posterior
aquela declaraçao, redeíinindo as propriedades de ·I·, por exemplo:
P {font: 12pt "Times New Roman" bold;
color: red }
I {color: black }
íaria com que o texto "seletor", no texto a seguir permanecesse preto:
<P>Um <I>seletor</I> é algo no qual pode-se aplicar um estilo.</P>
Se ·ocê deíinir atributos para os descritores ·BOD\· ou ·l1ML·, toda a pagina sera
aíetada. No exemplo a seguir, uma cor de texto deíinida para BOD\ sera usada para colorir
todo o texto do documento, a nao ser que sejam sobrepostos por uma regra subseqüente:
BODY {color: navy }
H1, H2 {color: yellow }
Os blocos acima íarao com que todo o texto seja azul marinho, exceto aquele marcado
com l1 ou l2, que sera amarelo.
Os browsers comerciais têm problemas principalmente com a aplicaçao de estilos em
BOD\, portanto, íreqüentemente é preciso mexer nas declaraçoes de estilo, acrescentando
propriedades redundantes para adapta-los a realidade. No site do \3C ,http://www.w3.org,
ha links para documentos que analisam essas diíerenças entre browsers. O site
http://www.w3.org/Styçe/CSS/Test/ é uma plataíorma de testes que pode ser usada para
·eriíicar se um browser suporta ou nao determinada propriedade.
!"#,# -'./(012('. &345 '.6'/0)0.
Dois descritores l1ML têm importancia íundamental em CSS. Lles sao descritores es-
truturais puros que nao deíinem apresentaçao especííica na íolha de estilos nati·a do browser.
Com CSS é possí·el deíinir propriedades de apresentaçao para esses descritores. Lles sao
·DIV· e ·SPAN·.
·SPAN· é um descritor que de·e ser usado dentro de blocos de texto apenas. L cha-
mado de descritor em-linha ,0*70*',, ja que nao quebra a linha antes ou depois. Lle se assemelha
¯3
Parte 3 - lolhas de Lstilo
a descritores como ·B·, ·I·, ·SMALL·, ·A lRLl· e ·SUP· que ser·em para íormatar
texto dentro de paragraíos, células de tabela, etc.
·DIV· é um descritor que deíine um bloco ou seçao da pagina. Pode ser usado para di-
·idir a pagina em seçoes ,e subseçoes no !"#$%"$# '()*+%$%, e permitir que sejam aplicados estilos
especííicos a essas seçoes. Descritores de bloco sao ·P·, ·l1·, ·1ABLL·, etc. ·DIV·
deíine um bloco sem íunçao ou aparência deíinida. A íunçao e aparência sera determinada em
CSS.
,-./. 0+1+ 2"3*42% $5#2*+5 $1 416 )782"6
la três íormas de aplicar uma íolha de estilos a uma pagina \eb. Lstas íormas irao de-
terminar a abrangência dos estilos: se aíetarao um trecho limitado de uma pagina, se a toda a
pagina, ou se irao aíetar todo um site.
A primeira íorma, mais abrangente, é a ·inculaçao a um arqui·o CSS. Isto é íeito ligando
a pagina l1ML a um arqui·o de íolha de estilo, usando do descritor ·LINK·,. Lste método
permite que múltiplas paginas ou um site inteiro usem a mesma íolha de estilos.
Para íazer um ·ínculo a uma íolha de estilos externa, de·e-se criar um arqui·o de texto
contendo um conjunto de regras de estilo em CSS, sal·a-lo com uma extensao ".css" e chama-
lo a partir de todos os documentos l1ML onde o estilo sera aplicado. Nao é preciso compilar
ou qualquer coisa do tipo. Depois que as deíiniçoes esti·erem prontas, o estilo estara pronto
para ser usado. Pode ser importado atra·és do descritor LINK:
<HEAD> (...)
<LINK REL=STYLESHEET
HREF="http://internet-name/mystyles.css"
TYPE="text/css">
</HEAD>
O elemento ·LINK· nao tem descritor de íechamento e de·e ser usado dentro do blo-
co ·lLAD·.
Uma segunda íorma, permite que estilos sejam aplicados localmente, em uma única pa-
gina, embutindo uma íolha de estilos diretamente na pagina l1ML dentro de um bloco íor-
mado pelos descritores ·S1\LL· e ·,S1\LL·. Lste método permite que ·ocê altere as
propriedades de estilo de uma única pagina.
A linguagem que é embutida em um bloco ·S1\LL· é a mesma usada nos arqui·os
CSS. ·S1\LL· ... ·,S1\LL· de·e ser usado em ·lLAD·. Um atributo #9)$ iníorma o
tipo de arqui·o utilizado:
<style type="text/css">
P { font: 12pt "Times New Roman" bold;
color: red }
I { color: black }
</style>
¯4
Parte 3 - lolhas de Lstilo
As propriedades declaradas no bloco ·S1\LL· sobrepoem qualquer propriedades an-
teriores do elemento ,inclusi·e as de uma íolha de estilos importada, se hou·er,. L comum
colocar todo o código entre comentarios l1ML ,<!--e -->, para proteger browsers antigos
da exibiçao indesejada do código:
<style type="text/css">
<!--
P { font: 12pt "Times New Roman" bold;
color: red }
I { color: black }
-->
</style>
linalmente, ha uma íorma de aplicar estilos diretamente a um descritor indi·idual. Para
íazer isto de·e-se usar o atributo S1\LL em quase qualquer descritor. Lste método nao cor-
responde exatamente a uma "íolha" de estilos, pois os estilos aplicados nao sao reapro·eita·eis.
Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de
iníormaçoes da pagina. Por exemplo:
<P STYLE="color: green; font-size: 12pt">Este texto</P>
Lsta propriedade é mais interessante quando aplicada em um descritor que é usado para
agrupar ·arios outros, como ·DIV·, que di·ide a pagina em seçoes ou ·SPAN·, usado em
situaçoes bem especííicas. Usar estilos desta íorma é pouco diíerente de usar atributos locais.
Os beneíícios de poder mudar a íonte, cores e outras características em todo o documento
íicam mais diííceis.
Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características deíinidas
pelos mais especííicos sobrepoem as deíinidas pelos mais genéricos. Por exemplo, suponha
que o arqui·o estilos.css contenha apenas as seguintes regras:
H1 { color: green;
font-size: 24pt}
P { color: blue}
Suponha que ele seja carregado na pagina a seguir que possui um bloco ·S1\LL· com
uma no·a deíiniçao de P e l1.
<HEAD>
<link rel=STYLESHEET href="estilos.css" type="text/css">

<style type="text/css"><!--
P {font: 12pt "Times New Roman" bold;
color: red }
H1 {color: black }
--></style>
</HEAD>
¯5
Parte 3 - lolhas de Lstilo
Mais adiante, existe um paragraío e um título da íorma:
<h1 style="color: navy">Auto da Compadecida</h1>
<p style="color: black">Ariano Suassuna (Recife, 1955)</p>
Qual estilo ira predominar· Pela regra de que o mais especííico sobrepoe o mais geral,
teremos uma pagina onde os ·h1· têm tamanho 24pt ,do estilo importado,, cor preta ,·alor
sobreposto pelo estilo da pagina, e os ·p· sao ·ermelhos ,sobreposto pelo estilo da pagina,.
Nas duas linhas acima ,e nelas apenas,, o ·h1· sera azul marinho ,sobrepondo o estilo da
pagina, e o ·p· sera preto.
!"#$# &'())*) * +,)
As ·ezes um paragraío tem uma aparência diíerente dos outros paragraíos em uma certa
parte do texto. Para mudar o estilo dele, pode-se incluir as declaraçoes em um atributo S1\LL.
Mas, se tal procedimento torna diíícil a localizaçao e a gerência dos estilos, pode-se usar um
recurso para marca-lo de íorma que seja considerado diíerente. Isto pode ser íeito atribuindo-
lhe uma identiíicaçao única. Lm l1ML 3.2, pode-se usar o atributo ID:
<P ID=w779>Texto especial</P>
Para alterar as características deste paragraío agora, pode-se usar o seu ID como seletor,
da íorma:
#w779 {color: cyan }
Se isto esti·er em um arqui·o CSS, todas as paginas que o usam e que ti·erem um ele-
mento com o ID 4w¯¯9 serao aíetadas. Se hou·er mais de um com o mesmo ID apenas o
primeiro sera aíetado.
Melhor que usar ID é agrupar características semelhantes em classes. Uma classe é uma
·ariaçao de um determinado objeto. Por exemplo, um texto teatral pode ter três paragraíos
com apresentaçao diíerente, representando as íalas de três personagens. Se quiséssemos que
cada um ti·esse uma cor diíerente, poderíamos declarar cada um como sendo de uma classe
distinta:
<p class=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o fato é que o cachorro
enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim? </p>
<p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-
be? </p>
Para dar a cada paragraío de um mesmo personagem ,mesma classe, os mesmos atribu-
tos, usa-se:
P.grilo { color: maroon }
P.padre { color: black }
P.bispo { color: navy }
¯6
Parte 3 - lolhas de Lstilo
Desta maneira, todos os textos que de·erao ser lidos pelo personagem "Bispo" estarao
em azul marinho.
Uma classe também pode conter descritores diíerentes. Se todos os textos citados por
um certo autor ti·essem que estar em outra cor ou íonte, poderíamos criar uma classe sem
citar o descritor:
.verde { color: green }
1odos os descritores que ti·erem o atributo CLASS~·erde serao aíetados, por exemplo:
·P class~·erde·, ·h3 class~·erde·, ·table class~·erde·, etc.
!"#$# &'()* +,*-./01234**-* - ,*-./01-3-5-(60*7
Para seletores especiais que mudam de estado, como o texto marcado com ·A·, é pos-
sí·el atribuir propriedades diíerentes para cada estado:
A:link {color: red}
A:active {color: 660011}
A:visited {color: black; text-decoration: none}
A:hover {color: blue; text-decoration: underline}
muda as características dos links nao-·isitados, ati·os e ·isitados. Assim como qualquer seletor,
os links podem ser combinados com outros descritores:
P, A:link, H2 {color: red}
!"#!8# 9-3-60:-* /- 20(6-;60
Você também pode deíinir seletores que só serao aplicados se esti·erem no contexto de
um outro seletor, por exemplo:
P.verde EM {color: 000040}
indica que o LM só tera sua cor alterada se ocorrer dentro de um bloco P da classe "·erde".
Os seletores de contexto podem ser bem longos:
.bispo P UL UL LI A.classX:link {font-style: italic }
íara com que apenas os links nao ·isitados da classe "classX" que estejam dentro de itens de
lista de segundo ní·el situados dentro de um paragraío dentro de um bloco qualquer da classe
"bispo" sejam mostradas em italico.
!"#!!# <4*2464 /- =03>4* /- -*6'30
Lxistem seis diíerentes íolhas de estilo que podem ser deíinidas. Além das três íormas
que mostramos em seçao anterior deste capítulo, ha ainda, segundo a especiíicaçao, mais três
íolhas de estilos que podem aíetar uma pagina: 1, uma íolha de estilos que é importada por
outra íolha de estilos ,isto é diíerente daquela que é ·inculada ao l1ML, dentro de um
¯¯
Parte 3 - lolhas de Lstilo
·link·,, 2, uma íolha de estilos deíinida pelo usuario ,ou leitor da pagina, e 3, a íolha de esti-
los aefavtt do browser ,que é usada quando outra íolha nao deíine os estilos,.
1odas estas íolhas de estilo diíerentes podem pro·ocar uma grande coníusao se nao
hou·er uma regra clara de como de·em ser consideradas. Ainda ha um sétimo íator que é a
íormataçao introduzida pelo l1ML, como nos descritores ·íont· e atributos align~center.
Listando todas as íolhas de estilos que podem aíetar um texto, temos:
1. íotba ae e.tito. aefavtt ao bror.er: todos os browsers possuem regras comuns para íormatar
um texto. A especiíicaçao l1ML nao impoe um íormataçao padrao. ^et.ca¡e ^arigator por
exemplo usa um íundo cinza como padrao e links azuis sublinhados. Ja o ívtervet í·¡torer
preíere um íundo branco.
2. íotba ae e.tito. aefiviaa ¡eto teitor: a especiíicaçao deíine a possibilidade do leitor estabelecer
uma íolha de estilos própria. Isto é parcialmente conseguido quando o browser permite
que se escolha diíerentes cores para íundo, texto e links.
3. íotba ae e.tito. rivcvtaaa ao í1Mí: é a íolha de estilos que é importada pelo arqui·o l1ML
atra·és do descritor de ligaçao ·link·
4. íotba ae e.tito. iv¡ortaaa: uma íolha de estilos externa ,arqui·o CSS, pode ser importada de
dentro de outra íolha de estilos ,um outro arqui·o CSS ou bloco ·style· no l1ML, u-
sando um comando especial ¸import:
@import url (outroestilo.css)
5. íotba ae e.tito. evbvtiaa vo í1Mí: é a íolha de estilos que aparece na pagina l1ML entre os
descritores ·style· e ·,style·.
6. íotba ae e.tito. tocat: é aquela que é aplicada localmente a um descritor usando o atributo
style~"lista de declaraçoes".
¯. í.tito aefiviao ¡eto í1Mí: atributos e descritores podem pro·ocar alteraçoes na aparência
do texto, por exemplo: ·íont size·, ·big·, ·body bgcolor·, ·p align~center·, etc.
Um browser que siga a especiíicaçao CSS a risca obedece a seguinte ordem de precedên-
cia: 1. Local, 2. Lmbutida, 3. Vinculada, 4. Importada, 5. l1ML, 6. Leitor, ¯. Browser
Na pratica, as coisas nao sao tao bonitas. No ívtervet í·¡torer para Macivto.b, a ordem é
respeitada. Na ·ersao do ívtervet í·¡torer ².0 para !ivaor., os estilos ·inculados ao l1ML têm
mais importancia que os embutidos ,o mesmo ocorre com í·¡torer 1 e ^arigator 1,. No ^et.ca·
¡e ^arigator 1 e ívtervet í·¡torer 1, os estilos aplicados ·ia l1ML têm precedência maxima ,no
ívtervet í·¡torer ² a precedência íunciona corretamente, mas nao no 4,. Com as diíerenças exis-
tentes nos browsers de hoje, nao ·ale a pena ainda se aproíundar neste assunto. A soluçao
ainda é testar, testar, testar antes de colocar no ar.
¯8
Parte 3 - lolhas de Lstilo
!"# %&'()*
lontes sao estilos de apresentaçao consistentes aplicados a alíabetos. Uma íonte consiste de
atributos que alteram a aparência de um símbolo, sem alterar o seu signiíicado. Oíerecem as
iníormaçoes necessarias para que uma letra ou símbolo possa ser representado graíicamente.
Os atributos essenciais de uma íonte sao:
Seu tipo ,ou íamília,



Seu tamanho
Seu estilo ,regular, italico, &+(,-'), etc.,
Seu peso ,normal, negrito, ,-./(, 0,123,
Para representar qualquer texto, portanto, é preciso escolher uma íonte, ou seja: um tipo,
um estilo, um peso e um tamanho. Letras maiúsculas e minúsculas nao sao consideradas íontes
diíerentes, pois têm um signiíicado distinto.
Os quatro atributos acima podem ser deíinidos em CSS atra·és das propriedades font-
family, font-size, font-style e font-weight. Nao é preciso deíinir todas pois sempre
têm ·alores 4)51+,(. CSS oíerece ainda font-variant, que permite considerar outras ·ariaçoes
de uma íonte.
!"#!# 5&'(6517-,8
Uma íamília de íontes ,tipo, é selecionada com a propriedade font-family. Lsta pro-
priedade aceita uma lista de ·alores separados por ·írgulas representando nomes de íontes
existentes ou nao no sistema do usuario. No íinal da lista, pode ser incluída uma reíerência a
uma íamília genérica, que sera usada caso nenhum dos nomes coincida com o nome de uma
íonte do sistema.
A sintaxe é:
font-family: fonte1, fonte2, fonte3, ..., fonte-genérica
Lxemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
¯9
Parte 3 - lolhas de Lstilo
As íontes sans-serif e monospaced sao nomes genéricos. Nao se reíerem a uma íonte
em particular mas a um grupo genérico. Os outros sao serif, cursive e fantasy.
O browser usara a primeira íonte da lista se a encontrar. Se nao encontrar, ira procurar a
íonte seguinte.

Se o nome de uma íonte ti·er mais de uma pala·ra, este de·era ser colocado entre aspas.
As aspas podem ser apóstroíes simples ,', ou aspas duplas ,",. Os apóstroíes sao necessarios
quando íor preciso especiíicar estilos dentro de um atributo l1ML:
<p style="font-family: 'times new roman', sans-serif">...</p>
!"#$# &'()*+,-.
O tamanho de uma íonte é alterado usando font-size. Pode ser especiíicado em ·alo-
res absolutos ou relati·os. Para especiíicar um ·alor absoluto, pode-se usar:
font-size: número(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho também pode ser especiíicado relati·o ao elemento no qual o atual objeto
esta contido.
font-size: tamanho_relativo (smaller, larger)
font-size: comprimento (em ou ex)
font-size: porcentagem%
Lxemplos:
H1 { font-size: 24pt}
H1 { font-size: x-large}
H1 { font-size: smaller}
H1 { font-size: 1.5em}
H1 { font-size: 150%}
<H1 style="font-size: 1cm">
Os tamanhos de pontos de·em ser especiíicados como ·alores inteiros ,mesmo se usa-
dos cm ou in,. Os browsers podem íormatar os tamanhos de íorma diíerente e os mesmos
podem ser alterados pelos usuarios nos browsers atuais. As unidades ·alidas sao: pt ,pontos,,
px ,pixels,, pc ,paicas,, cm ,centímetros,, mm ,milímetros, e in ,polegadas,.
80
Parte 3 - lolhas de Lstilo
Os tamanhos absolutos chamados pelo nome ,xx-small, etc., correspondem aos tama-
nhos de 1 a ¯ do descritor ·íont size· e podem ·ariar de acordo com a íamília de íontes usada
,·ariam bastante entre plataíormas também,. Veja um exemplo comparati·o e o resultado no
Internet Lxplorer para \indows:
<style>
p {font-family: serif}
.t1 {font-size: xx-small}
.t2 {font-size: x-small}
.t3 {font-size: small}
.t4 {font-size: medium}
.t5 {font-size: large}
.t6 {font-size: x-large}
.t7 {font-size: xx-large}
</style>
(...)
<p><span class=t1>xx-small</span> |
<span class=t2>x-small</span> |
<span class=t3>small</span> |
<span class=t4>medium</span> |
<span class=t5>large</span> |
<span class=t6>x-large</span> |
<span class=t7>xx-large</span> <br>
<font size="1">size=1</font> |
<font size="2">size=2</font> |
<font size="3">size=3</font> |
<font size="4">size=4</font> |
<font size="5">size=5</font> |
<font size="6">size=6</font> |
<font size="7">size=7</font> |</p>


Os tamanhos relati·os íuncionam como o ·BIG· e ·SMALL·, aumentando a íonte
atual por 150°. A diíerença é que podem passar além do limite xx-large ,ou ·íont size~¯·,
ou xx-small ,íont size~1·,.
Os comprimentos reíerem-se a unidades comuns em tipograíia. Um "em" é uma distan-
cia horizontal equi·alente ao tamanho de uma íonte ,se uma íonte tem 20 pontos de tamanho,
um em corresponde a uma distancia de 20 pixels de largura,. Um "ex" é a altura das letras de
caixa-baixa ,sem incluir as hastes ascendentes e descendentes,. 1anto "em" como "ex" usam
·alores relati·os ao elemento que contém o elemento atual. Sao úteis principalmente em espa-
çamento, sendo pouco usados em íontes.
81
!"#$% ' ( )*+,"- .% /-$0+*
1- 2*#3%4$"5%4- -6* "7%$"."- 2%+" ,%#"48"9 2*# %:%;2+*<
<style>
.sec {font-size: 18pt};
.sec H1 {font-size: 200%}
.sec P {font-size: 50%}
</style>
</head>

<body>
<div class=sec>Este é o texto desta seção.
<h1>2 vezes maior</h1>
<p>Este é um parágrafo da seção. O texto tem 50% do tamanho do texto
da seção.</p>
</div>

1- 2*#3%4$"5%4- .% =>? % @>>? -6* "2+03"."- 4" 7*4$% "$A"+9 BA% C " 7*4$% .* D+*3* BA%
3*4$C; *- .*0- %+%;%4$*- EFGHIJK9 % BA% $%; $";"4,* LM2$N O #%-A+$".* C BA% * FPLJ -%#Q
%:0D0.* %; $";"4,* @R2$ % F!J %; $";"4,* S2$N
11.². fovt·.t,te e fovt·reigbt
O %-$0+* .% A;" 7*4$% C "7%$".* "$#"TC- .% .A"- .07%#%4$%- 2#*2#0%.".%-< font-weight9
BA% "+$%#" * 2%-* ." 7*4$%9 % font-style9 BA% "+$%#" * %-$0+* *A 043+04"86*N
´ivta·e:
font-style: normal (ou italic, oblique)
í·ev¡to.:
H1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
U04$":%<
M@
Parte 3 - lolhas de Lstilo
font-weight: normal | bold (normal=400 e bold = 700)
font-weight: bolder | lighter (valores relativos)
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Lxemplos:
H1 { font-weight: normal }
B { font-weight: 900 }
<b> ... <b style="font-weight: bolder">...</b> ... </b>
A pala·ra oblique de·e íazer com que íontes chamadas de "oblique" ,se existirem no
sistema, sejam usadas, assim como ocorre com íontes "italic". A rigor, italic é uma íonte
distinta da normal, e nao, meramente uma ·ersao inclinada da mesma. Os browsers, porém,
nao encontrando um equi·alente "italic", "oblique", "kursi·" ou similar irao inclinar o texto,
simulando um italico.
Os ·alores numéricos para font-weight oíerecem um controle excepcional sobre o pe-
so da íonte na tela, embora isto esteja limitado aos ní·eis disponí·eis nas íontes instaladas ,pa-
ra um mesmo nome de íonte,. Na pratica, dos 9 ní·eis disponí·eis de peso, se consegue 4 ou 5
ní·eis diíerentes de mais pesado ou mais le·e. ¯00 é o "bold" típico e 400 é o "normal".
O exemplo a seguir ilustra o eíeito com a íonte "1ahoma" ,\indows,:
<style type=text/css>
P {font-family: tahoma;
font-size: 18pt;}
.b100 {font-weight: 100}
.b200 {font-weight: 200}
.b300 {font-weight: 300}
.b400 {font-weight: 400}
.b500 {font-weight: 500}
.b600 {font-weight: 600}
.b700 {font-weight: 700}
.b800 {font-weight: 800}
.b900 {font-weight: 900}
.nor {font-weight: normal}
.bol {font-weight: bold}
</style>
(...)
<p><span class=b100>100</span>
<span class=b200>200</span>
<span class=b300>300</span>
<span class=b400>400</span>
<span class=b500>500</span>
<span class=nor>normal</span><br>
<span class=b600>600</span><br>
<span class=b700>700</span>
<span class=b800>800</span>
<span class=bol>bold</span><br>
<span class=b900>900</span></p>
83
!"#$% ' ( )*+,"- .% /-$0+*

1- 2"+*#%- lighter % bolder %-3%40504"6 3%-*- .% 5*7$%- #%+"$02*- " "+896 2"+*# ,%#:
.".*; /+%- "2"7<"6 *9 #%$#*4%.%6 7" %-4"+" .% =>> " ?>> #%+"$02*- "*- 3%-*- .% 5*7$%-;
11.1. fovt·rariavt
@$9"+6%7$% " A704" *3<B* .0-3*7C2%+ 3"#" %-$" 3#*3#0%.".% D small-capsE F9% .%2% 4*:
+*4"# * $%G$* -%+%40*7".* %6 6"0A-49+"-E 3*#D6 6%7*#%- F9% "- 4"30$9+"#%-; H" 3#I$04"E "$D "-
6"0A-49+"- -B* #%.9J0."- 7* ívtervet í·¡torer;
´ivta·e:
font-variant: small-caps
í·ev¡to.:
<style>
.sm {font-variant: small-caps}
.tc {font-size: 120%}
</style>
</head>

<body>
<p>Um texto simples sem SmallCaps...</p>
<p class=sm>Um texto simples com SmallCaps...</p>
<p>Os small-caps acima, no Internet Explorer 4, são falsos. As le-
tras maiúsculas não deveriam ter sido afetadas.</p>
<p><span class=sm><span class=tc>U</span>m texto simples com <span
class=tc>S</span>mall<span class=tc>C</span>aps... verdadei-
ros</span>.</p>

KL
Parte 3 - lolhas de Lstilo
!"#$# & '()'(*+,-,+ .)/0
Para especiíicar ·arias propriedades de um seletor de uma ·ez só, pode-se usar a propri-
edade font em ·ez de deíinir em separado font-size, font-weight, font-family, etc.
Nesta sintaxe, a ordem dos íatores é importante, porém nem todos os elementos precisam
estar presentes:
!"#$% font-style font-variant font-weight font-size
line-height font-family
Lxemplos:
H1 {!"#$% italic 700 24pt Tahoma, Arial, sans-serif }
85
!"#$% ' ( )*+,"- .% /-$0+*
1:. .tribvto. ae te·to
1- 2#*2#0%.".%- .%-$" -%34* $#"$"5 .% $#"6-7*#5"38%- % "$#09:$*- "2+0;".*- " $%<$*= 64*
"7%$"6.* " %<09034* ."- 7*6$%-> ?- "$#09:$*- $02*@#A70;*- "7%$"5 " 7*#5" ;*5* * $%<$* B "2#%C
-%6$".* 6" $%+" ;*5* * %-2"3"5%6$* %6$#% +06,"-= %6$#% 2"+"D#"-= %6$#% +%$#"-= * "+06,"5%6$* .%
2"#A@#"7*- % " %6.%6$"34*>
1 2#*2#0%.".% text-transform 2%#50$% ;*+*;"# +%$#"- %5 5"0E-;:+"- *: 506E-;:+"- % "
2#*2#0%.".% text-decoration 2%#50$% ";#%-;%6$"# *: $0#"# %7%0$*- .%;*#"$0D*- .* $%<$* ;*5*
#0-;".*- % -:9+06,".*->
1:.1. te·t·trav.forv
1 2#*2#0%.".% text-transform #%"+0F" $#"6-7*#5"38%- 6* 7*#5"$* ;"0<"C"+$" *: ;"0<"C
9"0<" .* $%<$*> ´ivta·e:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none (valor default)
í·ev¡to.:
H1 {text-transform: capitalize}
G"20$"+0F% ;*+*;" " 2#05%0#" +%$#" .% ;"." 2"+"D#" %5 5"0E-;:+"-> Uppercase ;*+*;" $:.*
%5 5"0E-;:+"- % lowercase ;*+*;" $:.* %5 506E-;:+"-> None #%5*D% H:"+H:%# $#"6-7*#5"34*
.%0<"6.* * $%<$* ." 7*#5" ;*5* 7*0 .%7060.* "6$%- ."- $#"6-7*#5"38%->
<style>
p {font-weight: bold}
span {font-weight: normal}
.non {text-transform: none}
.upp {text-transform: uppercase}
.cap {text-transform: capitalize}
.low {text-transform: lowercase}
</style>
(...)
<p>Sem transformação:
<span class=non>É preciso conhecer bem HTML e CSS</span></p>
IJ
!"#$% ' ( )*+,"- .% /-$0+*
<p>Uppercase:
<span class=upp>É preciso conhecer bem HTML e CSS</span></p>
<p>Capitalize:
<span class=cap>É preciso conhecer bem HTML e CSS</span></p>
<p>Lowercase:
<span class=low>É preciso conhecer bem HTML e CSS</span></p>
1:.2. te·t·aecoratiov
1 2#*2#0%.".% text-decoration 2%#30$% 4*+*4"# 5*6 $0#"#7 -68+09,".*-: +09,"- -*8#% %
"$#";%--"9.* * $%<$*: %$4= ´ivta·e:
text-decoration: underline (default em links)
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-decoration: none (default)
í·ev¡to.:
h1 {text-decoration: overline}
<a href="algumlugar.html"
style="text-decoration: none">Link sem sublinhado</a>
<style>
.und {text-decoration: underline}
.ovr {text-decoration: overline}
.blk {text-decoration: blink}
.lin {text-decoration: line-through}
.non, .non a {text-decoration: none}
</style>
(...)
<p><span class=und>Underline. <a href="#">Link</a></span> -----
<span class=ovr>Overline. <a href="#">Link</a></span></p>
<p><span class=blk>Blink. <a href="#">Link</a></span> -----
<span class=lin>Line-through. <a href="#">Link</a></span> -----
<span class=non>None. <a href="#">Link</a></span></p>
>?
Parte 3 - lolhas de Lstilo
Vínculos ,links, sao normalmente
sublinhados na maior parte dos browsers.
O sublinhado pode ser remo·ido com a
propriedade text-decoration: none.
O browser Netscape 4 nao suporta
a propriedade o·erline. O Internet Lx-
plorer nao suporta a propriedade blink.
!"#$# &'(&)*+,-. ' /'0&,1*+)*+,-.
CSS oíerece propriedades que permitem contro-
lar o alinhamento horizontal do texto, seu alinhamento
·ertical e endentaçao do texto na primeira linha. O
alinhamento horizontal é o mesmo conseguido com o
atributo align do l1ML, só que o da íolha de estilos
tem precedência. A sintaxe é:
text-align: left | right | center |
justify
O alinhamento só se aplica a elementos de bloco
,·P·, ·DIV·, l1, etc., e elementos como applets e
imagens. A característica é herdada para sub-blocos. O
·alor 2'3*4+& é sempre left. Lxemplo:
DIV { text-align: center }
Alinhamento ·ertical em l1ML só pode ser a-
plicado a tabelas e imagens. Com CSS, esta propriedade
é estendida a qualquer elemento de texto e imagens. A
sintaxe é:
vertical-align: baseline | top | text-top | middle |
bottom | text-bottom
vertical-align: sub | super
vertical-align: porcentagem %
O ·alor 2'3*4+& é baseline. As porcentagens reíerem-se a altura da linha ,line-heght,
do próprio elemento. Usando porcentagens negati·as consegue-se sobrepor elementos.
Na pratica, apenas o 5.&'0.'& 6(7+80'0 9 suporta vertical-align com os ·alores sub e
super ,coloca elementos em subscrito ou sobrescrito,.
88
Parte 3 - lolhas de Lstilo
!"#$# &'(&)*+,'+&
A propriedade text-indent se aplica a elementos de bloco e realiza a endentaçao da
primeira linha. A sua sintaxe é:
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relaçao a largura do elemento que contém o seletor. Pode ser
a largura total da pagina, a largura da célula de uma tabela, etc. Lxemplos:
P { text-indent: 1 cm }
P {text-indent: 50% }
<P style="text-indent: 1in">
A endentaçao tratada aqui é apenas para uma linha de texto. Para endentar blocos intei-
ros, de·e-se usar as margens ,em seçao mais a írente,.
!"#"# -*+').'*/.&
Lste atributo é usado para controlar o espaço
que existe antes e depois de uma linha de texto. Lla
especiíica a altura total de uma linha de texto. Se ·ocê
tem um texto de 10 pontos e uma line-height de
20 pontos ,line-height: 2,, ha·era 5 pontos antes e
5 pontos depois de cada linha de texto ,espaço du-
plo,. O espaço simples equi·ale geralmente a line-
height: 120°. Uma line-height menor que o
tamanho da íonte produzira sobreposiçao de texto.
Lmbora ambos os browsers mais populares su-
portem este recurso, ele nao ocorre da maneira corre-
ta. Os browsers nao acrescentam a mesma quantidade
de espaço antes e depois como esperado.
Um 01/ no 2+&'3+'& 4(5-63'3 7 íaz com que ele
interprete ·alores absolutos ,sem unidade, como ·a-
lores em pixels. Por exemplo, 1.5 indica espaço 1 e
meio ou 150°. No 2+&'3+'& 4(5-63'3 7 as linhas íicam
sobrepostas pois o browser interpreta a unidade co-
mo 1.5 pixels. L·ite, portanto, usar ·alores absolutos
,use porcentagens,.
A sintaxe é:
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
89
Parte 3 - lolhas de Lstilo
í·ev¡to.:
H1 {line-height: 0 } // sobreposição de linhas
H1 {line-height: 2 } // espaço duplo
H1 {line-height: 0.3em }
H1 {line-height: 150% } // espaço 1 e meio
Se ·ocê usar um ·alor percentual menor que 100°, um ·alor absoluto menor que 1 ou
uma unidade menor que o tamanho da íonte, ha·era sobreposiçao de linhas.
1:.ó. tetter·.¡acivg
A propriedade letter-spacing altera o
espaço entre as letras. A sua sintaxe é:
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma
das unidades ·alidas para tamanho de íontes
,pt, px, pc, cm, in, mm, em e ex,. Na tipograíia,
é mais comum usar "em" como medida de es-
paçamento por ser proporcional ao tamanho da
íonte.
Pode-se usar também ·alores negati·os
para sobrepor caracteres, criar ligaduras ,usadas
em kerning, e caracteres especiais ,por exem-
plo, sobrepondo , com `,.
O suporte a letter-spacing nos prin-
cipais browsers ainda é inconsistente. O ^et.ca·
¡e ,·ersao 4, nao o suporta.
90
Parte 3 - lolhas de Lstilo
!"# %&'()
Com as propriedades de cores, podemos controlar as cores de ·arias partes da pagina, do
texto, do íundo da pagina e de elementos l1ML. Além disso, podemos aplicar imagens de
íundo em qualquer elemento, nao só no elemento BOD\ como ja se íaz em l1ML.
As cores deíinidas em CSS, assim como em l1ML, podem ser especiíicadas por um
número em hexadecimal ,representando um código RGB, ou por um nome. Além dessas duas
íormas, podem ainda ser especiíicadas por três números decimais, representando também o
código RGB da cor.
Os códigos RGB iníormam a quantidade de luz ·ermelha, ·erde e azul que compoe a
cor, respecti·amente. Cada cor pode ter 16 ní·eis de intensidade: 0 a 256 ,00 a ll, em hexade-
cimal,. O total de combinaçoes possí·eis é de 16.¯¯¯.216 cores.
A exibiçao correta das cores depende da capacidade do ·ídeo onde serao ·istas. Poucos
sistemas têm capacidade de mostrar mais que 65.536 cores simultaneas. A maioria só mostra
256.
A tabela abaixo relaciona em negrito os 16 nomes padrao, suportados por todos os
browsers que exibem cores, e seus respecti·os códigos RGB em hexadecimal e decimal.

!"# %"&' !()* +',-&./ !()* 0'1. !"# %"&' !()* +',-&./ !()* 0'1.
red 255, 0, 0 íí0000 maroon 128, 0, 0 800000
lime 0, 255, 0 00íí00 green 0, 128, 0 008000
blue 0, 0, 255 0000íí na·y 0, 0, 128 000080
yellow 255, 255, 0 íííí00 oli·e 128, 128, 0 808000
aqua 0, 255, 255 00íííí teal 0, 128, 128 008080
íuchsia 255, 0, 255 íí00íí purple 128, 0, 128 800080
white 255, 255, 255 íííííí sil·er 192, 192, 192 c0c0c0
black 0, 0, 0 000000 gray 0, 0, 0 808080

la muito mais cores com nomes suportadas pelo *(+),-.( e /0+('0(+ 12.3&'('. Lstas lista-
das sao as únicas que íazem parte da especiíicaçao oíicial do l1ML 4. Sao todas "seguras", ou
seja, íazem parte da paleta basica de 216 cores.
91
Parte 3 - lolhas de Lstilo
1ó.1. cotor
Deíine a cor do texto. A propriedade color substitui totalmente o descritor ·lON1
COLOR· com ·antagens. Pode ser aplicada localmente em um descritor ,usando o atributo
style, ou globalmente na pagina e no site, como qualquer outra propriedade de estilo.
A sintaxe da propriedade color é:
color: nome_de_cor
color: #número_hexadecimal
color: rgb(vermelho, verde, azul)
í·ev¡to.:
H1 { color: green }
P { color: #fe0da4 }
EM { color: rgb (255, 127, 63) }
<EM STYLE="color: rgb (100%, 50%, 25%)">
Os nomes sao qualquer nome ·alido de cor. Se o browser nao encontrar o nome ao qual
o estilo se reíere, de·e exibir a cor aefavtt ,ou herdada,. O símbolo "4" é opcional no código
hexadecimal. A intensidade da cor pode ser expressa em ·alores absolutos ,0 a 255, ou percen-
tagens ,0.0-100.0°,.
1ó.2. bac/grovva·cotor
As cores de íundo de qualquer elemento podem ser alteradas atra·és da propriedade
background-color. A sintaxe é:
background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #número_hexadecimal
background-color: rgb(vermelho, verde, azul)
í·ev¡to.:
H1 { background-color: green }
P { background-color: #fe0da4 }
EM { background-color: rgb (255, 127, 63) }
<EM STYLE="background-color: rgb (100%, 50%, 25%)">
O íundo transparente simplesmente deixa a mostra o íundo do objeto que o contém. O
íundo, para texto, ocupa todo o espaço da íonte ,inclusi·e espaço em branco acima e abaixo
que íazem parte da íonte,. A cor nao é estendida quando o espaçamento entre linhas é aumen-
tado em alguns browsers.
92
Parte 3 - lolhas de Lstilo
1ó.². bac/grovva·ivage
Com background-image é possí·el atribuir a qualquer elemento l1ML uma imagem
que sera exibida no íundo, assim como as cores de íundo. A sintaxe é:
background-image: none (valor default)
background-image: url(URL_da_imagem)
í·ev¡to.:
H1 { background-image: url(http://www.xyz.com/abc.jpg) }
B {background-image: url(../monstro.gif) navy
<TD STYLE="background-image: url(dinheiro.gif)">...</TD>
As URLs sao relati·as a localizaçao do arqui·o que contém a íolha de estilos ,pode ser a
própria pagina ou nao,. A cor de bac/v¡ é usada para '·azar' pelas partes transparentes da ima-
gem ou pre·enir contra o nao carregamento do íundo ,para permitir a leitura em íundo escuro
pode-se usar preto como cor de bac/v¡ de uma imagem escura,.
1ó.1. bac/grovva·re¡eat
CSS permite mais controle ainda sobre a imagem de íundo, íacilitando a maneira como a
mesma ira se repetir. A propriedade é background-repeat. ´ivta·e:
background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
í·ev¡to.:
BODY {background-image: url(china.jpg);
background-repeat: repeat-x }
TABLE{background-image: url(corinthians.gif)
background-repeat: no-repeat }
O ·alor repeat é aefavtt e íaz com que a imagem ocupe toda a tela. repeat-x íaz com
que a imagem seja repetida apenas horizontalmente e repeat-y íaz com que ela seja repetida
apenas ·erticalmente. no-repeat íaz com que a imagem nao seja repetida de íorma alguma
,aparecera uma imagem apenas no canto superior esquerdo,.
Para íazer a imagem aparecer em outros lugares, pode-se usar as propriedades de posi-
cionamento do íundo da tela.
1ó.:. bac/grovva·¡o.itiov e bac/grovva·attacbvevt
O posicionamento e a íorma de exibiçao do papel de parede sao controlados pelas pro-
priedades background-attachment e background-position. A primeira deíine se o íundo
93
!"#$% ' ( )*+,"- .% /-$0+*
0#1 *2 34* -% 5*6%# 7*5 * $%8$* *2 907"# 908* 3" $%+": ; -%<23." =%#50$% * =*-070*3"5%3$* .*
923.* %5 25 +*7"+ %8"$* ." $%+": >39%+0?5%3$% %--"- .2"- =#*=#0%.".%- 34* $@5 -2=*#$% 230A
6%#-"+ =%+*- B#*C-%#- 7*5%#70"0- D"=%3"- * !"#$%"$# '()*+%$% *- -2=*#$"E:
,-"#.($/
background-attachment: fixed
background-attachment: scroll
'($0)*+/
BODY {background-image: url (china.jpg);
background-attachment: fixed }
,-"#.($/
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal
'($0)*+1/
BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: 50% 100% }
BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: 25pt 2.5cm }
BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: center top }
BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: left bottom }
F- 6"+*#%- .% =*#7%3$"<%5 -4* #%+"$06*- G =*-0H4* .* %+%5%3$* -*B#% * I2"+ -% "=+07" *
%-$0+*: ;- =*-0HJ%- -4* -%5=#% ."."- %5 ="#%-K $%3.* *- 6"+*#%- -%="#".*- =*# %-="H*-: F
=#05%0#* 6"+*# L -%5=#% 25 6"+*# ,*#0?*3$"+ % * -%<23.* 25 6"+*# 6%#$07"+: F B#*C-%# 7*+*7"
* B+*7* "9%$".* .%3$#* .% 25" M7"08" 0360-N6%+M % " =*-070*3" .% "7*#.* 7*5 "- =*#7%3$"<%3-:
O5 6"+*# .% PQQR ="#" * =#05%0#* 6"+*#K %5=2##" " 5"#<%5 .0#%0$" D*=*-$"E .%-$" M7"08" 0360A
-N6%+M 7*3$#" " 5"#<%5 .0#%0$" .* B#*C-%#:
F- 6"+*#%- .% 7*5=#05%3$*K "--05 7*5* *- .% =*#7%3$"<%5 $"5BL5 -4* .".*- %5 ="A
#%-: F =#05%0#* L " .0-$S370" ." 5"#<%5 ,*#0?*3$"+ " ="#$0# .* 7"3$* -2=%#0*# %-I2%#.* .* *BA
T%$*U * -%<23.* L " .0-$S370" ." 5"#<%5 -2=%#0*#: ;- 230.".%- 61+0."- -4* "- 5%-5"- 2-"."-
%5 9*3$%- D75K 55K 03K =7K =8K =$K %5K %8E % =*.%5 -%# 50-$2#"."- 3*- .*0- 6"+*#%- .* ="#:
VW
Parte 3 - lolhas de Lstilo
Os ·alores de posiçao sao pala·ras-cha·e usadas também aos pares. Sao equi·alentes das
porcentagens basicas de alinhamento. O primeiro par pode ter left ,0°,, right ,100°, ou
center ,50°,. O segundo par pode ser top ,0°,, bottom ,100°, ou center ,50°,.
!"#"# %&'()*+,-.
A propriedade background pode ser usada para deíinir ·arias características de íundo de
uma única ·ez. Na sintaxe abaixo, a ordem dos íatores é importante. A sua sintaxe é:
background: background-color background-image background-repeat
background-attachment background-position
De·e ha·er pelo menos um ·alor deíinido, mas qualquer número de ·alores pode ser a-
tribuído de uma ·ez.
/01234+56
BODY {background: url(../duke.gif) white no-repeat fixed 50% 25%}


95
!"#$% ' ( )*+,"- .% /-$0+*
1¨. Pro¡rieaaae. ae
cta..ificaçao
/-$"- 1#*1#0%.".%- 2+"--0302"4 *- %+%4%5$*- %4 2"$%6*#0"- 78% 1*.%4 #%2%9%# %-$0+*-:
;"$%6*#0"- 1*.%4 -%# +0-$"-< 9+*2*-< $#%2,*- .% 9+*2*- *8 0$%5- 05=0->=%0-:
1¨.1. ai.¡ta,
/-$" 1#*1#0%.".% .%305% covo 84 %+%4%5$* ? 4*-$#".*: @ 1#*1#0%.".% none .%-+06" * %A
+%4%5$* % 3%2," * %-1"B* 78% * *9C%$* "5$%- *281"=" D$*#5" * *9C%$* 05=0->=%+E: block "9#%
84" 5*=" cai·a *5.% * *9C%$* ? 1*-020*5".*< #%+"$0=* "*- *8$#*- 9+*2*-< list-item ? 84 9+*A
2* 2*4 84 4"#2".*# .% +0-$" % inline .%305% 84 %+%4%5$* 2*4* 1"#$% .% 84 9+*2*:
´ivta·e:
display: block | inline | list-item | none
í·ev¡to:
P {display: list-item}
IMG {display: none} // desliga todas as imagens
1¨.2. rbite·.¡ace
F%305% 2*4* * %-1"B* %4 9#"52* .* %+%4%5$* ? 6%#%520".* D-% "- +05,"- .%=%4 -%#
78%9#"."- 1"#" 78% "1"#%B"4 5" $%+" *8 5G* DnowrapE *8 -% *- %-1"B*- %4 9#"52*< $"98+"BH%-<
%$2: .%=%4 -%# 2*5-0.%#".*- DpreE:
white-space: normal | pre | nowrap
IJ
Parte 3 - lolhas de Lstilo
!"#$# &'()*()+&,
Lsta propriedade e as propriedades list-style-type, list-style-image e list-
style-position deíinem atributos para objetos de lista, como tipo de marcador, imagem do
marcador e posiçao. Lsses elementos nao sao suportados no -,)(./0,.
list-style-type: disc | circle | square | decimal | lower-roman
upper-roman | lower-alpha | upper-alpha | none
list-style-image: url(url_da_imagem)
list-style-position: inside | outside
Lxemplo:
list-style-image: url(bullet.gif)
L possí·el deíinir as três propriedades atra·és de um atalho usando list-type. A or-
dem dos íatores é importante neste caso.
list-style: list-style-type list-style-image list-style-position
12,30&4!
list-style: url(bullet.gif)
list-style: square outside

Parte 3 - lolhas de Lstilo
!"# %&'()&*+ ,+ -*&.&/
Uma caixa` é uma propriedade de qualquer elemento de bloco no l1ML ,l1, P, DIV, etc.
que automaticamente deíinem seu próprio -*&.& ou 01)23)14&,. A caixa de um objeto consiste das
partes seguintes:
O elemento em si ,texto, imagem,



As margens internas do elemento ,01,,5'3,
A borda em torno das margens internas ,-&),+),
A margem em torno da borda ,61)35',

1odo elemento de bloco tem essas propriedades. As propriedades CSS que ·eremos nes-
ta seçao mostrarao como altera-las. A cor e tamanho da borda podem ser alterados assim co-
mo o íundo ,como ·imos na seçao anterior,. A margem externa é sempre transparente mas a
margem interna herda a cor de íundo do objeto.
1ambém sao altera·eis as margens internas e externas, larguras de borda, cor de borda e
estilo de borda de cada um dos quatro lados de uma caixa indi·idualmente, identiíicados pelos
nomes (&0, )537(, -&((&6 e *+4(:
98
Parte 3 - lolhas de Lstilo

!"#!# %&'()* + ,&--)*(
As margens externas sao deíinidas usando a propriedade margin ,que aíeta todas as
margens ao mesmo tempo, ou as propriedades margin-top, margin-bottom, margin-right
e margin-left que permite alterar as margens indi·idualmente.
.)*/&0+1
margin-top: comprimento | porcentagem % | auto
margin-bottom: comprimento | porcentagem % | auto
margin-right: comprimento | porcentagem % | auto
margin-left: comprimento | porcentagem % | auto
20+%,341
margin-top: 1cm; margin-left: 12pt;
A propriedade margin aíeta ·arios aspectos das margens externas de uma ·ez só. A or-
dem dos íatores é importante. Podem ser incluídos todos quatro ·alores, apenas um ,todas as
margens iguais, ou dois ,margens horizontais e ·erticais,. .)*/&0+1
margin: margin-top margin-right margin-bottom margin-left
margin: margin-top% margin-right% margin-bottom% margin-left%
margin: espaço_vertical espaço_horizontal
margin: margem_de_todos_os_lados
20+%,3451
margin: 5cm // vale para as quatro margens
margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais
margin: 5cm 3cm 2cm 1cm // sent. horário: top, right, bottom, left
// (em cima 5; à direita 3; em baixo 2;...
As margens internas ,,&--)*(, sao deíinidas usando a propriedade padding ,que aíeta
todas as margens internas ao mesmo tempo, ou as propriedades padding-top, padding-
bottom, padding-right e padding-left.
.)*/&0+1
padding-top: comprimento | porcentagem %
padding-bottom: comprimento | porcentagem %
padding-right: comprimento | porcentagem %
padding-left: comprimento | porcentagem %
A propriedade padding aíeta ·arios aspectos das margens internas de uma ·ez só. A or-
dem dos íatores é importante. Podem ser incluídos todos quatro ·alores ou apenas um. .)*/&0+:
padding: padding-top padding-right padding-bottom padding-left
padding: padding-top% padding-right% padding-bottom% padding-left%
99
Parte 3 - lolhas de Lstilo
padding: espaço_vertical espaço_horizontal
padding: margem_de_todos_os_lados
1º.2. boraer·riatb
Pode se controlar ·arios aspectos das bordas como a sua espessura em cada um dos qua-
tro lados, suas cores ,também cada um dos quatro lados, e estilos ,idem,. Isto pode ser íeito de
di·ersas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo ,border-
style, seja deíinido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada atra·és da propriedade border-width, aíe-
tando as espessuras de todos os lados da borda, ou indi·idualmente atra·és de border-top-
width, border-bottom-width, border-right-width e border-left-width. ´ivta·e:
border-top-width: comprimento | thin | medium | thick
border-bottom-width: comprimento | thin | medium | thick
border-right-width: comprimento | thin | medium | thick
border-left-width: comprimento | thin | medium | thick
í·ev¡to.:
border-bottom-width: thick; border-right-width: 5.5px;
border-left-width: 0.2cm
As propriedades das bordas podem ser tratadas em grupo, com border-width. A or-
dem dos íatores é importante. Podem ser incluídos todos os quatro ·alores, dois ,reíerindo-se
as bordas horizontais e ·erticais, ou apenas um ,aíetando todas as bordas,. ´ivta·e:
border-width: border-top-width border-right-width
border-bottom-width border-left-width
í·ev¡to.:
border-width: 5cm // vale para as quatro bordas
border-width: 5cm 2cm // 5cm verticais, 2cm horizontais
border-width: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left
1º.². boraer·cotor
A propriedade border-color é um atalho que permite que se altere a cor de uma ou
de todas as quatro bordas ao redor de um elemento que também podem ser deíinidas indi·i-
dualmente atra·és de border-top-color, border-bottom-color, border-right-color e
border-left-color.
border-top-color: cor (nome ou código)
border-bottom-color: cor (nome ou código)
100
Parte 3 - lolhas de Lstilo
border-right-color: cor (nome ou código)
border-left-color: cor (nome ou código)
í·ev¡to.:
border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b;
border-left-color: navy
As propriedades das bordas podem ser tratadas em grupo, com border-color. A or-
dem dos íatores é importante. Podem ser incluídos todos os quatro ·alores, dois ,reíerindo-se
as bordas horizontais e ·erticais, ou apenas um ,aíetando todas as bordas,. ´ivta·e:
border-color: border-top-color border-right-color
border-bottom-color border-left-color
Cada um dos border-···-color acima é uma cor ,RGB, hexadecimal ou nome,. Pode-
se alterar todas as bordas de uma ·ez, apenas as duas ·erticais e horizontais ou as quatro indi-
·idualmente.
í·ev¡to.:
border-color: red // red para as quatro bordas
border-color: rgb(255, 0, 0) // red
border-color: rgb(100%, 0, 0) // red
border-color: red 0000ff // red verticais, 0000ff horizontais
border-color: red blue yellow cyan // 4 cores sentido horário
1º.1. boraer·.t,te
O estilo de cada uma das quatro bordas pode ser alterado com border-style. 1ambém
é possí·el deíini-los indi·idualmente usando border-top-style, border-bottom-style,
border-right-style e border-left-style. Sao ·arios os estilos disponí·eis ,tracejado,
pontilhado, ·arias ·ersoes de 3D, etc.,.
border-top-style: none | dotted | dashed | solid | double |
groove | ridge | inset | outset
border-bottom-style: nome de estilo (um dos nomes acima)
border-right-style: nome de estilo
border-left-style: nome de estilo
í·ev¡to.:
border-bottom-style: none border-right-style: solid;
border-left-style: inset
As propriedades das bordas podem ser tratadas em grupo, com border-style. A or-
dem dos íatores é importante. Podem ser incluídos todos os quatro ·alores, dois ,reíerindo-se
as bordas horizontais e ·erticais, ou apenas um ,aíetando todas as bordas,. ´ivta·e:
border-style: border-top-style border-right-style
border-bottom-style border-left-style
101
Parte 3 - lolhas de Lstilo
!"#$%&'()
border-style: solid none inset outset;
border-style: solid
border-style: inset outset
Cada um dos border-"""-style acima é um dos seguintes ·alores: none, dotted, da-
shed, solid, double, groove, ridge, inset, outset. No +#,(-.%# e /0,#10#, !"%&'1#1, íuncio-
nam os estilos solid, inset ,eíeito baixo-rele·o, e outset ,eíeito alto-rele·o,. No +#,(-.%#
solid é 2#3.4&, mas no !"%&'1#1, o 2#3.4&, é none, portanto, uma borda nao aparece se a propri-
edade border-style nao íor deíinida antes.
56787 9'12#1
As propriedades border-top, border-bottom, border-left e border-right agru-
pam as propriedades de cor, estilo e espessura para cada uma das quatro bordas.
border-top: border-width border-style border-color
border-bottom: border-width border-style border-color
border-left: border-width border-style border-color
border-right: border-width border-style border-color
A propriedade border é uma íorma reduzida de deíinir tudo isto de uma ·ez só para to-
das as bordas e de íorma idêntica ,nao é possí·el especiíicar ·alores diíerentes para as bordas
neste caso,. 1odos os itens nao precisam aparecer, mas a ordem dos íatores é importante:
border: border-width border-style border-color
567:7 ;<2,= # =#<>=,
As propriedades width e height modiíicam a altura e largura de um bloco da mesma
íorma que atributos l1ML width e height usados em imagens e applets no l1ML. Com
íolhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de blo-
co. ?<0,."#:
width: comprimento | auto
height: comprimento | auto
567@7 3&'.,
A propriedade float permite que um bloco qualquer seja posicionado a direita ou es-
querda da janela do browser, íazendo com que o texto restante ílua em sua ·olta. Permite que
qualquer bloco se comporte como uma imagem que íaz uso dos atributos align=left e a-
lign=right no l1ML. ?<0,."#:
float: left | right | none
102
!"#$% ' ( )*+,"- .% /-$0+*
!"#"# %&'()
/ 102"+3%2$%4 5"#" %60$"# 78% 83 9+*:* 1+8" %3 $*#2* .% 83" 03";%3 *8 9+*:* 78% 8$0<
+0=" " 5#*5#0%.".% float4 %>0-$% " 5#*5#0%.".% clear4 78% .%6% -%# "$#098?." " 83 9+*:* *8
5"#@;#"1* 78% A "1%$".* 5%+" 1+8$8"BC* .% 83 9+*:*D )"= " 3%-3" :*0-" 78% * "$#098$* clear4
8-".* 2* <BR> %3 EFGH4 -I 78% "780 %+" A -85*#$"." %3 78"+78%# %+%3%2$* J9+*:* *8 2C*KD
!"#$%& none | left | right | both

!#03%0#* 5"<
#@;#"1* 1+80 "*
+".* ." 03"<
;%3D
!#03%0#* 5"#@<
;#"1* 1+80 "*
+".* ." 03"<
;%3D
L8$#* 5"#@<
;#"1* 78% 2C*
.%60" 1+80#D



L8$#* 5"#@;#"1* 78% 2C*
.%60" 1+80# J:*3 :+%"#KD

MN'
Parte 3 - lolhas de Lstilo
!"# %&'()(&*+,-*.&
O posicionamento de objetos em l1ML pode ser conseguido em termos absolutos ou
relati·os usando CSS 2. As propriedades permitem o posicionamento em três dimensoes ,hori-
zontal, ·ertical e em camadas,. Lmbora os recursos de posicionamento nao íaçam parte do
CSS1, tanto o /-.')+0- /+1(2+.&3 4 como o 5*.-3*-. 6708&3-3 4 o suportam.
!"#!# 0&'(.(&*9 .&0 - 8-:.
Lsta propriedade precisa de mais duas propriedades que deíinem o posicionamento de
um objeto. Os atributos localizam o objeto na tela de íorma +;'&8<.+ ou de íorma 3-8+.(1+. A
origem da posiçao absoluta sera a posiçao do objeto no ní·el imediatamente superior. O posi-
cionamento relati·o se reíere a posiçao anterior do objeto. =(*.+7-:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
67-,08&: considere as quatro imagens a seguir:
104
Parte 3 - lolhas de Lstilo

<div class="imagem1">
<img src="T1.gif" width=150 height=72 border=1> 1 Posição 0 0
</div>

<div class="imagem2">
<img src="T2.gif" width=150 height=72 border=1> 2 Posição 0 200
</div>

<div class="imagem3">
<img src="T3.gif" width=150 height=72 border=1> 3 Posição -25 -25
</div>

<div class="imagem4">
<img src="T4.gif" width=150 height=72 border=1> 4 Posição 100 0
</div>
Aplicando a seguinte íolha de estilos para posicionar as quatro imagens relati·amente a sua
localizaçao original obtemos a imagem ao lado. Os retangulos claros indicam a posiçao original
da imagem:
DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
}
DIV.imagem2 {
position: relative;
top: 0px;
left: 200px;
}
DIV.imagem3 {
position: relative;
top: -25px;
left: -25px;
}
DIV.imagem4 {
position: relative;
top: 100px;
left: 0px;
}

Usando posicionamento absoluto, o bloco é mo·ido em relaçao ao canto superior es-
querdo do browser.

105
Parte 3 - lolhas de Lstilo
DIV.imagem1 {
position: absolute;
top: 0px;
left: 250px;
}
DIV.imagem2 {
position: absolute;
top: 100px;
left: 0px;
}
DIV.imagem3 {
position: absolute;
top: 160px;
left: 120px;
}
DIV.imagem4 {
position: absolute;
top: 200px;
left: -80px;
}
!"#$# &'()*+,
A propriedade z-index permite ordenar os objetos em camadas. L um eixo de
proíundidade. Para usa-la, basta deíinir em cada objeto:
z-index: número
onde número é a camada de exibiçao. Quanto maior o número, mais alta a camada. o corres-
ponde a camada do texto. Se um objeto ti·er z-index menor que zero aparecera atras do
texto. Se z-index íor maior que zero, aparecera na írente. Quando nao é deíinido ou quando
z-index: 0 o bloco ocupara a mesma camada que o texto.
!"#-# .(/(0(1(23
Lsta propriedade ser·e para tornar um bloco ·isí·el ou in·isí·el. Diíere de display porque
nao remo·e o espaço antes ocupado pela imagem:
visibility: hidden | visible
4,+5617:
IMG {visibility: hidden} // torna invisíveis todas as imagens
106
Parte 3 - lolhas de Lstilo
!"# %&'()*)+,-
!"#.# /'-0'- -,1(' 2,345- 6' %-0+3,
1. Qual das seguintes regras de estilo esta incorreta· Marque uma.
a, a:link {color: rgb(0%,40%,40%)}
b, div.code pre {margin-bottom: 0px}
c, body {font-size: 0.5cm, color: yellow, background: black}
d, .botcor {font-size: 16pt; font-family: tahoma, sans-serif;}
e, Lstao todas corretas.
2. Qual dos seguintes trechos de código é ilegal dentro de um arqui·o .css· Marque uma.
a, span.value {color: maroon}
b, /* <H1>Titulo</H1> */
c, @import url(http://ww.estilos.org/estilo.css);
d, <STYLE>
e, Nenhuma das alternati·as é ilegal dentro de um arqui·o CSS.
3. Qual das regras abaixo, de uma íolha de estilos, declara que os paragraíos e células de da-
dos de tabelas terao texto ·ermelho·
a, P TD {color: red}
b, P: TD {color: ff0000}
c, P, TD {color: rgb(100%, 0%, 0%)}
d, P; TD {color: rgb(255, 0, 0)}
e, P, TD {color=red}
4. Qual das declaraçoes abaixo, contida em uma pagina l1ML, a ·incula a íolha de estilos
basico.css, localizada no mesmo diretório que a pagina·
a, <LINK REL=StyleSheet HREF="basico.css">
b, <LINK REL=StyleSheet SRC="basico.css">
c, <A HREF="basico.css" TITLE="StyleSheet">Folha de estilos</A>
d, <FRAME SRC="basico.css" REL="StyleSheet">
e, <A HREF="basico.css">Folha de estilos</A>
5. Considere o seguinte trecho de código l1ML:
10¯
Parte 3 - lolhas de Lstilo
<div>
<p>Parágrafo</p>
</div>
Quais declaraçoes abaixo, em um bloco <STYLE> do arqui·o que contém o trecho acima,
íarao com que o texto do paragraío tenha tamanho 10pt em um browser que suporte ío-
lhas de estilo· Marque uma ou mais.
a, div {font-size: 20pt}
p {font-size: 50%}
b, div {font-size: 10pt}
c, p {font-size: 10pt}
d, di· {font-size: 5pt}
p {font-size: 100%}
e, p div {font-size: 10pt}
6. Considere a seguinte íolha de estilos, com uma única regra, ·inculada a uma pagina l1ML.
P {color: green}
Dentro dessa pagina, logo depois da instruçao que ·incula o estilo a pagina, ha um bloco
<STYLE>, com a seguinte regra:
P {color: red}
A pagina possui dez paragraíos. Um deles atribui um estilo local usando o atributo STYLE,
da íorma:
<P STYLE="color: blue">Parágrafo</P>
Supondo que a pagina seja ·isualizada em um browser que suporte íolhas de estilo CSS,
qual é a cor da maior parte dos paragraíos dessa pagina·
a, azul ,blue,
b, ·ermelha ,red,
c, ·erde ,green,
d, preta ,black,
e, indeíinida
¯. Identiíique as alternati·as que contém l1ML ou CSS incorretos:
a, <span style="color: red; font-size: 24pt">Texto</span>
b, <span color=red font-size="24pt">Texto</span>
c, <div class="sec1">Tem <span class=item1>mais texto</span>.</div>
d, <span>Itens e <div class="sec1">seções</div> especiais.</span>
e, <div style="P {color: yellow}"><P>Texto amarelo</P></div·
8. Considere o código l1ML abaixo:
<div class=sec2>
<p class=novo>Texto modificado</p>
</div>
108
Parte 3 - lolhas de Lstilo
Quais das regras de estilo abaixo íara com que o paragraío seja exibido na cor azul, em um
browser que suporte íolhas de estilos CSS·
a, P {color: blue}
b, .sec2 {color: blue}
c, P.novo {color: blue}
d, .sec2 .novo {color: blue}
e, P.sec2 {color: blue}
9. Qual das regras abaixo retira o sublinhado apenas dos !"#$% ·isitados· Marque uma.
a, a: visited {text-decoration: none}
b, a, visited {text-decoration: none}
c, a.visited {text-decoration: none}
d, a visited {text-decoration: none}
e, Nenhuma das regras anteriores.
10. Marque apenas as alternati·as ·erdadeiras
a, Uma mesma íolha de estilos pode ser usada por ·arias paginas.
b, Uma mesma pagina pode usar ·arias íolhas de estilo.
c, Se um browser nao suportar uma íolha de estilos requerida pela pagina, podera ha-
·er uma degradaçao na qualidade da apresentaçao mas nunca ha·era perda de in-
íormaçao.
d, L possí·el construir um site inteiro usando apenas CSS.
e, A linguagem CSS usada para construir íolhas de estilo é uma recomendaçao do
\3C - consórcio de empresas que estabelece os padroes para a \eb.
&'(&( *+,-./."0% .01 20!34% 5, *%6"!0
Os exercícios a seguir têm a íinalidade de explorar as principais propriedades do CSS e
permitir que se ·eriíique o suporte a elas nos browsers populares. Lles sao mais didaticos do
que úteis. O objeti·o é apenas praticar com íolhas de estilos. Para realiza-los, use os arqui·os
disponí·eis no disquete ,ou no \ebsite,.
70#.,"60% 89%".0%
1. Crie uma íolha de estilos, chame-a de basico.css, e a carregue no arqui·o Style1est.html.
2. Nesta íolha de estilos, usando o mínimo de declaraçoes possí·el, declare:
a, que todo l1 tenha íonte 1ahoma, ou sans-serií, se 1ahoma nao existir
b, que todo o texto do corpo ,BOD\, do arqui·o tenha tamanho 10 pontos
c, que todos os l1, l2 e l3 sejam ·ermelhos
d, que os l1 tenham tamanho 24 pontos
e, que os l2 tenham tamanho 18 pontos
í, que os l3 tenham tamanho 14 pontos
3. Mude a cor do íundo da pagina para azul marinho ,na·y, e a cor 5,:4;!6 do texto para bran-
co em uma única declaraçao.
109
Parte 3 - lolhas de Lstilo
4. laça com que todo texto marcado em italico apareça em azul ciano ,cyan,.
!"#$%& () *&%# +,,
5. Carregue a íolha de estilos basico.css em outros arqui·os l1ML e ·eja o que acontece.
laça com que uma dessas outras paginas tenha uma cor de íundo clara ,amarela, por e-
xemplo, e cor de texto escuro ,diíerente daquela deíinida por basico.css, sem que isto alte-
re as outras paginas que usam o mesmo arqui·o.
6. laça com que o primeiro paragraío do arqui·o Style1est.html tenha texto ·erde.
¯. laça com que a célula do meio da tabela de Style1est.html tenha texto ·ermelho sobre
íundo amarelo ,a tabela 3x3 encontra-se no meio da pagina,.
+-%&&)&. -/01&. &)-)2"#)& () 3"02)42"
Para os exercícios abaixo, desligue a íolha de estilos usada nos exercícios anteriores ,mude o
nome ou remo·a o elemento ·LINK·, para que a pagina íique limpa outra ·ez. Use uma no-
·a íolha de estilos para aplicar as alteraçoes a seguir.
8. Deíina classes sec2, sec3, sec31 e sec32 para as seçoes ,·DIV·, do documento Style-
1est.html. As seçoes estao indicadas em comentarios l1ML ,por exemplo: ·!--Seçao 2 --
·,. Aplique um íundo diíerente ,imagem ou cor, nessas seçoes para diíerencia-las das ou-
tras.
9. 1ire os sublinhados de todos os links e substitua-os por um íundo cinza claro.
10. laça com que o link ati·o ,acti·e, íique em negrito, que o link normal tenha tamanho 10pt
e que mostre íundo amarelo quando o mouse esti·er sobre ele ,ho·er,, e que o link ·isita-
do nao tenha mais cor de íundo mas recupere o sublinhado. Obs: Para íazer um link ainda
nao ·isitado, íaça um link para qualquer recurso do sistema de arqui·os, para ·er o link ati-
·o, clique no link e segure o mouse.
11. laça com que:
a, todos os italicos dentro de negritos sejam colocados em maiúsculas ,use text-
transíorm: uppercase,.
b, todos os negritos dentro de italicos sejam sublinhados
c, todos os negritos que estejam dentro de um bloco italico que esta dentro de um bloco
LI que esta dentro de uma UL que esta em outra UL, sejam colocados em íonte arial,
em maiúsculas e em ·ermelho.
!"02)&
Crie uma no·a íolha de estilos ,íontes.css, para aplicar íontes. Vincule ,LINK, ou importe-a
,¸import, em seus arqui·os.
110
Parte 3 - lolhas de Lstilo
12. a, Aplique Verdana como íonte !"#$%&' em todo o site. Garanta que, se Verdana nao existir,
Arial sera usada, e se esta nao existir, sera usada a !"#$%&' sans-serií. Para testar, mude os
nomes das primeiras íontes para nomes desconhecidos do sistema. b, 1este a compatibili-
dade dos dois browsers em relaçao ao suporte de íontes com nomes longos ,entre aspas,
em íolhas de estilo locais e remotas.
13. laça com que os ·B· de seus paragraíos sejam 20° maiores que o texto normal destes
paragraíos.
(')*+%',- !" '"/', " 0&$--*#*0$12,
Crie uma no·a íolha de estilos para esses exercícios.
14. a, Aplique um espaçamento de 1 cm entre pala·ras de um paragraío seu texto ,isto podera
nao íuncionar de·ido a íalta de suporte dos browsers,. b, Aplique um espaçamento de 1
cm entre as letras de outro paragraío. 1este nos dois browsers.
15. Deíina todos os títulos l2 como sendo caixa alta ,uppercase,.
16. Lxperimente com as propriedades text-decoration ,use o·erline e outras propriedades em
blocos ·SPAN· criados para mostrar cada propriedade.
1¯. Llimine o espaçamento entre os paragraíos ,·P·, usando ¦margin-top: 0pt}, endente a
primeira linha e coloque todos os seus paragraíos, com exceçao dos paragraíos da terceira
seçao, com alinhamento justiíicado. O alinhamento de·e ser aplicado apenas nos paragra-
íos e nao em listas ou tabelas.
3,)"-
18. Lxperimente com cores, aplicando cores em textos, backgrounds de di·ersos componentes
da pagina, inclusi·e íormularios ,·INPU1· e ·SLLLC1·,. Use as três íormas ,url,r, g,
b,, rrggbb e nomes, e ·eja como ocorre o suporte dos browsers em íolhas de estilo locais e
externas. Dica: crie uma íolha de estilos só para este exercício.
4%5!,-6 78$9"5- " :";"'*1<"-
19. Inclua a imagem rabbit.gií ,ou outra qualquer do subdirectório 3_Imagens do CD do A-
SI1, no íundo da pagina Style1est.html ,usando uma no·a íolha de estilos: back-
ground.css,. Lxperimente com posicionamento, íazendo a imagem íicar íixa em ·ez de ro-
lar na tela. 1este nos dois browsers. Lxperimente com repetiçoes, íazendo a imagem repe-
tir na ·ertical, na horizontal e nao repetir. Veja o que acontece nos dois browsers.
20. Numa outra íolha de estilos ,para este exercício,, posicione a imagem no centro da pagina,
sem repetiçoes e uma outra imagem no centro da tabela, também sem repetiçoes.
21. Posicione ,outra íolha de estilos, o rabbit.gií ,ou outra imagem, em uma posiçao a 4cm da
margem esquerda e a ¯cm da margem superior. Na seçao 2 ,sec2,, posicione bart.gií, repe-
111
!"#$% ' ( )*+,"- .% /-$0+*
112
$03.* -*4%3$% 3" 5%#$06"+7 "8"-$".* 1164 ." 4"#9%4 %-:;%#." % 03060"3.* 1 64 "<"0=* ."
4"#9%4 -;>%#0*#?
!"#$%$"&'()&*" ) ,'-".*
22? @%4*5" * %->"A* %3$#% $*.*- *- >"#B9#"8*- .% C$D+%E%-$?,$4+? F>+0:;% ;4 $%=$G03.%3$ .%
164 %4 6"." >"#B9#"8*?
2'? )"A" 6*4 :;% *- <+*6*- H>"#B9#"8*- % 6"<%A"+,*-I ." -%AJ* '?1 % '?2 HKLMI $%3,"4 N7' 64
.% 4"#9%4 %-:;%#." % .0#%0$"7 % N7O64 .% 4"#9%4 -;>%#0*# % 038%#0*#7 %4 #%+"AJ* P- <*#."-
." -%AJ*?
2Q? )"A" 6*4 :;% "- -%AR%- '?2 % '?1 $%3,"4 ;4" 4"#9%4 %=$%#3" .% N7O 64 %4 #%+"AJ* P -%G
AJ* '?
2O? F>+0:;% ;4" <*#." "S;+7 -T+0."7 .% '44 "604" ." -%AJ* 2 HUKLMVI7 ;4" *;$#"7 $"4<W4
.% '447 "<"0=*7 3" 6*# "4"#%+*? K*- +".*-7 6*+*:;% <*#."- 5%#4%+,"-7 .% O44?
2X? F>+0:;% ;4" <*#." 5%#.%7 .% Q44 P %-:;%#." .% $*.*- *- >"#B9#"8*- ." -%AJ* 2? /3$#% "
<*#." % * $%=$* .%5% ,"5%# ;4 %->"A* .% O44? /3$#% " <*#." % " 4"#9%4 ." >B903"7 4"0-
O44 H-%4 +%5"# %4 6*3$" * *88-%$I?
2Y? C%4 ;-"# $"<%+"-7 ">+0:;% ;4" +"#9;#" 4B=04" .% ONN >0=%+- %4 $*." " >B903"?
2Z? )"A" 6*4 :;% " -%AJ* '?1 $%3," +"#9;#" 4B=04" .% 22N >0=%+- % 8+;$;% >"#" " .0#%0$"7 .%0G
="3.* * #%-$"3$% .* $%=$* 8+;0# %4 5*+$" .%+"?
!"#$%$"&'()&*" '/#"0.*"
2[? \*3$% * :;%<#"G6"<%A"- .* %=%#6]60* 17 ." >"#$% Q H@%6;#-*- F5"3A".*-I -%4 ;-"# $"<%+"-
H;-"3.* ">%3"- >*-060*3"4%3$* .% 8*+,"- .% %-$0+*I?
'N? K0"9#"4% " >B903" .* %=%#6]60* 27 ." >"#$% Q7 -%4 ;-"# $"<%+"- H;-"3.* ">%3"- >*-060*3"G
4%3$* .% 8*+,"- .% %-$0+*I?
!"#$% ' ( )%*+#,-, "."/0"1-,
223
!"#$%&' )* +*, -#.*/ 0



)%*+#,-,
4."/0"1-,
!"#$% ' ( )%*+#,-, "."/0"1-,
!"#$%&'"
)*+ ,-./0.1.23" 4"1 $.5%6.7 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ **8
23434 567 1% +8 9:;%< 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444433=
23424 >"?-+$ 1% 9@A:/" *-8 $"B%<",44444444444444444444444444444444444444444444444444444444444444444444444444444444444433C
234D4 68"A%/, #%*-#$"1", 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444433C
))+ 90.1%7++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ **:
22434 6/$#-1+0E-4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444433F
22424 G,$#+$+#" B@,:*" 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444433H
224D4 I-/$#-<% 1-, "<.-, 1-, .J/*+<-, 4444444444444444444444444444444444444444444444444444444444444444444444444444444323
);+ <=6$-1>'-. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ *))
2D434 68"A%/, 8"9%"1", 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444322
2D424 K+1:-L .J1%- % 9<+AM:/,4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432D
N+1:- 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432'
OJ1%-444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432'
2D4D4 7<",P44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432=
I-/Q:A+#"0E- 1- ,%#.:1-# 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432=
)?+ @AA6%$7 B.C. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ *)D
2'434 R S+% ,E- "99<%$, T"."U444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432C
2'424 V+"/1- +,"# "99<%$, 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432C
2'4D4 I-8- :/*<+:# +8 "99<%$ %8 +8" 9@A:/"44444444444444444444444444444444444444444444444444444444444444444432F
2'4'4 I-/*<+,E-44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444432H
)8+ EF%04>4-"7 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ *;G

33'
!"#$% ' ( )%*+#,-, "."/0"1-,
!"# %&'()'*'+,-
.-* /'012'3
234-, /" 5#34%3#" 5"#$% 1%,$% *+#,- -, 5#3/*35"3, +,-, 1", $"6%7", 89:;< =%,$% *"5>$+7- 4-,?
$#"#%4-, %@%457-, 1% $"6%7", "573*"1", A 13"B#"4"0C- 1" 5DB3/"< E, #%*+#,-, "F+3 "5#%,%/$"?
1-, ,C- $-$"74%/$% ,+6,$3$+>.%3, 5-# G-7H", 1% %,$37-I 5-#J4I " .3,+"73K"0C- 1" 5DB3/" 5-1%#D
,%# 5#%L+13*"1" ,%#3"4%/$% ,% - 6#-M,%# /C- ,+5-#$"# NOO< N-4- ", $"6%7", %@3,$%4 HD 4"3,
$%45-I J 4+3$- 4"3, #"#- %/*-/$#"# 6#-M,%#, F+% /C- ,+5-#$"4 $"6%7",I %46-#" -, F+% /C-
,+5-#$"4 5-,3*3-/"4%/$- *-4 G-7H", 1% %,$37- %,$C- 6",$"/$% 5#P@34-,I /-, 6#-M,%#, .%#,C-
Q<R<
!"#" 13"B#"4"# *-4 $"6%7", J 5#%*3,- ,"6%# *-4- "73/H"# -6L%$-, 1%/$#- 1% $"6%7",I *-?
4- *-463/"# 1+", -+ 4"3, *J7+7", %4 +4"I #%4-.%# -, %,5"0-, %/$#% *J7+7", % %/$#% " *J7+7" %
- $%@$- "7J4 1% *#3"# $"6%7", 1%/$#- 1% $"6%7",< S, ,%0T%, ,%B+3/$%, $#"$"#C- 1% "7B+/, 1%,,%,
$%4",<
!-# /C- ,%# +4" 73/B+"B%4 "5#-5#3"1" A 13"B#"4"0C-I 89:; 345T% 13.%#,", 7343$"0T%,
F+"/1- A -#B"/3K"0C- 1- $%@$- % 34"B%/, %4 +4" 5DB3/"< N-4- .34-, /" ,%0C- "/$%#3-#I ",
$"6%7", -G%#%*%4 "7B+4 *-/$#-7%< U4 5-+*- 4"3, *-/$#-7% J *-/,%B+31- +$373K"/1- 34"B%/,
3/.3,>.%3, V5-3, " 134%/,C- 1", 34"B%/, J *%#$" %/F+"/$- " 1", $"6%7", /C- JW< :", HD "3/1"
.D#3", -+$#", 7343$"0T%, $"46J4 #%G%#%/$%, " *-7-*"0C- 1", 34"B%/, F+% ,P ,% #%,-7.%4 *-4
G-7H", 1% %,$37-< X4 5#-B#"4", *-4- - 4'(15'61)I .-*Y *-7-*" - $%@$- % ", 34"B%/, -/1% .-*Y
F+%#< 89:; ,%4 G-7H", 1% %,$37- /C- -G%#%*% %,,% $35- 1% 4"/35+7"0C- 63134%/,3-/"7< Z /%?
*%,,D#3- +,"# $#+F+%, 5"#" ,34+7"# %,$% *-/$#-7% ,% .-*Y /C- 5+1%# 1%5%/1%# 1% G-7H", 1% %,$37-<
!"#"# 789 :1 ;* <&=12
X,$% $#+F+%I 5#-5-,$- 5-# [".31 O3%B%7 %4 ,%+ 73.#- \N#3"/1- O3$%, S##",,"1-#%,] *-/,3,$% 1"
+$373K"0C- 1% +4" 34"B%4 1% +4 53@%7 V^@^W 1% *-# $#"/,5"#%/$% -+ 3B+"7 A *-# 1% G+/1- 1"
5DB3/"< S 34"B%4 #%,+7$"/$% J 3/.3,>.%7 % 5-1% ,%# +,"1" /+4" 5DB3/" 89:; 5"#" \%45+##"#]
$%@$-,I *-7+/", % 73/H", 1% $"6%7",I 34"B%/,I %$*<
^^_
Parte 4 - Recursos a·ançados
A imagem pode ser esticada usando os atributos lLIGl1 L \ID1l ou usar margens,
atra·és dos atributos lSPACL e VSPACL. Por exemplo:

<IMG SRC="pixel.gif" HEIGHT=11> ou
<IMG SRC="pixel.gif" VSPACE=5> Espaço vertical de 11 pixels
<IMG SRC="pixel.gif" WIDTH=11> ou
<IMG SRC="pixel.gif" HSPACE=5> Espaço horizontal de 11 pixels
A imagem alinha-se geralmente com a base do texto ou da outra imagem que esta ao seu
lado. Isto pode ser alterado atra·és dos atributos ALIGN. L possí·el deíinir larguras mínimas
precisas para tabelas criando uma linha ·1R· que contenha blocos ·1D· contendo, cada
um, uma única imagem de 1 pixel de altura,largura pelo ·alor desejado de largura,altura.
!"#!# %&'()* +, -./01& 2(3 *&4,5&6
1abelas sem bordas dentro de tabelas sem bordas podem ser usadas para realizar o layout de
texto e imagens em uma pagina l1ML. Com essa técnica pode-se construir um espelho de
diagramaçao soíisticado e organizar texto e imagens de íorma criati·a, íugindo do estilo tradi-
cional das paginas l1ML.
De·e-se desligar as bordas da tabela e íazer o cellspacing e cellpadding iguais a ze-
ro. Use uma largura absoluta para a tabela e para as células para se ter maior controle. le·endo
necessidade de espaço em branco, pode-se usar tanto cellspacing como cellpadding.

!"#7# 83&/,16 9,2(9*&+&6
Para colar imagens horizontalmente ou ·erticalmente a melhor opçao, quando nao se
tem íolhas de estilo, é usar tabelas. O controle é maior entre plataíormas. A íragmentaçao e
colagem` das imagens é uma técnica que ·isa diminuir o tempo de transíerência das imagens,
se apro·eitando do cache do browser, que nao carrega imagens repetidas. A imagem é partida
em pedaços de íorma que as partes que mudam sejam imagens diíerentes das partes que se
mantém atra·és das paginas.
116
!"#$% ' ( )%*+#,-, "."/0"1-,
2/$%, 1% 13.313# +4" 34"5%4 6%7", *87+7", 1% +4" $"9%7": %7" 6#%*3," ,%# #%*-#$"1"; <,$-
6-1% ,%# =%3$- 4"/+"74%/$% %4 +4 6#-5#"4" *-4- - 21-9% !>-$-?>-6 -+ 1% =-#4" "+$-@
4A$3*" /- B"*#-4%13" C3#%D-#E,: 6-# %F%467-;
2- "*#%,*%/$"# ", 34"5%/, 1%/$#- 1", *87+7",: %7", ,% "*-4-1"#G- % -*+6"#G- - %,6"0-
H+% =-# /%*%,,A#3-; ?% =-# 6#%*3,- *-7-*"# 1+", 34"5%/, ,-@
9#% -+$#" -+ 34"5%/, "- 7"1- 1% +4" 34"5%4 1%.%@,% +,"#
-, "$#39+$-, IJK?!2L % )JM?!2L 6"#" #%"##+4"# "
$"9%7" % 6%#43$3# H+% ", 6%0", ,% %/*"3F%4; L- =3/"7: 1%.%@,%
1%,735"# - %,6"0- %/$#% *87+7",: ", 4"#5%/, % ", 9-#1", 6"#"
H+% " 34"5%4 .-7$% " ,%# +4" ,N;

O 6#%*3,- $%# - *+31"1- 1% /G- 1%3F"# %,6"0-, /%4
H+%9#", 1% 73/>" 1%/$#- 1- 97-*- PQRS ;;; PTQRS H+%
*-/$84 " 34"5%4 ; ?% 3,$- -*-##%# 6-1%4 "*-/$%*%# ,3$+"@
0U%, *-4- " 6A53/" "- 7"1-: -/1% " 34"5%4 /G- ,% #%*-4@
6U% $-$"74%/$%;


VVW
Parte 4 - Recursos a·ançados
!!" $%&'()

!!"*" +,-%./012.
lrames ,quadros, sao painéis que di·idem a area de ·isualizaçao do browser em subjanelas,
cada uma capaz de exibir uma pagina diíerente. Para mostrar duas paginas ao mesmo tempo
dentro de uma janela do browser é preciso ter pelo menos três arqui·os. Dois sao os arqui·os
l1ML das paginas que serao exibidas. O outro é uma pagina l1ML que contém apenas as
instruçoes para que o browser saiba se di·idir em subjanelas.
Logo, para di·idir uma janela em írames, é preciso criar essa pagina l1ML que especiíi-
ca as dimensoes relati·as ou absolutas das subjanelas em relaçao a janela que ira conter a pagi-
na. Uma pagina de írames nao é um /.30'(,-. l1ML, pois nao contém iníormaçao. 1odo do-
cumento l1ML, como sabemos, de·e ter a íorma:
<html>
<head> ... </head>
<body> ... </body>
</html>
O bloco <body> contém a iníormaçao da pagina. O bloco <head>, contém meta-
iníormaçao, ou seja, iníormaçao sobre a pagina. Paginas que deíinem a estrutura de subjanelas
,paginas de írames, têm uma estrutura diíerente:
<html>
<head> ... </head>
<frameset atributos> ... </frameset>
</html>
e nao podem conter blocos <body>
1
.

1
Até podem conter blocos <BODY>, mas isto ou os transíorma em paginas de iníormaçao, ou nao causa eíeito
algum. Um bloco <BODY> antes do <FRAMESET> íaz com que o browser ignore o <FRAMESET>. Um bloco <BODY>
após o <FRAMESET> sera ignorado por browsers que suportam írames, mas sera lido por browsers antigos que nao
os suportam.
118
Parte 4 - Recursos a·ançados
!!"!" $%&'(&(') *+%,-)
O bloco <frameset> deíine a di·isao da janela em .,/0)% ,usando o atributo rows, ou -12
.(/)% ,usando o atributo cols, ou simultaneamente em linhas e colunas ,usando ambos os atri-
butos,. Os atributos especiíicam a largura ou altura de cada írame usan-
do ·alores absoultos, em pixels, ou relati·os, em percentagens da largura
ou altura da janela principal. Por exemplo, um <FRAMESET> com a íorma
mostrada íigura ao lado é deíinido pelo código
<FRAMESET COLS="25%,25%,50%"> ... </FRAMESET>
que di·ide a janela principal em três colunas, tendo as duas primeiras ' da largura total, e a
última, metade da largura total. De íorma semelhante pode-se di·idir a janela em linhas. Neste
outro exemplo ,íigura ao lado,:
<FRAMESET ROWS="100,200,*,100"> ... </FRAMESET>
a janela íoi di·idida em quatro linhas, tendo a primeira e quarta 100 pixels
cada de altura, a segunda 200 pixels e a terceira, o espaço restante. Combi-
nando os dois argumentos obtém-se uma janela com 12 subjanelas.
Um bloco <FRAMESET>...</FRAMESET> só pode conter dois tipos de elementos:
descritores <FRAME>, que deíinem a pagina l1ML que ocupara uma janela. A pa-
gina l1ML podera ser uma pagina de iníormaçao comum ou outra pagina de íra-
mes que di·idira a subjanela no·amente em linhas e,ou colunas.
sub-blocos <FRAMESET> ... </FRAMESET> que di·idirao outra ·ez a subjanela
,em linhas e,ou colunas, e poderao conter descritores <FRAME> e no·os sub-
blocos <FRAMESET>.
O número de sub-blocos para cada <FRAMESET> dependera do número de linhas ,ou co-
lunas, deíinidas. Para di·idir uma janela em linhas e colunas de íorma irregular ,com células
que atra·essam mais de uma linha ou
coluna,, pode-se proceder de duas íor-
mas:
usar um 3/,-1 <FRAMESET>,
contendo elementos <FRAME>
que reíerem-se a paginas de
írames ,paginas que também
deíinem um <FRAMESET>,, ou
usar ·arios <FRAMESET> em
cascata na mesma pagina.
Usaremos as duas íormas para
montar a janela ao lado. Na primeira
119
!"#$% ' ( )%*+#,-, "."/0"1-,
.%#,2-3 +$4546"#%7-, !"#$ "#8+4.-, 1% 9#"7%,: frset1.html 14.414#; " <"/%5" =#4/*4="5 %7 1+",
*-5+/",3 % frset2.html 14.414#; " ,%>+/1" *-5+/" %7 1+", 54/?",@ A" ,%>+/1" .%#,2-3 =#%*4,"B
#%7-, 1% "=%/", %& "#8+4.- 1% 9#"7%, Cfrset.htmlD@ E, 1+", .%#,F%, +$4546"#2- $#G, "#8+4.-,
1% 4/9-#7"02-: um.html3 dois.html % tres.html@ H4,+"57%/$%3 - #%,+5$"1- 94/"5 I - 7%,7-3
7", ", 1+", 9-#7", =-1%7 ,%# 7"/4=+5"1", 1% 9-#7" 149%#%/$%@
A" =#47%4#" .%#,2- $%7-, !"#$ "#8+4.-,@ J, $#%*?-, %7 /%>#4$- 4/14*"7 ", 54>"0F%, %/$#%
%5%,@ J =#47%4#- I frset1.html3 8+% #%9%#%/*4" +7" =;>4/" 1% 4/9-#7"02-:
<html>
<head> ... </head>
<frameset cols="50%,50%">
<frame name="janela1" src="um.html">
<frame name="janela2" src="frset2.html">
</frameset>
</html>
% *?"7" frset2.html3 *-7 7"4, 1+", =;>4/", 1% 4/9-#7"02-3 54,$"1- "K"4L-:
<html>
<head> ... </head>
<frameset rows="35%,65%">
<frame name="janela2_1" src="dois.html">
<frame name="janela2_2" src="tres.html">
</frameset>
</html>
E 94>+#" "K"4L- 7-,$#" " -#>"/46"02- 1", =;>4/", 1% 4/9-#7"02- % 1", =;>4/", 1% 9#"7%,
/" <"/%5" 1- K#-M,%#@
!"#$%& ()*
+,-./0"-$,
ich aus et in unnus buus
zich aus char wultt dus
par stak can litte sim
ich aus et in unnus buus
zich aus char wultt dus
par stak can litte sim
ich aus et in unnus buus
zich aus char wultt dus
par stak can litte sim
ich aus et in unnus buus
zich aus char wultt dus
par stak can litte sim
a
!"#$%& ()*
+,-./0"-$,
ich aus et in unnus buus
zich aus char wultt dus
par stak can litte sim
ich aus et in unnus buus
c
páginas de
informação
página de
informação
página de
frames
página de
frames !"#$%& ()*
+,-./0"-$,
ich aus et in unnus buus
zich aus char wultt dus
b
Janela do browser
janeIa 1
(janeIa 0)
janeIa 2
janeIa 2-1
janeIa 2-2
um.htmI
frset1.htmI
frset2.htmI
dois.htmI
tres.htmI
NOP
Parte 4 - Recursos a·ançados
Obser·e que ha !"#$ &'()*$ de paginas. No ní·el mais alto esta a pagina frset1.html, que
ocupa toda a janela do browser. No segundo ní·el estao os arqui·os um.html e frset2.html.
L no terceiro ní·el, encontramos os arqui·os dois.html e tres.html, que estao dentro de
frset2.html.
Na segunda ·ersao, temos apenas +, arqui·o de írames contendo reíerências para os
três arqui·os de iníormaçao. Lm negrito esta mostrado o segundo -".,)$)! ,obser·e que ele
substitui o elemento <FRAME> que chama·a frset2.html no último exemplo.,
<html>
<head> ... </head>
<frameset cols="50%,50%">
<frame name="janela1" src="um.html">
<frameset rows="35%,65%">
<frame name="janela2_1" src="dois.html">
<frame name="janela2_2" src="tres.html">
</frameset>
</frameset>
</html>
Lsta segunda ·ersao possui apenas dois ní·eis. No primeiro, a pagina de írames fr-
set.html, no segundo, as paginas de iníormaçao. A aparência íinal é a mesma, nas duas ·er-
soes, mas na primeira ·ersao ha uma janela a mais ,janela2, que pode ser manipulada ·ia
Ja·aScript ou l1ML.
//010 23&!"34) 53$ .4(3$ 53$ ('&6+43$
O comportamento usual dos browsers é o de abrir uma no·a pagina sempre dentro da
janela atual. L possí·el alterar esse comportamento atra·és do atributo 1ARGL1 em ·ínculos
de hipertexto ·A lRLl· e elementos ·BASL·.
Se a janela2 íor utilizada como al·o de um link l1ML:
<a href="pagina.html" TARGET="janela2"> link </A>
os írames janela2_1 e janela2_2, que estao em um ní·el abaixo de janela2 deixarao de
existir e pagina.html ocupara toda a segunda coluna da janela do browser. Isto nao podera
ser íeito na segunda ·ersao, pois ela só possui dois ní·eis.
Se o link estiver dentro da pagina dois.html ou tres.html, a sintaxe abaixo, usando
o nome especial _parent causara um resultado equi·alente:
<a href="pagina.html" TARGET="_parent"> link </A>


121
Parte 4 - Recursos a·ançados
!"# %&'()*+,)-
!"#.# /*-0123 *-41-,-3
Para íazer com que uma imagem sir·a como origem de um ·ínculo de hipertexto basta
coloca-la dentro de um bloco <A HREF>. Mas se o que se deseja é que partes diíerentes da
imagem apontem para lugares diíerentes, é preciso usar imagens mapeadas ou )*-01*-43. Ima-
gens mapeadas sao muito usadas em barras de na·egaçao, mapas, diagramas, etc. Sempre que
íor necessario selecionar uma area irregular de uma imagem e íazer com que ela esteja relacio-
nada a um destino ,pagina, ancora local, etc., pode-se usa-la.
la basicamente dois tipos de imagens mapeadas: as que íuncionam no ser·idor ,no seu
pro·edor, e as que íuncionam do lado do cliente ,no seu computador,. O primeiro tipo neces-
sita de um programa CGI e um arqui·o especial que contém as coordenadas das areas ati·as
armazenados no ser·idor. L uma soluçao obsoleta e mais complicada. O segundo realiza tudo
sem acessar a rede e portanto é mais rapido e mais eíiciente. 1odos os browsers mais recentes
,desde as ·ersoes 2.0, suportam imagens mapeadas do lado do cliente.
Para criar uma imagem mapeada é necessario ter uma imagem e calcular as coordenadas
de suas areas ati·as`. A maior parte dos editores l1ML possuem íerramentas para gerar co-
ordenadas, mas se a sua nao ti·er, ·ocê pode sempre obter íerramentas gratuitas na rede como
o %-45,)( 4-6- 7)2,893 ,http:,,www.boutell.com,mapedit,, ou o %-4%-:16 4-6- %-;
,http:,,www.kickinit.com,mapmaker,,.
Imagens mapeadas sao imagens comuns. A diíerença é que têm um atributo adicional in-
íormando o nome do bloco que deíine o mapa que sera utilizado. O atributo é !"#$%&:
<BODY>
<IMG SRC="banner.gif" USEMAP="#isoptera" ALT="Menu de Opções">
</BODY>
O atributo !"#$%& acima possui um ·alor '()*+,-./ que corresponde ao nome de um
mapeamento. Incluímos uma estrutura de mapeamento na pagina atra·és do bloco 0$%&1.
1odo o bloco <MAP> é gerado pelo programa que calcula as coordenadas. Para a imagem abai-
xo ,banner.gif, o mapa, sem as coordenadas, é o seguinte:
122
Parte 4 - Recursos a·ançados
<MAP NAME="isoptera">
<AREA SHAPE="rect" COORDS="..." HREF="core.html" target=_top>
<AREA SHAPE="rect" COORDS="..." HREF="livraria.html">
<AREA SHAPE="rect" COORDS="..." HREF="cdshop.html">
<AREA SHAPE="rect" COORDS="..." HREF="eventos.html">
<AREA SHAPE="rect" COORDS="..." HREF="pulgas.html">
<AREA SHAPE="rect" COORDS="..." HREF="sair.html" target=_top>
</MAP>


Para selecionar as areas ati·as da íigura, ·ocê precisara descre·ê-las, iníormando a forva
,!"#$, %&'()*+#& ou ',%'#&, e suas coordenadas ,lista de números separados por ·írgulas,
além da URL que de·em seguir ,atributo HREF,. Lsses atributos do descritor -)%&). deíinem
a area utilizada.
Os polígonos ,SHAPE="poly", sao deíinidos em termos das coordenadas de seus ·érti-
ces. Cada coordenada ,par de dois números, corresponde a um ·értice ,x, y, do mesmo. A
origem ,0,0, corresponde ao canto superior esquerdo da imagem /011234567. Círculos
,SHAPE="circle", de·em incluir três números separados por ·írgulas como coordenadas. Os
dois primeiros sao a coordenada do centro do círculo e o último seu raio. Retangulos
,SHAPE="rectangle", sao deíinidos em termos de quatro números: as coordenadas no canto
superior esquerdo e do canto iníerior direito.
O bloco <MAP> pode estar em qualquer lugar da pagina pois é identiíicado pelo nome e
só se torna ati·o depois que a pagina inteira íor carregada.
2².2. .vaio, ríaeo e ¡tvg·iv.
Componentes llash e Shockwa·e, imagens e ·ídeos podem ser incluídos em uma pagina
usando o elemento ·LMBLD· ou o elemento ·OBJLC1·. Lmbora o último seja recomen-
dado pela especiíicaçao do l1ML 4.0, o suporte a ·LMBLD· é mais antigo e íunciona tanto
nos browsers Internet Lxplorer como Netscape.
123
Parte 4 - Recursos a·ançados
Os atributos de ·LMBLD· ·ariam coníorme o componente instalado. Na maior parte
dos casos, o componente ocupa uma parte da pagina como uma imagem, e pode ser alinhado e
redimensionado usando os mesmos atributos disponí·eis em ·IMG·. A sintaxe mínima de
·LMBLD· é:
<EMBED SRC="URL do componente" HEIGHT=100 WIDTH=150>
</EMBED>
!"#$%
la ·arios íormatos de audio suportados na \eb. Os que possuem maior suporte sao os
íormatos .au e .mid suportados pelo componente '$()!"#$% disponí·el no browser Netscape
ou Internet Lxplorer. Mais recentemente tem crescido o suporte ao íormato .mp3. O '$()!"*
#$% exibe ,opcionalmente, um controle de tela que permite ao usuario manipular o som.
O elemento <EMBED> usado para incluir audio possui ·arios atributos adicionais. A sin-
taxe típica é:
<EMBED SRC="musica.mid" CONTROLS=console HEIGHT=60
WIDTH=150 AUTOSTART=false></EMBED>
O atributo CONTROLS pode receber os ·alores console, smallconsole, playbutton,
pausebutton, stopbutton ou volumelever e alterar a aparência do #$+,-./. O atributo LOOP
pode ter os ·alores true, false ou um número indicando o número de ·ezes que o som de·e
tocar. AUTOSTART pode ser true ou false indicando se o som de·e começar imediatamente
ou esperar pela decisao do usuario. VOLUME ·aria de 0 a 100 e estabelece o ·olume do som.
No Internet Lxplorer ,e apenas no Internet Lxplorer, som de íundo pode ser incluído
usando o elemento ·BGSOUND·:
<BGSOUND SRC="musica.mid" LOOP=3>
01#)%
Assim como os recursos de audio, ·arios íormatos de ·ídeo como .mpg, .mov, .avi, .rm, etc.
podem ser incluídos em paginas l1ML usando o elemento <EMBED>. A sintaxe típica é:
<EMBED SRC="filme.mov" CONTROLS=console HEIGHT=260
WIDTH=450 AUTOPLAY=false></EMBED>
Cada ,-"2*$3 tem seus próprios atributos que podem ser acrescentados ao descritor
<EMBED>. O íormato .mov ,4"$567$8), suporta ·arios outros atributos, entre eles
CONTROLLER=true ou false, para ligar ou desligar o controle do ·ídeo, LOOP = true, false
ou palindrome para íazer o ·ídeo executar continuamente e de tras para írente.
No 93:);3): <=,-%;); ,e somente no 93:);3): <=,-%;);, é possí·el incluir ·ídeos usando o a-
tributo DYNSRC de <IMG>:
<IMG DYNSRC="filme.mov">
124
Parte 4 - Recursos a·ançados
!"#"# %&'()
llash é um íormato de multimídia desen·ol·ido pela Macromedia que oíerece a possibi-
lidade de criar animaçoes, interati·idade e integraçao com audio e ·ídeo. Os arqui·os sao mui-
to menores que os utilizados nas tecnologias padrao da \eb pois o íormato das imagens e
animaçoes do llash se baseia em ·etores ,·ector, e nao em bitmaps. Imagens ·etoriais descre-
·em os desenhos, íontes e comportamentos em termos de equaçoes, que ocupam bem menos
espaço de armazenamento que as animaçoes baseadas em bitmaps, que consistem da repetiçao
de arqui·os que contém o mapa completo de cores e pixels de cada tela.
la di·ersas ·antagens no íormato oíerecido pela tecnologia llash. Os arqui·os sao me-
nores, sao escala·eis sem perda de qualidade, suportam som integrado, podem ser desen·ol·i-
dos sem a utilizaçao de programaçao, contam com amplo suporte e ainda podem ser controla-
dos atra·és de parametros passados em l1ML ou Ja·aScript.
As des·antagens se baseiam principalmente em se tratar de um íormato proprietario. L
preciso adquirir um soítware para produzir arqui·os llash. Para exibi-lo, é preciso íazer o
download de um plug-in. Nao ha suporte em Linux ou Unix e nem para browsers nao-
graíicos, que perdem totalmente o conteúdo da pagina.
Para criar componentes llash é preciso ter o pacote Macromedia llash 4. la uma ·ersao
de demonstraçao que ·ale por 30 dias no site http:,,www.ílash.com,. O objeti·o desta seçao
é apenas mostrar como se pode usar um componente llash genérico que ja íoi criado pre·ia-
mente.
*+,-./01'23+ 4+ (516.4+1
Pode ser necessario coníigurar o ser·idor \eb para que ele saiba ser·ir arqui·os llash.
Iníorme-se no seu pro·edor sobre a coníiguraçao. Se ·ocê íor o webmaster responsa·el por
um ser·idor, ·ocê de·era acrescentar a seguinte relaçao tipo MIML,extensao de arqui·o para
que o ser·idor reconheça o íormato:
7.8+9(0:;.8+< application,x-shockwa·e-ílash
=>;5,(3+: .swí
Para acrescentar llash em uma pagina l1ML, use o elemento <EMBED>. A sintaxe mí-
nima é:
<EMBED SRC="filme.swf" HEIGHT=260 WIDTH=450>
</EMBED>
125
!"#$% ' ( )%*+#,-, "."/0"1-,
!"# %&&'()* +,-,
!"#.# / 01( *23 ,&&'()* +,-,4
2 3%4 5 6-6+7"# 6-#8+% ,+", 9/:-#;"0<%,= /" :-#;" 1% $%>$- % 9;"?%/,= ,@- .9,A.%9, 9/1%6%/B
1%/$% 1" 67"$":-#;" C$96- 1% ;D8+9/" % ,9,$%;" -6%#"*9-/"7E 1- +,+D#9-F G%; ,%;6#% 5 6-,,AB
.%7 .%# 1%$%#;9/"1- .A1%- 1%6%/1%/$% 1% 67+?B9/= -+ +; *%#$- ,9$% 9/$%#"$9.- 1%6%/1%/$% 1%
H7",I= 6-9, J, .%K%, - 6#-?#";" /%*%,,D#9- J %>%*+0@- 1" "679*"0@- 1%6%/1% 1% 67"$":-#;" %
6-1% ,%# "$5 8+% /@- %>9,$" 6"#" " 67"$":-#;" -/1% #-1" ,%+ 4#-L,%#F
2667%$, ,@- 6%8+%/", "679*"0<%, 567(&(67(6)(* 7( &',),839:, C6-# 9,,- 6-6+7"#%, /" 3%4E=
?%#"7;%/$% %,*#9$", %; +;" 79/?+"?%; 1% 6#-?#";"0@- *I";"1" M"."= 8+% $N; ,+" %>%*+0@-
9/9*9"1" 6%7- 4#-L,%#F O9:%#%/$%;%/$% 1- 8+% -*-##% *-; ", 79/?+"?%/, %;4+$91", %; 47-*-,
!"#$%&'( CM"."P*#96$E= - ;<75=3 M"." %,*#9$- 6%7- 6#-?#";"1-# 1" "679*"0@- /@- 5 56)(9&9(),73
/%; .9,+"79K"1- 6%7- 4#-L,%#= QD 8+% :-9 "/$%, ;3:&5',73 6"#" +;" 79/?+"?%; 1% ;D8+9/"F
R#-L,%#, 8+% ,+6-#$"; M"." 6-,,+%; +;" &',),839:, -59)1,'= " SM"." T9#$+"7 U"*I9/%V= 8+%
,9;+7" +;" ;D8+9/" M"." %; ,9,$%;", -6%#"*9-/"9, 19:%#%/$%, *-;- 39/1-L,= U"*9/$-,I=
W/9>= %$*F PX " ;D8+9/" .9#$+"7 M"." 5 *"6"K 1% 9/$%#6#%$"# " 79/?+"?%; 1% ;D8+9/" M"."F 2$#"B
.5, 1%7"= 4#-L,%#, ,@- *"6"K%, 1% #-1"# 6#-?#";", ,-:9,$9*"1-, 8+% 6-1%; 1%,1% -:%#%*%# +;"
9/$%#:"*% 1% :-#;+7D#9-, ;"9, ,%?+#" 9/$%#"$9."= "$5 ;-,$#"# D+19-= .A1%-= YO % ,9,$%;", 1% *-B
;+/9*"0@- .9,+"7 9/$%#"$9." %; 8+"78+%# 67"$":-#;"F
!"#!# >1,673 1*,9 ,&&'()*
2667%$, 6-1%; ,%# +,"1-, 6"#" 1%,%/.-7.%# "679*"0<%, 8+% ,%#9"; 9;6-,,A.%9, %;
Z[U\ *-; -+ ,%; 79/?+"?%/, %;4+$91", C*-;- M"."P*#96$E % :+?9# 1", 79;9$"0<%, 1- Z[U\=
1- 6#-$-*-7- Z[[! % 1- 6#X6#9- 4#-L,%#F ]-; +; "667%$= 5 6-,,A.%7 (*)(67(9 +; 4#-L,%#
:"K%/1-B- ,+6-#$"#= 6-# %>%;67-= /-.-, 6#-$-*-7-, 1% *-;+/9*"0@- % ,%?+#"/0"= /-.-, :-#B
;"$-, 1% ;A19"= %$*F ^ 6#%0- 1%,," 794%#1"1% 5 ,+" :#"*" 9/$%?#"0@- *-; - Z[U\ 1" 6D?9/"F
2679*"0<%, 3%4 4",%"1", %; M"." 6-+*- -+ /"1" "6#-.%9$"; 1- Z[U\ 1" 6D?9/" " /@- ,%#
+; %,6"0- ?#D:9*- 6"#" ,+" %>9490@-F ^ 4#-L,%# ,9;67%,;%/$% #%,%#." +; %,6"0- 6"#" #-1"# -
6#-?#";"= % - 6#-?#";" ",,+;% "8+%7% %,6"0- % :"K - 8+% 4%; 8+9,%# C79;9$"1- "6%/", 6-#
_`a
Parte 4 - Recursos a·ançados
restriçoes de segurança,. L possí·el aumentar essa integraçao com linguagens embutidas no
l1ML como Ja·aScript.
Applets sao aplicaçoes graíicas e precisam de uma pagina l1ML para poderem executar.
Sao exibidos na pagina de íorma semelhante a imagens: carregam um arqui·o externo, ocupam
um espaço com determinada altura e largura, e podem ter seu alinhamento em relaçao ao texto
deíinido pelos mesmos atributos presentes em <IMG>. A sintaxe do elemento l1ML
<APPLET> esta mostrada abaixo. 1udo o que nao esti·er em negrito é opcional:
<APPLET
CODE="nome_do_programa.class"
HEIGHT="altura em pixels"
WIDTH="largura em pixels"
NAME="nome_do_objeto"
CODEBASE="diretório base do arquivo de classe Java"
ARCHIVE="arquivo .jar contendo o programa"
ALT="texto descritivo"
HSPACE="margens externas laterais em pixels"
VSPACE="margens externas verticais em pixels"
ALIGN="left" ou "right" ou "top" ou "middle" ou "bottom" ou
"texttop" ou "absmiddle" ou "absbottom" ou "baseline"
MAYSCRIPT>
<PARAM NAME="nome" VALUE="valor">
<PARAM NAME="nome" VALUE="valor">
...
<PARAM NAME="nome" VALUE="valor">
</APPLET>
Diíerentemente de <IMG>, o elemento <APPLET> é um bloco e possui um descritor de
íechamento </APPLET>. Lntre <APPLET> e </APPLET> pode ha·er nenhum ou ·arios
elementos <PARAM>, que contém parametros necessarios ou nao ,depende do applet, para o
íuncionamento da aplicaçao. Cada elemento <PARAM> contém um par de atributos
obrigatórios. O ·alor do atributo NAME é deíinido pelo programador do applet. Atra·és dele, o
programa pode recuperar um ·alor que o autor da pagina ,que nao precisa saber Ja·a, deíiniu
no atributo VALUE.
Os atributos CODEBASE e ARCHIVE sao usados opcionalmente para localizar applets em
outros ser·idores e importar outros módulos do programa, respecti·amente. O atributo
MAYSCRIPT é necessario se o applet pretende ter acesso ao código Ja·aScript da pagina. Sem
este atributo, qualquer tentati·a do applet de acessar ·aria·eis ou executar íunçoes ou métodos
Ja·aScript causara em uma exceçao de segurança no applet.
No l1ML 4.0, applets também podem ser incluídos em uma pagina usando o bloco ge-
nérico <OBJECT>, que também ser·e para importar imagens, !"#$%&'( e construir )*+,-( internos.
Lxistem muitos applets úteis disponí·eis gratuitamente na \eb que podem ser usados
por autores de paginas \eb e programadores Ja·aScript sem que precisem saber Ja·a. Os mais
populares implementam .+''-*( para rolagem de texto, ícones inteligentes, graíicos, planilhas
12¯
Parte 4 - Recursos a·ançados
de dados e interíaces para bancos de dados. A maioria sao coníigura·eis atra·és de parametros
que o autor da pagina deíine em elementos <PARAM>. No apêndice A ha uma lista de sites onde
se pode encontrar tais applets. Lxemplos sao o !"#$%"& ,http://www.gamelan.com, e o site
da Sun sobre Ja·a ,http://java.sun.com,. A seçao a seguir mostrara como incluir um ap-
plet obtido em um desses sites.
'()*) ,-#- .&/%0.1 0# "22%$3 $# 0#" 245.&"
O exemplo a seguir mostra como incluir o applet
Clock2 em uma pagina \eb. Lste applet é distribuído
pela 60& gratuitamente em http://java.sun.com e
juntamente com o ambiente de desen·ol·imento Ja·a.
O applet pode ser incluído na pagina da íorma 7$8"0%3,
sem especiíicar parametros, ou de íorma personalizada,
deíinindo parametros que alteram a cor de íundo, dos
ponteiros e do mostrador.
Como é que o autor de uma pagina l1ML sabe-
ra quais parametros usar e coníigurar· Vendo-o íun-
cionar! O applet é distribuído com uma pagina l1ML
que mostra como usa-lo. Lle de·e ser incluído na pagi-
na l1ML usando o nome do arqui·o executa·el ja·a, que neste caso é Clock2.class e de·e
ocupar uma area de no mínimo 1¯0x150 pixels ,tudo isto esta na pagina,:
<applet code="Clock2.class" height=150 width=170></applet>
Com o código acima, o relógio aparece na pagina como mostrado na íigura, com pontei-
ros azuis, ·isor com letras pretas e íundo branco. O autor do applet permite, porém, que o
autor da pagina altere esses parametros atra·és de descritores <PARAM>. Os três parametros
modiíica·eis sao:
bgcolor - cor de íundo ,branco é 7$8"0%3,
fgcolor1 - cor dos ponteiros e dial ,azul é 7$8"0%3,
fgcolor2 - cor dos números e ponteiro de seguntos ,preto é 7$8"0%3,
1odos os parametros de·em receber como ·alor um número hexadecimal representando
uma cor no íormato RGB ,mesmo íormato usado em l1ML,: ff0000 - ·ermelho, ffffff -
branco, 0000ff - azul, etc.
Portanto, para incluir o relógio acima em uma pagina com um íundo cinza claro, pontei-
ros marrons e letras douradas, o código seria:
<applet code="Clock2.class" width=170 height=150>
<param name=bgcolor value="dddddd">
<param name=fgcolor1 value="800000">
128
Parte 4 - Recursos a·ançados
<param name=fgcolor2 value="808000">
</applet>
!""#$%& ($)*%*&
Caso o applet esteja em um diretório diíerente daquele onde esta a pagina, sera necessa-
rio usar o atributo CODEBASE, para iníormar a URL base. Por exemplo, se o arqui·o .class
que usamos acima esti·er em http://www.abc.com/clocks/, precisamos usar:
<applet codebase="http://www.abc.com/clocks/" code="Clock2.class" ... >
...
</applet>
+,-,- .*/0#1&2*
Applets oíerecem um meio para escapar das limitaçoes do browser e do l1ML sem li-
mitar o público-al·o da pagina de acordo com a plataíorma de computaçao que possuem. L
preciso, porém, lembrar que podem ocorrer problemas. Como applets sao programas, podem
conter ou pro·ocar erros. Geralmente esses erros nao sao gra·es a ponto de comprometer a
segurança do usuario, pois os browsers que suportam applets possuem um rigoroso mecanis-
mo que restringe o que applets podem íazer. Lles nao podem, por exemplo, escre·er no seu
disco ou imprimir. Mas os erros podem le·ar o applet a nao íuncionar, ou pior, a consumir os
recursos de memória do browser e do sistema, íorçando o usuario a abandonar sua execuçao ,e
possi·elmente a do browser,. Applets escritos para as ·ersoes Ja·a 2 podem nao íuncionar até
em browsers recentes, como o Internet Lxplorer 4. Lmbora íuncionem em plataíormas diíe-
rentes, applets podem rodar até 30 ·ezes mais rapido em certas plataíormas. Isto depende da
qualidade da maquina ·irtual suportada pelo browser.
Le·ando em conta todas essas questoes, ·ocê de·e usar applets quando íor necessario
incluir recursos que o browser e o l1ML sozinhos nao seriam capazes de oíerecer. L preciso,
porém, le·ar em conta o risco de inacessibilidade caso o applet nao íuncione por um moti·o
ou outro. Se possí·el, de·e ha·er uma íorma alternati·a de obter a iníormaçao que ele guarda
ou a íuncionalidade que ele implementa. Se o seu público-al·o permitir, ·ocê tal·ez decida que
é melhor usar outra tecnologia mais simples, ·isí·el em menos plataíormas, mas que atenda
seus objeti·os.
129
!"#$% ' ( )%*+#,-, "."/0"1-,
!"# %&'()*)+,-
1. 2-/$% - 3+%4#" *"4%0", "4"56- *-7 ", 57"8%/, im-01.jpg " im-05.jpg 1- kit1 915,:
;-/<.%5, /- ,5$% 1- *+#,-=> ?+/$"7%/$% *-7 ", 57"8%/,> esquerda.jpg> direita.jpg %
baixo.jpg ;"#" -4$%# - 1%,%/@- "4"56- +,"/1- $"4%A", BC2DE

FE G#8"/5H% - $%6$- 91- kit2= 1" I-#7" 7-,$#"1" /", I58+#", "4"56-
JKL
!"#$% ' ( )%*+#,-, "."/0"1-,
232




















!"#$%&


(#)*#&+,"#- . /01/234






5-+678% 9# (#) :+;#& /






!"#$%&
!<6=+678% # 1-%>#;%&
1?)=+@678% 9% &+;#








!"#$%& A BC,+"6 D
Anexos
!" $%&'(&)*+ , -.+/,0+1
!"!" 23,104,1
As questoes tratam de assuntos discutidos em sala de aula e,ou no material didatico dis-
tribuído. Sao 30 questoes distribuídas entre os capítulos da apostila e que poderao ser encon-
tradas no site
http://www.ibpinet.net/helder/wd/cws1/avaliacao/
As instruçoes para en·io das respostas estarao disponí·eis na própria pagina. As resposta de-
·em ser en·iadas até o dia ________.
Assuntos:
\eb e Internet
lundamentos do l1ML
lolhas de estilo
!"5" -.+/,0+ 6738'(9&. :+ 1,3 1(0,;
< +8/,0(%+ do projeto é construir o site de uma re·ista cultural íictícia e publica-lo. Os re-
cursos disponí·eis sao textos e imagens que podem ser obtidas atra·és da Internet em
http:,,www.ibpinet.net,helder,wd,cws1,projeto.zip. Nao é preciso usar todas as imagens.
Analise os textos e imagens disponí·eis, elabore uma estrutura de na·egaçao, decida sobre um
estilo para o site, teste a na·egaçao e depois decida o que usar.
Quando concluir o site ,ou até antes, se desejar,, publique-o em 1,3 1(0, no endereço
http://www.ibpinet.net/wd/!"#$%&'(/projeto1/
Quando ti·er terminado, solicite a a·aliaçao do site atra·és da URL:
http://www.ibpinet.net/helder/wd/cws1/avaliacao/
até o dia _______. O site sera a·aliado segundo os critérios descritos na seçao a seguir. Recur-
sos que ainda nao íoram ·istos como Ja·aScript, rollo·ers, tratamento de imagens, etc. podem
ser usados mas nao contarao pontos ,podem contar pontos negati·os, porém, se prejudicarem
a na·egaçao, identidade, estética ou outro critério a·aliado,.
Anexos - pagina 2
Anexos
!"#"!" %&'()')(* +, &-'.
Você pode decidir por outra estrutura do site, se desejar. As paginas disponí·eis contém
apenas texto em arqui·os l1ML ,com uma ou duas exceçoes,. la também duas íolhas de
estilo disponí·eis que podem ou nao ser·ir para todas as paginas ,·ocê pode altera-las ou criar
uma no·a ou nao usar íolhas de estilo. Os arqui·os disponí·eis sao:
index.html - pagina inicial ,·ocê decide sobre o conteúdo,.
einstein.html, calendario.html, corvo.html, shakespeare.html,
bandeira.html, dante.html, platao.html,vinicius.html - artigos di·er-
sos. Aplique um estilo uniíorme nessas paginas. Use barras de na·egaçao. Decore
com imagens se achar necessario ou adequado.
galeria.html - pagina de uma galeria de imagens. De·e ha·er links para imagens
nesta pagina ou em paginas de alguma maneira ligadas a esta.
ensaios.css, ensaios2.css - íolhas de estilo ,use se achar con·eniente,
menulat_esc.gif, menulat_cla.gif - menu ,barra de na·egaçao, ·ertical nos
estilos claro e escuro ,use um estilo ou outro se desejar apro·eitar essas imagens,. L
preciso implementar imagens mapeadas para usar este menu.
menusup_cla.gif, menusup_esc.gif- menu ,barra de na·egaçao, horizontal
nos estilos claro e escuro ,use um estilo ou outro se desejar apro·eitar essas ima-
gens,. L preciso implementar imagens mapeadas para usar este menu.
m_home.gif, m_educ.gif, m_terr.gif, m_viag.gif, m_gale.gif,
m_duvi.gif, m_cart.gif, m_idei.gif, m_atit.gif, m_dese.gif - barra
de na·egaçao ·ertical em pedaços menores.
aeternus.jpg, aeternus2.jpg - imagem opcional para primeira pagina ,dois es-
tilos, e aeternus_s.gif, aeternus2_s.gif - ·ersoes reduzidas da imagem da
primeira pagina.
corvo.jpg, einstein1.jpg, einstein2.gif, shake1.gif - ilustraçoes de
uso opcional ,·ocê nao precisa usa-las e pode usar outras se desejar,.

No subdiretório imagens ha uma coleçao de imagens e '/)012*-3& ,·ersoes reduzidas, que
podem ser usadas para montar a galeria. Se desejar usar 4(*0.&, sera necessario implementa-los
,criar as paginas necessarias,.
A única coisa que o site de·e preser·ar é a iníormaçao contida nos textos. Você de·e u-
sar estilos e imagens para tornar a na·egaçao mais eíiciente e agrada·el. 1odas as imagens sao
opcionais. Você pode usar outras ou nao usa-las se desejar ,conseguir íazer um bom site sem
imagens também é um desaíio,. Você também nao precisa usar írames, tabelas ou íolhas de
estilo. A decisao de usar ou nao essas tecnologias, de quanto usa-las é sua.
Anexos - pagina 3
Anexos
!"#" %&'()&'*+ ,- ./.0'.12*
O seu site sera a·aliado de acordo com o sucesso das decisoes que ·ocê tomar para tor-
na-lo acessí·el, na·ega·el e esteticamente atraente. Você também de·e cuidar para que ele seja
íacil de manter pois ele sera estendido no módulo seguinte.
O projeto ·ale 10 pontos, dos quais:
5 pontos correspondem a ·iabilizaçao do projeto completo de na·egaçao, ou seja,
de·e ser possí·el acessar o site http:,,www.ibpinet.net,wd,seulogin,projeto1, e a
partir da pagina inicial chegar em todas as paginas secundarias e ·oltar a pagina inici-
al ,na·egabilidade,.
mais 1 ponto se a estrutura das paginas e iníormaçao na íorma de texto, cores e ima-
gens íor preser·ada entre browsers nas ·ersoes 4 em diante do 34(-&4-( 5670*&-& e
8-(+9.7- para :'4,*;+ ,estrutura e compatibilidade,.
mais 1 ponto se ·ocê utilizar recursos de acessibilidade ,·isí·eis no 34(-&4-( 5670*&-&,
como os atributos AL1 de imagens e 1I1LL. De·o ser capaz de na·egar pelo site
caso as imagens nao carreguem ,acessibilidade,.
mais 1 ponto se ·ocê usar recursos modernos de layout de paginas ,íolhas de estilo
e,ou tabelas, para controlar a aparência do site desde que esses recursos nao preju-
diquem os critérios de na·egabilidade, acessibilidade e compatibilidade ,criati·idade e
uso de tecnologia,.
mais 1 ponto se ·ocê oíerecer a opçao de um mecanismo eíiciente de na·egaçao pa-
ra a galeria de íotos ,nao precisa ser necessariamente baseado em írames,. ,técnicas
de na·egaçao,
mais 1 ponto se o seu site esti·er ·isualmente atraente e ti·er um estilo consistente.
1enha cuidado e e·ite abusar de íontes, cores, imagens e recursos especiais ,unidade
e estilo,.

Critérios alcançados parcialmente ,com exceçao do primeiro, receberao 0,5 pontos.
Anexos - pagina 4
Anexos
!" $%&'()*+,- .- /0% /(10
!"2" 345*6(7*+,- .- /0% /(10
A sua conta no pro·edor IBPINL1 é acessí·el de duas íormas: atra·és da emulaçao do
terminal da maquina Unix, usando um programa 1elnet, ou atra·és de um programa l1P, para
transíerência de arqui·os.
Para usar 1elnet é preciso conhecer o sistema Linux, onde a conta reside. Lxistem algu-
mas restriçoes de segurança. Nesta etapa do curso nao sera necessario entrar na sua conta ·ia
1elnet. Atra·és de l1P sera possí·el transíerir arqui·os de e para a sua conta, criar e remo·er
diretórios e alterar as permissoes de leitura, alteraçao e execuçao de seus arqui·os remotos.
A sua conta tem um espaço limitado inicialmente a 2MB. Nela ·ocê podera armazenar as
paginas l1ML, imagens e outros arqui·os necessarios a ·isualizaçao e na·egaçao do seu site.
Você pode utilizar o seu site principal para qualquer íim nao comercial, respeitando as condi-
çoes estabelecidas pelo IBPINL1 para cessao do espaço com as quais ·ocê de·era concordar.
Para o curso, ·ocê de·era utilizar os subdiretórios reser·ados especialmente para este íim onde
serao armazenados os projetos e exercícios propostos durante todo o treinamento.
Na seçao seguinte sera dada uma bre·e descriçao do programa cliente l1P que ·ocê de-
·era usar para poder administrar o seu site, transíerindo arqui·os e alterando suas proprieda-
des.
!"!" 8-9- %/*4 :;$
Para transíerir o seu site montado em disco local para o pro·edor de acesso, é preciso
usar um programa de transíerência de arqui·os baseado no protocolo l1P. la ·arios clientes
l1P de graça e com uso legal limitado a 30 dias na Internet. Qualquer um pode ser usado, até
mesmo o l1P do MS-DOS, orientado a caracter. Veja em http:,,www.ibpinet.net,wd, uma
lista de clientes l1P para \indows, Macintosh e Linux. Siga as instruçoes de instalaçao e utili-
ze a documentaçao de ajuda, se necessario, para opera-lo.
As seçoes abaixo descre·em o procedimento para transíerir arqui·os da sua maquina pa-
ra o ser·idor l1P do IBPINL1 que tornara seus arqui·os ·isí·eis a partir da \eb. O seu dire-
tório casa, no Linux ,sistema operacional usado no pro·edor,, esta mapeado a URL
Anexos - pagina 5
Anexos
,wd,seulogin,, ou seja, tudo o que ·ocê colocar no seu diretório , sera ·isí·el em
www.ibpinet.net,wd,seulogin,.
As etapas abaixo utilizarao o soítware Cutel1P mas ·ocê pode repeti-las com qualquer
outro programa cliente l1P.
!"!"#" %&'&()*&+', , (-. (/)-
Ao abrir o Cutel1P pela primeira ·ez ou clicando no ícone ,Site Manager, ·ocê podera
cadastrar o site do IBPINL1 para íacil conexao íutura.
Na janela de dialogo ha uma lista de pastas a esquerda. Cliqie na última delas ,Personal
l1P Sites,. Aperte o botao Add Site`. De·e aparecer a seguinte janela:
No Site Label` crie o nome atra·és do qual ·ocê deseja identiíicar este site ,IBPINL1,.
Lm lost Address` escre·a o nome ou endereço IP do IBPINL1 ,200.231.191.10,. Lm U-
ser ID` escre·a o seu nome de login no IBPI ,só o nome sem o ¸ibpinet.net,. Lm Pass-
word` escre·a sua senha. Aperte OK.
Para conectar, selecione o site desejado na lista de sites ,IBPINL1, e aperte Connect`.
Durante a tentati·a de conexao, mensagens rolarao na janela superior do Cutel1P e em pouco
tempo seu diretório casa no Linux de·era aparecer na janela a direita. A esquerda esta o siste-
ma de arqui·os do \indows.
!"!"!" 0*&+(1-*/+', &*2./3,(
Lmbora o Cutel1P se assemelhe ao Lxplorer do \indows, seu íuncionamento nao é
idêntico. Uma ·ez conectado, é possí·el transíerir arqui·os de um lado para outro arrastando-
os com o mouse. Só é possí·el arrastar arqui·os e nao diretórios e é preciso estar dentro de um
diretório antes de copiar um arqui·o para ele.
Anexos - pagina 6
Anexos
Anexos - pagina ¯
Antes de en·iar qualquer coisa ·ia l1P, ·eriíique sempre o diretório destino. Se ·ocê
gra·ar por cima de um arqui·o com mesmo nome ·ocê nao conseguira recupera-lo.

Se ·ocê passar muito tempo no Cutel1P sem transíerir arqui·os, tera que conectar ou-
tra ·ez pois o cliente podera se desconectar por !"#$%&!.
Para mudar ,entrar, de diretório basta clicar na pasta correspondente. Para mudar de dri-
·e local é preciso usar o botao direito do mouse dentro da area que lista os arqui·os e selecio-
nar a opçao correspondente. O botao direito também ser·e para criar diretórios no \indows e
no Linux, mo·ê-los e apaga-los.
1odos os arqui·os que ·ocê transíerir para o seu diretório raiz serao ·isí·eis a partir da
URL http:,,www.ibpinet.net,wd,seulogin,. Apro·eite a oportunidade para criar o subdiretó-
rio projeto1, onde ·ocê armazenara o seu projeto e exercícios. 1roque também a pagina in-
dex.html do seu diretório raiz , por outra pagina, dando boas ·indas ao seu site.

You're Reading a Free Preview

Descarregar
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->