\eb design

&
l1ML
aanado


etaer aa Rocba


Re.: \Dl1-03-2000,04 A4 ,ASI1,
Copyright 1998, 1999, 2000 por lelder Lima Santos da Rocha. 1odos os direitos reserados. Os
direitos do autor sobre esta obra estao protegidos pela Lei 9.610,98 ,Lei de Direitos Autorais,.

Nenhuma parte desta publicaao podera ser reproduzida ou utilizada em outros cursos sem a
autorizaao, por escrito, do autor. Alunos, proessores ou uncionarios de instituioes educacionais
ou ilantrpicas podem requerer autorizaao gratuita para a reproduao deste material para uso
prprio, ou para uso em treinamentos sem ins lucratios. O autor pode ser contatado atras dos
endereos eletronicos hlsruol.com.br ou helderibpinet.net.

Lsta ediao destina-se exclusiamente ao uso como material didatico do curso ASI1 - \eb Design
e l1ML Aanado`, da IBPI Sotware e Serios Ltda. e nao pode ser endida separadamente.

Lmbora todos os cuidados tenham sido tomados na preparaao deste liro, o autor nao assume
responsabilidade por erros e omissoes, ou por quaisquer danos resultantes do uso das inormaoes
nele contidas.

Caa, eaitoraao etetrvica e reri.ao: o autor.

Caigo ae.ta eaiao: !"#$%&'%(&&&)&* ,4a. ediao,
orvato: A4 - apostila ,numeraao de paginas por captulo,.
Re.ov.aret or e.ta tiragev: IBPINL1 Sao Paulo
1iragev vaiva ae.ta eaiao: 80 cpias ,turmas ASI1 iniciadas at 0,2000,.

R62s Rocha, lelder Lima Santos da, 1968-

\eb design e l1ML aanado`. 4a. ediao. Coleao de textos independentes sobre \eb
design e l1ML.
___ p. A4. Acompanha disquete ou CD de 3 '` ou !eb .ite com cdigo e exemplos.
Reroavao: IBPINL1 - Sao Paulo, SP, Maro de 2000.

1. \eb design - criaao e apresentaao de contedo interatio 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 ,serio
de recuperaao de inormaoes da Internet, - Programaao. 5. Internet ,rede de
computadores, meio de comunicaao, - Programaao. I. 1tulo: \eb design e l1ML
aanado - \eb design - l1ML - Alm do l1ML - lolhas de Lstilo.
CDD 005.133

Quaisquer marcas registradas citadas nesta obra pertencem aos seus respectios proprietarios.


ii
Covtevao
Prefacio riii
1. !eb ae.igv
1.1. O qve e !eb ae.igv. ........................................................................................ 12
1.1.1. A internet e a world wide web............................................................................ 1-3
1.1.2. A web como um meio de comunicaao............................................................ 1-4
1.2. . !orta !iae !eb e a vtervet ...................................................................... 11
1.2.1. Protocolos ............................................................................................................. 1-5
1.2.2. Lndereos Internet............................................................................................... 1-5
1.2.3. Serio de Nomes ,DNS - Domain Name Serice,........................................ 1-5
1.2.4. Portas e serios da Internet............................................................................... 1-6
1.2.5. A \eb entre os serios da Internet ................................................................. 1-6
1.. . tataforva !eb ........................................................................................... 1
1.3.1. lipertexto ............................................................................................................. 1-
1.3.2. l1ML....................................................................................................................1-8
1.3.3. Seridor l11P..................................................................................................... 1-8
1.3.4. URIs ,URLs , ........................................................................................................ 1-9
1.3.5. Browser................................................................................................................1-10
1.3.6. 1ipos MIML.......................................................................................................1-11
1.1. 1ecvotogia. ae .re.evtaao............................................................................ 111
1.4.1. l1ML..................................................................................................................1-12
1.4.2. listrico do l1ML...........................................................................................1-12
1.4.3. l1ML 4 e CSS ...................................................................................................1-13
1.4.4. XML e XSL.........................................................................................................1-14
1.:. erravevta. ae ae.evrotrivevto 1M......................................................... 111
1.5.1. Lditores graicos ,\\SI\\G,........................................................................1-15
1.5.2. Lditores de texto ................................................................................................1-15
1.5.3. Lditores de l1ML.............................................................................................1-16
1.5.4. Browsers e seridores ........................................................................................1-16
1.5.5. Por que aprender l1ML.................................................................................1-1
iii
2. 1M
2.1. vvaavevto. ao 1M.................................................................................. 22
2.1.1. Llementos e descritores ,tags, ............................................................................ 2-2
2.1.2. Atributos................................................................................................................ 2-4
2.1.3. Caracteres de escape ............................................................................................ 2-5
2.1.4. Comentarios .......................................................................................................... 2-
2.1.5. Lstrutura do documento..................................................................................... 2-
2.1.6. Llementos do lLAD.......................................................................................... 2-8
2.1.. Llementos de BOD\ .......................................................................................... 2-9
2.2. Paragrafo. e btoco. ae teto ............................................................................. 210
2.2.1. Paragraos P..................................................................................................2-10
2.2.2. Cabealhos l1 a l6..............................................................................2-11
2.2.3. Controle de luxo ...............................................................................................2-12
2.2.4. Citaao de bloco BLOCKQUO1L...........................................................2-13
2.2.5. 1exto pr-ormatado PRL..........................................................................2-13
2.2.6. Bloco genrico de seao DIV.....................................................................2-14
2.2.. Outros blocos .....................................................................................................2-14
2.2.8. Resumo ................................................................................................................2-15
2.. i.ta. ............................................................................................................. 21
2.3.1. Listas nao-ordenadas UL, LI................................................................2-16
2.3.2. Listas ordenadas OL, LI........................................................................2-1
2.3.3. Listas de deinioes DL, D1, DD.................................................2-1
2.3.4. Resumo ................................................................................................................2-18
2.1. vagev. .......................................................................................................... 21
2.4.1. Objeto Imagem IMG...................................................................................2-18
2.4.2. Alinhamento de imagens...................................................................................2-19
2.4.3. Dimensionamento..............................................................................................2-20
2.4.4. Resumo ................................................................................................................2-20
2.:. orvataao ae caractere. ;ivtive etevevt.)........................................................ 221
2.5.1. Llementos............................................................................................................2-21
2.. 1abeta............................................................................................................ 222
2.6.1. Principais elementos estruturais 1ABLL, 1R, 1D ou 1l..2-23
2.6.2. Bordas e espaamento .......................................................................................2-24
2.6.3. Largura e altura ...................................................................................................2-26
2.6.4. Atributos de posicionamento, cor e imagens de undo................................2-2
2.6.5. Alinhamento e dimensionamento de clulas..................................................2-28
2.6.6. Combinaao de clulas ......................................................................................2-28
2.6.. Resumo ................................................................................................................2-29
2.. .vcora. e 1vcvto. ........................................................................................ 22
2..1. Resumo ................................................................................................................2-30
ir
2.. tevevto. ae e.tito ;aerecaao. vo 1M 1.0) ............................................. 20
2.8.1. Atributos de uma pagina BOD\ atributos...............................................2-30
2.8.2. Cores e ontes lON1..................................................................................2-31
2.8.3. Resumo ................................................................................................................2-31
2.. erccio. ....................................................................................................... 22
2.9.1. 1estes sobre \eb e l1ML ..............................................................................2-32
. .tev ao 1M
.1. vagev. ............................................................................................................ 2
3.1.1. Cores ...................................................................................................................... 3-2
3.1.2. Paletas de cores..................................................................................................... 3-3
3.1.3. Anti-aliasing...........................................................................................................3-4
3.1.4. Compressao GIl.................................................................................................. 3-6
3.1.5. JPLG...................................................................................................................... 3-8
3.1.6. PNG....................................................................................................................... 3-8
.2. a,ovt cov tabeta. ...........................................................................................
3.2.1. GIl de um pixel ................................................................................................... 3-9
3.2.2. Layout de pagina com tabelas...........................................................................3-10
3.2.3. Imagens recortadas.............................................................................................3-10
.. rave. ........................................................................................................... 11
3.3.1. Lstrutura basica ..................................................................................................3-12
3.3.2. Controle dos alos dos nculos ......................................................................3-14
.1. Mvttivaia ..................................................................................................... 1:
3.4.1. Imagens mapeadas .............................................................................................3-15
3.4.2. udio, deo e plug-ins......................................................................................3-16
3.4.3. llash .....................................................................................................................3-18
.:. .tet. ]ara................................................................................................... 1
3.5.1. O que sao applets Jaa.....................................................................................3-19
3.5.2. Quando usar applets ..........................................................................................3-19
3.5.3. Como incluir um applet em uma pagina.........................................................3-21
3.5.4. Conclusao............................................................................................................3-22
.. erccio. ....................................................................................................... 2
1. otba. ae e.tito
1.1. vtroavao......................................................................................................... 12
4.1.1. O que sao olhas de estilo.................................................................................. 4-2
4.1.2. Para que serem as olhas de estilo.................................................................... 4-3
1.2. Regra. a.ica. .................................................................................................. 11
4.2.1. Regras, declaraoes e seletores ........................................................................... 4-4
4.2.2. Mltiplas declaraoes e seletores........................................................................ 4-5
r
4.2.3. Comentarios e instruoes .................................................................................... 4-6
4.2.4. Valores ................................................................................................................... 4-6
4.2.5. lerana.................................................................................................................. 4-
4.2.6. Descritores l1ML especiais .............................................................................. 4-8
4.2.. Como incluir estilos em uma pagina.................................................................. 4-8
4.2.8. Classes e IDs .......................................................................................................4-11
4.2.9. Links ,pseudo-classes e pseudo-elementos, ...................................................4-12
4.2.10. Seletores de contexto.......................................................................................4-12
4.2.11. Cascata de olhas de estilo ..............................................................................4-13
1.. ovte.............................................................................................................. 111
4.3.1. ont-amily...........................................................................................................4-14
4.3.2. ont-size ...............................................................................................................4-15
4.3.3. ont-style e ont-weight .....................................................................................4-1
4.3.4. ont-ariant..........................................................................................................4-19
4.3.5. A propriedade ont.............................................................................................4-20
1.1. .tribvto. ae teto........................................................................................... 120
4.4.1. text-transorm.....................................................................................................4-20
4.4.2. text-decoration....................................................................................................4-21
4.4.3. text-align e ertical-align....................................................................................4-22
4.4.4. text-indent ...........................................................................................................4-23
4.4.5. line-height ............................................................................................................4-23
4.4.6. letter-spacing .......................................................................................................4-24
1.:. Core. .............................................................................................................. 121
4.5.1. color......................................................................................................................4-25
4.5.2. background-color ...............................................................................................4-26
4.5.3. background-image..............................................................................................4-26
4.5.4. background-repeat..............................................................................................4-26
4.5.5. background-position e background-attachment ............................................4-2
4.5.6. background..........................................................................................................4-28
1.. Prorieaaae. ae cta..ificaao ............................................................................ 12
4.6.1. display...................................................................................................................4-29
4.6.2. white-space..........................................................................................................4-29
4.6.3. list-style ................................................................................................................4-29
1.. Covtrote ae btoco............................................................................................. 10
4..1. margin e padding ................................................................................................4-31
4..2. border-width .......................................................................................................4-32
4..3. border-color ........................................................................................................4-32
4..4. border-style..........................................................................................................4-33
4..5. border...................................................................................................................4-34
4..6. width e height......................................................................................................4-34
4... loat.......................................................................................................................4-34
ri
4..8. clear ......................................................................................................................4-35
1.. Po.iciovavevto................................................................................................ 1:
4.8.1. position, top e let ..............................................................................................4-35
4.8.2. z-index..................................................................................................................4-38
4.8.3. isibility ................................................................................................................4-38
1.. erccio. ....................................................................................................... 1
4.9.1. 1estes sobre lolhas de Lstilo...........................................................................4-39
4.9.2. Lxerccios com lolhas de Lstilo......................................................................4-41
.vaice . - ibtiografia
rii


