Sie sind auf Seite 1von 18

Guia Prático de HTML - Parte 1

Publicado em: 13/11/2006

Compartilhe

1. INTRODUÇÃO
As pe ssoas i magi na m que é mui to di fí c i l c onstrui r um si te . I sto não é
ve rdade !! Q ual que r um pode apre nde r c omo c onstrui r uma pági na. Se
voc ê c onti nuar le ndo, e stará apto a c onstrui r um rapi da me nte , quand o
me nos e spe rar.

O utros pe nsam - e rrone ame nte - que se rá ne c e ssári o softw are s


avanç ados e c aros para c onstrui r w e bsi te s. É ve rdade que e xi ste m
mui tos softw are s c apaze s de c ri ar um we bsi te para voc ê. Al guns mai s
fe c hados que outros. Mas, se voc ê pre te nde tri l har o c ami nho ce rto,
de ve rá c ri ar voc ê me smo o w e bsi te. F el i zme nte , i sto é si mpl e s é voc ê j á
te m a sua di sposi ç ão todos os softw are s que ne c e ssi ta.

O obj e ti vo de sta mi nha aposti l a é forne ce r os c onhe c i me ntos bási c os


que pe rmi ti rão c onstrui r um w e bsi te de forma c orre ta. A aposti l a parte
da e stac a ze ro e não re que r qual que r c onhe c i me nto pré vi o de
program aç ão.

O bvi ame nte , a aposti l a não e nsi na tudo. Di ante di sto, se rá ne c e ssári o
que voc ê se e mpe nhe , prati que e c onsol i de os e nsi name ntos aqui
c onti dos. Mas, não se aborre ç a, poi s apre nde r c omo c onstrui r um
we bsi te é be m di ve rti do e basta nte sati sfatóri o quando voc ê tri l ha o
c ami nho ce rto do apre ndi za do.

OK . C he ga de c onve rsa. Vamos c ome ç ar. . .

2. SOBRE O HTML
O H TM L é uma L ing uag e m de marc ação de te x to . Mai s
espe c i fi c ame nte , uma li ngua ge m de marc aç ão de hi pe rte xto. Portanto,
ante s de c ome ç ar a fal ar de HTML , vamos ente nde r o que ve m a se r uma
li ngua ge m de marc aç ão.

L ing uag e ns de marc ação (mark up l angua ge s em i ngl ê s) são


li ngua ge ns que c ombi na m te xto c om i nformaç õe s e xtras sobre o te xto.
Essa i nformaç ão extra pode se r re pre se ntada por di ve rsos sí mbol os ou
pal avras- c have di fe re nte s, de pe nde ndo da l i nguage m de marc aç ão c om
que e sti ve rmos trabal han do.

O H TM L não e ra uma li ngua ge m de formataç ão de te xtos qual q ue r, e l a


possi bi l i tava li gar te xtos que e stavam num c omputa dor a te xtos que
estavam num outro c omputa dor, usando c omo mei o a i nte rne t. O
proc e ssador e vi sual i zador de HTML são c hamados de nave gado r, pe l a
c arac te rí sti c a do hi pe rte xto que pe rmi te ao usuári o " nadar" na
i nformaç ão.

O nave gador (també m c hama do de brow se r) , nada mai s faz do que abri r
arqui vos de c omputa dor e , c aso e sse s arqui vos c onte nham c ódi gos
HTML , i nte rpre tá- l os se gundo o padrão do hi pe rte xto e ge rar a " pági na
html " , que é a mani fe staç ão gráfi c a dos c ódi gos - aqui l o que você
usual me nte vê quan do nave ga pe l a i nte rne t . Por c onve nç ão, os nome s
dos arqui vos em HTML te rmi nam
c om . ht ml . Exe mp lo : ind e x . ht ml, f oo . b ar. ht ml e e t c. hml (e xi ste m
també m arqui vos html que te rmi nam c om . shtml e outras exte nsõe s
mal uc as) . O bse rve que esse s arqui vos pode m estar tanto no c omput ador
do usuári o que usa o nave gado r quan to em outros c omput adore s: o
nave gador é c apaz de abri r e sse s arqui vos de sde que e le s este j am
ac e ssí ve i s - as tai s pági nas w e b.

3. SUA PRIMEIRA PÁGINA EM HTML


Uma pági na HTML é di vi di da e m duas parte s, a cab e ça e o co rp o .
N a cab e ça (ou c abe ç al ho) são de fi ni dos os atri butos pri nc i pai s do
doc ume nto, c omo o tí tul o e as pal avras- c have . O co rpo c onté m a parte
vi sí ve l do doc ume nto, i .e , aque l a que você ve rá proc e ssada e m se u
nave gador. Exi ste ai nda uma re gi ão da pági na que está tanto fora da
c abe ç a quant o do c orpo (não! não é a fal ta de j uí zo!) , mas não i re mos
e ntrar ne sse mé ri to.

3.1 - O que está dentro de um arquivo em HTML?!

• Um arqui vo HTML é c onsti tuí do por te xtos que de fi ne m os


el e me ntos da li ngua ge m HTML usando "e ti que tas de marc aç ão" ;

• As eti que tas de marc aç ão dão i nstruç õe s ao nave gador sobre a


estrutur a do doc ume nt o e sobre a forma de c omo a pági na de ve
se r apre se ntada grafi c ame nte ;

• O s arqui vos HTML pode m se r esc ri tos usan do um si mpl e s e di tor de


