Você está na página 1de 74

Como?

Na lio 1 vimos o que necessrio para construir um website: um navegador e o


Notepad (ou um editor de texto similar). ma ve! que voc" esta lendo esta pgina#
provavelmente est com seu navegador aberto. $gora abra outra %anela do seu
navegador de modo que voc" ten&a duas %anelas na tela# uma para ler este tutorial e
outra para visuali!ar o website que voc" vai construir.
$bra tambm o Notepad ( 'niciar ( )rogramas ( $cess*rios):
$gora# estamos prontos para comear+
O que posso fazer?
,amos comear com algo simples. -ue tal uma pgina que diga: ./urra&+ 0sta a
min&a primeira pgina web.. 1ontinue e voc" ver como isto simples de 2a!er.
/345 simples e l*gico. O navegador l HTML de modo idntico ao que voc l
um texto qualquer, de cima para baixo e da esquerda para a direita $ssim um
documento /345 inicia com aquilo que deve ser a primeira coisa aparecer na pgina e
termina com a 6ltima coisa a aparecer.
$ primeira coisa a 2a!er di!er ao navegador que voc" vai .2alar. com ele na linguagem
/345. 'sto 2eito com a tag <html> (nen&uma novidade nisto). 0nto# antes de mais
nada digite .<html>. na primeira lin&a do documento# no Notepad.
1omo sabemos das li7es anteriores# <html> uma tag de abertura e deve ser 2ec&ada
com a tag de 2ec&amento quando voc" acabar de digitar seu documento /345. )ara
termos certe!a que no iremos esquecer de 2ec&ar a tag /345# 2aa isso agora mesmo#
digitando .</html>. locali!ada a algumas lin&as abaixo# assim voc" ir escrever seu
documento entre as tags digitadas <html> e </html>.
$ pr*xima coisa que o documento precisa um .&ead. (cabea)# que 2ornece
in2orma7es sobre o documento e um .bod8. (corpo)# que abriga o conte6do do
documento. 1omo /345 no seria nada se no 2osse l*gico# a .cabea. (<head> e
</head>) 2ica em cima do .corpo. (<body> e </body>).
9eu documento agora est como mostrado abaixo:
<html>
<head>
</head>
<body>
</body>
</html>

Notar como estruturamos o c*digo em lin&as di2erentes (usar a tecla Enter para
pular para pr*xima lin&a) e tambm a indentao (recuos) do c*digo (usar a tecla Tab
para indentar). $ pr:ncipio no 2a! qualquer di2erena a maneira como voc" estrutura
(lin&as e recuos na digitao) seu documento /345. 4as um c*digo bem estruturado
mais 2cil de ler e entender# ! altamente recomendado que voc adote uma estrutura
clara e n"tida para seu HTML, usando lin#as e indenta$%o &recuos'# como mostrado
no exemplo acima.
9e o seu documento est como o mostrado acima# voc" construiu sua primeira pgina
web ; uma pgina particularmente c&ata e provalvelmente nada parecido com o que
voc" son&ou 2a!er quando comeou a ler este tutorial# mas de qualquer 2orma um tipo
de website. 'sto que voc" 2e! ser um template base para seus 2uturos documentos
/345.
(t! aqui tudo bem, mas como colocar conte)do no meu
*ebsite?
1omo voc" % aprendeu# seu documento /345 composto de duas partes: um &ead e
um bod8. +a se$%o #ead voc escreve informa$,es sobre a p-gina e na se$%o bod.
voc coloca as informa$,es que constituem a p-gina
)or exemplo# para dar um t:tulo ao documento# t:tulo este que aparea no topo da barra
do navegador voc" dever usar a seo.&ead.. $ tag para acresentar um t:tulo
<title>:
<title>Minha primeira pgina web</title>

Notar que o t:tulo no aparece na pgina propriamente dita. 3udo que voc" quer que
aparea na pgina conte6do e dever ser colocado entre as tags .bod8..
1on2orme combinamos# queremos uma pgina di!endo# ./urra&+ 0sta a min&a
primeira pgina web.. 0ste o texto que queremos comunicar e ele dever ser colocado
na seo bod8. 0nto digite na seo bod8 o seguinte:
<p>Hurrah! Esta a minha primeira pgina web.</p>

$ letra p na tag <p> a abreviatura para .paragrap&. (pargra2o) que exatamente o
que o texto ; um texto pargra2o.
9eu documento /345 agora est como mostrado a seguir:
<html>
<head>
<title>Minha primeira pgina web</title>
</head>
<body>
<p>Hurrah! Esta a minha primeira pgina web.</p>
</body>
</html>

)ronto+ ,oc" acaba de construir seu primeiro website+
$gora basta que voc" salve seu trabal&o no /< e depois visuali!e no navegador:
No Notepad v ao menu .$rquivo. no topo da %anela e escol&a a opo .9alvar
como.....
0scol&a .3odos os arquivos. no box .9alvar como tipo.. 'sto muito importante
; caso voc" no 2aa isto# o arquivo ser salvo como texto e no como
documento /345.
9alve seu documento com o nome .page1.&tm. (a extenso ..&tm. indica que se
trata de um documento /345. $ extenso ..&tml. d o mesmo resultado. 0u
sempre uso ..&tm.# mas voc" pode escol&er a que voc" pre2erir .&tm ou .&tml).
,oc" pode salvar o documento onde voc" quiser no seu /< ; este%a certo de
salvar em um lugar que depois voc" possa ac&ar com 2acilidade.
$gora v ao seu navegador:
No menu existente no topo do navegador v em .$rquivo. e escol&a a opo
.$brir..
1lique em .)rocurar. no box que aparece.
5ocali!e o seu documento /345 e clique em .$brir..
,oc" dever ver no seu navegador: ./urra&+ 0sta a min&a primeira pgina web..
)arabns+
9e voc" quer que o mundo todo ve%a sua pgina# v direto para a 5io 1= e aprenda
como 2a!er upload da sua pgina para a 'nternet. 9e no# ten&a paci"ncia e continue
lendo. $ brincadeira apenas comeou.
: Mais tags HTML
0 a:> ,oc" construiu algumas pginas como sugerimos na lio anterior> No> 9im>
?em# a seguir um exemplo:
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>m !abe"alho</h1>
<p>te#to$ te#to te#to$ te#to</p>
<h%>&ubt'tulo</h%>
<p>te#to$ te#to te#to$ te#to</p>
</body>

</html>
/ agora?
$gora vamos aprender mais sete tags.
,oc" % sabe que pode obter negrito com a tag <b># agora saiba que pode obter itlico ;
letras inclinadas ; com a tag <i>. @ percebeu no ># .i. vem de .italic..
/xemplo 01
<i>Este te#to de(e ser itli!o.</i>
9er renderi!ado no navegador assim:
Este texto deve ser itlico.
<e modo similar voc" pode 2a!er seu texto com letra menores usando a tag <small>:
/xemplo 21
<small>Este te#to de(e ser !om letras em tamanho small.</small>
9er renderi!ado no navegador assim:
Este texto deve ser com letras em tamanho small.
3osso usar v-rias tags simultaneamente?
9im voc" pode usar quantas tags queira desde de que as anin#e convenientemente.
,e%a como 2a!er isto no exemplo abaixo:
/xemplo 41
)ara escrever um texto em negrito e itlico 2aa como mostrado a seguir:
<b><i>Te#to em negrito e itli!o.</i></b>
0 no assim:
<b><i>Te#to em negrito e itli!o.</b></i>
Abserve que no primeiro exemplo a primeira tag de abertura <b> corresponde a 6ltima
tag de 2ec&amento </b># e o anin&amento est certo. 'sto evita con2uso para quem
escreve o c*digo e para o navegador que l" o c*digo.
Mais tags5
1omo 2oi dito na 5io = existem tags que s%o abertas e fec#adas em )nica tag. 0stas
tags so comandos isolados# ou se%a# no contm nen&um texto dentro delas para poder
2uncionar. m exemplo a tag <br /> que serve para criar uma quebra de lin&a:
/xemplo 61
m te#to<br /> e mais te#to em no(a linha
9er renderi!ado no navegador assim:
Um texto
e mais texto em nova linha
Notar que a tag escrita como se 2osse uma mistura de tag de abertura e de 2ec&amento
com uma barra .B. no 2inal: <br />. $ princ:pio podemos escrever tambm <br></br>
(sem conte6do)# mas para que complicar>
Autra tag de comando <hr /> que serve para de2inir uma lin&a &ori!ontal (.&r. vem
.&ori!ontal rule. ; rgua &ori!ontal ):
/xemplo 71
<hr />
9er renderi!ado no navegador assim:
/xemplo 81
<ul>
<li>m item de lista</li>
<li>)utro item de lista</li>
</ul>
9er renderi!ado no navegador assim:
Um item de lista
Outro item de lista
/xemplo 91
<ol>
<li>*rimeiro item da lista</li>
<li>&egundo item da lista</li>
</ol>
9er renderi!ado no navegador assim:
1. Primeiro item da lista
2. Segundo item da lista
:au5 ;sto ! tudo?
9im# por enquanto isto tudo. $consel&amos# novamente# a 2a!er seus pr*prios
experimentos# construindo algumas pginas usando as sete tags ensinadas nesta lio:
<i>+tli!o</i>
<small>Te#to tamanho small</small>
<br /> *ula linha
<hr /> ,inha Hori-ontal
<blo!./uote>+ndenta"0o</blo!./uote>
<ul>,ista<ul>
<ol>,ista ordenada<ol>
<li>+tem de lista</li>
Atributos
,oc" pode adicionar atributos Cs tags.
O que ! atributo?
1omo voc" deve estar lembrado# uma tag um comando para o navegador (por
exemplo# <br /> um comando para mudar de lin&a). 0m algumas tags voc" pode ser
mais espec:2ico# acresentando na tag# in2orma7es adicionais de comando. 'sto 2eito
atravs dos atributos.
/xemplo 01
<h% style12ba!.ground3!olor4566777782>Eu adoro HTM,</h%>

$tributos so escritos dentro da tag# seguidos por um sinal de igual e depois entre aspas
so declaradas as in2orma7es do atributo. $s in2orma7es quando mais de uma# devem
ser separadas por ponto e v:rgula# tudo con2orme mostrado no exemplo acima. $diante
voltaremos a este assunto.
Como ! isto?
0xistem vrios atributos. A primeiro que voc" aprender o atributo st8le. Com o
atributo st.le voc pode adicionar estiliza$%o e la.out ao seu *ebsite. )or exemplo#
uma cor de 2undo:
/xemplo 21
<html>

<head>
</head>
<body style12ba!.ground3!olor4566777782>
</body>
</html>

A c*digo acima renderi!a uma pgina com cor de 2undo vermel&a ; v em 2rente+
experimente voc" mesmo# construa uma pgina vermel&a. $ seguir explicaremos como
2uncionam as cores.
Notar que algumas tags e atributos usam nomes do idioma ingl"s dos 0..$. D muito
importante que voc" use os nomes exatamente como mostrados neste tutorial ; se voc"
mudar uma letra que se%a# o navegador no ir entender seu c*digo. D importante
tambm que voc" no se esquea de 2ec&ar as aspas nas in2orma7es do atributo.
Como a p-gina ficou vermel#a?
No exemplo acima n*s usamos o c*digo .E22FFFF. para 2a!er a pgina na cor vermel&a.
0ate o c*digo para a cor vermel&a no sistema c&amado de n6meros &exadecimal
(/0G). Cada cor ! representada por um n)mero #exadecimal. $ seguir alguns
exemplos:
?ranco: E222222
)reto: EFFFFFF (!eros)
,ermel&o: E22FFFF
$!ul: EFFFF22
,erde: EFF22FF
$marelo: E2222FF
m c*digo &exadecimal para cores 2ormado por um sinal E seguido de seis d:gitos
eBou letras. 0xiste mais de 1FFF c*digos /0G e no 2cil decorar o c*digo para todas
as cores. )ara 2acilitar as coisas n*s desenvolvemos uma carta com as H1I cores mais
usadas na web: 1arta das H1I cores seguras para a Jeb.
)ara algumas cores# voc" pode usar o nome das cores em ingl"s (w&ite# blacK# red# blue#
green e 8ellow ; branco# preto# vermel&o# a!ul# verde# amarelo).
/xemplo 41
<body style12ba!.ground3!olor4 red82>