Prefacio
Lste material didatico contm quatro textos selecionados e organizados especialmente para o curso
\eb Design e l1ML Aanado` que az parte do currculo do ASI1. A inalidade deste material
serir de apoio ao curso como onte de inormaoes tericas e exerccios.
Os textos colecionados nesta apostila azem parte de outras apostilas e liros que tratam de
assuntos relacionados ao tema do curso, mas nem todo o material que esta presente aqui sera
abordado no curso. Alguns assuntos sao pr-requisitos para este curso mas oram includos nesta
apostila para que os alunos que queiram reisar os pr-requisitos antes do incio do curso possam
az-lo, e como reerncia. Portanto, o rograva ao cvr.o, e nao o ndice de tpicos deste liro, a
reerncia absoluta quanto ao programa a ser cumprido. O programa detalhado podera ser
encontrado no endereo http:,,www.ibpinet.net,helder,asit,.
O qve roc ;a aere .aber
Um dos pr-requisitos do ASI1 e que requerido para este curso o conhecimento de l1ML. Voc
deera saber criar uma pagina usando l1ML e saber identiicar, no cdigo-onte, as principais
estruturas de uma pagina como ttulos, clulas de tabelas, etc.
Nao necessario que oc s desenola em l1ML, mas, se oc s cria paginas usando
erramentas graicas, possel que quase nao eja cdigo l1ML na sua rente. Nao ha tempo para
se ensinar l1ML neste curso, portanto, se oc nao conhece algo mais que o basico de l1ML,
como listas e principalmente tabelas, procure aprender um pouco lendo o liro 2 ,l1ML, e azendo
os exerccios. Para aaliar seus conhecimentos, tente azer os testes no inal do liro 2. As respostas
serao diulgadas em sala de aula.
De.criao ao covtevao
Lsta apostila consiste de quatro liros. O primeiro, chamado de \eb Design, apresenta uma
deiniao do que seja essa disciplina, discute aspectos importantes do desenolimento de \eb sites,
deine termos essenciais que serao usados ao longo do curso e contm inormaoes tcnicas sobre o
uncionamento dos browsers e seridores \eb. Como complemento ao material do primeiro liro,
ha uma apresentaao ,slides, sobre naegaao, acessibilidade e projeto de um site.
riii
i
O segundo liro trata exclusiamente da tecnologia l1ML. Lle nao sera usado neste curso.
Apresenta e mostra como usar os principais descritores l1ML e seus atributos mais importantes,
destacando o uso de tabelas, nculos e imagens com diersos exemplos e ilustraoes.
O terceiro liro apresenta aspectos aanados do l1ML como o tratamento de imagens, o uso
de tabelas para organizar o layout de paginas, imagens para espaamento, janelas com mltiplos
documentos ,frave.,, imagens mapeadas, audio, deo, plug-ins e applets Jaa. L muito assunto para
conhecer em detalhes. Alguns tpicos ,como applets,, serao istos em outros cursos. Apenas o
layout com tabelas e frave. sao abordados neste curso.
O quarto e ltimo liro introduz a linguagem CSS, usada para criar sites controlados por olhas
de estilo. Com essa tecnologia possel ter controle quase absoluto sobre a aparncia de um site,
com antagens que acilitam a manutenao, tornam o site mais lee e acessel e permite o suporte a
tecnologias interatias como o Dl1ML ,Dynamic l1ML,.
Maia etetrvica e atvatiaoe.
1odos os exemplos, exerccios resolidos e soluoes de alguns exerccios propostos estao ou
distribudos em um disquete que acompanha este liro ou disponeis na Internet. Para esta ediao,
atualizaoes estarao disponeis em http:,,www.ibpinet.net,helder,asit, assim como correoes e
posseis exemplos adicionais.
Crtica. e .vge.toe.
Os liros contidos nesta ediao estao sempre sendo reisados, atualizados e ampliados
periodicamente e cada ez que sao utilizados em cursos. Cuidados oram tomados para garantir a
apresentaao dos assuntos de orma clara, didatica e precisa, mas eentualmente podem escapar
erros, imprecisoes e trechos de pouca clareza. Sugestoes, crticas e correoes sao sempre bem indas
e podem ser endereadas por e-mail a hlsr@uol.com.br ou helder@ibpinet.net. Sua opiniao
muito importante e contribuira para que uturas edioes possam ser cada ez melhores.


lelder L. S. da Rocha
Sao Paulo, 1 de eereiro de 2000.
1 - \eb design
!"!" $ %&' ( )'* +',-./0
\eb design , em ingls, o nome da arte praticada pelos seres artrpodes da ordem
1234/'3', ou aracndeos, mais popularmente conhecidos como as 323/53,.
Mas isto era ha 10 anos atras. loje, \eb design a arte de tecer uma outra teia, muito
mais desorganizada e catica, e que nao goernada por nenhuma aranha. \eb design a
concepao e projeto da interace interatia do serio \eb, ormado por "paginas".
Alguns anos depois das aranhas, a administraao da \eb cabia a programadores que
precisaam codiicar toda a inormaao usando uma linguagem: o l1ML, e depois armazena-
las em uma area especial de uma maquina Unix, onde rodaa um seridor \eb - programa que
permitia o acesso remoto as inormaoes das paginas. loje, a arte de criar paginas \eb
continua a exigir mais e mais conhecimentos de programaao ... isual! Saber l1ML hoje
menos importante que ter nooes de design.
O design de paginas para a \eb hoje se assemelha mais a editoraao eletronica que a
programaao. Os caminhos do \eb design, porm, sao bem dierentes daqueles seguidos na
criaao para mdia impressa. O \eb designer dee conhecer nao s as possibilidades do meio
onde publicara a sua inormaao, como suas limitaoes. A arte do \eb design consiste em
aproeitar ao maximo os recursos oerecidos pela \eb, garantindo a melhor apresentaao,
naegabilidade e interatiidade de um \eb site. A idia atrair os isitantes e estimula-los a
oltar outras ezes. As ezes necessario sacriicar a qualidade da apresentaao ou deixar de
usar algum recurso til deido a lentidao da rede ou incompatibilidades de browsers. L
importante que o \eb designer aprenda a traar uma linha de equilbrio entre os
impedimentos tecnolgicos e as possibilidades criatias desta noa mdia, para tirar o maior
proeito do seu potencial.
O bom \eb design comea ora do computador. Planejar a estrutura da teia e sua
identidade com base nos objetios a que se destina ,comercio, inormaao, promoao, intranet,
captura de insetos, antes de iniciar a implementaao, presera o conceito por tras do design da
interace e diminui a limitaao da tecnologia disponel.
Como ja mencionamos acima, hoje possel desenoler todo um site sem escreer
uma s linha de l1ML. Obiamente, omitimos alguns detalhes nesta airmaao ,senao, por
que estaramos ensinando l1ML aanado,. O estado atual das erramentas de )'* 6&*7-,5-/.
limita muito o que se pode azer sem programar. l1ML um padrao em constante
desenolimento e as erramentas leam no mnimo seis meses para incorporar as extensoes e
noos padroes aos seus produtos. Para criar paginas com os mais modernos recursos
interatios, com uma apresentaao soisticada, acessel e acil de manter quase sempre ainda
preciso escreer alguma coisa em l1ML. L a nica orma de nao se tornar escrao das
erramentas.
1-2
1 - \eb design
!"!"!" $ %&'()&(' ( * +,)-. +%.( +(/
Para entender como criar e publicar paginas para a \eb, precisamos primeiro saber um
pouco como unciona a 1eia, e a Internet, que esta por tras de tudo. Nos paragraos seguintes
relembramos um pouco a sua histria.
A Internet uma rede antiga. 1em mais de 30 anos de idade. Uma das pessoas que tee
um papel decisio na sua criaao oi lidel Castro. Os Lstados Unidos tinham passado por uma
possibilidade real de ataque nuclear depois da instalaao de msseis russos em Cuba e a
interligaao das bases militares em rede oi uma estratgia militar para proteger a comunicaao
em caso de ataque nuclear. Lla ligaa maquinas dierentes entre si atras de linhas
redundantes de maneira que, mesmo que uma ou arias bases ossem reduzidas a p, as outras
estaoes ainda conseguiriam se comunicar entre si. Lntao, com medo que lidel e seus charutos
nucleares paralisassem o sistema de deesa do pas oi criada a rede ARPANL1 ,$.0*&1(.
2(3(*)14 5),6(1'3 $7(&18 9('+,):,. A rede interligou arios computadores em algumas
uniersidades e centros de pesquisa enolidos com projetos militares. Na poca, computador
ainda era coisa rara. Computador em rede, mais ainda.
Os primeiros usuarios ,cientistas, usaam a rede para trocar mensagens de correio
eletronico e se conectar remotamente em computadores distantes. O serio tornou-se tao til,
que as uniersidades enolidas comearam a conectar seus departamentos, mesmo os que nao
tinham a er com o projeto. Na dcada de 80, oi a ez da NSlNL1, a rede nacional de
pesquisa dos Lstados Unidos, que conectou os cinco grandes centros regionais de
supercomputaao e passou tambm a azer parte da ARPANL1. A NSlNL1 se tornou
espinha dorsal das duas redes, depois chamada de Internet.
A NSlNL1 leou consigo uma legiao de pequenas redes que a ela estaam conectadas.
L assim a Internet oi crescendo e crescendo, sem nenhuma organizaao central. Qualquer
centro que achasse seus serios conenientes podia se amarrar ao n mais prximo
simplesmente pagando as despesas de uma linha dedicada de dados. Lm pouco tempo, a
Internet ja interligaa os maiores centros de pesquisa do mundo.
A expansao oi trazendo noos serios e outras redes de pesquisa, como a Usenet, a
Bitnet, LARN e redes de BBSs. O crescimento ja era impressionante, mas a popularidade
ainda era limitada. Grande parte do traego era acadmico. Operar um sistema de correio
eletronico em geral signiicaa saber operar um jurassico terminal IBM ou maquina Unix, e ter
alguma amiliaridade com suas interaces hostis. Para transerir um arquio era necessario
saber usar um programa especial ,l1P,, mandar comandos para ele e entender os hieroglios
que ele retornaa.
O maior problema era a desorganizaao generalizada da Internet. A Internet era um
tremendo caos. Voc sabia que poderia transerir um arquio de qualquer lugar do mundo. O
problema era saber se ele existia e onde estaa!
A Internet comeou a crescer de orma explosia em 1992, com o surgimento da ;,)-.
;%.( ;(/, um projeto do laboratrio CLRN em Genebra ,eles nao estudaam aranhas, mas
1-3
1 - \eb design
partculas subatomicas,. A \eb conseguiu inalmente organizar um pouco as inormaoes da
Internet atras do hipertexto. No ano seguinte, chegou o !"#$%& para \indows - programa
desenolido por um grupo de estagiarios do NCSA ,'$(%")$* ,-)(-. /". 012-.&"321(%)4
522*%&$(%")#, da Uniersidade de Illinois a partir de uma ersao anterior para o sistema Unix.
O Mosaic, oerecendo pela primeira ez uma interace graica multimdia para a \eb,
trouxe a grande massa de usuarios de PC e Macintosh para dentro da rede. Os proedores de
acesso e inormaao comerciais se multiplicaram, oerecendo as pessoas comuns o mesmo
acesso que antes s tinham as grandes organizaoes e o meio acadmico.
Os criadores do Mosaic pouco depois de deixar a uniersidade criaram uma empresa: a
Netscape, que oi proaelmente a empresa que tee a maior inluncia nos rumos seguidos
pela \eb na sua eoluao at os dias de hoje.
676787 5 9-: &"3" 13 3-%" ;- &"31)%&$<="
Apesar de ter surgido como um serio de uma rede de computadores, a \eb hoje
muito mais que isto e para explora-la, nem computador necessario mais. 1ecnologias
recentes como o '-(9".> ,"321(-. ,NC, - que um simples terminal para a \eb, browsers que
m embutidos em teleones celulares, e a rede ?-:@A mostram que a ?".*; ?%;- ?-: esta
destinada a preencher todos os espaos da mdia de diusao, nao se limitando aqueles que
possuem um computador.
A \eb, dessa orma, possui um potencial inigualael na histria das telecomunicaoes. L
capaz de serir de interace a todos os serios da Internet e ainda aos tradicionais serios de
oz ,teleone,, teleisao, radio e mdias impressas. Pode integrar tudo e interagir com tudo.
Ainda estamos dando os primeiros passos neste noo terreno, e cada dia nos traz mais certeza
de que trata-se de um caminho sem olta.
Dierente dos meios tradicionais de comunicaao de massa, a ?".*; ?%;- ?-: uma
mdia democratica. O usuario nao precisa possuir uma estaao diusora, uma concessao, uma
graica ou qualquer coisa do tipo para poder publicar sua inormaao e inluenciar sua
audincia. 1odos podem receber as inormaoes de todos. Qualquer um pode proer
inormaao. O poder da inormaao esta nas maos de todos os que puderem ter um espao na
1eia, e nao mais apenas com as aranhas ou com aqueles que possuem os meios de diusao
tradicionais.
6787 5 ?".*; ?%;- ?-: - $ B)(-.)-(
A ?".*; ?%;- ?-: o nome do mais popular dos #-.C%<"# da Internet. Por esse motio,
reqentemente conundida com a prpria Internet. Mas \eb e Internet nao sao a mesma
coisa, e precisamos conhecer bem a dierena entre as duas antes que possamos comear a
desenoler paginas e aplicaoes para a \eb.
1-4
1 - \eb design
!"#$%"$# o nome dado ao conjunto de computadores, proedores de acesso, satlites,
cabos e serios que ormam uma %$&$ ()"&*+, baseada em uma coleao de -%.#./.,.0 &$
/.()"*/+12. conhecidos como 1CP,IP.
345434 6%.#./.,.0
L atras de protocolos de comunicaao que um computador pode se comunicar com
outro atras de uma linha teleonica ou placa de rede sem que o usuario precise se preocupar
em saber qual o meio sico que esta sendo utilizado. O sistema \indows possui protocolos
que permitem acilmente interligar computadores rodando \indows entre si. Os mesmos
protocolos podem nao serir para azer com que uma maquina \indows se comunique com
uma maquina Unix ou Macintosh, pois essas maquinas possuem arquiteturas dierentes.
1CP,IP uma suite de protocolos padrao que oi adotado como lngua oicial` da Internet.
Para azer parte da Internet, um computador precisa saber se comunicar em 1CP,IP. 1odas as
operaoes de rede sao traduzidas para 1CP,IP antes que possam uncionar na Internet.
345454 7"&$%$1.0 !"#$%"$#
Um dos protocolos mais importantes da suite 1CP,IP o protocolo de rede IP - !"#$%"$#
6%.#./.,. Lle deine a 8.%(+ &$ $"&$%$1+($"#. que permite a localizaao de um computador na
Internet, atras de um conjunto de dgitos chamado de $"&$%$1. !6. Qualquer maquina acessel
atras da Internet tem um endereo IP $9/,)0*:.. Lsse endereo pode ser #$(-.%;%*. ou
-$%(+"$"#$. Quando oc se conecta a um proedor ia linha teleonica, ele atribui um nmero
IP temporario a sua maquina que permitira que ela aa parte da Internet enquanto durar a sua
sessao no proedor. S assim possel receber inormaoes em um browser ou eniar e-mail.
Computadores que hospedam paginas \eb e que oerecem outros serios pela Internet
precisam de um endereo IP 8*9., para que oc possa localiza-los a qualquer hora. Por
exemplo, 200.231.191.10 o endereo IP da maquina onde esta localizado o seridor \eb do
IBPINL1 em Sao Paulo. Voc pode localiza-lo digitando http:,,200.231.191.10, no campo
de endereos do seu naegador.
3454<4 =$%:*1. &$ >.($0 ?@>= A @.(+*" >+($ =$%:*/$B
Lmbora cada computador seja identiicado de orma exclusia atras de um endereo
IP, nao dessa orma que costumamos localiza-los na Internet. Um dos serios undamentais
ao uncionamento da Internet o 0$%:*1. &$ ".($0 &$ &.(C"*.. Lsse serio oerecido por arias
maquinas espalhadas pela Internet e que guardam tabelas que associam o ".($ de uma maquina
ou de uma rede a um endereo IP. Quando oc digita o nome de uma maquina no seu
browser ,por exemplo, DDD4*E-*"$#4"$#,, o browser primeiro tenta localiza-la consultando uma
outra maquina ,cujo endereo IP o browser ja conhece, que oerece o serio de nomes. Lssa
maquina consulta outros serios de nomes espalhados pela Internet e em pouco tempo
1-5
! # $%& '%()*+
'%,-.,% - %+'%/%0- 12 3-//%(4-+'%+5% 6- +-7% (-.)3)56'- 8!!!"#$%#&'("&'( '%,-.,%/9
:;;<:=!<!>!<!;?<
@% - ()(5%76 '% +-7%( A6.B6/C - &/-D(%/ +E- 3-+(%*F)/9 - +G7%/- 12 HF% 4/%3)(6 % 6(()7
+E- .-36.)I6/9 6 79HF)+6 3-//%(4-+'%+5% 87%(7- HF% %.6 +E- %(5%J6 A-/6 '- 6/?<
)"*"+" -./(01 ' 1'/2#3.1 40 5&('/&'(
K 1+5%/+%5 %L)(5% B9 76)( '% 5/M( 'N36'6(< O6 76)-/ 46/5% '%((% 4%/P-'- %.6 %/6 /%(5/)56
6-( 7%)-( 636'M7)3-( % 7).)56/%( % -A%/%3)6 4-F3-( (%/,)0-(< Q( 4/)+3)46)( 1'/2#3.1 F5).)I6'-( +6
/%'% %/67 6 (/0&16'/7&8#0 4' 0/9:#2.1 %+5/% 3-74F56'-/%( 8F(6+'- 64.)360R%( HF% (% 3-7F+)36,67
65/6,N( '- 4/-5-3-.- ST2 U ;#<' =/0&16'/ -/.(.8.<?C - 8.//'#. '<'(/>&#8. % 6 '?:<03@. 4' ('/?#&0<C HF%
4%/7)5)6 - 63%((- 6 3-74F56'-/%( /%7-5-(< V((%( (%/,)0-( %/67 -A%/%3)'-( %7 6.*F76(
79HF)+6( -+'% /-'6,67 4/-*/676( (%/,)'-/%(C 4%/76+%+5%7%+5% +- 6/ 6*F6/'6+'- 6 3-+%LE-
'% F7 3.)%+5% %7 F76 '% (F6( %./(01 4' 8.?:&#803@.<
W76 7%(76 79HF)+6 4-'% -A%/%3%/ ,9/)-( (%/,)0-(C '%('% HF% %7 4-/56( ')A%/%+5%(<
176*)+% HF% - %+'%/%0- 12 '% F76 79HF)+6 (%J6 3-7- - %+'%/%0- '% F7 4/N')- '%
%(3/)5X/)-(< Y-36.)I6+'- - 4/N')-C ,-3M 4/-3F/6 4-/ F7 '%5%/7)+6'- (%/,)0- HF% N 4/%(56'-
4-/ F76 %74/%(6< 2-'% B6,%/ ,9/)6( %74/%(6( +- 4/N')-< Z6'6 F76 5%7 F76 (6.6 )'%+5)A)36'6
4-/ F7 +G7%/-< Q +G7%/- '6 (6.6 N 6+9.-*- [ 4-/56 '% (%/,)0-( '% F76 79HF)+6< 26/6
A63).)56/ 6 ,)'6 '-( 3.)%+5%(C ,9/)6( 4-/56(C )'%+5)A)36'6( 4-/ F7 +G7%/-C A-/67 46'/-+)I6'6(C -F
(%J6C %7 3-74F56'-/%( ')A%/%+5%(C ,-3M *%/6.7%+5% %+3-+5/6 -( 7%(7-( (%/,)0-( .-36.)I6'-(
%7 4-/56( 3-7 -( 7%(7-( +G7%/-(<
26/6 5%/ 63%((- 6 F7 (%/,)0- N 4/%3)(- 5%/ F7 3.)%+5% 64/-4/)6'- HF% (6)&6 3-+,%/(6/ +6
.P+*F6 84/-5-3-.-? '- (%/,)'-/ 84/-*/676 HF% -A%/%3% - (%/,)0- +6 4-/56 &F(36'6 4%.- 3.)%+5%?<
Z-7- 6( 4-/56( (E- 46'/-+)I6'6(C F7 3.)%+5% 7F)56( ,%I%( (X 4/%3)(6 (6&%/ - +-7% -F
%+'%/%0- 12 '6 79HF)+6 HF% 5%7 '%5%/7)+6'- (%/,)0-C 4-)( - +G7%/- '6 4-/56 %.% (F4R% HF%
(%J6 - +G7%/- 46'/E-<
@% ,-3M F(6 - 5&('/&'( AB%<./'/ 46/6 5%/ 63%((- 6- ()5% '- 1\21OVT -F - C:(<..D AB%/'11
46/6 .%/ (%F %U76). +- 1\21OVTC N 4-((P,%. HF% ,-3M %(5%J6 (% 3-+%356+'- [ 7%(76 79HF)+6<
Q C:(<..D AB%/'11 (% 3-+%356/9 [ 4-/56 !!; 46/6 ,%/)A)36/ (F6( 7%+(6*%+(< O6 B-/6 '% %+,)6/C
F5).)I6/9 -( (%/,)0-( '6 4-/56 :]< Q 5&('/&'( AB%<./'/ &F(36/9 6 E.?' %0F' '- 1\21OVT +6 4-/56
^;C 76( (% ,-3M '%3)')/ A6I%/ 3-74/6( % F5).)I6/ - (%/,)'-/ (%*F/- '- 1\21OVTC (% - &/-D(%/
F5).)I6/9 6 4-/56 __=<
)"*"G" H I'$ '&(/' .1 1'/2#3.1 40 5&('/&'(
Q (%/,)0- '% %7F.60E- '% 5%/7)+6. /%7-5- U ='<&'(C /%HF%/ HF% - F(F9/)- 3-+B%06 -
()(5%76 /%7-5-C 5%+B6 4%/7)((E- '% 63%((- % (6)&6 F5).)I9U.-< Q 63%((- N -/)%+56'- 6 36/635%/ %
4-'% (%/ A%)5- %7 `@UaQ@< O- )+P3)- '6 4-4F.6/)I60E- '6 1+5%/+%5C ,9/)-( (%/,)0-( %/67
-A%/%3)'-( 64%+6( ,)6 ='<&'(C HF% AF+3)-+6,6 3-7- F76 %(4N3)% '% 3.)%+5% F+),%/(6.< Q F(F9/)-C
.)*6'- [ 1+5%/+%5C 4-'%/)6 4%(HF)(6/ - &6+3- '% '6'-( '6 O6(6C &65%/ 464- 3-7 F(F9/)-(
!Ub
1 - \eb design
remotos e pesquisar repositrios de inormaoes pelo mundo aora. A \orld \ide \eb surgiu
inicialmente como mais um desses serios, que poderia ser utilizado atras de um cliente
1elnet apontando para o endereo ino.cern.ch. O serio ainda existe, por razoes histricas. L
possel acessa-lo ia linha de comando no DOS ou Unix usando:
telnet info.cern.ch
L um acesso orientado a caracter e na poca concorria com outros serios de
inormaoes mais populares como o !"#$, o %&'()* e o "*+(,), que tambm tentaam
organizar as inormaoes da Internet.
O acesso direto ao seridor, usando um cliente conectado a sua porta de comunicaao
sempre mais rapido e eiciente que o acesso ia 1elnet. Os primeiros clientes \eb eram
orientados a caracter ,nao exibiam ontes nem imagens, e rodaam apenas em ambientes Unix.
Com o surgimento do -./&01,+, o primeiro browser graico rodando em ambiente -.!,23&4
,Unix,, a \eb comeou a se tornar popular ,pelo menos entre os acadmicos,. O crescimento
explosio da Internet aconteceu quando inalmente o Mosaic passou a ser acessel ao usuario
comum nao-acadmico atras do !,2./&01,+ e posteriormente do /1+./&01,+. O Mosaic, de-
senolido por Marc Andreesen quando estagiaa no NCSA ,516,&217 9)26)* :&* $;')*+&<';6,2=
"''7,+16,&20, abriu caminho para arios outros clientes \eb, hoje chamados de browsers, e que
passaram a ser o primeiro ,e as ezes nico, contato de muitos usuarios com a Internet. O
prprio Andreesen, ao deixar o NCSA, undou a 5)60+1') 9&<<;2,+16,&20, que dominou a \eb
por arios anos.
Os browsers de hoje nao sao mais apenas clientes \eb. Lles lem paginas locais, eniam
e-mail, permitem que o usuario leia grupos de notcias, e-mail, execute aplicaoes locais, acesse
aplicaoes remotas e diersos outros serios da Internet. O browser moderno um cliente
uniersal para toda a Internet, embora esse acesso ocorra atras da \orld \ide \eb.
>?@? " '7161:&*<1 !)A
A \orld \ide \eb um serio 1CP,IP baseado no '*&6&+&7& 3) 2BC)7 3) 1'7,+1DE& l11P
,FG')*H)I6 H*120:)* J*&6&+&7, - J*&6&+&7& 3) H*120:)*K2+,1 3) F,')*6)I6&. A plataorma \eb o meio
irtual ormado pelos seridores l11P ,seridores \eb que mantm sites,, clientes l11P
,browsers, e protocolo l11P ,a lngua comum entre o cliente e o seridor,.
>?@?>? F,')*6)I6&
F,')*6)I6& uma orma nao linear de publicaao de inormaoes onde palaras que
aparecem no decorrer do texto podem lear a outras seoes de um documento, outros
documentos ou at outros sistemas de inormaao, ugindo da estrutura linear original de um
texto simples. O hipertexto baseia-se em ligaoes entre dois pontos chamados de L2+&*10. As
ligaoes entre as ancoras sao chamadas de CB2+;7&0 ,7,2M0,. Vnculos de hipertexto sao
1-
1 - \eb design
implementados em textos publicados na \eb usando uma linguagem declaratia chamada
1M ,er1et Mar/v avgvage.
1..2. 1M
l1ML usada para varcar um arquio de teto .ivte. ,texto simples texto sem
ormataao alguma, isualizael em qvatqver editor de textos,. Se um arquio de texto simples
receber uma extensao de nome de arquio .html` ou .htm`, um naegador como o Internet
Lxplorer ira tentar interpreta-lo como l1ML. Dentro do texto, pode-se deinir descritores ,ou
comandos l1ML, entre os smbolos ` e `:
!"#$Arquivo de texto!%"#$
!&$Este o !'$primeiro!%'$ pargrafo.!%&$
Os descritores s serao iseis quando o arquio or isualizado em um editor de
textos ,como o Bloco de Notas do \indows,. Ao ser isualizado em um programa capaz de
entender l1ML, apenas o texto aparece, com uma aparncia determinada pelos descritores:
!"#$%&' )* +*,+'
Lste o riveiro paragrao.
O texto com marcadores chamado caigofovte 1M. O cdigo-onte usado para
produzir a pagina isualizada o browser que chamada de agiva 1M ou agiva !eb.
O browser, por ser capaz de exibir diersos tipos de inormaao, depende totalmente da
etev.ao ao arqviro para saber o que azer com ele. Se a extensao .htm` ou .html` nao estier
presente ou se o arquio tier a extensao .txt`, o browser exibira o cdigo-onte.
Alm da ormataao da pagina, o l1ML responsael tambm pela inclusao de imagens
e deiniao dos links que permitem a naegaao em hipertexto.
1... erriaor 11P
O serio l11P unciona de orma semelhante ao serio 1P ite 1rav.fer Protocot
,protocolo de comunicaao usado na \eb para operaoes de transerncia de arquios,.
Ambos oerecem aos seus clientes um .i.teva ae arqviro. rirtvat onde podem localizar recvr.o.
,arquios, programas, etc., e transeri-los de um computador para outro. O sistema irtual
pode ter uma bierarqvia prpria e totalmente dierente do .i.teva ae arqviro. reat ao covvtaaor, ao
qual esta inculado. Geralmente um seridor tem acesso a uma area restrita da maquina e s
permite a isualizaao dos arquios la contidos. O sistema de arquios irtual usa uma notaao
dierente daquela usada pelo sistema real. Por exemplo, considere o seguinte sistema de
diretrios no \indows:
C:\
1-8
1 - \eb design
C:\Windows
C:\Documentos
C:\Documentos\Web\
C:\Documentos\Web\Imagens
C:\Documentos\Web\Videos
Suponha que um seridor l11P oi instalado nessa maquina. Na instalaao, ele
conigurado para administrar um sistema de diretrios a partir de um certo diretrio. Suponha
que esse diretrio C:`Documentos`\eb`. Para o seridor, isto seu diretrio raiz. No
sistema de diretrios irtual, o diretrio raiz de um seridor chamado de , ,barra,. O sistema
de arquios irtual ,a parte que um browser podera ter acesso, :
/ (C:\Documentos\Web\)
/Imagens (C:\Documentos\Web\Imagens)
/Videos (C:\Documentos\Web\Videos)
Um browser jamais tera acesso ao diretrio \indows, por exemplo. A principal unao
de um seridor \eb , portanto, !"#$%$&'(!( um sistema de arquios e diretrios irtual e !')%")(
+ (),-$&$./)& "0& 12$)%')& l11P ,os browsers,, que, na maior parte das ezes, eniam comandos
l11P pedindo que o seridor deola um ou mais arquios localizados nesses diretrios. Os
pedidos sao eitos atras de uma sintaxe especial chamada de URI.
345464 789& :78;& 3<
1odas as comunicaoes na plataorma \eb utilizam uma sintaxe de endereamento
chamada 789 = 7%$>0(# 8)&0-(1) 9")%'$>$)( - para localizar os recursos que sao transeridos. O
serio l11P depende da URI que usada para localizar ,-!2,-)( 10$&! na Internet. Contm
duas inormaoes essenciais: 1, COMO transerir o objeto ,o protocolo,, 2, ONDL encontra-
lo ,o endereo da maquina e o caminho irtual,. URIs tipicamente sao constitudas de trs
partes:
mecanismo ,protocolo, usado para ter acesso aos recursos ,geralmente l11P,
nome da maquina ,precedido de //, onde o serio remoto oerecido ,e a porta, se
o serio nao estier em uma porta padrao, ou outro nome atras do qual o serio
possa ser localizado ,sem //,.
nome do recurso ,arquio, programa, na orma de um caminho ,no sistema de
arquios irtual do seridor, onde se possa encontra-lo dentro da maquina.
Sintaxe tpica:
protocolo://maquina:porta/caminho/recurso

1
URIs tambm sao requentemente chamadas de URLs ,Uniorm Resource Locators,. A URL um tipo
particular de URI mas, para a nossa discussao, essa distinao irreleante. A documentaao l1ML
,especiicaao, sempre reere-se a essa sintaxe como URI.
1-9
1 - \eb design
As URIs mais comuns sao os endereos da \eb, que utilizam o mecanismo l11P para
realizar a transerncia de dados:
http://www.maquina.com.br/caminho/para/minha/pgina/texto.html
Veja algumas outras URLs:
ftp://usuario:senha@maquina.com/pub/arquivo.doc







Acesso a seridor l1P que exige usuario e senha para azer download de
arquio.doc
nntp://news.com.br/comp.lang.java
Acesso a seridor de newsgroups para ler o grupo comp.lang.jaa
news:comp.lang.java
Acesso ao grupo comp.lang.jaa atras de seridor deault ,deinido localmente,
http://www.ibpinet.net/
Acesso a pagina deault disponel no diretrio raiz do seridor \eb de
www.ibpinet.net
http://www.algumlugar.com:8081/textos/
Acesso a pagina deault disponel no diretrio textos do seridor \eb que roda
na porta 8081 da maquina www.algumlugar.net
http://www.busca.com/progbusca.exe?opcoes=abc&pesquisa=dracula
Passagem de parametros de pesquisa para programa de busca progbusca.exe que
tera sua execuao iniciada pelo seridor l11P que roda na porta 80 ,deault, de
www.busca.com.
http://www.ibpinet.net/helder/dante/pt/inferno/notas_4.html#cesar
Acesso a uma seao da pagina l1ML notas_4.html identiicada como cesar`,
localizada no subdiretrio irtual ,helder,dante,pt,inerno, do seridor \eb de
www.ibpinet.net.
mailto:helder@ibpinet.net
Acesso a janela de enio de e-mail do cliente de correio eletronico local.
!"#"$" &'()*+'
O browser um programa que sere de interace uniersal a todos os serios que
podem ser oerecidos ia \eb. L para a plataorma \eb o que o sistema operacional
,\indows, Linux, Mac, para o computador. A principal unao de um browser ,+' e exibir o
contedo de uma pagina \eb. A maior parte dos browsers tambm capaz de exibir arios
outros tipos de inormaao como diersos ormatos de imagens, deos, executar sons e rodar
programas.
Um browser geralmente usado como -,.+/0+ 1223 - aplicaao de rede que enia
requisioes a um seridor l11P e recebe os dados ,uma pagina l1ML, uma imagem, um
programa, para exibiao, execuao ou 4()/,(54. Browsers tambm podem ser usados (667,./+
como aplicaao local do sistema operacional para naegar em sistemas de hipertexto
1-10
1 - \eb design
construdos com arquios l1ML ,sem precisar de seridor l11P,. Nesse caso, nao se
comportam como clientes l11P ,ja que nao estao realizando operaoes em rede, mas apenas
como !"#$%&"'%()*+# (+ -.("% "/0+*%0"!% capazes de isualizar l1ML, imagens, sons, programas,
etc.
Como os browsers precisam interpretar arios tipos de cdigo ,cdigo de imagens GIl,
JPLG, cdigo de programas Jaa e llash, cdigos de texto l1ML ou texto simples, preciso
que ele saiba identiicar os dados que recebe do seridor. Isto nao a mesma coisa que
identiicar um arquio carregado do disco local, onde ele pode identiicar o tipo atras da
extensao. Quando os dados chegam atras da rede, a extensao nao signiica nada. O seridor
precisa inormar ao browser o que ele esta eniando. Na \eb, isto eito atras de uma
sintaxe padrao para deinir tipos chamada 1213 - 1$&0"4%*0 2/0+*/+0 1%"& 350+/#")/#.
678797 :"4)# 1213
MIML uma sintaxe uniersal para identiicar tipos de dados originalmente utilizada
para permitir o enio de arquios anexados ia e-mail. O seridor \eb possui, internamente,
tabelas que relacionam os tipos de dados ,na sintaxe MIML, com a extensao dos arquios por
ele gerenciados. Quando ele enia um conjunto de bytes para o browser, enia antes um
;%<+=%&>) ,semelhante ao cabealho de e-mail, inormando o /?-+*) (+ <@0+# eniados e o 0"4)
1213 dos dados para que o browser saiba o que azer com a inormaao. A sintaxe MIML
tem a seguinte orma:
tipo/subtipo
O 0"4) classiica um conjunto de bytes como imagens, textos, deos, programas
,aplicaoes,, etc. O #$<0"4) inorma caractersticas particulares de cada tipo. Nao basta saber que
o arquio uma imagem, preciso saber qual o A)*-%0), pois o cdigos usados para produzir
imagens de mesma aparncia graica podem dierir bastante entre si. 1anto no seridor como
no browser ha tabelas que relacionam extensoes de arquio 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
67B7 :+;/)&)C"%# (+ D4*+#+/0%=E)
As tecnologias utilizadas na plataorma \eb podem ser classiicadas de acordo com sua
inalidade em 0+;/)&)C"%# (+ %4*+#+/0%=E) e 0+;/)&)C"%# "/0+*%0"!%#. As tecnologias de apresentaao sao
aquelas que se destinam unicamente a ormataao e estruturaao das paginas \eb. Podem ser
usadas tambm para construir a interace de aplicaoes \eb no browser. Os principais padroes
1-11
! # $%& '%()*+
%, -(. /0-/1,%+0% (2. 34567 8997 :56 % :96; <( 0%=+.1.*)/( )+0%>/0)?/( (2. /( @-%
A%>,)0%, . '%(%+?.1?),%+0. '% /A1)=/BC%( % AD*)+/( =., /10. +E?%1 '% )+0%>/0)?)'/'% =., .
-(-D>).; F, *%>/1 =.+()(0%, '/ =.,&)+/B2. '% -,/ 1)+*-/*%, '% A>.*>/,/B2. =., -,/
/>@-)0%0->/ .- ,.'%1. @-% A.(()&)1)0/ / (-/ )+0%*>/B2. =., -,/ AD*)+/ 3456 .- (%>?)'.>
344G; G.'%,7 A.>0/+0.7 %H%=-0/> '. 1/'. '. (%>?)'.> I=.,. 8JK7 <9G7 <LM7 9%>?1%0(7
K9<GK7 N9G7 GOG7 8.1' P-().+ % 6)?%$)>%Q .- '. 1/'. '. =1)%+0% I=.,. N/?/9=>)A07 L34567
N/?/ <AA1%0(7 <=0)?%: % RS9=>)A0Q;
!"#"!" %&'(
3456 T %)*+,&+-. '/,01* (/231/3+ U / 1)+*-/*%, -+)?%>(/1 '/ $%&; V /0>/?U( '%1/ @-%
/ )+W.>,/B2. ')(A.+E?%1 +/( AD*)+/( '/ $$$ A.'% (%> /=%((/'/ A.> ,D@-)+/( '% />@-)0%0->/(
% ()(0%,/( .A%>/=).+/)( ')W%>%+0%(; X2. U -,/ 1)+*-/*%, '% A>.*>/,/B2. =., / @-/1 (% A.((/
=.+(0>-)> /1*.>)0,.(7 ,/( -,/ 1)+*-/*%, '%=1/>/0)?/ @-% (%>?% A/>/ .>*/+)Y/> )+W.>,/BC%( %,
-, />@-)?. '% 0%H0.( @-% (%>D ?)(-/1)Y/'. %, -, &>.Z(%>; L%W)+% -,/ =.1%B2. '% %1%,%+0.(
A/>/ ,/>=/B2. I'%W)+)B2. '% %(0>-0->/Q '% 0%H0.; 9% ?.=[7 +. A/((/'.7 \D -(.- -, %')0.> '%
0%H0.( =.,. 45,67./, .- 8/,./ 8+,./7 '%?%>D (% ](%+0)> %, =/(/^ =., 3456; 8.. W.)
,%+=).+/'. /+0%>).>,%+0%7 -, /,91:;5 %&'( U -, />@-)?. '% .+-.5 <:=*>+< >%=O%/'. '%
,/>=/'.>%( @-% (% '%(0/=/, '. 0%H0. A%1.( =/>/=0%>%( %(A%=)/)( _`_ % _a_;
FH)(0%, ?D>)/( 1)+*-/*%+( A/>/ W.>,/0/B2. '% 0%H0.(; b-/1@-%> 0%H0. @-% /A/>%=%
W.>,/0/'. I=., W.+0%(7 =.>%(7 0/,/+O.(Q %, -, =.,A-0/'.> 0%, -,/ 1)+*-/*%, '%
W.>,/0/B2. A.> 0>D(; < ,/).>)/ (2. 1)+*-/*%+( A>.A>)%0D>)/( @-% (c W-+=).+/, %, (.W0Z/>%(
%(A%=EW)=.( I0%H0.( %, W.>,/0. 45,67 A.> %H%,A1.Q; FH)(0%, /1*-+( W.>,/0.(7 A.>U,7 @-% (%
0.>+/>/, A/'>C%(7 (%>?)+'. &/()=/,%+0% A/>/ >%/1)Y/> =.+?%>(C%( %+0>% .( W.>,/0.(
A>.A>)%0D>).( I9J56 % d4P7 G.(09=>)A07 4%:7 GLPQ; 3456 U -, W.>,/0. *?@>:A5 I+2.
A%>0%+=% / -, W/&>)=/+0% %(A%=EW)=.Q7 % U >+;+ I+2. A>.'-Y />@-)?.( %+.>,%( =.,. . 45,6Q
(%+'. A.> %((/( % .-0>/( >/YC%( /'%@-/'. e ')W-(2. '% )+W.>,/BC%( @-% (%>2. ?)(-/1)Y/'/( %,
,D@-)+/( ')W%>%+0%(;
8., 3456 U A.((E?%1 A-&1)=/> '.=-,%+0.( %(0>-0->/'.( 52B>:2+7 >%=-A%>/> )+W.>,/BC%(
/0>/?U( '% ?E+=-1.( '% O)A%>0%H0.7 A>.\%0/> -,/ )+0%>W/=% )+0%>/0)?/ =., W.>,-1D>).( A/>/
/=%((. / (%>?)B.( >%,.0.( =.,. &-(=/( % =.,U>=). %1%0>f+)=.7 % )+=1-)> ),/*%+(7 ?E'%.(7 (.+(7
/+),/BC%( % .-0>/( /A1)=/BC%( )+0%>/0)?/( '%+0>. '% '.=-,%+0.( ?)(E?%)( +. &>.Z(%>;
!"#"C" %:<.D,:A5 65 %&'(
3456 W.) '%(%+?.1?)'/ .>)*)+/1,%+0% A.> 4), S%>+%>(T6%% +. 8FdX T 6/&.>/0c>).
F->.A%- '% PE()=/ '% G/>0E=-1/(; 9-/ A.A-1/>)'/'% =>%(=%- \-+0. =., / A.A-1/>)Y/B2. '/ $%&7
/0>/?U( '. E87F '5</:A; L%?)'. /. (->*),%+0. '% ?D>).( &>.Z(%>( @-% -0)1)Y/?/, 3456
A/>/ +/?%*/> +. ()(0%,/ '% )+W.>,/BC%( A>.A.>=).+/'. A%1/ $%&7 *>-A.( '% 0>/&/1O. W.>/,
W.>,/'.( =., / )+0%+B2. '% A/'>.+)Y/> %(A%=)W)=/BC%( A/>/ . 3456;
!T!g
! # $%& '%()*+
,-./ 0123 45+4678'9 %: !;;<3 =5) 9 >?):%)?9 @%?(A5 ?%45:%+'9'9 >%65 BC-D E !"#$%"$#
'"()"$$%)"( *+,- ./%0$ % (% F5?+57 7: >9'?A5 '9 B+F%?+%F1 ,-./ 012 %?9 7:9 6)+*79*%:
():>6%( G7% ')H)9 45:5 7: &?5I(%? '%@%?)9 %(F?7F7?9? 7:9 >J*)+93 :9( +A5 45:5 5( F8F765(3
>9?J*?9=5( % 6)(F9( '%@%?)9: 9>9?%4%? *?9=)49:%+F%1 K7?9+F% 5 '%(%+@56@):%+F5 '5 ,-./ L123
9 $%& %(F9@9 %: =?9+49 %M>9+(A5 % 5( %(=5?N5( '% >9'?5+)H9NA5 +A5 >7'%?9: 945:>9+O9? 9(
F%+'P+4)9( '5 :%?49'53 G7% %M)*)9: :9)5?%( ?%47?(5( '% 9>?%(%+F9NA5 *?J=)49 95 ,-./ 0121
Q ,-./ L12 949&57 +A5 (%+'5 9>?5@9'5 % 9+5( '%>5)(3 9>?5@57E(% 7:9 ?%45:%+'9NA5
4O9:9'9 ,-./ L10 %: !;;R3 G7% )+F?5'7H)9 ?%47?(5( '% 9>?%(%+F9NA5 *?J=)49 +5 ,-./1
B+=%6)H:%+F% 9 :9)5?)9 '5( ?%47?(5( *?J=)45( '5 ,-./ L10 =5?9: )+45?>5?9NS%( '%
%MF%+(S%( >?5>?)%FJ?)9( '9 1$#,0+2$ % 3)0%/,/4#3 4?)9'9( (%: 6%@9? %: 45+F9 9 =)65(5=)9 '5 ,-./
'% *9?9+F)? 9 45:>9F)&)6)'9'% '9 6)+*79*%: %: >69F9=5?:9( ')=%?%+F%(1 B(F5 949&57 9F?9(9+'5 5
'%(%+@56@):%+F5 '% =%??9:%+F9( '% '%(%+@56@):%+F5 %=)4)%+F%(3 >5)( %?9 ):>5((8@%6 @96)'9?
,-./ >9?9 >69F9=5?:9( G7% +A5 (7>5?F9@9: 4%?F5( ?%47?(5( *?J=)45( :9)( (5=)(F)49'5(1
,-./ =5) '%(%+@56@)'9 5?)*)+96:%+F% >9?9 G7% 56+756$% 8),2/,)#)9/ >7'%((% F%? 94%((5 T
)+=5?:9NA5 '9 $%&1 B(F5 )+467) UV( 45: :5+)F5?%( *?J=)45( '% ')@%?(9( ?%(567NS%(3 F%?:)+9)(
5?)%+F9'5( 9 49?94F%?3 F%6%=5+%( 4%6769?%(3 ')(>5()F)@5( *%?9'5?%( '% @5H3 %F41 ,-./ L10 F)+O9
%6%:%+F5( G7% >?%W7')49@9: %((9 :%F91 D)+96:%+F%3 '%>5)( '% :7)F9 ')(47((A53 9( %:>?%(9(
%+F?9?9: %: 7: 945?'5 % '%(%+@56@%?9: 5 ,-./ X123 G7% %(F%+'% 5 ,-./ 45: :9)(
?%47?(5( @)(9+'5 7: 94%((5 :9)( 7+)@%?(96 T )+=5?:9NA5 '9 $%&3 45:5 ?%47?(5( '%
94%(()&)6)'9'% T >%((59( 45: '%=)4)P+4)9(3 (7>5?F% 9 45+@%+NS%( )+F%?+94)5+9)( Y57F?9( 68+*79(3
57F?5( 96=9&%F5(Z3 (%>9?9NA5 '9 %(F?7F7?93 45+F%['5 % 9>?%(%+F9NA53 ?%47?(5( )+F%?9F)@5( '5 69'5
'5 46)%+F% % 5F):)H9NA5 %: F9&%69( % =5?:76J?)5(1
:;<;=; >*3? < $ @AA
\J?)5( %6%:%+F5( '5 ,-./ L10 =5?9: 45+()'%?9'5( 8$2%$0+8/, Y49+')'9F5( 9 (% F5?+9?%:
5&(56%F5(Z >%65 ,-./ X1 ]A5 F5'5( %6%:%+F5( G7% >%?:)F%: '%=)+)? 45?%(3 =5+F%(3
96)+O9:%+F53 ):9*%+( '% =7+'5 % 57F?9( 49?94F%?8(F)49( '9 9>?%(%+F9NA5 '9 >J*)+9 G7%
'%>%+'%: '9 >69F9=5?:9 5+'% 9 )+=5?:9NA5 ^ @)(796)H9'91 ,-./ +7+49 ?%96)H57 &%: 5
F?9&96O5 '% =5?:9F9NA5 *?J=)49 '% 7:9 >J*)+91 D5) 4?)9'9 )+)4)96:%+F% >9?9 9>%+9( '9? %(F?7F7?9
9 7: 45+F%['51 _7+49 >?%@)7 =5?:9( '% >5()4)5+9? ):9*%+( % F%MF5 '% =5?:9 9&(567F9 %: 7:9
>J*)+9 % 9( (567NS%( '%(%+@56@)'9( >%65( $%& '%()*+%?(3 >5? +A5 (%?%: (567NS%( >?%@)(F9( +9
%(>%4)=)49NA53 FP: 497(9'5 >?5&6%:9( '% 94%((5 %: @J?)5( ()F%( % ):>%')'5 5 94%((5 '%
')(>5()F)@5( :9)( 6):)F9'5( 45:5 9 B$C*D % B$CEF/"$ '% F%?%: 94%((5 F5F96 T $%&1 ` (567NA5
'5 ,-./ X12 =5) (%>9?9? 9 $,#%6#6%+ '9 +2%$,$"#+GH/3 '%)M9+'5 G7% 9 6)+*79*%: ,-./ @56F9((%
T( (79( 5?)*%+( Y+5( F%:>5( '5 ,-./ 0Z >9?9 '%=)+)? 9>%+9( 9 =7+NA5 '5 F%MF5 :9?49'5 Y5 56$
I F8F7653 >9?J*?9=53 %F41Z a:9 57F?9 6)+*79*%: =5) 4?)9'9 >9?9 (% >?%547>9? 45: 9 9>9?P+4)9
Y0/J/ 5 F8F765 % >9?J*?9=5 (%?A5 %M)&)'5( +9 F%69Z1 ` >?)+4)>96 6)+*79*%: 7(9'9 >9?9 %((% =): ^
V]] E @+,0+8)"( A#K7$ AF$$#,3 G7% >%?:)F% 9 4?)9NA5 '% 4/7F+, 8$ $,#)7/ 9>6)4J@%)( 9 @J?)9( >J*)+9( '%
7: ()F%1 ]% 7: ')(>5()F)@5 6):)F9'5 +A5 45+(%*7% %M)&)? 5( %(F)65( '%=)+)'5( +5 V]]3 %6% >%65
!E!L
1 - \eb design
menos consegue entender a estrutura do texto e imagens de orma que mesmo usuarios com
menos recursos podem ter acesso a inormaao.
Lscreer l1ML nao dicil, apenas toma tempo, por isso usar um editor apropriado
pode tornar o processo de criaao de paginas mais produtio. Um arquio de texto simples
com descritores l1ML, quando carregado em um browser, tem os descritores interpretados e
as suas inormaoes ormatadas na tela de acordo com a estrutura preista pelos marcadores e
uma olha de estilos, geralmente deinida pelo prprio browser. A olha de estilos pode ser
deinida pelo programador usando uma linguagem como CSS e inculada a pagina para mudar
sua aparncia.
!"#"#" %&' ( %)'
XML - (%*(+,-./( &01234 '0+5305( e XSL - (%*(+,-./( )*6/( '0+5305( sao as noas criaoes
do \3C - 781/9 7-9( 7(. :8+,81*-3; ,consrcio das empresas que desenolem os padroes
para a \\\,. Nao pretendem substituir o l1ML mas, em ez disso, oerecer meios de
estender e ampliar as possibilidades da \eb. XML uma especiicaao ou ;(*0</-+5305(; que
deine uma sintaxe que pode ser usada para criar noas linguagens semelhantes a l1ML. A
prpria linguagem l1ML pode ser ista como um tipo especial de XML. Com XML oc
pode criar sua prpria linguagem de marcaao MinhaML`, deinir seus prprios marcadores e
esquemas para aplicaoes especicas, por exemplo, poderia conter algo como:
<!"#$%& id="xyz"><'&(&>26/12/1999</'&(&>...</!"#$%&> ...
Depois oc pode usar CSS ou XSL para deinir a aparncia dos seus marcadores em um
browser XML. Para que um browser XML seja capaz de compreender a linguagem que oc
criou, preciso deinir um 9-=-8+>1-8 e uma 510;>*-=0 ,usando as regras da especiicaao XML,
para ela. A gramatica para a analise da sua linguagem dee icar armazenada em um documento
chamado D1D - ?8=3;(+* @64( ?(A-+-*-8+. Carregando o D1D, o browser XML aprendera a
noa linguagem e sera capaz de ormatar a inormaao que oc estruturou com seus
marcadores, e apresentar as inormaoes na tela de acordo com as regras de estilo deinidas no
CSS ou em um XSL criado por oc.
As tecnologias XML e XSL nao serao abordadas neste curso mas oc pode obter
maiores inormaoes sobre as duas tecnologias, alm de ter acesso a guias de reerncia e
tutoriais atras do site do \orld \ide \eb Consortium ,\3C, em
http:,,www.w3.org,XML,.
!"B" C(110;(+*0, 9( 9(,(+D8/D-;(+*8 E@&'
Podemos criar uma pagina \eb simplesmente usando um editor de textos ,como o
bloco de notas do \indows, e um browser para isualizaao. Lmbora esta seja uma boa orma
de aprender, pouco produtia para desenoler sites complexos que usam tabelas, rames e
design soisticado. Alguns editores sao bastante isuais e mostram todo o processo de criaao
1-14
! # $%& '%()*+
', ()-%. /01%2 &3(40 % (3&(-)-3)56, %2 -,', , ()-%. 3-)7)102 !"#$%&!"'. 8%92)-%2 %')56, ')9%-0 ',
4:')*, % /01%2 0 89%;)(6, (%2 0 +%4%(()'0'% '% 32 &9,<(%9= > , 40(, ', ()*+,',-! /+,0!1&2".
', (&*+,#"3)& 4+"&#5"&6"+. ', 7,+"% 5"8(&'!"+. % ', 93,8" :,;)6"< ?3-9,(. ()287%(2%+-%
(%9;%2 8090 %4,+,2)109 &0-)'0( '% -%470( % %;)-09 %99,( '% ()+-0@% +0 A,90 '% %(49%;%9 ,(
'%(49)-,9%( BCDE= F')-,9%( '% 4:')*, BCDE 4,2, , =,! 4,2. =,! ("!&%. =,#">)!". ?&+"?,0"'.
%-4= 9%07)102 %(-0 /3+56,= G0( (%5H%( 0 (%*3)9. ')(43-)9%2,( 32 8,34, '% 40'0 32=
@<A<@< B3)!,+"' 2+C-)*,' D5E>F5E:G
?( %')-,9%( 20)( /I4%)( '% 3(09. J3% ')(8%+(02 -,-072%+-% , 3(, '% BCDE (6, ,(
%')-,9%( $KLM$KN= F((% +,2% %(J3)()-, O 320 ()*70 &0(-0+-% 3(0'0 +,( 89)2%)9,( -%28,( '0
%')-,9056, %7%-9P+)40 8090 40904-%9)109 89,*9020( J3% 9%89%(%+-0;02 +0 -%70 ', 4,283-0',9
320 8I*)+0 '0 /,920 4,2, (%9)0 )289%((0= G0J3%7% -%28,. %90 4,232 0 %@)(-Q+4)0 '%
89,4%((0',9%( '% -%@-, ,3 /,920-0',9%( '% -%@-, J3% 3(0;02 4,20+',( 8090 '%(49%;%9 4,2,
, -%@-, )9)0 0809%4%9 +0 A,90 '0 )289%((6,= R090 (% -%9 320 )'O)0 ', 9%(37-0', /)+07. %90
+%4%((I9), ,3 )289)2)9 ,3 9,'09 32 89,*9020 0 809-% J3% /)1%((% 32 $+"6)"H '0 8I*)+0 49)0'0=
S,2 , 0';%+-, '0 %')-,9056, %7%-9P+)40. (39*)902 89,*9020( 4,2, , 9%3I' 1&2"(&J"+ +,
(&*)0!,'K % L"0!I+& 1I8%)'K"+ +, RS J3% 2,(-90;02 +0 -%70 0 89:89)0 8I*)+0. % +6, 32 2,+-%
'% 4:')*,( '% 4,+-9,7% 2)(-390',( 0, -%@-,= $KLM$KN J3%9 ')1%9 5K&! E,I >"" F' 5K&! E,I
:"!. ,3. T, J3% ;,4Q ;Q O , J3% ;,4Q ,&-O2U. (3*%9)+', J3% , J3% , 03-,9 ;)(307)10 +0 -%70 O
320 9%89%(%+-056, &0(-0+-% /)%7 ', 9%(37-0', /)+07 J3% ,&-%9I +0 )289%((,90=
$KLM$KN +0 $%& O 2%+,( /)%7 J3% +0 )289%((6,= R090 -90&07A,( )289%((,(. -%2V(%
320 9%89%(%+-056, '0 8I*)+0 %2 320 '%-%92)+0'0 )289%((,90. 4,2 '%-%92)+0'0( /,+-%(.
4,9%(. %-4= G0 $%& O )28,((W;%7 (0&%9 (% 0 8%((,0 J3% ;0) ;%9 0 (30 8I*)+0 -%2 0( 2%(20(
/,+-%(. 4,9%(. ;%9(H%( '% &9,<(%9 J3% 0J3%70 ,+'% ;,4Q /%1 , (%3 -%(-% T$KLM$KNU=
R,9-0+-,. ,( %')-,9%( *9I/)4,( '% 8I*)+0( $%& (6, $KLML$MN ,3 $A0- K,3 L%% )( >,#"!)#"'
$A0- K,3 N%-=
X 237-)87)4)'0'% '% &9,<(%9( % 870-0/,920( J3% %@)(-%2 +0 M+-%9+%- %@)*% ', $%&
'%()*+%9 20)( J3% (0&%9 /01%9 8I*)+0( J3% /)402 &,0( %2 320 Y+)40 870-0/,920 % &9,<(%9= >
+%4%((I9), -%(-09 , ()-% %2 ()(-%20( ')/%9%+-%(. 7%;0+', %2 4,+-0 , 8Y&7)4,V07;, % 23)-0( ;%1%(
O +%4%((I9), 9%4,99%9 Z 4,')/)4056, BCDE 8090 9%(,7;%9 07*32 89,&7%20 +6, 89%;)(-, 8%7,(
%')-,9%(=
@<A<M< B3)!,+"' 3" !"N!,
R,'%V(% 3(09 J307J3%9 %')-,9 '% -%@-, J3% -%+A0 0 40804)'0'% '% (07;09 32 09J3);, '%
-%@-, T839,U. %2 /,920-, ML?VE0-)+V! ,3 XLSMM 8090 49)09 8I*)+0( BCDE= L% , (%3 %')-,9 (:
4,+(%*3)9 (07;09 XLSMM [V&)-. (%9I 20)( ')/W4)7 , 3(, '% 04%+-,( \;,4Q -%9I J3% 3(09 4:')*,(
%(8%4)0)(]= X7*3+( %@%287,( '% %')-,9%( J3% 8,'%2 (%9 3(0',( (6, , ?%,*, 3" O,!&' ',
$)+',<(. , 5,+31&3 \'%('% J3% (% (07;% 0 8I*)+0 4,2, T-%@-,U]. , B3)!1&3. , 5)0B3)! %
,3-9,( %')-,9%( (A09%<09%^/9%%<09% 8,83709%( ')(8,+W;%)( +0 M+-%9+%-=
!V!_
1 - \eb design
!"#"$" &'()*+,- ', ./01
Lditores de l1ML sao como os editores de texto mas possuem uma srie de atalhos
para agilizar a entrada de cdigo l1ML. Os atalhos tambm eitam que se cometam erros de
sintaxe. Os editores l1ML mais soisticados possuem um sistema de 2+,3(,4 embutido,
permitem a deiniao de gabaritos a serem aplicados a um conjunto de paginas, suportam
macros, busca e substituiao em diersos arquios e iltros diersos.
A maioria dos editores l1ML estao disponeis na Internet pelo sistema de 5+,,46+, ou
-76+,46+,. O site das duas acas, ou 1UCO\S ,http:,,www.tucows.com, possui uma lista
crescente destes programas. Voc tambm encontra editores em http:,,www.shareware.com.
Lntre os comerciais, um dos mais populares o 8996(+, .*:,;(),.
!"#"<" =+*4-,+- , -,+3('*+,-
Qualquer web designer que queira desenoler paginas seriamente hoje em dia dee ter
as ersoes dos browsers mais populares entre o pblico. Nao basta testar somente na ltima
ersao. Geralmente a grande massa de usuarios que naega 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 experincia agradael que o ara oltar muitas e muitas ezes, ou como um
pesadelo horrel, que ele jamais esquecera. L trabalho do \eb designer resoler ao maximo
esses problemas de compatibilidade de orma a garantir que pelo menos a inormaao essencial
seja acessel ,isto inclui a identidade isual e a naegaao do site,. L essencial testar as paginas
em browsers e plataormas dierentes antes de publica-las.
Os browsers mais populares hoje continuam sendo o >,)-?62, @*::AB(?6)*+ e 0(?+*-*5)
CB),+B,) &D29*+,+. As plataormas de naegaao 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 2EF9(?*G693*
ormado em grande parte por usuarios de maquinas Sun essencial testar suas paginas nessas
plataormas tambm.
la ainda uma outra questao. Mesmo que oc saiba que 99 do seu pblico usa
browsers Netscape ou Microsot, importante saber as 3,+-H,- que eles usam. A grande maioria
dos usuarios BI* 2*--A( as ltimas ersoes dos seus browsers ,os proedores continuam
distribuindo ersoes antigas,. la muitos recursos noos nas noas ersoes do @*::AB(?6)*+ e
do CB),+B,) &D29*+,+ que nao sao suportados nas ersoes anteriores. Se oc usa-los sem prestar
atenao ao eeito que causam em ersoes antigas, uma grande parte do pblico que isitar suas
paginas poderao nunca mais oltar.
1-16
! # $%& '%()*+
!,!-
!"#"#" %&' ()* +,'*-.*' /0123
.% / 01((23%4 567%8 91'1 :; ()9%< =1; 45'6,74 )+9%869)31(< );6*%+(< 6+);6>?%(< @636< %9=A
(%; %(=8%3%8 :;6 4)+B6 (%C:%8 '% DEFG< 018 C:% 0%8'%8 9%;01 608%+'%+'1 ;6)( B)%81*4)51(
C:% +H1 3H1 (%83)8 0686 +6'6I
J 8%(01(96 K 0%8*:+96 '1 068L*8651 6+9%8)18 '%0%+'% '1 C:% 31=M 08%9%+'% 567%8 % '1
=1+9814% C:% 31=M 08%9%+'% 9%8 (1&8% 6 (:6 1&86A .% 1 (%: 1&N%9)31 / 567%8 0L*)+6( 08L9)=6( %
8L0)'6(< =1;1 :;6 8&9* ,+:* 0%((164 1: 0686 :; ()(9%;6 O+986+%9 ();04%(< 01'% 8%64)768 91'1 1
986&64B1 (%; (%C:%8 91;68 =1+B%=);%+91 '1 DEFG< :(6+'1 6( 5%886;%+96( C:% %P)(9%; 018
62A F6( (% 31=M '%(%N6 567%8 =1)(6( ;6)( (15)(9)=6'6(< =1;1 9%8 ;6)( =1+9814% (1&8% 1 .*46:- '6
(:6 0L*)+6< =8)68 0L*)+6( C:% )+9%86N6; =1; 1:981( 081*86;6(< =1;1 (%83)'18%( '% &6+=1( '%
'6'1(< % :(68 8%=:8(1( +131( =1;1 ;<-+965 /012< =+>+?5'6,7< =6+6)( % 514B6( '% %(9)41< 31=M
081363%4;%+9% +H1 36) %(=6068 '% 9%8 C:% %')968 (:6 0L*)+6 0%41 ;%+1( :;6 1: ':6( 3%7%(
0686 567%8 64*:+( 6N:(9%(< 1: 0686 6+64)(68 1 =Q')*1 0686 01'%8 =8)68 819)+6( @636.=8)09<
RDEFG< %9=A
J +192=)6 &16 / C:% DEFG / 5L=)4A SH1 / 4)+*:6*%; '% 081*86;6>H1< +H1 9%; 8%=:8(H1<
01+9%)81( 1: +6'6 '1 9)01A T (1;%+9% ;68=6>H1 '% 9%P91A T 98)3)64 0686 6C:%4%( C:% :(6;
=1;0:96'18%( '%('% 1 9%;01 '1 F.,RU. % $18'.968 # 081*86;6( &%; ;6)( =1;04%P1( C:%
1 DEFGA



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

()*+ ),-./ +01,),2*+ + ,)*13*31+ , )42*+5, 6+ 74283+8,9 $%&': /34+50+6, 1)5784 2)'9&)9+ ;
39+ 74283+8,9 6,<7+1+*4=+ >3, *,9 + ?42+746+6, 6, 6+1 ,)*13*31+ + 39 +1>34=/ 6, *,5*/@ 46,2*4#
?4<+26/ + ?32-./ 6, )3+) ),-A,) B*C*37/@ 0+1D81+?/@ ,*<:E , =42<37+1 +) 0D842+) ,2*1, )4 +*1+=;) 6,
F40,1*,5*/:
G./ ; 0/))C=,7 01/81+9+1 ,9 $%&' 0/4) + 74283+8,9 2./ 0/))34 1,<31)/) +*1+=;) 6/)
>3+4) ), 0/))+ </2)*1341 01/<,649,2*/):
!"#"#" :;+*+',-. + (+.<5=,-5+. >,)9.?
H +1>34=/ 3)+6/ 0+1+ </2)*1341 39+ 0D842+ I,J ; *,5*/ )4907,): &,)9/ >3, + 0D842+
=4)3+74K+6+ 2/ J1/L),1 9/)*1, 49+8,2)@ +007,*)@ 0738#42) B</9/ M7+)FE , /3*1/) 1,<31)/)@ 0/1
*1D) 6, *36/ ,54)*, 39+ 0D842+ 6, *,5*/ , =D14/) /3*1/) +1>34=/) ),0+1+6/): N *,5*/@ 9+) 2./ ;
.@ *,5*/: N *,5*/ *)5<)(- </9 $%&': $%&' 6,?42, ,-() + ,)*13*31+ 6, 39+ 0D842+ 0+1+ >3,
39 J1/L),1 0/))+ ?/19+*D#7+ , 01/63K41 + +01,),2*+-./ 6,),O+6+: $%&' *+9J;9 =*4-5,) +)
49+8,2)@ 01/81+9+)@ )/2) , =C6,/) >3, 39+ 0D842+ ,54J, ,9 ),3 42*,14/1: &+) </9/ $%&' ;
*,5*/ )4907,)@ 0/6, ),1 ,64*+6+ ,9 >3+7>3,1 ,64*/1 6, *,5*/ B</9/ 0/1 ,5,907/@ / A;-<- (+ B-C
,). 6/ D='(-E.E:
P/ 7,1 39 6/<39,2*/ $%&'@ 39 J1/L),1 *,2*+ 42*,101,*+1 */6+) +) ),>QR2<4+) 6, <+#
1+<*,1,) >3, ?4<+9 ,2*1, /) )C9J/7/) STS , SUS: H J1/L),1 ,2*,26, >3, F&);F&+5 <-=.) >3, ,)*4#
=,1 ,2*1, ,)),) <+1+<*,1,) ; 39 (+.<5=,-5 /012 B,)9E , 2./ 6,=, ),1 9/)*1+6/ 2+ *,7+: V, / 6,)#
<14*/1 ?/1 6,)</2F,<46/ ,7, )4907,)9,2*, / =9'-5) B, 2./ 9/)*1+ / </2*,W6/ 2+ *,7+E 9+) ),
1,+79,2*, ?/1 39 +;+*+',- /012 B6,?4246/ 2+ ,)0,<4?4<+-./ )30/1*+6+ 0,7/ J1/L),1E@ ,7, 3)+1D
+) 42?/19+-A,) </2*46+) ,2*1, /) )C9J/7/) ,)*13*31+1 + 0D842+@ ?/19+*+26/#+ 6, +</16/ </9
+7839+ 1,81+ 6, ,)*47/ 01,=4+9,2*, 6,?4246+:
%/6+ + ?/19+*+-./ 6, 39 +1>34=/ $%&' ; ?,4*+ +6<;&.=G)*+',+ +*1+=;) 6/) 6,)<14*/1,): H
J1/L),1 )+J, >3, / +1>34=/ </2*;9 <X648/ $%&' +*1+=;) 6, )3+ ,5*,2)./ B/3 *40/ &Y&(
,2=4+6/ 0,7/ ),1=46/1E:
V, 39 +1>34=/ 6, *,5*/ </9 ,5*,2)./ $%&' 9+) ),9 6,)<14*/1,) ?/1 <+11,8+6/@ 2/
J1/L),1@ */6+ + )3+ 42?/19+-./ +0+1,<,1D ,9 39 W24</ 0+1D81+?/@ ),9 6,)*+>3,)@ ),9 ?/19+#
*+-./ +7839+: Z,O+ +) ?4831+) +J+45/: (7+) 473)*1+9 39 9,)9/ *,5*/ 6, 39 6/<39,2*/ $%&'
6484*+6/ 2/ A;-<- (+ B-,). 6/ I426/L) , 746/) +*1+=;) 6/ H',+5'+, :64;-5+5: G+ 0149,41+ ?4831+@
2./ FD 6,)<14*/1,) $%&' ,@ +0,)+1 6/) ,)0+-/)@ *+J37+-A,) , 2/=+)#742F+) ,54)*,2*, 2/ +1>34#
=/ 6, *,5*/ =4)3+74K+6/ 2/ ,64*/1 6, *,5*/)@ / J1/L),1 482/1+ */6+ + ?/19+*+-./: [D 2+ ),8326+
?4831+ 6,)<14*/1,) $%&' ?/1+9 42<73C6/) , / J1/L),1 ?/4 <+0+K 6, ?/19+*+1 + 0D842+ 6, 39+
9+2,41+ ,)*13*31+6+:

!#!
! # $%&'
()*+,-. /0 1021.
34.5 0210678.
9:15;< 4.6106/.
5=)4=>8. $%&'
=. 70) -,7+=;,?=/.
6. @).A70) 0 6.
0/,1.) B;.4. /0
C.1=7 3D,6/.A7<9
()*+,-. /0 1021.
34.5 0210678.
9:15;< 705 5=)4=#
>8. $%&' =. 70)
-,7+=;,?=/. 6.
@).A70) 0 6.
0/,1.) B;.4. /0
C.1=7 3D,6/.A7<9
( 5=,.),= /.7 !"!#!$%&' )*+, E.77+, +5 -!'./0%&/ 0$0.01" 0 +5 -!'./0%&/ 20$1"F 40)4=6/. .
1021. *+0 G 5=)4=/. E.) 0;079 ( 7,61=20 @H7,4= G
<Elemento> Texto marcado por Elemento </Elemento>
I 1021. 5=)4=/. E=77= = 10) +5= 23$45&F /010)5,6=/= E0;. J;05061.9 C05 705E)0 ,71.
7,K6,L,4= *+0 . 1021. 5=)4=/. 10)H 7+= =E=)M64,= =;10)=/= *+=6/. = EHK,6= $%&' =E=)040) 6.
@).A70)9 $H @).A70)7 .),061=/.7 = 4=)=410)0 *+0 68. 78. 4=E=?07 /0 02,@,) 1=5=6:.7 /0 L.610F
E.) 0205E;.9 I+1).7 E./05 68. 10) +5= L.)5= =77.4,=/= = +5 0;05061.9 C0710 4=7.F . =+1.)
/= EHK,6= E./0)H /0L,6,) = L.)5= =1)=-G7 /0 +5= L.;:= /0 071,;.7 +7=6/. NOOF 4=7. . @).A70) =
7+E.)109 I7 0;05061.7 1=5@G5 E./05 ,6L;+064,=) . 4.5E.)1=5061. /0 504=6,75.7 /0 @+74=F
*+0 =1),@+05 5=,.) ,5E.)1P64,= .+ L,;1)=5 /=/.7 /0 =4.)/. 4.5 = 7+= L+6>8. /010)5,6=/=
E0;.7 0;05061.7 $%&'9 I 1021. 5=)4=/. 0 . 0;05061. $%&' 1=5@G5 =77+505 . E=E0; /0
!#Q
2 - l1ML
!"#$%! '"(%)'%! utilizael por linguagens embutidas na pagina como CSS e JaaScript. Lssas lin-
guagens interagem com o l1ML atras de um modelo de objetos que relaciona as estruturas
l1ML com comportamentos interatios ,em JaaScript e Dl1ML, e orma graica ,CSS,.
Veja alguns exemplos de texto rotulado com descritores l1ML:
<b> Texto em negrito </b>
<h2> Subttulo </h2>
Obsere que o descritor inal praticamente idntico ao descritor inicial. A nica die-
rena que este ltimo precedido por uma barra ,",",. Nao az dierena utilizar letras mai-
sculas ou minsculas para os descritores l1ML.
Os blocos de texto marcados pelo l1ML podem conter outros blocos. Sempre que isto
ocorrer, o bloco mais interno deera 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 tm
regras que deinem quais os elementos permitidos.
Lxistem elementos que nao precisam ter descritores de echamento. O paragrao, por
exemplo, marcado por P e ,p pode omitir o descritor inal. Isto permitido porque nao
pode haer um paragrao dentro de outro, portanto, se o browser encontra um p pouco
depois de outro p ele automaticamente coloca um ,p antes.
<p>Primeiro pargrafo. <p>Incio de outro pargrafo.</p>
linalmente, ha tambm 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 aparea logo aps o descritor inicial,.
<p>Esta uma frase<br>que ocupa duas linhas.
No exemplo acima br ,quebra de linha, marca a posiao onde a linha dee ser que-
brada ,nao contm ou marca texto algum,.
*+,+*+ -%)."/%!(
Alguns elementos l1ML podem ter um ou mais '%)."/%!(, opcionais ou nao, que modii-
cam alguma propriedade do texto marcado ou acrescentam alguma inormaao necessaria.
Geralmente os atributos sao pares do tipo:
propriedade="valor"
2-4
2 - l1ML
Quando presentes, os atributos aparecem apenas no descritor inicial separados por espa-
os, logo aps o nome do elemento:
<h1 align="center">Ttulo centralizado</h1>
Um descritor pode ter arios atributos. A !"#$% em que aparecem &'! )*+ #,)$"$&-* desde
que apaream no #$./",0!" ,&,/,*1 e estejam separados dos outros atributos e do nome do elemen-
to por $.2*-!.. Se um atributo or escrito incorretamente ou se o browser nao o reconhecer, ele
sera ignorado. Diersos 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 contier apenas letras ,A-Z, a-z,,
nmeros, ponto ,.,, dois pontos ,:,, hen ,-, e sublinhado ,_,. Se o alor atribudo a proprie-
dade tier espaos, preciso coloca-lo entre aspas ou apstroes. Nao pode haer espao entre
a propriedade e o ~` nem entre o ~` e o alor:
propriedade="Valor com espaos"
propriedade = "Sintaxe incorreta"
O segundo exemplo acima sera interpretado incorretamente pelo browser como tendo
trs atributos e nao um ,nao pode haer espaos!,.
Atributos geralmente sao opcionais. Lm alguns casos sao obrigatrios, como os atribu-
tos HREF e SRC em nculos de hipertexto e imagens, respectiamente. Ambos inormam 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">
345464 7*"*/0$"$. #$ $./*2$
Os caracteres "" e "", por deinirem o incio e inal dos descritores, nao podem ser
impressos na tela do browser. Quando necessario produzi-los, dee-se utilizar uma .$89:&/,*
#$ $./*2$. Lsta seqncia iniciada por um "&" seguido de uma abreiaao e um ponto-e-
rgula, que indica o inal da seqncia. Como o "&" tambm caractere especial, ha tambm
uma seqncia para produzi-lo. As principais seqncias de escape, necessarias para produzir
"", "", "&" e aspas ,quando necessario, sao:

7*"*/0$"$ ;$89:&/,* #$ <./*2$
< &lt;
> &gt;
& &amp;
" &quot;
2-5
2 - l1ML

Por exemplo, para produzir as seguintes linhas no browser:
144 < 25 + x < 36 + y
Fulano, Sicrano & Cia.
preciso digitar no editor de textos ,cdigo l1ML,:
144 !"#$ 25 + x !"#$ 36 + y
Fulano, Sicrano !%&'$ Cia.
As seqncias de escape tambm sao usadas para produzir caracteres que nao sao encon-
trados no teclado, como letras acentuadas, smbolos de !"#$%&'(), etc. Por exemplo, para produ-
zir, no browser, as palaras:
Plantao
magebend
hndbfger
enciclopdia

sueo
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 possel usar tambm cdigos numricos, porm eles sao dependentes do alabeto uti-
lizado. Consulte a documentaao l1ML para uma lista completa de todos os cdigos.
Os editores mais soisticados, como por exemplo o *"+,-&),, acilitam a entrada de ca-
racteres especiais e geram automaticamente as seqncias de escape. Se oc esta usando um
editor comum, como o ./"!" 1, 2")34, dee ter o cuidado de digitar corretamente as seqncias.
Alguns browsers simplesmente ignoram seqncias que nao conhecem, outros engolem linhas
e palaras. Lm qualquer um dos casos ha perda de inormaao. Nunca necessario digitar se-
qncias de escape se:
oc tem os caracteres no seu teclado


eles azem parte do conjunto de caracteres ISO-Latin-1 ,alabeto 1,536/) do l1ML,
alabeto deault da pagina nao oi alterado atras de um descritor ML1A ou de
um cabealho l11P.
1odos os browsers ha mais de 4 anos entendem acentos e cedilha sem que seja necessa-
rio digitar os cdigos.
L indierente usar letras maisculas ou minsculas para o nome do descritor ou seus a-
tributos. 1anto az usar BOD\, body, Body ou bOd\, a lRLl~"a.html" ou
2-6
2 - l1ML
A hre~"a.html". Dee-se tomar cuidado, porm, 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 JaaScript, o ormato maisculo ou minsculo ()* dierena e dee ser res-
peitado.
+,-,., 0"1%#$234"5
Llementos desconhecidos pelo l1ML sao ignorados quando colocados entre sinais de
e . Se oc deseja azer isto intencionalmente para acrescentar comentarios no cdigo ,que
nao aparecerao na pagina,, dee usar os comentarios l1ML, identiicados entre <!--e -->.
Qualquer texto ou cdigo entre esses smbolos sera ignorado na ormataao da pagina pelo
browser.
+,-,6, 75$38$83) '" '"!81%#$"
A maioria dos elementos l1ML segue uma estrutura hierarquica. la uma estrutura ba-
sica ,mnima, para uma pagina l1ML, construda de acordo com a especiicaao padrao, que
dee ser respeitada para garantir uma compatibilidade com o maior nmero de browsers pos-
sel. Lsta estrutura esta mostrada na igura abaixo:

<!DOCTYPE HTML Public "-//IETF//DTD HTML 4.0//EN" -->
<HTML>
<HEAD>
<TITLE> Descrio do documento </TITLE>
Aqui ficam blocos de controle, folha de estilo, funes de
scripts, informaes de indexao, atributos que afetam todo
o documento, etc.
</HEAD>
<BODY>
Toda a informao visvel da pgina vem aqui.
</BODY>
</HTML>

A primeira linha: !DOC1\PL l1ML Public "-,,IL1l,,D1D l1ML 4.0,,LN" --
um '%5!34$"3 9:;< que inorma ao browser que ele dee interpretar o documento de acordo
com a deiniao do l1ML ersao 4.0, se possel. l1ML uma linguagem deriada e comple-
tamente especiicada a partir da linguagem SGML - 9$)#')3' :%#%3)=4*%' ;)3>8? <)#@8)@%. Voc
nao precisa saber SGML para usar l1ML, basta recortar e colar a linha acima que sere para
orientar o browser e permitir a alidaao do cdigo de sua pagina.
O elemento l1ML...,l1ML marca o incio e o inal do '"!81%#$" AB;<. Dee
conter duas sub-estruturas distintas: o !)C%D)=E", delimitado por lLAD e ,lLAD, e o
!"3?" '" '"!81%#$", entre os descritores BOD\ e ,BOD\.
2-
! # $%&'
!"#"$" &'()(*+,- ., /&01
( )*+,+ -+ ,.)/0.*1+2 3.4,.-+ 5+4 6$789: / 6;$789: 5+-/ ,+<=/4 ><?+43.0@/A
-,23( + ,+<=/B-+ -+ -+,C3/<=+ C=>*>D.-. 5.4. ?><A -/ ><-/E.0F+ / +4G.<>D.0F+H IF+ ,+<=J3
><?+43.0F+ KC/ A/4L /E>)>-. <. 5LG><.H
4546&
6%M%'7: J + B<>,+ /*/3/<=+ +)4>G.=N4>+ -+ )*+,+ -+ ,.)/0.*1+H 9/O/ ,+<=/4 + =P=C*+
-+ -+,C3/<=+ KC/ .5.4/,/ ?+4. -. 5LG><.2 <. ).44. -/ =P=C*+ -+ )4+QA/4H R + KC/ .5.4/,/
=.3)J3 <+A 7,+'8-+- / 2,,9):39-H ( =P=C*+ -/O/ ,+<=/4 ><?+43.0@/A KC/ -/A,4/O.3 + -+,C3/<#
=+H
<!"!#$>HTML e CSS: Introduo</!"!#$>
;&40
6&7%8: J CA.-+ 5.4. ><,*C>4 3/=.#><?+43.0F+ ,+3+ 5.*.O4.A#,1.O/2 -/A,4>0@/A2 /=,H
KC/ 5+-/3 A/4 CA.-.A 5+4 3/,.<>A3+A -/ )CA,.2 A+?=Q.4/A -/ 5/AKC>A. / ,.=.*+G.0F+H 8 ><#
?+43.0F+ .->,>+<.* -/O/ O>4 <+A .=4>)C=+A I8&7 S-/A,4/O/ + =>5+ -/ 3/=.#><?+43.0F+2 5+4
/E/35*+ T/UQ+4-AV / W(I%7I% S-/A,4/O/ + ,+<=/B-+ -. 3/=.#><?+43.0F+2 5+4 /E/35*+2
C3. *>A=. -/ 5.*.O4.A#,1.O/ A/5.4.-.A 5+4 OP4GC*.VH 6&7%8: =.3)J3 5+-/ A/4 CA.-+ 5.4.
.->,>+<.4 +C 4/-/?><>4 <:2(=:'7,- /44>H MA=+ J ?/>=+ .=4.OJA -+ .=4>)C=+ $%%X#7YZM[H I/A=/
,.A+2 + W(I%7I% -/O/ ,+<=/4 + ,+<=/B-+ -+ ,.)/0.*1+H
<%$!& HTTP-EQUIV="Set-Cookie" CONTENT="pag=12">
<%$!& NAME="Keywords" CONTENT="html, css, folhas de estilo, estilo">
<%$!& NAME="Description" CONTENT="Esta pgina explica os fundamentos
bsicos 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">
65?@
6'MIT: J CA.-+ 5.4. O><,C*.4 C3. 5LG><. . +C=4+ 4/,C4A+H I. 3.>+4>. -+A ,.A+A2 +
OP<,C*+ J A>3)N*>,+ / <F+ =/3 +C=4. ?><.*>-.-/ . <F+ A/4 ?.,>*>=.4 . ><-/E.0F+ / +4G.<>D.0F+ -+
A>=/ 5+4 ?/44.3/<=.A -/ O.*>-.0F+ / )CA,.H [P<,C*+A . ?+*1.A -/ /A=>*+ ><,+45+4.3 + .4KC>O+ KC/
J ><=/454/=.-+ 5/*+ )4+QA/4 .<=/A -/ ?+43.=.4 . 5LG><.HH
<#"'( REL="StyleSheet" HREF="../estilos/default.css">
!#\
2 - l1ML
!"#$
BASL altera os nculos de origem e destino da janela, ou seja, a parte absoluta da
URL das imagens e nculos, especiicados com URLs relatias, 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 diretrio 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
responsael por receber o resultado dos nculos. O autor tambm pode, com BASL, azer
com que links abram em outra janela, em noas 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 sero procurados em http://www.a.com/dados/-->
<!"#$ TARGET="lateral2"> <!- links abriro na janela lateral2 -->
,-.-/- $0*)*123+ 4* !567
O bloco marcado por BOD\ e ,BOD\ contm a parte do documento onde sera
colocada a inormaao que eetiamente sera mostrada e ormatada na tela pelo browser. 1o-
dos os elementos das seoes seguintes tratam da ormataao do texto ,ou imagens, da pagina e
deem, portanto, estar presentes no bloco BOD\.
Llementos l1ML podem ser de arios tipos e tm regras especicas sobre o que podem
conter e onde podem ser usados. Quanto a estrutura que assumem na pagina, podem ser clas-
siicados da seguinte orma:
Llementos de 80393 ,contm texto ou agrupam outros elementos de bloco,





Llementos :10:1* ,em linha - usados dentro do texto,
Llementos de 0:+2( ,usados para construir listas,
Llementos de 2(8*0( ,usados para construir tabelas,
Llementos de &3');0<':3 ,usados para construir ormularios,
Llementos para embutir 38=*23+ ,usados para incluir imagens, applets, deos, etc.,
Lntre os elementos :10:1* estao os nculos ,0:1>+, de hipertexto, que permitem marcar
texto que serira de ligaao a outra pagina ou recurso na Internet.
O objetio das seoes seguintes apresentar uma introduao basica aos principais ele-
mentos l1ML. Nao uma introduao exaustia. Consulte as reerncias e documentaao oi-
cial para uma abordagem completa de cada elemento l1ML.
2-9
2 - l1ML
!"!" $%&'(&%)*+ , -.*/*+ 0, 1,21*
3.*/*+ sao elementos que podem ocorrer dentro de BOD\. Nao permitido existir
texto diretamente abaixo de BOD\. O texto deera 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 45.45, ,,6 .457% - elementos que nao
sao blocos e podem ser usados dentro de paragraos para ormatar texto, marcar posioes ou
incluir imagens,. Alguns admitem blocos e texto ,1D, LI, etc.,.
!"!"8" $%&'(&%)*+ 9$:
O descritor P abre um paragrao em l1ML. O descritor ,P o echa. 1udo o que
esta entre P e ,P tratado como um bloco. Se esse nosso paragrao tier atributos, eles
aetarao todo o bloco.
Se seu arquio l1ML contier:
<P>Um pargrafo</P> <P>Outro pargrafo</P>
um browser como o Netscape ou o Internet Lxplorer mostrara na tela algo parecido com:

Um paragrao

Outro paragrao

P pode ter atributos. Um deles o atributo ALIGN. Se ele nao or usado, cada para-
grao alinha pela esquerda. Lle pode ser usado para azer o paragrao alinhar pelo centro ou
pela direita, por exemplo:
<P ALIGN=center>Um pargrafo</P> <P ALIGN=right>Outro pargrafo</P>
ai resultar em:

Um paragrao

Outro paragrao

O atributo ALIGN, como qualquer outro atributo que altera o posicionamento ou apa-
rncia atras do l1ML, oi 0,;&,/%0* na especiicaao l1ML 4 em benecio das olhas de
estilo. Nem todos os browsers suportam, porm, os recursos de olha de estilo que substituem
o ALIGN. Mas as olhas de estilo, quando presentes, sempre tm precedncia. Se uma olha de
estilos ditar um alinhamento, aquele proposto pelo atributo ALIGN ignorado.
2-10
2 - l1ML
O elemento ,P de um paragrao opcional. Como nao pode haer um paragrao
dentro de outro ou qualquer !"!#!$%& (! )"&*& dentro de um paragrao, o browser automatica-
mente echa o paragrao quando encontra um P, l1, DIV, BLOCKQUO1L,
PRL ou outro elemento de bloco. Blocos em l1ML nunca podem ocorrer dentro do texto
de um paragrao.
+,+,+, -.)!/."0&1 2345 . 2365
Um outro bloco importante na organizaao do texto o cabealho. la seis neis die-
rentes. O mais importante deinido com l1 e pode ser usado para destacar, por exemplo,
o ttulo de um documento. Nao conunda esse ttulo com 1I1LL, elemento de lLAD,
que deine um ttulo para a pagina mas nao aparece na mesma.
<h1>La Cosa Nostra Pizzaria i Ristorante</h1>
Obsere no seu browser que o texto aparece grande e em negrito ,por causa da olha de
estilos do browser,.
Assim como P, l1 tambm suporta o atributo ALIGN, portanto, pode-se usa-lo
para colocar o ttulo alinhado pelo centro:
<h1 align=center>La Cosa Nostra Pizzaria i Ristorante</h1>
Alm do l1, ha mais 5 neis de cabealho que podem ser usados para organizar os pa-
ragraos de uma pagina em seoes. Veja na igura abaixo o cdigo e o resultado no browser de
textos marcados com l1, l2, l3, l4, l5 e l6.

2-11
2 - l1ML
!"!"#" %&'()&*+ ,+ -*./&
0.+1)23 ,+ *4'52 6789
Os paragraos sempre tm 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 paragrao usando o marcador BR. BR um marcador azio. Nao pode ter des-
critor de echamento. BR quebra a linha na posiao onde or colocado:
<p align=center>"Tradio, qualidade e<br>
segurana so nossas<br> prioridades"</p>
Quebras de linha s podem ser usadas dentro de paragraos, cabealhos e outros ele-
mentos de bloco que contm texto.
:4'523 5&)4;&'(243 6<89
Linhas horizontais decoratias 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 atraessa toda a largura do browser. Podemos usar o atributo \ID1l para tor-
na-la menor. \ID1l aceita um nmero absoluto em pixels ou uma porcentagem:
<hr width=50%>
la arios outros atributos. Consulte a documentaao ,ou digite a tecla l1 quando estier
com o cursor dentro do elemento lR no <&=+>4(+, e teste os posseis 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 paragrao ou cabealho.
2-12
2 - l1ML
!"!"#" %&'()*+ ,- ./+0+ 1234%567489:
Com a unao de dar o destaque de um bloco de citaao em um texto, oi criado o des-
critor BLOCKQUO1L. Alguns browsers o ormataam em italico, outros em onte me-
nor, outros endentaam. loje, todos os brow-
sers ormatam um bloco BLOCKQUO1L
endentado e com uma linha em branco antes e
depois. Sua unao acabou sendo a de um bloco
de paragraos endentados:
<blockquote>
<p>"Tradio, qualidade e<br>
segurana so nossas<br>
prioridades"</p>
</blockquote>
Mas BLOCKQUO1L nao dee ser
usado pensando s na aparncia. Qualquer o-
lha de estilos pode endentar outro paragrao ou
mudar a aparncia de BLOCKQUO1L.
!"!";" 8-<'+ =>?@A+>B('(,+ 1CD9:
Vimos que o l1ML ignora espaos, tabulaoes, noas-linhas e coisas parecidas. Se isto
or necessario, podemos resoler o problema usando o descritor pre. Lsse descritor preser-
a as caractersticas do texto preiamente ormatado e lea em consideraoes as noas-linhas,
espaos e tabulaoes:
<pre>
<p>Nmero de Assassinatos La Cosa Nostra La Santa Camorra
Janeiro 1 12
Fevereiro 7 12
Maro 0 6
Abril 3 9
Total 11 39</p>
</pre>
2-13
! # $%&'

() * +*,-.,* /* 0*1)+* 2*33*, /* +*,-.,* /* 24-56*7 8 39 *:.30*, /5;56.56/< .; 2<.=< <
6>;),< /) 0*1.+*?@)3 <. 0,<=*6/< 2<, )32*?<3 A.) < *:.30) B5=* 2),B)50<C
$4 B<,;*3 ;)+D<,)3 /) =,5*, 0*1)+*3 ); $%&'7 =<;< E),);<3 */5*60)C
!"!"#" %&'(' )*+,-.(' /* 0*12' 34567
F</);<3 /)=5/5, =,5*, /5E53@)3 6* 24-56* 2)+<3 ;*53 /5E),3<3 ;<05E<3C G08 2<, ;<05E<3
/) )30,.0.,* +9-5=* H;)3;< A.) < ,)3.+0*/< 6I< *2*,)?* E53.*+;)60)7 2</) 3), .3*/< 2<, .;
;)=*653;< /) 1.3=* <. 56/)J*?I<KC L<; B<+D*3 /) )305+<7 2</);<3 *0,51.5, .; )305+< 0<0*+#
;)60) /5B),)60) * .;* 3)?I< /* 24-56*7 =<;< ;./*, B.6/<7 B<60)37 =<,)37 )0=C
M /)3=,50<, NOPQR 8 .3*/< 2*,* /)B565, .;* 6<E* 3)?I< H<. /5E53I<KC S30) /)3=,50<, 6I<
B*T 6*/* 3) 6I< 05E), *0,51.0<3C U; /<3 *0,51.0<3 8 G'PVW7 A.) 0); * ;)3;* B.6?I< A.) <
G'PVW /) NFR ) N$XR 39 A.) *B)0* .; 1+<=< 560)5,<7 =<; 0</<3 <3 /)3=,50<,)3 A.) D<.E),
/)60,<C G 2,)=)/Y6=5* <=<,,) /) /)60,< 2*,* B<,*C () D<.E), .; NF G'PVWZ=)60),R /)60,<
/) .; NOPQ G'PVWZ,5-D0R7 < *+56D*;)60< /) NFR 2,)E*+)=)C
!"!"8" 9:;-'0 <&'('0
G B56*+5/*/) /)30* 560,</.?I< *< $%&' 6I< 8 )J2+<,*, 0</<3 <3 )+);)60<3 /532<6[E)53
2*,* 3) =<630,.5, 24-56*37 2<,0*60<7 /)5J*;<3 *+-.63 <.0,<3 1+<=<3 5;2<,0*60)3 /) B<,* H=<;<
NGOO\S((R7 A.) 8 .3*/< 2*,* ;*,=*, )6/),)?<3K ) /)3=,50<,)3 /)2,)=*/<3 =<;< NLSW#
%S\R ) NWM]\RC %*;18; 6I< )J2+<,*;<3 <3 E4,5<3 *0,51.0<3 /)33)3 )+);)60<3C L<63.+0) *
)32)=5B5=*?I< <. .;* ,)B),Y6=5* $%&' 2*,* =<6D)=), ;*53 /)0*+D)3C
!#X^
! # $%&'
!"!"#" %&'()*
+,-./-,0*' & 1*23-*4& 5& 04(6*
<H2> Texto </H2> ()*+, 2 - ./ !/ 0/ 1 /2 )3 45
&6786 39 86:,;6<=) +, *>?,< 2@ A)+, 6B*+6 7,8,:,7 39 6C7B:3C) !"
#$%&'()*+$,-*(/ )*+, D)EB;F) D)+, E,7 #./0/ 1.&0.2 )3 2$%40@
<P> Pargrafo </P>
&6786 39 D67GH76I)@ J +,E87BC)7 +, I,8=69,*C) D)+,/ ,9 H,76</ E,7 )9BCB+)@ %69:K9
D)+, 7,8,:,7 39 6C7B:3C) !#$%&'()*+$,-*( 8)9) )8)77, 8)9 56278
<BR>
&6786 6 D)EB;F) )*+, )8)77, 396 L3,:76#+,#<B*=6 ,9 39 D67GH76I) )3 86:,;6<=)@
74*1*'
<BLOCKQUOTE> Bloco de Texto </BLOCKQUOTE>
M*+,*C6 39 :<)8) +, C,NC)@
<PRE> Bloco de Texto </PRE>
A7,E,7?6 6 I)796C6;F) )7BHB*6< (,ED6;)E/ C6:3<6;O,E/ *)?6E#<B*=6E5 +, 39 :<)8) +, C,N#
C)@
<DIV align=+*'89:*> Bloco de Texto </DIV>
P<B*=6 39 :<)8) +, 68)7+) 8)9 6 +*'89:*/ L3, D)+, E,7 #./0 (,EL3,7+65/ 1.&0.2
(8,*C7)5 )3 2$%40 (+B7,BC65@
<DIV> Bloco de Texto </DIV>
QRST 6<BH*-8,*C,7U I6V ) 9,E9) L3, 59:;<:=7@
<ADDRESS> Texto </ADDRESS>
&6786 39 C,NC) 8)9) ,*+,7,;) (6 I)796C6;F) ?67B6 +, :7)WE,7 D676 :7)WE,75@
'&+,-,5*-&'
<HR ,3-87(3*'>
WIDTH=)% ou WIDTH=2
R,C,79B*6 6 <67H376 =)7BV)*C6< +6 <B*=6/ ,9 D)78,*C6H,9 +6 <67H376 +6 DGHB*6 )3 ,9 DB#
N,<E@
SIZE=2
R,C,79B*6 6 6<C376 +6 <B*=6 ,9 DBN,<E@
ALIGN="left | center | right"
P<B*=6 39 E,D676+)7 D,<6 ,EL3,7+6/ D,<) 8,*C7) )3 D,<6 +B7,BC6@


!#.2
2 - l1ML
2.. i.ta.
l1ML deine arias ormas de apresentar listas de inormaao 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 tambm sao blocos que podem conter texto, paragraos ou ainda outras
listas. l1ML deine trs 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 deinioes,
marcadas por DL e ,DL.
2..1. i.ta. vaooraevaaa. |>, >
Nas listas UL, cada item da lista contido dentro de LI e ,LI. O browser geral-
mente ormata os itens com marcadores ,bolinhas pretas,. Veja a imagem ao lado e o cdigo
abaixo:
<ul>
!"#$Pizza a moda del Capo!%"#$
!"#$Pizza di pepperonni!%"#$
!"#$Pizza siciliana!%"#$
</ul>

Voc tambm pode criar listas de nel
hierarquico inerior. O browser ormatara a
sub-lista de uma orma dierente ,geralmente
endentada e com um marcador dierente,. Por
exemplo, para azer a seguinte lista:






item 1
item 2
item 2.1
item 2.2
item 3
pode-se utilizar o seguinte cdigo:
!&"$
<li>item 1</li>
<li>item 2</li>
!&"$
<li>item 2.1</li>
<li>item 2.2</li>
!%&"$
<li>item 3</li>
!%&"$
2-16
2 - l1ML
!"#"!" %&'()' *+,-.),)' /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. Poderamos numerar as
pizzas trocando os UL por OL:

<ol>
<li>Pizza a moda del Capo</li>
<li>Pizza di pepperonni</li>
<li>Pizza siciliana</li>
</ol>

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

As listas e seus itens podem ter atributos que mudam suas caractersticas como tipo de
marcador, incio da contagem ,para listas ordenadas,, tipo de numeral, etc. A maior parte des-
sas alteraoes pode ser realizada em olhas de estilo.
!"#"#" %&'()' ,- ,-4&.&56-' /7%12 /7812 /771
linalmente, existem as listas de deinioes. Lsse tipo de lista usado quando ha arios
tpicos curtos acompanhados de uma deiniao mais longa ,em um glossario, por exemplo,.
Consiste de trs descritores: DL e ,DL que delimitam toda a lista, D1,D1 que
marca o termo, e DD,DD marca a deiniao.
A imagem ao lado oi produzida com os descritores abaixo:

<dl>

<dt>Caos</dt>
<dd>O nada absoluto que e-
xistia antes do princpio das
coisas.</dd>
<dt>Urano</dt>
<dd>O deus dos Cus.</dd>
<dt>Gaia</dt>
<dd>A deusa da Terra.</dd>
<dt>Cronos</dt>
<dd>Saturno. Filho da unio
de Gaia com Urano. Deus do
Tempo.</dd>

</dl>
2-1
2 - l1ML
!"#"$" &'()*+
<UL> ... </UL>
Lista nao-ordenada
<OL> ... </OL>
Lista ordenada
<LI> ... </LI>
Llemento de lista. O descritor inal pode ser omitido. 1anto !"#$ como !%"$ e
!&"$ podem receber atributos que modiicam a apresentaao da lista
<DL> ... </DL>
Lista de deinioes
<DT> ... </DT>
1ermo. O descritor inal pode ser omitido.
<DD> ... </DD>
Deiniao do termo de lista. O descritor inal pode ser omitido.
!"$" ,*-.'/(
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,
atras de um nculo ,link, para a sua localizaao atras de uma URL. Lla pode estar no
mesmo diretrio que a pagina ou em outra parte do mundo. Desde que se inorme o seu ende-
reo corretamente e que a rede nao esteja sem comunicaao, o browser localizara a imagem e a
colocara na pagina no local onde estier o descritor IMG que a solicitou.
!"$"0" 123'4+ ,*-.'* 5,678
IMG como BR e lR que nao marcam texto, mas uma posiao, por isso nao
tm descritores de echamento. No caso de IMG, o atributo SRC obrigatrio pois ele
quem inorma a localizaao da imagem atras de sua URL. A URL pode ser tanto um endere-
o absoluto ,http:,,alguma.coisa,, como um endereo relatio a URL da prpria pagina. Por
exemplo, se a URL pagina esta em http:,,blablabla.com,dirdir,pagina.html e a URL da ima-
gem que a pagina carrega http:,,blablabla.com,dirdir,imagem.gi, pode-se simplesmente
chamar a imagem pelo endereo relatio "imagem.gi", usando IMG SRC~"imagem.gi" na
posiao, relatia ao texto, onde ela dea aparecer.
9&,( :';-4<=-(
O browser, como esta remoto, precisa utilizar uma 9&, -2(+;)4- que contenha o protoco-
lo, o nome da maquina onde roda o seridor e a porta de serios ,se nao or a porta padrao,.
A URI usada internamente no seridor ,o sistema de arquios irtual, contm apenas o cami-
2-18
2 - l1ML
nho absoluto dentro do mesmo ,,, ,Imagens ou ,Videos,. As paginas l1ML disponeis ia
seridor \eb estao armazenadas em determinada maquina e diretrio e podem usar, para co-
municaao entre si, !"#$ &'()*+,)$ a sua localizaao.
As URIs relatias sao teis em l1ML. Um nculo em uma pagina pode se reerir a um
arquio que ocupa o mesmo diretrio que ela simplesmente usando o nome do arquio como
URI ,e omitindo http:,,maquina:porta,caminho,,. Para ter acesso a um diretrio anterior,
usa-se a notaao Unix: ..,arquio.txt reere-se a um arquio chamado arquio.txt localizado no
diretrio anterior..
Resumindo: seridores e browsers s localizam recursos usando URIs. Nao az sentido
escreer C:`qualquercoisa`x.txt no browser a nao ser para utiliza-lo como isualizador de pa-
ginas l1ML armazenadas localmente. 1ambm nao az sentido usar caminhos desse tipo em
arquios l1ML ,como eremos,. Lles podem at uncionar localmente, sem seridor, mas
nao mais uncionarao quando orem publicados em um seridor \eb. O ideal usar URIs
relatias que uncionam em qualquer situaao.
-./.-. 0(+12)3'1*4 5' +3)6'1$
A imagem pode ser alinhada de arias ormas em relaao ao texto usando l1ML ,ou o-
lhas de estilo,. Veja abaixo alguns exemplos.
<img src="pizza_calabresa.gif" align=middle> e outros...

Use ALIGN~let 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>
2-19
2 - l1ML
!"#"$" &'()*+',*-()*.,
Se a imagem icar muito grande, podemos reduzi-la um pouco usando os atributos
lLIGl1 e \ID1l. Atras deles podemos mudar quaisquer dimensoes da imagem ao ser
exibida, em pixels. Mas cuida-
do! A qualidade da imagem e
seu tamanho continuam os
mesmos. Carregar uma imagem
gigantesca para depois reduzi-la
desperdcio assim como ha
perda de qualidade ao se ampli-
ar uma imagem pequena.
leight e width nao ser-
em s para redimensionar
imagens. Usando esses atribu-
tos em todas as suas imagens
com as suas dimensoes erda-
deiras torna o carregamento da
pagina mais rapido. Por que
isto Porque o browser nao ai precisar calcular as dimensoes da imagem para saber onde co-
locar o texto. Se nao houer height e width ele s pode mostrar o texto depois de saber o ta-
manho das imagens. Para descobrir o tamanho da imagem, use um editor graico como o Li-
ew ou PhotoShop. Que tal uma pizza esticada
<img src="pizza_calabresa.gif" align=left height=100 width=20>
Se oc nao gostou da pizza esticada, use as dimensoes corretas em pixels que sao hei-
ght~13 e width~134.
Ainda ha alguns atributos que permitem que se empurre o texto para longe da igura. Na
erdade, criam uma margem inisel ao redor dela. lSPACL e VSPACL, respectiamente
acrescentam margens horizontais e erticais, em pixels, em olta da igura. 1odos os atributos
de alinhamento podem ser substitudos por olhas de estilo.
<img src="pizza_calabresa.gif" align=left hspace=10>
!"#"#" /)+0(,
<IMG SRC="URL da imagem" -.1'20.,+>
Inclui uma imagem na pagina. !"# localiza a imagem atras de uma URL. Principais
atributos
ALT="comentrio"
Inclui um comentario que sera isto por quem nao conseguir isualizar a imagem.
2-20
2 - l1ML
BORDER="n"
Cria uma borda em torno da imagem. BORDLR~"0" remoe a borda presente ao
redor das imagens atias ,que sao links,.
ALIGN="bottom | middle | top | left | right"
Alinha uma igura em relaao ao texto. As trs primeiras opoes alteram a posiao
ertical da igura. As duas ltimas ixam a mesma em um dos lados da pagina, a-
zendo o texto luir ao redor.
HSPACE="n"; VSPACE="n"
Colocam espao horizontal e,ou ertical ao redor de uma imagem.
!"#" %&'()*)+,& -. /)')/*.'.0 123423. .4.(.3*05
la arios descritores que tem a
unao de atribuir um papel a trechos
de texto. Na pratica, este "papel" se
relete na orma de um destaque die-
rente. Somente com olhas de estilo o
"papel" aproeitado totalmente.
Os descritores de ormataao de
caracteres sao diididos em duas partes:
os lgicos ,aqueles que tem uma un-
ao, e os sicos ,aqueles que nao tem
unao estrutural, s aparncia,. A nica
dierena entre eles esta no nome: CI-
1L ,lgico, representa uncionalmente
uma citaao e aparece na tela em italico.
I ,sico, representa texto em italico
,uncionalmente nao nada,, e se apre-
senta na tela da mesma orma que CI-
1L. Se oc nao esta preocupado com
estrutura tanto az usar um ou outro. A
igura abaixo ilustra arios deles.
!"#"6" 74.(.3*&0
Os elementos abaixo signiicam mais pela sua unao que pela sua aparncia. Sao ele-
mentos lgicos.
823*)9.: Llemento 1exto ,Llemento, onde Llemento pode ser:
LM texto griado
2-21
! # $%&'
(%)*+, -./-0 102-.3.4-. 5261780
9:+ 8.1646;<0
=*9> ?@8650
(A&B 730C-27
DE9 -.?F780
GA) H726IH.F
=J%> ?6-7;<0
(A&B 730C-27
AEE) 7K2.H67;<0
A=)*+L& C65F7
(BA+ ?04-764.2 5.4M26?0
N -./-0 8. ?6-7;<0 O.4-2. 7CP7CQ

>C-.C 0R-20C .F.3.4-0C -S3 R3 403. TR. .417-6U7 7 CR7 7P72S4?67 OC<0 0C .F.3.4-0C 1V#
C6?0CQW :0FX7C 8. .C-6F0Y P02M3Y P08.3 7F-.272 -R80W

%% -./-0 8. .CP7;73.4-0 16/0
J -./-0 .3 6-IF6?0
E -./-0 .3 4.526-0
( -./-0 26C?780 O3.C30 TR. (%)JD>Q
(%)JD> -./-0 26C?780
Z -./-0 CRKF64X780
EJ, -./-0 .3 104-. 37602
(&A'' -./-0 .3 104-. 3.402
(ZE -./-0 CRK#.C?26-0
(ZB -./-0 C0K2.#.C?26-0
!"#" %&'()&*
A-M 7 H.2C<0 !W[Y $%&' C@ 1024.?67 3.60C 8. .C-2R-R272 6410237;<0 TR. 10CC. 10237-787
C.T\.4?67F3.4-.Y 0R C.]7Y 0 1FR/0 80 -./-0 . 6375.4C .27 ^46?0 . 7?04-.?67 87 .CTR.287 P727 7
862.6-7 . 8. ?637 P727 K76/0W +<0 X7H67 3.60C 8. 86CP02Y P02 ./.3PF0Y 806C P72I52710C F780#7#
F780 7 4<0 C.2 TR. -080 0 -./-0 10CC. 10237-780 RC7480 .CP7;0C . -7KRF7;_.C . P0C-.26023.4-.
64?FRV80 .3 R3 KF0?0 `B)>aW A 64-208R;<0 87C -7K.F7CY P20P0C-7 40 $%&' bW[ O37C 780-7#
87 P.F0C K20cC.2C 376C P0PRF72.C ?030 R37 ./-.4C<0 80 $%&' !W[QY -0240R P0CCVH.F 7 ?F7CC6#
16?7;<0 87 6410237;<0 ?03 372?7802.C $%&' TR. C.267 10237-787 40 K20cC.2 .3 F64X7C .
?0FR47CW
*C 372?7802.C .273 646?67F3.4-. 8.C-64780C d 025746U7;<0 8. 8780C .3 10237 8. -7K.#
F7CY 37C .3 P0R?0 -.3P0 P7CC7273 7 C.2 RC780C P.F0C e.K 8.C654.2C P727 0K-.2 37602 ?04-20#
F. C0K2. 7 7P2.C.4-7;<0 80 ?04-.^80 87C CR7C PI5647CW J375.4C ?03 P72-.C 864f36?7CY PI5647C
!#!!
2 - l1ML
de mais de uma coluna e controle da largura da pagina sao algumas das soluoes posseis em
l1ML usando tabelas.
Por ter tantas utilidades, as tabelas sao um tpico complexo em l1ML, mas as possibi-
lidades que oerecem compensam o esoro de conhecer bem cada um dos seus atributos.
!"#"$" &'()*(+,(- ./.0.)12- .-1'313',(- 456789:; 45<:;
45=: 23 45>:
Uma tabela precisa ter no mnimo trs elementos l1ML. O elemento 1ABLL repre-
senta a tabela e contm uma ou mais linhas, representadas pelo elemento 1R. O elemento
1R o nico, dentro de um bloco 1ABLL...,1ABLL que contm a inormaao da
tabela. Lssa inormaao precisa estar dentro de elementos 1D ou 1l, que sao os nicos
permitidos dentro de um 1R. 1R...,1R representa uma linha da tabela ,5,?/. <2@,.
Cada linha pode ter uma ou mais clulas de dados em blocos 1D...,1D ,5,?/. =,1,, ou
1l...,1l ,5,?/. >.,A.',. O nmero de colunas da tabela , portanto, deriado do n-
mero de clulas contidas no bloco 1R...,1R que tier mais blocos 1l...,1l ou
1D...,1D .
Os exemplos abaixo ilustram tabelas simples:
<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>
que resulta na seguinte ormataao:
1,1 1,2 1,3
2,1 2,2 2,3
3,1 3,2 3,3

<TABLE BORDER=1>
<TR><TD>Mercrio</TD><TD>Venus</TD><TD>Terra</TD></TR>
<TR><TD>Marte</TD><TD>Jpiter</TD><TD>Saturno</TD></TR>
<TR><TD>Urano</TD><TD>Netuno</TD><TD>Pluto</TD></TR>
</TABLE>
BORDLR um atributo de 1ABLL que az com que a tabela seja desenhada com
uma borda A.B,3/1 ,1 pixel,. Se o nome BORDLR nao estier presente, a borda nao aparecera,

2-23
2 - l1ML
embora o espao de 1 pixel em olta da tabela permanea. Veja o exemplo abaixo ,tabela sim-
ples sem bordas,:
<TABLE>
<TR><TD>Maranho</TD><TD>Piau</TD><TD>Cear</TD></TR>
<TR><TD>Rio Grande do Norte</TD><TD>Paraba</TD>
<TD>Pernambuco</TD></TR>
<TR><TD>Alagoas</TD><TD>Sergipe</TD><TD>Bahia</TD></TR>
</TABLE>
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>Altmetro </td></tr>
<tr><td><img src="ball.gif"></td> <td>Taqumetro </td></tr>
<tr><td><img src="ball.gif"></td> <td>Indicador ...</td></tr>
<tr><td><img src="ball.gif"></td> <td>Bssola </td></tr>
<tr><td><img src="ball.gif"></td> <td>Nvel de ... </td></tr>
<tr><td><img src="ball.gif"></td> <td>Termmetros </td></tr>
</table>
!"#"!" %&'()* + +*,)-).+/0&
O elemento 1ABLL contm arios outros atributos que alteram a aparncia de toda
a tabela. BORDLR~alor permite especiicar a largura da borda da tabela atras 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>
2-24
2 - l1ML
<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>
CELLSPACING=valor controla a quantidade de espao entre as clulas de uma tabela.
Normalmente esse espao de 1 pixel. CELLPADDING=valor controla a quantidade de espao
entre o texto da clula e suas bordas ,margens internas das clulas,. O alor !"#$%&' de 2 pixels,
portanto, se as bordas orem zero, haera 3 pixels entre os elementos da tabela a nao ser que
esse espao seja alterado com CELLSPACING e CELLPADDING. Veja os exemplos abaixo:
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR><TD>Aranha</TD><TD>Lacrau</TD><TD>Escorpio</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 deinidos com o
alor "0", nao haera espao algum entre os elementos da tabela a nao ser que o espao seja
adicionado de orma explcita ,linhas em branco, &nbsp, tabulaoes ou espaos dentro do blo-
co 1D,.
()*)+) -$./%.$ " $&'%.$
O atributo \ID1l~numero ou percentagem permite especiicar a largura da tabela, a-
tras de uma medida absoluta em pixels ou atras de uma percentagem da largura isel da
pagina. Sem \ID1l, a tabela ocupara apenas o espao horizontal necessario para conter to-
2-25
2 - l1ML
dos os seus elementos, as bordas e margens. Se uma tabela or deinida com \ID1l~100,
ela ocupara toda a largura isel da pagina e mudara de tamanho caso a janela seja redimensi-
onada ,e a area isel seja alterada,. Se or deinida 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 layout das paginas, \ID1l usado para de-
terminar a largura da pagina que esta contida em uma tabela de nica clula. Paginas criadas
para a resoluao de 640x480 sao tipicamente deinidas dentro de tabelas com largura de 600
pixels. Para 800x600, comum usar 50 pixels:
<body>
<table width=750>
<tr><td> (... a pgina inteira ...) </td></tr>
</table>
</body>
No exemplo abaixo ha duas tabelas. A primeira nao possui o atributo \ID1l. A se-
gunda possui o atributo \ID1l~50.
<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>

De orma analoga ao atributo \ID1l, lLIGl1~numero ou percentagem permite es-
peciicar a altura da tabela. O suporte a esse recurso, porm, nao consistente em browsers
que nao suportam totalmente o l1ML 4.
!"#"$" &'()*+',- ./ 0,-)1),234/2',5 1,( / )436/2- ./ 7+2.,
A tabela, se tier uma largura menor que o espao horizontal isel, sera alinhada pela
margem esquerda da pagina a nao ser que possua o atributo ALIGN com o alor right ,a direi-
2-26
2 - l1ML
ta, ou center. lSPACL e VSPACL podem ser usados para acrescentar espao ertical e hori-
zontal como margens externas para toda a tabela, da mesma orma como sao usados por ima-
gens.
O atributo BACKGROUND, se presente, dee receber a URL de uma imagem que ira
se repetir no undo da tabela. BGCOLOR permite que se deina uma cor. L importante obser-
ar que a cor deault da tabela ,1ABLL, das clulas ,1D, e linhas ,1R, transparente, ou seja,
se houer imagens ou cores de undo na pagina, elas serao iseis atras da tabela. Isto
erdade apenas se a tabela ou clulas nao tierem atributos BACKGROUND e BGCOLOR.
A cor da tabela podera nao ser isel se cores opacas tierem sido atribudas a blocos 1D e
1R.
Veja agora a tabela que antes construmos com PRL:
<table border>
<tr><th>Nmero de Assassinatos</th><th>La Cosa Nostra</th><th>La Santa Ca-
morra</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>Maro </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 ali-
nhada pelo centro. Use DIV
para azer isto.
<div align="center">
<table border>
(...)
</table>
</div>
Obsere 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, alm, claro, olhas de
estilo.
1abelas tendem a icar muito 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 atras de programas graicos como o ()"$*+"$,") ou -)./'0$1". As e-
zes, porm, necessario azer pequenas alteraoes por causa de dierenas entre browsers e
assim, saber identiicar as clulas de uma tabela no cdigo l1ML essencial.
2-2
2 - l1ML
!"#"$" &'()*+,-)./ - 0(,-)1(/)+,-)./ 0- 23'4'+1
Assim como as tabelas, clulas e linhas indiiduais de tabelas podem ter seu contedo a-
linhado em relaao a tabela sem usar olhas de estilo atras dos atributos ALIGN e VALIGN
aplicados a 1D e 1R. ALIGN pode assumir os alores let, right ou center. VALIGN
pode ser top, bottom ou center. Com os dois possel colocar um objeto alinhado em qual-
quer posiao da tabela.
Qualquer 1D tambm pode ter atributos lLIGl1 e \ID1l para controlar a altura
e largura da clula, respectiamente. Lsse alor pode ser absoluto ,em pixels, ou relatio a altu-
ra,largura totais da tabela.
Mas lLIGl1 e \ID1l deem ser usados com cautela. Nem sempre possel de-
terminar essas dimensoes. Blocos NOBR e PRL podem azer a tabela crescer alm 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 limitaoes de altura e largura deinidas nas tabelas.
!"#"#" 5/,6()+78/ 0- 23'4'+1
Clulas podem ser mescladas em uma s atraessando colunas e linhas com os atributos
RO\SPAN e COLSPAN aplicaeis a 1D ou 1l. Com esses recursos possel cons-
truir tabelas
O seguinte exemplo utiliza COLSPAN e
RO\SPAN para construir uma tabela conten-
do arias clulas mescladas:

<table border=2 cellpadding="5">
<tr>
<td colspan="3">Trs colunas combinadas</td>
<td rowspan="3">Coluna 4<br>ocupa trs<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
2-28
2 - l1ML
!"#"$" &'()*+
<TABLE atributos> ... </TABLE>
Deine uma tabela. O atributo !"#$%# torna iseis as bordas das clulas.
<CAPTION> Legenda </CAPTION>
Legenda da tabela
<TR> ... </TR>
Linha de uma tabela. O descritor inal pode ser omitido. S pode incluir descritores
&'() e '*).
<TD> ... </TD>
Clula comum. O descritor inal pode ser omitido.
<TH> ... </TH>
Clula de cabealho. O descritor inal pode ser omitido.

!"$" ,-.+/0( ' 12-.)3+(
Uma ancora qualquer um dos lados de um nculo de hipertexto. Lm outras palaras,
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>Captulo 1 </H1>
O descritor pode icar azio, ja que s marca uma posiao, 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 serira de ponto de partida,
indicando o destino atras do atributo lRLl:
<A HREF="#cap1">Ir at o captulo 1</A>
O trecho acima incula a rase "Ir ao captulo 1" com a posiao onde esta a ancora
"cap1", desde que ela esteja deinida no mesmo arquio.
Para especiicar um destino externo, preciso usar uma URI ,relatia 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 seao da pagina, pode-se complementar a URI com o
ragmento correspondente ao nome da ancora deinida no arquio:
<A HREF="http://www.abc.com/dados/index.html#cap1">Ir at o captulo
1 no arquivo Index.html</A>
2-29
! # $%&'
!"#"$" &'()*+
<A HREF="URL do recurso vinculado"> ... </A>
()* +,- ./0 , 1021, -)3+)4, 506) /- 789: ;)3) ) <=' 05;0+8>8+)4)?
<A HREF="#nome"> ... </A>
()* +,- ./0 , 1021, -)3+)4, 506) /- 789: ;)3) ) @9+,3) 7,+)7 9,-0?
<A NAME="nome"></A>
&)3+) /- 7/A)3 B@9+,3) 405189,C 0- /-) ;DA89)?
!"," -.'*'/0+( 1' '(02.+ 31'45'671+( /+ 89:; <"=>
EF, ;30+85)-,5 >8+)3 5)185>081,5 +,- , >/94, +89*)G 7013)5 ;301)5 0 789:5 )*/85? H,40-,5
-/4)3 1,4)5 )5 +,305? I030-,5 >/1/3)-0910 +,-, >)*03 1/4, 851, /5)94, >,7J)5 40 05187,G -)5
, $%&' 1)-KL- ,>030+0 -08,5 40 30)78*)3 )7103)MN05 40 05187,? O 05;0+8>8+)MF, $%&' 30+,#
-094) >,310-0910 ./0 05505 070-091,5 9F, 506)- /5)4,5G -)5 ./0 50 ;30>83) /5)3 >,7J)5 40
05187,G -)5G +,-, , 5/;,310 ) >,7J)5 40 05187, 9F, +J0A) ),5 K3,P5035 Q035F, R?SG 0 Q,+T )894)
;,40 103 +7809105 +,- 1)85 K3,P5035 ./0 9F, QF, >8+)3 5)185>081,5 +,- ;DA89)5 -,9,+3,-D18+)5G
L 8-;,31)910 +,9J0+03 05505 070-091,5? U -0484) 0- ./0 ,5 K3,P5035 Q035F, R?S >,30- 09#
13)94, 0- 02189MF,G 40Q0#50 A3)4/)7-0910 )K)94,9)3 1,4) ) >,3-)1)MF, 40 +,305 0 >,9105 )#
13)QL5 4, $%&'G ;,85 ;306/48+) K)51)910 ) -)9/109MF, 40 /- 5810G )7L- 40 1,39D#7, -)8,3 0
-)85 5/6081, ) 033,5?
!","$" ?052@)0+( 1' )*7 4AB2/7 CDEFG 7052@)0+(H
V5 )138K/1,5 40 /-) ;DA89) B>/94,G
+,305 4, 1021, 0 4,5 QW9+/7,5G ;);07 40 ;)#
3040C ;,40- 503 -/4)4,5 )13)QL5 4, 405+38#
1,3 XYVZ[\? Z8Q035,5 )138K/1,5 ;03-810-
40>8983 /-) 8-)A0- 40 ;);07 40 ;)3040G /-)
+,3 40 >/94,G +,3 ;)3) 1,4, , 1021, 0 ;)3) ,5
48Q035,5 051)4,5 40 /- QW9+/7,? O5 +,305
5F, 89>,3-)4)5 /5)94, ,/ /- +]48A, =^Y
0- J02)40+8-)7 ,/ /- 9,-0 ;)43,98*)4,?
H)3) -/4)3 ) +,3 40 >/94,G /1878*)-,5
, )138K/1, Y^_V'V=?
<body bgcolor="white" text="green" link="red" vlink="black">
<5)-,5 9,-05 40 +,305? `0 ./85L550-,5 /5)3 /-) +,3 48>030910 4)5 ab +,305 4)./07) 1)#
K07) KD58+) BQ06) );T948+0CG ;30+85)3W)-,5 /5)3 +]48A,5 J02)40+8-)85? V5 +]48A,5 5F, /- +,9#
6/91, 40 b )7A)385-,5 J02)40+8-)85 ;30+0484,5 40 /- cdc? H,40#50G )13)QL5 40705G ,K103 -)85
40 !SS +,305 48>0309105?
!#RS
2 - l1ML
O papel de parede uma imagem que repetida arias ezes no undo. Pode-se usar
qualquer imagem mas ela nao dee atrapalhar a leitura do texto. Dee ser inormada a URL
completa ou relatia:
<body background="fundo.jpg"
bgcolor="white" text="green" link="red" vlink="black">
!"#"!" %&'() ( *&+,() -./012
Cores de texto indiiduais, ontes e tamanhos podem ser alterados com um descritor
chamado lON1, que pode receber trs atributos:
SIZL, que inorma o tamanho ,ariando de 1 a ou de -3 a -3,,


lACL, que inorma o nome exato de uma onte ou uma lista delas separadas por
rgula, e
COLOR, que inorma uma cor em cdigo hexadecimal ou pelo nome, da mesma
orma como eito em BOD\.
lON1 totalmente dispensael orem utilizadas olhas de estilo, mas, como alguns
browsers ainda nao suportam olhas de estilo, pode-se usar esse elemento para garantir uma
aparncia melhor as paginas \eb.
!"#"3" 4()56&
<BODY 7,'895,&)> """ ,&:& & :&;56(+,& """ </BODY>
BGCOLOR="#rrggbb" ou BGCOLOR="nome_da_cor"
Muda a cor do undo da area de isualizaao. !""##$$ o cdigo RGB das 16,8 mi-
lhoes de cores posseis. %&'()*+),&" pode ser uma das 16 cores uniersalmente
conhecidas ou uma das 465 suportadas pelo Netscape.
TEXT="#rrggbb" ou TEXT="nome_da_cor"
Mudam a cor de todo o texto que aparece no documento, com exceao dos links.
2-31
2 - l1ML
LINK="#rrggbb" ou LINK="nome_da_cor"
Muda a cor dos links ainda nao selecionados.
VLINK="#rrggbb" ou VLINK="nome_da_cor"
Muda a cor dos links ja isitados.
BACKGROUND="URL_de_imagem"
Inclui uma imagem cobrindo todo o undo da tela.
!"#" %&'()*)+,-
!"#"." /'-0'- -,1(' 2'1 ' 3/45
1. Marque as opoes erdadeiras. Uma pagina l1ML ...
a, ... geralmente um arquio de texto com extensao .htm ou .html
a, ... podera exibir imagens, texto ormatado, nculos de hipertexto e cores ao ser lida
por uma aplicaao como o 670'(7'0 %&89,('(.
b, ... exibira seu cdigo-onte, consistindo de smbolos especiais entre ` e `
quando or lida por um editor de textos comum, e nao mostrara imagens.
c, ... nao pode ser criada atras de um editor de textos qualquer. L preciso usar uma
erramenta como o :(';<2';='( ou 3,<'>+0'.
d, ... pode ter nculos interligando-a com outras paginas e com imagens.
e, ... se tier nculos dee expressa-los usando a notaao de URIs, absolutas ou rela-
tias, para que uncionem quando a pagina or publicada em um seridor \eb.
2. O que acontece quando um browser carrega um arquio de texto simples, com extensao
.html ou .htm, mas sem ormataao l1ML alguma
a, A pagina nao carregada
, A pagina carregada mas toda a ormataao do texto original ,paragraos, ttulos,
quebras de linha, etc., perdida na isualizaao
g, A pagina interpretada como texto simples e exibida em onte de largura ixa
,Courier, por exemplo,, preserando a ormataao original
h, O browser causa a abertura de uma aplicaao para a leitura de textos ,o 2,(?, por
exemplo,.
i, O browser exibe uma mensagem de erro
3. Considere o seguinte sistema de diretrios no 2+7?,@-, em uma maquina acessel ia In-
ternet chamada www.tribos.com.br:
C:\
C:\Windows
C:\Apache
C:\Apache\htdocs\
C:\Apache\htdocs\ongs\
2-32
2 - l1ML
Suponha que um seridor l11P oi instalado nessa maquina e conigurado para admi-
nistrar um sistema de diretrios a partir do diretrio C:\Apache\htdocs\ ,diretrio raiz do
seridor,. Qual das URLs abaixo permite a isualizaao do arquio index.html, armazenado
em C:\Apache\htdocs\ongs\ atras de um browser localizado em uma maquina remota
a, http://www.tribos.com.br/Apache/htdocs/ongs/index.html
j, http://www.tribos.com.br/C:/Apache/htdocs/ongs/index.html
k, http://www.tribos.com.br/ongs/index.html
l, http://www.tribos.com.br/C:/Apache/htdocs/index.html
m, http://www.tribos.com.br/index.html
n, http://www.tribos.com.br/
b, C:\Apache\htdocs\ongs\index.html
4. No mesmo seridor \eb da questao anterior ha uma imagem logotipo.gif` armaze-
nada no diretrio C:\Apache\htdocs\. O arquio index.html localizado em
C:\Apache\htdocs\ongs\ reere-se a essa imagem atras de um descritor <IMG>. Quais,
entre as sintaxes abaixo para o descritor <IMG> de index.html, causarao a exibiao da i-
magem dentro da pagina, quando isualizada por um browser em uma maquina remota
Marque no mnimo 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">
5. 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
6. Marque apenas as alternatias erdadeiras:
a, Lm um arquio l1ML, um bloco de texto cercado por um par de descritores
l1ML podera nao ter sua aparncia alterada quando o arquio or carregado em
um browser.
b, Atributos s podem ocorrer no descritor inicial de um elemento l1ML
c, Atributos podem ocorrer em qualquer ordem dentro de um descritor l1ML.
d, Descritores e atributos desconhecidos pelo browser sao ignorados
e, Os alores dos atributos deem ser deinidos entre aspas, sempre.
. O que acontecera com o trecho de cdigo l1ML abaixo
<!-- Informao muito importante! -->
quando a pagina no qual esta contigo dor isualizada em um browser
a, Lle aparecera em destaque na barra de ttulo do browser
2-33
2 - l1ML
b, Lle aparecera na pagina entre duas linhas horizontais
c, Lle sera completamente ignorado pelo browser
d, Lle nao aparecera na pagina mas causara o aparecimento de uma linha em branco
no lugar onde deeria aparecer.
e, O browser mostrara uma mensagem de erro.
8. Quais trechos de cdigo l1ML abaixo estao incorretos Marque um ou mais.
a, <p>Este um pargrafo <b>importante</b>.</p>
b, <h1>Ttulo do captulo</h1 align="center">
c, <td>Voltar para <a href="casa.html">Casa</a></td>
d, <p><a href="../index.html"><b>Retornar</a></b></p>
e, <p>Pargrafo um. <p>Pargrafo dois.
, <A HREF="arquivo.gif">Link para imagem</A>
g, <IMG SRC = "imagem.jpg" ALT = "Figura 1">
h, <p align=center>Texto alinhado pelo centro</p>
i, <p>O elemento <table> serve para construir tabelas</p>
j, <p>Copyright &copy 2000, Jos Severino da Silva</p>
9. Marque apenas as airmaoes alsas:
a, Lspaos extras, tabulaoes e quebras de linha que ocorrem no texto sao geralmente
ignorados em paginas l1ML.
b, 1udo o que aparece na pagina dee estar dentro de um bloco delimitado em l1-
ML pelos descritores <BODY> e </BODY>.
c, O elemento <META> sere para incluir inormaoes sobre a pagina que podem ser
teis para acilitar a localizaao da pagina por mecanismos de busca.
d, Se uma pagina tier o descritor <BASE TARGET="nova">, clicar em um de seus
nculos ,!"#$%, podera causar a abertura de noas janelas.
e, O ttulo do documento, expresso entre <TITLE> e </TITLE> aparece no incio da
pagina l1ML, antes do restante do texto ou imagens.
10. Para criar uma lista simples de itens numerados, qual conjunto de elementos l1ML oc
utilizaria Lscolha uma alternatia.
a, <P> e <LI>
b, <UL> e <LI>
c, <OL> e <LI>
d, <TD> e <LI>
e, <UL>, <OL> e <LI>
11. Quais trechos de cdigo l1ML abaixo sempre serao exibidos em italico em qualquer
browser Marque uma ou mais opoes.
a, <I>Texto grifado</I>
b, <EM>Texto grifado</EM>
c, <CITE>Texto grifado</CITE>
d, <ADDRESS>Texto grifado</ADDRESS>
e, Nenhuma das alternatias acima garante que o texto aparecera em italico.