te xtos e se us nome s de ve m possui r a e xte nsão . ht ml

3.2 - Experimente você mesmo


B om, se voc ê uti l i za o W i ndow s (9 5 , 98 , 2 00 0, X P, e tc ), i ni c ie o B l oc o de
N otas(N ote pad).

Agora di gi te o se gui nte te xto:

<html>
<head>
<title> Título da Página </title>
</head>
<body>
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body>
</html>

Sal ve este arqui vo c om o nome ind ex . ht m

Abra o se u nave ga dor. Agora abra o arqui vo que voc ê sal vou ac i ma,
c hamado ind ex . ht m uti l i zand o as opç õe s do me nu ou arrastan do o í c one
do arqui vo para de ntro da j ane l a do nave gad or. O bse rve o re sul tado.

3.3 - Explicação do Exemplo


A pri me i ra tag e m se u doc ume nt o HTML é < ht ml> . Esta tag de fi ne o
i ní ci o de um doc ume nto HTML e i ndi c a ao nave gador que todo c onte údo
poste ri or de ve se r trata do c omo uma sé ri e de c ódi gos HTML . A úl ti ma
tag em se u doc ume nto de ve rá se r</ ht ml> . Esta tag i ndi c a ao nave gador
que é o fi m de se u doc ume nto HTML .

O te xto e ntre as tags < he ad> . . . </ he ad > é a i nformaç ão do c abe ç al ho.
Ne nhum a i nformaç ão c onti da no c abe ç al ho é e xi bi da na j ane l a do
nave gador.

O te xto e ntre as tags <t it le > . . . </ t it le > é o tí tul o de se u doc ume nto. O
tí tul o se rá exi bi do na l e ge nda do nave gador, na parte de ci ma do
brow se r.

O te xto e ntre as tags < bo d y> .. . < /b od y> são as i nformaç õe s que se rão
exi bi das na pági n a.

O te xto e ntre < b> . . . </ b> fi c ará c om o esti l o N e gri to (B ol d)

3.4 - Devemos usar a extensão .htm ou .html?


O s nome s dos arqui vos e sc ri tos e m HTML de ve m te r a e xte nsão . ht ml,
mas a e xte nsão . ht m ai nda é uti l i zada. Este fato é uma he ranç a dos
te mpos (pré -hi stóri c os no que di z re spe i to à I nte rne t) do MS- DO S e do
Wi ndow s 16 bi ts, e m que os nome s dos arqui vos ti nham no máxi mo 8
c arac te re s e as suas e xte nsõe s não podi a m te r mai s de 3 c arac te re s.

Essas de fi c iê nc i as, que no passado obri gar am a usar a


exte nsão . ht m e m ve z de . ht ml j á foram e li mi nada s. Por i sso de ve mos
usar a e xte nsão . ht ml, a não se r que e xi sta uma boa razão para voc ê
estar uti l i zando . ht m (pouc o prováve l ).

3.5 - Editores "Puros" versus WYSIWYG


Exi ste m duas formas de se c ri ar um te xto format ado atravé s de
li ngua ge ns de marc aç ão. A pri me i ra c onsi ste e m esc re ve r o te xto,
usando as i nstruç õe s da l i ngua ge m, num e di tor de te xto puro. Em
se gui da, usa- se o proc e ssador de te xto para produ zi r o te xto formata do.

A outra mane i ra é usar um e di tor de te xtos WYSIWYG (W hat You See I s


W hat You Ge t - O Q ue Voc ê Vê É O Q ue Voc ê Te m ). Ape sar da si gl a se r
c ompri da, o c onc e i to é si mpl e s: esse ti po de programa é c omposto por
um e di tor de te xto que també m é um proc e ssador de te xtos formata dos.
A di fe re nç a aqui é que o te xto que o usuári o e stá e di tando e
vi sual i zando não é o te xto puro, mas si m o te xto j á formata do
grafi c ame nte , ou se j a, o q ue vo cê vê é o q ue vo cê t e m.

Voc ê provave l me nte j á usou e di tore s de sse ti po. O s e di tore s c omo


o W ord, o Abi W ord e o O pe nO ffi ce W ri te r são WYSIWY G e os doc ume ntos
que el e s ge ram uti l i zam L ing uag e ns de marcaç ão .

3.6 - FAQ (Perguntas Freqüentes)


Dep o is q ue e u ed it e i me u arq uivo H TM L , e u não co ns ig o vis ualiz ar
o re s ult ad o e m me u nave g ad o r. Po r q uê ?!
Ve ri fi que se voc ê sal vou o arqui vo c om o nome c orre to e que sua
exte nsão se j a . ht m. C onfi ra també m e m sua barra de e nde re ç os do
nave gador, ve ri fi que quanto ao di re tóri o se e stá c orre to.

Qual nave g ad o r e u de vo ut ilizar?!


Voc ê pode uti l i zar qual que r brow se r, c omo o I nte rne t Expl ore r, Mozi l l a,
O pe ra, e tc . .. parti c ul arme n te re c ome ndo o Fi re fox e o I nte rne t Expl ore r.

Po rq ue ut ilizamo s t ag s co m le t ras minús culas ?!


