025 guia pratico-do-html-css-e-web-standards

Guia Prático de HTML – Prof. Tiago Daniel de Souza
http://www.tiagosouza.com
-----------------------------------------------------------------------------------------------------------

Guia Prático de HTML

Este Guia foi escrito por Tiago Daniel de Souza
Email: tiagocopa [at] gmail [dot] com
Site do Autor: http://www.tiagosouza.com

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.0 Brazil
License.
http://creativecommons.org/licenses/by-nc-sa/2.0/br

-1-

-----------------------------------------------------------------------------------------------------------

SUMÁRIO

1 . IN T RODUÇÃO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 05

2 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 05

3 . S U A P RI MEI R A PÁGIN A E M HT ML . ........ ........ ....... ........ ....... ... 06
3 .1 - O q ue es tá d en tro de u m a rq u i vo e m HTM L? ! .... ...... ........ ....... 06
3 .2 - Ex p eri m en te você mes mo ...... ........ ....... ........ ....... ........ ....... 06
3 .3 - Ex p l ica ção do Exe m p lo .......... ........ ....... ........ ....... ........ ....... 06
3 .4 - De vem os usa r a ex te nsão .h t m ou . htm l ? ............. ........ ....... .. 07
3 .5 - E d itor es " P uro s" v e rsus W YS IW Y G ......... ........ ....... ........ ....... . 07
3 .6 - FA Q (P e rg u ntas F r eq üe nt es) .. ........ ....... ........ ....... ........ ....... 07

4 . ELE MEN TOS E AT R IBUTOS ........ .......... ........ ....... ........ ....... ..... 08
4 .1 – El eme nt os . .......... ........ ....... ........ ....... ........ ....... ........ ....... 08
4 .2 – A tr i bu tos das Ta gs ...... ....... ........ ....... ........ ....... ........ ....... .. 09
4 .2 .1 - A t rib u tos pod em s e r a p l ica dos à m aio r ia das tag s ....... ........ . 10
4 .3 - De vem os usa r as pas o u p l ic as/a pós tro fos ..... ....... ........ ....... ... 11
4 .4 – Notas Rá p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 11

5 . O CABEÇALHO DE UM DO CUM ENTO H TM L ... ........... ........ ....... .. 11
5 .1 - O El em e nto <h ea d > ( ca be ça lh o do doc u me nto ) ..... ........ ....... .. 11
5 .1 .1 - A In fo r ma ção C o nt id a no E le me nto <h ea d > ....... ........ ....... 11
5 .1 .2 - E lem e ntos de c ab eç al ho ( <hea d > ) ...... ............ ........ ...... 12
5 .1 .3 - A de c la raçã o D O CT YPE ..... ........ ....... ........ ....... ........ ....... 12
5 .2 - O e lem e nto <m et a> .. ........... ........ ....... ........ ....... ........ ....... 12
5 .2 .1 - P ala v ras- cha ve pa ra os m oto re s de p es qu isa ..... ........ ....... . 12
5 .2 .2 - Va lo res des con h ec i dos pa ra o at r ibu to nam e do <m eta > .... . 13

6 . MODIFICAN DO O CO RPO DO DO CUMEN TO .......... ........ ....... ..... 13

7 . ELE MEN TOS B ÁSI COS DA LIN GU AGEM H TML ...... ........ ....... ...... 14
7 .1 – Ca b eç al hos .... ..... ........ ....... ........ ....... ........ ....... ........ ....... . 14
7 .2 – Pa rág r af os . ........ ........ ....... ........ ....... ........ ....... ........ ....... . 14
7 .2 .1 - A l i nh am en tos d e pa rá graf o ....... ........ ........ ....... ........ ...... 14
7 .3 - C ria nd o u ma di vi são ..... ....... ........ ....... ........ ....... ........ ....... . 15
7 .4 – Q ue br as d e L i nha ..... ........... ........ ....... ........ ....... ........ ....... 16
7 .5 – Co men tá r ios ......... ........ ....... ........ ....... ........ ....... ........ ...... 16
7 .6 – I n fo rm aç ões Úte is .... .......... ........ ....... ........ ....... ........ ....... . 16
7 .7 – L ista d e e le me ntos bás icos d o HTM L . ..... ........ ....... ........ ....... ... 17

8 . FOR MAT AÇÃO DE TE XTO . ...... ........ ....... ........ ....... ........ ....... .... 17
8 .1 – El eme nt os pa ra f o rma ta ção d e te xto ...... ........ ....... ........ ....... 17
8 .2 – El eme nt os pa ra o " ou tp ut de có di go de com p utad o r" .... ........ ... 18
8 .3 – El eme nt os pa ra c i taç ões e li stas de def i n iç ões ........ ........ ....... 18

9 . LI GAÇÕES DE HIPE R TE XTO ( "LIN KS") ........ .......... ........ ....... ... 18
9 .1 - Li n ks i n te rn os ....... ........ ....... ............... ........ ....... ........ ...... 19
9 .2 - Li n ks l oc ais o u re la ti vos ....... ........ ....... ........ ....... ........ ....... . 20
9 .3 - Li n ks e xte r nos ...... ........ ....... ........ ....... ........ ....... ........ ....... 20
9 .4 - Al vo ( ta r get ) ....... ........ ....... ........ ....... ........ ....... ........ ....... . 20
9 .5 – El eme nt os pa ra f a ze r l i gaçõ es . ............ ........ ....... ........ ....... .. 20

1 0 . LIS T AS ...... .......... ........ ....... ........ ....... ........ ....... ........ ....... ... 21

-2-

-----------------------------------------------------------------------------------------------------------

1 0. 1 - L is tas Não O r de na das ........ ........ ............... ....... ........ ....... .. 21
1 0. 2 - L is tas Or de na das .... ........... ........ ....... ........ ....... ........ ....... . 21
1 0. 3 – L istas de De fi ni çõ es ........... ........ ....... ........ ....... ........ ....... 21
1 0. 4 – E l em e ntos pa ra L is tas ........ ........ ....... ........ ....... ........ ....... . 22

1 1 . I MAGENS .... ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 22
1 1. 1 - Ta ma nh o de exi b i ção da im a ge m . ....... ........ ....... ........ ....... .. 23
1 1. 2 - Tex to a lt er nat iv o ....... ........ ........ ....... ........ ....... ........ ....... . 24
1 1. 3 - Bo rda da i ma gem ......... ...... ........ ....... ........ ....... ........ ....... 24
1 1. 4 - A l inh am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24
1 1. 5 - Es paç am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24
1 1. 6 – E l em e ntos re la ci ona dos c om im ag en s ............... ........ ....... ... 25
1 1. 7 – Fu nd os de Pá gi na .. ............ ........ ....... ........ ....... ........ ....... 25
1 1. 7. 1 - O a tr i bu to bgc ol or do e le me nt o <bo d y > . .......... ........ ...... 25
1 1. 7. 2 - O a tr i bu to bac k g ro un d ...... ........ ....... ........ ....... ........ ..... 26
1 1. 8 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 26

1 2 – CO RES .... .......... ........ ....... ........ ....... ........ ....... ........ ....... .... 27
1 2. 1 - Fo rm as d e ex pr i m i r co res ...... ............ ........ ....... ........ ....... .. 27
1 2. 2 – Nom es de co res .. ............. ........ ....... ........ ....... ........ ....... .. 27
1 2. 3 – Co res s eg u ras d a We b ........ ........ ............... ....... ........ ....... 28
1 2. 4 - Fo rm as d e ex pr i m i r o s va lo res das c or es .... .......... ........ ....... . 30
1 2. 5 - Ma is d e 1 6 m i lhõ es d e co res d if e re ntes .. ............. ........ ....... . 32
1 2. 6 - Ma is n om es de c or es ........... ........ ....... ........ ....... ........ ....... 32

1 3 . EN TI DADES , ACEN T U AÇÃO E CARACT ER ES ESP E CI AIS .... ....... 32

1 4 . TABE LAS ........ ...... ........ ....... ........ ....... ........ ....... ........ ....... .. 33
1 4. 1 - Es paç am en to en t re c é lu las ..... ........... ........ ....... ........ ....... .. 35
1 4. 2 - P re en c h im en to d e c é lu las .... ........ ............... ....... ........ ....... 35
1 4. 3 - La r gu ra de cé lul as e ta b elas .... ................... ....... ........ ....... . 37
1 4. 4 - Uso d e ta b el as .... ........ ....... ........ ....... ........ ....... ........ ....... 37
1 4. 5 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 37
1 4. 6 – E l em e ntos re la ti vos a tab e la ..... ....... ........ ....... ........ ....... ... 37

1 5 . FO RMUL ÁRIO S ..... ........ ....... ........ ....... ........ ............... ....... .. 38
1 5. 1 – C ri ar Fo r mu lá r ios .... ........... ........ ....... ........ ....... ........ ....... 38
1 5. 2 – i np ut .. ......... ...... ........ ....... ........ ....... ........ ....... ........ ...... 38
1 5. 3 - "R adi o Bu tto ns" ...... ............ ........ ....... ........ ....... ........ ...... 39
1 5. 4 – C hec k box es ....... ........ ....... ........ ....... ........ ....... ........ ....... 39
1 5. 5 - O a tr i b uto a ct io n e o bo tão de s ubm iss ão ......... ........ ....... .... 39
1 5. 6 - E lem e ntos pa ra F or m ulá r ios .... ........... ........ ....... ........ ....... . 40

1 6 . F R AMES H TML ..... ........ ....... ........ ....... ........ ....... ........ ....... ... 40
1 6. 1 - Va nta ge ns e des van ta ge ns d as mo l dur as ....... ....... ........ ....... 40
1 6. 2 - O E le me nt o f ram ese t .......... ........ ....... ........ ....... ........ ....... 40
1 6. 3 – O Ele me nt o f ram e ...... ........ ........ ....... ........ ....... ........ ....... 41
1 6. 4 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 41
1 6. 5 – E l em e ntos pa ra F ra mes ...... ........ ....... ........ ....... ........ ....... . 41

1 7 . INS ERÇÃO DE SCR IP TS ....... ........ ....... ........ ....... ........ ....... ... 41
1 7. 1 - Ins er i r um s cr ip t nu ma p ág i na HTM L .... ........ ....... ........ ....... . 41
1 7. 1. 1 - Um exe m p lo p rá t ico ....... ........ ....... ........ ....... ........ ....... 42
1 7. 2 - Como li da r c om os b ro wser s an ti gos ..... ........ ....... ........ ....... 42
1 7. 2. 1 - O E le me nto <n osc r i pt > ...... ............ ........ ....... ........ ...... 42
1 7. 2. 2 - Um exe m p lo ...... ............ ........ ....... ........ ....... ........ ...... 42
1 7. 3 - E lem e ntos pa ra ins er i r scr i p ts e có d ig o ...... ......... ........ ....... . 43

-3-

-----------------------------------------------------------------------------------------------------------

1 8 . O UT RAS POSSIBILI DADES ...... .......... ........ ....... ........ ....... ..... 43

1 9 . COLOCAN DO S EU S IT E NO AR ............. ........ ....... ........ ....... ... 43
1 9. 1 – Ist o é t u do q ue eu pr ec iso ? ! ........ ...... ........ ....... ........ ....... . 44
1 9. 2 - Como e u f aço en v io os a r qu i vos do me u s ite ? ! ...... ........ ....... . 44