Para as trs prximas questoes a seguir, considere a seguinte estrutura de arquios ,em !"#$!%
&', e diretrios ,em !"#$%&',:
2-34
! # $%&'

/____ index.html
|____ documentos
| |____ mar.html
| |____ ondas.jpg
|____ imagens
|___ barco.gif
(!) *+,- .,/ ,-0123,045,/ ,6,478 9830:; 8 9<.4=8 $%&' >,2, ?+1 8 ,2?+458 index.html
;8/021 , 4;,=1; barco.gif 1 983013@, +; !"#$ >,2, 8 ,2?+458 mar.htmlA &,2?+1 +;,
,-0123,045,)
,B <img src="barco.gif"> <a href="mar.html">Mar</a>
6B <img src="../imagens/barco.gif">
<a href="../documentos/mar.html">Mar</a>
9B <img src="imagens/barco.gif">
<a href="documentos/mar.html"></a>Mar
.B <img src="/imagens/barco.gif">
<a href="documentos/mar.html">Mar</a>
1B <img src="../barco.gif"> <a href="../mar.html">Mar</a>
(C) *+,- .,/ ,-0123,045,/ ,6,478 9830:; 8 9<.4=8 $%&' >,2, ?+1 8 ,2?+458 mar.html ;8/021
21/>19045,;1301 ,/ 4;,=13/ ondas.jpg 1 barco.gifA &,2?+1 +;, ,-0123,045,)
,B <img src="documentos/ondas.jpg"> e <img src="/imagens/barco.gif">
6B <img src="ondas.jpg"> e <img src="../imagens/barco.gif">
9B <img src="/documentos/ondas.jpg"> e <img src="../barco.gif">
.B <img src="ondas.jpg"> e <img src="/barco.gif">
1B <img src="ondas.jpg"> e <img src="barco.gif">
(D) E+>83@, ?+1 8 ,2?+458 index.html >8//+, +;, /1FG8 ,3982,., >82 +; 1-1;1308 <a
name="secao2"></a>) *+,- .,/ ,-0123,045,/ ,6,478 9830:; 8 9<.4=8 $%&' >,2, ?+1 8
,2?+458 mar.html 983013@, +; -43H ?+1 ,>8301 >,2, 1//, I3982, .8 ,2?+458 in-
dex.htmlA &,2?+1 +;, ,-0123,045,)
,B <a name="/index.html#secao2">Seo 2 do Indice</a>
6B <a href="index.html#secao2">Seo 2 do Indice</a>
9B <a href="../index.html">Seo 2 do Indice</a>
.B <a href="#secao2">Seo 2 do Indice</a>
1B <a href="/index.html#secao2">Seo 2 do Indice</a>
(J) *+,- .8/ 0219@8/ .1 9<.4=8 $%&' ,6,478 .1/13@,2K , /1=+4301 0,61-,A