Em HTML os nome s das tags e el e me ntos pode m se r esc ri tos tanto c om
le tras mai úsc ul as quanto c om le tras mi núsc ul as, tanto que < B> é a
me sma c oi sa que < b> . Se você obse rvar e m tutori ai s e nc ontrados pel a
We b, vai notar que os mai s anti gos ge ral me nte uti li zam le tras
mai úsc ul as para esc re ve r os nome s das tags, mas os mai s mode rnos
uti l i zam exc l usi vame nte le tras mi núsc ul as. N e sta mi nha aposti l a uti l i zo
se mpre le tras mi núsc ul as porque exi ste uma razão mui to forte para i sso.

A no va g e ração d o H TM L é uma apl i c aç ão do XM L e é de si gnada


por XH TM L . O XH TM L é a me l hor li ngua ge m para se c ri ar pági nas para a
We b, mas é mai s re stri ta do que o HTML (“ rouba” al gumas das
li be rdade s que o HTML ofe re c e ) . Ao c ontrári o do que ac onte c e e m HTML ,
e m XM L as e ti que tas < B> e <b > re pre se ntam el e me ntos di fe re nte s,
vi sto que e m XH TM L foi adota do uma c onve nç ão se gun do a qual to d as
as et iq ue t as de ve m s e r es crit as co m le t ras minús culas . Por este
moti vo é extre mame nte re c ome ndáve l que se e sc re va todas as
e ti que tas co m le t ras minús culas . De ste modo, voc ê e stará adqui ri n do
bons modos e quase não te rá trabal ho de c onve rte r suas pági nas HTML
para XHTML .

Guia Prático de HTML - Parte 2


Publicado em: 13/11/2006

Compartilhe

6. MODIFICANDO O CORPO DO DOCUMENTO


C omo di to ante ri orme nte , o el e me nto b od y e ngl oba o c orpo do se u
doc ume nto HTML . El e possui mui tos atri but os que possi bi l i tam modi fi c ar
a aparê nc i a da sua pági na, c omo c or de fundo ou das le tras. Esse s
atri butos també m pode m se r uti l i zados j unto c om o atri buto t d . Aqui
mostrare mos ape nas os atri butos que i nte rfe re m nas c ore s da sua
pági na:

• bg co lo r: de fi ne a c or de fundo de um doc ume n to


• te x t : a c or do te xto
• link : a c or dos l i nk s
• alink : a c or dos l i nk s ati vos atual me nte (a pági na que voc ê e s tá
vi si tando)
• vlink : c or dos li nk s j á vi si tados

O s argume ntos são o nome ou o núme ro de uma c or, e xatame nte c omo
no c aso do atri buto co lo r us ado no el e me nto f o nt . Por e xe mpl o:

<html>
<head> <title>Isso é uma confusão!</title></head>
<body bgcolor="black" text="gray" link="red" alink="white">

Isso é uma página em html.


</body>
</html>

Essa é uma pági na HTML onde o fundo se rá pre to, c om l e tras c i nzas,
li nk s e m ve rme l ho e l i nk s ati vos e m branc o. Essas são as de fi ni ç õe s
gl obai s de c or para se u doc ume n to, e a qual q ue r i nstante voc ê pode
mudar as c ore s c om o e le me nto fo nt .

7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML


7.1 - Cabeçalhos
O s c abe ç al hos (també m c hama dos de He adi ngs) se rve m para c ri ar
tí tul os di fe re nc i ar as se ç õe s da sua pági na. El e s possue m se i s val ore s
di fe re nte s, se ndo que a de val or 1 é a que possui a mai or fonte e a de
val or 6 possui a me nor fonte .

Por e xe mpl o, usando o se gui nte c ódi go:

<h1> Título 1 </h1>


<h2> Título 2 </h2>
<h3> Título 3 </h3>
<h4> Título 4 </h4>
<h5> Título 5 </h5>
<h6> Título 6 </h6>

N o c ódi go ac i ma, o HTML autom ati c ame n te sol ta uma l i nha e m branc o
e ntre um tí tul o e outro.

7.2 - Parágrafos
O s parág rafos são de fi ni dos c om a tag <p >

<p>Este é um parágrafo</p>
<p>Este é um outro parágrafo</p>

N o c ódi go ac i ma, o HTML autom ati c ame n te ac re sc e nta uma l i nha em


branc o ante s e de poi s de um parágra fo.

7.2.1 - Alinhamentos de parágrafo


Voc ê j á de ve te r vi sto que e m ce rtos doc ume nt os o te xto apare c e ora
al i nhado à di re i ta, ora à e sque rda, no c e ntro ou então oc upa ndo
uni forme me nte o e spaç o da pági na (te xto j usti fi c ado) . Isso pode se r
obti do fac i l me nte e m HTML . Ve j a a tabe l a abai xo:

EL EM EN TO DESCRIÇÃO
<p align=”left”> Alinha o texto à esquerda
<p align=”right”> Alinha o texto à direita
<p align=”center”> Alinha o texto centralizado
<p align=”justify”> Alinha o texto justificado

N ote que e ntre os de li mi tadore s < e > não e nc ontra- se ape nas o
el e me nto < p> . Alé m del e , e xi ste o te xto alig n= "ali nhame nt o " .
Di ze mos que alig n é um atri buto do el e me nto p e al i nhame nto é o val or
de sse atri buto. No c aso de <p alig n= "jus t if y"> , o val or do
atri buto alig n (que si gni fi c a al i nhame nto em
i ngl ê s) é jus t if y (j usti fi c ado) .