2 0 . H TML A V AN ÇADO ........ ........ ........ ....... ........ ....... ........ ....... ... 45
2 0. 1 - Fo l has de Est i lo ( C SS ) . ....... ........ ....... ........ ....... ........ ....... . 46
2 0. 2 – T emp l ate s . ......... ........ ....... ........ ....... ........ ....... ........ ...... 47
2 0. 3 – Ac ess i bi l i da de .... ........ ....... ........ ....... ........ ....... ........ ....... 47
2 0. 4 – Si tes di nâ mi cos o u a ut oma ti za dos ....... ........ ....... ........ ....... . 48
2 0. 5 - We b sta n da rds e va li da ção ...... .................... ....... ........ ....... 49
2 0. 5. 1 - O q u e ma is há pa ra co nh e ce r s ob re HTM L ? ! ..... ........ ....... ... 49
2 0. 5. 1. 1 - L e ga l !! Posso a nu nc iar ? ! ... ........... ........ ....... ........ ...... 50
2 0. 5. 1. 2 - Va l i daçã o? ! Po r q uê d ev e r ia eu faz e r is to? ! ..... ........ ...... 50

2 1 - GUI A DE REF ERÊN CI A R ÁPI DA .......... ........ ....... ........ ....... ... 51

2 2 – RE FER ÊN CI AS COM PLE TAS DE H TM L 4 .0 1 ...... ........ ....... ...... 53

2 3 . AT RIBUTO S E SPE CI AI S DE HT ML 4 ...... ........ ....... ........ ....... ... 55
2 3. 1 - A tr ib u tos i n tr ín se cos ......... ........ ....... ........ ....... ........ ....... .. 55
2 3. 2 - A tr ib u tos n u cle ar es ou int r ín sec os (" Co r e At tr ib u tes ") ........ .... 55
2 3. 3 - A tr ib u tos l i n güí st i cos ......... ........ ....... ........ ....... ........ ....... . 55
2 3. 4 - A tr ib u tos de tec la do .. ......... ........ ....... ........ ....... ........ ....... 56
2 3. 5 - E ven tos de jane la ... ........... ........ ....... ........ ....... ........ ....... . 56
2 3. 6 - E ven tos pa ra fo r mu lá ri os .... ........ ............... ....... ........ ....... . 56
2 3. 7 - E ven tos de t ecl a do ....... ..... ........ ....... ........ ....... ........ ....... . 56
2 3. 8 - E ven tos do mou se ...... ....... ........ ....... ........ ....... ........ ....... . 57

24. O P RESEN TE E O F UT URO DO M AR KUP ........ ...... ........ ....... ..... 57
2 4. 1 - O con só rc io da We b ..... ....... ........ ....... ........ ....... ........ ....... 57
2 4. 2 - S GML e HTML ..... ........ ....... ........ ....... ........ ....... ........ ....... 57
2 4. 3 – XML ...... ............ ........ ....... ........ ....... ........ ....... ........ ....... 58
2 4. 4 - R DF e S y nd i cati o n .. ............ ........ ....... ........ ....... ........ ....... 58

2 5 . DI CAS FIN AI S ...... ........ ....... ........ ....... ........ ............... ....... .. 58

2 6 . CON CL US ÃO . ....... ........ ....... ........ ....... ........ ....... ........ ....... ... 62

-4-

-----------------------------------------------------------------------------------------------------------

1. INTRODUÇÃO
A s p essoas im ag i nam q ue é m u it o d i f íci l co nst r uir um s ite . I sto não é
v e r dad e !! Q ua l qu e r um p o de a pr e nd e r c om o cons t ru i r u ma pá g ina . S e v oc ê
c on ti n ua r l e n do, esta rá ap to a co nst r u ir um ra pid a me nte, q u an do me nos
es p era r.

O u tro s pe nsa m - erroneamente - qu e s er á n ec essá rio so ft war es a van ça dos e
c ar os par a c ons t ru i r w e bsi tes. É ve r da de q ue ex ist em m u itos so f twa res
c ap az es de c r ia r u m w e bsi te par a vo cê. Al g u ns ma is f e c had os q u e o ut ros.
Mas, s e voc ê pr ete n de tr i lh ar o ca m in ho c e rto, de ve rá cr ia r vo cê mes mo o
w e bsi te. Fe l i zm en te, i sto é s i mp l es é v ocê já te m a sua d is pos iç ão to dos os
so ft wa res q u e n ece ssi ta.

O o bj et iv o d es ta m in ha a pos t il a é fo rn ec e r os c onh eci me nto s b ás icos qu e
p e r mi ti rão c ons tr u i r um we bs it e d e fo rma co r ret a. A ap ost i la pa rt e d a estac a
z e ro e n ão r e qu e r q ual q u er con he c im en to pr é v io d e pro g ram ação.

O b v ia me nte , a a pos ti l a não e ns in a tu do. D ia nt e d isto, se rá n e cessá r io q u e
v oc ê se em p en he , pr at i qu e e co nso li d e os e ns ina men tos a q ui c on ti dos . Mas,
n ão se abor r eç a, p ois a p re nd e r c om o co nstr u i r u m w eb s ite é bem d i ve rt i do e
b ast an te sa tis fa tó rio q u an do v ocê tr i lh a o ca m in ho c ert o do a p ren d i za do.

O K. Ch e ga d e c on ve rsa. Va mos co me ça r...

2. SOBRE O HTML
O H T ML é u ma L in gu ag e m de m a rca ção d e te xto . M ais e sp e ci f i cam en te ,
u ma l in g uag e m de mar ca ção d e h i p er tex to. P or ta nto, a nt es d e co me ça r a fa la r
d e HTM L, va mos e nt en d er o q ue v em a s er u ma l in g uage m d e mar ca ção.

L in gu ag en s d e ma rc a çã o (markup languages em inglês) s ão l in g ua ge ns q u e
c om b in am t ext o com i n fo r maçõ es ex tras sob r e o tex to. Essa i n for m ação ex tr a
p o de se r re p res en ta da po r d i ver sos s ím bol os o u pa la v ras- cha ve d if e re ntes,
d e pe n de n do da l i ng uag e m d e mar ca ção com q u e est i verm os tr ab alh an do.

O H T ML n ão e ra um a l i ng uag e m d e for m ata ção d e t extos q u alq ue r, e la
p oss i bi l ita va l i ga r t extos q ue esta va m nu m c om p uta dor a te xtos q u e e sta va m
n u m o ut ro c o m pu ta do r, usa n do co mo me io a i nter n et. O pr oc essa do r e
v is ua l iz ad or d e HTML são c ham a dos de n a ve ga dor , pe la car ac te r íst ic a d o
h i p er tex to q u e p er m ite ao usu ár io " na da r" n a i n for maç ão.

O na ve ga do r (também chamado de browser) , na da ma is faz d o q ue ab r i r
a r qu i vos de co m pu tad o r e, ca so esses a rq u i vos co nt en ha m cód i go s HTML ,
i n te r pr etá -los se g un do o pa d rão d o h i pe rt ex to e ge ra r a " pág i na h t ml ", q ue é
a m an i fes ta ção g rá f ica dos có d ig os - aquilo que você usualmente vê quando
navega pela internet . Po r co nv e nçã o, os nom es d os a r qu i vos em HTM L
t e rm i nam c om .h tml. Ex em p lo : ind ex .h tm l, fo o. ba r.h tm l e e tc. hm l
(existem também arquivos html que terminam com .shtml e outras extensões
malucas) . O bs e rv e qu e esses ar q u i vos pod e m es ta r t an to n o co m pu ta dor d o
u suá r io que usa o nav e ga do r q ua nto e m ou t ros co m pu ta do res : o nav e gado r é
c ap az de a b ri r es ses a r qu i vos d es de q ue e les est eja m ac ess íve is - as ta is
p á gi nas w eb .

-5-

-----------------------------------------------------------------------------------------------------------

3. SUA PRIMEIRA PÁGINA EM HTML
U ma pá gi na HTML é di v i d id a e m d u as par tes, a c abe ça e o c orpo . Na cab eç a
(ou cabeçalho) sã o de f in i dos os a tr i b utos p r i nc i pa is d o do cu men to, co mo o
t í tu lo e as p a lav ras -ch av e. O corp o c on tém a pa rt e v is í ve l do d o cu me nto, i.e,
a q ue la qu e v oc ê ve rá p r oc essa da em s eu n av e ga dor . Ex is te a i nd a uma r eg i ão
d a pá gi na q u e es tá ta nto fo ra da ca be ça qu an to do co r po (não! não é a falta
de juízo!) , m as não i re mos e nt rar ne sse m ér i to.

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

• U m a r qu i vo HT ML é con st it u íd o po r tex tos qu e de f i nem os e le me nt os da
l i n gu ag em HTM L usa nd o "etiquetas de marcação" ;

• A s et i qu etas de mar ca ção dão ins tr u ções a o nav e ga do r so b re a
es t ru tu ra d o doc u men to e so bre a f or ma d e co mo a pá g ina de ve se r
a p rese nt ada gr af i came nt e;

• O s ar q ui vos HTM L po de m se r es c ri tos usa n do u m si m p les e d it or de
t ext os e seu s no mes de ve m possu i r a ex te nsão .h tm l

3.2 - Experimente você mesmo

Bo m, se vo cê u t il i za o Wi n dows (95, 98, 2000, XP, etc) , i n ic ie o Bloc o d e
Not as (Notepad).

A g ora d ig i te o se g u in te tex to:

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

S al ve este a r qu i vo com o no me in d ex .h tm

A b ra o se u na v ega do r. A go ra a br a o ar q ui vo qu e vo cê sa lvo u a cim a, c ha mad o
in de x .h tm u t i l iz an do a s o p ções d o m en u o u a r rast an d o o í co ne d o a r qu iv o
p a ra d en tro da ja ne la d o na ve gad o r. O bse rv e o r esu lta do.

3.3 - Explicação do Exemplo

A p r i me i ra t ag e m s eu d o c um en to HTML é <h tm l>. Est a t ag d e fi n e o i n íc io d e
u m d oc ume nt o HTM L e i n d i ca ao na ve ga do r q ue to do cont eú do p os te r io r d e ve
se r t ra ta do c omo u ma sé r ie de có d ig os HTM L. A ú lt ima ta g e m se u doc um e nto
d e ve rá se r < /h tm l>. Es ta ta g i n d ica ao n av eg ador q ue é o f i m d e se u
d o cu me nto HTM L.

O tex to e nt r e as ta gs <h ea d> ... < /h ea d> é a in fo r ma ção d o ca b eça lh o.
Ne nh u ma in fo r ma ção c on ti da no c ab eç al ho é exi b i da na jan el a do na v ega do r.

-6-

-----------------------------------------------------------------------------------------------------------

O te xto ent r e as ta gs < title > ... < /title> é o t ít u lo de se u do cu me nt o. O
t í tu lo se rá e xi b i do na l e ge n da d o na v ega do r, n a pa rt e d e c i ma do b ro wse r.

O t exto ent r e as t ags ... < /bod y> s ão as i nfo r maçõ es que ser ão
e xi b i das na p ág i na.

O tex to e ntr e ... f i ca rá c om o est i lo Ne g ri to (Bold)

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

O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nsão . h tm l, mas a
e xte nsão .h tm a i nd a é u t il i za da. Est e f ato é uma he ra nç a dos t e mp os (pré-
históricos no que diz respeito à Internet) d o M S- DO S e d o W ind ows 1 6 b its ,
e m q ue os no mes dos a rq u ivo s t in ha m no m áxi mo 8 ca rac te res e as su as
e xte nsõ es n ão p od iam te r ma is d e 3 ca rac te r es.

Essas de f ici ê nc ias, q ue no p assad o o br i ga ra m a usa r a ex te nsão . h tm em v e z
d e .h tm l já fo ra m e lim i na das. Po r isso de ve mos usa r a ext ensão . h tm l, a não
se r q ue ex ist a u ma b oa ra zão pa ra voc ê esta r u t i li za n do . h tm (pouco
provável).

3.5 - Editores "Puros" versus WYSIWYG