,B <table border="1" width="80">
<tr> <td colspan="2">1</td> </tr>
<tr> <td rowspan="2">4</td>
<td>5</td>
<td rowspan="2">2</td> </tr>
<tr> <td colspan="2">3</td> </tr>
</table>
!#CJ
! # $%&'
!#()
*+ <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>
,+ <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>
-+ <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>
.+ /.01234 -45 467.80479:45 407.89;8.5

!"
3 - Alm do l1ML
!"#" %&'()*+
No meio eletronico ha basicamente dois tipos de imagens: as que sao ormadas por ma-
triz de pixels ,,-.&'/, e as 0).12-'-+. As imagens do tipo bitmap ,ou raster, sao criadas a partir de
uma matriz de pontos. A sua resoluao ixa, portanto, se uma imagem criada em uma ma-
triz de 100x100 pixels e depois ampliada para 1000x1000, cada ponto sera dez ezes maior na
ersao ampliada. Imagens etoriais sao deinidas atras de equaoes e dados que permitem a
sua reproduao. Uma imagem etorial, quando ampliada, presera a aparncia da orma que
representa. Os pontos na tela, que nao azem parte da inormaao armazenada com a imagem,
nao sao ampliados como ocorre com as bitmaps, resultando em uma imagem mais ntida.