O s atri but os, as pal avras que se gue m o e le me nto, i nformam o nave gad or
a re spe i to das propri e dade s que os e le me ntos pode m assumi r. C onfuso?!
Pode pare c e r um pouc o c onfuso, mas não é . C omo di sse a Toya, " Um
di sc o de banda punk pode te r di ve rsas propri e dade s ou 'atri bu tos' - a
c or do di sc o, taman ho, vel oc i dade , e tc , tudo i sso são atri butos. " E e u
di go mai s: se voc ê c ol oc a o di sc o num toc a-di sc os, voc ê pode ouvi -l o e m
duas ou no máxi mo trê s ve l oc i dade s. Às ve ze s dá pra ouvi r ao c ontrári o.
Mas se voc ê arre me ssar se us di sc os do Fofão, garan to que e le s pode rão
gi rar e m mui tas outras ve l oc i dade s. Assi m é o HTML , c om mui tas opç õe s
para você e xi bi r se u te xto.

No HTML , os val ore s dos atri butos pode m se r de fi ni dos da


forma at rib ut o = valo r ouat rib ut o s = "valo r" (c omo e m al i gn= " j usti fy" ) ,
que é mai s re c ome ndad a.
C omo voc ê vi u, ne m todos os c ódi gos e m HTML ne c e ssi tam de atri butos,
e m e spe ci al os c omando s de modi fi c aç ão de te xto c omo ne gri to, i táli c o,
subl i nhad o, etc .

Re sumi ndo, os atri butos de fi ne m c arac te rí sti c as adi c i onai s aos


el e me ntos. N as se ç õe s se gui nte s ve re mos el e me ntos c om vári os
atri butos. Por e xe mpl o, não adi ant a di ze r ao se u nave gador pra por um
li nk e m al guma parte do se u te xto, é pre c i so di ze r ao nave gador, por
exe mpl o, pra que l ugar esse li nk apont a. É isso o que um atri buto faz.

7.3 - Criando uma divisão


Exi ste m mome ntos e m que que re mos que vári os parágr afos possuam um
me smo val or de atri buto - c e ntral i zado, por exe mpl o . Ao i nvé s de
esc re ve rmos alig n= "jus t if y" a c ada abe rtura de novo parágra fo,
pode mos usar o e le me nto d iv, que c ri a uma "d ivis ão " no doc ume nto na
qual al guns atri butos são pre se rvados. Vej amos o e xe mpl o:

<div align="center">
<p>
Parágrafo 1
Parágrafo 1
Parágrafo 1
</p>
<p>
Parágrafo 2
Parágrafo 2
Parágrafo 2
</p>
<p>
Parágrafo 3
Parágrafo 3
Parágrafo 3
</p>
</div>

Expe ri me nte mudar os atri butos do ali nhame n to pra ve r o que


ac onte c e !! N a parte de Fo lhas de Est ilo mostrare i c omo uti l i zar o
el e me nto d iv para c ri ar se ç õe s l ógi c as e m doc ume ntos.

7.4 – Quebras de Linha


A tag < b r> é uti li zada quan do voc ê que r te rmi nar uma li nha, mas não
que r c ome ç ar um novo pará grafo. C om e ste c oman do voc ê faz c om que
oc orra uma que bra de li nha, onde voc ê posi c i onar a tag.
N ote que para o e le me nto < b r> não e xi ste o c omando </ b r> , i sto é , a
que bra de li nha não age numa re gi ão de te xto del i mi tada, mas si m num
ponto do te xto. C ompl i c ado?! Então vamos l á, mai s uma ve z e xpl i c ando
de uma outra forma: c omandos c omo < b> , < i> e < u> age m sobre uma
re gi ão do te xto e pre ci sam se r fe c hados c om se us
re spe c ti vos </ b> , < / i> e < / u> , poi s do c ontrári o e sse s c oman dos
agi rão até o fi m do doc ume nt o. J á o c oman do de que bra de li nha, < /b r> ,
e al guns outros atuam some nte no ponto onde e le s apare c e m.

Vej a o e xe mpl o abai xo da uti l i zaç ão da tag <b r>

<p>Este <br> é um pará<br>grafo com quebra de linha</p>

A tag <b r> é uma e ti que ta vazi a, el a não possui tag fi nal .

7.5 – Comentários
A tag de c ome ntári o é uti l i zada para i nse ri r c ome ntári os no c ódi go fonte
HTML . Todo ti po de c ome ntári o é i gnora do pe l o nave gador, i sto é, el e
não se rá e xi bi do na te l a. Voc ê pode uti li zar esta tag para e xpl i c ar se u
c ódi go fonte ou parte del e , que pode rá aj udá- l o quan do voc ê esti ve r
e di tando se us c ódi gos poste ri orme nte .

<!-- Este é o comentário -->

N ote que voc ê pre ci sa de um ponto de e xc l amaç ão de poi s do parê nte s e s


de abe rtura, e não ante s do parê nte se s fi nal .

Guia Prático de HTML - Parte 3


Publicado em: 13/11/2006

Compartilhe
12 – CORES
Pode mos obte r qual que r c or que de se j armos c ombi na ndo proporç õe s
c orre tas de trê s c ore s
base s: Ve rmel ho (Re d) , Ve rde (Gree n) e Azul (B l ue ) .

12.1 - Formas de exprimir cores