Ex is te m duas fo r mas d e s e cr ia r u m te xto fo r mata do at ra vés d e lin g ua ge ns d e
m a rca ção. A p r im e ir a c ons is te em es cr ev e r o tex to, usa n do as in st ru çõe s d a
l i n gu ag em , n u m e d itor d e te xto p u ro. E m se g ui da , u sa-se o pr oc essa do r d e
t ext o pa ra p r od u z ir o t ext o fo r ma tad o.

A o ut ra ma ne i ra é usa r u m e d it or d e text os WY SIWY G ( What You See Is
What You Get - O Que Você Vê É O Que Você Tem ). A pesa r d a s i gla se r
c om p r id a, o c on ce it o é s im p les: esse t i po d e p ro g ram a é co mp ost o po r u m
e d ito r d e t ext o qu e t am b ém é u m pr oc essa do r de te xtos fo r mata dos. A
d i f er en ça aq u i é q ue o tex to que o us uá ri o es tá e d it an d o e vis ua l iz an do não é
o t ext o p uro, mas s im o t exto já f o rma ta do g r af i cament e, o u s ej a, o qu e v oc ê
v ê é o qu e vo cê te m.

Vo cê p ro vav e lm en te já uso u e d it or es desse t ip o. O s e d ito r es c om o o Word , o
AbiWord e o OpenOffice Writer são W YSIW YG e os doc u me nt os q ue eles
g e ra m ut i l iz am L ing ua g ens d e m a rcaç ão .

3.6 - FAQ (Perguntas Freqüentes)

De p o is q ue eu ed ite i m eu a rq u ivo H TM L, eu n ão co ns igo v is ua liz ar o
re su ltad o e m m eu na ve ga do r. Po r q uê? !
Ve r i fi q ue se vo cê sa lv ou o a rq ui v o co m o n om e c or reto e q ue s ua ex te nsão
se ja . h tm. C on f ir a t am bé m em s ua bar r a de e nd e re ços do na v ega do r,
v e r if i qu e qu an to ao d ir e tór io se es tá co r re to.

Qu a l nav eg a do r eu d ev o u tiliz a r? !
Vo cê po de u t i li za r qual q u er b rowse r, co mo o I nte r net Ex p lo re r, Mo z il la, O per a,
e tc. .. pa r tic u la rm en te r ec om en do o F i re fox e o In te rne t Ex pl or er.

-7-

-----------------------------------------------------------------------------------------------------------

P o rq ue u tiliz am os ta gs c o m le tras m inú sc u la s?!
E m HTM L os nom es das tag s e el e me ntos po de m se r es cr it os ta nto com l et ras
m a iús cu las q ua nto com le tr as mi n ús cu las, t an to q ue é a m es ma co isa
q u e . S e v oc ê obse r va r e m t ut or ia is en co nt ra dos p e la We b, v ai no tar q u e
os m ais a nt i gos ge ra lm e nte ut i liz am le tr as m a iús cu las p ara es c rev e r os no mes
d as ta gs, m as os mai s mo de rnos ut i l iza m e xc lu si va ment e le tras m i n úsc u las.
Nes ta m i nha a post i la u t i li zo se mp r e l et ras m i n úsc u las p or q ue ex ist e u ma raz ão
m u it o fo rt e p ar a isso.

A nov a ge ra ção do H TML é u ma a p l ic açã o do XML e é d es i gn ada p o r
XHT ML. O XHT ML é a m el ho r l i n gu ag em p a ra se c r ia r p ág i nas p ar a a We b,
m as é mais r est ri ta d o q ue o HTM L (“rouba” algumas das liberdades que o
HTML oferece) . A o co nt rá r io d o q u e aco nte ce em HTM L, e m XM L as et i qu et as
 e re p rese nt am e l em e ntos d ife r en tes, vist o q ue em XH T ML f o i
a dot ad o um a c on ve nç ão se g und o a q ual to da s a s e tiqu e tas de ve m s e r
e s c ritas c o m le tra s m in úsc u la s. Por est e mo ti vo é e xt re ma men te
r e com en dáv e l qu e s e e sc re va to das as e ti q u etas com le tra s m inú sc u las.
D es te m odo, vo cê es ta rá a d qu i rin d o bo ns m o dos e qu ase não te rá tra ba l ho de
c on ve r te r su as pá g i nas HTM L pa ra X HTML.

4. ELEMENTOS E ATRIBUTOS
4.1 - Elementos

U m e le men to é um a es tr ut u ra se mâ nt ica, c om pos ta de ta g d e ab e rtura,
c on teú do e ta g d e fe c ha me nto .

O s doc u men tos HTML sã o s im p les a rq u ivos de te xto q ue co ntê m "tags de
marcação" . Ess as et iq u etas d efi n em os e le me nt os da l in g ua gem HTM L e os
se us c on teú d os. A lis ta se g ui nt e i n d ic a a l g um as d e suas c ara ct er íst i cas :

• A s "t ags de m ar ca ção" d o HTML são usa das p a ra d ef i nir os e le men tos.

• A s ta gs HTM L esc re v em -se ut il i za n do os car ac te res < e > , e nt re e les o
n om e do ele me nt o e os se us at r ib u tos.

• A p r i me ir a t ag do pa r é a ta g de i n í ci o (ou de abertura) e a s eg un d a d o
p a r é a ta g d e f i m (ou de fechamento) .

• T ud o o q ue se en co nt ra r e nt re a s t ags de i n íc io e de fim fa z em pa rt e d o
c on te ú do do e le me nt o.

• E m XHTM L as ta gs d ev e m s er esc r it as s emp r e co m l et ras mi nú sc u las, e
as ta gs e não re p resen ta m o mes mo e le men to.

Vo cê se lem b ra de nosso p ri me i ro ex e mp lo m ost ra do ? !

<html>
<head>
<title> Título da Página </title>
</head>
<body>
</body>
</html>

-8-

-----------------------------------------------------------------------------------------------------------

Es ta pa r te a ba ixo é um e le me nto HTM L:

Este texto está em negrito

Re pa r e a l gu ns as pe ctos do có d ig o ac i ma :

• Es te e le men to in ic ia c om a t ag : 
• O co n te údo do e le m en to é es te : Es te tex to es tá em ne g rito
• O el em en to te rm in a co m a ta g f in al : 

O p ro pós ito da ta g é co lo ca r o con teú d o d o e lem e nto HTM L e m n e gr i to
(bold)

Um e x emp lo m a is co m p le xo

Es te ex em pl o a bai xo ta m bé m é um e le me nto do HTML (mais complexo) :

<body>
</body>

Es te e le men to HTM L in ic ia com t ag e te rm in a co m a ta g < /bo dy>

O p ro pós i to da ta g é d e f in i r o c o nte ú do p r i n ci pa l, o co r po d o
d o cu me nto.

4.2 – Atributos das Tags

T a g é um c ó di go usad o pa ra ma rc ar o i níc io e, o nde f or r e que r i do, o fim d e
u m e le men to HTML. H á, co mo ex post o a c im a, ta gs de ab e rt u ra e d e
f e cha me nto. Um a t ag d e a b er tur a é re p rese nt ada po r s in a l d e m e no r ( < ),
u m no me d e e lem ento HT ML, e u m s in a l d e m a io r ( > ) (ex. ) e d ev e
se r co lo cad a i me d iata me nt e ante s do in íc io d o cont eú do do el e me nto. Um a
ta g de f ec ha m en to se di fe r enc ia de uma ta g de ab e rt u ra ape nas po r uma
b a rr a ( / ) an tes do n o me do e le m en to (ex. ) e d ev e se r co lo ca da
i m e dia ta men te ap ós o f im do c on te ú do d o e l em en to.