Figura 1 - O primeiro crculo uma
imagem bitmap. O segundo uma
imagem vetorial. O primeiro amplia
o mapa de bits. O segundo amplia
o raio da equao do crculo.


Lxistem sotwares que trabalham exclusiamente com imagens etoriais, chamados Line
Art. Os mais populares sao o 312)4 52'6 ,PC,, 312)47'2', 89.1385, %449+.2'.12 ,PC e Macinto-
sh,, :2));'*< ,Macintosh, e :4'+= ,PC e Macintosh,. O principal ormato aberto utilizado o
>1+.?@2-/.. Imagens etoriais sao em geral &9-.1 &)*12)+ que imagens bitmap, mas atualmente nao
sao suportadas na \orld \ide \eb a nao ser atras de extensoes de browser como as exten-
soes :4'+= e ?=1@A6'0)..
O programa de criaao e tratamento de imagens de bitmap mais popular o 8<1,) >=1B
.1?=1/ ,PC, Macintosh, Unix,, que praticamente o padrao de mercado. Seus concorrentes sao
312)4 >=1.1>'-*. ,PC,, o :2'@.'4 5)+-(* >'-*.)2 ,Macintosh,, sharewares como o CD-)6>21, >'-*.B
?=1/>21, etc. Recentemente tm surgido pacotes criados especiicamente para a \eb como o
8<1,) %&'()E)'<F, o G'@21&)<-' :-2)612A+ e o G-@21+1H. %&'()31&/1+)2. Lsses pacotes sao capazes
de trabalhar com imagens etoriais e gerar bitmaps otimizados para a \eb.
Por serem muito grandes, ,-.&'/+ +)& @1&/2)++I1 raramente sao usados na \eb. Os orma-
tos de compressao utilizados mais populares sao J%: e K>LJ. Na mdia, JPLG proporciona
uma compressao maior que GIl. Mas em imagens pequenas, com poucas cores ou poucas
ariaoes, as imagens GIl tendem a ser menores.
!"#"#" 312)+
A dimensao e o nmero de cores de uma imagem determina o seu tamanho. Imagens em
preto-e-branco s precisam de um bit. Seus dois estados representam as cores desejadas: ligado
3-2
! # $%&' () *+,-
./0123)4 5 (56%781() .905:)4; <)' ()76 /7:6 & 9)66=>5% 05905652:10 ?@1:0) 3)056 .3)') A1B71 )
91(0C) (5 >=(5) <D$4 3)') 905:) .EE4F '1852:1 .EG4F 1B@% 3712) .GE4 5 /0123) .GG4; <)056
1(737)2176 9)(5' 650 90)(@B7(16 1:01>&6 (5 (769506C)F 1%:50212() 97H5%6 (5 3)056 (7A5052:56 5
3)265?I52:5'52:5F 05(@B72() 1 056)%@JC); K 9)66=>5% 3)26:0@70 372B1 1%:50212() /7:6 905:)6 5
/0123)6F '16 1 056)%@JC) 650L (@16 >5B56 '52)0 ?@5 @612() 195216 /7:6 372B1;
M@12:) '17)0 ) :1'12N) (5 @'1 7'185' 5' 1%:@01 5 %108@01F '17)0 5691J) 650L 25356#
6L07) 9101 10'1B52L#%1 21 '5'O071 (5 >=(5) 5 2) (763); P'1 7'185' (5 @' /7: (5 90)A@2(7#
(1(5 3)' GEE 97H5%6 (5 %108@01 9)0 GEE 97H5%6 (5 1%:@01 )3@910L @' 5691J) (5 GEE H GEE Q
GEEEE /7:6 (5 72A)0'1JC); R 10'1B521'52:) (1 7'185' 2) 3)'9@:1()0 9)(50L )3@910 @'
5691J) '17)0 172(1F (5952(52() () A)0'1:) @:7%7B1();
S'18526 3)%)07(16 :5' '176 /7:6 9)0 97H5%; T5 1 7'185' () 5H5'9%) 12:507)0 :7>5665 U
3)056 .V /7:64F ) 5691J) 253566L07) 9101 10'1B52L#%1 65071 95%) '52)6 (@16 >5B56 '17)0;
R 2W'50) (5 3)056 ?@5 ) 65@ 676:5'1 ')6:01 21 :5%1 (5952(5 (1 ?@12:7(1(5 (5 '5'O071
(5 >=(5) (769)2=>5%; X'/)01 '@7:16 'L?@7216 '176 6)A76:731(16 :Y' 319137(1(5 (5 5H7/70 7'1#
8526 (5 VU /7:6 .GZF[[[ '7%N\56 (5 3)0564F 8012(5 910:5 (16 'L?@7216 9)9@%1056 6O 3)2658@5
5H7/70 7'18526 (5 ] /7:6F ) ?@5 67827A731 ?@5 65@6 @6@L07)6 6O 9)(5' >50 V^Z .V
]
4 3)056 21 :5%1;
S'18526 (5 VU /7:6 6C) 3N1'1(16 (5 !"#$ &'('"F 9)76 9)66@5' ] /7:6 9101 05905652:10 31(1 3)0F 5
3)2658@5' 5H7/70 A):)6 (5 A)0'1 051%=6:731; P'1 7'185' !"#$ &'('" 3)' GEE 97H5%6 (5 %108@01
9)0 GEE 97H5%6 (5 1%:@01 )3@910L @' 5691J) (5 GEE H GEE H VU Q VUEEEE /7:6 )@ V_FU `aF 65'
3)2:10 ) ')$"*$+, () A)0'1:) (5 10'1B5'1252:) .+SbbF a,cF 5:3;4; $ 7'185' :50L 5665 :1'1#
2N) '56') ?@5 2C) @65 :)(16 16 3)056;
d1 e5/F )6 :1'12N)6 (16 7'18526 2C) 1@'52:1' (56:1 A)0'1 ?@12() 65 1@'52:1 )
2W'50) (5 3)056F 9)76 8501%'52:5 10'1B521(16 5' A)0'1:)6 (5 3)'90566C) 3)') DSb 5
fcXD ?@5 05(@B 65@ :1'12N) 5' @' A1:)0 ?@5 >1071 U 1 GEE >5B56;
-./.0. 1+($!+2 ,$ &'"$2
T5 @'1 7'185' ?@5 A)7 3071(1 3)' GZ '7%N\56 (5 3)056 .VU /7:64 A)0 5H7/7(1 5' @' 1'#
/752:5 80LA73) (5 ] /7:6F 650L 253566L07) ?@5 ) 676:5'1 051%7B5 3)2>506\56 9101 ?@5 65g1 9)66=>5%
5H7/70 1 7'185'; T76:5'16 (5 V^Z 3)056 6C) A05?I52:5'52:5 72(5H1()6 .1:07/@5' @' 2W'50)
(5 E 1 V^^ 1 31(1 3)0 ?@5 5H7/5'4; X665 3)2g@2:) (5 3)056 ?@5 6C) 5H7/7(16 1) '56') :5'9) &
1 91%5:1 (5 3)056; X%1 9)(5 650 563)%N7(1 (5 A)0'1 1 950'7:70 1 '5%N)0 >76@1%7B1JC) 9)66=>5%;
c)0 5H5'9%)F 65 @'1 7'185' & :):1%'52:5 3)'9)6:1 (5 :)26 (5 >50'5%N)F 9)(5#65 @610 @'1
91%5:1 (5 V^Z 3)056 3)' 905()'72h2371 (5 :)26 1>50'5%N1()6;
,16 16 3)056 2C) 650>5' 195216 9101 1 7'185'; X%16 :Y' ?@5 650 @61(16 :1'/&' 9101
3)%)070 ) 1'/752:5 80LA73) () 676:5'1 )950137)21%; T5 @'1 7'185' 0)@/1 :)(16 16 3)056F )
676:5'1 )950137)21% 2C) 650L 3191B (5 5H7/70 16 6@16 3)056 3)005:1'52:5; c101 5>7:10 ?@5 @'1
19%731JC) 0)@/5 :)(16 16 3)056 (769)2=>576F ) 2W'50) (5 3)056 ?@5 1 19%731JC) 9)(5 @610 9)(5#
0L 650 %7'7:1();
!#!
3 - Alm do l1ML
Os browsers tm uma paleta prpria chamada de !"#$ &' !$(') para a exibiao de imagens
em monitores de 256 cores. O cubo consiste de 216 cores. As outras 40 sao reseradas para o
sistema. Os cantos do cubo sao todas as oito posseis combinaoes de 255 e 0:
preto: 0,0,0,
azul 0,0,255,
erde 0,255,0,
azul ciano 0,255,255,
ermelho 255,0,0,
magenta 255,0,255,
amarelo 255,255,0 e
branco 255,255,255
As cores internas do cubo sao 4 cores intermediarias, uniormemente espaadas, or-
mando um total de 216. Quando uma imagem carregada no browser, ela tem seus pixels a-
daptados a paleta do sistema operacional. Se a cor nao existir, o sistema tentara cria-la por dis-
persao, alternando pixels. O browser automaticamente reduz as cores do browser ,cores de
undo, textos, etc., para cores da paleta.

!"#$%& ( ) *+,-.&/+ 0121% 0$3+