1&ega de cores. ,oltemos aos atributos.
<uais tags podem usar atributos?
(tributos podem ser aplicados = maioria das tags.
,oc" normalmente usar atributos com mais 2reqL"ncia em algumas tags# tais como a
tag body e raramente usar em outras# como por exemplo# a tag br que um
comando para pular de lin&a e no precisa de nen&uma in2ormao adicional.
$ssim como existem muitas tags# tambm existem muitos atributos. $lguns atributos
so empregados em tags espec:2icas enquanto outros servem para vrias tags. 0 vice;
versa: algumas tags podem conter somente um tipo de atributo# enquanto outras podem
conter vrios tipos.
'sto pode parecer um pouco con2uso# mas C medida que voc" 2or praticando vai
constatar que tudo 2cil e l*gico# bem como vai veri2icar as in6meras possibilidades
que os atributos o2erecem.
0ste tutorial apresentou a voc"# os atributos.
/nt%o, quais s%o as partes que constituem uma tag?
( constitui$%o b-sica de uma tag ! denominada elemento (por exemplo p em <p>).
$ssim# uma tag constituida de um elemento (por exemplo <p>)# ou por um elemento e
um ou mais atributos (por exemplo <p style12ba!.ground3!olor4566777782>).
9imples+
Links
Nesta lio voc" aprender como construir linKs entre pginas.
O que eu preciso para construir um lin>?
)ara construir um linK voc" usa o que tem usado at agora para codi2icar /345: uma
tag. :ma simples e pequenina tag com um elemento e um atributo ! suficiente para
voc construir lin>s para onde quiser $ seguir um exemplo de linK para o site
/345.net:
Exemplo 1:
<a hre612http4//www.html.net/2>9/ui um lin. para HTM,.net</a>

9er renderi!ado no navegador assim:
Aqui um link para H!".net
A elemento a re2ere;se a .anc&or. ; Mncora . A atribuito hre6 abreviao para
.&8pertext re2erence. ; re2er"ncia a &8pertexto ; e especi2ica o destino do linK ; que
normalmente um endereo na 'nternet ou um arquivo.
No exemplo acima o atributo hre6 tem o valor .&ttp:BBwww.&tml.net.# que o endereo
completo do site /345.net e c&amado de N5 (ni2orm Nesource 5ocator). Notar
que .&ttp:BB. deve sempre ser incluido nas N5s. $ 2rase .$qui um linK para
/345.net. o texto mostrado no navegador como linK. 5embre;se de 2ec&ar a tag com
um </a>.
Como s%o os lin>s entre min#as pr?prias p-ginas?
9e voc" quer construir linKs entre pginas de um mesmo website voc" no precisa
escrever o endereo completo de cada pgina (N5). )or exemplo# se voc" tem duas
pginas (vamos c&am;las de pagina1.&tm e paginaH.&tm) e salvou as duas em um
mesmo diret*rio voc" constr*i um linK de uma para a outra usando somente o nome do
arquivo no linK. Nestas condi7es# um linK da pgina1.&tm para a paginaH.&tm como
mostrado abaixo:
Exemplo 2:
<a hre612page%.htm2>9/ui um lin. para a pagina %</a>

9e a paginaH 2or colocada em um subdiret*rio (c&amado de .subdiretorio.)# o linK
como mostrado abaixo:
Exemplo 3:
<a hre612subdiretorio/pagina%.htm2>9/ui um lin. para a pagina %</a>

)or outro lado# um linK da paginaH no .subdiretorio. para a pagina1 como mostrado a
seguir:
Exemplo 4:
<a hre612../pagina1.htm2>9/ui um lin. para a pagina 1</a>

...B. aponta para o diret*rio a um n:vel acima do arquivo onde 2oi 2eito o linK. 9eguindo
o mesmo princ:pio voc" pode apontar para dois (ou mais) n:veis acima# escrevendo
...B..B..
,oc" entendeu> 1omo alternativa voc" pode usar sempre o endereo completo do
arquivo (N5).
Como s%o os lin>s dentro de uma mesma p-gina?
,oc" pode criar linKs internos# dentro da pr*pria pgina ; por exemplo# uma tabela de
conte6dos ou :ndice com linKs para cada um dos cap:tulos em uma pgina. 3udo o que
voc" precisa usar o atributo id e o s:mbolo .E..
se o atributo id para marcar o elemento que o destino do linK. )or exemplo:
<h1 id12heading12>:abe"alho 1</h1>

,oc" agora pode criar um linK que leve Cquele elemento usando o s:mbolo .E. no
atributo do linK. A s:mbolo .E. in2orma ao navegador para 2icar na mesma pgina que
est. A s:mbolo .E. deve ser seguido pelo valor atribuido a id para onde o linK vai. )or
exemplo:
<a hre6125heading12>,in. para o !abe"alho 1</a>

3udo 2ica claro com um exemplo:
Exemplo 5:
<html>

<head>
</head>
<body>
<p><a hre6125heading12>,in. para !abe"alho 1</a></p>
<p><a hre6125heading%2>,in. para !abe"alho %</a></p>
<h1 id12heading12>:abe"alho 1</h1>
<p>Te#to te#to te#to te#to</p>
<h1 id12heading%2>:abe"alho %</h1>
<p>Te#to te#to te#to te#to</p>

</body>
</html>

9er renderi!ado no navegador assim (clique nos dois linKs):
5inK para cabeal&o 1
5inK para cabeal&o H
Cabealo 1
3exto texto texto texto
Cabealo 2
3exto texto texto texto
(Nota: A nome de um atributo id deve comear com uma letra)
!osso "riar link para mais alguma "oisa#
,oc" pode criar linK para um endereo de e;mail. 'sto 2eito de modo semel&ante aos
linKs para documentos.
Exemplo $:
<a hre612mailto4nobody;html.net2>En(iar e3mail para nobody em
HTM,.net</a>

9er renderi!ado no navegador assim:
En(iar e3mail para nobody em HTM,.net
$ 6nica di2erena que no lugar do endereo do documento voc" escreve mailto4
seguido pelo endereo de e;mail. -uando o linK clicado o programa de e;mail padro
do usurio aberto com o endereo do linK % digitado na lin&a para destinatrio. 4as#
ateno# isto s* ir 2uncionar se o usurio tiver um programa de e;mail instalado na sua
mquina. Oaa uma experi"ncia com este tipo de linK clicando no exemplo acima.
/xistem outros atributos que eu deva con#ecer?
)ar criar linKs voc" sempre usa o atributo hre6. $dicionalmente voc" pode usar um
title <t'tulo= para seu linK:
Exemplo %:
<a hre612http4//www.html.net/2 title12>isite HTM,.net e aprenda
HTM,2>HTM,.net</a>

9er renderi!ado no navegador assim:
/345.net
A atributo title usado para 2ornecer uma breve descrio do linK. 9e voc" ; sem clicar
no linK ; colocar o cursor do mouse sobre o linK# vai aparecer o texto .,isite o site
/345.net e aprenda /345..
&magens
A que voc" ac&a de poder adicionar uma imagem do 3im ?ernes;5ee o inventor do
/345 no centro da sua pgina>
Ops, isto soa como um desafio
3alve!# mas muito 2cil de 2a!er. 3udo o que voc" precisa da nossa % con&ecida tag:
/xemplo 01
<img sr!12tim.?pg2 alt12Tim @erners3,ee2 />

9er renderi!ado no navegador assim:
A que voc" tem a 2a!er di!er ao navegador que quer inserir uma imagem (img) e
depois in2ormar onde a imagem esta locali!ada (sr!# abreviatura para .source. ; local
de arma!enagem ).
Notar que a tag imagem do tipo comando isolado# isto # uma s* tag de abertuta e
2ec&amento. 9emel&ante a tag <br /> que no precisa de um texto inserido nela.
.tim.%pg. o nome do arquivo da imagem que voc" quer inserir na pgina. ..%pg. a
extenso do tipo de imagem. 3al como a extenso ..&tm. para arquivos de documentos
/345# ..%pg. in2orma ao navegador que o arquivo uma imagem. 9o tr"s os tipos de
imagens que voc" pode inserir na sua pgina:
#$% &#raphics $nterchange %ormat'
(P# ) (PE# &(oint Photographic Experts #roup'
P*# &Porta+le *et,ork #raphics'
/m geral imagens @;A s%o mel#ores para gr-ficos e desen#os e imagens B3/@ s%o
mel#ores para fotografia. 0xistem duas ra!7es para isto: primeiro# imagens P'O so
constituidas por HQI cores# e imagens @)0P por mil&7es de cores# segundo# imagens
P'O so mel&ores otimi!adas para imagens simples ao passo que imagens @)0P so
mel&ores otimi!adas para imagens complexas. -uanto mel&or a compresso tanto
menor o taman&o do arquivo e tanto mais rpido a pgina carregada no navegador.
1omo voc" deve saber por experi"ncia pr*pria# pginas desnecessariamente .pesadas.
para carregar so 2rustantes para o usurio.
3radicionalmente os 2ormatos P'O e @)0P tem sido os mais empregados# mas
ultimamente o 2ormato )NP tem se tornado cada ve! mais popular (notadamente em
detrimento do 2ormato P'O). O formato 3+@ ! em v-rios aspectos mel#or que os
formatos B3/@ e @;A1 mil#,es de cores e efetiva compress%o
Onde consigo min#as imagens?
)ara criar suas pr*prias imagens voc" precisa de um programa de edio de imagens.
:m programa de edi$%o de imagens ! a ferramenta essencial para cria$%o de
*ebsites com grande impacto visual
5amentavelmente# nen&um editor de imagem vem instalado com o Jindows ou
qualquer outro sistema operacional. $ssim# voc" deve considerar a aquisio do )aint
9&op )ro# do )&oto9&op ou do 4acromedia OireworKs# que so os tr"s mel&ores
editores de imagens atualmente existentes no mercado.
1ontudo# como % dissemos# no & necessidade de comprar um programa caro para
acompan&ar este tutorial. )or enquanto# voc" poder 2a!er o download de um exelente
editor de imagens c&amado 'r2an ,iew que 2reeware# isto # no custa nada.
Au voc" pode 2a!er download de imagens existentes na web. 4as# por 2avor# se optar
por 2a!er o download de imagens da 'nternet# cuidado para no violar direitos autorais
de terceiros. $ seguir mostro como 2a!er o download de uma imagem existente na
'nternet:
1. -lique com o +ot.o direito do mouse na imagem da $nternet.
2. *o menu que aparece escolha a op/.o 0Salvar imagem como...0.
1. *a 2anela que se a+re3 escolha o lugar no seu computador para salvar e clique
0Salvar0.
Oaa isto com a imagem abaixo e salve no seu computador no mesmo local onde est
locali!ado seus documentos /345. (Notar que dever ser salvo o arquivo com 2ormato
)NP: logo.png):
$gora voc" pode inserir a imagem nos seus documentos. 3ente 2a!er isto em um
documento que voc" criou neste tutorial.
;sto ! tudo o que eu preciso saber sobre imagens?
0xistem mais algumas coisin&as que voc" precisa saber.
)rimeiro# voc" pode inserir imagens que esto locali!adas em outros diret*rios ou at
mesmo em outros websites:
/xemplo 21
<img sr!12images/logo.png2>

/xemplo 41
<img sr!12http4//www.html.net/logo.png2>

9egundo# imagens podem ser linKs:
/xemplo 61
<a hre612http4//www.html.net2>
<img sr!12logo.png2></a>

9er renderi!ado no navegador assim: (clique na imagem):
/xistem outros atributos que eu deva con#ecer?
,oc" sempre ter que usar o atributo sr!# que di! ao navegador onde a imagem est
locali!ada. $lm dele existem alguns outros atributos que podem ser bastante 6teis
quando voc" insere imagens em uma pgina.
A atributo alt usado para 2ornecer uma descrio textual alternativa da imagem caso
por alguma ra!o a imagem no se%a renderi!ada para o usurio. 'sto particularmente
importante para usurios com restri7es visuais ou quando a imagem carregada muito
lentamente. 0m conseqL"ncia# sempre use o atributo alt:
/xemplo 71
<img sr!12logo.gi62 alt12logotipo do HTM,.net2>

$lguns navegadores mostram uma caixa pop;up com o conte6do do atributo alt
quando o usurio passa o mouse sobre a imagem. 3en&a em mente que a 2inalidade
principal do atributo alt a de 2ornecer uma alternativa textual para imagem. A
atributo alt no deve ser usado para criar mensagens pop;up uma ve! que os leitores de
tela passaro uma mensagem que no descreve a imagem para os usurios com
restri7es visuais.
A atributo title pode ser usado para 2ornecer uma curta descrio da imagem:
/xemplo 81
<img sr!12logo.gi62 title129prenda HTM, no site HTM,.net2>

9er renderi!ado no navegador assim:
1oloque o ponteiro do mouse sobre a imagem# sem clicar e aparecer uma caixa pop;up
com o texto .$prenda /345 no site /345.net. .
<ois outros atributos importantes so width e height:
/xemplo 91
<img sr!12logo.png2 width121A12 height12B%2>

9er renderi!ado no navegador assim:
As atributos width e height podem ser usados para de2inir respectivamente# a largura e
a altura da imagem. A valor adotado para medidas o pixel. )ixel a unidade de
medida usada para medir a resoluo da tela. ($s resolu7es de tela mais comuns so de
RFFxIFF e 1FH=xSIR pixels). $o contrrio de cent:metros# pixel uma inidade de
medida relativa que depende da resoluo da tela. surios com grande resoluo de
tela tero HQ pixels em 1 cent:metro de tela enquanto aqueles com baixa resoluo de
tela tero os mesmos HQ pixels em 1#Q cm de tela.
9e no 2orem de2inidos os valores para widt& e&eig&t# a imagem ser inserida com seu
taman&o real. 1om widt& e &eig&t voc" pode alterar o taman&o da imagem:
/xemplo C1
<img sr!12logo.gi62 width12B%2 height12B%2>