O s Atribu to s se r ve m p a ra d e fi n ir u ma pro pr i e da de de u m e le men to HTM L. O s
a tr i bu tos HTM L de ve m s e r co locad os se mp re n a ta g d e a be rtu ra, l o go a pós o
n om e do e le me n to, p r e ce d i do d e u m es pa ç o e é com p osto d e u m n om e d e
a trib uto, u m s ina l d e igu a l ( = ) e u m va lo r de a tribu to, c er ca do po r
a sp as d upla s ( " ) ou s i m pl es ( ‘ )

A ta g <bod y> de f ine o co rpo ( body ) de um a pá gi na HT ML. No ex em pl o
se g u in te ad i c io ne i o a tr i bu to bg c o lo r (que significa "background color", ou
cor de fundo) pa ra i nd i ca r mos qu e q ue r emos qu e a pá g ina f iq ue com u ma c or
v e rm e lha em s eu p lano de fu n do.

<html>
<body bgcolor="red">
Esta é a minha primeira página da web.
Este texto está em negrito
</body>
</html>

Va mos cons i de ra r a go ra a ta g < tab le>, q u e de f ine u m e le me nt o d e um a
t ab el a. Ao j un ta rm os o at ri b uto bo rde r (que significa borda) co m o val o r

-9-

-----------------------------------------------------------------------------------------------------------

a p rese nt ado a se gu i r, es tam os d i ze n do ao nav e gad o r pa ra n ão co lo car as
b o rd as da ta be la ( <table border="0"> indica uma espessura nula para a linha
de contorno da tabela):

<html>
<body>
<table border="0">
<tr>
<td>
Esta é a minha primeira tabela.
</td>
</tr>
</table>
</body>
</html>

Já no exe mp l o a ba ixo es ta mos diz e nd o ao na ve ga do r pa ra des en ha r uma l i nh a
d e c on to rno c om es p ess ur a 2 ( border="2" )

<html>
<body>
<table border="2">
<tr>
<td>
Esta é a minha segunda tabela.
</td>
</tr>
</table>
</body>
</html>

O s at r ib utos s em p re e nt ra m em pa res n om e/ va lo r (name/value), ass im :
n am e="v alu e"

N o ta 1 : Os at r i bu tos só po de m a pa re ce r nas t ags de i n í ci o. É p ro i bi do co loc ar
a tr i bu tos nas ta gs de f e cha me nto.

N o ta 2 : Pa ra ga ran ti r a co m pa ti b i li da de c om a l in g ua ge m X HTML, uti l i ze
l e tras m inú sc u las p ar a es c re ve r o nom e dos a tr i b utos, e s em pre co lo q ue os
v a lor es e ntr e as pas.

4.2.1 - Atributos podem ser aplicados à maioria das tags

Vo cê no rma l me nte usa rá a tr i b utos co m m ai s fr e qü ên cia e m a l gum as t ags, ta is
c om o a tag b od y e ra ra me nte u sa rá e m o ut ras, com o por exe m p lo, a ta g br
q u e é u m c om an do pa ra pu la r de l i nha e não p re c isa d e ne nh u ma i nfo r ma ção
a d ic io na l.

A ssi m co mo ex ist em m u it as ta gs, ta mb ém e x iste m m u it os at r ib u tos. A l gu ns
a tr i bu tos são e mp re ga dos em ta gs esp ec íf i cas en q ua nto ou tr os s er ve m p a ra
v á rias ta gs. E v ic e-ve rsa : a l gum as ta gs p o de m co nt e r som en te u m t i po d e
a tr i bu to, en q ua nto o ut ras po de m co nt e r vá ri os t i pos.

I sto po de p a re ce r um po u co co nf uso, mas à m e di da q ue vo cê f o r p rat i can d o
v a i cons tata r q ue t u do é f ác i l e ló g i co, b em co mo vai ve r i fi ca r as in úm er as
p oss i bi l i dad es qu e os at r i bu tos o fe re ce m.

- 10 -

-----------------------------------------------------------------------------------------------------------

4.3 - Devemos usar aspas ou plicas/apóstrofos (escrevemos
"texto" ou 'texto')?

A ca ba mos d e v er q ue o s val or es dos at r i bu tos d ev em se r se mp r e co loc ad os
e nt r e as pas. No rm al m en te u t il i za mos as as pas no r mais ( " ), mas os
a pós tro fos ( ' ) ta m bém s ão p erm i t ido s.

E m al g uns c asos, o val o r do at r ib u to co nt ém o p róp rio ca ra ct er e as pas. Num a
s it ua ção dess as, de ve mos usa r a pós tro fos (que aqui funcionam como aspas
simples) pa ra co lo ca r e m to rn o d o v alo r do at r i bu to, ass im :

a lt ='E le disse : " Nã o !" '

4.4 – Notas Rápidas

• A s Ta gs HTM L são ut i l iz ada s pa ra ma rca r e l em en tos HTM L. E las estão
c e rca das pe los do is ca ra cte re s < (menor que) e > (maior que)

• A s ta gs no rm a lm en te a pa re ce m e m par es, c om o e 

• A p ri me i ra ta g e m um pa r é sem p r e a ta g d e i ní c io, a se g un da t ag do
p a r é a ta g d e f i m

• O tex to e ntr e o co m eço e o fi m da ta g é o co nt eú do do e le me nto .

• HTM L nã o é sensitive , o u s eja , é a m es ma co isa q u e 

• S e p or a caso vo cê es c re ve u os c ód i gos HTM L e rr ad o - por e xe mp lo
>b> i nv és d e - não se d es esp e re, p o is o máx i mo q ue p o de
a con te ce r é o se u nav e ga do r int e rp re ta r su a pá gi na d e fo r ma di f e re nte
d o es pe ra do e des en há- la de um j e ito m al uc o.

5. O CABEÇALHO DE UM DOCUMENTO HTML
5.1 - O Elemento <head> (cabeçalho do documento)

O e le me nt o <h ea d> co nté m i n f or ma ção d e car ac te re ge ra l, ta mb é m
d es i gn ada p o r me ta- in fo r ma ção, s ob r e o co nt eú do do d oc um ent o e so b re a
f o rma como e le de ve se r a p resen ta do.

P od e mos di z e r qu e o t e rmo m eta- i nf or ma ção ( ou meta-dados ) s ig n i f ica da dos
q u e d esc rev e m ou tro s d ad os ou in fo r ma ções.

5.1.1 - A Informação Contida no Elemento <head>

O s el em en tos co nt i dos d en tr o do e le me nto <h ea d> n ão s ão exi b i dos n a te la
d o na ve gad o r.

O pa d rão HTM L estab e le ce qu e só u m peq u en o nú me ro de e lem e ntos pod e
a pa re ce r d e nt ro do ca b eça l ho. E les são : <base >, < link>, < meta> ,
< title> , <s t y le> e <s c rip t> .

- 11 -

-----------------------------------------------------------------------------------------------------------

A co nst ru ção se r ia o se g u in te :

<head>
Aqui temos algum texto
</head>

Nes ta si tu aç ão ac i ma, o nav eg ad or po d e re ag i r de dua s f or mas :

• A p re se nta r o te xto por q ue el e se e nco nt ra d e nt ro de u m e l em ent o 
• Es co nd e o t ext o po r qu e e le pe rte n ce ao cab e ça lho .

S e v oc ê col oc ar um el e me nto não a uto r i zado, co mo <h2 > o u , de nt ro d o
c ab eç al ho, a mai or ia dos nav e gado res va i esc r ev er este e le me nto n a pá g i na.

A p ar en te me nt e, as p esso as qu e são res po nsá ve is pe la con c ep ção dos
b r owse rs a cha m q ue est e gên e ro de e r ros é ac e itá ve l. Es ta e out ras
d e f ic iê n cias dos b rows e rs s ão p a rc ia l ment e r es ponsá ve is pe las m ás p rá tic as
d e co di f ic aç ão a d qu i ri d as p or m u it os c r ia do res de pá gi nas HTM L. U ma das
r a zões q ue l e va ram à c r ia ção d a l i n guag e m XHTML f o i a ne cess i da de d e
a ca ba r co m es tas si tua ções de um a v ez po r to das.

5.1.2 - Elementos de cabeçalho ( <head> )

Elemento Descrição
<head> Contém informação importante a respeito do documento mas que não
deve ser apresentada no corpo da página
<title> Define o título da página
<base> Define um URL base comum para todas as ligações relativas da página
<link> Faz referência a um recurso externo e estabelece a ligação com ele
<meta> Dá informação sobre aquilo que o documento contém

5.1.3 - A declaração DOCTYPE

A d ec la ração DO CTYPE s er ve p a ra i n d ica r o DT D a us ar pa ra val i da r n a
p á gi na. Qua n do ut i l iza da, de ve a pa re ce r lo go n o i níc io da pá gi na , a nt es d o
e l em en to <h tm l>

Declaração Descrição
<!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer
elemento pelo que fica mesmo antes do elemento <html>

5.2 - O elemento <meta>

O e le me nto < me ta> c on té m in fo r maçã o de ca ra cte r e g e ra l (meta-informação )
so b re o do cu me nt o e d e ve s e r c o lo ca do d e nt ro do e l em en to <h ea d>. S ua
f i na l i dad e é fo rn ec er i n fo r maçã o q u e des c re ve o do cum e nto.

5.2.1 - Palavras-chave para os motores de pesquisa

D u ra nt e a lg u ns anos a u ti l iz ação ma is f req ü en te da i n fo r maçã o f o r ne ci da p e lo
e l em en to < me ta> fo i a c ri ação de í n d ices pa ra si tes de bus ca. At ual men te
so me nt e a lg u ns b usc ad o res ai n da usa m esta i n fo rma ção p ar a ind ex ar p ág in as,
e os d e ma io r s uc esso i g no ram e ste e lem e nto. No e n ta nto, h á pa rt es q u e

- 12 -

-----------------------------------------------------------------------------------------------------------

c on ti n uam a s er t i das e m co nsi d er aç ão pe los a g en tes ( robots ) dos b us ca do res,
c om o po r ex em p lo, as i n d i ca ções d a das so br e as pastas em q u e n ão de v e se r
f e ita q ual qu e r i n dexaç ão.

A l g uns s ist em as d e b us ca ( não muitos ) usa m a i n fo r mação co nt id a n os
e l em en to m et a pa ra i n d exa r as pá g i nas. No f ra g men to d e có di g o s eg u in te , o
e l em en to < me ta> co nt ém uma b r ev e d esc r i ção d a pá g ina :

<meta name="description" content="Tutoriais e referências técnicas de HTML, CSS,
JavaScript, XML, XSLT, SVG">

Na par te do c ód i go ab a ixo o e le me nt o <m e ta> con té m u ma p a lav ras -ch av e
p a ra i n dexa r a pá g i na:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">

C o mo ac aba mos de ver , os no mes da dos ao a tr i bu to na m e i n d icam c la ra men t e
a fi na l id ade da in fo rm açã o co nti d a no e lem e nto me ta .

I n f el i zm en te , mu itos c r ia do res de p ág i nas p a ra a Web a b usa ram d o el eme nt o
m et a e usar a m d e fo rm a c on tr ári a à s ua f i loso f ia pa ra e n ga na r os mot or es d e
p es q uis a. E m cons e qü ê nc ia d isso, os s it es d e b us ca p assa ra m a i g nor ar ca da
v e z ma is o e l e me nto < me ta>, o q ue a cab o u d if i cu lt an do to dos aq ue l es q u e
p r et en d ia m us á-l o d e f o rma co rre ta.

5.2.2 - Valores desconhecidos para o atributo name do
elemento <meta>

A l g um as ve z es en co nt ra mos s itu açõ es e m q u e o a tr ib uto na m e d o e le men to
< me ta> co nt ém um v a lor des con h ec i do, co mo no exe m p lo se gui n te :

<meta name="security" content="low">

Nu ma s i tua ção des tas de ve mos i n te r pr etar o e l em ent o m e ta co mo con ten d o
i n fo r maçã o q u e é espe c íf i ca do w e bsi te. Essa i nfo r maç ão po de se r im po r tan te
p a ra o a uto r da pá g in a, mas pro va ve lm en te é i rr el eva nt e p ara os v is ita ntes . É
p oss ív e l qu e essas in fo r ma ções se jam ú tei s pa ra a lgu m so ftw ar e q ue le ia a
p á gi na.

6. MODIFICANDO O CORPO DO DOCUMENTO
C o mo di to a nt er io rm e nte , o e l em en to b od y en g lo ba o c or po do s eu
d o cu me nto H TML. E le p oss ui m u it os a tr ib u tos q ue p ossi b i li tam m o di f ic ar a
a pa rê nc ia d a s ua pág i na, co mo c o r de f un d o o u das let ras. Esse s at r i but os
t am bé m po de m se r u t i li za dos j u nto com o at r ib uto td. A qu i mo st ra rem os
a pe nas os a tr i bu tos qu e i nt e rf ere m n as co res da s ua p á gi na :

• b gc o lo r: de f in e a co r d e f u nd o d e um docu m en to
• te x t: a co r d o tex to
• link : a co r d os l i nks
• a link: a c or dos l in ks at i vos at ua lm en te (a página que você está
visitando)
• v link : co r d os l i n ks já v is it ado s

- 13 -

-----------------------------------------------------------------------------------------------------------

O s a r gu men tos são o n o me ou o n úm er o d e u ma cor , exata m en te co mo n o
c aso d o a t ri b u to c olo r us ado no e l em en to fo n t. Po r ex em p lo:

<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 é u ma p á g in a HTM L o n de o f u n do s erá p r e to, com l e tras c in za s, li n ks e m
v e rm e lho e l i nks a ti vos e m b ra nco. Essas são as d e fi n iç ões glo ba is d e co r p ar a
se u d oc ume nt o, e a q ua l qu er i nst an te v oc ê po d e m u dar as co re s com o
e l em en to fo n t.

7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML
7.1 - Cabeçalhos

O s ca be ça lh os (também chamados de Headings) s er v em pa ra c r ia r t ít u los
d i f er en c ia r as seç ões d a s ua pá g ina . E le s p ossu em se is val or es d i fe re nt es,
se n do qu e a de va lo r 1 é a q ue p oss ui a ma io r fon te e a d e v alo r 6 po ssu i a
m e no r fo nte .

P or exe m plo, usan do o se g ui nt e c ó di go :

<h1> Título 1 </h1>

No c ód i go a ci ma, o HTM L au toma ti ca me nte so lta uma li nh a em b r an co e ntr e
u m t í tu lo e o ut ro.

7.2 - Parágrafos

O s pa rá g raf os são de fi n i dos c om a ta g 

Este é um parágrafo
Este é um outro parágrafo

No có d igo a ci ma, o HTM L a uto ma ti ca me nte a c res ce nta u ma li n ha em b ra nc o
a nt es e d ep o is d e u m p ar ág ra fo.

7.2.1 - Alinhamentos de parágrafo

Vo cê já d ev e te r v isto q u e em cer tos d oc ume nt os o text o a pa re ce o ra a l i nha do
à d ir ei ta, o ra à es qu e rd a, no c e nt ro ou e nt ão oc up ando u ni fo r me me nte o
es pa ço da p á gi na (texto justificado) . Isso po de ser ob t id o fa ci l me nt e e m
HTM L. Ve ja a ta be la ab a ixo :

ELE MEN TO DES CRI ÇÃO
 Alinha o texto à esquerda

- 14 -

-----------------------------------------------------------------------------------------------------------

 Alinha o texto à direita
 Alinha o texto centralizado
 Alinha o texto justificado

Not e qu e e nt r e os de l i mi ta dor es < e > não en co nt ra-s e a pe nas o el em en to
. A lé m d e le, ex ist e o t exto a lign= "a lin ha me n to". D iz em os q u e a lign é
u m at r i bu to d o el em en to p e a lin ha me nt o é o va lo r dess e at ri b ut o. No c aso d e
, o va lo r d o at ri b uto a lig n (que significa alinhamento
em inglês) é j us tif y (justificado) .

O s at r i bu tos, as pa la v ras qu e se g ue m o e l em en to, i nfo r mam o na ve ga do r a
r es pe it o das p ro p ri ed a des q ue os e le me nt os po de m ass u mi r. C o nf uso ? ! P ode
p a re ce r um p ou co co nf uso, mas não é. C o mo d isse a To ya, " Um disco de
banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco,
tamanho, velocidade, etc, tudo isso são atributos. " E e u d i go m a is: se vo cê
c ol oca o dis co n um t oc a- di scos, v oc ê po d e o uv i- lo em d u as o u n o má xi mo t rês
v e lo ci da des. Às ve zes d á p ra o uv i r a o co ntr á rio . Mas se vo cê ar re mes sar seu s
d i scos do Fo fão, ga ran to qu e e les po de rão g i ra r e m mu i tas o ut ras ve lo ci da des .
A ssi m é o HTM L, co m m u itas o pç ões pa ra v oc ê ex i bi r se u te xto.

No HTML, os v al or es dos a tr i bu tos p o de m ser d e f in i dos da fo rm a
a trib uto=v alo r o u atribu tos="v a lo r" (como em align="justify") , q ue é ma is
r e com en dad a.
C o mo v ocê v i u, ne m t od os os có d ig os e m HTM L n ec ess ita m de a tr i bu tos, e m
es p ec ia l os com an dos de mo d if i caç ão d e tex to c om o ne g r ito, i tál i co,
s ub l i nha do, e tc.

Re su m in do, os a tr i b utos d ef i ne m c a ra cte r ísti ca s a d ic ion ai s aos e le me nt os. Nas
se çõ es s egu i nt es v er em os e le men tos c om vá r ios at r ibu tos. Por e xe mp lo, não
a d ian ta di ze r ao s eu na ve ga do r pr a p or um li n k e m algu ma pa rt e d o se u te xto,
é p re c iso di z e r ao na ve ga do r, por ex em p lo, p r a qu e lug a r ess e lin k apo nt a. É
i sso o q ue u m a tr i bu to faz .

7.3 - Criando uma divisão

Ex is te m mo me ntos em q u e que r emos q ue v ár ios pa rá g raf os p oss uam um
m es mo va lo r d e a tr i bu to - centralizado, por exemplo . A o i nv és de es c re ve rm os
a lign= "jus tify " a c ad a a be rt u ra de no vo pa rá gr a fo, po dem os us ar o
e l em en to div, q ue c ria u ma " d iv is ão " n o d o cu me nto n a qu al alg u ns a tr i b ut os
são p rese rv a dos. Ve ja mos o ex em p lo :

<div align="center">

Parágrafo 1
Parágrafo 1
Parágrafo 1


Parágrafo 2
Parágrafo 2
Parágrafo 2


Parágrafo 3
Parágrafo 3
Parágrafo 3

</div>

- 15 -

-----------------------------------------------------------------------------------------------------------

Ex p er i me nte mu da r os at r i bu tos d o al i nh am e nto p ra ve r o q ue a con te ce !! Na
p a rte d e Fo lha s d e E s tilo most ra re i co mo u ti l i zar o e l e me nto d iv pa ra cr i ar
se çõ es ló g ic as e m do cu m en tos.

7.4 – Quebras de Linha

A ta g é u t il i zad a q uan do v o cê q ue r t e rm i na r u ma l i nha , mas não q u er
c om eça r um no vo p ará g ra fo. Com est e com an do você fa z co m q u e oco r ra u ma
q u e bra de li n ha, o n de v oc ê po si c io na r a ta g.

Not e qu e p a ra o e lem e nto não exi st e o co ma n do , ist o é, a
q u e bra de l i n ha nã o ag e nu ma reg i ão d e t ext o d el i mitad a, mas sim n um po nt o
d o tex to. C o mp l ic ado? ! E ntão va mos lá, m a is uma v e z exp l i ca n do de um a
o ut ra fo rma : c oma n dos co mo , e a gem so b re um a re g ião d o
t ext o e pre c isa m se r f e cha dos c om s eus r es pe ct i vos , e ,
p o is do co nt rá r io esse s co man d os a gi rão a té o f im do d ocu m en to. Já o
c om an do de q ue b ra d e l in ha, , e a l gu ns ou t ros at uam som en te n o
p o nto o nd e e les a pa rec e m.

Ve ja o ex em p lo a ba ixo da u ti l i zaç ão d a ta g 

Este é um pará grafo com quebra de linha

A ta g é uma e ti q u eta v az ia, e la não p oss ui tag f i na l.

7.5 – Comentários

A ta g de c om en tá ri o é u t il i za da par a i nse r i r co me ntár ios no c ó di go font e
HTM L. To do ti po de c om en tá ri o é i g nor ado pe lo na ve ga do r, isto é, e le não
se rá ex ib i do na t el a. Vo cê po de ut i l iza r es ta t ag pa ra e xp l ic ar se u có d ig o
f on te ou p a rt e de le , q u e po de rá aj u dá- lo q u an do você est i ve r e d ita n do se us
c ó di gos post e rio r me nt e.



Not e q ue vo cê pr ec isa de u m po nto de exc la ma ção de po is do pa rê nt eses d e
a be rt u ra, e nã o an tes d o p ar ên teses f ina l.

7.6 – Informações Úteis

1 ) Q ua nd o v oc ê esc r ev e r u m text o em HTML , est eja cie nt e d e q ue o t exto qu e
v oc ê está v is ua l iz an do nã o s erá ex i bi do igu al m en te em tod os os na ve ga do res .
A l g um as pess oas poss ue m c om p ut ad or es co m r eso l uçõ es ma io res, out ros
m e no res, tu d o isso in f l ui na qu est ão da ex i bi ção d a pá g i na, o q ue p od e
a con te ce r são os t extos e as jane las qu e po de m se r re d i me nsi ona dos.

2 ) As d if ere n ças n os t ama n hos d as jan e las d os na ve ga do res fa ze m co m q ue o
n ú me ro de c ar ac te res q u e c ab em n u ma l in ha va ri e mu it o. Po r esse mo ti vo não
se r emos cap a zes de co nt ro la r n em o nú me ro de l i nhas n e m os loc ai s e m que
a con te ce m as mu dan ças d e l in ha. Nu nca te nte for m ata r o te xto i nse rin d o
es pa ços ou l i n has va zi as, po r que os res u lta dos não se rão a qu eles q ue v ocê
es p era va.

- 16 -

-----------------------------------------------------------------------------------------------------------

3 ) O HTM L q u an do enc on tr a dois o u ma is es pa ços se gui dos, e le tr ata -os com o
se fosse um ún i co es pa ço. Q uan d o voc ê es c re ve um a s e qüê nc ia d e es pa ços
se g u id os, o r esu lt ado é o mes mo d e es c rev e r um ú n ico es pa ço. E m HTML, as
t ec las Tab e E n te r e qu i va le m a u m es pa ço.