Se oc cria uma imagem em uma aplicaao graica, sobre um undo, digamos, azul, e es-
se azul nao az parte do cubo de cores, ele nao tera uma cor correspondente no browser. Se
oc quiser que o undo da imagem mescle de orma imperceptel com o undo azul da pagi-
na, oc tera que escolher um azul que exista no cubo de cores, caso contrario, percebera a
dierena quando a imagem or carregada em um sistema de 256 cores. Utilizando-se as cores
do Color Cube`, eita-se a dispersao incorreta das cores. A maior parte das aplicaoes graicas
possuem a paleta da \eb.
*+,+*+ -./012302)0.4
-./01230)0.4 ,ou anti-serrilha, o processo que adiciona cores intermediarias para otimizar
as areas serrilhadas da imagem. O processo aumenta o nmero de cores da imagem, aumen-
tando o tamanho da paleta ,e conseqentemente o tamanho da imagem,. Se oc abre o 56$/$1
76$8 e az um grande crculo de uma cor s, em um undo uniorme, sao grandes as chances de
se ter mais de 200 cores! Alm de aumentar o tamanho, 2./012302)0.4 tambm reduz a capacidade
de compressao da imagem.
-./012302)0.4 uma tcnica necessaria. Imagens com curas ou linhas inclinadas sem 2./01
2302)0.4 icam com uma qualidade inaceitael. A soluao realizar o 2./012302)0.4 com o menor
nmero de cores possel.

3-4
! # $%&' () *+,-









!"#$%& ( ) *+, &-.")/+%%"01& 2+, 3",&4 + 35,
&-.")/+%%"01& 2+, 6&"7548 !5-.+9
1..:9;;<<<8="00+%/".+/835,

!"#$%& > ) ?$.%5 +7+,:05 35, &-.")/+%%"01& ,5/.%&-@5 @+.&01+
!"#$%&'$&($") .)(/ 012314 .4)5%/'13 /'
6'17/83 0)' 928() :4183.14/8:/; <218()
9)4 8/0/33=46) .)4 2'1 6'17/' 81 .=7681
0)'56818() 0)' 1 6'17/' (/ 928() & 8/#
0/33=46) 04614 1 6'17/'> 8) 1.%601:6?) 74=960)>
3)54/ 2'1 *+,'$-& (1 6'17/' (/ 928(); @3:)
71418:64= A2/ 1 ?1461BC) (/ 0)4/3 3/4= 9/6:1
0)44/:1'/8:/; D)') 1./813 2'1 0)4 .)(/
3/4 /30)%E6(1 0)') :4183.14/8:/> 13 0)4/3
68:/4'/(6=4613 ./4'18/0/4C) 81 321 0)4 )46#
7681%; F/ 8) GE):)FE). ) (/3/8E) 9)4 9/6:)
3)54/ ) 928() 54180)> 81 E)41 (/ /30)%E/4 1
:4183.14H8061> 13 0)4/3 .4IJ6'13 1) (/3/8E)
./4'18/0/4C) 5418013 / 8C) :4183.14/8:/3>
1.14/0/8()> .)4:18:)> 3)54/ 2' 928() (/
)2:41 0)4 K?/L1 967241M;

!"#$%& A B C7+,:05 @+ DEF G&-.&/,& H$+ &:&%+3+
:5% .%I/ @5 DEF H$+ G5" &-.")/+%%"01&8
G)(/ 8C) E1?/4 3)%2BC) .141 /33/ .4)5%/'1 3/ 1 6'17/' (/ 928() 9)4 644/72%14; N *.)$(#*/
K0131'/8:) (1 6'17/' (/ 94/8:/ 0)' 1 (/ 928()M (/?/4= 3/4 ./49/6:)> '13 63:) & 6'.)33O?/%
!#P
3 - Alm do l1ML
com os browsers atuais. Nesses casos, preciso aaliar o que pior: icar sem o !"#$%!&$!'$"(, ou
correr o risco de ter antasmas` em olta de partes da imagem. Se ambos orem inaceitaeis,
sera preciso repensar o projeto.
)*+*,* ./0123''4/ 567
A compressao reduz bastante o tamanho da imagem. O primeiro ormato comprimido
suportado na \eb oi o ormato GIl ou 52!18$9' 6"#3298!"(3 7/20!# * 1rata-se de um ormato
de compressao de bitmaps pertencente a Unisys ,SPR\,Compusere,. Suporta imagens inde-
xadas at 8 bits ,256 cores,. Usa como mtodo de compressao o algoritmo Lempel-Zi-\elch
,LZ\, que proporciona uma compressao mdia da ordem de 4:1 sem perdas. A imagem pare-
ce idntica a original.
:'3 567 para comprimir qualquer coisa que nao seja otograica como desenhos etori-
ais, otos pequenas, etc. Imagens otograicas comprimem melhor em JPLG.
O algoritmo GIl consiste em substituir seqncias horizontais de pixels da mesma cor
com um nmero indicando o tamanho da seqncia. Linhas horizontais idnticas comprimem
linha por linha. Qualquer regularidade horizontal sera comprimida. Desta orma, imagens que
tm semelhanas horizontais sao beneiciadas: uma imagem bitmap de um crculo, comprimido
com GIl, tem quase o mesmo tamanho que a imagem GIl de sua metade superior.
!"#$%& ( ) *+%"&, "-&#./, #"0, 1. -.,-& 1"-./,23 . 43/5.613 1"0.%./5. 78889:";;.%,"5.,943-<
3-6
3 - Alm do l1ML
!"#$%&'(')%"#* % #$'",-'$."/0'
O ormato GIl mais antigo em uso na \eb chamado de GIl8. O ormato mais no-
o, GIl89, mais eiciente e possui mais recursos como a capacidade de entrelaamento,
transparncia e animaao.
Normalmente, GIls armazenam pixels de cima para baixo. Imagens entrelaadas arma-
zenam pixels ora de ordem linear. As imagens sao transeridas totalmente em quatro passos.
Na web, a exibiao de imagens entrelaadas costuma demorar mais que imagens comuns mas
produz um eeito que aparenta uma elocidade maior.
Lm GIl89, uma cor qualquer pode ser substituda pela cor transparente. Somente uma
cor pode ser trocada.. Se houer uma ariaao pequena da cor escolhida como transparente,
esta continuara isel como antes. A transparncia consiste em escolher o ndice de uma cor e
deini-la como transparente. A antagem de imagens transparentes que elas nao sao
retangulares`, mas aparentam ter a orma do objeto que mantee as cores iseis.

Figura 7 - Imagem
transparente versus imagem
no-transparente. O branco
da primeira imagem foi
trocado pelo transparente.
1"0)'(2*
Varias imagens GIl podem ser armazenadas em um nico arquio para serem exibidas em
seqncia. Com isto, possel simular animaao. GIls animados sao bastante ersateis e con-
tm diersos eeitos dierentes: repetiao eterna, tempos dierentes para cada imagem, etc.
3%45(2* 4% /*$%, % #')'"6*
Reduzir cores em GIl as torna menores. O processo dee ser realizado com cuidado para ei-
tar uma reduao excessia que resulte em grande perda de qualidade. No 76*#*86*-, pode-se
usar o 60,#*9$')' 4% /*$%, e inluenciar a reduao de cores especicas.
loje ja existem arias erramentas que azem automaticamente a reduao de cores. Al-
gumas ainda opinam sobre o melhor ormato ,GIl ou JPLG, para uma imagem.
3-
3 - Alm do l1ML
!"#"$" &'()
JPLG, ou &*+,- '.*-*/012.304 (5230- )0*62, a melhor orma de comprimir imagens oto-
graicas. Com JPLG, possel obter uma compressao tpica que aria de 10:1 a 100:1 depen-
dendo da qualidade desejada.
Dierente de GIl, JPLG suporta o ormato RGB e, portanto, pode armazenar inorma-
oes de cor 24 bit ,16, milhoes de cores,. JPLGs progressias obtm o mesmo eeito que
as GIls entrelaadas.
JPLG nao garante a mesma compressao em imagens pequenas ou desenhos deido ao
seu *730.318. Veja os tamanhos de imagens de um pixel ,1x1, de 4 cores em arios ormatos:

JPLG: 949 bytes
BMP ,sem compressao,: 2 bytes
GIl: 41 bytes

Ja uma imagem grande e detalhada ,uma otograia, comprime bastante bem em JPLG.
Arquio earthrise.jpg,gi,bmp ,400x302 pixels, 256 cores, do CD do ASI1:

JPLG: 8,8 kB
GIl 32 kB
BMP 119 kB

Para reduzir o tamanho, JPLG separa as matizes de cor dos componentes de brilho e
mantm uma boa cpia da ersao em preto-e-branco da imagem. Joga ora dierenas de cor
indistingueis. Diide a igura em zonas que sao comprimidas indiidualmente.
A compressao sempre realizada com perdas, mesmo quando na melhor qualidade. A
imagem inal, em geral, menor que a equialente GIl ,desde que nao seja muito pequena,.
Imagens mais ntidas sao maiores que imagens mais borradas. A orma de reduzir o tamanho
borrar a imagem ,cria mais cores intermediarias que sao descartadas, diminuindo o seu ator de
qualidade. JPLG nao trabalha com cores indexadas , iniael indexar 16 milhoes de cores - o
*730.318 seria imenso,. Reduzir cores, portanto, nao reduz o tamanho.
!"#"9" ':)
O PNG - '*0-1;<3 :3-=*0> )012.+?4 um noo ormato que oi desenolido pela \3C
especialmente para a \eb. L um ormato que suporta compressao sem perdas, imagens de
24bits, eeitos progressios ,entrelaamento, mais eicientes, transparncia de arios neis,
canais ala de 8 bits e uma srie de antagens que deem torna-la a substituiao ideal para ima-
gens GIl.
3-8
3 - Alm do l1ML
Varios programas ja suportam PNG, mas nao todos os seus recursos. Uma das anta-
gens nao suportadas pelos browsers a capacidade de exibir 256 neis de transparncia. Alm
dos browsers, os programas de desenolimento e tratamento de imagens como o !"#$#%"#& (
tambm suportam e manipulam com PNG, que o ormato natio do )*+,#-./0* 10,.2#,34.
Veja mais inormaoes sobre PNG em http:,,www.w3.org,PNG.
5676 8*9#:$ +#- $*;.<*4
Vimos na primeira parte deste curso os principais usos das tabelas l1ML. Neste captulo mos-
traremos exemplos de tabelas aplicadas a diagramaao da pagina. Os recursos aqui apresenta-
dos sao totalmente substitueis por olhas de estilo, porm, a isualizaao da pagina podera
ser prejudicada seriamente se o browser nao suportar CSS. Como as tabelas existem ha mais
tempo, muito mais raro encontrar browsers que nao suportam tabelas, embora os que nao
suportam posicionamento com olhas de estilo estao bastante prximos, nos browsers ersao
3.0.
Para diagramar com tabelas preciso saber como alinhar objetos dentro de tabelas, co-
mo combinar duas ou mais clulas em uma, remoer os espaos entre clulas e entre a clula e
o texto alm de criar tabelas dentro de tabelas. As seoes seguintes tratarao de alguns desses
temas.
Por nao ser uma linguagem apropriada a diagramaao, l1ML impoe diersas limitaoes
quando a organizaao do texto e imagens em uma pagina. Como imos na seao anterior, as
tabelas oerecem algum controle. Um pouco mais controle conseguido utilizando imagens
iniseis ,pois a dimensao das imagens certa enquanto a das tabelas nao ,. Mas ha ainda
arias outras limitaoes tambm reerentes a colocaao das imagens que s se resolem com
olhas de estilo. Lm programas como o !*=.)*3.,, oc coloca o texto e as imagens onde oc
quer. l1ML sem olhas de estilo nao oerece esse tipo de manipulaao bidimensional. L ne-
cessario usar truques para simular este controle se oc nao puder depender de olhas de estilo.
5676>6 ?@1 /. :- &0A.<
Lste truque, proposto por Daid Siegel em seu liro B,0*C/# %0$.4 D,,*4*/#,.4 consiste da utili-
zaao de uma imagem de um pixel ,1x1, de cor transparente ou igual a cor de undo da pagina.
A imagem resultante inisel e pode ser usada numa pagina l1ML para empurrar` textos,
colunas e linhas de tabelas, imagens, etc.
A imagem pode ser esticada usando os atributos lLIGl1 L \ID1l ou usar margens,
atras dos atributos lSPACL e VSPACL. Por exemplo:

<IMG SRC="pixel.gif" HEIGHT=11> ou
<IMG SRC="pixel.gif" VSPACE=5> Espao vertical de 11 pixels
3-9
! # $%&' () *+,-
<IMG SRC="pixel.gif" WIDTH=11> ou
<IMG SRC="pixel.gif" HSPACE=5> Espao horizontal de 11 pixels
$ .'/01' /%.23/#41 015/%'1261 7)' / 8/41 () 6196) ): (/ ):65/ .'/01' ;:1 146< /) 41:
%/()= >46) ?)(1 415 /%615/() /65/@&4 ()4 /65.8:6)4 $->AB= C ?)44D@1% (1E.2.5 %/50:5/4 'D2.'/4
?517.4/4 ?/5/ 6/81%/4 75./2() :'/ %.23/ F+GH ;:1 7)26123/ 8%)7)4 F+IH 7)2612()J 7/(/
:'J :'/ K2.7/ .'/01' (1 L ?.91% (1 /%6:5/M%/50:5/ ?1%) @/%)5 (141N/() (1 %/50:5/M/%6:5/=
!"#"#" %&'()* +, -./01& 2(3 *&4,5&6
+/81%/4 41' 8)5(/4 (1265) (1 6/81%/4 41' 8)5(/4 ?)(1' 415 :4/(/4 ?/5/ 51/%.O/5 ) %/P):6 (1
6196) 1 .'/0124 1' :'/ ?<0.2/ *+,-= Q)' 144/ 6&72.7/ ?)(1#41 7)2465:.5 :' 14?1%3) (1
(./05/'/RS) 4)E.46.7/() 1 )50/2.O/5 6196) 1 .'/0124 (1 E)5'/ 75./6.@/J E:0.2() () 146.%) 65/(.#
7.)2/% (/4 ?<0.2/4 *+,-=
I1@1#41 (14%.0/5 /4 8)5(/4 (/ 6/81%/ 1 E/O15 ) cellspacing 1 cellpadding .0:/.4 / O1#
5)= T41 :'/ %/50:5/ /84)%:6/ ?/5/ / 6/81%/ 1 ?/5/ /4 7&%:%/4 ?/5/ 41 615 '/.)5 7)265)%1= */@12()
217144.(/(1 (1 14?/R) 1' 85/27)J ?)(1#41 :4/5 6/26) cellspacing 7)') cellpadding=

73&/,16 8,2(8*&+&6
U/5/ 7)%/5 .'/0124 3)5.O)26/%'1261 ): @156.7/%'1261 / '1%3)5 )?RS)J ;:/2() 2S) 41
61' E)%3/4 (1 146.%)J & :4/5 6/81%/4= V 7)265)%1 & '/.)5 12651 ?%/6/E)5'/4= $ WE5/0'126/RS) 1
7)%/01'X (/4 .'/0124 & :'/ 6&72.7/ ;:1 @.4/ (.'.2:.5 ) 61'?) (1 65/24E15Y27./ (/4 .'/0124J
41 /?5)@1.6/2() () 7/731 () 85)Z415J ;:1 2S) 7/5510/ .'/0124 51?16.(/4= $ .'/01' & ?/56.(/
1' ?1(/R)4 (1 E)5'/ ;:1 /4 ?/5614 ;:1 ':(/' 41N/' .'/0124 (.E1512614 (/4 ?/5614 ;:1 41
'/26&' /65/@&4 (/4 ?<0.2/4=
$2614 (1 (.@.(.5 :'/ .'/01' ?1%/4 7&%:%/4 (1 :'/ 6/81%/J 1%/ ?517.4/ 415 517)56/(/= >46)
?)(1 415 E1.6) '/2:/%'1261 1' :' ?5)05/'/ 7)') ) 9+(4, :;(*(<;(- ): (1 E)5'/ /:6)'<6.7/
2) =&28(3,+0& >08,?(8@6J ?)5 191'?%)=
!#L[
3 - Alm do l1ML
Ao acrescentar as imagens dentro das clulas, elas se acomodarao e ocuparao o espao
que or necessario. Se or preciso colocar duas imagens so-
bre outra ou imagens ao lado de uma imagem dee-se usar
os atributos COLSPAN e RO\SPAN para rearrumar a
tabela e permitir que as peas se encaixem. No inal, dee-se
desligar o espao entre clulas, as margens e as bordas para
que a imagem olte a ser uma s.

L preciso ter o cuidado de nao deixar espaos nem
quebras de linha dentro do bloco 1D ... ,1D que
contm a imagem . Se isto ocorrer podem acontecer situa-
oes como a pagina ao lado, onde a imagem nao se recom-
poe totalmente.

!"!" $%&'()
$%&'() ,quadros, sao painis que diidem a area de isualizaao do browser em subjanelas, cada
uma capaz de exibir uma pagina dierente. Para mostrar duas paginas ao mesmo tempo dentro
de uma janela do browser preciso ter pelo menos trs arquios. Dois sao os arquios l1ML
das paginas que serao exibidas. O outro uma pagina l1ML que contm apenas as instruoes
para que o browser saiba se diidir em subjanelas.
Logo, para diidir uma janela em rames, preciso criar essa pagina l1ML que especii-
ca as dimensoes relatias ou absolutas das subjanelas em relaao a janela que ira conter a pagi-
na. Uma pagina de rames nao um *+,-'(./+ l1ML, pois nao contm inormaao. 1odo do-
cumento l1ML, como sabemos, dee ter a orma:
<html>
<head> ... </head>
<body> ... </body>
</html>
O bloco <body> contm a inormaao da pagina. O bloco <head>, contm meta-
inormaao, ou seja, inormaao sobre a pagina. Paginas que deinem a estrutura de subjanelas
,paginas de rames, tm uma estrutura dierente:
<html>
<head> ... </head>
<frameset atributos> ... </frameset>
</html>
e nao podem conter blocos <body>
1
.

1
At podem conter blocos <BODY>, mas isto ou os transorma em paginas de inormaao, ou nao causa eeito
algum. Um bloco <BODY> antes do <FRAMESET> az com que o browser ignore o <FRAMESET>. Um bloco <BODY>
3-11
3 - Alm do l1ML
!"!"#" %&'()')(* +,&-.*
O bloco <frameset> deine a diisao da janela em /-01*& ,usando o atributo rows, ou .23
/)0*& ,usando o atributo cols, ou simultaneamente em linhas e colunas ,usando ambos os atri-
butos,. Os atributos especiicam a largura ou altura de cada rame usan-
do alores absoultos, em pixels, ou relatios, em percentagens da largura
ou altura da janela principal. Por exemplo, um <FRAMESET> com a orma
mostrada igura ao lado deinido pelo cdigo
<FRAMESET COLS="25%,25%,50%"> ... </FRAMESET>
que diide a janela principal em trs colunas, tendo as duas primeiras ' da largura total, e a
ltima, metade da largura total. De orma semelhante pode-se diidir a janela em linhas. Neste
outro exemplo ,igura ao lado,:
<FRAMESET ROWS="100,200,*,100"> ... </FRAMESET>
a janela oi diidida em quatro linhas, tendo a primeira e quarta 100 pixels
cada de altura, a segunda 200 pixels e a terceira, o espao restante. Combi-
nando os dois argumentos obtm-se uma janela com 12 subjanelas.
Um bloco <FRAMESET>...</FRAMESET> s pode conter dois tipos de elementos:
descritores <FRAME>, que deinem a pagina l1ML que ocupara uma janela. A pa-
gina l1ML podera ser uma pagina de inormaao comum ou outra pagina de ra-
mes que diidira a subjanela noamente em linhas e,ou colunas.
sub-blocos <FRAMESET> ... </FRAMESET> que diidirao outra ez a subjanela
,em linhas e,ou colunas, e poderao conter descritores <FRAME> e noos sub-
blocos <FRAMESET>.
O nmero de sub-blocos para cada <FRAMESET> dependera do nmero de linhas ,ou co-
lunas, deinidas. Para diidir uma janela em linhas e colunas de orma irregular ,com clulas
que atraessam mais de uma linha ou colu-
na,, pode-se proceder de duas ormas:
usar um 40-.2 <FRAMESET>, con-
tendo elementos <FRAME> que re-
erem-se a paginas de rames ,pa-
ginas que tambm deinem um
<FRAMESET>,, ou
usar arios <FRAMESET> em casca-
ta na mesma pagina.

aps o <FRAMESET> sera ignorado por browsers que suportam rames, mas sera lido por browsers antigos que nao
os suportam.
3-12
3 - Alm do l1ML
Usaremos as duas ormas para montar a janela ao lado. Na primeira ersao, utilizaremos
!"#$ arquios de rames: frset1.html diidira a janela principal em duas colunas, e fr-
set2.html diidira a segunda coluna em duas linhas. Na segunda ersao, precisaremos de
apenas %& arquio de rames ,frset.html,. As duas ersoes utilizarao trs arquios de inor-
maao: um.html, dois.html e tres.html. Visualmente, o resultado inal o mesmo, mas as
duas ormas podem ser manipuladas de orma dierente.
Na primeira ersao temos !"#$ arquios. Os trechos em negrito indicam as ligaoes entre
eles. O primeiro frset1.html, que reerencia uma pagina de inormaao:
<html>
<head> ... </head>
<frameset cols="50%,50%">
<frame name="janela1" src="um.html">
<frame name="janela2" src="frset2.html">
</frameset>
</html>
e chama frset2.html, com mais duas paginas de inormaao, listado abaixo:
<html>
<head> ... </head>
<frameset rows="35%,65%">
<frame name="janela2_1" src="dois.html">
<frame name="janela2_2" src="tres.html">
</frameset>
</html>
A igura abaixo mostra a organizaao das paginas de inormaao e das paginas de rames
na janela do browser.
!"#$%& ()*
+,-./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
pginas de
informao
pgina de
informao
pgina de
frames
pgina 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
3-13
3 - Alm do l1ML
Obsere que ha !"#$ &'()*$ de paginas. No nel mais alto esta a pagina frset1.html, que
ocupa toda a janela do browser. No segundo nel estao os arquios um.html e frset2.html.
L no terceiro nel, encontramos os arquios dois.html e tres.html, que estao dentro de
frset2.html.
Na segunda ersao, temos apenas +, arquio de rames contendo reerncias para os
trs arquios de inormaao. Lm negrito esta mostrado o segundo -".,)$)! ,obsere que ele
substitui o elemento <FRAME> que chamaa 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 neis. No primeiro, a pagina de rames fr-
set.html, no segundo, as paginas de inormaao. A aparncia inal a mesma, nas duas er-
soes, mas na primeira ersao ha uma janela a mais ,janela2, que pode ser manipulada ia
JaaScript ou l1ML.
/0/010 23&!"34) 53$ .4(3$ 53$ ('&6+43$
O comportamento usual dos browsers o de abrir uma noa pagina sempre dentro da janela
atual. L possel alterar esse comportamento atras do atributo 1ARGL1 em nculos de
hipertexto A lRLl e elementos BASL.
Se a janela2 or utilizada como alo de um link l1ML:
<a href="pagina.html" TARGET="janela2"> link </A>
os rames janela2_1 e janela2_2, que estao em um nel 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 neis.
Se o link estiver dentro da pagina dois.html ou tres.html, a sintaxe abaixo, usando
o nome especial _parent causara um resultado equialente:
<a href="pagina.html" TARGET="_parent"> link </A>


3-14
3 - Alm do l1ML
!"#" %&'()*+,)-
!"#"." /*-0123 *-41-,-3
Para azer com que uma imagem sira como origem de um nculo de hipertexto basta
coloca-la dentro de um bloco <A HREF>. Mas se o que se deseja que partes dierentes da
imagem apontem para lugares dierentes, preciso usar imagens mapeadas ou )*-01*-43. Ima-
gens mapeadas sao muito usadas em barras de naegaao, 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 seridor ,no seu
proedor, e as que uncionam do lado do cliente ,no seu computador,. O primeiro tipo neces-
sita de um programa CGI e um arquio especial que contm as coordenadas das areas atias
armazenados no seridor. L uma soluao obsoleta e mais complicada. O segundo realiza tudo
sem acessar a rede e portanto mais rapido e mais eiciente. 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 atias`. A maior parte dos editores l1ML possuem erramentas para gerar co-
ordenadas, mas se a sua nao tier, 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 dierena que tm um atributo adicional in-
ormando o nome do bloco que deine o mapa que sera utilizado. O atributo !"#$%&:
<BODY>
<IMG SRC="banner.gif" USEMAP="#isoptera" ALT="Menu de Opes">
</BODY>
O atributo !"#$%& acima possui um alor '()*+,-./ que corresponde ao nome de um
mapeamento. Inclumos uma estrutura de mapeamento na pagina atras 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:
3-15
3 - Alm do l1ML
<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 atias da igura, oc precisara descre-las, inormando a forva
,!"#$, %&'()*+#& ou ',%'#&, e suas coordenadas ,lista de nmeros separados por rgulas,
alm da URL que deem seguir ,atributo HREF,. Lsses atributos do descritor -)%&). deinem
a area utilizada.
Os polgonos ,SHAPE="poly", sao deinidos em termos das coordenadas de seus rti-
ces. Cada coordenada ,par de dois nmeros, corresponde a um rtice ,x, y, do mesmo. A
origem ,0,0, corresponde ao canto superior esquerdo da imagem /011234567. Crculos
,SHAPE="circle", deem incluir trs nmeros separados por rgulas como coordenadas. Os
dois primeiros sao a coordenada do centro do crculo e o ltimo seu raio. Retangulos
,SHAPE="rectangle", sao deinidos em termos de quatro nmeros: as coordenadas no canto
superior esquerdo e do canto inerior direito.
O bloco <MAP> pode estar em qualquer lugar da pagina pois identiicado pelo nome e
s se torna atio depois que a pagina inteira or carregada.
.1.2. .vaio, raeo e tvgiv.
Componentes llash e Shockwae, imagens e deos podem ser includos em uma pagina
usando o elemento LMBLD ou o elemento OBJLC1. Lmbora o ltimo seja recomen-
dado pela especiicaao do l1ML 4.0, o suporte a LMBLD mais antigo e unciona tanto
nos browsers Internet Lxplorer como Netscape.
3-16
3 - Alm do l1ML
Os atributos de LMBLD ariam conorme 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 disponeis em IMG. A sintaxe mnima 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 '$()!"#$% disponel 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 tpica :
<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 aparncia do #$+,-./. O atributo LOOP
pode ter os alores true, false ou um nmero indicando o nmero de ezes que o som dee
tocar. AUTOSTART pode ser true ou false indicando se o som dee comear 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 includo
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 includos em paginas l1ML usando o elemento <EMBED>. A sintaxe tpica :
<EMBED SRC="filme.mov" CONTROLS=console HEIGHT=260
WIDTH=450 AUTOPLAY=false></EMBED>
Cada ,-"2*$3 tem seus prprios 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): <=,-%;);, possel incluir deos usando o a-
tributo DYNSRC de <IMG>:
<IMG DYNSRC="filme.mov">
3-1
3 - Alm do l1ML
!"#"!" %&'()
llash um ormato de multimdia desenolido pela Macromedia que oerece a possibi-
lidade de criar animaoes, interatiidade e integraao com audio e deo. Os arquios sao mui-
to menores que os utilizados nas tecnologias padrao da \eb pois o ormato das imagens e
animaoes do llash se baseia em etores ,ector, e nao em bitmaps. Imagens etoriais descre-
em os desenhos, ontes e comportamentos em termos de equaoes, que ocupam bem menos
espao de armazenamento que as animaoes baseadas em bitmaps, que consistem da repetiao
de arquios que contm o mapa completo de cores e pixels de cada tela.
la diersas antagens no ormato oerecido pela tecnologia llash. Os arquios sao me-
nores, sao escalaeis sem perda de qualidade, suportam som integrado, podem ser desenoli-
dos sem a utilizaao de programaao, contam com amplo suporte e ainda podem ser controla-
dos atras de parametros passados em l1ML ou JaaScript.
As desantagens se baseiam principalmente em se tratar de um ormato proprietario. L
preciso adquirir um sotware para produzir arquios llash. Para exibi-lo, preciso azer o
download de um plug-in. Nao ha suporte em Linux ou Unix e nem para browsers nao-
graicos, que perdem totalmente o contedo da pagina.
Para criar componentes llash preciso ter o pacote Macromedia llash 4. la uma ersao
de demonstraao que ale por 30 dias no site http:,,www.lash.com,. O objetio desta seao
apenas mostrar como se pode usar um componente llash genrico que ja oi criado preia-
mente.
*+,-./01'23+ 4+ (516.4+1
Pode ser necessario conigurar o seridor \eb para que ele saiba serir arquios llash.
Inorme-se no seu proedor sobre a coniguraao. Se oc or o webmaster responsael por
um seridor, oc deera acrescentar a seguinte relaao tipo MIML,extensao de arquio para
que o seridor reconhea o ormato:
7.8+9(0:;.8+< application,x-shockwae-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>
3-18
3 - Alm do l1ML
!"#" %&&'()* +,-,
!"#"." / 01( *23 ,&&'()* +,-,4
A \eb popular porque suas inormaoes, na orma de texto e imagens, sao iseis indepen-
dente da plataorma ,tipo de maquina e sistema operacional, do usuario. Nem sempre poss-
el er determinado deo dependente de plug-in, ou um certo site interatio dependente de
llash, pois as ezes o programa necessario a execuao da aplicaao depende de plataorma e
pode ser at que nao exista para a plataorma onde roda seu browser.
Applets sao pequenas aplicaoes 567(&(67(6)(* 7( &',),839:, ,por isso populares na \eb,,
geralmente escritas em uma linguagem de programaao chamada Jaa, que tm sua execuao
iniciada pelo browser. Dierentemente do que ocorre com as linguagens embutidas em blocos
<SCRIPT> ,JaaScript,, o ;<75=3 Jaa escrito pelo programador da aplicaao nao 56)(9&9(),73
nem isualizado pelo browser, ja que oi antes ;3:&5',73 para uma linguagem de maquina.
Browsers que suportam Jaa possuem uma &',),839:, -59)1,', a Jaa Virtual Machine`, que
simula uma maquina Jaa em sistemas operacionais dierentes como \indows, Macintosh,
Unix, etc. S a maquina irtual Jaa capaz de interpretar a linguagem de maquina Jaa. Atra-
s dela, browsers sao capazes de rodar programas soisticados que podem desde oerecer uma
interace de ormularios mais segura interatia, at mostrar audio, deo, 3D e sistemas de co-
municaao isual interatia em qualquer plataorma.
!"#">" ?1,673 1*,9 ,&&'()*
Applets podem ser usados para desenoler aplicaoes que seriam imposseis em
l1ML com ou sem linguagens embutidas ,como JaaScript, e ugir das limitaoes do l1ML,
do protocolo l11P e do prprio browser. Com um applet, possel (*)(67(9 um browser
azendo-o suportar, por exemplo, noos protocolos de comunicaao e segurana, noos or-
matos de mdia, etc. O preo dessa liberdade sua raca integraao com o l1ML da pagina.
Aplicaoes \eb baseadas em Jaa pouco ou nada aproeitam do l1ML da pagina a nao ser
um espao graico para sua exibiao. O browser simplesmente resera um espao para rodar o
programa, e o programa assume aquele espao e az o que bem quiser ,limitado apenas por
restrioes de segurana,. L possel aumentar essa integraao com linguagens embutidas no
l1ML como JaaScript.
Applets sao aplicaoes graicas e precisam de uma pagina l1ML para poderem executar.
Sao exibidos na pagina de orma semelhante a imagens: carregam um arquio externo, ocupam
um espao com determinada altura e largura, e podem ter seu alinhamento em relaao ao texto
deinido pelos mesmos atributos presentes em <IMG>. A sintaxe do elemento l1ML
<APPLET> esta mostrada abaixo. 1udo o que nao estier em negrito opcional:
3-19
! # $%&' () *+,-
<APPLET
CODE="nome_do_programa.class"
HEIGHT="altura em pixels"
WIDTH="largura em pixels"
NAME="nome_do_objeto"
CODEBASE="diretrio 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>
./0121341'1341 (1 <IMG>5 ) 1%1'134) <APPLET> & 6' 7%)8) 1 9)::6/ 6' (1:82/4)2 (1
018;<'134) </APPLET>= >3421 <APPLET> 1 </APPLET> 9)(1 ;<?12 313;6' )6 ?@2/):
1%1'134): <PARAM>5 A61 8)34&' 9<2B'142): 3181::@2/): )6 3C) D(1913(1 () <99%14E 9<2< )
0638/)3<'134) (< <9%/8<FC)= G<(< 1%1'134) <PARAM> 8)34&' 6' 9<2 (1 <42/764):
)72/H<4I2/):= J ?<%)2 () <42/764) NAME & (10/3/() 91%) 92)H2<'<()2 () <99%14= $42<?&: (1%15 )
92)H2<'< 9)(1 2186912<2 6' ?<%)2 A61 ) <64)2 (< 9@H/3< DA61 3C) 9218/:< :<712 K<?<E (10/3/6
3) <42/764) VALUE=
J: <42/764): CODEBASE 1 ARCHIVE :C) 6:<(): )98/)3<%'1341 9<2< %)8<%/L<2 <99%14: 1'
)642): :12?/()21: 1 /'9)24<2 )642): 'I(6%): () 92)H2<'<5 21:9184/?<'1341= J <42/764)
MAYSCRIPT & 3181::@2/) :1 ) <99%14 921413(1 412 <81::) <) 8I(/H) K<?<M82/94 (< 9@H/3<= M1'
1:41 <42/764)5 A6<%A612 4134<4/?< () <99%14 (1 <81::<2 ?<2/@?1/: )6 1N1864<2 063FO1: )6 '&4)():
K<?<M82/94 8<6:<2@ 1' 6'< 1N81FC) (1 :1H62<3F< 3) <99%14=
P) *+,- Q=R5 <99%14: 4<'7&' 9)(1' :12 /38%6S(): 1' 6'< 9@H/3< 6:<3() ) 7%)8) H1#
3&2/8) <OBJECT>5 A61 4<'7&' :12?1 9<2< /'9)24<2 /'<H13:5 !"#$%&'( 1 8)3:426/2 )*+,-( /34123):=
>N/:41' '6/4): <99%14: T41/: (/:9)3S?1/: H2<46/4<'1341 3< U17 A61 9)(1' :12 6:<():
9)2 <64)21: (1 9@H/3<: U17 1 92)H2<'<()21: K<?<M82/94 :1' A61 9218/:1' :<712 K<?<= J: '</:
9)96%<21: /'9%1'134<' .+''-*( 9<2< 2)%<H1' (1 41N4)5 S8)31: /341%/H1341:5 H2@0/8):5 9%<3/%;<:
(1 (<(): 1 /34120<81: 9<2< 7<38): (1 (<():= $ '</)2/< :C) 8)30/H62@?1/: <42<?&: (1 9<2B'142):
A61 ) <64)2 (< 9@H/3< (10/31 1' 1%1'134): <PARAM>= P) <9V3(/81 $ ;@ 6'< %/:4< (1 :/41: )3(1
:1 9)(1 138)342<2 4</: <99%14:= >N1'9%): :C) ) /+,-"+' Dhttp://www.gamelan.comE 1 ) :/41
(< M63 :)721 K<?< Dhttp://java.sun.comE= $ :1FC) < :1H6/2 '):42<2@ 8)') /38%6/2 6' <9#
9%14 )74/() 1' 6' (1::1: :/41:=
!#WR
3 - Alm do l1ML
!"#"!" %&'& ()*+,(- ,' .//+01 0' ,'. /23().
O exemplo a seguir mostra como incluir o applet
Clock2 em uma pagina \eb. Lste applet distri-
budo pela 4,) gratuitamente em
http://java.sun.com e juntamente com o ambi-
ente de desenolimento Jaa. O applet pode ser
includo na pagina da orma 506.,+1, sem especiicar
parametros, ou de orma personalizada, deinindo
parametros que alteram a cor de undo, dos pontei-
ros e do mostrador.
Como que o autor de uma pagina l1ML sabe-
ra quais parametros usar e conigurar Vendo-o un-
cionar! O applet distribudo com uma pagina l1ML
que mostra como usa-lo. Lle dee ser includo na pagina l1ML usando o nome do arquio
executael jaa, que neste caso Clock2.class e dee ocupar uma area de no mnimo
10x150 pixels ,tudo isto esta na pagina,:
<applet code="Clock2.class" height=150 width=170></applet>
Com o cdigo acima, o relgio aparece na pagina como mostrado na igura, com ponteiros
azuis, isor com letras pretas e undo branco. O autor do applet permite, porm, que o au-
tor da pagina altere esses parametros atras de descritores <PARAM>. Os trs parametros
modiicaeis sao:
bgcolor - cor de undo ,branco 506.,+1,
fgcolor1 - cor dos ponteiros e dial ,azul 506.,+1,
fgcolor2 - cor dos nmeros e ponteiro de seguntos ,preto 506.,+1,
1odos os parametros deem receber como alor um nmero hexadecimal representando
uma cor no ormato RGB ,mesmo ormato usado em l1ML,: ff0000 - ermelho,
ffffff - branco, 0000ff - azul, etc.
Portanto, para incluir o relgio acima em uma pagina com um undo cinza claro, pontei-
ros marrons e letras douradas, o cdigo seria:
<applet code="Clock2.class" width=170 height=150>
<param name=bgcolor value="dddddd">
<param name=fgcolor1 value="800000">
<param name=fgcolor2 value="808000">
</applet>
3-21
3 - Alm do l1ML
!""#$%& ($)*%*&
Caso o applet esteja em um diretrio dierente daquele onde esta a pagina, sera necessa-
rio usar o atributo CODEBASE, para inormar a URL base. Por exemplo, se o arquio .class
que usamos acima estier em http://www.abc.com/clocks/, precisamos usar:
<applet codebase="http://www.abc.com/clocks/" code="Clock2.class" ... >
...
</applet>
+,-,., /*01#2&3*
Applets oerecem um meio para escapar das limitaoes do browser e do l1ML sem li-
mitar o pblico-alo da pagina de acordo com a plataorma de computaao que possuem. L
preciso, porm, lembrar que podem ocorrer problemas. Como applets sao programas, podem
conter ou proocar erros. Geralmente esses erros nao sao graes a ponto de comprometer a
segurana 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, escreer no seu
disco ou imprimir. Mas os erros podem lear o applet a nao uncionar, ou pior, a consumir os
recursos de memria do browser e do sistema, orando o usuario a abandonar sua execuao ,e
possielmente a do browser,. Applets escritos para as ersoes Jaa 2 podem nao uncionar at
em browsers recentes, como o 40%$(0$% 56"#*($( .. Lmbora uncionem em plataormas dieren-
tes, applets podem rodar at 30 ezes mais rapido em certas plataormas. Isto depende da qua-
lidade da maquina irtual suportada pelo browser.
Leando em conta todas essas questoes, oc dee usar applets quando or necessario
incluir recursos que o browser e o l1ML sozinhos nao seriam capazes de oerecer. L preciso,
porm, lear em conta o risco de inacessibilidade caso o applet nao uncione por um motio
ou outro. Se possel, dee haer uma orma alternatia de obter a inormaao que ele guarda
ou a uncionalidade que ele implementa. Se o seu pblico-alo permitir, oc talez decida que
melhor usar outra tecnologia mais simples, isel em menos plataormas, mas que atenda
seus objetios.

3-22
! # $%&' () *+,-
!#.!
!"#" %&'()*)+,-
1. ,)/01 ) 231456 7641869 646:;) 7)' 69 :'6<1/9 im-01.jpg 6 im-05.jpg () kit1 =(:9#
>)/?@1:9 /) 9:01 () 7359)AB C3/06'1/01 7)' 69 :'6<1/9B esquerda.jpgB direita.jpg 1
baixo.jpg >656 )4015 ) (191/D) 646:;) 396/() 0641%69 *+,-E

.E F5<6/:G1 ) 01;0) =() kit2A (6 H)5'6 ')9056(6 /69 H:<3569 646:;)



!"
4 - lolhas de Lstilo
!"#" %&'()*+,-)
!"#"#" . /+0 1-) 2)3451 *0 01'63)7
Uma olha de estilos um conjunto de regras que inorma a um programa, responsael pela
ormataao de um documento, como organizar a pagina, como posicionar e expor o texto e,
dependendo de onde aplicada, como organizar uma coleao de documentos.
A maior parte dos programas de editoraao eletronica e processadores de texto moder-
nos trabalham com olhas de estilos. O processo consiste em deinir um rtulo ,nome do esti-
lo, para um determinado paragrao e em seguida alterar os seus atributos. 1odo paragrao que
or rotulado com aquele estilo passara a exibir as caractersticas deinidas anteriormente. Qual-
quer alteraao nos atributos de um estilo aetara todos os paragraos que estierem rotulados
com ele.
Lsta descriao, que se aplica a estilos em processadores de texto e programas de editora-
ao eletronica, tambm ale para a \eb. Na \eb, os "paragraos" 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 deinir a
regra:
H1 {font-size: 48pt}
dentro de uma "olha de estilos" aplicada ao documento.
A olha de estilos pode ser um arquio de textos simples ,alabeto ISO-Latin1, com a
extensao .css. Para incula-lo a uma pagina l1ML, esta dee 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 aplicaeis 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. Seoes especicas 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 especiica-
ao CSS1 ,nao inclumos recursos proprietarios nem a maior parte das noidades do CSS2 que nao
uncionam nos browsers disponeis no mercado,. Para uma abordagem mais completa, consulte a
documentaao oicial do \3C: http://www.w3.org/Style/.
4-2
4 - lolhas de Lstilo
!"#"$" &'(' )*+ ,+(-+. ', /012', 3+ +,4510
6+7'('( '7(+,+84'9:0 3' +,4(*4*('
Com isto possel oltar a suportar browsers antigos que antes estaam condenados
por nao conseguirem ler a inormaao sem perdas. Com a inormaao toda armazenada no
l1ML ,estrutura,, a apresentaao ,estilo, seria uma camada a mais, alterando a disposiao do
texto, cores, etc. mas sem aetar a estrutura essencial da inormaao. Isto permite que uma
pagina tenha arios estilos e use ,;(574, ,programas embutidos, para decidir qual carregar ,em
unao do browser e da plataorma,. Isto muito menos trabalho que azer uma pagina para
cada browser e plataorma, pois a atualizaao eita apenas no l1ML. 1ambm, com isso,
possel ter uma olha de estilos especial somente para impressao, onde haeria inormaoes de
quebra de paginas, etc. ,este recurso nao az parte da ersao 1 do CSS,.
<084(01+ '=,01*40 3' '7'(>8;5' 3' 7?@58'"
L algo que nao se tem com o l1ML. Pode-se usar tabelas, GIls iniseis de um pixel e
mais uma dzia de "macetes" mas nao se consegue azer o texto luir suaemente em olta de
uma imagem irregular, por exemplo. Alm do mais, quanto mais soisticada a tcnica, mais
dicil de codiicar e mais "sujo" ica o cdigo, o que o torna mais sujeito a erros. Com CSS,
pode-se colocar uma imagem em qualquer lugar da pagina ,at ora dela,, usando tcnicas de
posicionamento absoluto ou relatio. Pode-se escolher a posiao exata da imagem de =';AB
@(0*83 e az-la combinar com algo no /0(+@(0*83. As dimensoes e posioes sao exatas e dadas
em unidades conhecidas no mundo da tipograia como pixels, pontos, 7'5;',, milmetros.
&?@58', .'5, 1+-+,
Com olhas de estilo possel criar muitas paginas com um layout soisticado que antes
s era possel usando imagens, tecnologias como C1',2 ou applets Jaa. Lstas paginas eram
sempre mais pesadas, pois precisaam carregar imagens, componentes, programas. Com CSS
possel deinir texto de qualquer tamanho, posiciona-lo por cima de outros objetos, ao lado
ou por cima de texto e conseguir eeitos soisticados a um custo ,banda de rede, baixo. L pos-
sel ainda importar ontes ,que o usuario talez nao tenha,.
D'8*4+89:0 3+ *. @('83+ ,54+
Uma olha de estilos sere para toda uma coleao de paginas, podendo ser usada para
dar um estilo consistente a todo o site. Sendo aplicada em separado da inormaao e estrutura,
nao precisara ser atualizada todas as ezes em que a inormaao or mudada. A pagina pode ser
atualizada em um editor l1ML ou gerador de l1ML simples, sem recursos de cor ou alinha-
mento, e ser ormatada na hora em que or carregada pelo browser. L possel tambm azer o
contrario: mudar o estilo sem alterar a inormaao, como ter uma pagina que sempre carrega
com um estilo dierente.
4-3
4 - lolhas de Lstilo
O uso das olhas de estilo depende da boa estrutura do l1ML. A linguagem CSS , uma
linguagem declaratia, trabalha com os elementos tratando-os como "objetos". Cada paragrao
P, cada l1, cada IMG um objeto. Objetos podem ser agrupados de arias ormas.
A cada objeto ou grupo de objetos podem ser atribudas propriedades de estilo deinidas em
regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' sera azul,
tera tamanho de 12 pontos, espaamento duplo, alinhamento pela direita e usara a amlia de
ontes Arial, ou, se esta nao existir, leletica, ou entao a onte sem-seria !"#$%&' do sistema".
Um arquio 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 paragraos P rotula-
dos com o nome "editorial" ,atributo 'CLASS~editorial',, eles serao ormatados de acordo com
as propriedades especiicadas se o browser suportar CSS. Se o browser nao suportar CSS, a
estrutura sera mantida ,embora a aparncia nao seja a ideal, e o usuario conseguira ter acesso a
inormaao estruturada, mesmo em um meio de isualizaao mais limitado.
Quando se usa CSS, sao poucas as modiicaoes necessarias no l1ML. Nao sao neces-
sarios noos descritores ou extensoes. No exemplo acima, teremos que incluir apenas um atri-
buto a mais ,o atributo CLASS, do l1ML 4, classiicando os paragraos que azem parte do
nosso 'editorial' ,paragraos que tem uma unao dierente dos demais,.
A grande antagem das olhas de estilo a preseraao da estrutura do l1ML e um
controle muito melhor do autor sobre a sua aparncia na tela do usuario inal. Uma pagina
deera aparecer da melhor orma possel tanto num ()*"+(, soisticado como naquele IBM
PCX1 4.Mlz rodando o -./0 or DOS. O primeiro utilizara todos os recursos graicos
determinados pelas olhas de estilo. O segundo as ignorara, mas preserara a estrutura e a in-
ormaao
1232 5"6+$7 897:;$7
1232<2 5"6+$7= !";&$+$>?"7 " 7"&"')+"7
A estrutura dos estilos bastante simples. Consiste de uma &:7'$ !" +"6+$7. Cada regra pos-
sui um bloco, entre chaes , e },, de uma ou mais declaraoes aplicaeis a um ou mais 7"&"')+"7.
Um seletor algo no qual pode-se aplicar um estilo. Pode ser um descritor l1ML, uma hie-
rarquia de descritores ou um atributo que identiique um grupo de descritores. Uma #)&@$ !"
"7':&)7 consiste de uma ou mais linhas de regras, da orma:
seletores { declaraes }
4-4
4 - lolhas de Lstilo
As regras podem estar dentro de um arquio de texto ,ISO Latin1 ou ASCII 8-bit, com
extensao ".css" ou !"#$%&'() em um arquio l1ML ,as arias maneiras de aplicar estilos a um
arquio l1ML serao istas na seao seguinte,.
Um exemplo de olha de estilos com apenas uma regra oi mostrada na seao anterior:
H1 {font-size: 48pt}
Nesta regra, H1 o seletor e {font-size: 48pt} o bloco da declaraao, que estabele-
ce um tamanho de onte ,prop. font-size, para todos os objetos ,paragraos, marcados com
<H1>.
As declaraoes sao eitas usando a sintaxe:
propriedade: valor
Obsere que se usa dois-pontos ,:, e nao igual ,=, para aplicar um alor a uma proprie-
dade. Pode haer mais de uma declaraao de estilo para um seletor. Isto pode ser eito em ou-
tro bloco. Cada linha acrescenta ou sobrepoe declaraoes 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%&10() '!20(3(45!) ! )!0!%63!)
Varias declaraoes 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 espaos em branco ,espaos, noas-linhas e tabulaoes, 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 legeis da orma:
BODY {background : navy;
color : white }
H1 {color: blue;
font-size: 18pt;
font-family: Caslon, serif }
Uma declaraao s termina com uma echa-chaes ,}, ou com um ponto-e-rgula ,;,.
Dependendo da propriedade, esta pode ter arios alores separados por rgulas ou alores
compostos com as palaras separadas por espaos:
P { font: 12pt "Times New Roman" bold }
H2 { font-family: Arial, Helvetica, Sans-serif }
4-5
4 - lolhas de Lstilo
As aspas deem ser usadas quando uma palara que tem espaos precisar ser usada. No
exemplo acima, o nome "1imes New Roman" deeria ser tratado como o nome de uma onte
distinta, e nao como trs alores, o que ocorreria se as aspas nao estiessem presentes.
Assim como um seletor pode ter arias propriedades deinidas 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 declaraoes de estilo podem ser aplicadas em quase qualquer descritor l1ML - no
mundo pereito! Na pratica, muitos browsers ainda tm problemas de compatibilidade, e nao
implementam a especiicaao a risca, como eremos adiante.
Ao utilizar olhas de estilo, dee-se respeitar os elementos l1ML que possuem descrito-
res inais reqentemente ignorados, como ,P, ,LI, etc. A alta do ,P pode causar o
"azamento" das declaraoes de estilo para ora do paragrao em alguns browsers.
!"#"$" &'()*+,-.'/ ) .*/+-012)/
Alm das regras, um arquio CSS pode ter ainda comentarios e instruoes ,precedidas de
,. No CSS1 apenas uma instruao deinida: @import. Lla usada para que uma olha de
estilos possa importar estilos de outro arquio CSS atras de uma URL. Os estilos importados
sempre tm menos precedncia que os locais ,ou seja, os locais podem sobrepor os importa-
dos,. A sintaxe da instruao @import :
@import url(url_da_folha_de_estilos)
Nao dee haer 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 Jaa: entre /* e */:
/* este texto ignorado at que seja encontrado
um asterisco seguido por uma barra */
!"#"!" 345'-)/
Os alores que sao aplicados as propriedades tm uma sintaxe que depende da proprie-
dade que os usa. Propriedades que enolem tamanho ,tamanho de ontes, espaamento, etc.,
geralmente recebem alores que consistem de um nmero e uma unidade ou porcentagem. O
4-6
4 - lolhas de Lstilo
sinal de porcentagem ou unidade dee estar junto ao nmero correspondente sem espaos. Ou
seja, dee-se escreer font-size: 24pt e nao font-size: 24 pt.
Cores e arquios externos podem requerer uma unao para serem deinidos. Sao duas
as unoes ,ou procedimentos, do CSS1: rgb(), que constri uma cor, e url(), que retorna
um nculo para uma imagem ou arquio CSS ,usada em instruoes @import,.
la quatro maneiras dierentes de especiicar cores em CSS: usando o nome do sistema
,red, yellow, blue, black, lightGray,, usando seu cdigo RGB hexadecimal ,0000, 00,
0000, 34adc, 80aa, ou usando a unao rgb(). A unao rgb() requer trs 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
,mnimo, a 255 ,maximo, ou em alores racionarios de 0 a 100. As instruoes abaixo de-
inem a mesma cor para um paragrao:
P {color: red}
P {color: ff0000}
P {color: rgb(100%, 0%, 0%)}
P {color: rgb(255, 0, 0)}
Nao dee haer espao entre o "b" de rgb e o abre-parnteses.
A unao URL pode ser usada em propriedades que requerem arquios ,no caso, ima-
gens, como alores. Lla recebe um argumento apenas com a URL ,relatia ou absoluta, da
imagem:
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 atras da pr-
pria hierarquia do l1ML. Se oc declara propriedades para BOD\, todos os descritores se-
rao aetados a nao ser que tenham as suas propriedades redeinidas dentro de um noo bloco
de declaraoes CSS. Se um I esta dentro de um P e todos os P sao declarados como
tendo a cor ermelha, o I tambm sera ermelho a menos que haja um bloco, posterior
aquela declaraao, redeinindo 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>
4-
4 - lolhas de Lstilo
Se oc deinir atributos para os descritores BOD\ ou l1ML, toda a pagina sera
aetada. No exemplo a seguir, uma cor de texto deinida para BOD\ sera usada para colorir
todo o texto do documento, a nao ser que sejam sobrepostos por uma regra subseqente:
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 tm problemas principalmente com a aplicaao de estilos em
BOD\, portanto, reqentemente preciso mexer nas declaraoes 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 dierenas entre browsers. O site
http://www.w3.org/Stye/CSS/Test/ uma plataorma de testes que pode ser usada para
eriicar se um browser suporta ou nao determinada propriedade.
!"#"$" &'()*+,-*'( ./01 '(2')+3+(
Dois descritores l1ML tm importancia undamental em CSS. Lles sao descritores es-
truturais puros que nao deinem apresentaao especica na olha de estilos natia do browser.
Com CSS possel deinir propriedades de apresentaao para esses descritores. Lles sao
DIV e SPAN.
SPAN um descritor que dee ser usado dentro de blocos de texto apenas. L cha-
mado de descritor em-linha ,+45+4',, ja que nao quebra a linha antes ou depois. Lle se assemelha
a descritores como B, I, SMALL, A lRLl e SUP que serem para ormatar
texto dentro de paragraos, clulas de tabela, etc.
DIV um descritor que deine um bloco ou seao da pagina. Pode ser usado para di-
idir a pagina em seoes ,e subseoes no 64,'*4', 7825-*'*, e permitir que sejam aplicados estilos
especicos a essas seoes. Descritores de bloco sao P, l1, 1ABLL, etc. DIV
deine um bloco sem unao ou aparncia deinida. A unao e aparncia sera determinada em
CSS.
!"#"9" :-;- +4)5<+* '(,+5-( '; <;3 2=>+43
la trs ormas de aplicar uma olha de estilos a uma pagina \eb. Lstas ormas irao de-
terminar a abrangncia dos estilos: se aetarao um trecho limitado de uma pagina, se a toda a
pagina, ou se irao aetar todo um site.
A primeira orma, mais abrangente, a inculaao a um arquio CSS. Isto eito ligando
a pagina l1ML a um arquio de olha de estilo, usando do descritor LINK,. Lste mtodo
permite que mltiplas paginas ou um site inteiro usem a mesma olha de estilos.
Para azer um nculo a uma olha de estilos externa, dee-se criar um arquio de texto
contendo um conjunto de regras de estilo em CSS, sala-lo com uma extensao ".css" e chama-
4-8
4 - lolhas de Lstilo
lo a partir de todos os documentos l1ML onde o estilo sera aplicado. Nao preciso compilar
ou qualquer coisa do tipo. Depois que as deinioes estierem prontas, o estilo estara pronto
para ser usado. Pode ser importado atras 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 dee 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 mtodo 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 arquios
CSS. S1\LL ... ,S1\LL dee ser usado em lLAD. Um atributo !"#$ inorma o
tipo de arquio utilizado:
<style type="text/css">
P { font: 12pt "Times New Roman" bold;
color: red }
I { color: black }
</style>
As propriedades declaradas no bloco S1\LL sobrepoem qualquer propriedades an-
teriores do elemento ,inclusie as de uma olha de estilos importada, se houer,. L comum
colocar todo o cdigo entre comentarios l1ML ,<!--e -->, para proteger browsers antigos
da exibiao indesejada do cdigo:
<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 indiidual. Para
azer isto dee-se usar o atributo S1\LL em quase qualquer descritor. Lste mtodo nao cor-
responde exatamente a uma "olha" de estilos, pois os estilos aplicados nao sao reaproeitaeis.
4-9
4 - lolhas de Lstilo
Permite alterar a aparncia de um nico descritor, de um conjunto deles ou de um bloco de
inormaoes 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 diide a pagina em seoes ou SPAN, usado em
situaoes bem especicas. Usar estilos desta orma pouco dierente de usar atributos locais.
Os benecios de poder mudar a onte, cores e outras caractersticas em todo o documento
icam mais diceis.
Pode-se usar um, dois ou os trs mtodos ao mesmo tempo. As caractersticas deinidas
pelos mais especicos sobrepoem as deinidas pelos mais genricos. Por exemplo, suponha
que o arquio 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 noa deiniao de P e l1.
<HEAD>
<link rel=STYLESHEET
href="estilos.css"
type="text/css">
4-10
4 - lolhas de Lstilo