9er renderi!ado no navegador assim:
1ontudo# o tempo de descarga da imagem ser sempre aquele requerido como se ela
tivesse suas dimens7es reais# mesmo que voc" diminua seu taman&o com uso destes
atributos. $ssim# voc n%o deve diminuir o taman#o das imagens com o uso dos
atributos *idt# e #eig#t. 9e voc" precisa diminuir a imagem diminua suas dimens7es
reais em um editor de imagem para tornar suas pginas mais leves e mais rpidas.
<ito isto# acrescentamos que sempre uma boa idia de2inir os atributos widt& e &eig&t
para imagens# pois assim 2a!endo o navegador reservar o espao para descarga da
imagem previamente. 'sto acaba por permitir ao navegador# saber com anteced"ncia
(antes de descarregar as imagens) como ser o la8out da pgina.
)or enquanto isto tudo sobre o 3im ?erners;5ee e sobre imagens.
Tabelas
Tabelas s%o usadas para apresentar Ddados tabularesD # isto # in2ormao que deva
ser apresentada em lin&as e colunas# de 2orma l*gica.
E dif"cil?
1riar tabelas em /345 pode parecer complicado# mas se voc" 2icar 2rio e acompan&ar
passo a passo a explicao# ver que tudo evidente ; tal como acontece com tudo no
/345.
/xemplo 01
<table>
<tr>
<td>:lula 1</td>
<td>:lula %</td>
</tr>
<tr>
<td>:lula B</td>
<td>:lula A</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula
1
-4lula
2
-4lula
1
-4lula
5
<ual a diferen$a entre <tr> e <td>?
1omo voc" deve ter visto no exemplo acima# este 2oi o c*digo /345 mais complicado
que escrevemos at agora. ,amos analisar isto por partes e explicar as di2erentes tags:
4 tags b-sicas s%o usadas para inserir tabelas1
<table> come/a e termina uma ta+ela. Evidente.
<tr> signi6ica 0ta+le ro,0 7 linha de ta+ela 7 come/a e termina e uma linha
hori8ontal da ta+ela. am+4m evidente.
<td> signi6ica 0ta+le data0 7 dados da ta+ela. come/a e termina cada c4lula
contida nas linhas da ta+ela. udo simples e evidente.
0is o acontece no 0xemplo 1: a tabela comea com <table># segue;se uma <tr># que
indica o in:cio de uma nova lin&a. <uas clulas so ento inseridas na lin&a: <td>1lula
1</td> e <td>1lula H</td>. $ lin&a termina com </tr> e uma nova lin&a <tr>
comea imediatamente a seguir. $ nova lin&a tambm contm duas clulas. $ tabela
termina com </table>.
)ara esclarecer: lin#as s%o #orizontais e colunas s%o verticais, ambas contendo
c!lulas:
-4lula
1
-4lula
2
-4lula
1
-4lula
5
1lula 1 e 1lula H 2ormam uma lin&a. 1lula 1 e 1lula T 2ormam uma coluna.
No exemplo acima a tabela tem duas lin&as e duas colunas. ma tabela pode conter um
n6mero ilimitado de lin&as e colunas.
/xemplo 21
<table>
<tr>
<td>:lula 1</td>
<td>:lula %</td>
<td>:lula B</td>
<td>:lula A</td>
</tr>
<tr>
<td>:lula C</td>
<td>:lula D</td>
<td>:lula E</td>
<td>:lula F</td>
</tr>
<tr>
<td>:lula G</td>
<td>:lula 17</td>
<td>:lula 11</td>
<td>:lula 1%</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula
1
-4lula 2 -4lula 1 -4lula 5
-4lula
9
-4lula : -4lula ; -4lula <
-4lula
=
-4lula
1>
-4lula
11
-4lula
12
/xistem atributos?
1laro+ existem atributos. )or exemplo# o atributo border que usado para de2inir a
espessura de uma borda em volta da tabela:
/xemplo 41
<table border1212>
<tr>
<td>:lula 1</td>
<td>:lula %</td>
</tr>
<tr>
<td>:lula B</td>
<td>:lula A</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula
1
-4lula
2
-4lula
1
-4lula
5
$ espessura da borda especi2icada em pixels (,er lio U)
3al como 2i!emos com as imagens# podemos de2inir widt& ; largura ; em pixels# para
uma tabela ; ou alternativamente em percentagem da tela:
/xemplo 61
<table border1212 width12B7H2>

0ste exemplo renderi!a no navegador uma tabela com largura igual a TFV da largura da
tela. 3ente voc" mesmo.
Mais atributos?
0xiste uma grande quantidade de atributos para tabelas. $ seguir mais dois:
align? de6ine o alinhamento hori8ontal do conte@do da ta+ela3 de uma linha ou
de uma c4lula. Por exemplo3 le6t3 centre ou right &A esquerda3 no centro ou A
direita'.
valign? de6ine o alinhamento vertical do conte@do de uma c4lula. Por exemplo3
top3 middle ou +ottom &em cima3 no meio ou em +aixo'.
/xemplo 71
<td align12right2 (align12top2>:lula 1</td>

O que posso inserir em tabelas?
3eoricamente voc" pode inserir qualquer coisa em uma tabela: texto# linKs e imagens...
M(F, tabelas destinamGse a apresentar dados tabulares (isto # dados que por sua
nature!a devam ser apresentados em lin&as e colunas) ento absten&a;se de colocar
coisas dentro de tabela simplesmente porque voc" dese%a que elas este%am pr*ximas
umas Cs outras.
Nos prim*rdios da 'nternet ; isto # & poucos anos atrs ; tabelas eram usadas como
2erramenta para construir la8out. 9e voc" quer controlar a apresentao de textos e
imagens# existe uma maneira bem mais racional (dica:199). $diante veremos isto.
$gora# coloque em prtica tudo que voc" aprendeu e crie vrias tabelas de di2erentes
taman&os# usando di2erentes atributos e conte6dos. 'sto ir ocupar voc" por &oras.
Mais tabelas
A t:tulo .4ais tabelas. pode sugerir uma lio en2adon&a. 4as# ve%a as coisas pelo lado
positivo# depois que voc" se tornar um mestre em tabelas nada mais do /345 poder
desa2i;lo.
O que mais existe?
As dois atributos !olspan e rowspan so usados para criar tabelas singulares.
:olspan a abreviao para .column span.. Colspan ! usada na tag <td> para
indicar quantas colunas estar%o contidas em uma c!lula
/xemplo 01
<table border1212>
<tr>
<td !olspan12B2>:lula 1</td>
</tr>
<tr>
<td>:lula %</td>
<td>:lula B</td>
<td>:lula A</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula 1
-4lula
2
-4lula
1
-4lula
5
<e2inindo !olspan em .T.# a clula na primeira lin&a conter tr"s colunas. 9e voc"
de2inir !olspan em .H.# a clula conter duas colunas e assim ser necessrio inserir
mais uma clula na primeira lin&a para que ten&amos na primeira lin&a as colunas em
acordo com as da segunda lin&a.
/xemplo 21
<table border1212>
<tr>
<td !olspan12%2>:lula 1</td>
<td>:lula %</td>
</tr>
<tr>
<td>:lula B</td>
<td>:lula A</td>
<td>:lula C</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula 1
-4lula
2
-4lula
1
-4lula
5
-4lula
9
<ue tal ro*span?
1omo voc" % deve ter concluido# rowspan especifica quantas lin#as estar%o contidas
em uma c!lula1
/xemplo 41
<table border1212>
<tr>
<td rowspan12B2>:lula 1</td>
<td>:lula %</td>
</tr>
<tr>
<td>:lula B</td>
</tr>
<tr>
<td>:lula A</td>
</tr>
</table>

9er renderi!ado no navegador assim:
-4lula
1
-4lula
2
-4lula
1
-4lula
5
No exemplo acima rowspan de2inido em .T. na 1lula 1. 'sto especi2ica que uma
clula deve conter T lin&as. 1lula 1 e 1lula H esto na mesma lin&a# enquanto 1lula T
e 1lula = 2ormam duas lin&as independentes.
1on2uso> ?em# isto na verdade no descomplicado e voc" pode se perder. $ssim#
sempre uma boa idia# desen&ar a tabela em uma 2ol&a de papel antes de comear a
codi2icao /345.
No est con2uso> 0nto v em 2rente e crie algumas tabela com uso de !olspan e
rowspan.
La'out (C))*
No seria *timo se voc" pudesse dar C sua pgina o la8out que ela merece>
Claro5 mas como fa$o isto?
3ara o la.out da sua p-gina use Cascading Ft.le F#eets &CFF' G Aol#as de /stilo em
Cascata. Nesta lio voc" ter uma breve introduo Cs 199. <epois voc" poder
aprender 199 desde o in:cio no nosso tutorial 199. $ssim# considere esta lio apenas
um aperitivo.
199 a mel&or metade do /345. 1odi2icando# no & mel&or parceria: HTML !
respons-vel pelo trabal#o pesado &a estrutura', enquanto CFF d- o toque de
elegHncia &la.out'.
1omo mostrado na 5io S# CFF pode ser adicionado com uso do atributo st.le. )or
exemplo# voc" pode de2inir o tipo e o taman&o da 2onte em um pargra2o:
/xemplo 01
<p style="font-size:20px;">Este pargra6o em tamanho de 6onte igual a
%7p#</p>
<p style="font-family:courier;">Este pargra6o em 6onte :ourier</p>
<p style="font-size:20px; font-family:courier">Este pargra6o em 6onte
:ourier e tamanho %7p#</p>

9er renderi!ado no navegador assim:
0ste pargra2o em taman&o de 2onte igual a HFpx
Este pargrafo em fonte Courier
Este pargrafo em fonte Courier e tamanho 20px
No exemplo acima usamos o atributo style para de2inir o tipo de 2onte usado (com a
propriedade 6ont36amily) e o taman&o da 2onte (com a propriedade 6ont3si-e). Notar
que no 6ltimo pargra2o do exemplo de2inimos tanto o tipo como o taman&o da 2onte
separados por um ponto e v:rgula.
/st- parecendo que #- uma grande quantidade de
trabal#o a executar
:ma das funcionalidades mais inteligentes das CFF ! a possibilidade de controlar o
la.out de um arquivo central. 0m lugar de se usar o atributo style em cada tag# voc"
pode di!er ao navegador como deve ser o la8out de todos os textos em uma pgina:
/xemplo 21
<html>
<head>
<title>Minha primeira pgina :&&</title>
<style type="text/css">
! "font-size: #0px; font-family: arial$
2 "font-size: !%px; font-family: courier$
p "font-size: &px; font-family: times new roman$
</style>
</head>
<body>
<h1>Minha primeira pgina :&&</h1>
<h%>@em (indo I minha primeira pgina :&&</h%>
<p>9/ui (o!J (er !omo 6un!iona :&&</p>
</body>
</html>
Ber exemplo
No exemplo acima inserimos as CFF na se$%o #ead do documento, assim ela se
aplica = p-gina inteira . )ara 2a!er isto use a tag <style type12te#t/!ss2> que
in2orma ao navegador que voc" est digitando 199.
No exemplo# todos os cabeal&os da pgina sero em 2onte $rial e taman&o TFpx.
3odos os subt:tulos sero em 2onte 1ourier taman&o 1Q. 0# todos os textos dos
pargra2os sero em 2onte 3imes New Noman taman&o R.
ma outra opo a de digitar as 199 em um documento separado. Com as CFF em
um documento separado voc pode gerenciar o la.out de muitas p-ginas ao mesmo
tempo 4uito inteligente# pois voc" pode mudar de uma s* ve!# o tipo ou o taman&o da
2onte de todo o site# quer ele ten&a centenas ou mil&ares de pginas. N*s no nos
apro2undaremos em 199 agora# mas voc" pode aprender tudo# no 2uturo# em nosso
tutorial 199.
O que mais posso fazer com CFF?
199 2a! muito mais do que de2inir tipos e taman&os de 2ontes. )or exemplo# voc" pode
adicionar cores e 2undos. $ seguir alguns exemplos para voc" praticar:
<p style="color:'reen;">Te#to (erde</p>
<h1 style="(ac)'round-color: (lue;">:abe"alho !om 6undo a-ul</h1>
<body style="(ac)'round-ima'e: url*+ttp://www,tml,net/lo'o,pn'+-;">

ente inserir estes cCdigos em algumas das suas pDginas 7 experimente as duas
6ormas de inserir3 tanto como mostrado acima como colocando as -SS na se/.o head
do documento.
CFF n%o ! nada mais do que cores e tipos de fontes?
$lm de cores# tipos de 2ontes# etc.# CFF pode ser usado para controlar a
configura$%o e a apresenta$%o da p-gina (margens# 2lutua7es# alin&amentos#
larguras# alturas# etc.) 1ontrolando os di2erentes elementos com 199 voc" ser capa! de
criar la8outs elegantes e precisos.
/xemplo 41
<p style="paddin':2%px;(order:!px solid red;">Eu amo :&&</p>

9er renderi!ado no navegador assim:
0u amo 199
1om a propriedade 6loat um elemento poder .2lutuar. C esquerda ou C direita. A
exemplo seguinte ilustra este princ:pio:
/xemplo 61
<img sr!12bill.?pg2 alt12@ill Kates2 style= "float:left;" />
<p>,orem ipsum dolor sit amet$ !onse!tetuer adipis!ing elit$
sed diam nonummy nibh euismod tin!idunt ut laoreet dolore
magna ali/uam erat (olutpat. t wisi enim ad minim (eniam$
/uis nostrud e#er!i tation ullam!orper sus!ipit
lobortis nisl ut ali/uip e# ea !ommodo !onse/uat...</p>

9er renderi!ado no navegador assim:
5orem ipsum dolor sit amet# consectetuer adipiscing elit# sed diam nonumm8 nib&
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. t wisi enim ad minim
veniam# quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat...
No exemplo mostrado# um elemento (a imagem) 2lutua C esquerda e o outro elemento (o
texto) preenc&e o espao deixado C direita.
1om a propriedade position# voc" pode posicionar um elemento em qualquer lugar da
pgina# com preciso:
/xemplo 71
<img sr!12bill.?pg2 alt12@ill Kates2
style="position:a(solute;(ottom:%0px;ri't:!0px;" />

Ber exemplo
No exemplo mostrado a imagem 2oi posicionada a QF pixels da borda in2erior e a 1F
pixels da borda direita do navegador. ,oc" pode colocar em qualquer lugar na pgina.
3ente voc" mesmo. Ocil e legal# e&>
Legal sim Mas, f-cil?
Ioc n%o aprende CFF em 0J minutos. 0 como 2oi dito acima# nesta lio voc" teve
apenas uma breve introduo Cs 199. No 2uturo aprenda mais no nosso 3utorial 199.
)or enquanto concentre;se no /345# e passe para a pr*xima lio onde voc" aprender
como publicar seu website na 'nternet para que o mundo todo o ve%a+
+ploa,ing p-ginas
$t agora somente voc" conseguiu visuali!ar suas pginas. 1&egou a &ora de mostr;las
para o mundo todo.
O mundo est- preparado para ver suas p-ginas?
A mundo est preparado sim ; voc"# em breve# estar tambm. 3ara publicar seu
trabal#o na ;nternet, voc precisa somente de espa$o em um servidor e um
programa AT3 gratuito
9e voc" costuma acessar a 'nternet % deve ter visto que existem vrios servios
gratutitos de &ospedagem de sites. 9eu endereo no servidor ser alguma coisa parecida
com &ttp:BB&ome.servidor.comBWnomedousuario. ,oc" tem que ativar o servio.
'n2orme;se como 2a!er isto na documentao 2ornecida pelo servio de &ospedagem.
Autra opo obter um espao gratuito de um servidor na 'nternet. 'sto igual a
registrar uma conta de e;mail (como por exemplo# obter um endereo de e;mail do
&otmail) voc pode registrarGse gratuitamente para obter um espa$o em um
servidor na ;nternet. 0xistem vrias compan&ias que o2erecem este servio gratuito ;
entre elas a $ngel2ire (clique em .9ign p. e escol&a membro gratuito ; ou 2aa uma
busca no Poogle para encontrar um servio gratuito com registro em portugu"s) ; isto
um processo bem rpido.
)ara acessar o servidor voc" precisa con&ecer o .Nome do seu servidor. ()or exemplo#
2tp.angel2ire.com) e ter um nome de usurio e sen&a.
;sto ! tudo que eu preciso?
)ara acessar o servidor e publicar as pginas voc" precisa de um programa O3). ,oc"
no deve ter um programa destes ainda# mas existem vrios deles na 'nternet para
download e so gratuitos.
/xistem muitos programas AT3 :m dos mel#ores ! o AileKilla, e ! gratuito . ,oc"
pode obter o OileXilla em 2ile!illa.source2orge.net.
Como eu fa$o o upload das p-ginas?
$baixo 2ornecemos um exemplo de como 2a!er isto usando o servidor $ngel2ire e o
programa OileXilla. 0ste procedimento mais ou menos igual para qualquer programa
O3).
1onecte;se C 'nternet e abra o programa O3). 'nsira ./ost Name. (.2tp.angel2ire.com.
no .$ddress.)# nome do usurio (em .ser.) e sen&a (em .)assword.) clique
.1onnect.. ,oc" agora tem acesso ao servidor. 0m um lado da %anela do programa voc"
ver os diret*rios e arquivos do seu computador (.5ocal 9ite.)# e no outro o do servidor
(.Nemote 9ite.):
$c&e os seus documentos /345 e imagens a serem publicadas (no .5ocal site.) e
trans2ira para o servidor (.Nemote site.) simplesmente dando um clique duplo nos
arquivos. $gora o mundo todo poder ver seu site+ ()or exemplo# no endereo
&ttp:BBwww.angel2ire.comB2olKB&tmlnetBpagina1.&tm).
<" a uma das pginas o nome de .index.&tm. (ou .index.&tml.) e ela ser
automaticamente a pgina de entrada no site# ou se%a# basta digitar
&ttp:BBwww.angel2ire.comB2olKB&tmlnet (sem qualquer nome de arquivo) e abrir
&ttp:BBwww.angel2ire.comB2olKB&tmlnetBindex.&tm.
3ara mais adiante ser- uma boa id!ia comprar um dom"nio &espa$o no servidor' s?
para voc (www.seu;nome.com) e assim ter um nome do site bem mais curto e 2cil de
guardar que aqueles 2ornecidos por um servio gratuito da 'nternet. ,oc" pode
encontrar na 'nternet vrias 2irmas que vendem dom:nio. Oaa uma busca do Poogle.
.eb stan,ar,s e /ali,a0o
Nesta lio voc" aprender mais alguns conceitos te*ricos do /345.
O que mais #- para con#ecer sobre HTML?
/345 pode ser escrito de vrias maneiras. A navegador est apto a ler /345 escrito
de vrias maneiras. )odemos di!er que HTML tem muitos dialetos. 0sta a ra!o
porqu" alguns websites so apresentados de 2ormas diversas em di2erentes navegadores.
Lesde o aparecimento da ;nternet tem sido feitas v-rias tentativas para se
normatizar o HTML notadamente atrav!s do Morld Mide Meb Consortium
&M4C' 2undado por 3im ?erners;5ee (8ep+ o grande su%eito que inventou o /345).
4as# este tem sido um rduo e longo camin&o.
No passado ; quando voc" tin&a que comprar um navegador ; Netscape dominava o
mercado de navegadores. Yquela poca as normas para o /345 estavam nas suas
vers7es H.F e T.H. 4as pelo 2ato de dominar UFV do mercado a Netscape no teria ; e
no teve ; que se preocupar muito com normas. )elo contrrio# a Netscape inventava
seus pr*prios elementos de marcao que no 2uncionavam em outros navegadores.
)or muitos anos a 4icroso2t ignorou completamente a 'nternet. 0m determinado
momento# resolveu competir com a Netscape e lanou seu navegador pr*prio. $
primeira verso do navegador da 4icroso2tZs# o 'nternet 0xplorer# no era mel&or do que
o Netscape no suporte Cs normas do /345. 4as# a 4icroso2t resolveu distribuir seu
navegador gratuitamente (isto sempre agrada a todos) e o 'nternet 0xplorer em pouco
tempo tornou;se o navegador mais usado e mais popular.
$ partir das vers7es = e Q a 4icroso2t anunciava que seus navegadores o2ereciam cada
ve! maior suporte Cs normas /345 do JT1. $ Netscape no se movimentou para
atuali!ar seu navegador e continuou a colocar no mercado a vel&a e desatuali!ada
verso =.
A que vem a seguir &ist*ria. Nos dias atuais as normas /345 esto na sua verso
=.F1 e no G/345. /o%e em dia o 'nternet 0xplorer que detm quase UFV do
mercado. A 'nternet 0xplorer ainda tem seus elementos pr*prios# mas o2erece suporte
para as normas /345 do JT1. As navegadores 4o!illa# Apera e Netscape tambm
suportam as normas.
/nt%o, quando voc codifica HTML de acordo com as normas do M4C, voc est-
construindo um *ebsite para ser visualizado em todos os navegadores ; no s*
agora mas tambm no 2uturo. 0 2eli!mente# tudo o que voc aprendeu neste tutorial
est- de acordo com a mais nova vers%o do HTML, que ! o NHTML.
Legal5 3osso anunciar?
<evido a exist"ncia de di2erentes tipos de /345# voc" precisa in2ormar ao navegador
qual o .dialeto. do /345 e no seu caso voc" aprendeu G/345. )ara in2ormar ao
navegador# voc" usa o <ocument 38pe <e2inition. A <ocument 38pe <e2inition deve
ser escrito sempre no topo do documento:
/xemplo 01
<./0C1234 tml 35678C "-//9#C///1/ :;1<7 !,0 =trict//4>"
"ttp://www,w#,or'/1?/xtml!//1//xtml!-strict,dtd">
<tml xmlns="ttp://www,w#,or'/!@@@/xtml" lan'="pt-(r">
<head>
<title>T'tulo</title>
</head>
<body>
<p>te#to te#to</p>
</body>
</html>

