Guia Prático Do HTML Web Standards e CSS PDF

Guia Prtico de HTML Prof.
Tiago Daniel de Souza

http://www.tiagosouza.com
-----------------------------------------------------------------------------------------------------------
Guia Prtico 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-
Guia Prtico de HTML Prof. Tiago Daniel de Souza
-----------------------------------------------------------------------------------------------------------
SUMRIO
1 . IN T RODUO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 05
2 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 05
3 . S U A P RI MEI R A PGIN 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 nso .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 ps tro fos ..... ....... ........ ....... ... 11
4 .4 Notas R p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 11
5 . O CABEALHO 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 rg 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 so ..... ....... ........ ....... ........ ....... ........ ....... . 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 bs icos d o HTM L . ..... ........ ....... ........ ....... ... 17
8 . FOR MAT AO 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 GAES 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 No 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 AO 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 to 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 ERO 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 ao 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 ERN 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. INTRODUO
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 no
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 ro 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 ao.
O b v ia me nte , a a pos ti l a no 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 ingls) 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 ao 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 so 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 (tambm 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 cd i go s HTML ,
i n te r pr et -los se g un do o pa d ro d o h i pe rt ex to e ge ra r a " pg 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 tambm arquivos html que terminam com .shtml e outras extenses
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 PGINA 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 cabealho) 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 tm 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 (no! no a falta
de juzo!) , m as no 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 marcao" ;
A s et i qu etas de mar ca o do 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 nso .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> Ttulo da Pgina </title>
</head>
<body>
Esta minha primeira pgina. <b>Este texto est em negrito</b>
</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 - Explicao 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 ea 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 <b od y> ... < /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 <b> ... < /b> f i ca r c om o est i lo Ne g ri to (Bold)
3.4 - Devemos usar a extenso .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 nso . h tm l, mas a

e xte nso .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-
histricos 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 nso . 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 enso . h tm l, a no
se r q ue ex ist a u ma b oa ra zo pa ra voc esta r u t i li za n do . h tm (pouco
provvel).
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 vs 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 no
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 so 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 Freqentes)
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 nso
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 tr 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 is cu las q ua nto com le tr as mi n s cu las, t an to q ue <B> a m es ma co isa
q u e <b>. 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 is 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
<B> e <b> 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 dv 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 no 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