<style type="text/css"> <!--
P {font: 12pt "Times New Roman" bold;
color: red }
H1 {color: black }
--> </style>
</HEAD>
Mais adiante, existe um paragrao e um ttulo 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 especico sobrepoe o mais geral,
teremos uma pagina onde os h1 tm 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 paragrao tem uma aparncia dierente dos outros paragraos em uma certa
parte do texto. Para mudar o estilo dele, pode-se incluir as declaraoes em um atributo S1\LL.
Mas, se tal procedimento torna dicil a localizaao e a gerncia dos estilos, pode-se usar um
recurso para marca-lo de orma que seja considerado dierente. Isto pode ser eito atribuindo-
lhe uma identiicaao nica. Lm l1ML 3.2, pode-se usar o atributo ID:
<P ID=w779>Texto especial</P>
Para alterar as caractersticas deste paragrao agora, pode-se usar o seu ID como seletor,
da orma:
#w779 {color: cyan }
Se isto estier em um arquio CSS, todas as paginas que o usam e que tierem um ele-
mento com o ID 4w9 serao aetadas. Se houer mais de um com o mesmo ID apenas o
primeiro sera aetado.
Melhor que usar ID agrupar caractersticas semelhantes em classes. Uma classe uma
ariaao de um determinado objeto. Por exemplo, um texto teatral pode ter trs paragraos
com apresentaao dierente, representando as alas de trs personagens. Se quisssemos que
cada um tiesse uma cor dierente, poderamos declarar cada um como sendo de uma classe
distinta:
<p class=padre>Eu retiro o que disse, Joo</p>
<p class=grilo>Retirando ou no retirando, o fato que o cachorro
enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim? </p>
4-11
4 - lolhas de Lstilo
<p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, no sa-
be? </p>
Para dar a cada paragrao de um mesmo personagem ,mesma classe, os mesmos atribu-
tos, usa-se:
P.grilo { color: maroon }
P.padre { color: black }
P.bispo { color: navy }
Desta maneira, todos os textos que deerao ser lidos pelo personagem "Bispo" estarao
em azul marinho.
Uma classe tambm pode conter descritores dierentes. Se todos os textos citados por
um certo autor tiessem que estar em outra cor ou onte, poderamos criar uma classe sem
citar o descritor:
.verde { color: green }
1odos os descritores que tierem o atributo CLASS~erde serao aetados, 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-
sel atribuir propriedades dierentes 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 caractersticas dos links nao-isitados, atios e isitados. Assim como qualquer seletor,
os links podem ser combinados com outros descritores:
P, A:link, H2 {color: red}
!"#"89" :-3-60;-* /- 20(6-<60
Voc tambm pode deinir seletores que s serao aplicados se estierem 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 }
4-12
4 - lolhas de Lstilo
ara com que apenas os links nao isitados da classe "classX" que estejam dentro de itens de
lista de segundo nel situados dentro de um paragrao dentro de um bloco qualquer da classe
"bispo" sejam mostradas em italico.
!"#"$$" &'()'*' +, -./0'( +, ,(*1/.
Lxistem seis dierentes olhas de estilo que podem ser deinidas. Alm das trs ormas
que mostramos em seao anterior deste captulo, ha ainda, segundo a especiicaao, mais trs
olhas de estilos que podem aetar uma pagina: 1, uma olha de estilos que importada por
outra olha de estilos ,isto dierente daquela que inculada ao l1ML, dentro de um
link,, 2, uma olha de estilos deinida pelo usuario ,ou leitor da pagina, e 3, a olha de esti-
los +,-'2/* do browser ,que usada quando outra olha nao deine os estilos,.
1odas estas olhas de estilo dierentes podem proocar uma grande conusao se nao
houer uma regra clara de como deem ser consideradas. Ainda ha um stimo ator que a
ormataao introduzida pelo l1ML, como nos descritores ont e atributos align~center.
Listando todas as olhas de estilos que podem aetar um texto, temos:
1. 3./0' +, ,(*1/.( +,-'2/* +. 45.6(,57 todos os browsers possuem regras comuns para ormatar
um texto. A especiicaao l1ML nao impoe um ormataao padrao. 8,*()'9, 8':1;'*.5 por
exemplo usa um undo cinza como padrao e links azuis sublinhados. Ja o <=*,5=,* >?9/.5,5
preere um undo branco.
2. 3./0' +, ,(*1/.( +,-1=1+' 9,/. /,1*.57 a especiicaao deine a possibilidade do leitor estabelecer
uma olha de estilos prpria. Isto parcialmente conseguido quando o browser permite
que se escolha dierentes cores para undo, texto e links.
3. 3./0' +, ,(*1/.( :1=)2/'+' '. @ABC7 a olha de estilos que importada pelo arquio l1ML
atras do descritor de ligaao link
4. 3./0' +, ,(*1/.( 1D9.5*'+'7 uma olha de estilos externa ,arquio CSS, pode ser importada de
dentro de outra olha de estilos ,um outro arquio CSS ou bloco style no l1ML, u-
sando um comando especial import:
@import url (outroestilo.css)
5. 3./0' +, ,(*1/.( ,D42*1+' =. @ABC7 a olha de estilos que aparece na pagina l1ML entre os
descritores style e ,style.
6. 3./0' +, ,(*1/.( /.)'/7 aquela que aplicada localmente a um descritor usando o atributo
style~"lista de declaraoes".
. >(*1/. +,-1=1+. 9,/. @ABC7 atributos e descritores podem proocar alteraoes na aparncia
do texto, por exemplo: ont size, big, body bgcolor, p align~center, etc.
Um browser que siga a especiicaao CSS a risca obedece a seguinte ordem de precedn-
cia: 1. Local, 2. Lmbutida, 3. Vinculada, 4. Importada, 5. l1ML, 6. Leitor, . Browser
Na pratica, as coisas nao sao tao bonitas. No <=*,5=,* >?9/.5,5 para B')1=*.(0, a ordem
respeitada. Na ersao do <=*,5=,* >?9/.5,5 E"F para G1=+.6(, os estilos inculados ao l1ML tm
4-13
4 - lolhas de Lstilo
mais importancia que os embutidos ,o mesmo ocorre com !"#$%&'& ) e *+,-.+/%& ),. No *'/01+2
#' *+,-.+/%& ) e 34/'&4'/ !"#$%&'& ), os estilos aplicados ia l1ML tm precedncia maxima ,no
34/'&4'/ !"#$%&'& 5 a precedncia unciona corretamente, mas nao no 4,. Com as dierenas exis-
tentes nos browsers de hoje, nao ale a pena ainda se aproundar neste assunto. A soluao
ainda testar, testar, testar antes de colocar no ar.
)656 7%4/'0
lontes sao estilos de apresentaao consistentes aplicados a alabetos. Uma onte consiste de
atributos que alteram a aparncia de um smbolo, sem alterar o seu signiicado. Oerecem as
inormaoes necessarias para que uma letra ou smbolo possa ser representado graicamente.
Os atributos essenciais de uma onte sao:
Seu tipo ,ou amlia,



Seu tamanho
Seu estilo ,regular, italico, %8/$-4', etc.,
Seu peso ,normal, negrito, $-.9/, :$+1;,
Para representar qualquer texto, portanto, preciso escolher uma onte, ou seja: um tipo,
um estilo, um peso e um tamanho. Letras maisculas e minsculas nao sao consideradas ontes
dierentes, pois tm um signiicado distinto.
Os quatro atributos acima podem ser deinidos em CSS atras das propriedades font-
family, font-size, font-style e font-weight. Nao preciso deinir todas pois sempre
tm alores <'=+8$/. CSS oerece ainda font-variant, que permite considerar outras ariaoes
de uma onte.
)656>6 =%4/2=+?-$@
Uma amlia 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 includa uma reerncia a
uma amlia genrica, que sera usada caso nenhum dos nomes coincida com o nome de uma
onte do sistema.
A sintaxe :
font-family: fonte1, fonte2, fonte3, ..., fonte-genrica
Lxemplos:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
4-14
4 - lolhas de Lstilo
As ontes sans-serif e monospaced sao nomes genricos. Nao se reerem a uma onte
em particular mas a um grupo genrico. 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 tier mais de uma palara, este deera ser colocado entre aspas.
As aspas podem ser apstroes simples ,', ou aspas duplas ,",. Os apstroes sao necessarios
quando or preciso especiicar 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 especiicado em alo-
res absolutos ou relatios. Para especiicar um alor absoluto, pode-se usar:
font-size: nmero(pt | px | cm | mm | pc | in)
font-size: xx-small|x-small|small|medium|large|x-large|xx-large
O tamanho tambm pode ser especiicado relatio 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 deem ser especiicados como alores inteiros ,mesmo se usa-
dos cm ou in,. Os browsers podem ormatar os tamanhos de orma dierente e os mesmos
podem ser alterados pelos usuarios nos browsers atuais. As unidades alidas sao: pt ,pontos,,
px ,pixels,, pc ,paicas,, cm ,centmetros,, mm ,milmetros, e in ,polegadas,.
4-15
4 - 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 amlia de ontes usada
,ariam bastante entre plataormas tambm,. Veja um exemplo comparatio 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 relatios uncionam como o BIG e SMALL, aumentando a onte
atual por 150. A dierena que podem passar alm do limite xx-large ,ou ont size~,
ou xx-small ,ont size~1,.
Os comprimentos reerem-se a unidades comuns em tipograia. Um "em" uma distan-
cia horizontal equialente 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 relatios ao elemento que contm o elemento atual. Sao teis principalmente em espa-
amento, sendo pouco usados em ontes.
4-16
4 - lolhas de Lstilo
As porcentagens sao aetadas pela herana, por exemplo:
<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 seo.
<h1>2 vezes maior</h1>
<p>Este um pargrafo da seo. O texto tem 50% do tamanho do texto
da seo.</p>
</div>

As porcentagens de 50 e 200 sao aplicadas na onte atual, que a onte do bloco que
contm os dois elementos ,DIV,, e que tem tamanho 18pt. O resultado que o l1 sera
exibido em tamanho 26pt e P em tamanho 9pt.
1... fovt.t,te e fovtreigbt
O estilo de uma onte aetado atras de duas dierentes propriedades: font-weight,
que altera o peso da onte, e font-style, que altera o estilo ou inclinaao.
ivtae:
font-style: normal (ou italic, oblique)
evto.:
H1 { font-style: italic }
I { font-style: normal }
<p style="font-style: oblique">...</p>
Sintaxe:
4-1
4 - 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 palara oblique dee 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, porm,
nao encontrando um equialente "italic", "oblique", "kursi" ou similar irao inclinar o texto,
simulando um italico.
Os alores numricos para font-weight oerecem um controle excepcional sobre o pe-
so da onte na tela, embora isto esteja limitado aos neis disponeis nas ontes instaladas ,pa-
ra um mesmo nome de onte,. Na pratica, dos 9 neis disponeis de peso, se consegue 4 ou 5
neis dierentes de mais pesado ou mais lee. 00 o "bold" tpico e 400 o "normal".
O exemplo a seguir ilustra o eeito 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>
4-18
! # $%&'() *+ ,)-.&%

/) 0(&%1+) lighter + bolder +)2+3.4.3(5 2+)%) *+ 4%6-+) 1+&(-.0%) ( (&785 0(&%1 '+19
*(*%: ,&+) (0(6;(5 %8 1+-1%3+*+5 6( +)3(&( *+ <== ( >== 1+&(-.0%) (%) 2+)%) *+ 4%6-+):
1..1. fovtrariavt
?-8(&5+6-+ ( @6.3( %2;A% *.)2%6B0+& 2(1( +)-( 21%21.+*(*+ C small-capsD E8+ *+0+ 3%9
&%3(1 % -+F-% )+&+3.%6(*% +5 5(.@)38&()D 2%1C5 5+6%1+) E8+ () 3(2.-8&(1+): G( 21H-.3(D (-C ()
5(.@)38&() )A% 1+*8I.*() 6% vtervet torer:
ivtae:
font-variant: small-caps
evto.:
<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, so falsos. As le-
tras maisculas no 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>

!9<>
4 - lolhas de Lstilo
1..:. . rorieaaae fovt
Para especiicar arias propriedades de um seletor de uma ez s, pode-se usar a propri-
edade font em ez de deinir em separado font-size, font-weight, font-family, etc.
Nesta sintaxe, a ordem dos atores importante, porm nem todos os elementos precisam
estar presentes:
font: font-style font-variant font-weight font-size
line-height font-family
Lxemplos:
H1 {font: italic 700 24pt Tahoma, Arial, sans-serif }
1.1. .tribvto. ae teto
As propriedades desta seao tratam de transormaoes e atributos aplicados a texto, nao
aetando a exibiao das ontes. Os atributos tipograicos aetam a orma como o texto apre-
sentado na tela como o espaamento entre linhas, entre palaras, entre letras, o alinhamento de
paragraos e a endentaao.
A propriedade text-transform permite colocar letras em maisculas ou minsculas e a
propriedade text-decoration permite acrescentar ou tirar eeitos decoratios do texto como
riscados e sublinhados.
1.1.1. tettrav.forv
A propriedade text-transform realiza transormaoes no ormato caixa-alta ou caixa-
baixa do texto. ivtae:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none (valor default)
evto.:
H1 {text-transform: capitalize}
Capitalize coloca a primeira letra de cada palara em maisculas. Uppercase coloca tudo
em maisculas e lowercase coloca tudo em minsculas. None remoe qualquer transormaao
deixando o texto da orma como oi deinido antes das transormaoes.
<style>
p {font-weight: bold}
span {font-weight: normal}
.non {text-transform: none}
.upp {text-transform: uppercase}
4-20
! # $%&'() *+ ,)-.&%
.cap {text-transform: capitalize}
.low {text-transform: lowercase}
</style>
(...)
<p>Sem transformao:
<span class=non> preciso conhecer bem HTML e CSS</span></p>
<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.1.2. tetaecoratiov
/ 01%01.+*(*+ text-decoration 0+12.-+ 3%&%3(1 4%5 -.1(16 )57&.8'(*%)9 &.8'() )%71+ +
(-1(:+))(8*% % -+;-%9 +-3< ivtae:
text-decoration: underline (default em links)
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-decoration: none (default)
evto.:
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>
!=>?
4 - lolhas de Lstilo
(...)
<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>
Vnculos ,links, sao normalmente
sublinhados na maior parte dos browsers.
O sublinhado pode ser remoido com a
propriedade text-decoration: none.
O browser Netscape 4 nao suporta
a propriedade oerline. O Internet Lx-
plorer nao suporta a propriedade blink.
!"!"#" %&'%()*+,- & .&/%+0)*()*+,-
CSS oerece propriedades que permitem contro-
lar o alinhamento horizontal do texto, seu alinhamento
ertical e endentaao 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 precedncia. 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 caracterstica herdada para sub-blocos. O
alor 1&2)3*% 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 1&2)3*% baseline. As porcentagens reerem-se a altura da linha ,line-heght,
do prprio elemento. Usando porcentagens negatias consegue-se sobrepor elementos.
4-22
4 - lolhas de Lstilo
Na pratica, apenas o !"#$%"$# '()*+%$% , suporta vertical-align com os alores sub e
super ,coloca elementos em subscrito ou sobrescrito,.
,-,-,- #$(#./"0$"#
A propriedade text-indent se aplica a elementos de bloco e realiza a endentaao da
primeira linha. A sua sintaxe :
!"#!$%&'"&!( comprimento
!"#!$%&'"&!( porcentagem
A porcentagem ocorre em relaao a largura do elemento que contm o seletor. Pode ser
a largura total da pagina, a largura da clula de uma tabela, etc. Lxemplos:
P { !"#!$%&'"&!( 1 cm }
P {!"#!$%&'"&!( 50% }
<P style="!"#!$%&'"&!( 1in">
A endentaao tratada aqui apenas para uma linha de texto. Para endentar blocos intei-
ros, dee-se usar as margens ,em seao mais a rente,.
,-,-1- */"$.2$/32#
Lste atributo usado para controlar o espao
que existe antes e depois de uma linha de texto. Lla
especiica 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,, haera 5 pontos antes e
5 pontos depois de cada linha de texto ,espao du-
plo,. O espao simples equiale geralmente a line-
height: 120. Uma line-height menor que o
tamanho da onte produzira sobreposiao 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 espao antes e depois como esperado.
Um 453 no !"#$%"$# '()*+%$% 6 az com que ele
interprete alores absolutos ,sem unidade, como a-
lores em pixels. Por exemplo, 1.5 indica espao 1 e
meio ou 150. No !"#$%"$# '()*+%$% 6 as linhas icam
sobrepostas pois o browser interpreta a unidade co-
mo 1.5 pixels. Lite, portanto, usar alores absolutos
,use porcentagens,.
A sintaxe :
4-23
4 - lolhas de Lstilo
line-height: nmero_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
evto.:
H1 {line-height: 0 } // sobreposio de linhas
H1 {line-height: 2 } // espao duplo
H1 {line-height: 0.3em }
H1 {line-height: 150% } // espao 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, haera sobreposiao de linhas.
1.1.. tetter.acivg
A propriedade letter-spacing altera o
espao 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 tipograia,
mais comum usar "em" como medida de es-
paamento por ser proporcional ao tamanho da
onte.
Pode-se usar tambm alores negatios
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.
1.:. Core.
Com as propriedades de cores, podemos controlar as cores de arias partes da pagina, do
texto, do undo da pagina e de elementos l1ML. Alm disso, podemos aplicar imagens de
undo em qualquer elemento, nao s no elemento BOD\ como ja se az em l1ML.
As cores deinidas em CSS, assim como em l1ML, podem ser especiicadas por um
nmero em hexadecimal ,representando um cdigo RGB, ou por um nome. Alm dessas duas
ormas, podem ainda ser especiicadas por trs nmeros decimais, representando tambm o
cdigo RGB da cor.
4-24
4 - lolhas de Lstilo
Os cdigos RGB inormam a quantidade de luz ermelha, erde e azul que compoe a
cor, respectiamente. Cada cor pode ter 16 neis de intensidade: 0 a 256 ,00 a ll, em hexade-
cimal,. O total de combinaoes posseis de 16..216 cores.
A exibiao correta das cores depende da capacidade do deo onde serao istas. Poucos
sistemas tm 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 respectios cdigos RGB em hexadecimal e decimal.