4 ) Se m pr e q u e vo cê q u is e r inse r i r li n has em b ra nc o, ut i li ze a ta g .
Ex is te m p essoas q ue u t i li za m p ar á gr afos vaz i os p ara ob t er o mesm o r esu l tad o,
m as isso es tá er ra do. A ta g de ve s er usa da ap ena s p a ra de f ini r
p a rá gra fos, e o e le men to n ão de ve se r usa do, p o r ex em p lo, pa ra c ria r
l i stas, poi s ex ist em ta gs co nc eb i da s es p ec i f ic am en te pa ra isso. Se m p re qu e
v oc ê p re cisa r de o bte r u ma fo rm ata ção es pe c ial , voc ê d ev e usa r o e le men to
q u e fo i c r iad o p ara esse ef ei to.

5 ) E m m ui tas pá g i nas, os par á gr afos est ão es c ri tos s em a e t i qu eta d e
f e cha me nto () A p esa r dos na ve ga dor es ac e ita re m est a om iss ão, ten ha
se m p re ate n ção p ara f e cha r tod os os e lem e ntos que re q ue rem u ma tag d e
f e cha me nto. Se v oc ê t en ta r va lid a r uma p ág i na q ue co nt en ha est es er ros, v e rá
q u e e la não passa rá n o tes te de v al i da ção.

6 ) Os e le me nt os e <h 1> ... < h 6> o na ve gad o r a d ic io na
a uto ma ti cam e nte um a l i nh a em br an co a ntes do i n íc io e o ut ra dep o is do f im.

7.7 – Lista de elementos básicos do HTML

T AG DES CRI ÇÃO
<html> Define um documento HTML
<body> Define o conteúdo principal, o corpo do documento
<h1> até <h6> Define títulos, de 1 a 6
 Define parágrafo
 Insere linhas em branco, quebra de linha
<hr> Insere uma linha horizontal
<!--> Define um comentário

8. FORMATAÇÃO DE TEXTO
A l i n gu ag em HTM L de f in e vá ri os el em en tos pa ra s e for mata r um t exto , co mo
p o r ex em p lo, esc re ve r e m ne gr i to, it ál i co, s ub l i nha do, e tc . O exe m p lo a ba ixo
m ost ra a l gu ns de les :

<html>
<body>
Este exemplo tem texto em itálico, negrito,
enfatizado, sublinhado e tipo
<code>código de computador</code>
</body>
</html>

8.1 – Elementos para formatação de texto

TAG DESCRIÇÃO
 Define seu texto em negrito
<big> Define seu texto grande
 Define seu texto em itálico
 Define seu texto pequeno
 Define seu texto forte

- 17 -

-----------------------------------------------------------------------------------------------------------

 Define seu texto subscrito (ex: H2O)
 Define seu texto sobrescrito (ex: 152)
<ins> Define texto inserido
<del> Define texto apagado
<s> Desuso. Utilize <del> ao invés
<strike> Desuso. Utilize <del> ao invés
 Desuso. Utilize <styles> ao invés

8.2 – Elementos para o "output de código de computador"

TAG DESCRIÇÃO
<code> Define códigos de texto
<kbd> Define o texto com uma fonte especial determinada pelo navegador
<samp> Define código de computador de amostra
<tt> Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador
<var> Define variáveis
<pre> Define o texto pré-formatado
<listing> Desuso. Utilize <pre> ao invés
<plaintext> Desuso. Utilize <pre> ao invés
<xmp> Desuso. Utilize <pré> ao invés

8.3 – Elementos para citações e listas de definições

TAG DESCRIÇÃO
<abbr> Define uma abreviação
<acronym> Define uma sigla
<address> Define um elemento de endereço
<bdo> Define a direção do texto
<blockquote> Define uma longa citação
<q> Define uma pequena citação
<cite> Define a citação
<dfn> Define um termo de citação

9. LIGAÇÕES DE HIPERTEXTO ("LINKS")
Essa é uma das se ções ma is i mp o rta nt es d es ta a post ila, po is af i na l esta mos
f a lan do de h i p er tex to. Q ue re mos q ue um a pá g ina HTML possa fa ze r re fe rê nci a
a o ut ras pá g inas ht ml ou pa ra qu al q ue r o ut ro ti po de a r qu i vo qu e se en con t re
e m ou tro s l u ga res d a w e b. No jar g ão da i nte r ne t, voc ê q u e r l i ga r ( l i n k) pa r te
d a sua pá gi na co m out ras.

I sso é fe ito d e mo do m u it o s i m pl es com o e l em en to a, c omo s egu e :

<a href="http://www.midiaindependente.org">CMI Brasil</a>

C o mo você d ev e t er p e rc eb i do, o at r i bu d o h ref (Hipertext Reference /
Referência de Hipertexto) i n di ca o e n de re ço da p ág i na q ue vo cê q u e r "l i nka r"
( l i ga r) ao se u do c ume nt o. No ex em p lo ac im a, o texto CMI B ra s il a pa rec e
c om o um a r e fe rê nc ia par a o l i n k. Se vo cê c l ic ar so br e esse tex to, se u
n av e ga dor au tom at i cam ent e ten ta rá a br i r a p ág in a
h tt p :/ /ww w. m id ia i nd ep e n de nte. or g