marcao" . 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 so 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 <b> e <B> no 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> Ttulo da Pgina </title>
</head>
<body>
</body>
</html>
-8-
-----------------------------------------------------------------------------------------------------------
Es ta pa r te a ba ixo um e le me nto HTM L:
<b>Este texto est em negrito</b>
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 : <b >

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 : </ b >
O p ro ps ito da ta g <b> 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 <b od y> e te rm in a co m a ta g < /bo dy>
O p ro ps i to da ta g <b od y> 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 nc 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. <p>) 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. </p>) 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 ps 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 pgina da web.
<b>Este texto est em negrito</b>
</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 no 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 so 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/apstrofos (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 ps tro fos ( ' ) ta m bm 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 rp rio ca ra ct er e as pas. Num a

s it ua o dess as, de ve mos usa r a ps 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 Rpidas
A s Ta gs HTM L so ut i l iz ada s pa ra ma rca r e l em en tos HTM L. E las esto

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 <b> e < /b>
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 eo 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 , <b> a m es ma co isa q u e <B>
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 <b> - no se d es esp e re, p o is o mx 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 CABEALHO DE UM DOCUMENTO HTML

5.1 - O Elemento <head> (cabealho 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 Informao 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 ro 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 ea l ho. E les so : <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>
<p>Aqui temos algum texto</p>
</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 <p >

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 no a uto r i zado, co mo <h2 > o u <p>, 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 so res po ns ve is pe la con c ep o dos

b r owse rs a cha m q ue est e gn 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 zes 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 cabealho ( <head> )
Elemento Descrio
<head> Contm informao importante a respeito do documento mas que no
deve ser apresentada no corpo da pgina
<title> Define o ttulo da pgina
<base> Define um URL base comum para todas as ligaes relativas da pgina
<link> Faz referncia a um recurso externo e estabelece a ligao com ele
<meta> D informao sobre aquilo que o documento contm
5.1.3 - A declarao DOCTYPE
A d ec la rao 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 nc io da p gi na , a nt es d o
e l em en to <h tm l>
Declarao Descrio
<!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-informao )

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 ao 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 ao 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 ( no muitos ) usa m a i n fo r mao 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 referncias tcnicas 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 pg 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 pgina 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 so 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 confuso!</title></head>
<body bgcolor="black" text="gray" link="red" alink="white">
Isso uma pgina 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 so 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 BSICOS DA LINGUAGEM HTML

7.1 - Cabealhos
O s ca be a lh os (tambm 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> Ttulo 1 </h1>

<h2> Ttulo 2 </h2>
<h3> Ttulo 3 </h3>
<h4> Ttulo 4 </h4>
<h5> Ttulo 5 </h5>
<h6> Ttulo 6 </h6>
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 - Pargrafos
O s pa r g raf os so de fi n i dos c om a ta g < p>
<p>Este um pargrafo</p>
<p>Este um outro pargrafo</p>
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 pargrafo
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

<p align=left> Alinha o texto esquerda
- 14 -
-----------------------------------------------------------------------------------------------------------
<p align=right> Alinha o texto direita

<p align=center> Alinha o texto centralizado
<p align=justify> Alinha o texto justificado
Not e qu e e nt r e os de l i mi ta dor es < e > no en co nt ra-s e a pe nas o el em en to

< p>. 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
< p a lign="j us tif y">, o va lo r d o at ri b uto a lig n (que significa alinhamento
em ingls) 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 no . 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 so 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 rs
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 fo, ga ran to qu e e les po de ro 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 tl 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, no
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 diviso
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
so p rese rv a dos. Ve ja mos o ex em p lo :
<div align="center">
<p>
Pargrafo 1
Pargrafo 1
Pargrafo 1
</p>
<p>
Pargrafo 2
Pargrafo 2
Pargrafo 2
</p>
<p>
Pargrafo 3
Pargrafo 3
Pargrafo 3
</p>
</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 <b r> 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 no q u er

c om ea 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 <br> no exi st e o co ma n do < /br>, 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 nto 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 <b>, < i> e < u> a gem so b re um a re g io 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 < /b>, </i> e < /u> ,
p o is do co nt r r io esse s co man d os a gi ro 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, < /b r>, 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 <b r>
<p>Este <br> um par<br>grafo com quebra de linha</p>
A ta g <b r> uma e ti q u eta v az ia, e la no p oss ui tag f i na l.
7.5 Comentrios
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 ntr 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 no
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 Informaes 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 so 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 no
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 no se ro 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 <br>.

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 < p> 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 <b r> 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 (</p>) 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 no passa r n o tes te de v al i da o.
6 ) Os e le me nt os < p> 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 bsicos do HTML
T AG DES CRI O
<html> Define um documento HTML
<body> Define o contedo principal, o corpo do documento
<h1> at <h6> Define ttulos, de 1 a 6
<p> Define pargrafo
<br> Insere linhas em branco, quebra de linha
<hr> Insere uma linha horizontal

</script>
</body>
</html>
17.2 - Como lidar com os browsers antigos
U m n av eg ad o r qu e no r eco n hec e o e le me nt o <s c rip t> m uit o a nt ig o e a

s ua ut il i dad e na W eb a tua l mu i to re d uz id a. Es tes br ows ers , ao en co nt rar e m
u m e le men to <s c rip t> ( cujo significado desconhecem ), l i m ita m-s e a
a p rese nt ar o te xto q ue est de ntr o do el eme nt o co mo se t rata sse d e co nt ed o
n or ma l. Pa ra i m pe d ir q ue isso ac on te a, d e ve-s e c oloca r o c on te do d o
e l em en to <s c rip t> d e nt ro de u m co me nt r io. Des te m o do, os n a ve ga dor es
q u e no s u po rtam sc r i pts i g n ora m-n os, mas os ou t ros na ve ga do res
r e con he cem os s cr i pts e ex ec uta m- nos ( apesar dos comentrios ) . M esmo co m
b r owse rs m o de rnos , a ut i l iza o de co me nt r ios nos sc r i pts uma pr t i ca
r e com en dv e l po r qu e e v i ta mu it os pr ob lem as qu e su r ge m q uan d o u t il i zam os
s cr i pts na li n g ua ge m X HTML.
17.2.1 - O Elemento <noscript>
A l m d e esc on de r mos o c di go d e nt ro de u m co me nt r io, u ma o ut ra fo rma de

a ju da r os b r owse rs m u it o a nt ig os s e ria u t i li za r o el e me nto <n os c rip t> p a ra
o fe re ce r c on te dos a lte r nat i vos.
O e le me nto < no sc rip t> usad o pa ra c om p ens ar de al g uma fo r ma a fa lta de

e xe cu o d e u m sc r ip t. O co nte do des te e l em en to s er a pr ese nt ad o p el os
b r owse rs qu e n o r eco nh ec em sc r i pts, mas se r ig no ra do pe los b r owse rs m a is
m o de rnos e no in te rf e re na ap res en ta o d a p g i na.
17.2.2 - Um exemplo
<html>
<body>

</script>
<noscript>
O seu browser no suporta
JavaScript!
</noscript>
</body>
</html>
17.3 - Elementos para inserir scripts e cdigo
E lem en to De sc ri o
<script> Define um bloco que contm um script
<noscript> Define texto alternativo para ser apresentado sempre que o script no
executado
<object> Insere um objeto na pgina
<param> Define parmetros para controlar o objeto
<applet> Desuso. Use <object>
18. OUTRAS POSSIBILIDADES

O p r in c p io d e fu nc ion am en to do HTM L j d e ve e sta r s l id o em s ua m en te, se
q u e vo c l e u t ud o o q ue a ntec e de est a se o. P ara q ue es te t ex to no s e
t or ne en fad o nho, passa re mos p a ra a Esp e ci f i ca o HTM, dese n vo lv i da p e lo
c ons r c io da w eb , a tar e fa de d eta lh ar ca da u m dos t pi co s l ista dos a se g ui r.
Especificao HTML (em ingls) http://www.w3.org/TR/html4

Especificao HTML (em espanhol) http://html.conclase.net/w3c/html401-es/cover.html
Consrcio da web docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web
Texto estruturado: blocos que permitem estruturar lgica e visualmente seu texto
http://www.w3.org/TR/html4/struct/text.html
Listas: blocos para a criao de listagens

http://www.w3.org/TR/html4/struct/lists.html
Frames: permite que a pgina exibida no navegador seja formada por mais de um
arquivo html (no recomendado, veja em Acessibilidade)
http://www.w3.org/TR/html4/present/frames.html
Formulrios: possibilita a interao do seu html com aplicaes web.

http://www.w3.org/TR/html4/interact/forms.html
Scripting: permite a automatizao de certas sees do seu documento.

http://www.w3.org/TR/html4/interact/scripts.html
Meta-informaes: fornecem dados a respeito do prprio documento, como data,

conjunto de caracteres usado, data de validade, etc
http://www.w3.org/TR/html4/struct/global.html#h-7.4.4
Essas f u nc io na l i dad es pe r mi t iro q ue vo c fa a d o cume ntos HTM L be m

c om p le tos. P ross eg u ir e mos a gor a a pa rt e f i na l d esta a post i la, on d e s ero
a bo r da dos a l gu ns te mas be m ba ca nas ;- )
19. COLOCANDO SEU SITE NO AR

A t a go ra so me nt e vo c co ns egu i u v is ua li za r suas pg i nas. Ch eg o u a hor a d e
m ost r- las p a ra o m und o to do.
- 43 -
-----------------------------------------------------------------------------------------------------------
P ar a p ub l ica r se u tr ab a lho na In te r ne t, voc p r ec isa so me nte d e es pa o e m

u m se r v id or e u m p rog r ama FTP g r at ui to.
S e vo c cos tu ma acess ar a I nt e rn et j d e ve t er vi sto q u e ex ist em v ri os

se r v ios gra tu ito s de hos p ed age m d e s i tes. S eu e nd e re o no se rv i do r se r
a l gu ma c oisa pa re ci da com ht tp : // ho me.se r v ido r. com / ~nom e do usu ar io. Vo c
t em q ue a ti va r o se r v io. I n fo r me-s e co mo fa ze r i sto na d o cu me nta o
f o rn ec i da pe lo se r v io d e hos p eda ge m.
O u tra o po o b te r u m es pa o g r at u ito de u m s er v ido r na In te r ne t. Isto

i g ua l a re gi st ra r u ma c on ta d e e- ma il ( co mo p or ex em p lo, o bt er um e n de re o
d e e -ma i l d o h ot ma il) v o c p od e re g is tra r-s e g ratu itam en te p a ra ob te r
u m es pa o e m um s e rv ido r n a I n te rne t. E xis tem v r ias co m pan h ias q ue
o fe re ce m est e s er v i o g r at u ito - e nt r e e las a A ng e lf i re (clique em "Sign Up" e
escolha membro gratuito - ou veja mais abaixo uma lista com srvios gratuitos
de hospedagem) - isto u m pr ocess o b em r p id o.
Angelfire http://angelfire.lycos.com
P ar a ac essa r o s er v id o r v oc pr e cis a co nh e ce r o "N om e d o s eu se rv id o r"

(por exemplo, ftp.angelfire.com) e t er um no me de usu r io e s enh a.
19.1 Isto tudo que eu preciso?!
P ar a a ce ssa r o se rv i do r e pu b l ica r as p g in as vo c pr e cis a d e u m p rog ram a

F TP. Vo c n o de ve te r um p ro gr a ma d est es a i nda , mas exi ste m v rios d eles
n a I nt er ne t p ar a do wnl oa d e so g r at ui tos.
Ex is te m mu i tos pro g ra mas FT P. U m dos me l ho res o Fi le Zi l la, e g rat u it o .

Vo c po de o bt er o Fi le Zi ll a em ht t p: // fi l ez i ll a.so u rce for g e. net
19.2 - Como eu fao envio os arquivos do meu site?!
A b aix o fo rn e ce mos um ex em p lo d e com o fa ze r isto usa n do o ser v i do r A n ge l f ir e

e o p ro gra ma F il e Zil l a. Es te p r oc ed i men to ma is o u me nos i g ua l p a ra
q u al q ue r pr o gr ama FTP .
C o nec te- se In te rne t e a b ra o p rogr a ma FT P. I ns i ra "H os t Nam e"

("ftp.angelfire.com" no "Address") , n om e d o us u rio (em "User") e se nh a
(em "Password") cl i qu e " Conn ec t". Vo c a go ra t em a cesso a o se r v ido r. E m
u m la do da jan el a do pr og ra ma voc v er os di r et r ios e a rq u i vos do se u
c om p uta dor ("Local Site") , e n o o ut ro o d o se r v id or ("Remote Site"):
- 44 -
-----------------------------------------------------------------------------------------------------------
A c he os se us d oc ume nt os HTML e im ag en s a se rem p ub lic adas (no "Local

site") e t ra ns fi ra pa ra o se r vi do r ("Remote site") si m p les me nte da nd o um
c l i qu e d u p lo nos ar q uiv os. A go ra o mu n do tod o p od e r v e r se u s i te .
D a u ma d as p g i nas o no me d e "ind ex .h tm" (ou "index.html") e e la ser

a uto ma ti cam e nte a p gi na de e nt ra da n o si te, o u se ja, b ast a d i git ar
h tt p :/ /ww w.a n ge l fi re. co m/ fo lk /h tm l ne t (sem qualquer nome de arquivo) e
a b ri r htt p: // www .ang e l fi r e.co m/ fo l k/ ht ml ne t/ i nd ex. htm
P ar a ma is a d ian te se r u ma b oa i d ia co mp ra r u m do mn i o (espao no
servidor) s pa ra vo c (www.seu-nome.com) e ass i m t er um nom e do si te b e m
m a is c u rto e f c i l de g u ar da r qu e a q ue les f o rn ec i dos p o r um ser v i o g rat ui to
d a I nte r net . Vo c po de e nco nt ra r na I nt e rn et v rias f i rmas q u e ve nd em
d o m n io. Fa a u ma bu sca do Goo g le.
LISTA DE SITES COM INFORMAES SOBRE HOSPEDAGEM GRATUITA

Link 01
http://neosite.ilogic.com.br/artigos/hospedagemgratis.htm
Link 02
http://criandosite.virgula.com.br/
Link 03
http://www.babooforum.com.br/idealbb/view.asp?topicID=425835
20. HTML AVANADO

Es ta pa rt e a ssu me q u e vo c j t re i nou HTM L o su f ic ie nt e pa ra est ar
f a mi l ia ri zad o c om a l in g ua ge m e f az e r si tes n a i nt er net . Da q ui em d ia nt e, es te
a rt i go a pe nas fa r um tour po r ou t ras li n gua ge ns e tec no lo g ias qu e po de m se r
- 45 -
-----------------------------------------------------------------------------------------------------------
u t i li za das p a ra o r gani z ar s eu s do cu me nt os, s epa ra r a a pa r nc ia d o con te d o,

f ac i l ita r bus cas e c ri ar d oc u me ntos q ue, sob r et u do no ut i li z em f o rma tos qu e
v e nha m a se r to r na r ob so le tos.
Es tar e i d and o a qu i uma v iso ge ra l de t od as as te cno log i as us adas a tua l me nt e

q u e po de m s er i nt e gra das ou tem a l gu ma re la o co m o HTM L e l i n gu ag ens d e
m a rca o :
F ol has de Es ti lo ( C SS)
Te m p late s
A c essi b i li da de
S ti os d i nm i cos o u au to mat i za dos
We b sta n da r ds e va l id a o
20.1 - Folhas de Estilo (CSS)
F ol has de es t il o p er mi t em q ue vo c s ep ar e o co nte do do s eu do cu me nt o da
s ua r ep r ese nt ao g r f ica. Co mo ex e mp lo, ao in vs de um a ex press o do tip o :
<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>
Vo c ut il i za a l go ma is o rg an i za do, com o:
<div class="estilosa">Estilo separado do texto</div>
E e nt o voc d e fi n ir ia u ma c lasse de nome e st il osa o n de os atr i b utos , com o

t i po de f ont e, ta ma nho e cor s er i am de f in id os. Essa d e f in i o po de in c lus iv e
es ta r a rmaz e na da n um a rq u ivo se pa ra do do s eu do cum ento, s end o qu e n est e
l t imo n e cess r io a pe nas um a r ef er n c ia ao ar q u i vo q ue co nt en ha os
es t il os.
O me ca nism o ma is u ti l i za do para c r ia r fo l has de es ti lo pa ra u m a r qu i vo HTM L

o Cascading Style Sheet , o u CS S. Em C SS , o est i lo es t il osa par a o exe mp l o
a ci ma po der i a s e r de f in i do com o:
div.estilosa {
color : red;
font : fixed;
font-size: 14;
}
A s va nta g en s d e usa r f o lhas de est i lo so :
S e pa ra o e nt r e a i nfo r ma o qu e o se u te xto pr et en d e p assa r e s ua

a p rese nt ao
P e rm it e que to da a ap r ese nta o do se u te xto s ej a mu da da s em q u e

se ja p r ec iso a lte ra r o h t m l, b ast an do a pe nas q ue o ar q u iv o q ue
c on te nha a f ol ha de est i lo se ja al t era do
Ma is o rg ani z ao pa ra se us d oc um e ntos
F ac i l ita a cr i ao de Te m p lat es
P e la c la re za e o rg an iza o re s u ltante d o uso d e f olha s d e es tilo ,

m u ita s tag s e a tribu tos do HT ML so c on s id e rad as obs o le tas ou se u
u so d epre c ia d o, in c lu s ive m u ita s d as q ua is en s in ad as n es te tu to ria l.
S em p re qu e p oss ve l , u tiliz e CSS n os se us d o cum e ntos .
- 46 -
-----------------------------------------------------------------------------------------------------------
P ar a ma is in fo r ma es so b re Fo lhas de Est i lo em HTML, co nsu lt e os l in ks q ue

a nex ei a ba ixo :
Materiais de CSS http://www.codigofonte.com/css

Especificao HTML http://www.w3.org/TR/html4/present/styles.html
Cascading Style Sheets, level 1 http://www.w3.org/TR/1999/REC-CSS1-19990111
20.2 Templates
Q u em us a HTM L p ro va ve l me nte n o o fa z pa ra es cr eve r u m ni co d oc um ent o e

s im u m g ran d e n me ro de le s. S e v oc es t r e d ig i n do um te xto o u f a ze nd o um
s it e co m post o po r mui tos a r qu i vos, p rov ave l me nt e voc dese ja q u e to dos se us
d o cu me ntos HTM L te nh am a mesm a ap ar nc ia o u o mes mo es t ilo.
P ar a un i for m i za r o es t il o e a a p res en ta o, vo c p o d e c r iar u m m ode lo,

t am b m con h ec i do com o T em p la te, qu e co nt en ha o es q ue let o d e q ua l que r
p gi na de u m s ite o u tex to q u e se ja d i v i di do em v rios a r qu i vos. Ess e
t em p la te po de con te r m e nus, tabe las e to dos os ca m pos qu e vo c f or ut i li za r.
Ex is te m ain d a os mo tor es de t em p lat e, q u e s o so ft wa res q u e j un tam o

c on te do c om os tem p la tes e p r o du ze m p g in as HTM L. C r ia r um t emp l ate
d e pe n de do gosto de cad a um , po r m se voc pr e te nd e uti l i za r u m s t io
a uto ma ti zad o ex ist em v r ios m oto re s de t em p la te q ue voc p od e ut i li z ar,
c om o po r ex em p lo:
F r eeMa r ke r: u m tem p la te e ng i n e. El e fa ci l it a a gera o de t ext ua l

(HTML, PostScript, TeX, source code, etc) e aj u da a s ep ara r ed i o d e
d es i gn da l g ica . I nt eg r ad o co m se r v lets , XM L, P yt ho n e mais .
S ma rt y : u ma c lass e d e te m p lat es. Fu n cion a de u ma f o rma q ue se pa re

i n te r fac e d a l g ic a d e pro g ram a o e te m p or ob j et ivo, fac i l ita r e
m e lh ora r o d ese n vo lv im e nto de qu al q ue r a pli ca o e m P HP.
20.3 Acessibilidade
U ma c ons id e ra o imp o rta nt e ao esc re ve r s eus do cum e ntos HTM L o q uo

u sv e l e ac ess v e l e le , ta nto e m te r mos v isu ais qu an to na or g an i za o d o
c on te do. L e mb r e-se q u e to dos os t i pos de pesso as po de m ac essa r se u s it e,
d es de as le i gas at as es pe c ial ist as no assu n to q ue vo c t rat a, d es de a qu el as
q u e j co nh e ce m o s it e at as q u e n un ca ou v i ram fa la r d el e. S e u con te d o
t am b m pre c isa es ta r o r gan i za do pa ra qu e ao lo ng o do te mpo as c ois as no se
p e rc am.
P ar a t e r u m b om n ve l d e u sa bi l i da de e m se u s it e, si ga a s s eg u in tes
r e com en da es :
Use esq uem as si m p les

A na ve ga o do se u s t io de ve ser i nt u it iv a
C r i e s e es d o t ip o "So b re es te s t io ", " Qu em s omos ", e tc
Use n d i ces na me d i da d o poss vel
Es c re va r esu mos
Use re fe rn c ias
Use um a lg i ca pa ra os n om es d e a rq u iv os e p astas
E v ite usa r f r am es, e las b lo qu e ia m o mo do nat u ra l d e s e nav eg a r pe la
web
- 47 -
-----------------------------------------------------------------------------------------------------------
Es co lha mai s d e u m est i lo pa ra se u s t io e e v ite usa r c om b ina es d e

c or es q ue d i f i cu lt em a vis ua l iza o
D is po n i bi l i ze , na me di d a do poss ve l, s eu co nt e do e m ma is d e u m
f o rma to : tex to si m pl es, doc u me nto HTM L, etc
D is po n i bi l i ze s eu c on te do e m co p yl ef t ou e m o ut ras li c en as
Va l i de s eu HT ML : ve r i fi q ue s e s eu c d ig o HT ML es t v l ido ou se
e xis te m i nco r re es
A ac ess ib i li d ad e de um s ite ta mb m le va e m co nsi de ra o os p o rta do res d e

n e cess i da des esp ec ia is.
O W3 C poss ui l i nha s g e ra is de r e co me nda o q uant o a cess i bi l i da de d o

c on te do de do cu me nt os q ue u sa m l i ng ua ge m de ma rc a o.
20.4 Sites dinmicos ou automatizados
S e u t exto o u si te p o de se r c om pos to s im p les men te p or m e ia d z ia d e

d o cu me ntos HT ML e t e r po uca ou ne n hu ma at ua liz a o ao l o ngo d a s ua
e xis t nc ia. C aso na da d i sso se ja v e r dad e e v oc es t f a ze nd o alg o gr an de o u
e nt o voc n o te m te m po pa ra es c re ve r seu c d i go HTM L n a m o, ta lv e z se ja
o mo me nto d e co nsi de ra r a a do o de um s ist ema aut oma t iza do. Des tac o tr s
t i pos de les:
Ge re n cia dor es de c on te do
Bl o gs
W ik is
Ge ren c ia do re s d e co n te d o so so ftw ares q u e ro da m em se rv i do re s e q u e

a d mi n ist ram i n fo rma es d is po n v e is e m s ites . Mu it os s it es na web so a p enas
a r qu i vos ht m l, mas t am b m ex ist em s ites a uto mat i za dos q ue p e rm it em
a r maz en ar o co nte do d as p g inas nu m ban co d e d ados e a pa rti r d esse ban co
c r ia r mu it as p g inas h t ml e a i nd a man te r o s is te ma d e b usca e a p u bl i cao
se m q ue pa ra iss o o u su r io p re c ise sa be r h tm l ou qu al q ue r out ra li n gu age m
d e ma r cao. A l gu ns ge r en c iad o res d e c on te do p e r mite m q u e e xis tam
u su r ios ca pa zes d e a d ic io na r co me nt r ios e m p u b li ca es ex iste nt es o u at
m es mo c r iar suas p r pr i as p g in as at ra vs do pr ee nch im e nto de fo r mu l ri os.
O s B lo gs so cas os es p ec ia is de g e re nc iad o res d e co nt e do qu e f un c iona m

c om o d ir ios o u co lun a de e d ito r ia l, o n de o do no do blo g a dic io na t exto ,
i m ag ens e c di go HTM L no s it e a pe nas pr ee n ch en do u m fo rm u lr i o.
J os W ik is so fe rr am e ntas que pe rm i te m q ua l qu er p esso a cr iar o u e di ta r u m

t ext o u ti l i za n do u ma l i n gu ag em d e ma rca o es pe cia l e ma is s im p l es d e se r
u t i li za da do q ue o HTM L. D uas c a ra cte r st i cas p r in ci p ais d os s ist emas W ik i
so : v oc p o de cr ia r f ac i l me nte u ma no va p gi na s imp l es me nte es co l hen do u m
n om e es pe c ia l pa ra e la e es cr ev e r na p gi na j e xis te nt e. A o ut ra
c ar ac te rs t ic a dos wi ki s a p r ese r va o d as m od i f ica es : o w ik i poss u i um
h is t ri co de tod as as m o di f ic aes fe it as nu m doc u men to.
O s ge r en cia do res de c on te do, b l og s e wik is so es cr i tos na l g um a l in g ua ge m

d e p ro g ram a o como PH P, Pe rl , Py th on, Ja va, Ru b y e m u it as v e zes u ti l iza m
u m ba nco d e da dos p a ra ar maz e na r o con te do. Com u m po uc o d e est ud o,
v oc p od e es c re ve r se u pr p r io s ist ema o u e nt o ut i l iz a r u ma sol u o p ron ta,
c om o po r ex em p lo:
- 48 -
-----------------------------------------------------------------------------------------------------------
Ge ren c ia do re s de c on te do : Dr u pa l, S P IP, e tc
W ik is : P mW ik i, Ph pWi k i, M ed iaW ik i, TW ik i, e tc
B lo gs : b 2, Wo rd P ress, e tc
20.5 - Web standards e validao
Nes ta l i o v oc a p ren d er ma is a lg u ns con c ei tos te r i cos do HTM L.
20.5.1 - O que mais h para conhecer sobre HTML?!
HTM L po d e se r esc r ito de v r ias ma ne i ras. O n av eg ado r est ap to a le r HTM L

es c ri to de v rias ma ne i ras. P od em os d i ze r q u e HTML t em mu i tos d ia l etos. Est a
a raz o p o rq ue a l gu ns w ebs i tes so a p res en ta dos de for mas d i ve rsas e m
d i f er en tes n av e ga dores .
D es de o ap a re ci me nto da I nt ern et t e m s id o f ei tas v r ias te ntat i vas p ara s e

n or ma ti za r o HTM L n ota da me nt e at ra vs d o World Wide Web Consortium
(W 3 C) fu nd a do po r T im Be r ne rs- Le e (yep! o grande sujeito que inventou o
HTML) . Mas, es te t em s ido um rd u o e lo n go c am i nho.
No passa do - quando voc tinha que comprar um navegador o Netsc ap e

d o mi na va o m er ca do d e n av e ga do res. qu e la poca a s no rmas pa ra o HTM L
es ta vam nas su as ve rs es 2. 0 e 3. 2. Mas pe lo fat o de do mi na r 9 0 % d o
m e rca do a Nets ca pe n o te r ia - e n o te ve - qu e s e p r eoc u pa r m u ito c om
n or mas. Pe lo co nt rr i o, a Ne ts ca pe in ven ta va se us pr p r ios e l em en tos d e
m a rca o qu e n o f unc io na va m em ou tros na ve ga do res.
P or mu it os an os a M ic roso ft i g no rou co m p let am e nte a I n te rn et. Em

d e te rm i na do m om en to, reso l veu co mp et ir co m a Ne tsca p e e la no u se u
n av e ga dor p r p r io. A p r i me i ra ver so do n av e ga do r da M i c roso ft 's, o I nte r ne t
Ex p lo re r, no era me lh or do q ue o Ne tsca pe no su po rt e s no r mas do HTML .
Mas, a Mi cr oso ft res ol v eu d ist r i bu i r s eu na ve ga do r g rat u ita me nt e ( is to se m pre
a g ra da a to dos ) e o In te r ne t E xp l or e r em p o uco t empo to r nou -se o na ve ga do r
m a is usa do e mais pop u la r.
A pa rt i r das v e rses 4 e 5 a Mi c roso ft an un c ia va q ue se us na ve ga dor es

o fe re c iam c ad a v e z ma io r s upo r te s n or mas HTM L do W 3C. A Nets ca pe no se
m ov i me ntou pa ra a tua l iz ar s eu n av e ga dor e co nt in uou a co lo ca r n o m er ca do a
v e lh a e d esa tua l i zad a v e rso 4.
O q ue v em a s eg u i r h is t ri a. Nos d ias at ua is as nor m as HTML es to na s ua

v e rso 4. 01 e n o XHTM L. H oj e e m d ia o I n t er ne t Exp lo re r q ue d et m q u ase
9 0 % d o m er ca do. O In te r ne t Exp l or e r ai n da te m se us e le m en tos p r p r ios, m as
o fe re ce sup o rte pa ra as no r mas HTM L do W3 C . Os na vega do res Mo z il la, Ope ra
e Ne tsc ap e ta m b m su p or tam as n or mas.
E nto , quan d o v oc c o di f ica HTM L de a co r do com as no rm as d o W 3 C, v oc

es t c ons tru i n do u m w e bsi te par a se r vis ua l iz ado em to dos os n av e ga dores -
n o s a gor a m as tam b m no fu t uro . E f el i z me nt e, tud o o q ue v oc a pr end e u
n est e t utor i al est de a co r do co m a ma is n ova ve rso do HTM L, q ue o
X HTML.
- 49 -
-----------------------------------------------------------------------------------------------------------
20.5.1.1 - Legal!! Posso anunciar?!
D e v ido e xis t nc ia d e di f er en tes ti pos de HTM L, vo c pr ec isa in fo rm ar ao

n av e ga dor q u al o "d i al eto " do H TML e no se u caso v o c a pr en d eu XHTM L.
P ar a i n fo rm a r ao na ve ga do r, v o c usa o Document Type Definition . O
Document Type Definition d e ve se r es c ri to se m p re no to po do do cu m en to:
Ex em p lo 1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Ttulo</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>
A l m d o Do cu m en t T y p e Def in ition, q ue i n fo rma ao na ve gad o r qu e vo c

es t co di f ic an do XHTM L, voc pr e cis a a in da a d i ci onar i n fo r ma o ext ra na t ag
h t ml , usa nd o os at r ibu tos x m lns e lan g.
x m lns a b re vi ao d e "XM L- Na me -S pac e " e dev e te r sem p r e o va lo r

h tt p :/ /ww w.w 3.o r g/ 1 99 9 /xh tm l. Ist o t u do o q ue voc p r ec isa s ab e r. Se voc
t em o h bit o o u gosta de se a p ro fu n da r e c on he ce r co isas c om pl i ca das po de r
l e r ma is sob r e na m esp a ce s no si t e do W 3C.
namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names-19990114
No a tr i b uto lan g vo c es pe c f ica em q ue l n g ua (aqui trata-se de linguagem

humana) o do c um en to es cr it o. As a br e via tu ras p ara as l ng uas ex ist en tes no
m u n do to do, es to nas ISO 639 standard . No exe m p lo ac i ma a l n g ua d ef i ni d a
n o at r ib uto o por tu gu s do Bras i l ("pt-br") .
U ma DT D in fo r ma r ao n av eg ado r co mo de ve s er l ido e re nd e riz a do o HTM L.

Use o exem p lo m ostr a do, co mo u m te mp l ate p a ra t o dos os s eus f u tur os
d o cu me ntos HTM L.
O DT D im p or tan te a in da , pa ra a va l i da o da p g i na.
20.5.1.2 - Validao?! Porqu deveria eu fazer isto?!
I ns i ra o DTD nas s uas p g i nas e p o de r v e rif i ca r e rr os n o se u HTM L, usa n do o

v a li da do r gr at u ito do W 3C. ( ht tp : // va li da to r.w 3.o r g )
P ar a tes tar o va l i dad o r fa a o se g u in te: c ri e u ma p gi na e p ub l i qu e n a

I n te r net. A se g ui r e ntr e e m h tt p: // va l id ato r.w 3.o r g e l di g it e o e n de re o (a
URL) da su a p g i na, d e po is c liq u e no bot o va l i dar. S e seu HTM L est iv e r
c or r eto, va i a pa re cer u ma me nsa ge m d e con g rat u la es. S e no, se r
a p rese nt ada u ma l ista d e e r ros, in fo r ma nd o o q u est e r ra do e on d e. Co me ta
a l gu ns e r ros pro pos i tai s no se u c d ig o pa ra v e r if i car o q u e aco nt ec e.
O va l id ador no ti l so me nt e no e n cont ro de e r ros. Al g uns na ve ga dor es

t en ta m i nte r p ret ar os e r ros c om et i dos pel os dese n vo l ve do res e co nse rtar o
- 50 -
-----------------------------------------------------------------------------------------------------------
c di go m ost ra n do a p gi na co rr e tam en te. Em n av ega do res assi m voc nun ca

e n con tr ar e r ros n o p r p r io nav e ga do r. J ou tr os na ve ga do res n o ac e itam o
e r ro e ap rese nt am a p g ina a r ru in a da o u mes mo n em ap rese nt am . O va l ida do r
e nt o a j uda v oc a e n con tr ar e r ros q ue v oc no te nha ne m i d ia d e qu e
e xis t iam
S e mp re val i d e suas p gi nas, pa ra t e r cer t eza q ue e las s er o most ra das

c or r eta me nt e e m to dos os na v ega do res.
21 - GUIA DE REFERNCIA RPIDA

C o mo res um o de to do o c d i go HT ML ap res en ta do at ago ra, d e ixo al g um as
t ab el as de r e fe r n ci a r p id a que p od em se r a t i m pressas e gu ar da das no
b o lso.
Ca rac te rstic as g e rais d e u m d o cu me nto H TML

C DI GO F UN O E XI GE FECH AMEN TO
html bloco interno considerado documento html sim
head bloco que define a cabea do documento sim
title bloco que define o ttulo do documento sim
body bloco interno considerado o corpo do html sim
Ap a r nc ia d o do cu me n to
b bloco em negrito sim
i bloco em itlico sim
u bloco sublinhado sim
font muda as caractersticas da fonte sim
pre mantm o texto pr-formatado sim
Qu eb ra d e linh a, p ar g ra fo s e d iv is es
br quebra de linha no
center texto centralizado sim
p pargrafos recomendado
div cria uma diviso sim
Atribu to s d ive rso s

C DI GO AT RIB UTO F UN O V ALO RES POS SVEIS
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 tpico de cores
E sp a am en to e en tid a de s
espao simples no uma tag
O d ocu m en to H T ML b s ic o
<html>
<head>
<title>Aqui colocamos o ttulo</title>
</head>
<body>
Aqui colocamos os contedos visveis
</body>
- 51 -
-----------------------------------------------------------------------------------------------------------
<html>
E lem en tos d e c abe a lh o (para captulos ou seces)

<h1>Cabealho maior</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . . </h4>
<h5>. . .</h5>
<h6>Cabealho menor</h6>
E lem en tos p a ra te xto

<p>Isto um pargrafo</p>
<br> (mudana forada de linha)
<hr> (linha horizontal)
<pre>Isto texto pr-formatado</pre>
E s tilos lg ic os
<em>Isto texto enfatizado</em>
<strong>Isto texto forte</strong>
<code>Isto cdigo de computador</code>
E s tilos f sic os
<b>Isto texto em negrito</b>
<i>Isto texto em itlico</i>
L iga es e nc o ra s
<a href="http://www.tiagosouza.com/">Isto uma Ligao</a>
<a href=" http://www.tiagosouza.com/"><img src="URL" alt="Texto alternativo"></a>
<a href="mailto:tiagocopa@gmail.com ">Enviar e-mail</a>
Um a n cora c o m n om e:
<a name="dicas" id="dicas">Dicas teis</a>
<a href="#dicas">Saltar para a Seco de Dicas</a>
L is ta n o o rd ena da
<ul>
<li>Primeiro item</li>
<li>Item seguinte</li>
</ul>
L is ta o rd en ad a
<ol>
<li>Primeiro item</li>
<li>Item seguinte</li>
</ol>
L is ta de de f in i es
<dl>
<dt>Primeiro termo</dt>
<dd>Definio</dd>
<dt>Termo seguinte</dt>
<dd>Definio</dd>
</dl>
T ab e la s
<table border="1">
<tr>
<th>um cabealho</th>
<th>outro cabealho</th>
</tr>
<tr>
<td>algum texto</td>
<td>mais texto</td>
</tr>
</table>
- 52 -
-----------------------------------------------------------------------------------------------------------
S ubjan e las (molduras, ou "frames")

<frameset cols="25%,75%">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frameset>
F o rmu l 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>
E ntida d es
< representa o mesmo que <
> representa o mesmo que >
© representa o mesmo que
Ou tros E le m en tos

<blockquote>
Texto citado a partir de uma fonte externa.
</blockquote>
<address>
Endereo (1 linha)<br>
Endereo (2 linha)<br>
Cidade<br>
</address>
22 REFERNCIAS COMPLETAS DE HTML 4.01

To dos os e le me nt os ord e na dos a lf a bet i ca men te :
ELEMENTO DESCRIO
 Permite inserir um comentrio
<!DOCTYPE> Indica o tipo de documento usado na pgina
<a> Insere uma ncora (marca que identifica o local do documento em que se
encontra)
<abbr> Insere uma abreviao
<acronym> Insere um acrnimo
<address> Insere um endereo (postal)
<applet> Insere um applet (miniaplicao em Java) Desuso (utilize <object>)
<area> Define uma rea sobre uma imagem
<b> Insere texto carregado (negrito ou "bold")
<base> Define o URL base de onde partem todas as ligaes relativas da pgina
<basefont> Define o tipo de letra base para a pgina. Desuso (usar CSS)
<bdo> Define a direo em que o texto apresentado
<big> Texto com letra maior
<blockquote> Define uma citao extensa
<body> Elemento que contm o corpo (contedo visvel) da pgina
- 53 -
-----------------------------------------------------------------------------------------------------------
<br> Provoca uma mudana de linha forada

<button> Insere um boto num formulrio
<caption> Define a legenda de uma tabela
<center> Texto alinhado ao centro. Desuso.
<cite> Insere uma citao
<code> Define o texto que cdigo de computador
<col> Define os atributos para as colunas de uma tabela
<colgroup> Agrupa colunas numa tabela
<dd> Insere texto que descreve uma definio
<del> Define texto que foi apagado ("deleted")
<dir> Mostra uma lista de diretrio. Desuso.
<dfn> Insere a definio de um termo
<div> Insere uma diviso (ou seo) dentro da pgina
<dl> Insere uma lista de definies ("definition list")
<dt> Insere a definio de um termo
<em> Insere texto enfatizado (escreve-se em itlico)
<fieldset> Elemento que contm um grupo de campos de um formulrio
<font> Define o tipo de letra, o tamanho e a cor a aplicar ao texto. Desuso.
(usar CSS)
<form> Insere um formulrio
<frame> Define uma subjanela (moldura) dentro da janela principal do browser. A
subjanela contm a sua prpria pgina da Web
<frameset> Insere um conjunto de subjanelas ("frames")
<h1> a <h6> Define cabealhos ("headers") desde o nvel 1 (mais importante) at ao
nvel 6 (menos importante)
<head> Contm informao importante a respeito do documento que no deve ser
apresentada no corpo da pgina
<hr> Desenha uma linha horizontal
<html> Elemento dentro do qual so colocados todos os restantes elementos da
pgina
<i> Insere texto para ser escrito com caracteres itlicos
<iframe> Insere no interior da pgina da Web uma subjanela ("frame") contendo a
sua prpria pgina da Web
<img> Insere uma imagem
<input> Define uma caixa para insero de texto num formulrio
<ins> Define texto que foi inserido em substituio de outro mais antigo
<isindex>
<kbd> Define texto inserido atravs do teclado
<label> Define uma marca que ser associada a um controlo. Ao clicar nessa
marca, o controle que estiver associado dever ser acionado.
<legend> Define um ttulo num elemento <fieldset>
<li> Define um item de uma lista
<link> Faz referncia a um recurso externo e estabelece a ligao com ele
<map> Define um mapeamento sobre uma imagem
<menu> Define uma lista de menu. Desuso.
<meta> D informao sobre aquilo que o documento contm
<noframes> Define um bloco noframes, o qual s ser apresentado se o browser no
suportar os elementos <frameset> e <frame>
<noscript> Define um bloco noscript, o qual s ser apresentado se o browser no
suportar o elemento <script>
<object> Insere um objeto dentro da pgina (como um filme em Flash, por
exemplo)
<ol> Define uma lista ordenada
<optgroup> Define um grupo de opes
<option> Define uma opo numa lista de um formulrio
<p> Insere um pargrafo
<param> Define um parmetro para o elemento <object>
<pre> Define texto pr-formatado
<q> Define uma citao curta
<s> Define texto que se escreve com um trao horizontal sobreposto
("strikethrough") Desuso. (usar CSS)
- 54 -
-----------------------------------------------------------------------------------------------------------
<samp> Define uma amostra ("sample") de cdigo de computador

<script> Insere um script
<select> Define uma lista com itens selecionveis
<small> Define texto menor ("small")
<span> Insere uma diviso (ou seco) dentro da pgina
<strike> Define texto que se escreve com um trao horizontal sobreposto
("strikethrough") Desuso (usar CSS).
<strong> Define texto mais forte (ser escrito em negrito)
<style> Define estilos CSS a aplicar na pgina
<sub> Define texto que fica alinhado um pouco mais abaixo ("subscript")
<sup> Define texto que fica alinhado um pouco mais acima ("superscript")
<table> Define uma tabela
<tbody> Define um corpo ("body") numa tabela
<td> Define uma diviso, ou clula, numa tabela
<textarea> Define uma rea para insero de texto num formulrio
<tfoot> Define o rodap de uma tabela
<th> Define o cabealho de uma coluna numa tabela
<thead> Define o cabealho de uma clula numa tabela
<title> Define o ttulo da pgina
<tr> Define uma linha de clulas numa tabela
<tt> Define texto que imita o de uma mquina de escrever antiga ("teletype
text")
<u> Define texto sublinhado ("underlined") Desuso (usar CSS)
<ul> Define uma lista no ordenada ("unordered list")
<var> Define uma varivel
23. ATRIBUTOS ESPECIAIS DE HTML 4

23.1 - Atributos intrnsecos
Q uas e t odos os e lem e ntos do HTML p oss ue m a tr i bu tos. O s a tr i bu tos

es p ec fi cos d e ca da e l em en to so des c rit os j un to des cr i o do p r pr i o
e l em en to n a Re fe r n cia d e H TML (veja mais acima) . O s a tr i bu tos
a p rese nt ados na l ist a se g ui nt e fa ze m p ar te d o n c leo ("core") da li n gu ag em
HTM L e so ra ras as e xc e es qu e po de m se r usa das e m to dos os el e me ntos
d o HTM L 4, p or q ue so at r i bu tos i n tr nse cos da l i nguag e m.
23.2 - Atributos nucleares ou intrnsecos (" Core Attributes ")
No pod em se r usa dos co m os el e me ntos ba se, h e ad, h tm l, me ta, p a ram,

s c rip t, s tyle, e title.
AT RIB UTO V ALO R DES CRI O

class class_rule ou style_rule A classe (CSS) a que pertence o elemento
id id_name Um nome nico (no deve ser repetido no
mesmo documento) para o elemento
style style_definition Definio de um estilo dentro do prprio corpo
do documento ("inline style definition")
title tooltip_text Texto a apresentar como dica
23.3 - Atributos lingsticos
No po de se r us ado co m os e l em en tos bas e, b r, f ra m e, f ram es e t, h r,

if ram e , para m e s c rip t.
- 55 -
-----------------------------------------------------------------------------------------------------------

dir ltr | rtl Define a direo do texto
lang language_code Define o cdigo da lngua usada na escrita dos textos
23.4 - Atributos de teclado

accesskey carcter (corresponde a Define um atalho do teclado (seqncia de
uma tecla) teclas) que permite aceder mais rapidamente a
um elemento da pgina
tabindex nmero Define o nmero de ordem ("tab order") do
elemento no acesso atravs da tecla tab
23.5 - Eventos de janela
A p ar ti r da ve rso 4 d a li n guag e m HTM L p r at ica m en te to dos os el em en tos

p o de m d ese n cad ea r ev e ntos qu e t m com o r es post a a e xe cu o d e a es p o r
p a rte d o na ve ga do r, c om o po r ex em p lo, exe c uta r c dig os J ava S cr i p t qu an do o
v is i tan te c li ca r n u m de te r mi na do e le me nto . A lis ta a pr es en tad a m a is a ba ixo
m ost ra os a tr i bu tos qu e p od em os i nse r i r nos e le me ntos do HTML pa ra d e fin i r
a es de res pos ta a e ve nt os.
S po d em se r usad os c om os e l em e ntos <bo d y> e <fra m es e t>

onload script Script a executar quando o documento acabar de ser
carregado
onunload script Script a executar quando o documento for abandonado
23.6 - Eventos para formulrios
S po d em se r usad os c om e l em en tos asso c ia dos a u m fo rm u lr io :
ATRIBUTO VALOR DESCRIO

onchange script Script a executar quando o valor contido no elemento sofrer
uma alterao
onsubmit script Script a executar quando o formulrio for submetido
onreset script Script a executar quando o contedo do formulrio for
reposto nos valores iniciais
onselect script Script a executar quando o elemento for selecionado
onblur script Script a executar quando o elemento perder o foco
onfocus script Script a executar quando o elemento ganhar o foco
23.7 - Eventos de teclado
No p od em s e r usa dos co m os e le me nt o base , b do, b r, f ra me, f ra mes et, h ea d,

h t ml , i fr ame , me ta, pa ra m, sc r ipt , s ty l e, e ti t le.

onkeydown script Script a executar quando uma tecla pressionada
onkeypress script Script a executar quando uma tecla pressionada e
seguidamente libertada
onkeyup script Script a executar quando uma tecla libertada
- 56 -
-----------------------------------------------------------------------------------------------------------
23.8 - Eventos do mouse
No po dem s er usad os co m os e le me ntos base, b do, br, f ram e, fra mese t,

h ea d, h tm l, i f ra me, me ta, par am, sc r i pt, sty l e e t it le .

onclick script Script a executar quando detectado um clique no rato
ondblclick script Script a executar quando detectado um clique duplo no rato
onmousedown script Script a executar quando o boto do rato pressionado
onmousemove script Script a executar quando o ponteiro do rato muda de posio
onmouseout script Script a executar quando o ponteiro do rato deixa de estar
sobre um elemento
onmouseover script Script a executar quando o ponteiro do rato passa a estar sobre
um elemento
onmouseup script Script a executar quando o boto do rato libertado
24. O PRESENTE E O FUTURO DO MARKUP

A s l i ng uag e ns d e m a rca o se mos trar a m fo r mas po de ros ss imas pa ra
a r maz en ar e cat eg or i za r co nt e do, t an to q u e e las est o s en do d es en vo lv id as
p a ra a como da r da dos c om d i fe re nt es pr ops it os, in clu i n do re p res en ta es d e
r ot eam en to d e c ha mad as te le fn i cas, f rm u las ma te m ti cas e e s que mas d e
c la ssi f ica o de r em d ios. Nos p rx i mos t pi cos ve re mos c om o essa
g e ne ra l iza o es t tom an do fo rm a.
24.1 - O consrcio da Web
O HTML e d e ma is l in g ua ge ns d e ma rca o so a tu al m ente re g u lam en ta dos

p e lo Wo rl d Wi d e W eb C onso r ti um , o Co nsr c io da W eb ou s im p les me nt e W3C ,
u ma i n ic ia ti v a cr ia da p a ra pa d ron i za r m ui tas d as t ecn o log ias d e i n fo rm ao
s ur g i das com o a d ve nto da I nt e rne t.
O s u cesso d o HTM L l e vou a d i v ers os pes q u isa dores a ex plo ra r ma is as

p oss i bi l i dad es das l i ng u ag ens de m ar ca o q u e:
A co mo de m b e m o t ip o d e i n fo rma o qu e pr e te nd em ar maz ena r

S e pa re m o c on te do da vis ua l iza o
P ossa m s er i n te rp r etad os por d ive rsos p ro gra mas
A ab or da ge m qu e as pes qu isas n a r ea es co lh er am fo i a bu sca po r u ma

g e ne ra l iza o to ta l das l i ng ua gen s e du as m et al i ng uag e ns (linguagens usadas
para definir linguagens) fo ra m de f in i das : o S GML e o XML.
24.2 - SGML e HTML
O S GML (ou Standard Generalized Markup Language, Linguagem de Marcao

Genrica Padro) fo i a pr i me i ra g e ne ra l iza o de li n gua ge m d e ma rc ao a se r
l a rg am en te a do ta da. C o mo meta l in g ua ge m, o S GML u t il i za do pa ra d efi n i r
n ov as l i ngu a ge ns d e m ar ca o e a tu al me nt e o HTM L de f ini d o at ra vs de
S GML.
- 57 -
-----------------------------------------------------------------------------------------------------------
24.3 XML
O XML tam b m um a l in g ua ge m d ef i n ida so br e S GM L, mas que se rv e pa ra

d e f in i r l in gu a ge ns de m a rca o co m p ro ps it os esp ec fi co s e co m u ma si nt ax e
b e m es tr i ta. O XML m a is si m p les d e se r in te r p ret ado v ia so ftwa re e p or isso
t em ga n ho b ast an te vi s ib i l id ad e. Ex em p los d e l in g uage ns de ma rc a o c r ia das
e m XM L so :
M a th ML: u sa da pa ra n ota o ma te mt ic a.
R DF: usa do pr i nc i pa lm e nte pa ra a rma z ena r n ot c ias.
V o ic e XML: p r oj eta da p a ra esq u em at iz ar c on ve rsas e nt re um se r
h u ma no e u m com p uta do r.
XHT ML: um a v ers o d o HTM L ma is si m p les e es c ri ta em XML .
24.4 - RDF e Syndication
E m esp ec ia l, o R DF (Resource Description Framework) um a l in g uag e m

u t i li za da pa ra c ri ar um a o ut ra so pa d e let r in has con h ec i da com o RSS (RDF
Site Summary, ou Contedo de Stios em RDF) , qu e u m c on t in e r p a ra
a r maz en ar i n fo r ma es de s ites n a i nt er ne t.
P or exe m pl o, se vo c q ui sesse d i v u lga r n ot c ias veic u la das do s it e iM ast e rs

d e nt ro de se u p r pr i o we bs ite , vo c TE RI A q ue f az er u m p ro g ra ma b e m
c om p l ica do p a ra ex tr a ir essa i n fo r ma o d o HTM L, mas o s it e iM aste rs
t am b m o fe r ece s eu c on te do em R SS, que na da mai s do que u m ar q u iv o
es c ri to num d ia le to X ML qu e co nt m os t t u los, as data s e os/ as au tor es das
n ot c ias n um a es tr ut ur a be m r g id a, qu e pod e s er facil m en te in te r p ret ada p o r
o ut ros s i tes e p ro gram as. E nt o, se al g u m q u ise r di v u l ga r a l gu m ti po d e
c on te do pu b l ic ad o no s i te iMast e rs de nt ro d e se u s ite , basta uti l i za r o RSS
d o i Mast ers.
* iMasters um site voltado a desenvolvedores web, muito bem conceituado. www.imasters.com.br
O R SS r esol v eu o p ro bl e ma d e jun ta r i nf or ma es de d if e re nt es s ites , ca da um

d e les esc r it o em u m d e te rm i na do so ft wa re o u usa n do de te rm i na do t em p late
HTM L. A lm d isso, o RS S pe r mi t e q ue a in fo r ma o d o s it e se ja o bt i da p or
q u al q ue r s ist em a d e tr ata me nt o d e in fo r ma es (ou tro s it e, u m p r og ra ma q u e
f a z a le i tu ra de n ot c ias, um a par e lh o m vel , et c) .
O RS S su f i ci en te me nt e co m p le to pa ra pe r mi t ir ta mb m qu e in fo r ma es d e
c on te dos m u lt i m d ia se ja m dis t ri b u das. Exe m p los disso s o os p o dcas ts e o
v o dcas t. O p o d ca st o RS S qu e co nt m i n f or ma es d e ar q ui v os de ud io
d i sp on ve is e m u m s it e (por exemplo, udios de notcias, msicas ou
programas de rdio) . Um toc ad or d e u d io po de se r c ons ta nte me nt e
a l im en ta do co m u m po d cast e co m as i nf or m a es con ti das ne l e b ai xar t odos
os u d ios a uto ma ti cam e nte , sem i nt e rv en o do usu rio. Co m u m v od cas t
s im i la r e co ns iste num R S S pa ra a r qu i vos d e v d eo.
25. DICAS FINAIS

S e vo c est le n do is to a qu i n este mom en to, p ara b ns, iss o s i gn i fi ca qu e vo c
c e rta me nt e es t ap to c om o con te do a qu i tr an sm it i do.
Ento, agora eu j sei tudo?!

Vo c a p re nd e u u m boc ad o d e coi sas e j est e m co ndi es d e c ons tr u i r se u
w e bsi te. No en ta nto o q ue vo c a p re n de u o bs i co e a in da h m u i ta co isa a
- 58 -
-----------------------------------------------------------------------------------------------------------
se r ap er f ei oa da. Pod e mos d i ze r q ue voc co nst rui u u ma base s li da p a ra

c on ti n ua r e se a p rof u nd a r no assu n to.
Nes ta lt i ma li o, de ixo a l gu mas d i cas fi na is :
P ar a com e ar , a co nse l ha mos a es cr ev er se us d oc um e ntos HTM L de

f o rma o r de na da e est r ut u rad a. Ass i m faz e nd o vo c e sta r n o s
m ost ra nd o aos ou tr os qu e poss ui u ma bas e s li da d e co nh ec i me nt o,
m as ta m bm es tar fa ci l it an do a le i tu ra, in te r p ret ao e man ut en o
d o c d i go.
S i ga as nor m as e va lid e s eu c di g o. Mas, n o fa a di sto u ma fo nt e d e

st r ess. Es cr e va u m XHTM L c lar o, us e o DTD e v al i de s uas p g in as no
h tt p :/ /va l i da tor .w 3c.o rg
C o lo qu e con te dos nas s uas p gi na s. L em br e-s e qu e HTM L ape nas a

f e r ram en ta q u e poss ib i l it a a pr ese nt ar i nf or m ao na I n te r net, ass i m
n e cess r io q u e ha ja a in fo r ma o a ser a pr ese nta da o u se ja, o
c on te do. P g i nas l ind as e be m d es en ha das s o ti mas, mas as p esso as
b us ca m i n fo r ma o na In te rn et.
E v ite en ch e r suas p gi nas c om im a ge ns pes ad as e o utros

" ba la n ga nda ns" qu e v oc en con t ra na In te r ne t. Ist o fa z com s uas
p gi nas dem o re m a ca r re ga r e f r ust ra nte p ara o usu r io. P gin as q ue
d e mo ram m a is de 20 s e gu n dos par a ca rr e ga r po d em p erde r a t 5 0%
d os se us v is ita nt es.
L e mb r e-se d e ca das tr a r se u s ite nos si tes de b us ca, d e m od o a q ue

o ut ras pessoas , al m d a s ua f am l ia, possa m e nco ntr- las e v is it -la s.
Na p g ina d e en tr ad a d os s i tes p a ra cad ast ro em m ecan is mos de b us ca
v oc en co nt ra r u m l in k pa ra a di c io na r s eu si te (o mais importante o
Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista,
AlltheWeb e Lycos).
Nes ta a post i la vo c a p re nd eu a usa r o Bl oc o d e Not as, qu e u m

s im p les e f ci l e d ito r d e t exto s, c on tu do t alv e z vo c ag o ra p ossa p e nsar
e m us ar u m e d ito r m ais sof i st ica do c om ma is p oss ib il ida des e
f e r ram en tas. Vo c en co nt ra um a lis ta gem e s um r i o de di fe r en tes
e d ito r es em Su p er dow n loa ds. com . br o u p el o p r p r io Goo g le.
Como eu aprendo mais?!

A n tes de m a is n ada m u ito i m po rt an te q u e vo c c o ntin ue a tr ab al har e
e xp er i me nta r co m t ud o q ue voc ap re n deu n est e tut or ia l. Q uan d o e n con tr a r
a l gu m s it e q u e con te n ha u ma c o isa qu e v o c a che i nter essa nt e, es tud e o
c di go do s ite . No se u n av ega do r v ao me nu "View" - "Ver" e esc ol ha
"Source" - "Cdigo Fonte" p ar a ve r o c d i go d o s i te.
S nos rest a des eja r a vo c q u e p ass e ho ras a gra d ve is ao la do d o se u nov o

a m igo , o HTM L.
O que pretende divulgar?!

Q u e t ip o d e con te d o v oc po de a p res en ta r na We b ? ! P rat i ca me nt e o q u e
q u is er. E is a q ui a l gu ns t i pos d e c on te do m a is co mun s na We b, n o mo me nt o:
I nfo rma e s pe ss oa is: in fo rma es so b re vo c, por ex em p lo.

H obbies ou in te re sse s e sp ec ia is: fi l mes, moto c ic let as, et c.
P ublica e s: com o jo rn ais , re v ist as.
- 59 -
-----------------------------------------------------------------------------------------------------------
P e rf is de e m p re sa: o qu e u ma e m p resa faz ou ve nd e, e tc

Do cu m en ta o On -lin e: d esd e ma n uai s, g ui as d e t r ei na me nto,
d i c io nr ios, e tc.
Ca t lo go s d e co mp ra s: c om er ci a li za o de a rt i gos.
L oja s on lin e .
P es qu isas d e op in i o: a in ter at i vi da d e c om o usu r io a tr av s de
f o rm u lr ios, c ai xas d e su g est es, e tc.
E du ca o on line : n u me rosas un i ve rsi d ad es, esc ol as e em p r esas
p a rt ic u la res o fe re ce m o e nsi no a d is tn c ia a tra v s da We b.
O n ico l im i te da We b a sua p r p r ia von ta de. Po r i sso, s e a s ua id i a n o

es t iv er nest a l ist a ou p a re ce r m ei o m al uc a o u a in da no est iv e r a ma du re c i da,
p a re e nav e gu e u m p o uco pe la I nt e rn et. Co m c er te za e nc on tr a ex ce le nt es
i d ias e pod e r a ma du r ec er as su as e te r m u it as o ut ras.
Estabelea seus objetivos

Vo c de ve se pe r g un ta r os qu e se us le ito res pr oc ur am? ! O qu e des ej a r eal iz a r
c om sua ap r ese nta o ? ! E les le ro a pg i na i nt ei ra ou ap enas u ma par t e
d e la ? !
A n tes d e co me a r ent ra r co m c d ig os o u i m ag ens vo c d ev e p e nsa r o q u e

q u er o co loc ar e m m inh a p g ina ?! C o mo se r est r ut ur ad a ? ! E la est a de q ua da
o u no ao m e u p bl i co a lv o? !
O s ob je t ivos no p r ec is am se r g r an d iosos, mas a d ete rm i na o i r a ju d -l o a

e la bo ra r, or g an i za r e c o di f ica r su as p gi nas com u ma m a ior p rob a bi l i da de d e
s uc esso.
C aso v d ese n vo lv er u ma a p rese nt ao We b pa ra um a emp re sa o u p essoas

i m po rt an te q u e vo c c ol ha ju nt o ao s eu cl ie nt e se us o b jet i vos, id ias, a for m a
q u e ima g ina s ua p gin a, e tc. Ass im , f i ca r be m ma is fc i l de c om ea r se u
t ra ba l ho.
Divida seu contedo em tpicos

C r i e u ma list a co m os p r i nc i pa is t p i cos, a p r i nc pio no i mp or ta a o r de m. Es ta
um a fo r ma de c om ea r a se o rga ni za r.
S ua l is ta p o de r te r q u a ntos t p icos d ese ja r, mas se p e rca l i sta n do um a

q u an ti da de e no r me de t p icos (seu leitor poder se cansar e se perder em
meio a tantas opes).
Organizao e Navegao
A q u i de sc re ve r ei a l gum as das est r ut ur as e n av e ga o e s uas ca ra ct er st i cas e
a in da con sid e ra es im p or tan tes co mo :
O s t ipo s de i n fo rma o qu e s e ad a pta m m el h or a c ad a es tr ut u ra.
C o mo os lei to res co nse g ue m se d es lo ca r pe lo co nte do de ca da t i po de

es t ru tu ra pa ra e nco ntr a r a s i nf orm a es d e q u e p re c isa m
C o mo Te r c e rte za de q u e os l e it or es co nse g ue m se lo ca li za r n os se us
d o cu me ntos (contexto) e a ch ar o ca mi n ho de vo lt a at uma p os i o
c on he c id a.
A o le r esta p a rt e re f lit a c omo su as in fo r ma es se en ca ixa r ia em c ad a u ma.

Vo c po de r com b i nar, a t mes mo, d uas es tr u tu ras e cr i ar um a no va fo rma d e
n av e ga o.
- 60 -
-----------------------------------------------------------------------------------------------------------
Webdesign e Viso do Projeto

A ma io r ia d as pessoas asso c iam D es i gn uni ca me nt e ao p roj eto g r f i co de u m
We b Si te, o q u e u m e r ro.
O co nc e ito d e W eb D es i gn en vo l ve t odo s os as p ec tos da con st r u o d e u m

s it e, d es de o des en ho de su a est r utu ra de na ve ga o e fo rm a d e
d i sp on i bi l i za o da i n fo r ma o a t o des en vo l vi me nto d o p ro je to g r f i co.
A c ons tr uo d e u m We bs it e dev e, an tes d e ma is nad a, s er e nt en d i da com o

u m p ro jet o, co mpo sto d e fas es e d ese nvo lv i do po r pess oas de b ac k g rou nd s
d i f er en tes.
Contedo e Forma
O q ue faz u ma pess oa e nt ra r em u m s i te ?! O fa z a pess oa q ue re r ret or na r? !
Es tas pe r gu n tas de vem se m p re es ta r na cab e a das pess oas de u ma e q ui pe d e

c ons tr u o d e si tes.
A p r i me i ra m u it o re la ci o na-se ao p b l i co a lv o. Pa ra qu al t i po d e p b l i co voc
es t d is pon i b i li za n do i n fo rma o ? ! Q uai s so as pr io ri d ad es e i nt e resses dest e
p b l ico ? Qu e t i po d e c on exo m a is usa da p or el e? !
A s res postas pa ra a se g un da p erg u nt a c e rta me nt e e nv o lv em t rs po ntos : o 1

o con te d o. o e lem e nto c en tr a l. O 2 po nto o des i g n do s it e (estrutura
de navegao e projeto grfico).
Es tr ut u ra r a i n fo rma o d e fo r ma qu e a na ve ga o se ja o m a is i nt ui t i va
p oss v e l faz co m qu e s ua a pr ese nt ao We b t en ha m u ito mai s c ha nc e d e
s uc esso, co ns id er an do o ti po d e i nfo r ma o d isp on i bi li za da c on fo r me se u
p b l ico a lv o. O ut ro p on to a at ua l iza o pa ra q u e no pe r ca u ma d as
p r i nc i pa is ca ra cte r st i cas da I nt e rn et : a d i nam i c idad e.
1 . Na c r ia o d o p ro j eto g r f ico , t en te se mp r e o p ta r po r so l ues q u e

m e lh or se a da pt em a p la ta for ma m ais usad a. Po r exe mp lo: mon i to r 1 4
p o le ga das c om reso l u o d e 6 40x 48 0, fa a co m a m el hor d iag ram a o
d as p gi nas a co nte a q u an do o s it e vi st o n esse t ip o de mo ni to r e
r eso l u o. C aso o se u si te de va se r dia g ram a do pa ra u ma r eso lu o o u
t ama n ho de mo ni to r d i f er en tes d o ma is usa do, in fo rme n o s it e.
2 . Nu m pro jet o g r fi co d ev e se mp r e se p erg u nt ar se s ua ap res en ta o

f i co u a de qu a da o u no ao qu e s eu c l ie nte d ese ja va e ao s eu p b l ico
a l vo.
3 . P ar a te r u ma g ar an t ia que suas im a ge ns se ro se mp r e be m
v is ua l iz ad as, pro c ur e t ra ba l har co m i ma ge ns p al et i za das (formato .gif) .
O m e lho r r es u lta do p a ra isso se r t ra balh ar sua s ima ge ns em R GB e
d e po is i nde x- las com o m eno r n m ero d e co r es poss ve l. Caso p re c ise
u t i li za r i ma ge ns Tr ue C olo r, sa lv e-as e m fo r mato . jpe g, qu e res ul ta r
e m a rq u iv os pe qu eno s.
4 . S e mp re i ndi q u e em que b rows er s ua p g i na se r m e lhor v is ua li zad a.
5 . A p g i na d e en tra da d e um s it e mu i to i mpo r tant e. E la dev e se r

p r oj eta da d e fo r ma q u e d iga a q u e o si te se de st in a, s eja de f or ma
t ext ua l, v isu al o u es tru t ura l.
- 61 -
-----------------------------------------------------------------------------------------------------------
6 . O co nt e do e fo r ma c omo el e a p res en ta do se ro os p rin c i pa is

a tra t ivos de s uas pg i nas, a no s e r q ue o p on to c ha ve se ja m as
i m ag ens. Po r iss o, no pe nse que a net ig u al a o ut ras m d ias.
7 . D i r ei tos au to ra is: A p r ote o d e d ir e itos a ut ora is no cost u ma se r

m u it o e vi de nt e n a We b. O des ej o or i g in al d e um a pgi na n o
p r ote g i do. Mas q ua l qu e r tex to, g r f i co, v d eo ou ud i o o r i gi nai s de ve
se r p ro te g id o. U m l i nk o u UR L no p ro teg i do , mas u ma l is ta de l i n ks
(como no caso das bibliotecas virtuais) d e ve s er p r ote g i do p e los
d i r ei tos a ut ora is.
8 . A n et iq ue ta e Do m n io p b l ico : A We b f oi c r ia da com b ase em se r ca paz

d e a ta r l in ks d e h ip e rt exto de q ua l qu er o ut ra lo ca liz ao da re d e.
C o nse qu ent em en te, qu an do voc d is po n ib i l iz a u m si te, i m p li ca em vo c
p e r mi ti r a o ut ros " li n ka r" su a p g in a de We b, po r m a ne t iq ue ta
r e com en da q u e s e p e a p er m iss o aos W e bmast e rs se mp r e q ue
p oss v e l.
26. CONCLUSO
O v ol u me d e i n for ma es no mu n do do Des en vo l vi me nt o We b ex tr em am e nte
g r an de , e d i f ic i lm en te uma p essoa d om i na to dos os as pe ctos e
p a rt ic u la ri da des. Po r i sso b as tan te c o mu m o uv i r mos t e rmos com o
We bd es ign e r e P rog r ama do r We b . Os We b des i gne rs ge ra lme nt e do m ina m a
a rt e d a c ri a o de la yo uts, i nt e rfa ces co m o usu r io, t i po gr a fia , C SS e
p r og ra mas d e e d i o d e i m ag en s. Os P rog r ama do res W eb po r s ua v e z so
r es po ns vei s pe la es tr u tu ra o d os c d i gos da s p gin as, p ela p r og ra ma o
d as L i n guag e ns de Se r v ido r e Na ve ga do r e pe la cr ia o de ba nco d e da dos.
A p esa r de e xc ita nt e, a d is cuss o so br e esses t ema s c om ea a fu g i r mu i to d o

o b jet i vo ini c ia l des ta a pos ti la, q u e a in t ro du o p r t ic a do l e ito r o u d a
l e ito ra l in g ua ge m de mar ca o co n he ci da co mo HTM L e t am b m da r um a
n o o s ob re as no vas t ec no lo g ias e o fu tu ro d a l i ngua ge m de ma rc a o.
A o a va na r n os est u dos lo go se p e rc e be essa ra m if i ca o e c ab e a o es tu dan te

d es en vo lv er a r ea q ue ma is l he a tra i.
Es pe ro qu e v oc te nha gosta do.
U m a b ra o,
T ia go So u za
h tt p :/ /ww w. tia gos ou za. com
h tt p :/ /us ecl i c k. bl ogs po t.co m
- 62 -

Guia Prático Do HTML Web Standards e CSS PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Você também pode gostar

Guia Prático Do HTML Web Standards e CSS PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia Prático Do HTML Web Standards e CSS PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Guia Prtico de HTML Prof.

Tiago Daniel de Souza

Guia Prtico de HTML

Este Guia foi escrito por Tiago Daniel de Souza

This work is licensed under a Creative Commons

3 . S U A P RI MEI R A PGIN A E M HT ML . ........ ........ ....... ........ ....... ... 06

5 . O CABEALHO DE UM DO CUM ENTO H TM L ... ........... ........ ....... .. 11

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

1 0. 1 - L is tas No O r de na das ........ ........ ............... ....... ........ ....... .. 21

1 3 . EN TI DADES , ACEN T U AO E CARACT ER ES ESP E CI AIS .... ....... 32

1 9 . COLOCAN DO S EU S IT E NO AR ............. ........ ....... ........ ....... ... 43

2 1 - GUI A DE REF ERN 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

24. O P RESEN TE E O F UT URO DO M AR KUP ........ ...... ........ ....... ..... 57

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

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

O b v ia me nte , a a pos ti l a no e ns in a tu do. D ia nt e d isto, se r n e cess r io q u e

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

L in gu ag en s d e ma rc a o (markup languages em ingls) s o l in g ua ge ns q u e

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

O na ve ga do r (tambm chamado de browser) , na da ma is faz d o q ue ab r i r

3. SUA PRIMEIRA PGINA EM HTML

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

A s et i qu etas de mar ca o do ins tr u es a o nav e ga do r so b re a

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

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

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

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

3.3 - Explicao 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

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 ea lh o.

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

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

3.4 - Devemos usar a extenso .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 nso . h tm l, mas a

Essas de f ici nc ias, q ue no p assad o o br i ga ra m a usa r a ex te nso . h tm em v e z

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 vs d e lin g ua ge ns d e

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

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

3.6 - FAQ (Perguntas Freqentes)

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

P o rq ue u tiliz am os ta gs c o m le tras m in sc u la s?!

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

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,

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

A s "t ags de m ar ca o" d o HTML so 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

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

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

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

<b>Este texto est em negrito</b>

Es te e le men to in ic ia c om a t ag : <b >

O p ro ps ito da ta g <b> co lo ca r o con te d o d o e lem e nto HTM L e m n e gr i to

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