Em C SS a forma re c ome ndad a para uti l i zar c ore s é usando
c ódi go (notaç õe s) he xade c i mal . De sta forma as c ore s expri me m usand o
trê s núme ros he xade c i mai s que de fi ne m as quanti d ade s de ve rme l ho,
ve rde e azul que e ntram na c omposi ç ão de uma de te rmi nada c or. O val or
mai s bai xo de uma de te rmi nada c or é 0 ( # 00 na notaç ão he xade c i mal
usada em C SS) e o val or mai s al to é 25 5 (# FF e m c ódi go
he xade c i mal ). Assi m, a c or pre ta te m 0 de ve rmel ho, 0 de ve rde e 0 de
azul , esc re ve ndo na forma #0 00 00 0 . J á o branc o possui 25 5 de
ve rme l ho, 25 5 de ve rde e 25 5 de azul , se ndo se u c ódi go # FFFFFF . O
amare l o forte possui 25 5 de ve rmel ho, 2 55 de ve rde e 0 de azul , se ndo
se u c ódi go # FFFF0 0

A tabe l a abai xo mostra os re sul tados de di ve rsas c ombi naç õe s de c ore s:

COR CÓDIGO HEXADECIMAL VALOR RGB (DECIMAL)


#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

12.2 – Nomes de cores


A tabe l a se gui nte mostra as 1 6 c ore s c uj os nome s foram de fi ni dos
ofi c i al me nte pe l o W 3C . Todos os nave gado re s re c onhe c e m e ste s nome s
pe l o que pode m usá- l os se m qual que r probl e ma:

Cores com Nomes Atribuídos Oficialmente