- 18 -

-----------------------------------------------------------------------------------------------------------

O s e n de re ços s ão es cr i tos na for m a d e URL (Uniform Resource Locators) , q u e
é um a man e ir a q ue in v en ta ram p ar a s e es pe c if i car o cam i nho at é se c he ga r
n u m ar q u ivo qu e est eja n al g um lo ca l da in te r ne t.

O fo r mato d a URL é :

protocolo://nome-do-computador/pastas/arquivo

O p ro toco lo in d ica c omo o n av e ga dor i rá b uscar o ar q ui vo. N om e d o
c o mp u ta do r é aq ue le en de re ço d o t i po w ww. n in g ue m. co m.b r e as pasta s
são os d i ret ór ios d en tr o de sse co m pu ta dor o n de es tão os a r qu iv os. U ma UR L
de um a rt i go do s it e da CMI Br as il é, por e xe mp lo,
h tt p :/ /ww w. m id ia i nd ep e n de nte. or g / pt/ b l ue/2 0 0 4/ 09 /2 90 6 6 9.sh tm l, o nd e
h ttp: // é o p ro to co lo , p t, b lue , 2 0 04 e 0 9 s ão p as tas (uma fica dentro da
outra) e 29 0 6 6 9 .sh tm l é o nom e d o a rqu iv o .

h tt p :/ /
-- - www.m i d ia in d epe n de nt e.o rg
--- pt
-- b l u e
-- - 2 00 4
- -- 0 9
- -- 2 906 69 .sh tm l

L e mb r e-se ta m bém q ue q ua n do v ocê ac essa o en d er eç o
h tt p :/ /ww w. ni n gu em .co m. br , p or e xe mp lo, es tá na verd ad e ve nd o o a r q uiv o
h tt p :/ /ww w. ni n gu em .co m. br / in dex. ht m l. Os ar q u ivos do t i po in d ex .h tm l
se m p re são pr oc u rados pe lo nav e ga do r qu an do vo cê so l ic i ta a pe nas o n om e
d o si te o u u ma pas ta d e um c omp u ta do r.

E m h tm l, ex ist em t rês f o rmas poss í ve is d e se fa ze r l in ks : os link s inte rno s,
os link s loc a is (ou relativos) e os link s ex te rno s .

9.1 - Links internos

L ink s in tern os s ão a q ue les q ue l i ga m um a se ção d e um a pág i na co m u ma
o ut ra se ção d a mes ma p ág i na. Po r exe m pl o, se e u qu ise r f az er um a re fe r ênc ia
p a ra a s eção H i pe rt ex to de ssa n ossa ap ost i la, basta q ue e u p ri m e iro de f in a
u m no me p a ra a se ção H i pe rt ex to e e nt ão a d ic io ne u m l in k pr a e la. Isso é
f e ito da seg u i nt e fo rm a:

1 - Vou at é o i n íc io d a s eçã o H i pe r tex to e ad i c io no o se g u in te cód i go , ao i nv és
d e s im p lesm e nte esc re ve r o t ít u lo da se ção:

<a name="Hipertexto">Hipertexto</a>

2 - A di c io no o li n k p ra ess a s eção com o se g u in te cód i go ,

<a href="#Hipertexto">Vá para a seção hipertexto</a>

O a tr i bu to n am e s e rve a pe nas pa ra da r u m n o me p ara u ma pos iç ão de u ma
p á gi na ht ml . O va lo r d e na me po de s er q ua l qu er u m (nesse caso eu coloquei
"Hipertexto").

Q ua n do voc ê fi z er u ma re fe r ên cia a u m l i nk i n te r no u til i za n do o at r i bu to h ref ,
v oc ê p rec isa ne cess ar i am en te ad i c io nar o c ar ac te re # (jogo da velha) ant es

- 19 -

-----------------------------------------------------------------------------------------------------------

d o nom e da s ua s eção - no nosso caso, #Hipertexto - po is do c on t rár io se u
n av e ga dor t en ta rá a bri - lo co mo um l in k loc al .

9.2 - Links locais ou relativos

L ink s lo cais s ão a que l es q ue re f er en c iam u m a r qu i vo q ue es tej a n o m esm o
c om p uta dor q u e a sua pá g i na. L ink s lo cais nã o c ont ém o ht tp: // no i n íc io d o
e n de re ço. P or ex em p lo, se no m e u do cum e nto h tml e u q u ise r f a ze r u m l i n k
p a ra o a rqu i vo link s .h tm l q ue es tá n a mes ma p asta d o m eu doc u me nto, não
p r ec iso d igi ta l o e nd er e ço co m ple to, m as ap e nas :

<a href="links.html">Acesse os links!</a>

Ess e t ip o d e a r gu men to pa ra o h ref t amb é m é cham a do d e link s re la tiv os.
S e vo cê q ui se r l in ka r u ma p á gi na q ue es tej a do d i retó r io (pasta) s up er io r d a
s ua pá g i na, u se d ois p o ntos e um a ba r ra an tes do n om e do ar q ui v o:

<a href="../links.html">Acesse os links!</a>

A va nta gem de voc ê usa r l i nks r el at iv os é qu e vo cê po d e mo ve r to do o se u
s it e pa ra um no vo end e re ço na in te r ne t e não pr ec isa r r ee d ita r to dos os l i nk s
q u e ap on tam pa ra pá gi na s do se u p ró p r io si te .

9.3 - Links externos

L ink s e x te rno s são a q ue les q u e po dem a pon ta r p a ra q ual q u er ar q ui vo
d i sp on í ve l n a i nt er ne t, c omo po r ex em p lo :

<a href="http://pt.wikipedia.org">Acesse a Wikipedia!</a>

O s link s e x terno s p r ec isa m ne cess ar ia me nt e co nter o pr e fixo h tt p: // e o
e n de re ço co m pl eto do a rq u iv o.

9.4 - Alvo (target)

U m a t ri b uto in te ressan te pa ra o e le me nto <a h ref> é o ta rge t, qu e pe r mi t e
q u e o l i nk se ja a be rt o n u ma ou tra jan el a do se u na ve ga do r.

<a href="http://pt.wikipedia.org" target="_blank">Acesse a Wikipedia!</a>

O a r g um ent o do a tr i bu to ta rge t é o n om e d a ja ne la do n av eg ado r q ue a b r ir á
o l in k. Se v oc ê qu iser q u e o li nk se ja a be rt o n um a no va jan e la, s im p les men te
es co l ha q ua l qu er no me com o ar gu m en to.

9.5 – Elementos para fazer ligações

<a> Define uma âncora ou uma ligação de hipertexto

- 20 -

-----------------------------------------------------------------------------------------------------------

10. LISTAS
A l i n gua ge m HTM L c on té m e l em en tos q u e pe rm i te m cr iar lis tas de
d e f in iç õ es, lis tas o rd e na das e lis ta s não ord ena da s .

10.1 - Listas Não Ordenadas

U ma lis ta n ão o rd ena da co ntém vá r ios ite ns mar cad os to dos c om o mesm o
s ím bo lo (normalmente um círculo pequeno ou um quadrado pequeno).