$lm do <ocument 38pe <e2inition (escrito na primeira lin&a no exemplo acima)# que
in2orma ao navegador que voc" est codi2icando G/345# voc" precisa ainda adicionar
in2ormao extra na tag &tml# usando os atributos #mlns e lang.
#mlns abreviao de .G45;Name;9pace. e deve ter sempre o valor
#ttp1OO****4orgO0PPPOx#tml. 'sto tudo o que voc" precisa saber. 9e voc" tem o
&bito ou gosta de se apro2undar e con&ecer coisas complicadas poder ler mais sobre
namespaces no site do JT1.
No atributo lang voc" espec:2ica em que l:ngua (aqui trata;se de linguagem &umana) o
documento escrito. $s abreviaturas para as l:nguas existentes no mundo todo# esto
nas '9A ITU standard . No exemplo acima a l:ngua de2inida no atributo o portugu"s do
?rasil (.pt;br.).
ma <3< in2ormar ao navegador como deve ser lido e renderi!ado o /345. se o
exemplo mostrado# como um template para todos os seus 2uturos documentos /345.
A <3< importaante ainda# para a validao da pgina.
Ialida$%o? 3orqu deveria eu fazer isto?
'nsira o <3< nas suas pginas e poder veri2icar erros no seu /345# usando o
validador gratuito do JT1.
)ara testar o validador 2aa o seguinte: crie uma pgina e publique na 'nternet. $ seguir
entre em validator.wT.org e l digite o endereo (a N5) da sua pgina# depois clique
no boto validar. 9e seu /345 estiver correto# vai aparecer uma mensagem de
congratula7es. 9e no# ser apresentada uma lista de erros# in2ormando o qu" est
errado e onde. 1ometa alguns erros propositais no seu c*digo para veri2icar o que
acontece.
A validador no 6til somente no encontro de erros. $lguns navegadores tentam
interpretar os erros cometidos pelos desenvolvedores e consertar o c*digo mostrando a
pgina corretamente. 0m navegadores assim voc" nunca encontrar erros no pr*prio
navegador. @ outros navegadores no aceitam o erro e apresentam a pgina arruinada
ou mesmo nem apresentam. A validador ento a%uda voc" a encontrar erros que voc"
no ten&a nem idia de que existiam
9empre valide suas pginas# para ter certe!a que elas sero mostradas corretamente em
todos os navegadores.
A#OEA O EFSO* BA!OS
PEEPAE U! "AGOU E! -SS
OH.....
1 2ue 3 C))#
3alve! voc" % ten&a ouvido 2alar em 199# mas no saiba o que signi2ica exatamente.
Nesta lio voc" saber o que e para que serve 199.
199 a abreviatura para Cascading Ft8le F&eets. [ Ool&a de 0stilos em 1ascata
O que eu posso fazer com CFF?
199 uma linguagem para estilos que de2ine o la8out de documentos /345. )or
exemplo# 199 controla 2ontes# cores# margens# lin&as# alturas# larguras# imagens de
2undo# posicionamentos e muito mais. $guarde e voc" ver+
/345 pode ser (in)devidamente usado para de2inir o la8out de websites. 1ontudo 199
proporciona mais op7es e mais preciso e so2isticado. 199 suportado por todos os
navegadores atuais.
<epois de estudar algumas poucas li7es deste tutorial# voc" estar em condi7es de
pro%etar uma 2ol&a de estilos# usando 199 para dar um grande visual ao seu website.
<ual ! a diferen$a entre CFF e HTML?
/345 usado para estruturar conte6dos. 199 usado para 2ormatar conte6dos
estruturados.
A\# isto soa um tanto tcnico e con2uso. 4as# por 2avor continue lendo. 3udo 2ar
sentido em breve.
0m tempos passados quando a 4adonna era virgem e um su%eito c&amado 3im ?erners
5ee inventou a Jorld Jide Jeb# a linguagem /345 era usada somente para estruturar
textos. m autor podia marcar seus textos de2inindo .isto um cabeal&o . ou .isto
um pargra2o. usando tags /345 tais como <h1> e <p>.
Y medida que a Jeb gan&ava popularidade# os designers comeavam a sentir a
necessidade de encontrar meios de construir la8out para os documentos online. )ara
suprir estas necessidades os 2abricantes de navegadores (Cquela poca a Netscape e a
4icroso2t) inventaram novas tags /345 tais como# por exemplo a tag <6ont> que se
di2erenciava das tags originais do /345 pelo 2ato de destinar;se C la8out [ e no C
estrutura.
'sto adicionalmente teve o e2eito de disvirtuar o emprego de tags inicialmente pro%etadas
para estrutura como por exemplo a tag ]table^ que passaram a ser empregadas para
la8out. 4uitas destas novas tags para la8out como a tag ]blinK^ eram suportadas
somente por um determinado tipo de navegador. $ 2rase .,oc" precisa do navegador G
para visuali!ar esta pgina. tornou;se comum nos websites.
199 2oi inventada para solucionar esta situao# colocando C disposio dos web
designers meios so2isticados de pro%etar la8outs suportados por todos os navegadores. 0
ao mesmo tempo a separao dos estilos de apresentao da marcao dos conte6dos
torna a manuteno dos sites bem mais 2cil.
<uais s%o os benef"cios do uso de CFF?
199 uma revoluo no mundo do web design. As bene2:cios concretos do uso de 199
incluem:
controle do laIout de vDrios documentos a partir de uma simples 6olha de
estilosJ
maior precis.o no controle do laIoutJ
aplica/.o de di6erentes laIouts para servir di6erentes mKdias &tela3 impressora3
etc.'J
emprego de variadas3 so6isticadas e avan/adas t4cnicas de desenvolvimento.
Na pr*xima lio veremos com maiores detal&es como 2unciona 199 e como comear
seu estudo.
Como 4un"iona C))#
Nesta lio voc" aprender a desenvolver sua primeira 2ol&a de estilos. ,oc" ver o
bsico sobre o modelo 199 e que c*digo necessrio para usar 199 em um documento
/345.
4uitas das propriedades usadas em 1ascading 9t8le 9&eets (199) so semel&antes
Cquelas do /345. $ssim# se voc" est acostumado a usar /345 para la8out ir
recon&ecer muitos dos c*digos que usaremos. ,amos dar uma ol&ada em um exemplo
concreto.
( sintaxe b-sica das CFF
9upon&a que dese%amos uma cor de 2undo vermel&a para a pgina web:
sando HTML podemos 2a!er assim:
<body bg!olor125LL77772>
1om CFF o mesmo resultado ser obtido assim:
(ody "(ac)'round-color: ABB0000;$
1omo voc" pode notar os c*digos /345 e 199 so mais ou menos parecidos. A
exemplo acima serve tambm para demonstrar o 2undamento do modelo 199:
4as# onde colocar o c*digo 199> D isto que veremos a seguir.
(plicando CFF a um documento HTML
,oc" pode aplicar 199 a um documento de tr"s maneiras distintas. As tr"s mtodos de
aplicao esto exempli2icados a seguir. Necomendamos que voc" 2oque no terceiro
mtodo# ou se%a o mtodo externo.
M3to,o 1: &n5line (o atributo st'le*
ma maneira de aplicar 199 pelo uso do atributo style do /345. 3omando como
base o exemplo mostrado anteriormente a cor vermel&a para o 2undo da pgina pode ser
aplicada con2orme mostrado a seguir:
<html>
<head>
<title>E#emplo</title>
</head>
<(ody style="(ac)'round-color: ABB0000;">
<p>Esta uma pgina !om 6undo (ermelho</p>
</body>
</html>
M3to,o 2: &nterno (a tag st'le*
ma outra maneira de aplicar 199 e pelo uso da tag <style> do /345. 1omo
mostrado a seguir:
<html>
<head>
<title>E#emplo</title>
<style type="text/css">
(ody "(ac)'round-color: ABB0000;$
</style>
</head>
<body>
<p>Esta uma pgina !om 6undo (ermelho</p>
</body>
</html>
M3to,o 3: Externo (link para uma 4ola ,e estilos*
A mtodo recomendado o de lincar para uma 2ol&a de estilos externa. saremos este
mtodo nos exemplos deste tutorial.
ma 2ol&a de estilos externa um simples arquivo de texto com a extenso css. 3al
como com qualquer outro tipo de arquivo voc" pode colocar uma 2ol&a de estilos tanto
no servidor como no disco r:gido.
,amos supor# por exemplo# que sua 2ol&a de estilos ten&a sido nomeada de st.lecss e
est locali!ada no diret*rio st.le. 3al situao est mostrada a seguir:
A .truque. criar um linK no documento /345 (de2ault.&tm) para a 2ol&a de estilos
(st8le.css). A linK criado em uma simples lin&a de c*digo /345 como mostrado a
seguir:
<lin. rel12stylesheet2 type12te#t/!ss2 ref="style/style,css" />
Notar que o camin&o para a 2ol&a de estilos indicado no atributo hre6.
0sta lin&a de c*digo deve ser inserida na seo &eader do documento /345# isto #
entre as tags <head> e </head>. 1on2orme mostrado abaixo:
<html>
<head>
<title>Meu do!umento</title>
<lin) rel="styleseet" type="text/css" ref="style/style,css" />
</head>
<body>
...
0ste linK in2orma ao navegador para usar o arquivo 199 na renderi!ao e apresentao
do la8out do documento /345.
$ coisa realmente inteligente disto que vrios documentos /345 podem lincar para
uma mesma 2ol&a de estilos. 0m outras palavras isto signi2ica que um simples arquivo
ser capa! de controlar a apresentao de muitos documentos /345.
0sta tcnica pode economi!ar uma grande quantidade de trabal&o. 9e por exemplo# voc"
quiser trocar a cor do 2undo de um site com 1FF pginas# a 2ol&a de estilos evita que
voc" edite manualmente uma a uma as pginas para 2a!er a mudana nos 1FF
documentos /345. sando 199 a mudana se 2ar em uns poucos segundos trocando;
se a cor em uma 2ol&a de estilos central.
,amos praticar o que aprendemos.
Aa$a voc mesmo
$bra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos
[ um arquivo /345 e um arquivo 199 [ com os seguintes conte6dos:
,e4ault6tm
<html>
<head>
<title>Meu do!umento</title>
<lin. rel12stylesheet2 type12te#t/!ss2 hre612style.!ss2 />
</head>
<body>
<h1>Minha primeira 6olha de estilos</h1>
</body>
</html>
st'le6"ss
body M
ba!.ground3!olor4 5LL77778
N
9alve os dois arquivos no mesmo diret*rio. 5embre;se de salvar os arquivos com a
extenso apropriada (..css. e ..&tm.)
$bra default#tm no seu navegador e ve%a uma pgina com o 2undo vermel&o.
)arabns+ ,oc" construiu sua primeira 2ol&a de estilos+
)rossiga para a pr*xima lio onde abordaremos algumas propriedades 199.
Cores e 4un,os
Nesta lio voc" aprender como aplicar cores de primeiro plano e cores de 2undo no
seu website. $bordaremos ainda os mtodos avanados de controle e posicionamento de
imagens de 2undo. 9ero explicadas as seguintes propriedades 199:
color
+ackground7color
+ackground7image
+ackground7repeat
+ackground7attachment
+ackground7position
+ackground
Cor do primeiro plano1 a propriedade QcolorQ
$ propriedade !olor de2ine a cor do primeiro plano de um elemento.
1onsidere# por exemplo# que dese%amos que todos os cabeal&os de primeiro n:vel no
documento se%am na cor vermel&a. A elemento /345 que marca tais cabeal&os o
elemento <h1>. A c*digo a seguir de2ine todos os <h1> na cor vermel&a.
h1 M
color: Aff0000;
N
Ber exemplo
$s cores podem ser de2inidas pelo seu valor &exadecimal como no exemplo acima
(E22FFFF)# com uso do nome da cor (.red.) ou ainda pelo seu valor rgb (rgb(HQQ#F#F)).
( propriedade Qbac>groundGcolorQ
$ propriedade ba!.ground3!olor de2ine a cor do 2undo de um elemento.
A elemento <body> contm todo o conte6do de um documento /345. $ssim# para
mudar a cor de 2undo da pgina# devemos aplicar a propriedade ba!.ground3!olor ao
elemento <body>.
,oc" pode aplicar cores de 2undo para outros elementos# inclusive para cabeal&os e
textos. No exemplo abaixo 2oram aplicadas di2erentes cores de 2undo para os elementos
<body> e <h1>.
body M
(ac)'round-color: ABBCCCC;
N
h1 M
!olor4 5GG77778
(ac)'round-color: ABC@&0D;
N
Ber exemplo
Notar que 2oram aplicadas duas propriedades ao elemento <h1> separadas por um ponto
e v:rgula.
;mages de fundo Rbac>groundGimageS
$ propriedade 199 ba!.ground3image usada para de2inir uma imagem de 2undo.
saremos a imagem de uma borboleta para exempli2icar a aplicao de imagens de
2undo. ,oc" pode 2a!er o download da imagem mostrada abaixo e us;la nos seus
experimentos (clique com o boto direito do mouse sobre a imagem e escol&a .salvar
imagem como.) ou voc" poder usar uma outra imagem qualquer ao seu gosto.
)ara inserir uma imagem de 2undo na pgina basta aplicar a propriedade ba!.ground3
image ao elemento <body> e especi2icar o camin&o para onde est gravada a imagem.
body M
ba!.ground3!olor4 5LL::DD8
(ac)'round-ima'e: url*"(utterfly,'if"-;
N
h1 M
!olor4 5GG77778
ba!.ground3!olor4 5L:GF7A8
N
Ber exemplo
N?: Notar como 2oi especi2icado o camin&o para a imagem usando
url&Dbutterfl.gifD'. 'sto signi2ica que a imagem est locali!ada no mesmo diret*rio da
2ol&a de estilos. )ode ser escol&ido um outro diret*rio para gravar as imagens e o
camin&o seria url&DOimagesObutterfl.gifD' ou at mesmo &osped;la na 'nternet:
url&D#ttp1OO***#tmlnetObutterfl.gifD'.
;magem de fundo repetida Rbac>groundGrepeatS
No exemplo anterior voc" observou que a imagem da borboleta repetiu tanto na vertical
como na &ori!ontal cobrindo toda a tela> $ propriedade ba!.ground3repeat controla o
comportamento de repetio da imagem de 2undo.
$ tabela a seguir mostra os quatro di2erentes valores para ba!.ground3repeat.
Value Description Example
@a!.ground3repeat4
repeat3#
A imagem se repete na hori8ontal
Ber
exemplo
ba!.ground3repeat4
repeat3y
A imagem se repete na vertical
Ber
exemplo
ba!.ground3repeat4
repeat
A imagem se repete na tanto na hori8ontal
como na vertical
Ber
exemplo
ba!.ground3repeat4 no3
repeat
A imagem n.o se repete
Ber
exemplo
)or exemplo# o c*digo mostrado a seguir para que a imagem no se repita na tela:
body M
ba!.ground3!olor4 5LL::DD8
ba!.ground3image4 url<2butter6ly.gi62=8
(ac)'round-repeat: no-repeat;
N
h1 M
!olor4 5GG77778
ba!.ground3!olor4 5L:GF7A8
N
Ber exemplo
;mage de fundo fixa Rbac>groundGattac#mentS
$ propriedade ba!.ground3atta!hment de2ine se a imagem ser 2ixa ou se ir rolar
%untamente com o elemento que a contm.
ma imagem de 2undo 2ixa permanece no mesmo lugar e no rola com a tela ao
contrrio da imagem que no 2ixa e rola acompan&ando o conte6do da tela.
$ tabela a seguir mostra os quatro di2erentes valores para ba!.ground3atta!hment.
,e%a os exemplos para constatar a di2erena entre imagem 2ixa e imegem que rola.
Value Description Example
@a!.ground3atta!hment4 s!roll
A imagem rola com a
pDgina
Ber
exemplo
@a!.ground3atta!hment4 6i#ed
A imagem 4 6ixa
Ber
exemplo
)or exemplo# o c*digo abaixo 2ixa a imagem na tela.
body M
ba!.ground3!olor4 5LL::DD8
ba!.ground3image4 url<2butter6ly.gi62=8
ba!.ground3repeat4 no3repeat8
(ac)'round-attacment: fixed;
N
h1 M
!olor4 5GG77778
ba!.ground3!olor4 5L:GF7A8
N
Ber exemplo
3osi$%o da imagem de fundo Rbac>groundGpositionS
)or padro uma imagem de 2undo posicionada no canto superior esquerdo da tela. $
propriedade ba!.ground3position permite alterar este posicionamento padro e
colocar a imagem em qualquer lugar na tela.
0xistem vrias maneiras de de2inir o posicionamento da imagem na tela de2inindo
valores para ba!.ground3position. 3odas elas se utili!am de um sistema de
coordenadas. )or exemplo# os valores Z1FFpx HFFpxZ posiciona a imagem a 1FFpx do
topo e a HFFpx do lado esquerdo da %anela do navegador.
$s coordenadas podem ser expressas em percentagem da largura da %ane%a# em unidades
2ixas (pixels# cent:metros# etc.) ou pode;se usar as palavras top# bottom# center# le2t e
rig&t. $ 2igura a seguir ilustra o modelo de coordenadas:
Na tabela a seguir so mostrados alguns exemplos .
Value Description Example
ba!.ground3position4
%!m %!m
A imagem 4 posicionada a 2 cm da esquerda e
2 cm para +aixo na pDgina
Ber
exemplo
ba!.ground3position4
C7H %CH
A imagem 4 centrada na hori8ontal e a um
quarto &29L' para +aixo na pDgina
Ber
exemplo
ba!.ground3position4
top right
A imagem 4 posicionada no canto superior
direito da pDgina
Ber
exemplo
No exemplo de c*digo a seguir a imagem posicionada no canto in2erior direito da
pgina:
body M
ba!.ground3!olor4 5LL::DD8
ba!.ground3image4 url<2butter6ly.gi62=8
ba!.ground3repeat4 no3repeat8
ba!.ground3atta!hment4 6i#ed8
(ac)'round-position: ri't (ottom;
N
h1 M
!olor4 5GG77778
ba!.ground3!olor4 5L:GF7A8
N
Ber exemplo
Compilando Rbac>groundS
$ propriedade ba!.ground uma abreviao para todas as propriedades listadas
anteriormente.
1om ba!.ground voc" declara vrias propriedades de modo abreviado# economi!ando
digitao e alguns bites# alm de tornar a 2ol&a de estilo mais 2cil de se ler e entender.
)or exemplo# observe as cinco lin&as a seguir:
ba!.ground3!olor4 5LL::DD8
ba!.ground3image4 url<2butter6ly.gi62=8
ba!.ground3repeat4 no3repeat8
ba!.ground3atta!hment4 6i#ed8
ba!.ground3position4 right bottom8
sando ba!.ground voc" consegue o mesmo resultado# abreviando como mostrado
abaixo:
ba!.ground4 5LL::DD url<2butter6ly.gi62= no3repeat 6i#ed right bottom8
$ declarao abreviada deve seguir a seguinte ordem:
Oba!.ground3!olorP _ Oba!.ground3imageP _ Oba!.ground3repeatP _
Oba!.ground3atta!hmentP _ Oba!.ground3positionP
9e uma das propriedades no 2or declarada ela assume automaticamente o seu valor
de2ault. )or exemplo# a propriedade ba!.ground3atta!hment e ba!.ground3
position no 2oram declaradas no c*digo mostrado a seguir:
ba!.ground4 5LL::DD url<2butter6ly.gi62= no3repeat8
$s duas propriedades no declaradas assumiro o valor de2ault que como voc" % sabe
so: a imagem rola na tela e ser posicionada no canto superior esquerdo (que so os
valores de2ault para as propriedades no declaradas).
Fum-rio
Nesta lio voc" aprendeu tcnicas que no so poss:veis com uso de /345. $
brincadeira continua na pr*xima lio onde examinaremos as possibilidades de
estili!ao das 2ontes.
7ontes
Nesta lio estudaremos as 2ontes e como aplic;las usando 199. ,eremos como criar
situa7es para que determinada 2onte se%a visuali!ada pelo usurio mesmo no estando
instalada em seu sistema operacional. <escreveremos as seguintes propriedades 199:
6ont76amilI
6ont7stIle
6ont7variant
6ont7,eight
6ont7si8e
6ont
Aam"lia de fontes RfontGfamil.S
$ propriedade 6ont36amily usada para de2inir uma lista de 2ontes e sua prioridade
para apresentao de um elemento em uma pgina. 9e a primeira 2onte da lista no
estiver instalada na mquina do usurio# dever ser usada a segunda e assim por diante
at ser encontrada uma 2onte instalada.
0xistem dois tipos de nomes para de2inir 2ontes: nomes para 2am:lias de 2ontes e nomes
para 2am:lias genricas. As dois so explicados a seguir:
nome para 6amKlias de 6ontes
Exemplos para este tipo &normalmente conhecidas como 06ont0' s.o 0Arial03
0imes *e, Eoman0 ou 0ahoma0.
nome para 6amKlias gen4ricas
%amKlias gen4ricas s.o 6ontes que pertencem a um grupo com aparMncia
uni6orme. Um exemplo s.o as 6ontes sans7seri6 que englo+am a cole/.o de
6ontes que 0n.o tMm p40.
$ di2erena est mostrada na 2igura a seguir:
$o listar 2ontes para seu website# comece com aquela pre2erida# seguindo;se algumas
alternativas para ela. D recomendvel encerrar a listagem das 2ontes com uma 2onte
genrica. $ssim 2a!endo# em 6ltimo caso a pgina ser renderi!ada com 2onte da mesma
2am:lia das que 2oram especi2icadas quando todas as demais estiverem indispon:veis na
mquina do usurio.
$ seguir mostramos um exemplo de listagem de 2ontes:
h1 M6ont36amily4 arial$ (erdana$ sans3seri68N
h% M6ont36amily4 2Times Qew Roman2$ seri68N
Ber exemplo
1abeal&os <h1> sero renderi!ados com 2onte .$rial.. 9e o usurio no tiver a 2ont
$rial instalada# ser usada a 2onte .,erdana.. 9e ambas estiverem indispon:veis na
mquina do usurio ser usada uma 2onte da 2am:lia sansGserif.
Notar que para especi2icar a 2onte .3imes New Noman. 2oram usadas aspas. 'sto
necessrio para 2ontes com nomes compostos e que conten&am espaos entre os nomes.
/stilo da fonte RfontGst.leS
$ propriedade 6ont3style de2ine a escol&a da 2onte em normal# italic ou oblique. No
exemplo a seguir todos as cabeal&os <h%> sero em itlico.
h1 M6ont36amily4 arial$ (erdana$ sans3seri68N
h% M6ont36amily4 2Times Qew Roman2$ seri68 font-style: italic;N
Ber exemplo
Aonte variante RfontGvariantS
$ propriedade 6ont3(ariant usada para escol&er as variantes normal ou smallGcaps.
ma 2onte smallGcaps aquela que usa letras mai6sculas de taman&os redu!idos.
1on2undiu> <" uma ol&ada nos exemplos a seguir:
9e a propriedade 6ont3(ariant 2or de2inida para smallGcaps e no estiver dispon:vel
na mquina do usurio# ser usada 2onte em mai6scula.
h1 M6ont3(ariant4 small3!aps8N
h% M6ont3(ariant4 normal8N
Ber exemplo
3eso da fonte RfontG*eig#tS
$ propriedade 6ont3weight de2ine quo negrito ou .pesada. deve ser renderi!ada a
2onte. ma 2onte pode ser normal ou bold. $lguns navegadores suportam n6meros de
1FF;UFF (em intervalos de 1FF em 1FF) para de2inir o peso da 2onte.
p M6ont36amily4 arial$ (erdana$ sans3seri68N
td M6ont36amily4 arial$ (erdana$ sans3seri68 font-wei't: (old;N
Ber exemplo
Taman#o da fonte RfontGsizeS
An taman&o da 2onte de2inido pela propriedade 6ont3si-e.
0xistem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para
de2inir o taman&o da 2onte. Neste tutorial n*s usaremos as unidades mais comuns e
apropriadas. ,er exemplos a seguir:
h1 M6ont3si-e4 #0px8N
h% M6ont3si-e4 !2pt8N
hB M6ont3si-e4 !20E8N
p M6ont3si-e4 !em;N
Ber exemplo
0xiste uma di2erena 2undamental entre as quatro unidades adotadas no exemplo acima.
$s unidades ZpxZ e ZptZ so absolutas# enquanto ZTZ e ZemZ permitem ao usurio a%ustar o
taman&o das 2ontes ao seu gosto e necessidade. 4uitos usurios t"m restri7es# como
por exemplo# pessoas idosas# pessoas com viso limitada ou as que usam um monitor de
baixa qualidade. 3ara fazer seu site acess"vel a todos# voc" dever usar unidades como
ZTZ ou ZemZ.
$baixo uma 2igura mostrando como a%ustar o taman&o das 2ontes nos navegadores
4o!illa Oire2ox e 'nternet 0xplorer. 3ente voc" mesmo este a%uste [ uma excelente
2uncionalidade do navegador# no mesmo>
Compilando RfontS
sar 6ont uma abreviao que permite de2inir vrias propriedades em uma s*.
,e%a a seguir quatro lin&as de c*digo usadas para de2inir propriedades de 2onte para um
pargra2o <p>:
p M
font-style: italic;
font-wei't: (old;
font-size: #0px;
font-family: arialF sans-serif;
N
sar a abreviao simpli2ica o c*digo como mostrado abaixo:
p M
font: italic (old #0px arialF sans-serif;
N
$ ordem dos valores para 6ont a mostrada a seguir :
6ont3style _ 6ont3(ariant _ 6ont3weight _ 6ont3si-e _ 6ont36amily
Textos
Oormatar e estili!ar textos um item c&ave para qualquer web designer. Nesta lio
voc" ser apresentado Cs interessantes oportunidades que as 199 proporcionam para
adicionar la8out aos textos. 9ero discutidadas as propriedades listadas abaixo:
text7indent
text7align
text7decoration
letter7spacing
text7trans6orm
;ndenta$%o de texto RtextGindentS
$ propriedade te#t3indent permite que voc" aplique um recuo C primeira lin&a de um
pargra2o. No exemplo a seguir um recuo de 4Jpx aplicado C todos os textos marcados
com <p>:
p M
te#t3indent4 B7p#8
N
Ber exemplo
(lin#amento de textos RtextGalignS
$ propriedade te#t3align corresponde ao atributo align das antigas vers7es do
/345. 3extos podem ser alin&ados C esquerda (left)# C direita (rig#t) ou centrados
(centred). 0 temos ainda o valor Uustif. que 2a! com o texto contido em uma lin&a se
estenda tocando as margens esquerda e direita. 0ste tipo de alin&amento usado em
%ornais e revistas.
No exemplo a seguir o texto contido na clula de cabeal&o <th> alin&ado C direita e
os contidos nas clulas de dados <td> so centrados. 0# os textos normais em pargra2os
so %usti2icados:
th M
te#t3align4 ri't;
N
td M
te#t3align4 center;
N
p M
te#t3align4 Gustify;
N
Ber exemplo
Lecora$%o de textos RtextGdecorationS
$ propriedade te#t3de!oration possibilita adicionar .e2eitos. ou .decorao. em
textos. ,oc" pode por rexemplo# sublin&ar textos# cortar o texto com uma lin&a# colocar
uma lin&a sobre o texto# etc. No exemplo a seguir os cabeal&os <h1> so sublin&ados#
os cabeal&os <h%> levam um lin&a em cima e os cabeal&os <hB> so cortados por uma
lin&a.
h1 M
te#t3de!oration4 underline8
N
h% M
te#t3de!oration4 oHerline8
N
hB M
te#t3de!oration4 line-trou'8
N
Ber exemplo
/spa$o entre letras RletterGspacingS
A espaamento entre os caracteres de um texto controlado pela propriedade letter3
spa!ing. A valor desta propriedade de2ine o espao entre os caracteres. )or exemplo# se
voc" dese%a um espao de 4px entre as letras do texto de um pargra2o <p> e de 8px
entre as letras do texto de um cabeal&o <h1> o c*digo a seguir dever ser usado.
h1 M
letter3spa!ing4 Cpx;
N
p M
letter3spa!ing4 #px;
N
Ber exemplo
Transforma$%o de textos RtextGtransformS
$ propriedade te#t3trans6orm controla a capitali!ao (tornar mai6scula) do texto.
,oc" pode escol&er capitalize# uppercase ou lo*ercase independentemente de como o
texto 2oi escrito no c*digo /345.
1omo exemplo tomamos a palavra .cabeal&o. que pode ser apresentada ao usurio
como .1$?0`$5/A. ou .1abeal&o.. 9o quatro os valores poss:veis para te#t3
trans6orm:
capitali8e
-apitali8a a primeira letra de cada palavra. Por exemplo? 02ohn doe0
trans6orma7se para 0(ohn Foe0.
uppercase
-onverte todas as letras para mai@scula. Por exemplo? 02ohn doe0 trans6orma7
se para0(OH* FOE0.
lo,ercase
-onverte todas as letras para min@scula. Por exemplo? 0(OH* FOE0
trans6orma7se para02ohn doe0.
none
Sem tras6orma/Nes 7 o texto 4 apresentado como 6oi escrito no cCdigo H!".
)ara exempli2icar vamos usar uma lista de nomes. As nomes esto marcados com o
elemento <li> (item de lista). ,amos supor que dese%amos os nomes capitali!ados e os
cabeal&os em letras mai6sculas.
$o consultar o exemplo sugerido para este c*digo d" uma ol&ada no /345 da pgina e
observe que os textos no c*digo 2oram escritos com todas as letras em min6sculas.
h1 M
te#t3trans6orm4 uppercase;
N
li M
te#t3trans6orm4 capitalize;
N
Links
,oc" pode aplicar aos linKs tudo que aprendeu nas li7es anteriores (i.e. mudar cores#
2ontes# sublin&ados# etc). $ novidade aqui que voc" pode de2inir as propriedades de
maneira di2erenciada de acordo com o estado do linK ou se%a visitado# no visitado#
ativo ou com o ponteiro do mouse sobre o linK. 'sto possibilita adicionar interessantes
e2eitos ao seu website. )ara estili!ar estes e2eitos voc" usar as c&amadas pseudo;
classes.
O que ! pseudoGclasse?
ma pseudo;classe permite estili!ar levando em conta condi7es di2erentes ou eventos
ao de2inir uma propriedade de estilo para uma tag /345.
,amos ver um exemplo. 1omo voc" % sabe# linKs so marcados no /345 com tags
<a>. )odemos ento usar a como um seletor 199:
a M
!olor4 blue8
N
Um link pode ter di6erentes estados. Por exemplo3 pode ter sido visitado ou n.o
visitado. BocM usarD pseudo7classes para estili8ar links visitados e n.o visitados.
a:lin) M
!olor4 blue8
N
a:Hisited M
!olor4 red8
N
se as pseudo;classes a4lin. e a4(isited para estili!ar linKs no visitados e visitados
respectivamente. 5inKs ativos so estili!ados com a pseudo;classe a4a!ti(e e a4ho(er#
esta 6ltima a pseudo;classe para linKs com o ponteiro do mouse sobre ele.
$ seguir explicaremos com mais detal&es e exempli2icao# as quatro pseudo;classes.
!seu,o5"lasse: link
$ pseudo;classe 4lin. usada para linKs no visitados.
No exemplo a seguir linKs no vistados sero na cor verde.
a:lin) M
!olor4 green8
N
Ber exemplo
!seu,o5"lasse: /isite,
$ pseudo;clases 4(isited usada para linKs visitados. No exemplo a seguir linKs
visitados sero na cor amarela:
a:Hisited M
!olor4 yellow8
N
Ber exemplo
!seu,o5"lasse: a"ti/e
$ pseudo;classe 4a!ti(e usada para linKs ativos.
No exemplo a seguir linKs ativos tero seu 2undo na cor vermel&a:
a:actiHe M
ba!.ground3!olor4 red8
N
Ber exemplo
!seu,o5"lasse: o/er
$ pseudo;classe 4ho(er usada para quando o ponteiro do mouse est sobre o linK.
'sto pode ser usado para conseguir e2eitos bem interessantes. )or exemplo# podemos
mudar a cor do linK para laran%a e o texto para itlico quando o ponteiro do mouse passa
sobre ele# o c*digo 199 para estes e2eitos o mostrado a seguir:
a:oHer M
!olor4 orange8
6ont3style4 itali!8
N
Ber exemplo
/xemplo 01 /feito quando o ponteiro est- sobre o lin>
D comum a criao de e2eitos di2erentes quando o ponteiro est sobre o linK. ,eremos a
seguir alguns exemplos extras de estili!ao da pseudo;classe 4ho(er.
Exemplo 1a: Espaamento entre as letras
1omo voc" deve estar lembrado da lio Q# o espaamento entre as letras de um texto
pode ser controlado pela propriedade letter3spa!ing. 'sto pode ser aplicado aos linKs
para obter um e2eito interessante:
a:oHer M
letter3spa!ing4 17p#8
6ont3weight4bold8
!olor4red8
N
Ber exemplo
Exemplo 1b: +!!E8CA)E e lo9er"ase
Na lio Q vimos a propriedade te#t3trans6orm# para estili!ar com letras mai6sculas e
min6sculas. 'sto pode ser usado para estili!ar linKs:
a:oHer M
te#t3trans6orm4 upper!ase8
6ont3weight4bold8
!olor4blue8
ba!.ground3!olor4yellow8
N
Ber exemplo
As exemplos mostrados do uma idia das in6meras possibilidades de combinao de
di2erentes propriedades. ,oc" pode criar seus pr*prios e2eitos [ 2aa uma tentativa+
/xemplo 21 Vemovendo sublin#ado dos lin>s
ma pergunta comum: 1omo remover o sublin&ado dos linKs>
Ioc deve estudar com muito cuidado a necessidade de retirar o sublin#ado dos
lin>s, pois isto poder- reduzir signifcativamente a usabilidade do *ebsite $s
pessoas esto acostumadas com linKs na cor a!ul e sublin&ados e sabem que ali & um
texto a ser clicado. $t min&a me sabe disto+ 9e voc" muda a cor e retira o sublin&ado
dos linKs# poder con2undir seus visitantes e em conseqL"ncia no retirar o mximo dos
conte6dos do seu website.
Oeita esta ressalva# muito 2cil retirar o sublin&ado dos linKs. 1on2orme explicado na
lio Q# a propriedade te#t3de!oration pode ser usada para de2inir se o texto ou no
sublin&ado. )ara remover o sublin&ado# basta de2inir o valor none para a propriedade
te#t3de!oration.
a M
text-decoration:none;
N
$lternativamante# voc" pode de2inir te#t3de!oration %untamente com outras
propriedades para as quatro pseudo;classes.
a4lin. M
!olor4 blue8
text-decoration:none;
N
a4(isited M
!olor4 purple8
text-decoration:none;
N
a4a!ti(e M
ba!.ground3!olor4 yellow8
text-decoration:none;
N
a4ho(er M
!olor4red8
text-decoration:none;
N
&,enti4i"an,o e agrupan,o elementos ("lasses e i,*
0m alguns casos voc" dese%a aplicar estilos a um elemento ou grupo de elementos em
particular. Nesta lio veremos como usar !lass e id para estili!ar elementos.
1omo de2inir uma cor para um determinado cabeal&o# di2erente da cor usada para os
demais cabeal&os do website> 1omo agrupar linKs em di2erentes categorias e estili!ar
cada categoria di2erentemente> 0stas so algumas das quest7es que iremos responder
nesta lio.
(grupando elementos com uso de classe
,amos supor que temos duas listas de linKs para di2erentes tipos de uvas usadas na
produo de vin&o branco e de vin&o tinto. A c*digo /345 con2orme mostrado
abaixo:
<p>(as para (inho bran!o4</p>
<ul>
<li><a hre612ri.htm2>Riesling</a></li>
<li><a hre612!h.htm2>:hardonnay</a></li>
<li><a hre612pb.htm2>*inot @lan!</a></li>
</ul>
<p>(as para (inho tinto4</p>
<ul>
<li><a hre612!s.htm2>:abernet &au(ignon</a></li>
<li><a hre612me.htm2>Merlot</a></li>
<li><a hre612pn.htm2>*inot Qoir</a></li>
</ul>
Ber exemplo
-ueremos que os linKs para vin&o branco se%am na cor amarela# para vin&o tinto na cor
vermel&a e os demais linKs na pgina permaneam na cor a!ul.
)ara conseguir isto# dividimos os linKs em duas categorias. 'sto 2eito atribuindo uma
classe para cada linK# usando o atributo !lass.
,amos especi2icar esta classe no exemplo a seguir:
<p>(as para (inho bran!o4</p>
<ul>
<li><a hre612ri.htm2 class="witewine">Riesling</a></li>
<li><a hre612!h.htm2 class="witewine">:hardonnay</a></li>
<li><a hre612pb.htm2 class="witewine">*inot @lan!</a></li>
</ul>
<p>(as para (inho tinto4</p>
<ul>
<li><a hre612!s.htm2 class="redwine">:abernet &au(ignon</a></li>
<li><a hre612me.htm2 class="redwine">Merlot</a></li>
<li><a hre612pn.htm2 class="redwine">*inot Qoir</a></li>
</ul>
$gora podemos de2inir propriedades espec:2icas para linKs pertencentes as classes
w&itewine e redwine# respectivamente.
a M
!olor4 blue8
N
a.witewine M
!olor4 5LL@@778
N
a.redwine M
!olor4 5F777778
N
Ber exemplo
1omo mostrado no exemplo acima# pode;se de2inir propriedades para estili!ao dos
elementos pertencentes a uma determinada classe usando um nomedaclasse na 2ol&a de
estilos do documento.
;dentificando um elemento com uso de id
$lm de agrupar elementos podemos querer atribuir identi2icao a um 6nico elemento.
'sto 2eito usando o atributo id.
A que & de especial no atributo id que no poder existir dois ou mais elementos
com a mesma id# ou se%a em um documento apenas um e somente um elemento poder
ter uma determinada id. 1ada id 6nica. )ara casos em que &a%a necessidade de mais
de um elemento com a mesma identi2icao usamos o atributo !lass. $ seguir um
exemplo de poss:vel uso de id:
<h1>:ap'tulo 1</h1>
...
<h%>:ap'tulo 1.1</h%>
...
<h%>:ap'tulo 1.%</h%>
...
<h1>:ap'tulo %</h1>
...
<h%>:ap'tulo %.1</h%>
...
<hB>:ap'tulo %.1.%</hB>
...
A exemplo acima simula os cabeal&os de um documento estruturado em cap:tulos e
pargra2os. D comum atribuir uma id para cada cap:tulo como mostrado a seguir:
<h1 id="c!">:ap'tulo 1</h1>
...
<h% id="c!-!">:ap'tulo 1.1</h%>
...
<h% id="c!-2">:ap'tulo 1.%</h%>
...
<h1 id="c2">:ap'tulo %</h1>
...
<h% id="c2-!">::ap'tulo %.1</h%>
...
<hB id="c2-!-2">:ap'tulo %.1.%</hB>
...
,amos supor que o cabeal&o do cap:tulo 1.H deva ser na cor vermel&a. 'sto pode ser
2eito con2orme mostrado na 2ol&a de estilo a seguir:
Ac!-2 M
!olor4 red8
N
Agrupan,o elementos (span e ,i/*
As elementos ]span^ e ]div^ so usados para agrupar e estruturar um documento e so
2reqLentemente usados em con%unto com os atributos class e id.
Nesta lio veremos com detal&es o uso dos elementos /345 ]span^ e ]div^ no que
se re2ere a sua vital importMncia para as 199.
Agrupando com <span>
Agrupando com<di(>
(grupando com WspanX
A elemento <span> um elemento neutro e que no adiciona qualquer tipo de
semMntica ao documento. 1ontudo# <span> pode ser usado pelas 199 para adicionar
e2eitos visuais a partes espec:2icas do texto no seu documento.
m exemplo deste uso mostrado na citao abaixo de autoria de ?en%amin OranKlin:
<p>Sormir !edo e a!ordar !edo 6a- o homem
saud(el$ ri!o e sbio.</p>
,amos supor que queremos en2ati!ar na cor vermel&a os bene2:cios apontados por 4r.
OranKlin pelo 2ato de no se passar o dia dormindo. )ara isto marcamos os bene2:cios
com <span>. $ cada span atribu:mos uma !lass# e estili!amos na 2ol&a de estilos:
<p>Sormir !edo e a!ordar !edo 6a- o homem
<span class="(enefit">saudIHel</span>$
<span class="(enefit">rico</span>
e <span class="(enefit">sI(io</span>.</p>
$ 2ol&a de estilos:
span,(enefit M
!olor4red8
N
Ber exemplo
D claro que voc" pode usar id para estili!ar o elemento <span>. 4as# como voc" deve
estar lembrado# dever usar uma 6nica id para cada um os tr"s elementos <span>$
con2orme 2oi explicado na lio anterior.
(grupando com WdivX
0nquanto <span> usado dentro de um elemento n:vel de bloco como vimos no
exemplo anterior# <di(> usado para agrupar um ou mais elementos n:vel de bloco.
<i2erenas C parte# o agrupamento com <di(> 2unciona mais ou menos da mesma
maneira. ,amos ver um exemplo tomando duas listas de presidentes dos 0stados
nidos agrupados segundo suas 2ilia7es pol:ticas:
<diH id="democrats">
<ul>
<li>Lran.lin S. Roose(elt</li>
<li>Harry &. Truman</li>
<li>Tohn L. Uennedy</li>
<li>,yndon @. Tohnson</li>
<li>Timmy :arter</li>
<li>@ill :linton</li>
</ul>
</di(>
<diH id="repu(licans">
<ul>
<li>Swight S. Eisenhower</li>
<li>Ri!hard Qi#on</li>
<li>Kerald Lord</li>
<li>Ronald Reagan</li>
<li>Keorge @ush</li>
<li>Keorge V. @ush</li>
</ul>
</di(>
0 na 2ol&a de estilos# podemos agrupar a estili!ao da mesma maneira como 2i!emos
no exemplo acima:
Ademocrats M
ba!.ground4blue8
N
Arepu(licans M
ba!.ground4red8
N
1 box mo,el
A box model (modelo das caixas) em 199# descreve os boxes (as caixas) geradas pelos
elementos /345. A box model# detal&a ainda# as op7es de a%uste de margens# bordas#
padding e conte6do para cada elemento. $baixo apresentamos um diagrama
representando a estrutura de construo do box model:
O box model em CFF
$ ilustrao acima te*rica. ,amos explic;la na prtica tomando como base um
cabeal&o e um texto. A /345 para nosso exemplo (o texto 2oi retirado da <eclarao
niversal dos <ireitos /umanos e est no original em ingl"s) o mostrado abaixo:
<h1>9rti!le 14</h1>
<p>9ll human beings are born 6ree
and e/ual in dignity and rights.
They are endowed with reason and !ons!ien!e
and should a!t towards one another in a
spirit o6 brotherhood</p>
<e2inindo estilos para cores e 2ontes o exemplo pode ser apresentado como a seguir:
A exemplo contm dois elementos: <h1> e <p>. A box model para os dois elementos
mostrado a seguir:
Margin e pa,,ing
Na lio anterior vimos o box model. Nesta lio veremos como controlar a
apresentao de um elemento de2inindo as propriedades margin e padding.
Fe6inindo margin de um elemento
Fe6inindo padding de um elemento
Lefinindo margin de um elemento
m elemento tem quatro lados: rig&t# le2t# top e bottom (direito# esquerdo# superior e
in2erior). $ margin a distMncia entre os lados de elementos vi!in&os (ou Cs bordas do
documento). ,er o diagrama mostrado na lio U.
,amos comear com um exemplo mostrando como de2inir margins para o documento#
ou se%a# para o elemento <body>. $ ilustrao a seguir mostra como sero as margens da
pgina.
$s 199 so mostradas abaixo:
body M
margin3top4 177p#8
margin3right4 A7p#8
margin3bottom4 17p#8
margin3le6t4 E7p#8
N
Au# adotando uma sintaxe mais elegante:
body M
margin4 177p# A7p# 17p# E7p#8
N
Ber exemplo
$s margens para a maioria dos elementos pode ser de2inida con2orme o exemplo acima.
)odemos ento# por exemplo# de2inir margens para todos os pargra2os <p>:
body M
margin4 177p# A7p# 17p# E7p#8
N
p "
mar'in: %px %0px %px %0px;
$
Ber exemplo
Lefinindo padding de um elemento
)adding pode tambm ser entendido como .enc&imento.. 'sto 2a! sentido# porque
padding no computado na distMncia entre elementos# padding de2ine simplesmente a
distMncia entre a borda e o conte6do do elemento.
'lustramos o uso de padding atravs de um exemplo onde todos os cabeal&os t"m uma
cor de 2undo de2inida:
h1 M
(ac)'round: yellow;
N
h% M
(ac)'round: oran'e;
N
Ber exemplo
<e2inindo padding para os cabeal&os# alteramos a quantidade de enc&imento existente
ao redor de cada um deles:
h1 M
ba!.ground4 yellow8
paddin': 20px 20px 20px &0px;
N
h% M
ba!.ground4 orange8
paddin'-left:!20px;
N
:or,as
?ordas podem ser usadas para muitas coisas# por exemplo# como elemento decorativo
ou para servir de lin&a de separao entre duas coisas. 199 proporciona in2initas
possibilidades de uso de bordas na pgina.
+order7,idth
+order7color
+order7stIle
Exemplos de de6ini/.o de +ordas
+order
( espessura das bordas RborderG*idt#S
$ espessura das bordas de2inida pela propriedade border3width# que pode assumir os
valores t&in# medium# e t&icK (2ina# mdia e grossa)# ou um valor numrico em pixels. $
2igura a seguir ilustra algumas espessuras de bordas:
(s cores das bordas RborderGcolorS
$ propriedade border3!olor de2ine as cores para as bordas. As valores so expressos
em c*digo ou nome de cores# por exemplo# .E1HT=QI.# .rgb(1HT#1HT#1HT). ou.8ellow. .
Tipos de bordasRborderGst.leS
0xistem vrios tipos de bordas dispon:veis para escol&a. $ seguir apresentamos R tipos
di2erentes de bordas e como elas so renderi!adas 'nternet 0xplorer Q.Q. 3odos os
exemplos so mostrados na cor .gold. e com espessura .t&icK.# mas voc" pode usar
qualquer cor e espessura ao seu gosto.
As valores none ou &idden podem ser usados quando no se dese%a a exist"ncia de
bordas.
/xemplos de defini$%o de bordas
$s tr"s propriedades explicadas acima podem ser de2inidas %untas para cada elemento e
resultam em di2erentes bordas. )ara exempli2icar# 2oram estili!adas di2erentes bordas
para os elementos <h1># <h%># <ul> e <p>. A resultado pode no ser uma obra prima#
mas# ilustra bem algumas das in6meras possibilidades de estili!ao de bordas:
h1 M
border3width4 thi!.8
border3style4 dotted8
border3!olor4 gold8
N
h% M
border3width4 %7p#8
border3style4 outset8
border3!olor4 red8
N
p M
border3width4 1p#8
border3style4 dashed8
border3!olor4 blue8
N
ul M
border3width4 thin8
border3style4 solid8
border3!olor4 orange8
N
Ber exemplo
D poss:vel ainda de2inir propriedades especialmente para as bordas top# bottom# rig&t ou
le2t (superior# in2erior# direita e esquerda). ,e%a o exemplo a seguir:
h1 M
border3top3width4 thi!.8
border3top3style4 solid8
border3top3!olor4 red8
border3bottom3width4 thi!.8
border3bottom3style4 solid8
border3bottom3!olor4 blue8
border3right3width4 thi!.8
border3right3style4 solid8
border3right3!olor4 green8
border3le6t3width4 thi!.8
border3le6t3style4 solid8
border3le6t3!olor4 orange8
N
Ber exemplo
Compilando RborderS
$ssim como para muitas outras propriedades# voc" pode usar uma declarao abreviada
para bordas. ,amos a um exemplo:
p M
border3width4 1p#8
border3style4 solid8
border3!olor4 blue8
N
)ode ser abreviada assim:
p M
border4 1p# solid blue8
N
Altura e largura
$t agora ainda no 2i!emos qualquer considerao sobre as dimens7es dos elementos
com que trabal&amos. Nesta lio veremos como 2cil atribuir uma altura e uma
largura para um elemento.
,idth
height
(tribuindo largura R*idt#S
$ propriedade width destina;se a de2inir a largura de um elemento.
A exemplo a seguir constr*i um box dentro do qual podemos digitar um texto:
di(.bo# M
width4 %77p#8
border4 1p# solid bla!.8
ba!.ground4 orange8
N
Ber exemplo
(tribuindo altura R#eig#tS
No exemplo acima a altura ser determinada pelo conte6do inserido no box. ,oc" pode
de2inir a altura de um elemento com a propriedade height. 1omo exemplo# vamos
2a!er a altura do box anterior igual a QFFpx:
di(.bo# M
height4 C77p#8
width4 %77p#8
border4 1p# solid bla!.8
ba!.ground4 orange8
N
7lutuan,o elementos (4loats*
m elemento pode ser Z2lutuadoZ C esquerda ou C direita com uso da propriedade 6loat.
'sto signi2ica que o box e seu conte6do so deslocados para a direita ou para a esquerda
do documento (ou do bloco container) (ver lio U para descrio do ?ox model). $
2igura a seguir ilustra o princ:pio de 2loat:
9e dese%amos que um texto se%a posicionado em volta de uma 2igura como mostrado
abaixo# basta 2lutuarmos a imagem:
Como isto ! feito ?
A /345 para o exemplo acima mostrado a seguir:
<di( id12pi!ture2>
<img sr!12bill.?pg2 alt12@ill Kates2>
</di(>
<p>!ausas naturales et ante!edentes$
id!iro etiam nostrarum (oluntatum...</p>
)ara conseguir o e2eito mostrado# basta de2inir uma largura para o box que o contm e
declarar para ele 6loat4 le6t8
5pi!ture M
float:left;
widt: !00px;
N
Ber exemplo
Outro exemplo 1 colunas
Oloats podem ser usados para construir colunas em um documento. )ara criar as colunas
estruturamos as colunas no c*digo /345 usando <di(> como mostrado a seguir:
<di( id12!olumn12>
<p>Hae! disserens /ua de re agatur
et in /uo !ausa !onsistat non (idet...</p>
</di(>
<di( id12!olumn%2>
<p>!ausas naturales et ante!edentes$
id!iro etiam nostrarum (oluntatum...</p>
</di(>
<di( id12!olumnB2>
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</di(>
$ seguir de2inimos a largura de cada coluna# por exemplo TTV# e declaramos 6loat4
le6t8 para cada uma das colunas:
5!olumn1 M
float:left;
widt: ##E;
N
5!olumn% M
float:left;
widt: ##E;
N
5!olumnB M
float:left;
widt: ##E;
N
Ber exemplo
6loat pode ser declarado left# rig#t ou none.
( propriedade clear
$ propriedade !lear usada para controlar o comportamento dos elementos que se
seguem aos elementos 2loats no documento.
)or padro# o elemento subsequente a um 2loat# ocupa o espao livre ao lado do
elemento 2lutuado. ,e%a no exemplo acima que o texto deslocou;se automaticamente
para o lado da 2oto de ?ill Pates.
$ propriedade !lear pode assumir os valores left# rig#t# bot# ou none. $ regra geral :
se !lear# 2or por exemplo de2inido bot& para um box# a margem superior deste box ser
posicionada sempre abaixo da margem in2erior dos boxes 2lutuados que este%am antes
dele no c*digo.
<di( id12pi!ture2>
<img sr!12bill.?pg2 alt12@ill Kates2>
</di(>
<h1>@ill Kates</h1>
<p class="floatstop">!ausas naturales et ante!edentes$
id!iro etiam nostrarum (oluntatum...</p>
)ara evitar que o texto se posicione no espao livre deixado pela 2oto do ?ill Pates
basta adicionar a seguinte regra 199:
5pi!ture M
6loat4le6t8
width4 177p#8
N
.6loatstop M
clear:(ot;
N
!osi"ionan,o elementos
1om posicionamento 199 podemos colocar um elemento em uma posio exata na
pgina. 1ombinado com 2loats (ver lio 1T)# o posicionamento abre muitas
possibilidades para criao de la8outs precisos e avanados.
Nesta lio veremos os seguintes itens:
O princKpio de posicionamento -SS
Posicionamento a+soluto
Posicionamento relativo
O princ"pio de posicionamento CFF
1onsidere a %anela do navegador como um sistema de coordenadas:
A princ:pio de posicionamento 199 estabelece que voc" pode posicionar um elemento
em qualquer lugar na tela usando um sistema de coordenadas.
,amos supor que queremos posicionar um cabeal&o. sando o box model (ver lio U)
o cabeal&o pode ser estili!ado para ser apresentado como mostrado abaixo:
9e quisermos o cabeal&o posicionado a 1FFpx do topo do documento e a HFFpx C
esquerda# podemos usar o seguinte 199:
h1 M
position4absolute8
top: !00px;
left: 200px;
N
O resultado 4 mostrado a seguir?
1omo voc" pode ver# posicionar com 199 uma tcnica precisa para colocar
elementos. D muito mais 2cil do que usar tabelas# imagens transparentes e tudo mais.
3osicionamento absoluto
m elemento posicionado absolutamente no cria nen&um espao no documento. 'sto
signi2ica que no deixa nen&um espao va!io ap*s ser posicionado.
)ara posicionar um elemento de 2orma absoluta a propriedade position deve ser
de2inida para absolute. ,oc" pode ento usar as propriedades left# rig#t# top# e bottom
para de2inir as coordenadas e posicionar o elemento.
)ara exempli2icar o posicionamento absoluto escol&emos colocar quatro boxes nos
quatro cantos da pgina:
5bo#1 M
position:a(solute;
top4 C7p#8
le6t4 C7p#8
N
5bo#% M
position:a(solute;
top4 C7p#8
right4 C7p#8
N
5bo#B M
position:a(solute;
bottom4 C7p#8
right4 C7p#8
N
5bo#A M
position:a(solute;
bottom4 C7p#8
le6t4 C7p#8
N
Ber exemplo
3osicionamento relativo
)ara posicionar um elemento de 2orma relativa a propriedade position deve ser
de2inida para relative. $ di2erena entre os dois tipos de posicionamento a maneira
como o posicionamento calculado.
A posicionamento para posio relativa calculado com base na posi$%o original do
elemento no documento. 'sto signi2ica uma movimentao do elemento para a
esquerda# para a direita# para cima ou para baixo. $ssim 2a!endo o elemento ocupa um
espao ap*s ser posicionado.
1omo exemplo de posicionamento relativo vamos tentar posicionar tr"s imagens
relativamente as suas posi7es originais na pgina. Notar como as imagens deixam um
espao va!io nas suas posi7es originais no documento:
5dog1 M
position4relati(e8
le6t4 BC7p#8
bottom4 1C7p#8
N
5dog% M
position4relati(e8
le6t4 1C7p#8
bottom4 C77p#8
N
5dogB M
position4relati(e8
le6t4 C7p#8
bottom4 E77p#8
N
+san,o ;5in,ex (La'ers*
199 usa o espao tri;dimensional ; altura# largura e pro2undidade. Nas li7es anteriores
vimos as duas primeiras dimens7es. Nesta lio aprenderemos como colocar elementos
em la8ers (camadas). Nesumindo# camadas signi2icam como os elementos se sobrep7em
uns aos outros.
)ara 2a!er isto de2inimos para cada elemento um n6mero :ndice (-3inde#). A
comportamento que elementos com n6mero :ndice maior se sobrep7em Cqueles com
menor n6mero.
,amos supor um ro8al 2lus& no %ogo de poKer. $s cartas podem ser apresentadas como
se cada uma delas tivesse um -3inde#:
No caso mostrado# os n6meros :ndice esto em uma seqL"ncia direta (de 1;Q)# contudo o
mesmo resultado poderia ser obtido com uso de Q di2erentes n6meros# no em
seqL"ncia. A que conta a cronologia dos n6meros (a ordem).
A c*digo para a ilustrao das cartas mostrado a seguir:
5tenWo6Wdiamonds M
position4 absolute8
le6t4 177p#8
bottom4 177p#8
z-index: !;
N
5?a!.Wo6Wdiamonds M
position4 absolute8
le6t4 11Cp#8
bottom4 11Cp#8
z-index: 2;
N
5/ueenWo6Wdiamonds M
position4 absolute8
le6t4 1B7p#8
bottom4 1B7p#8
z-index: #;
N
5.ingWo6Wdiamonds M
position4 absolute8
le6t4 1ACp#8
bottom4 1ACp#8
z-index: D;
N
5a!eWo6Wdiamonds M
position4 absolute8
le6t4 1D7p#8
bottom4 1D7p#8
z-index: %;
N
.eb5stan,ar,s e /ali,a0o
JT1 a sigla para Jorld Jide Jeb 1onsortium# uma organi!ao independente que
gerencia as normas para codi2icao na 'nternet (isto # /345# 199# G45 e outros).
4icroso2t# Oundao 4o!illa e muitas outras organi!a7es so membros do JT1 e
2ormam um consenso sobre o 2uturo desenvolvimento de normas.
9e voc" tem alguma experi"ncia com web design# provavelmente sabe que & uma
grande di2erena na maneira como di2erentes navegadores renderi!am uma pgina. D
2rustante e requer um consumo de muito tempo# criar uma pgina que possa ser
visuali!ada consistentemente no 4o!illa# 'nternet 0xplorer# Apera e no restante dos
navegadores existentes.
$ idia da normati!ao criar um consenso e encontrar um denominador comum para
uso de tecnologias para a Jeb. 'sto signi2ica que seguindo as normas# um
desenvolvedor ter a certe!a de que sua criao ser tratada de maneira apropriada em
di2erentes plata2ormas. (ssim, n?s recomendamos que voc se beneficie do trabal#o
desenvolvido pelo M4C e valide sua CFF para estar em conformidade com as
normas
Ialidador CFF
)ara 2acilitar a veri2icao aos preceitos das normas 199# o JT1 desenvolveu um
validador que 2a! uma veri2icao da 2ol&a de estilos e retorna um relat*rio com os
eventuais erros e avisos caso sua 199 no valide.
)ara 2acilitar a validao da sua 2ol&a de estilos voc" poder submet";la ao validador
aqui mesmo nesta pgina. Na caixa de texto abaixo# substitua a N5 existente pela N5
da sua 2ol&a de estilos e clique no boto para validar. ,oc" ser in2ormado pelo site do
JT1 se & erros na sua 2ol&a de estilos.
http://www
Validar f olha de estilos
9e o validador no encontrar errosa ser mostrada uma imagem como a abaixo# que voc"
poder usar na sua pgina para anunciar que est usando um c*digo vlido:
A validador pode tambm ser encontrado neste linK: &ttp:BB%igsaw.wT.orgBcss;validatorB
<$ 4$ 093<$ A\.... 0 0 093$N0' 5/0 4$N<$N<A $5PN9
<09$O'A9 A\ )N$ ,1 4AN3$N OAN45$N'A AN;5'N0 ?5X....