Aqua Black Blue Fuchsia
(#00FFFF) (#000000) (#0000FF) (#FF00FF)
Green Gray Lime Maroon
(#008000) (#808080) (#00FF00) (#800000)
Navy Olive Purple Red
(#000080) (#808000) (#800080) (#FF0000)
Silver Teal White Yellow
(#C0C0C0) (#008080) (#FFFFFF) (#FFFF00)

Ape sar de não e stare m de fi ni dos ofi ci al me nte , os nome s das c ore s
apre se ntados a se gui r são re c onhe c i dos por todos os nave gado re s
re l e vante s, c om e xce ç ão das ve rsõe s mai s anti gas.

No t a: Este s nome s de c ore s não e stão de fi ni dos e m ne nhum padrão do


W3 C , ape sar de se re m re c onhe c i dos pe l os pri nc i pai s nave gadore s, e s se
re c onhe c i me nto não é e xi gi do a ne nhum nave gad or para estar c onforme
c om as re c ome ndaç õe s ofi ci ai s. É pouc o prováve l que nos anos mai s
próxi mos os nave gadore s para PDA e te l e fone s móve i s c onsi gam
re c onhe c e r este s nome s de c or. Se qui se r garanti r a apre se ntaç ão
c orre ta das c ore s das suas pági nas e m todos os nave gadore s c onforme s
c om as normas do W3 C , e m ve z dos nome s apre se ntad os na tabe l a,
uti l i ze os c ódi gos he xade c i mai s apre se ntados j unto das c ore s.

COR CÓDIGO HEXADECIMAL NOME DA COR

#F0F8FF AliceBlue

#FAEBD7 AntiqueWhite

#7FFFD4 Aquamarine

#000000 Black

#0000FF Blue

#8A2BE2 BlueViolet

#A52A2A Brown

12.3 – Cores seguras da Web


Pro b le mas caus ad os p o r um núme ro re d uzid o d e co res

Todos os c omputa dore s mode rnos são c apaze s de mostrar de ze nas de


mi l har ou mil hõe s de c ore s e m si mul tâne o. C ontud o, até me ados da
dé c ada de 1 99 0 mui tos si ste mas ape nas c onse gui am apre se ntar 2 56
c ore s di fe re nte s de c ada ve z. Esta li mi taç ão obri gava os nave gad ore s a
trabal hare m c om uma pal e ta fi xa que c onti nha ape nas 2 56 c ore s.

O s nave gad ore s eram obri gados a usar ape nas 25 6 c ore s para si mul ar
todas as c ore s que não c onse gui am apre se ntar. O s e fei tos de stas
aproxi maç õe s e ram vi sí ve i s na forma pontos adj ac e nte s c om c ore s
di fe re nte s e de manc has de c or. Atual me n te estas l i mi taç õe s j á quase
não e xi ste m.

C omo ac abamos de ve r, na pri me i ra me tade da dé c ada de 1 99 0,


a mai ori a dos c omput adore s e ram c apaze s de apre se ntar ape nas 2 56
c ore s di fe re nte s de c ada ve z. De ssas 25 6 c ore s, os si ste mas
ope rati vos Wi ndow s e Appl e Mac i ntosh re se rvavam 2 0 c ore s c ada um (40
no total ) para de se nhar suas i nte rfac e s gráfi c as. Assi m, de um total de
25 6 c ore s possí ve i s, ape nas 2 16 podi am se r e sc ol hi das li vre me nte c om a
garanti a de pode re m se r apre se ntadas tanto numa máqui n a W i ndow s
c omo e m um Mac . Estas 2 16 c ore s re ce be ram a de si gnaç ão de co res
se g uras d a We b .

A forma e nc ontrada para l i mi tar as c onse qüê nc i as re sul tante s da


uti l i zaç ão de uma pal e ta c om ape nas 21 6 c ore s c onsi ste e m usar ape nas
c ore s c uj os c ódi gos he xade c i mai s usam ape nas c ombi naç õe s dos
núme ros i ndi c ados na tabe l a se gui nte :

RGB 00 51 102 153 204 255


Hex 00 33 66 99 CC FF

A tabe l a abai xo mostra todas as 2 16 c ombi naç õe s de c ore s que pode mos
formar c om os val ore s apre se ntados na tabe l a ante ri or. Estas são,
portanto, as 2 16 c ore s se guras da We b, que mostram os j untame nte c om
se us c ódi gos he xade c i mai s ( o c arac te re # no i ní ci o foi omi ti do) :
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC0
00CC33 00CC66 00CC99 00CCCC 00CCFF
0
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC0
33CC33 33CC66 33CC99 33CCCC 33CCFF
0
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC0
66CC33 66CC66 66CC99 66CCCC 66CCFF
0
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC0
99CC33 99CC66 99CC99 99CCCC 99CCFF
0
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC000
CC0033 CC0066 CC0099 CC00CC CC00FF
0
CC330
CC3333 CC3366 CC3399 CC33CC CC33FF
0
CC660
CC6633 CC6666 CC6699 CC66CC CC66FF
0
CC990
CC9933 CC9966 CC9999 CC99CC CC99FF
0
CCCC0
CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
0
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Atual me nte qual que r c omputa dor c onse gue apre se ntar mi l hõe s de c ore s
di fe re nte s ao me smo te mpo, não have ndo ne ce ssi dade de usar ape nas
c ore s se guras da W e b. Ape sar di sso, este te ma c onti nua a se r foc ado e m
quase todas as i ntroduç õe s à c onstruç ão de pági nas.
12.4 - Formas de exprimir os valores das cores
As c ore s de fi ne m- se usando notaç ão he xade c i mal que e xpri me as
quanti d ade s de Ve rmel ho (Re d) , Ve rde (Gree n) e Azul (B l ue ) que e ntram
e m sua c omposi ç ão. A quanti dade mí ni ma de uma c or é 0 ( #0 0 e m
c ódi go he xade c i mal ) e a quanti da de máxi ma é 2 55 ( # FF e m c ódi go
he xade c i mal ) Assi m, a c or branc a esc re ve -se na forma # FFFFF F e a c or
pre ta na forma # 00 00 0 0 . Uma forma mai s anti ga que ai nda func i ona é a
forma de c i mal . Na forma de c i mal a c or branc a e xpri me -se
c omo rgb ( 25 5 ,2 55 , 2 55 ) e a c or pre ta e xpri me -se c omo rgb ( 0 ,0 , 0) .
Entre e ste s doi s e xtre mos, te mos toda a gama de c ore s que pode m se r
apre se ntadas e m um moni tor.

Nada de Vermelho
Se de sl i garmos c ompl e tame nte a c or Ve rme l ha, fi c amos c om 65 53 6
c ore s di fe re nte s que re sul tam de c ombi nar 25 6 quanti da de s de ve rde
c om 2 56 quanti da de s de azul (65 5 36 = 2 56 × 2 56 ).

A tabe l a se gui nte mostra al guma s de stas c ombi naç õe s:

00330
006600 009900 00CC00 00FF00
0
00333
006633 009933 00CC33 00FF33
3
00336
006666 009966 00CC66 00FF66
6
00339
006699 009999 00CC99 00FF99
9
0033C
0066CC 0099CC 00CCCC 00FFCC
C
0033FF 0066FF 0099FF 00CCFF 00FFFF

Vermelho ao Máximo
Se c ol oc armos a quanti d ade de Ve rmel ho c om se u val or máxi mo, que
é 2 55 (# FF e m c ódi go he xade c i mal ) fi c amos ai nda c om 65 53 6 (25 6 x
25 6 ) c ore s di fe re nte s que re sul tam de c ombi nar mos todos os val ore s
possí ve i s de Ve rde c om todos os val ore s possí ve i s de Azul .

A tabe l a se gui nte mostra al guma s de stas c ombi naç õe s:

FF3300 FF6600 FF9900 FFCC00 FFFF00


FF3333 FF6633 FF9933 FFCC33 FFFF33
FF3366 FF6666 FF9966 FFCC66 FFFF66
FF3399 FF6699 FF9999 FFCC99 FFFF99
FF33C
FF66CC FF99CC FFCCCC FFFFCC
C
FF33FF FF66FF FF99FF FFCCFF FFFFFF

Tons de Vermelho
A tabe l a apre se ntada abai xo mostra o re sul tado obti do vari ando a
quanti d ade de c or ve rme l ha de 0 até 2 55 ao me smo te mpo que se
mantê m e m ze ro as quanti da de s de ve rde e de azul . Exi ste m 2 56 tons
di fe re nte s de ve rmel ho puro e mui tas outras que c ontê m mi sturas de
outras c ore s.
TON S DE
H EXADECIM AL RGB
VERM EL H O
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

Guia Prático de HTML - Parte 4


Publicado em: 13/11/2006

Compartilhe

16. FRAMES HTML


As mol duras (" frame s " ) são subj ane l as de fi ni das sobre a j ane l a pri nc i pal
do brow se r. Estas subj ane l as são c ri adas di vi di ndo a j ane l a em vári as
parte s. C ada uma de ssas parte s pode apre se ntar uma pági na da We b
di fe re nte . As subj ane l as são habi tu al me nte de si gnadas por mol duras, ou
" frame s" .
16.1 - Vantagens e desvantagens das molduras
As mol duras (" frame s" ) nos pe rmi te m apre se ntar mai s do que uma
pági na HTML numa úni c a j ane l a do brow se r. C ada pági n a e stá de ntro da
sua própri a mol dura ( subj ane l a ) e é i nde pe nde nte das re stante s pági nas.
Ape sar de ofe re ce re m al guma l i be rdade ao fac i l i tare m basta nte a
c ri aç ão de barras de nave gaç ão e m c onj unt os de doc ume ntos c om
mui tas pági nas e de tornare m bastante mai s rápi do o c arre game nto das
pági nas, as mol duras també m pode m dar ori ge m a al gumas di fi c ul dade s,
tai s c omo:

• O c ri ador de pági nas vê -se obri gado a l i dar c om um núme ro mai or


de pági nas ao me smo te mpo.

• A i mpre ssão do c onte údo do nave gador fi c a mai s di fí c i l .

• Al gumas ve ze s se rá ne c e ssári o a uti l i zaç ão de um úni c o


el e me nto < a> , para que e le re al i ze a l i gaç ão de duas ou mai s
pági nas, o que obri ga a uti l i zar JavaSc ri pt.

16.2 - O Elemento frameset

• O el e me nto < f rame s e t> de fi ne a forma c omo a j anel a do brow se r


se subdi vi de para ac omodar as mol duras.

• Este el e me nto di vi de a j anel a do brow se r e m l i nhas e c ol unas.

• O s val ore s atri buí dos às li nhas e às c ol unas i ndi c am a quanti dade
de áre a de é c ran que c ada l i nha e c ada c ol una de ve m oc upar.

16.3 – O Elemento frame


O e le me nto <f rame > de fi ne qual o doc ume nto HTML a c ol oc ar numa
de te rmi nada mol dura.

N o e xe mpl o apre se ntado abai xo, te mos um c onj unto de mol duras c om
duas c ol unas. A pri me i ra c ol una oc upa 2 5 % da l argura da j ane l a do
nave gador, e nquant o a se gun da c ol una oc upa 7 5% da l argura. O
doc ume nto mo ld ura_a. ht ml oc upa a pri me i ra c ol una e o
doc ume nto mo ld ura_b . ht ml oc upa a se gund a c ol una:

<frameset cols="25%,75%">
<frame src="moldura_a.html">
<frame src="moldura_b.html">
<frameset>

16.4 – Dicas
Q uando uma mol dura possui li nhas de c ontorno vi sí ve i s, voc ê pode
al te rar suas di me nsõe s arrastan do as l i nhas de l i mi te c om o mouse . Para
i mpe di r que i sso ac onte ç a, uti l i ze o
atri buto no re s ize = "no res ize " de ntro da tag <f rame >

Uti li ze a tag < nof rame s > para que os nave gadore s que não suporta m
frame s possam mostrar um avi so na j ane l a de que m está ac e ssando o
si te .
<a href ="pagina_1.html" target="principal">Página 1</a><br>
<a href="pagina_2.html" target ="principal">Página 2</a><br>
<a href="pagina_3.html" target ="principal">Página 3</a>

Ao cl i c ar num l i nk de ntro da mol dur a de nave gaç ão a nova pági na abre -


se na se gund a mol dura (à di re i ta), que te m por nome " p rincip al ”.

16.5 – Elementos para Frames


EL EM EN TO DESCRIÇ ÃO
<frameset> Define um conjunto de molduras
<frame> Define o conteúdo de uma subjanela (moldura, ou "frame")
<noframes> Define uma seção "noframes" para ser usada pelos browsers que não
suportam molduras
<iframe> Define uma subjanela (moldura) interior ("inline frame")

17. INSERÇÃO DE SCRIPTS


A i nse rç ão de sc ri pts e m suas pági n as e sc ri tas e m HTML pode m faze r
c om que e l as sej am c apaze s de re agi r de forma di nâmi c a e i nte ragi r c om
se us vi si tante s.

17.1 - Inserir um script numa página HTML


A i nse rç ão de um sc ri pt e m HTML faz- se atravé s do e le me nto <s crip t >
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Olá Mundo!");
</script>
</body>
</html>

O sc ri pt ac i ma fará o se gui nte re sul tado:

Olá Mundo!

17.1.1 - Um exemplo prático


<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá mundo!");
-->
</script>
</body>
</html>

17.2 - Como lidar com os browsers antigos


Um nave gador que não re c onhe c e o el e me nto < s crip t > é mui to anti go e
a sua uti l i dade na W e b atual é mui to re duzi da. Este s brow se rs, ao
e nc ontrare m um e le me nto <s crip t > (c uj o si gni fi c ado de sc onhe c e m ),
li mi tam- se a apre se ntar o te xto que está de ntro do el e me nto c omo se
tratasse de c onte údo normal . Para i mpe di r que i sso ac onte ç a, de ve -se
c ol oc ar o c onte údo do e le me nto < s crip t > de ntro de um c ome ntári o.
De ste modo, os nave gadore s que não suportam sc ri pts i gnoram- nos, mas
os outros nave gadore s re c onhe c e m os sc ri pts e e xe c utam- nos (ape s ar
dos c ome ntári os ). Me smo c om brow se rs mode rnos, a uti l i zaç ão de
c ome ntári os nos sc ri pts é uma práti c a re c ome ndáve l porq ue e vi ta
mui tos probl e mas que surge m quando uti l i zamos sc ri pts na li ngua ge m
XHTML .

17.2.1 - O Elemento <noscript>


Alé m de e sc onde rmos o c ódi go de ntro de um c ome ntári o, uma outra
forma de aj udar os brow se rs mui to anti gos se ri a uti l i zar o
el e me nto < nos crip t > para ofe re ce r c onte údos al te rnati vos.

O e le me nto < no s crip t > é usado para c ompe nsar de al guma forma a
fal ta de e xe c uç ão de um sc ri pt. O c onte údo de ste el e me nto se rá
apre se ntado pe l os brow se rs que não re c onhe c e m sc ri pts, mas se rá
i gnorado pe l os brow se rs mai s mode rnos e não i nte rfe re na apre se ntaç ão
da pági na.

17.2.2 - Um exemplo
<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá mundo!")
-->
</script>
<noscript>
O seu browser não suporta
JavaScript!
</noscript>
</body>
</html>

17.3 - Elementos para inserir scripts e código


Ele me nt Des crição
o
<script> Define um bloco que contém um script
<noscript> Define texto alternativo para ser apresentado sempre que o script não é
executado
<object> Insere um objeto na página
<param> Define parâmetros para controlar o objeto
<applet> Desuso. Use <object>

Guia Prático de HTML - Parte 5


Publicado em: 13/11/2006

Compartilhe
21 - GUIA DE REFERÊNCIA RÁPIDA
C omo re sumo de todo o c ódi go HTML apre se ntado até agora, dei xo
al gumas tabe l as de re fe rê nc i a rápi da que pode m se r até i mpre ssas e
guarda das no bol so.

Caract e r ís t icas ge rais de um do cume nt o H TML


CÓ DI GO FUN ÇÃO EXIGE FECH AM EN TO
html bloco interno é considerado documento sim
html
head bloco que define a cabeça do documento sim
title bloco que define o título do documento sim
body bloco interno é considerado o corpo do sim
html

Ap arê ncia d o do cume nt o


CÓ DI GO FUN ÇÃO EXIGE FECH AM EN TO
b bloco em negrito sim
i bloco em itálico sim
u bloco sublinhado sim
font muda as características da fonte sim
pre mantém o texto pré-formatado sim

Queb ra d e linha, p arág raf o s e d ivisõ e s


CÓ DI GO FUN ÇÃO EXIGE FECH AM EN TO
br quebra de linha não
center texto centralizado sim
p parágrafos recomendado
div cria uma divisão sim

At rib ut os d ive rs os
CÓ DI GO ATRIBUTO FUN ÇÃO VAL ORES POSSÍVEIS
p, div align alinhamento letf, right, justify, center
font face fonte nome da fonte
font size tamanho -7 a +7
font color cor ver no tópico de cores

Esp açame nt o e e nt id ad e s
CÓ DI GO FUN ÇÃO EXIGE FECH AM EN TO
&nbsp; espaço simples não é uma tag

O do cume nt o H TM L b ás ico
<html>
<head>
<title>Aqui colocamos o título</title>
</head>
<body>
Aqui colocamos os conteúdos visíveis
</body>
<html>

Ele me nt os d e cab e çalho ( p ara cap ít ulo s ou s e cçõ es )


<h1>Cabeçalho maior</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . . </h4>
<h5>. . .</h5>
<h6>Cabeçalho menor</h6>

Ele me nt os p ara t ex t o
<p>Isto é um parágrafo</p>
<br> (mudança forçada de linha)
<hr> (linha horizontal)
<pre>Isto é texto pré-formatado</pre>

Est ilo s lóg ico s


<em>Isto é texto enfatizado</em>
<strong>Isto é texto forte</strong>
<code>Isto é código de computador</code>

Est ilo s f ís ico s


<b>Isto é texto em negrito</b>
<i>Isto é texto em itálico</i>

L ig açõ e s e ânco ras


<a href="http://www.tiagosouza.com/">Isto é uma Ligação</a>
<a href=" http://www.tiagosouza.com/"><img src="URL" alt="Texto alternativo"></a>
<a href="mailto:tiagocopa@gmail.com ">Enviar e-mail</a>

Uma ânco ra co m no me :
<a name="dicas" id="dicas">Dicas Úteis</a>
<a href="#dicas">Saltar para a Secção de Dicas</a>

L is t a não o rd e nad a
<ul>
<li>Primeiro item</li>
<li>Item seguinte</li>
</ul>

L is t a o rd e nad a
<ol>
<li>Primeiro item</li>
<li>Item seguinte</li>
</ol>

L is t a d e de f iniçõ e s
<dl>
<dt>Primeiro termo</dt>
<dd>Definição</dd>
<dt>Termo seguinte</dt>
<dd>Definição</dd>
</dl>

Tab e las
<table border="1">
<tr>
<th>um cabeçalho</th>
<th>outro cabeçalho</th>
</tr>
<tr>
<td>algum texto</td>
<td>mais texto</td>
</tr>
</table>

Sub jane las ( mo ld uras , o u "f rame s ")


<frameset cols="25%,75%">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frameset>

Fo rmulário s
<form action="http://www.tiagosouza.com/processar.php" method="post/get">
<input type="text" name="lastname" value="Nabo" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Rabanetes
<option selected>Alhos
<option>Cebolas
</select>
<textarea name="Comentario" rows="60" cols="20"></textarea>
</form>

Ent id ad es
&lt; representa o mesmo que <
&gt; representa o mesmo que >
&#169; representa o mesmo que ©

Out ros Ele me nt o s


<!-- Isto é um comentário -->

<blockquote>
Texto citado a partir de uma fonte externa.
</blockquote>

<address>
Endereço (1ª linha)<br>
Endereço (2ª linha)<br>
Cidade<br>
</address>

Das könnte Ihnen auch gefallen