P ar a cr ia r u ma lis ta n ão or de na da, u ti l i zam os o e l em e nto ("unordered
list"). De nt ro d esse e l em en to, os vá r ios it ens são cr i ad os co m o el e ment o
< li> ("list item").

O exe m pl o se g u in te mos tra um a li sta s i mp les :

<ul>
<li>Rum</li>
<li>Bagaço</li>
</ul>

Es te é o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor:

• Ru m
• Bag aço

D e nt ro d e u ma li sta n ão or d ena da p od emos c olo ca r p ará g ra fos, qu eb ras d e
l i n ha, i ma ge ns, o ut ras l is tas, e tc.

10.2 - Listas Ordenadas

U ma lis ta o rde na da co nté m v ár ios ite ns n u me ra dos e é c r ia da co m o
e l em en to < o l> ("ordered list") . Os it ens da li sta de f in em -se c om o e lem e nto
< li> ("list item") .

<ol>
<li>Rum</li>
<li>Bagaço</li>
</ol>


1 . R um
2 . Ba ga ço

D e nt ro d e u ma l ista o r de na da po de mos c olo ca r pa rá gra fos, q ueb r as d e l inh a,
i m ag ens, ou t ras l is tas, e tc.

10.3 – Listas de Definições

U ma lista d e d ef in içõ e s não é c o nst it u ída p or u ma s é ri e de it ens , mas s im
p o r vá r ios t e rmos a com p an ha dos d e d esc r içõ es d e s eus s ig n if i ca dos.

- 21 -

-----------------------------------------------------------------------------------------------------------

A s lis tas de d ef i n içõ es sã o c r ia das co m o el e me nto <d l> ("definition list") O
n om e de ca da te r mo f i ca d en t ro d e u m e lem e nto <d t> ("definition term") e a
s ua d esc r ição f ica no e l em en to < dd> ("definition description")

<dl>
<dt>Rum</dt>
<dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd>
<dt>Bagaço</dt>
<dd>Bebida com elevado teor alcoólico. A sabedoria popular
atribui-lhe fortes propriedades terapêuticas.</dd>
</dl>


R um
Be b i da es pir i tu osa m u it o a p re c ia da pe los pi ra tas do Ca ri b e
Ba ga ço
Be b i da co m e le va do t eo r a lcoó l ico. A s ab e do r ia po p ular r eco n hece -l he
f o rtes p ro pr i e da des t er a pê ut ic as.

D e nt ro de u m e l em ent o < d d> po de mos co lo ca r pa rá gr a fos, qu eb r as d e l i nh a,
i m ag ens, ou t ras l is tas, e tc.

10.4 – Elementos para Listas

<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Insere um item na lista
<dl> Insere uma lista de definições
<dt> Apresenta a definição de um termo
<dd> Insere a definição de um termo
<dir> Desuso. Utilize <ul>
<menu> Desuso. Utilize <ul>

11. IMAGENS
A l ém d e ma ni p u lar t ex to, o h tml t am bé m se r ve pa ra ex ib i r im ag e ns de um a
m an e ira mu i to si m p les, usan do p a ra iss o o e le me nto im g :

<img src="emma.jpg" width="221" height="300">

O a tr i bu to s rc - source, fonte em inglês - d á o n o me d o a rq u ivo d a ima ge m
e é o ú ni co at r ib ut o o b ri ga tó ri o pa ra o e le me nt o img . Os a t rib u tos pa ra a
l a rg u ra (width) e a a lt u ra (height) não são ne cessá r ios, m as se rão m uit o
ú te is qua nd o as p essoas es t ive r em na v eg a ndo e m se u s it e: q ua n do se u
n av e ga dor a b re u m a r qu i vo htm l e en con t ra o e lem e nto img , e le usar á o
r es pe ct i vo a tr i bu to s rc co mo o en d er eç o ond e es tá o ar q u i vo d e im a ge m a ser
e xi b i do. Em o ut ras pa la vr as, o e l em en to im g a pe nas pa ssa uma r e fe rê nc ia d o
a r qu i vo d e i ma ge m ao n av eg ad o r, ou sej a, vo cê não es tá col oc an do esse
a r qu i vo d e i ma g em de nt ro do se u a r qu i vo h t ml, vo cê está a pen as co lo can d o
e m s eu a rqu i vo ht m l u ma r e fe rên c ia a ess e a r q ui vo de i ma ge m. O n av eg ado r,
p o r sua v ez , c om eça a ba ixa r essa i ma gem a par t ir dess e e nde r eço a t ri bu to
e n qu an to te r mi na de e xi b i r o doc u me nto.

D e pe n de ndo do t i po d e a r qu iv o de i ma ge m, e la s ó se rá e x ib i do p e lo
n av e ga dor q u an do t e rm i na r de se r ba ixa da. S e isso oco r re r e você não ut i l izo u

- 22 -

-----------------------------------------------------------------------------------------------------------

os a tr i bu tos w id th e h e ig h t no se u d ocu m en to, o na v ega dor só r ese rv a rá
es pa ço n a t ela do se u co m pu ta do r pa ra a ex i b içã o d a i ma gem q uan do e la
es t iv er s id o ba ixa da, e d u ran te r ess e i n te rv alo a fo rmat ação do se u
d o cu me nto po d e f ica r d i fe re nt e. Pa ra e vi tar isso - somente por uma questão
de estilo - r e com en dam os qu e vo cê s em p re us e os atr i b utos w id th e h e igh t,
q u e i n fo rm am a o n av e ga dor o ta ma nh o d a i ma ge m, a ntes mes mo d e le
c om eça r a ba ix á- la, e assi m o es pa ço n a te la do se u com p ut ad or se rá
a p ro pr ia dam e nte res er v ado pa ra e la.

11.1 - Tamanho de exibição da imagem

O s at r i bu tos w id th e h e ig ht m e re ce m u m po u co m a is de a te nção . Co mo
v i mos, sã o os at r i but os q ue de te r mi na m o ta ma nh o q ue a i ma ge m se rá
e xi b i da. Exi st em d uas f o rma s d e s e fa z er isso, ut i liz and o o tam anh o e m pi xel s
(tamanho absoluto) e e m va lo res r e lat i vos ao tam an ho d is po ní v e l da tela d o
c om p uta dor , is to é, em po r ce ntag e m.

U m p ix e l é a m en or u n i da de lu m i nosa da te la do se u co mp ut ado r q ue os
p r og ra mas p od em ma ni p u lar , e i sso d ep en d e m ui to d a r eso lu ção da te la d o
se u co mp ut ado r. Um p i xe l é u m q u ad ra d in ho l um i noso. At ua l me nt e as te las d e
c om p uta dor te m uma r eso l uçã o d e 80 0 pi xe ls de comp ri me nto e 6 0 0 d e a ltu ra ,
às v ez es po de se r de 1 0 2 4 de co m pr i me nto e 76 8 na a l tu ra o u r eso l uçõ es a té
m a ior es, de tal mo do qu e nossos o lh os j á não conse gue m d ist i n gu i r ent r e
p i xe ls co nt íg u os.

O ta ma nho das i mag e ns c om pu ta do r iza das tam b ém p od e se r me d id o e m
p i xe ls, q ue é o tam anh o qu e a im a ge m v ai o c upa r na t e la do s eu c om p utad o r
q u an do el a f o r ex i b i da. Pa ra q ue vo cê d es cu b ra qu al é o ta ma nh o d a sua
i m ag em, vo cê te rá qu e usa r a lg u m p ro g ra ma de e d iç ão de i mag e ns o u ent ão
a b ri -l a d i re ta me nte n o se u nav e ga do r. Ex pe r im en te ir no m en u Ar q ui vo e
d e po is e m A b r i r, no se u na ge vad o r, o u e nt ão di g ita r a lo ca li zaç ão da imag e m
d i r eta me nte na ba rra de en der e ços. Quan d o a i mag e m f or ex i bi da , c l iq u e
so b re e la co m o bo tão d i r e ito do se u mo use e e m se gu id a vá em Pr o pr i eda d es.
U ma j an ela c om as i nf o rma çõe s d a im ag ens - inclusive seu tamanho - d e ver á
a pa re ce r. D e poss e d ess es va lo res, b asta co lo ca r- los d en tr o d a do i m g. No
e xe mp lo an te r io r, o nd e usa mos o c ó di go w id th="2 2 1 " h e igh t= "3 0 0", a
i m ag em fo i ex i b ida co m 221 p i x e ls d e la rgu ra e 30 0 d e a ltu ra,
c oi n ci d en tem e nte s end o se u ta ma nh o o r i gi na l. Po d er íam os te r esc r it o:


O u se ja, a i ma ge m fo i mo st ra da c om um t ama n ho me no r d o qu e o o ri g in al .
Ta m bé m po de r ía mos usa r ta ma nh os ma io res qu e o r ig i nal... q u e ta l vo cê
e xp er i me nta r a lgo com o wid th=" 2 2 10 " h e ig h t=" 30 0 0 "?!

O s eg u ndo mo do de d et er m ina r o taman ho de exi b i ção d as i ma ge ns n o
n av e ga dor c ons is te em ut i l iz ar po rc en ta gem . Po r ex em p lo :

<img src="emma.jpg" width="10%" height="10%">
Re su lta rá n u ma i ma ge m ex i bi da co m u m dé c im o ( 1 0% ) do es pa ço d is po nív e l
d a te la do c om p uta dor .

Nos do is m o dos d e d e te rm i na r o ta ma nho - em pixels e em porcentagem -
p o de mos es co lh er va lo res i n de pe n de nt es p a ra a a ltu ra e a lar g u ra, d e t al
f o rma q ue a ima g em fi q u e d isto rc i da. Ol ha q u e e ng raça do :


- 23 -

-----------------------------------------------------------------------------------------------------------

11.2 - Texto alternativo

Ex is te m a in d a o ut ros a t ri b utos i n te r essan tes p a ra a ex i bi ção d e i m ag ens. Vo cê
p o de i n cl ui r uma des cr i ção da i ma ge m p a ra q ue se , po r qu al q ue r raz ão,
a l gu ém não co nsi ga v e r a im ag e m e la possa l er um a des cr i ção no espa ço
v a zio . Essa des cr i ção ta m bé m a par ec er á q ua nd o vo cê p assa r o mo use p o r
so b re a i ma ge m.

Vo cê po de a d ic io na r um a p eq ue na des cr i ção d est a ma ne i ra :

<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">

O at r ib ut o a lt (texto alternativo) é ut i li za do pa ra da r a pe q uen a des cr i ção,
n est e caso "E m ma Gold m an !".

11.3 - Borda da imagem

U ma bo r da (contorno) d a i ma gem po de s er a di c io nad a co m o at r ib u to b or d er :

<img src="emma.jpg" width="10%" height="10%" border="1">

O va lo r do a tr i bu to bord e r in d icar á o ta manh o d essa mo l du ra.

11.4 - Alinhamento da imagem

É poss í ve l a in da co loc ar i ma ge ns e te xto u m do la do do o ut ro, de d i ve rsas
f o rmas . V am os su po r a mais s i mp l es :


O tex to a pa re ce ao lad o d a i ma ge m.

Ess e c ód i go po d e fun c io na r mu i to be m, m as às v e zes acon te ce d o t ext o
a pa re ce r ab a ixo da im a ge m. Par a fa ze r o p os i ci onam ento da i m ag ens e d o
t ext o cor re ta me nte, b ast a ut il iz a r o at r ibu to a lign, q u e f u nc io na d e mo do
a ná lo go ao d o al i nham e nto de pa ra g ráf os:

<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">

O tex to va i a pa rec er à es qu erd a da i mag e m (o atributo right faz que a
imagem fique à direita da tela) , m es mo t en d o esc r it o a pós o cód i go s ob r e a
i m ag em. En q ua nto o t ext o pu der f i ca r ao la do da i mag e m, el e fic ar á. Q ua nd o
e l e não ma is co u be r n esse esp aç o, el e c om eça rá a se r ex ibi d o a ba ixo da
i m ag em, com o vo cê pod e ve r aq u i.

Ut i l iza r o a l in ha me nto de ima ge ns é a me l ho r ma ne i ra de gar an t ir q ue e la
a pa re ce rá n o lo ca l d ese ja do.

11.5 - Espaçamento da imagem

Not ou co mo o tex to d o e xe mp lo a nt er io r sa i u co la do à i ma gem ? ! É po ss ív e l
d e f in i r u m es pa ça men to e nt r e a im ag em e q ua lq ue r o bj eto (texto, imagem,
tabelas) qu e es te ja ao se u l ad o, ac i ma ou a ba ixo, usan do p ara isso os
a tr i bu tos vs pa c e (espaçamento vertical) e hs pa c e (espaçamento horizontal) .

- 24 -

-----------------------------------------------------------------------------------------------------------

O va lo r desse s a tr i b ut os d i z ao n av e ga dor q u al se rá o es pa ço em p ixe ls en t re
a ima g em e q ual q ue r o b jet o:

<img src="emma.jpg" width="3%" height="3%" border="1" align="left" hspace="5"
border="1">

O tex to vai a par ec e r à d ir ei ta d a ima g em, a ci n co pi xe ls de d i stâ nc ia de la.
D e u pra no tar a di fer e nça ? ! Ut il i za n do t odos esses at r i bu tos par a a exi b i ção
d e ima g ens v oc ê o b tém u m tex to b e m d ia gra ma do e bo nito de ser l i do.

N o ta: Ao u t i l iza r i m ag ens, l e m br e-se d e q u e e l as pod e m au me nt ar
c ons i de ra ve l me nt e o t em po de c ar re ga me nt o pa ra v e r o co nte ú do de su as
p á gi nas, po r iss o, use -as co m cu i da do.

11.6 – Elementos relacionados com imagens

<img> Insere uma imagem
<map> Define um mapeamento sobre a imagem ("image map")
<área> Define uma área clicável sobre um mapa de imagem

11.7 – Fundos de Página

U ma co r ou u ma imag e m de fun d o b em es co lh i do po de m me lho ra r o as pe ct o
d a pá gi na, m as u ma m á es co lh a é ca paz d e c ausar d anos mu i to gr av es na
l e g ib i l id ad e e n o asp ec to ge ra l da pá gi na.

11.7.1 - O atributo bgcolor do elemento <body>

O e le me nto p ossu i a tri b u tos q ue n os p er m it em es pec if i ca r as cor es
d o t exto e a co r d e fu n do. Ta mb é m po dem os us ar um a i ma gem co mo pad r ão
d e fu n do.

O at r i bu to b gc o lo r nos p er m it e e sco l he r a c o r de f und o da pá g in a. O qu adr o
se g u in te mos tra t rês f o rmas d e i n d ic ar a co r de f undo da pá g i na usa nd o um
c ó di go de c or he xa dec i ma l, um c ó di go R GB e um nom e de co r (veja mais à
frente o tópico sobre cores).

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

As l i nh as a p res en ta das ma is a c ima usa m for mas d i f eren tes (mas todas
válidas) par a d ar a c or p re ta ao f u n do d a pá g ina .

N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i na
b ase ia- se e m es tilo s CSS. A u ti l i za ção do a tr i bu to bg c o lo r só se j ust i fi ca se
p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n ão
s up or tam CS S (veremos sobre CSS no fim da apostila).

- 25 -

-----------------------------------------------------------------------------------------------------------

11.7.2 - O atributo background

O at ri b uto ba ck g roun d es ta be le ce q ue o p a dr ão d e f u n do da pá g ina s er á u ma
i m ag em. O v al or des te a tr i b uto i n d ic a o loc al o n de se en con t ra a i ma ge m. S e
as d i me nsõ es da im a ge m f or e m in fe r io res às di m ens ões d a pá g ina, o
n av e ga dor r e pe ti rá a im a ge m (como num chão de mosaicos ou em uma parede
de azulejos), po r f or ma a o cu pa r t od o o fu nd o d a pá g in a.

O exe m pl o a ba ixo most ra be m com o se f az isso :

<body background="imagem.jpg">
<body background="http://www.tiagosouza.com/imagem.jpg">

O va lo r do at r i bu to ba ck g rou nd é u ma UR L (site) qu e de f in e o lo cal on de s e
e n con tr a a i ma ge m. Na pr i me i ra li n ha ma is ac i ma, demos uma UR L re la t iva e
n a se gu n da d e mos u ma UR L a bsol u ta.

N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i na
b ase ia- se e m e s tilos CSS. A u ti l i zaç ão d est e at ri b u to s ó se jus t if i ca se
p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n ão
s up or tam CS S (veremos sobre CSS no fim da apostila).

11.8 – Dicas

S e mp re q ue u t il i za r um a i ma gem d e f u ndo na p ág i na, nã o se es q ue ça d est es
as pe ct os:

• C e rt i f iq ue-se de q ue o tam an ho d a i mage m (em KBytes) não é m ui to
g r an de , po is e m caso af i rma ti vo, o te m po pa ra ca rr egar a pá g ina
a um en ta ri a co ns i de ra ve l me nt e.

• C e rt i f iq ue-se de qu e a ima g em d e fu n do co m bi na bem co m a co r d o tex to.

• C e rt i f iq ue-se d e qu e o f un do c om b in a be m co m as o utras im a ge ns da
p á gi na.

• Ve r i fi q ue se a re pe ti ção da i mag e m de f un d o e m mosai co resu l ta e m um
p a dr ão pe rf e ito . Se vo cê p er ce be r al g um as f a l has apa re nt es, uti l i ze o ut ra
i m ag em de f u nd o ou fa ça u ma e di çã o nes ta a tua l.

• C e rt i f iq ue-se d e q ue a i ma ge m n ão é in côm o da e q ue nã o des vi a a at en ção
d o te xto.

O s at r i bu tos b gc o lor, b ack g ro un d e te x t do ele me nt o <bo d y> fora m
re p rova dos na s reco me n daçõ es ma is rec e ntes d a W 3 C pa ra a li n guag e m
HTM L (HTML 4 e XHTML) . A f o rma re co me n dad a p ara o bte r os m esm os
r es u lta dos b ase ia- se n a ut i li za ção d e est i los C SS . A u t i li za ção d es tes at r ib u tos
só se j ust if i ca se pr ec is ar mos de man te r a co m pat i bili d ad e co m n av e ga dores
a nt i gos q ue não su por ta m C SS .

S ão p ou cos os s ites d e qua l i dad e qu e u ti li z am im agens de f u nd o, e a q uel es
q u e o fa zem , usa m f un d os q ue não a tra pa l ha m a v isu ali z ação do si t e.

- 26 -

-----------------------------------------------------------------------------------------------------------

12 – CORES
P od e mos ob t er q ua l qu e r c or q ue d ese ja rmos co m bi nan do p ro po rç ões co rr etas
d e t rês co res bas es: Ve r me l ho (Red) , Ve r de (Green) e Az u l (Blue) .

12.1 - Formas de exprimir cores

E m CS S a f o rma r ecom e nd ada p a ra ut i l iza r c o res é usa n do có dig o (notações)
h exa de c ima l. Des ta f o r ma as co res e x pr i mem u san do t r ês núm e ros
h exa de c ima is q ue de f in em as q ua nt i da des de v erm e lh o, ve rd e e az u l q ue
e nt ra m n a c om pos i ção de um a d e te rm i na da co r. O va lor m ais b a ixo de uma
d e te rm i na da co r é 0 (#00 na notação hexadecimal usada em CSS) e o val o r
m a is al to é 2 5 5 (#FF em código hexadecimal). Assi m , a co r p r eta te m 0 d e
v e rm e lho, 0 d e v er de e 0 de a zu l, esc rev e nd o na f o rma # 00 0 0 0 0. Já o
b r an co poss ui 25 5 de v e rm e lho, 2 5 5 de v erd e e 25 5 de a z ul , s end o se u có di g o
# FF FF FF. O a mar e lo f o rte p ossui 2 5 5 de ver m el ho, 2 55 d e ver de e 0 d e a zu l,
se n do se u c ó di go # FF F F0 0

A ta be la a ba ixo most ra os res ul ta dos de div e rsas co mb i na ções de co res :

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 ta be la se g ui nt e m ost ra as 16 cor es cu jos n om es fo ra m d ef in i dos
o f ic ia lm en te p elo W 3C . To dos os nav e ga do res re co nh ece m estes no mes p e lo
q u e po d em us á-l os s em q ua lq ue r p ro b le 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)

A p esa r d e n ão esta re m de fin i dos o f ici a lm en te, os nom es d as co res
a p rese nt ados a se gu i r são r eco nh e ci dos por to dos os n av e ga dores re le va ntes ,
c om e xc eção das v e rsõ es ma is a nt i gas.

N o ta: Est es no mes d e c or es não est ão def i n i dos em n e nh um p ad r ão do W3 C ,
a pes ar de se r em r eco n hec i dos pe los pr i nc ip a is na vega do res, ess e
r e con he c ime nt o não é ex i g id o a n e nh um nav e ga do r para es tar con fo r me com
as r eco men d açõ es o fi c ia is. É po uco p ro váv e l qu e nos a nos ma is p róx i mos os

- 27 -

-----------------------------------------------------------------------------------------------------------

n av e ga dores pa ra PDA e t e le fon es móv e is c ons i ga m r e con he ce r es tes nom es
d e co r. S e q u is er ga ran t ir a a pr ese nt ação co r ret a das c or es das s uas pá gi nas
e m to dos os na ve gad o res co nfo r mes co m as n or mas do W3 C, e m v ez dos
n om es a pres en ta dos n a ta be la, u t i li ze o s có d ig os h exa de c ima is a p rese nt ados
j u nto das co res.

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

P rob le mas c au sa dos p o r um n úm e ro red uz ido d e c o re s

To dos os co m pu ta dores mo de r nos são ca pa zes de mos tra r de ze nas de m il ha r
o u m i lhõ es d e co r es e m s im u ltân eo. Co nt ud o, at é m eados da d éc ad a d e 1 99 0
m u it os sis te mas a pe nas cons e gui a m ap re sen ta r 2 5 6 co res d if e ren tes d e cad a
v e z. Es ta li m i taçã o ob r i ga va os n a ve ga dor es a t ra ba lh ar em com u ma pa le ta
f i xa q ue con t in ha a pen as 2 56 cor es.

O s nav e gad o res e ram o b r i gad os a u sar a pe nas 2 56 co res p ara s im u la r t od as
as co res qu e não con se gu ia m a p rese nt ar. O s e fe it os des tas ap r ox ima ções
e ra m vis í ve is na fo rm a pon tos a d jac en tes c om co res d i f er en tes e d e ma nc has
d e c or. At ua l me nte e st as l im i taçõ es já quase não ex is te m.

C o mo a caba mos de ver , na pr i mei r a m eta de d a dé ca da d e 1 99 0, a ma io ri a do s
c om p uta dor es e ra m c ap az es d e a pr ese ntar ap en as 2 5 6 co r es d i f er en tes d e
c ad a ve z. D e ssas 2 5 6 co res, o s s ist em as o p erat i vos Windows e Apple
Macintosh r es er va va m 2 0 c o res c ad a um (40 no total) p ara d ese n ha r s uas
i n te r fac es g r áf i cas. Ass im , d e um to ta l de 2 5 6 co res p oss í ve is, a pe nas 21 6
p o di am s er es co lh i das l i v re me nt e c om a ga ra nt ia de pod e re m se r a p rese nt adas
t an to nu ma m á qu i na W in do ws co mo em um Ma c. Es tas 2 16 co res r ec e be ra m a
d es i gn ação d e c o re s s e gu ra s da W eb.

A fo r ma e nc on tr ad a pa ra li m ita r as cons e qüê n cias res ul ta nt es d a u t i li za ção d e
u ma p al eta co m a pe nas 2 16 c or es co nsi st e e m usa r a penas co res cu jos
c ó di gos h exa d ec im ais u sa m ap en as co mb in açõ es dos n úm er os i n d i ca dos n a
t ab el a s e gu i nt e:

RGB 00 51 102 153 204 255
Hex 00 33 66 99 CC FF

A ta be la ab a ixo mostr a t oda s as 21 6 co mb i na ções de co res qu e po de mos
f o rma r com os va lores ap r ese nt ado s na ta be la a nt er ior. Estas são , p or tan to,
as 21 6 cores s e gu ras d a We b, q u e mo st ra mos ju ntam e nte co m se us c ód ig os
h exa de c ima is (o caractere # no início foi omitido) :

- 28 -

-----------------------------------------------------------------------------------------------------------

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

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



660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF



CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF




FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

A t ua lm en te q u a lq ue r c o mp ut ado r co nse gu e a p res en ta r m il hões d e co res
d i f er en tes ao mes mo t em po, não hav en do n ec ess id ad e de usa r a pe nas c or es
se g u ras da We b. A pesa r d isso, es te t ema co nt i nua a se r fo cad o e m q uase
t oda s as i nt ro d uçõ es à c ons tr u ção de pá gin as.

- 29 -

-----------------------------------------------------------------------------------------------------------

12.4 - Formas de exprimir os valores das cores

A s c or es de f in em -se u san do no ta ção hex ade c ima l q ue e x pr i me as q uan t idad es
d e Ve r me lh o (Red) , Ve r de (Green) e A z ul (Blue) qu e e nt ra m em s ua
c om pos i ção. A qu an t i dad e mí n i ma de u ma co r é 0 (#00 em código
hexadecimal) e a qua nt i da de m áx ima é 2 5 5 (#FF em código hexadecimal)
A ssi m, a co r b ran ca es c re ve-s e n a fo rm a # FF FF FF e a co r pr e ta n a for m a
# 0 00 0 0 0. U ma f or ma ma is an t ig a qu e ai nd a fu nc io na é a fo r ma de c ima l. Na
f o rma d e cim a l a co r br an ca ex p rim e-s e como rgb( 2 5 5, 2 5 5 , 25 5 ) e a co r p re ta
e xp r im e-s e co mo rgb( 0 , 0, 0 ). En t re es tes d o is ext rem os, te mos to da a ga ma
d e c or es qu e pod em se r a p resen ta das e m u m mon i tor.

Nada de Vermelho

S e des l i gar m os co mp l eta m en te a co r V er m el ha, f i ca mos co m 6 5 5 36 cor es
d i f er en tes q ue res u lt am de c om b i na r 2 56 q uan t id ad es de ver d e co m 25 6
q u an ti da des de a zu l (65536 = 256 × 256) .

A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões :

003300 006600 009900 00CC00 00FF00

003333 006633 009933 00CC33 00FF33

003366 006666 009966 00CC66 00FF66

003399 006699 009999 00CC99 00FF99

0033CC 0066CC 0099CC 00CCCC 00FFCC

0033FF 0066FF 0099FF 00CCFF 00FFFF

Vermelho ao Máximo

S e c olo ca rm os a quan t i dad e de Ve r me l ho c om s eu va lor má xi mo, q ue é 25 5
(#FF em código hexadecimal) f i ca mos a in d a co m 65 5 3 6 (256 x 256) co res
d i f er en tes q u e res ul tam d e c om bi na r mos t od os os va lo res poss í ve is de Ve rd e
c om tod os os va lor es p oss ív e is de Az u l.

A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões :

FF3300 FF6600 FF9900 FFCC00 FFFF00




FF33CC FF66CC FF99CC FFCCCC FFFFCC

FF33FF FF66FF FF99FF FFCCFF FFFFFF

Tons de Vermelho

A ta be la ap r ese nta da a ba ixo most ra o res ul ta do o bt ido var ia n do a q ua nt i da de
d e co r ve rm e lh a d e 0 at é 25 5 ao m esmo t em po q ue s e m an têm e m ze ro as
q u an ti da des de v e rd e e d e a z ul. Ex is te m 2 56 to ns d ifer e nt es de ve r me lh o pur o
e mu i tas ou t ras q ue co nt êm mis tu ra s de o utr as co re s.

- 30 -

025 guia pratico-do-html-css-e-web-standards

025 guia pratico-do-html-css-e-web-standards

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a 025 guia pratico-do-html-css-e-web-standards

Semelhante a 025 guia pratico-do-html-css-e-web-standards (20)

025 guia pratico-do-html-css-e-web-standards