!"# %"&' !()* +',-&./ !()* 0'1. !"# %"&' !()* +',-&./ !()* 0'1.
red 255, 0, 0 0000 maroon 128, 0, 0 800000
lime 0, 255, 0 0000 green 0, 128, 0 008000
blue 0, 0, 255 0000 nay 0, 0, 128 000080
yellow 255, 255, 0 00 olie 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 siler 192, 192, 192 c0c0c0
black 0, 0, 0 000000 gray 0, 0, 0 808080

la muito mais cores com nomes suportadas pelo !"#$%&'" e ()#"*)"# ,-'./*"*. Lstas lista-
das sao as nicas que azem parte da especiicaao oicial do l1ML 4. Sao todas "seguras", ou
seja, azem parte da paleta basica de 216 cores.
012131 %/./*
Deine 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 :
!"#"$% nome_de_cor
!"#"$% #nmero_hexadecimal
!"#"$% rgb(vermelho, verde, azul)
,-"4'./$5
H1 { !"#"$% green }
P { !"#"$% #fe0da4 }
EM { !"#"$% rgb (255, 127, 63) }
<EM STYLE="!"#"$% rgb (100%, 50%, 25%)">
Os nomes sao qualquer nome alido de cor. Se o browser nao encontrar o nome ao qual
o estilo se reere, dee exibir a cor 6"7&8.# ,ou herdada,. O smbolo "4" opcional no cdigo
4-25
4 - lolhas de Lstilo
hexadecimal. A intensidade da cor pode ser expressa em alores absolutos ,0 a 255, ou percen-
tagens ,0.0-100.0,.
1.:.2. bac/grovvacotor
As cores de undo de qualquer elemento podem ser alteradas atras da propriedade
background-color. A sintaxe :
background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #nmero_hexadecimal
background-color: rgb(vermelho, verde, azul)
evto.:
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 contm. O
undo, para texto, ocupa todo o espao da onte ,inclusie espao em branco acima e abaixo
que azem parte da onte,. A cor nao estendida quando o espaamento entre linhas aumen-
tado em alguns browsers.
1.:.. bac/grovvaivage
Com background-image possel 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)
evto.:
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 relatias a localizaao do arquio que contm a olha de estilos ,pode ser a
prpria pagina ou nao,. A cor de bac/v usada para 'azar' pelas partes transparentes da ima-
gem ou preenir 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/grovvareeat
CSS permite mais controle ainda sobre a imagem de undo, acilitando a maneira como a
mesma ira se repetir. A propriedade background-repeat. ivtae:
4-26
! # $%&'() *+ ,)-.&%
background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
evto.:
BODY {background-image: url(china.jpg);
background-repeat: repeat-x }
TABLE{background-image: url(corinthians.gif)
background-repeat: no-repeat }
/ 0(&%1 repeat 2 aefavtt + 3(4 5%6 78+ ( .6(9+6 %58:+ -%*( ( -+&(; repeat-x 3(4 5%6
78+ ( .6(9+6 )+<( 1+:+-.*( (:+=() '%1.4%=-(&6+=-+ + repeat-y 3(4 5%6 78+ +&( )+<( 1+:+-.*(
(:+=() 0+1-.5(&6+=-+; no-repeat 3(4 5%6 78+ ( .6(9+6 =>% )+<( 1+:+-.*( *+ 3%16( (&986(
?(:(1+5+1@ 86( .6(9+6 (:+=() =% 5(=-% )8:+1.%1 +)78+1*%A;
B(1( 3(4+1 ( .6(9+6 (:(1+5+1 +6 %8-1%) &89(1+)C :%*+D)+ 8)(1 () :1%:1.+*(*+) *+ :%).D
5.%=(6+=-% *% 38=*% *( -+&(;
1.:.:. bac/grovvao.itiov e bac/grovvaattacbvevt
/ :%).5.%=(6+=-% + ( 3%16( *+ +E.F.G>% *% :(:+& *+ :(1+*+ )>% 5%=-1%&(*%) :+&() :1%D
:1.+*(*+) background-attachment + background-position; H :1.6+.1( *+3.=+ )+ % 38=*%
.1@ %8 =>% )+ 6%0+1 5%6 % -+E-% %8 3.5(1 3.E% =( -+&(; H )+98=*( :+16.-+ % :%).5.%=(6+=-% *%
38=*% +6 86 &%5(& +E(-% *( -+&(; I=3+&.46+=-+ +))() *8() :1%:1.+*(*+) =>% -J6 )8:%1-+ 8=.D
0+1)(& :+&%) F1%K)+1) 5%6+15.(.) ?(:+=() % vtervet torer %) )8:%1-(A;
ivtae:
background-attachment: fixed
background-attachment: scroll
evto:
BODY {background-image: url (china.jpg);
background-attachment: fixed }
ivtae:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posio_vertical posio_horizontal
evto.:
BODY {background-image: url(china.jpg);
background-repeat: no-repeat;
background-position: 50% 100% }
!DLM
4 - lolhas de Lstilo
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 }
Os alores de porcentagem sao relatios a posiao do elemento sobre o qual se aplica o
estilo. As posioes sao sempre dadas em pares, tendo os alores separados por espaos. O
primeiro alor sempre um alor horizontal e o segundo um alor ertical. O browser coloca
o bloco aetado dentro de uma "caixa inisel" e a posiciona de acordo com as porcentagens.
Um alor de 100 para o primeiro alor, empurra a margem direita ,oposta, desta "caixa ini-
sel" contra a margem direita do browser.
Os alores de comprimento, assim como os de porcentagem tambm sao dados em pa-
res. O primeiro a distancia da margem horizontal a partir do canto superior esquerdo do ob-
jeto, o segundo a distancia da margem superior. As unidades alidas sao as mesmas usadas
em ontes ,cm, mm, in, pc, px, pt, em, ex, e podem ser misturadas nos dois alores do par.
Os alores de posiao sao palaras-chae usadas tambm aos pares. Sao equialentes 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 deinir arias caractersticas 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
Dee haer pelo menos um alor deinido, mas qualquer nmero de alores pode ser a-
tribudo de uma ez.
012345,67
BODY {background: url(../duke.gif) white no-repeat fixed 50% 25%}


4-28
4 - lolhas de Lstilo
!"#" %&'(&)*+,+*- +* ./,--)0).,12'
Lstas propriedades classiicam os elementos em categorias que podem receber estilos.
Categorias podem ser listas, blocos, trechos de blocos ou itens iniseis.
!"#"3" +)-(/,4
Lsta propriedade deine .'5' um elemento mostrado. A propriedade none desliga o e-
lemento e echa o espao que o objeto antes ocupaa ,torna o objeto inisel,. block abre
uma noa .,)6, onde o objeto posicionado, relatio aos outros blocos, list-item um blo-
co com um marcador de lista e inline deine um elemento como parte de um bloco.
7)89,6*:
display: block | inline | list-item | none
;6*5(/':
P {display: list-item}
IMG {display: none} // desliga todas as imagens
!"#"<" =>)9*?-(,.*
Deine como o espao em branco do elemento gerenciado ,se as linhas deem ser
quebradas para que apaream na tela ou nao ,nowrap, ou se os espaos em branco, tabulaoes,
etc. deem ser considerados ,pre,.
white-space: normal | pre | nowrap
!"#"@" /)-9?-94/*
Lsta propriedade e as propriedades list-style-type, list-style-image e list-
style-position deinem atributos para objetos de lista, como tipo de marcador, imagem do
marcador e posiao. Lsses elementos nao sao suportados no A*9-.,(*.
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 possel deinir as trs propriedades atras de um atalho usando list-type. A or-
dem dos atores importante neste caso.
4-29
4 - lolhas de Lstilo
!"#$%#$&!'( list-style-type list-style-image list-style-position
!"#$%&'!
!"#$%#$&!'( url(bullet.gif)
!"#$%#$&!'( square outside
)*+* ,'-./'&# 0# 1&'2'3
Uma caixa` uma propriedade de qualquer elemento de bloco no l1ML ,l1, P, DIV,
etc. que automaticamente deinem seu prprio 1&'2' ou %4/56/47',. A caixa de um objeto consiste
das partes seguintes:
O elemento em si ,texto, imagem,



As margens internas do elemento ,%4008-6,
A borda em torno das margens internas ,1'/0#/,
A margem em torno da borda ,$4/68-,

1odo elemento de bloco tem essas propriedades. As propriedades CSS que eremos nes-
ta seao mostrarao como altera-las. A cor e tamanho da borda podem ser alterados assim co-
mo o undo ,como imos na seao anterior,. A margem externa sempre transparente mas a
margem interna herda a cor de undo do objeto.
1ambm sao alteraeis as margens internas e externas, larguras de borda, cor de borda e
estilo de borda de cada um dos quatro lados de uma caixa indiidualmente, identiicados pelos
nomes .'%, /869., 1'..'$ e &#7.:
4-30
4 - lolhas de Lstilo

!"#"$" &'()*+ , -'..*+)
As margens externas sao deinidas usando a propriedade margin ,que aeta todas as
margens ao mesmo tempo, ou as propriedades margin-top, margin-bottom, margin-right
e margin-left que permite alterar as margens indiidualmente.
/*+0'1,2
margin-top: comprimento | porcentagem % | auto
margin-bottom: comprimento | porcentagem % | auto
margin-right: comprimento | porcentagem % | auto
margin-left: comprimento | porcentagem % | auto
31,&-452
margin-top: 1cm; margin-left: 12pt;
A propriedade margin aeta arios aspectos das margens externas de uma ez s. A or-
dem dos atores importante. Podem ser includos todos quatro alores, apenas um ,todas as
margens iguais, ou dois ,margens horizontais e erticais,. /*+0'1,2
margin: margin-top margin-right margin-bottom margin-left
margin: margin-top% margin-right% margin-bottom% margin-left%
margin: espao_vertical espao_horizontal
margin: margem_de_todos_os_lados
31,&-4562
margin: 5cm // vale para as quatro margens
margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais
margin: 5cm 3cm 2cm 1cm // sent. horrio: top, right, bottom, left
// (em cima 5; direita 3; em baixo 2;...
As margens internas ,-'..*+), sao deinidas usando a propriedade padding ,que aeta
todas as margens internas ao mesmo tempo, ou as propriedades padding-top, padding-
bottom, padding-right e padding-left.
/*+0'1,2
padding-top: comprimento | porcentagem %
padding-bottom: comprimento | porcentagem %
padding-right: comprimento | porcentagem %
padding-left: comprimento | porcentagem %
A propriedade padding aeta arios aspectos das margens internas de uma ez s. A or-
dem dos atores importante. Podem ser includos todos quatro alores ou apenas um. /*+0'1,:
padding: padding-top padding-right padding-bottom padding-left
padding: padding-top% padding-right% padding-bottom% padding-left%
4-31
4 - lolhas de Lstilo
padding: espao_vertical espao_horizontal
padding: margem_de_todos_os_lados
1..2. boraerriatb
Pode se controlar arios aspectos das bordas como a sua espessura em cada um dos qua-
tro lados, suas cores ,tambm cada um dos quatro lados, e estilos ,idem,. Isto pode ser eito de
diersas maneiras. Para que as bordas apaream preciso primeiro que o estilo ,border-
style, seja deinido. Por exemplo:
border-style: solid
A espessura das bordas pode ser controlada atras da propriedade border-width, ae-
tando as espessuras de todos os lados da borda, ou indiidualmente atras de border-top-
width, border-bottom-width, border-right-width e border-left-width. ivtae:
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
evto.:
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 includos todos os quatro alores, dois ,reerindo-se
as bordas horizontais e erticais, ou apenas um ,aetando todas as bordas,. ivtae:
border-width: border-top-width border-right-width
border-bottom-width border-left-width
evto.:
border-width: 5cm // vale para as quatro bordas
border-width: 5cm 2cm // 5cm verticais, 2cm horizontais
border-width: 5cm 3cm 2cm 1cm // horrio: top, right, bottom, left
1... boraercotor
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 tambm podem ser deinidas indii-
dualmente atras de border-top-color, border-bottom-color, border-right-color e
border-left-color.
border-top-color: cor (nome ou cdigo)
border-bottom-color: cor (nome ou cdigo)
4-32
4 - lolhas de Lstilo
border-right-color: cor (nome ou cdigo)
border-left-color: cor (nome ou cdigo)
evto.:
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 includos todos os quatro alores, dois ,reerindo-se
as bordas horizontais e erticais, ou apenas um ,aetando todas as bordas,. ivtae:
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.
evto.:
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 horrio
1..1. boraer.t,te
O estilo de cada uma das quatro bordas pode ser alterado com border-style. 1ambm
possel deini-los indiidualmente usando border-top-style, border-bottom-style,
border-right-style e border-left-style. Sao arios os estilos disponeis ,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
evto.:
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 includos todos os quatro alores, dois ,reerindo-se
as bordas horizontais e erticais, ou apenas um ,aetando todas as bordas,. ivtae:
border-style: border-top-style border-right-style
border-bottom-style border-left-style
4-33
4 - 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 ,eeito baixo-releo, e outset ,eeito alto-releo,. 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 deinida antes.
567686 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 deinir tudo isto de uma ez s para to-
das as bordas e de orma idntica ,nao possel especiicar alores dierentes para as bordas
neste caso,. 1odos os itens nao precisam aparecer, mas a ordem dos atores importante:
border: border-width border-style border-color
5676:6 ;<2,= # =#<>=,
As propriedades width e height modiicam 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
567676 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
4-34
4 - lolhas de Lstilo
!"#"$" &'()*
L inalmente, para eitar que um bloco lua em torno de uma imagem ou bloco que uti-
liza a propriedade float, existe a propriedade clear, que dee ser atribuda a um bloco ou
paragrao que aetado pela lutuaao de um bloco. laz a mesma coisa que o atributo clear,
usado no <BR> em l1ML, s que aqui ela suportada em qualquer elemento ,bloco ou nao,.
clear: none | left | right | both

Primeiro pa-
ragrao lui ao
lado da ima-
gem.
Outro para-
grao que nao
deia luir.


Primeiro para-
grao lui ao
lado da ima-
gem.


Outro paragrao que nao
deia luir ,com clear,.
!"$" +,-.&.,/)0(/1,
O posicionamento de objetos em l1ML pode ser conseguido em termos absolutos ou
relatios usando CSS 2. As propriedades permitem o posicionamento em trs dimensoes ,hori-
zontal, ertical e em camadas,. Lmbora os recursos de posicionamento nao aam parte do
CSS1, tanto o 2(1-&)3( 2)4.5)1,* ! como o 6/1(*/(1 783',*(* ! o suportam.
!"$"9" 3,-.1.,/: 1,3 ( '(;1
Lsta propriedade precisa de mais duas propriedades que deinem o posicionamento de
um objeto. Os atributos localizam o objeto na tela de orma )<-,'=1) ou de orma *(')1.4). A
origem da posiao absoluta sera a posiao do objeto no nel imediatamente superior. O posi-
cionamento relatio se reere a posiao anterior do objeto. >./1)8(:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
4-35
4 - lolhas de Lstilo
!"#$%&': considere as quatro imagens a seguir:

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

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

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

<div class="imagem4">
<img src="T4.gif" width=150 height=72 border=1> 4 Posio 100 0
</div>
Aplicando a seguinte olha de estilos para posicionar as quatro imagens relatiamente a sua
localizaao original obtemos a imagem ao lado. Os retangulos claros indicam a posiao original
da imagem:
DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
}
4-36
! # $%&'() *+ ,)-.&%
DIV.imagem2 {
position: relative;
top: 0px;
left: 200px;
}
DIV.imagem3 {
position: relative;
top: -25px;
left: -25px;
}
DIV.imagem4 {
position: relative;
top: 100px;
left: 0px;
}

/)(0*% 1%).2.%0(3+0-% (4)%&5-%6 % 4&%2% 7 3%8.*% +3 9+&(:;% (% 2(0-% )51+9.%9 +)<
=5+9*% *% 49%>)+9?

!<@A
4 - 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
proundidade. Para usa-la, basta deinir em cada objeto:
z-index: nmero
onde nmero a camada de exibiao. Quanto maior o nmero, mais alta a camada. o corres-
ponde a camada do texto. Se um objeto tier z-index menor que zero aparecera atras do
texto. Se z-index or maior que zero, aparecera na rente. Quando nao deinido ou quando
z-index: 0 o bloco ocupara a mesma camada que o texto.
!"#"-" .(/(0(1(23
Lsta propriedade sere para tornar um bloco isel ou inisel. Diere de display porque
nao remoe o espao antes ocupado pela imagem:
visibility: hidden | visible
4,+5617:
IMG {visibility: hidden} // torna invisveis todas as imagens
4-38
4 - 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 cdigo ilegal dentro de um arquio .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 alternatias ilegal dentro de um arquio CSS.
3. Qual das regras abaixo, de uma olha de estilos, declara que os paragraos e clulas 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 declaraoes abaixo, contida em uma pagina l1ML, a incula a olha de estilos
basico.css, localizada no mesmo diretrio 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 cdigo l1ML:
<div>
<p>Pargrafo</p>
</div>
Quais declaraoes abaixo, em um bloco <STYLE> do arquio que contm o trecho acima,
arao com que o texto do paragrao 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}
4-39
4 - lolhas de Lstilo
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 instruao que incula o estilo a pagina, ha um bloco
<STYLE>, com a seguinte regra:
P {color: red}
A pagina possui dez paragraos. Um deles atribui um estilo local usando o atributo STYLE,
da orma:
<P STYLE="color: blue">Pargrafo</P>
Supondo que a pagina seja isualizada em um browser que suporte olhas de estilo CSS,
qual a cor da maior parte dos paragraos dessa pagina
a, azul ,blue,
b, ermelha ,red,
c, erde ,green,
d, preta ,black,
e, indeinida
. Identiique as alternatias que contm 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">sees</div> especiais.</span>
e, <div style="P {color: yellow}"><P>Texto amarelo</P></div
8. Considere o cdigo l1ML abaixo:
<div class=sec2>
<p class=novo>Texto modificado</p>
</div>
Quais das regras de estilo abaixo ara com que o paragrao 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}
4-40
4 - lolhas de Lstilo
c, a.visited {text-decoration: none}
d, a visited {text-decoration: none}
e, Nenhuma das regras anteriores.
10. Marque apenas as alternatias 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 degradaao na qualidade da apresentaao mas nunca haera perda de in-
ormaao.
d, L possel construir um site inteiro usando apenas CSS.
e, A linguagem CSS usada para construir olhas de estilo uma recomendaao do
\3C - consrcio de empresas que estabelece os padroes para a \eb.
!"#"$" &'()*+*,-. *-/ 0-123. 4( &.5,1-
Os exerccios a seguir tm a inalidade de explorar as principais propriedades do CSS e
permitir que se eriique o suporte a elas nos browsers populares. Lles sao mais didaticos do
que teis. O objetio apenas praticar com olhas de estilos. Para realiza-los, use os arquios
disponeis no CD do ASI1.
6-7*(,5-. 89.,*-.
1. Crie uma olha de estilos, chame-a de basico.css, e a carregue no arquio Style1est.html.
2. Nesta olha de estilos, usando o mnimo de declaraoes possel, declare:
a, que todo l1 tenha onte 1ahoma, ou sans-seri, se 1ahoma nao existir
b, que todo o texto do corpo ,BOD\, do arquio 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 ,nay, e a cor 4(:3;15 do texto para bran-
co em uma nica declaraao.
4. laa com que todo texto marcado em italico aparea em azul ciano ,cyan,.
0-)/3. 4( ;.3) 6<<
5. Carregue a olha de estilos basico.css em outros arquios l1ML e eja o que acontece.
laa com que uma dessas outras paginas tenha uma cor de undo clara ,amarela, por e-
xemplo, e cor de texto escuro ,dierente daquela deinida por basico.css, sem que isto alte-
re as outras paginas que usam o mesmo arquio.
6. laa com que o primeiro paragrao do arquio Style1est.html tenha texto erde.
4-41
4 - lolhas de Lstilo
. laa com que a clula do meio da tabela de Style1est.html tenha texto ermelho sobre
undo amarelo ,a tabela 3x3 encontra-se no meio da pagina,.
!"#$$%$& "()*$& $%"%+,-%$ .% /,)+%0+,
Para os exerccios abaixo, desligue a olha de estilos usada nos exerccios anteriores ,mude o
nome ou remoa o elemento LINK, para que a pagina ique limpa outra ez. Use uma no-
a olha de estilos para aplicar as alteraoes a seguir.
8. Deina classes sec2, sec3, sec31 e sec32 para as seoes ,DIV, do documento Style-
1est.html. As seoes estao indicadas em comentarios l1ML ,por exemplo: !--Seao 2 --
,. Aplique um undo dierente ,imagem ou cor, nessas seoes para dierencia-las das ou-
tras.
9. 1ire os sublinhados de todos os links e substitua-os por um undo cinza claro.
10. laa com que o link atio ,actie, ique em negrito, que o link normal tenha tamanho 10pt
e que mostre undo amarelo quando o mouse estier sobre ele ,hoer,, e que o link isita-
do nao tenha mais cor de undo mas recupere o sublinhado. Obs: Para azer um link ainda
nao isitado, aa um link para qualquer recurso do sistema de arquios, para er o link ati-
o, clique no link e segure o mouse.
11. laa com que:
a, todos os italicos dentro de negritos sejam colocados em maisculas ,use text-
transorm: 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 maisculas e em ermelho.
1,)+%$
Crie uma noa olha de estilos ,ontes.css, para aplicar ontes. Vincule ,LINK, ou importe-a
,import, em seus arquios.
12. a, Aplique Verdana como onte .%2#3"+ em todo o site. Garanta que, se Verdana nao existir,
Arial sera usada, e se esta nao existir, sera usada a .%2#3"+ sans-seri. Para testar, mude os
nomes das primeiras ontes para nomes desconhecidos do sistema. b, 1este a compatibili-
dade dos dois browsers em relaao ao suporte de ontes com nomes longos ,entre aspas,
em olhas de estilo locais e remotas.
13. laa com que os B de seus paragraos sejam 20 maiores que o texto normal destes
paragraos.
4+-(53+,$ .% +%0+, % /"#$$(2(/#67,
Crie uma noa olha de estilos para esses exerccios.
4-42
4 - lolhas de Lstilo
14. a, Aplique um espaamento de 1 cm entre palaras de um paragrao seu texto ,isto podera
nao uncionar deido a alta de suporte dos browsers,. b, Aplique um espaamento de 1
cm entre as letras de outro paragrao. 1este nos dois browsers.
15. Deina todos os ttulos l2 como sendo caixa alta ,uppercase,.
16. Lxperimente com as propriedades text-decoration ,use oerline e outras propriedades em
blocos SPAN criados para mostrar cada propriedade.
1. Llimine o espaamento entre os paragraos ,P, usando margin-top: 0pt}, endente a
primeira linha e coloque todos os seus paragraos, com exceao dos paragraos da terceira
seao, com alinhamento justiicado. O alinhamento dee ser aplicado apenas nos paragra-
os e nao em listas ou tabelas.
!"#$%
18. Lxperimente com cores, aplicando cores em textos, backgrounds de diersos componentes
da pagina, inclusie ormularios ,INPU1 e SLLLC1,. Use as trs 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 exerccio.
'()*"%+ ,-./$)% $ 0$1$2345$%
19. Inclua a imagem rabbit.gi ,ou outra qualquer do subdirectrio 3_Imagens do CD do A-
SI1, no undo da pagina Style1est.html ,usando uma noa 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 repetioes, 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 exerccio,, posicione a imagem no centro da pagina,
sem repetioes e uma outra imagem no centro da tabela, tambm sem repetioes.
21. Posicione ,outra olha de estilos, o rabbit.gi ,ou outra imagem, em uma posiao a 4cm da
margem esquerda e a cm da margem superior. Na seao 2 ,sec2,, posicione bart.gi, repe-
tindo somente na ertical, aastado 11cm da margem esquerda e iniciando 1 cm abaixo da
margem superior.
6"%373").-$)2" $ 8.9"(2
22. Remoa o espao entre todos os paragraos de Style1est.html. Aplique um text-indent de
1cm em cada paragrao.
23. laa com que os blocos ,paragraos e cabealhos, da seao 3.1 e 3.2 ,DIV, tenham 0,3 cm
de margem esquerda e direita, e 0,5cm de margem superior e inerior, em relaao as bordas
da seao.
4-43
! # $%&'() *+ ,)-.&%
!/!!
0!1 $(2( 3%4 56+ () )+27+) 810 + 819 -+:'(4 64( 4(;<+4 +=-+;:( *+ >?@ 34 +4 ;+&(2A% B )+/
2A% 81
0@1 CD&.56+ 64( E%;*( (F6&? )G&.*(? *+ 844 (3.4( *( )+2A% 0 HIJKLMN? 64( %6-;(? -(4EO4
*+ 844? (E(.=%? :( 3%; (4(;+&%1 J%) &(*%)? 3%&%56+ E%;*() P+;4+&'()? *+ @441
0Q1 CD&.56+ 64( E%;*( P+;*+? *+ !44 B +)56+;*( *+ -%*%) %) D(;R<;(S%) *( )+2A% 01 ,:-;+ (
E%;*( + % -+=-% *+P+ '(P+; 64 +)D(2% *+ @441 ,:-;+ ( E%;*( + ( 4(;<+4 *( DR<.:(? 4(.)
@44 H)+4 &+P(; +4 3%:-( % %SS)+-N1
0T1 U+4 6)(; -(E+&()? (D&.56+ 64( &(;<6;( 4R=.4( *+ @>> D.=+&) +4 -%*( ( DR<.:(1
0V1 $(2( 3%4 56+ ( )+2A% 819 -+:'( &(;<6;( 4R=.4( *+ 00> D.=+&) + S&6-6+ D(;( ( *.;+.-(? *+./
=(:*% % ;+)-(:-+ *% -+=-% S&6.; +4 P%&-( *+&(1
!"#$%$"&'()&*" ',#"-.*"
0W1 X%:-+ % 56+E;(/3(E+2() *% +=+;3Y3.% 9? *% &.P;% 8 HC&O4 *% Z[X\N )+4 6)(; -(E+&() H6/
)(:*% (D+:() D%).3.%:(4+:-% *+ S%&'() *+ +)-.&%N1
8>1 J.(<;(4+ ( DR<.:( *% +=+;3Y3.% 0? *% &.P;% 8? )+4 6)(; -(E+&() H6)(:*% (D+:() D%).3.%:(/
4+:-% *+ S%&'() *+ +)-.&%N1