Guia Pratico Do HTML Web Standards e Css

Guia Prático de HTML – Prof.
Tiago Daniel de Souza

http://www.tiagosouza.com
-----------------------------------------------------------------------------------------------------------
Guia Prático de HTML
Este Guia foi escrito por Tiago Daniel de Souza

Email: tiagocopa [at] gmail [dot] com
Site do Autor: http://www.tiagosouza.com
This work is licensed under a Creative Commons

Attribution-NonCommercial-ShareAlike 2.0 Brazil
License.
http://creativecommons.org/licenses/by-nc-sa/2.0/br
-1-
Guia Prático de HTML – Prof. Tiago Daniel de Souza
-----------------------------------------------------------------------------------------------------------
SUMÁRIO
1 . IN T RODUÇÃO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 05
2 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 05
3 . S U A P RI MEI R A PÁGIN A E M HT ML . ........ ........ ....... ........ ....... ... 06

3 .1 - O q ue es tá d en tro de u m a rq u i vo e m HTM L? ! .... ...... ........ ....... 06
3 .2 - Ex p eri m en te você mes mo ...... ........ ....... ........ ....... ........ ....... 06
3 .3 - Ex p l ica ção do Exe m p lo .......... ........ ....... ........ ....... ........ ....... 06
3 .4 - De vem os usa r a ex te nsão .h t m ou . htm l ? ............. ........ ....... .. 07
3 .5 - E d itor es " P uro s" v e rsus W YS IW Y G ......... ........ ....... ........ ....... . 07
3 .6 - FA Q (P e rg u ntas F r eq üe nt es) .. ........ ....... ........ ....... ........ ....... 07
4 . ELE MEN TOS E AT R IBUTOS ........ .......... ........ ....... ........ ....... ..... 08
4 .1 – El eme nt os . .......... ........ ....... ........ ....... ........ ....... ........ ....... 08
4 .2 – A tr i bu tos das Ta gs ...... ....... ........ ....... ........ ....... ........ ....... .. 09
4 .2 .1 - A t rib u tos pod em s e r a p l ica dos à m aio r ia das tag s ....... ........ . 10
4 .3 - De vem os usa r as pas o u p l ic as/a pós tro fos ..... ....... ........ ....... ... 11
4 .4 – Notas Rá p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 11
5 . O CABEÇALHO DE UM DO CUM ENTO H TM L ... ........... ........ ....... .. 11

5 .1 - O El em e nto <h ea d > ( ca be ça lh o do doc u me nto ) ..... ........ ....... .. 11
5 .1 .1 - A In fo r ma ção C o nt id a no E le me nto <h ea d > ....... ........ ....... 11
5 .1 .2 - E lem e ntos de c ab eç al ho ( <hea d > ) ...... ............ ........ ...... 12
5 .1 .3 - A de c la raçã o D O CT YPE ..... ........ ....... ........ ....... ........ ....... 12
5 .2 - O e lem e nto <m et a> .. ........... ........ ....... ........ ....... ........ ....... 12
5 .2 .1 - P ala v ras- cha ve pa ra os m oto re s de p es qu isa ..... ........ ....... . 12
5 .2 .2 - Va lo res des con h ec i dos pa ra o at r ibu to nam e do <m eta > .... . 13
6 . MODIFICAN DO O CO RPO DO DO CUMEN TO .......... ........ ....... ..... 13
7 . ELE MEN TOS B ÁSI COS DA LIN GU AGEM H TML ...... ........ ....... ...... 14
7 .1 – Ca b eç al hos .... ..... ........ ....... ........ ....... ........ ....... ........ ....... . 14
7 .2 – Pa rág r af os . ........ ........ ....... ........ ....... ........ ....... ........ ....... . 14
7 .2 .1 - A l i nh am en tos d e pa rá graf o ....... ........ ........ ....... ........ ...... 14
7 .3 - C ria nd o u ma di vi são ..... ....... ........ ....... ........ ....... ........ ....... . 15
7 .4 – Q ue br as d e L i nha ..... ........... ........ ....... ........ ....... ........ ....... 16
7 .5 – Co men tá r ios ......... ........ ....... ........ ....... ........ ....... ........ ...... 16
7 .6 – I n fo rm aç ões Úte is .... .......... ........ ....... ........ ....... ........ ....... . 16
7 .7 – L ista d e e le me ntos bás icos d o HTM L . ..... ........ ....... ........ ....... ... 17
8 . FOR MAT AÇÃO DE TE XTO . ...... ........ ....... ........ ....... ........ ....... .... 17
8 .1 – El eme nt os pa ra f o rma ta ção d e te xto ...... ........ ....... ........ ....... 17
8 .2 – El eme nt os pa ra o " ou tp ut de có di go de com p utad o r" .... ........ ... 18
8 .3 – El eme nt os pa ra c i taç ões e li stas de def i n iç ões ........ ........ ....... 18
9 . LI GAÇÕES DE HIPE R TE XTO ( "LIN KS") ........ .......... ........ ....... ... 18
9 .1 - Li n ks i n te rn os ....... ........ ....... ............... ........ ....... ........ ...... 19
9 .2 - Li n ks l oc ais o u re la ti vos ....... ........ ....... ........ ....... ........ ....... . 20
9 .3 - Li n ks e xte r nos ...... ........ ....... ........ ....... ........ ....... ........ ....... 20
9 .4 - Al vo ( ta r get ) ....... ........ ....... ........ ....... ........ ....... ........ ....... . 20
9 .5 – El eme nt os pa ra f a ze r l i gaçõ es . ............ ........ ....... ........ ....... .. 20
1 0 . LIS T AS ...... .......... ........ ....... ........ ....... ........ ....... ........ ....... ... 21
-2-
-----------------------------------------------------------------------------------------------------------
1 0. 1 - L is tas Não O r de na das ........ ........ ............... ....... ........ ....... .. 21

1 0. 2 - L is tas Or de na das .... ........... ........ ....... ........ ....... ........ ....... . 21
1 0. 3 – L istas de De fi ni çõ es ........... ........ ....... ........ ....... ........ ....... 21
1 0. 4 – E l em e ntos pa ra L is tas ........ ........ ....... ........ ....... ........ ....... . 22
1 1 . I MAGENS .... ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 22
1 1. 1 - Ta ma nh o de exi b i ção da im a ge m . ....... ........ ....... ........ ....... .. 23
1 1. 2 - Tex to a lt er nat iv o ....... ........ ........ ....... ........ ....... ........ ....... . 24
1 1. 3 - Bo rda da i ma gem ......... ...... ........ ....... ........ ....... ........ ....... 24
1 1. 4 - A l inh am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24
1 1. 5 - Es paç am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24
1 1. 6 – E l em e ntos re la ci ona dos c om im ag en s ............... ........ ....... ... 25
1 1. 7 – Fu nd os de Pá gi na .. ............ ........ ....... ........ ....... ........ ....... 25
1 1. 7. 1 - O a tr i bu to bgc ol or do e le me nt o <bo d y > . .......... ........ ...... 25
1 1. 7. 2 - O a tr i bu to bac k g ro un d ...... ........ ....... ........ ....... ........ ..... 26
1 1. 8 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 26
1 2 – CO RES .... .......... ........ ....... ........ ....... ........ ....... ........ ....... .... 27
1 2. 1 - Fo rm as d e ex pr i m i r co res ...... ............ ........ ....... ........ ....... .. 27
1 2. 2 – Nom es de co res .. ............. ........ ....... ........ ....... ........ ....... .. 27
1 2. 3 – Co res s eg u ras d a We b ........ ........ ............... ....... ........ ....... 28
1 2. 4 - Fo rm as d e ex pr i m i r o s va lo res das c or es .... .......... ........ ....... . 30
1 2. 5 - Ma is d e 1 6 m i lhõ es d e co res d if e re ntes .. ............. ........ ....... . 32
1 2. 6 - Ma is n om es de c or es ........... ........ ....... ........ ....... ........ ....... 32
1 3 . EN TI DADES , ACEN T U AÇÃO E CARACT ER ES ESP E CI AIS .... ....... 32
1 4 . TABE LAS ........ ...... ........ ....... ........ ....... ........ ....... ........ ....... .. 33
1 4. 1 - Es paç am en to en t re c é lu las ..... ........... ........ ....... ........ ....... .. 35
1 4. 2 - P re en c h im en to d e c é lu las .... ........ ............... ....... ........ ....... 35
1 4. 3 - La r gu ra de cé lul as e ta b elas .... ................... ....... ........ ....... . 37
1 4. 4 - Uso d e ta b el as .... ........ ....... ........ ....... ........ ....... ........ ....... 37
1 4. 5 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 37
1 4. 6 – E l em e ntos re la ti vos a tab e la ..... ....... ........ ....... ........ ....... ... 37
1 5 . FO RMUL ÁRIO S ..... ........ ....... ........ ....... ........ ............... ....... .. 38
1 5. 1 – C ri ar Fo r mu lá r ios .... ........... ........ ....... ........ ....... ........ ....... 38
1 5. 2 – i np ut .. ......... ...... ........ ....... ........ ....... ........ ....... ........ ...... 38
1 5. 3 - "R adi o Bu tto ns" ...... ............ ........ ....... ........ ....... ........ ...... 39
1 5. 4 – C hec k box es ....... ........ ....... ........ ....... ........ ....... ........ ....... 39
1 5. 5 - O a tr i b uto a ct io n e o bo tão de s ubm iss ão ......... ........ ....... .... 39
1 5. 6 - E lem e ntos pa ra F or m ulá r ios .... ........... ........ ....... ........ ....... . 40
1 6 . F R AMES H TML ..... ........ ....... ........ ....... ........ ....... ........ ....... ... 40
1 6. 1 - Va nta ge ns e des van ta ge ns d as mo l dur as ....... ....... ........ ....... 40
1 6. 2 - O E le me nt o f ram ese t .......... ........ ....... ........ ....... ........ ....... 40
1 6. 3 – O Ele me nt o f ram e ...... ........ ........ ....... ........ ....... ........ ....... 41
1 6. 4 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 41
1 6. 5 – E l em e ntos pa ra F ra mes ...... ........ ....... ........ ....... ........ ....... . 41
1 7 . INS ERÇÃO DE SCR IP TS ....... ........ ....... ........ ....... ........ ....... ... 41
1 7. 1 - Ins er i r um s cr ip t nu ma p ág i na HTM L .... ........ ....... ........ ....... . 41
1 7. 1. 1 - Um exe m p lo p rá t ico ....... ........ ....... ........ ....... ........ ....... 42
1 7. 2 - Como li da r c om os b ro wser s an ti gos ..... ........ ....... ........ ....... 42
1 7. 2. 1 - O E le me nto <n osc r i pt > ...... ............ ........ ....... ........ ...... 42
1 7. 2. 2 - Um exe m p lo ...... ............ ........ ....... ........ ....... ........ ...... 42
1 7. 3 - E lem e ntos pa ra ins er i r scr i p ts e có d ig o ...... ......... ........ ....... . 43
-3-
-----------------------------------------------------------------------------------------------------------
1 8 . O UT RAS POSSIBILI DADES ...... .......... ........ ....... ........ ....... ..... 43
1 9 . COLOCAN DO S EU S IT E NO AR ............. ........ ....... ........ ....... ... 43

1 9. 1 – Ist o é t u do q ue eu pr ec iso ? ! ........ ...... ........ ....... ........ ....... . 44
1 9. 2 - Como e u f aço en v io os a r qu i vos do me u s ite ? ! ...... ........ ....... . 44
2 0 . H TML A V AN ÇADO ........ ........ ........ ....... ........ ....... ........ ....... ... 45
2 0. 1 - Fo l has de Est i lo ( C SS ) . ....... ........ ....... ........ ....... ........ ....... . 46
2 0. 2 – T emp l ate s . ......... ........ ....... ........ ....... ........ ....... ........ ...... 47
2 0. 3 – Ac ess i bi l i da de .... ........ ....... ........ ....... ........ ....... ........ ....... 47
2 0. 4 – Si tes di nâ mi cos o u a ut oma ti za dos ....... ........ ....... ........ ....... . 48
2 0. 5 - We b sta n da rds e va li da ção ...... .................... ....... ........ ....... 49
2 0. 5. 1 - O q u e ma is há pa ra co nh e ce r s ob re HTM L ? ! ..... ........ ....... ... 49
2 0. 5. 1. 1 - L e ga l !! Posso a nu nc iar ? ! ... ........... ........ ....... ........ ...... 50
2 0. 5. 1. 2 - Va l i daçã o? ! Po r q uê d ev e r ia eu faz e r is to? ! ..... ........ ...... 50
2 1 - GUI A DE REF ERÊN CI A R ÁPI DA .......... ........ ....... ........ ....... ... 51
2 2 – RE FER ÊN CI AS COM PLE TAS DE H TM L 4 .0 1 ...... ........ ....... ...... 53
2 3 . AT RIBUTO S E SPE CI AI S DE HT ML 4 ...... ........ ....... ........ ....... ... 55

2 3. 1 - A tr ib u tos i n tr ín se cos ......... ........ ....... ........ ....... ........ ....... .. 55
2 3. 2 - A tr ib u tos n u cle ar es ou int r ín sec os (" Co r e At tr ib u tes ") ........ .... 55
2 3. 3 - A tr ib u tos l i n güí st i cos ......... ........ ....... ........ ....... ........ ....... . 55
2 3. 4 - A tr ib u tos de tec la do .. ......... ........ ....... ........ ....... ........ ....... 56
2 3. 5 - E ven tos de jane la ... ........... ........ ....... ........ ....... ........ ....... . 56
2 3. 6 - E ven tos pa ra fo r mu lá ri os .... ........ ............... ....... ........ ....... . 56
2 3. 7 - E ven tos de t ecl a do ....... ..... ........ ....... ........ ....... ........ ....... . 56
2 3. 8 - E ven tos do mou se ...... ....... ........ ....... ........ ....... ........ ....... . 57
24. O P RESEN TE E O F UT URO DO M AR KUP ........ ...... ........ ....... ..... 57

2 4. 1 - O con só rc io da We b ..... ....... ........ ....... ........ ....... ........ ....... 57
2 4. 2 - S GML e HTML ..... ........ ....... ........ ....... ........ ....... ........ ....... 57
2 4. 3 – XML ...... ............ ........ ....... ........ ....... ........ ....... ........ ....... 58
2 4. 4 - R DF e S y nd i cati o n .. ............ ........ ....... ........ ....... ........ ....... 58
2 5 . DI CAS FIN AI S ...... ........ ....... ........ ....... ........ ............... ....... .. 58
2 6 . CON CL US ÃO . ....... ........ ....... ........ ....... ........ ....... ........ ....... ... 62
-4-
-----------------------------------------------------------------------------------------------------------
1. INTRODUÇÃO
A s p essoas im ag i nam q ue é m u it o d i f íci l co nst r uir um s ite . I sto não é
v e r dad e !! Q ua l qu e r um p o de a pr e nd e r c om o cons t ru i r u ma pá g ina . S e v oc ê
c on ti n ua r l e n do, esta rá ap to a co nst r u ir um ra pid a me nte, q u an do me nos
es p era r.
O u tro s pe nsa m - erroneamente - qu e s er á n ec essá rio so ft war es a van ça dos e

c ar os par a c ons t ru i r w e bsi tes. É ve r da de q ue ex ist em m u itos so f twa res
c ap az es de c r ia r u m w e bsi te par a vo cê. Al g u ns ma is f e c had os q u e o ut ros.
Mas, s e voc ê pr ete n de tr i lh ar o ca m in ho c e rto, de ve rá cr ia r vo cê mes mo o
w e bsi te. Fe l i zm en te, i sto é s i mp l es é v ocê já te m a sua d is pos iç ão to dos os
so ft wa res q u e n ece ssi ta.
O o bj et iv o d es ta m in ha a pos t il a é fo rn ec e r os c onh eci me nto s b ás icos qu e

p e r mi ti rão c ons tr u i r um we bs it e d e fo rma co r ret a. A ap ost i la pa rt e d a estac a
z e ro e n ão r e qu e r q ual q u er con he c im en to pr é v io d e pro g ram ação.
O b v ia me nte , a a pos ti l a não e ns in a tu do. D ia nt e d isto, se rá n e cessá r io q u e

v oc ê se em p en he , pr at i qu e e co nso li d e os e ns ina men tos a q ui c on ti dos . Mas,
n ão se abor r eç a, p ois a p re nd e r c om o co nstr u i r u m w eb s ite é bem d i ve rt i do e
b ast an te sa tis fa tó rio q u an do v ocê tr i lh a o ca m in ho c ert o do a p ren d i za do.
O K. Ch e ga d e c on ve rsa. Va mos co me ça r...
2. SOBRE O HTML
O H T ML é u ma L in gu ag e m de m a rca ção d e te xto . M ais e sp e ci f i cam en te ,
u ma l in g uag e m de mar ca ção d e h i p er tex to. P or ta nto, a nt es d e co me ça r a fa la r
d e HTM L, va mos e nt en d er o q ue v em a s er u ma l in g uage m d e mar ca ção.
L in gu ag en s d e ma rc a çã o (markup languages em inglês) s ão l in g ua ge ns q u e

c om b in am t ext o com i n fo r maçõ es ex tras sob r e o tex to. Essa i n for m ação ex tr a
p o de se r re p res en ta da po r d i ver sos s ím bol os o u pa la v ras- cha ve d if e re ntes,
d e pe n de n do da l i ng uag e m d e mar ca ção com q u e est i verm os tr ab alh an do.
O H T ML n ão e ra um a l i ng uag e m d e for m ata ção d e t extos q u alq ue r, e la

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

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

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

l i n gu ag em HTM L usa nd o "etiquetas de marcação" ;
• A s et i qu etas de mar ca ção dão ins tr u ções a o nav e ga do r so b re a

es t ru tu ra d o doc u men to e so bre a f or ma d e co mo a pá g ina de ve se r
a p rese nt ada gr af i came nt e;
• O s ar q ui vos HTM L po de m se r es c ri tos usa n do u m si m p les e d it or de

t ext os e seu s no mes de ve m possu i r a ex te nsão .h tm l
3.2 - Experimente você mesmo
Bo m, se vo cê u t il i za o Wi n dows (95, 98, 2000, XP, etc) , i n ic ie o Bloc o d e

Not as (Notepad).
A g ora d ig i te o se g u in te tex to:
<html>
<head>
<title> Título da Página </title>
</head>
<body>
Esta é minha primeira página. <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 - Explicação do Exemplo
A p r i me i ra t ag e m s eu d o c um en to HTML é <h tm l>. Est a t ag d e fi n e o i n íc io d e

u m d oc ume nt o HTM L e i n d i ca ao na ve ga do r q ue to do cont eú do p os te r io r d e ve
se r t ra ta do c omo u ma sé r ie de có d ig os HTM L. A ú lt ima ta g e m se u doc um e nto
d e ve rá se r < /h tm l>. Es ta ta g i n d ica ao n av eg ador q ue é o f i m d e se u
d o cu me nto HTM L.
O tex to e nt r e as ta gs <h ea d> ... < /h ea d> é a in fo r ma ção d o ca b eça lh o.

Ne nh u ma in fo r ma ção c on ti da no c ab eç al ho é exi b i da na jan el a do na v ega do r.
-6-
-----------------------------------------------------------------------------------------------------------
O te xto ent r e as ta gs < title > ... < /title> é o t ít u lo de se u do cu me nt o. O

t í tu lo se rá e xi b i do na l e ge n da d o na v ega do r, n a pa rt e d e c i ma do b ro wse r.
O t exto ent r e as t ags <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 extensão .htm ou .html?
O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nsão . h tm l, mas a

e xte nsão .h tm a i nd a é u t il i za da. Est e f ato é uma he ra nç a dos t e mp os (pré-
históricos no que diz respeito à Internet) d o M S- DO S e d o W ind ows 1 6 b its ,
e m q ue os no mes dos a rq u ivo s t in ha m no m áxi mo 8 ca rac te res e as su as
e xte nsõ es n ão p od iam te r ma is d e 3 ca rac te r es.
Essas de f ici ê nc ias, q ue no p assad o o br i ga ra m a usa r a ex te nsão . h tm em v e z

d e .h tm l já fo ra m e lim i na das. Po r isso de ve mos usa r a ext ensão . h tm l, a não
se r q ue ex ist a u ma b oa ra zão pa ra voc ê esta r u t i li za n do . h tm (pouco
provável).
3.5 - Editores "Puros" versus WYSIWYG
Ex is te m duas fo r mas d e s e cr ia r u m te xto fo r mata do at ra vés d e lin g ua ge ns d e

m a rca ção. A p r im e ir a c ons is te em es cr ev e r o tex to, usa n do as in st ru çõe s d a
l i n gu ag em , n u m e d itor d e te xto p u ro. E m se g ui da , u sa-se o pr oc essa do r d e
t ext o pa ra p r od u z ir o t ext o fo r ma tad o.
A o ut ra ma ne i ra é usa r u m e d it or d e text os WY SIWY G ( What You See Is

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

AbiWord e o OpenOffice Writer são W YSIW YG e os doc u me nt os q ue eles
g e ra m ut i l iz am L ing ua g ens d e m a rcaç ão .
3.6 - FAQ (Perguntas Freqüentes)
De p o is q ue eu ed ite i m eu a rq u ivo H TM L, eu n ão co ns igo v is ua liz ar o

re su ltad o e m m eu na ve ga do r. Po r q uê? !
Ve r i fi q ue se vo cê sa lv ou o a rq ui v o co m o n om e c or reto e q ue s ua ex te nsão
se ja . h tm. C on f ir a t am bé m em s ua bar r a de e nd e re ços do na v ega do r,
v e r if i qu e qu an to ao d ir e tór io se es tá co r re to.
Qu a l nav eg a do r eu d ev o u tiliz a r? !
Vo cê po de u t i li za r qual q u er b rowse r, co mo o I nte r net Ex p lo re r, Mo z il la, O per a,
e tc. .. pa r tic u la rm en te r ec om en do o F i re fox e o In te rne t Ex pl or er.
-7-
-----------------------------------------------------------------------------------------------------------
P o rq ue u tiliz am os ta gs c o m le tras m inú sc u la s?!

E m HTM L os nom es das tag s e el e me ntos po de m se r es cr it os ta nto com l et ras
m a iús cu las q ua nto com le tr as mi n ús cu las, t an to q ue <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 iús cu las p ara es c rev e r os no mes
d as ta gs, m as os mai s mo de rnos ut i l iza m e xc lu si va ment e le tras m i n úsc u las.
Nes ta m i nha a post i la u t i li zo se mp r e l et ras m i n úsc u las p or q ue ex ist e u ma raz ão
m u it o fo rt e p ar a isso.
A nov a ge ra ção do H TML é u ma a p l ic açã o do XML e é d es i gn ada p o r

XHT ML. O XHT ML é a m el ho r l i n gu ag em p a ra se c r ia r p ág i nas p ar a a We b,
m as é mais r est ri ta d o q ue o HTM L (“rouba” algumas das liberdades que o
HTML oferece) . A o co nt rá r io d o q u e aco nte ce em HTM L, e m XM L as et i qu et as
<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 dáv e l qu e s e e sc re va to das as e ti q u etas com le tra s m inú sc u las.
D es te m odo, vo cê es ta rá a d qu i rin d o bo ns m o dos e qu ase não te rá tra ba l ho de
c on ve r te r su as pá g i nas HTM L pa ra X HTML.
4. ELEMENTOS E ATRIBUTOS
4.1 - Elementos
U m e le men to é um a es tr ut u ra se mâ nt ica, c om pos ta de ta g d e ab e rtura,

c on teú do e ta g d e fe c ha me nto .
O s doc u men tos HTML sã o s im p les a rq u ivos de te xto q ue co ntê m "tags de

marcação" . Ess as et iq u etas d efi n em os e le me nt os da l in g ua gem HTM L e os
se us c on teú d os. A lis ta se g ui nt e i n d ic a a l g um as d e suas c ara ct er íst i cas :
• A s "t ags de m ar ca ção" d o HTML são usa das p a ra d ef i nir os e le men tos.
• A s ta gs HTM L esc re v em -se ut il i za n do os car ac te res < e > , e nt re e les o

n om e do ele me nt o e os se us at r ib u tos.
• A p r i me ir a t ag do pa r é a ta g de i n í ci o (ou de abertura) e a s eg un d a d o
p a r é a ta g d e f i m (ou de fechamento) .
• T ud o o q ue se en co nt ra r e nt re a s t ags de i n íc io e de fim fa z em pa rt e d o
c on te ú do do e le me nt o.
• E m XHTM L as ta gs d ev e m s er esc r it as s emp r e co m l et ras mi nú sc u las, e

as ta gs <b> e <B> não re p resen ta m o mes mo e le men to.
Vo cê se lem b ra de nosso p ri me i ro ex e mp lo m ost ra do ? !
<html>
<head>
<title> Título da Página </title>
</head>
<body>
</body>
</html>
-8-
-----------------------------------------------------------------------------------------------------------
Es ta pa r te a ba ixo é um e le me nto HTM L:
<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 pós 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 pós 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 níc io e, o nde f or r e que r i do, o fim d e

u m e le men to HTML. H á, co mo ex post o a c im a, ta gs de ab e rt u ra e d e
f e cha me nto. Um a t ag d e a b er tur a é re p rese nt ada po r s in a l d e m e no r ( < ),
u m no me d e e lem ento HT ML, e u m s in a l d e m a io r ( > ) (ex. <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 pós o
n om e do e le me n to, p r e ce d i do d e u m es pa ç o e é com p osto d e u m n om e d e
a trib uto, u m s ina l d e igu a l ( = ) e u m va lo r de a tribu to, c er ca do po r
a sp as d upla s ( " ) ou s i m pl es ( ‘ )
A ta g <bod y> de f ine o co rpo ( body ) de um a pá gi na HT ML. No ex em pl o

se g u in te ad i c io ne i o a tr i bu to bg c o lo r (que significa "background color", ou
cor de fundo) pa ra i nd i ca r mos qu e q ue r emos qu e a pá g ina f iq ue com u ma c or
v e rm e lha em s eu p lano de fu n do.
<html>
<body bgcolor="red">
Esta é a minha primeira página da web.
<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 não p re c isa d e ne nh u ma i nfo r ma ção
a d ic io na l.
A ssi m co mo ex ist em m u it as ta gs, ta mb ém e x iste m m u it os at r ib u tos. A l gu ns

a tr i bu tos são e mp re ga dos em ta gs esp ec íf i cas en q ua nto ou tr os s er ve m p a ra
v á rias ta gs. E v ic e-ve rsa : a l gum as ta gs p o de m co nt e r som en te u m t i po d e
a tr i bu to, en q ua nto o ut ras po de m co nt e r vá ri os t i pos.
I sto po de p a re ce r um po u co co nf uso, mas à m e di da q ue vo cê f o r p rat i can d o

v a i cons tata r q ue t u do é f ác i l e ló g i co, b em co mo vai ve r i fi ca r as in úm er as
p oss i bi l i dad es qu e os at r i bu tos o fe re ce m.
- 10 -
-----------------------------------------------------------------------------------------------------------
4.3 - Devemos usar aspas ou plicas/apóstrofos (escrevemos

"texto" ou 'texto')?
A ca ba mos d e v er q ue o s val or es dos at r i bu tos d ev em se r se mp r e co loc ad os

e nt r e as pas. No rm al m en te u t il i za mos as as pas no r mais ( " ), mas os
a pós tro fos ( ' ) ta m bém s ão p erm i t ido s.
E m al g uns c asos, o val o r do at r ib u to co nt ém o p róp rio ca ra ct er e as pas. Num a

s it ua ção dess as, de ve mos usa r a pós tro fos (que aqui funcionam como aspas
simples) pa ra co lo ca r e m to rn o d o v alo r do at r i bu to, ass im :
a lt ='E le disse : " Nã o !" '
4.4 – Notas Rápidas
• A s Ta gs HTM L são ut i l iz ada s pa ra ma rca r e l em en tos HTM L. E las estão

c e rca das pe los do is ca ra cte re s < (menor que) e > (maior que)
• A s ta gs no rm a lm en te a pa re ce m e m par es, c om o <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 eço e o fi m da ta g é o co nt eú do do e le me nto .
• HTM L nã o é sensitive , o u s eja , <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> - não se d es esp e re, p o is o máx i mo q ue p o de
a con te ce r é o se u nav e ga do r int e rp re ta r su a pá gi na d e fo r ma di f e re nte
d o es pe ra do e des en há- la de um j e ito m al uc o.
5. O CABEÇALHO DE UM DOCUMENTO HTML

5.1 - O Elemento <head> (cabeçalho do documento)
O e le me nt o <h ea d> co nté m i n f or ma ção d e car ac te re ge ra l, ta mb é m

d es i gn ada p o r me ta- in fo r ma ção, s ob r e o co nt eú do do d oc um ent o e so b re a
f o rma como e le de ve se r a p resen ta do.
P od e mos di z e r qu e o t e rmo m eta- i nf or ma ção ( ou meta-dados ) s ig n i f ica da dos

q u e d esc rev e m ou tro s d ad os ou in fo r ma ções.
5.1.1 - A Informação Contida no Elemento <head>
O s el em en tos co nt i dos d en tr o do e le me nto <h ea d> n ão s ão exi b i dos n a te la

d o na ve gad o r.
O pa d rão HTM L estab e le ce qu e só u m peq u en o nú me ro de e lem e ntos pod e

a pa re ce r d e nt ro do ca b eça l ho. E les são : <base >, < link>, < meta> ,
< title> , <s t y le> e <s c rip t> .
- 11 -
-----------------------------------------------------------------------------------------------------------
A co nst ru ção se r ia o se g u in te :
<head>
<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 não 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 são res po nsá ve is pe la con c ep ção dos

b r owse rs a cha m q ue est e gên e ro de e r ros é ac e itá ve l. Es ta e out ras
d e f ic iê n cias dos b rows e rs s ão p a rc ia l ment e r es ponsá ve is pe las m ás p rá tic as
d e co di f ic aç ão a d qu i ri d as p or m u it os c r ia do res de pá gi nas HTM L. U ma das
r a zões q ue l e va ram à c r ia ção d a l i n guag e m XHTML f o i a ne cess i da de d e
a ca ba r co m es tas si tua ções de um a v ez po r to das.
5.1.2 - Elementos de cabeçalho ( <head> )
Elemento Descrição
<head> Contém informação importante a respeito do documento mas que não
deve ser apresentada no corpo da página
<title> Define o título da página
<base> Define um URL base comum para todas as ligações relativas da página
<link> Faz referência a um recurso externo e estabelece a ligação com ele
<meta> Dá informação sobre aquilo que o documento contém
5.1.3 - A declaração DOCTYPE
A d ec la ração DO CTYPE s er ve p a ra i n d ica r o DT D a us ar pa ra val i da r n a

p á gi na. Qua n do ut i l iza da, de ve a pa re ce r lo go n o i níc io da pá gi na , a nt es d o
e l em en to <h tm l>
Declaração Descrição
<!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer
elemento pelo que fica mesmo antes do elemento <html>
5.2 - O elemento <meta>
O e le me nto < me ta> c on té m in fo r maçã o de ca ra cte r e g e ra l (meta-informação )

so b re o do cu me nt o e d e ve s e r c o lo ca do d e nt ro do e l em en to <h ea d>. S ua
f i na l i dad e é fo rn ec er i n fo r maçã o q u e des c re ve o do cum e nto.
5.2.1 - Palavras-chave para os motores de pesquisa
D u ra nt e a lg u ns anos a u ti l iz ação ma is f req ü en te da i n fo r maçã o f o r ne ci da p e lo

e l em en to < me ta> fo i a c ri ação de í n d ices pa ra si tes de bus ca. At ual men te
so me nt e a lg u ns b usc ad o res ai n da usa m esta i n fo rma ção p ar a ind ex ar p ág in as,
e os d e ma io r s uc esso i g no ram e ste e lem e nto. No e n ta nto, h á pa rt es q u e
- 12 -
-----------------------------------------------------------------------------------------------------------
c on ti n uam a s er t i das e m co nsi d er aç ão pe los a g en tes ( robots ) dos b us ca do res,

c om o po r ex em p lo, as i n d i ca ções d a das so br e as pastas em q u e n ão de v e se r
f e ita q ual qu e r i n dexaç ão.
A l g uns s ist em as d e b us ca ( não muitos ) usa m a i n fo r mação co nt id a n os

e l em en to m et a pa ra i n d exa r as pá g i nas. No f ra g men to d e có di g o s eg u in te , o
e l em en to < me ta> co nt ém uma b r ev e d esc r i ção d a pá g ina :
<meta name="description" content="Tutoriais e referências técnicas de HTML, CSS,

JavaScript, XML, XSLT, SVG">
Na par te do c ód i go ab a ixo o e le me nt o <m e ta> con té m u ma p a lav ras -ch av e

p a ra i n dexa r a pá g i na:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">
C o mo ac aba mos de ver , os no mes da dos ao a tr i bu to na m e i n d icam c la ra men t e

a fi na l id ade da in fo rm açã o co nti d a no e lem e nto me ta .
I n f el i zm en te , mu itos c r ia do res de p ág i nas p a ra a Web a b usa ram d o el eme nt o

m et a e usar a m d e fo rm a c on tr ári a à s ua f i loso f ia pa ra e n ga na r os mot or es d e
p es q uis a. E m cons e qü ê nc ia d isso, os s it es d e b us ca p assa ra m a i g nor ar ca da
v e z ma is o e l e me nto < me ta>, o q ue a cab o u d if i cu lt an do to dos aq ue l es q u e
p r et en d ia m us á-l o d e f o rma co rre ta.
5.2.2 - Valores desconhecidos para o atributo name do

elemento <meta>
A l g um as ve z es en co nt ra mos s itu açõ es e m q u e o a tr ib uto na m e d o e le men to

< me ta> co nt ém um v a lor des con h ec i do, co mo no exe m p lo se gui n te :
<meta name="security" content="low">
Nu ma s i tua ção des tas de ve mos i n te r pr etar o e l em ent o m e ta co mo con ten d o

i n fo r maçã o q u e é espe c íf i ca do w e bsi te. Essa i nfo r maç ão po de se r im po r tan te
p a ra o a uto r da pá g in a, mas pro va ve lm en te é i rr el eva nt e p ara os v is ita ntes . É
p oss ív e l qu e essas in fo r ma ções se jam ú tei s pa ra a lgu m so ftw ar e q ue le ia a
p á gi na.
6. MODIFICANDO O CORPO DO DOCUMENTO

C o mo di to a nt er io rm e nte , o e l em en to b od y en g lo ba o c or po do s eu
d o cu me nto H TML. E le p oss ui m u it os a tr ib u tos q ue p ossi b i li tam m o di f ic ar a
a pa rê nc ia d a s ua pág i na, co mo c o r de f un d o o u das let ras. Esse s at r i but os
t am bé m po de m se r u t i li za dos j u nto com o at r ib uto td. A qu i mo st ra rem os
a pe nas os a tr i bu tos qu e i nt e rf ere m n as co res da s ua p á gi na :
• b gc o lo r: de f in e a co r d e f u nd o d e um docu m en to
• te x t: a co r d o tex to
• link : a co r d os l i nks
• a link: a c or dos l in ks at i vos at ua lm en te (a página que você está
visitando)
• v link : co r d os l i n ks já v is it ado s
- 13 -
-----------------------------------------------------------------------------------------------------------
O s a r gu men tos são o n o me ou o n úm er o d e u ma cor , exata m en te co mo n o

c aso d o a t ri b u to c olo r us ado no e l em en to fo n t. Po r ex em p lo:
<html>
<head> <title>Isso é uma confusão!</title></head>
<body bgcolor="black" text="gray" link="red" alink="white">
Isso é uma página em html.
</body>
</html>
Essa é u ma p á g in a HTM L o n de o f u n do s erá p r e to, com l e tras c in za s, li n ks e m

v e rm e lho e l i nks a ti vos e m b ra nco. Essas são as d e fi n iç ões glo ba is d e co r p ar a
se u d oc ume nt o, e a q ua l qu er i nst an te v oc ê po d e m u dar as co re s com o
e l em en to fo n t.
7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML

7.1 - Cabeçalhos
O s ca be ça lh os (também chamados de Headings) s er v em pa ra c r ia r t ít u los

d i f er en c ia r as seç ões d a s ua pá g ina . E le s p ossu em se is val or es d i fe re nt es,
se n do qu e a de va lo r 1 é a q ue p oss ui a ma io r fon te e a d e v alo r 6 po ssu i a
m e no r fo nte .
P or exe m plo, usan do o se g ui nt e c ó di go :
<h1> Título 1 </h1>

No c ód i go a ci ma, o HTM L au toma ti ca me nte so lta uma li nh a em b r an co e ntr e

u m t í tu lo e o ut ro.
7.2 - Parágrafos
O s pa rá g raf os são de fi n i dos c om a ta g < p>
<p>Este é um parágrafo</p>
<p>Este é um outro parágrafo</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 parágrafo
Vo cê já d ev e te r v isto q u e em cer tos d oc ume nt os o text o a pa re ce o ra a l i nha do

à d ir ei ta, o ra à es qu e rd a, no c e nt ro ou e nt ão oc up ando u ni fo r me me nte o
es pa ço da p á gi na (texto justificado) . Isso po de ser ob t id o fa ci l me nt e e m
HTM L. Ve ja a ta be la ab a ixo :
ELE MEN TO DES CRI ÇÃO

<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 > não 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 inglês) é j us tif y (justificado) .
O s at r i bu tos, as pa la v ras qu e se g ue m o e l em en to, i nfo r mam o na ve ga do r a

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

a trib uto=v alo r o u atribu tos="v a lo r" (como em align="justify") , q ue é ma is
r e com en dad a.
C o mo v ocê v i u, ne m t od os os có d ig os e m HTM L n ec ess ita m de a tr i bu tos, e m
es p ec ia l os com an dos de mo d if i caç ão d e tex to c om o ne g r ito, i tál i co,
s ub l i nha do, e tc.
Re su m in do, os a tr i b utos d ef i ne m c a ra cte r ísti ca s a d ic ion ai s aos e le me nt os. Nas

se çõ es s egu i nt es v er em os e le men tos c om vá r ios at r ibu tos. Por e xe mp lo, não
a d ian ta di ze r ao s eu na ve ga do r pr a p or um li n k e m algu ma pa rt e d o se u te xto,
é p re c iso di z e r ao na ve ga do r, por ex em p lo, p r a qu e lug a r ess e lin k apo nt a. É
i sso o q ue u m a tr i bu to faz .
7.3 - Criando uma divisão
Ex is te m mo me ntos em q u e que r emos q ue v ár ios pa rá g raf os p oss uam um

m es mo va lo r d e a tr i bu to - centralizado, por exemplo . A o i nv és de es c re ve rm os
a lign= "jus tify " a c ad a a be rt u ra de no vo pa rá gr a fo, po dem os us ar o
e l em en to div, q ue c ria u ma " d iv is ão " n o d o cu me nto n a qu al alg u ns a tr i b ut os
são p rese rv a dos. Ve ja mos o ex em p lo :
<div align="center">
<p>
Parágrafo 1
Parágrafo 1
Parágrafo 1
</p>
<p>
Parágrafo 2
Parágrafo 2
Parágrafo 2
</p>
<p>
Parágrafo 3
Parágrafo 3
Parágrafo 3
</p>
</div>
- 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 não q u er

c om eça r um no vo p ará g ra fo. Com est e com an do você fa z co m q u e oco r ra u ma
q u e bra de li n ha, o n de v oc ê po si c io na r a ta g.
Not e qu e p a ra o e lem e nto <br> não 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 ntão va mos lá, m a is uma v e z exp l i ca n do de um a
o ut ra fo rma : c oma n dos co mo <b>, < i> e < u> a gem so b re um a re g ião d o
t ext o e pre c isa m se r f e cha dos c om s eus r es pe ct i vos < /b>, </i> e < /u> ,
p o is do co nt rá r io esse s co man d os a gi rão a té o f im do d ocu m en to. Já o
c om an do de q ue b ra d e l in ha, < /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 não p oss ui tag f i na l.
7.5 – Comentários
A ta g de c om en tá ri o é u t il i za da par a i nse r i r co me ntár ios no c ó di go font e

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

Not e q ue vo cê pr ec isa de u m po nto de exc la ma ção de po is do pa rê nt eses d e

a be rt u ra, e nã o an tes d o p ar ên teses f ina l.
7.6 – Informações Úteis
1 ) Q ua nd o v oc ê esc r ev e r u m text o em HTML , est eja cie nt e d e q ue o t exto qu e

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

n ú me ro de c ar ac te res q u e c ab em n u ma l in ha va ri e mu it o. Po r esse mo ti vo não
se r emos cap a zes de co nt ro la r n em o nú me ro de l i nhas n e m os loc ai s e m que
a con te ce m as mu dan ças d e l in ha. Nu nca te nte for m ata r o te xto i nse rin d o
es pa ços ou l i n has va zi as, po r que os res u lta dos não se rão a qu eles q ue v ocê
es p era va.
- 16 -
-----------------------------------------------------------------------------------------------------------
3 ) O HTM L q u an do enc on tr a dois o u ma is es pa ços se gui dos, e le tr ata -os com o

se fosse um ún i co es pa ço. Q uan d o voc ê es c re ve um a s e qüê nc ia d e es pa ços
se g u id os, o r esu lt ado é o mes mo d e es c rev e r um ú n ico es pa ço. E m HTML, as
t ec las Tab e E n te r e qu i va le m a u m es pa ço.
4 ) Se m pr e q u e vo cê q u is e r inse r i r li n has em b ra nc o, ut i li ze a ta g <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 não 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 básicos do HTML
T AG DES CRI ÇÃO

<html> Define um documento HTML
<body> Define o conteúdo principal, o corpo do documento
<h1> até <h6> Define títulos, de 1 a 6
<p> Define parágrafo
<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 não 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 eúd 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 não 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 comentários ) . 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 dáv 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 não 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 não suporta
JavaScript!
</noscript>
</body>
</html>
17.3 - Elementos para inserir scripts e código
E lem en to De sc riçã o
<script> Define um bloco que contém um script
<noscript> Define texto alternativo para ser apresentado sempre que o script não é
executado
<object> Insere um objeto na página
<param> Define parâmetros para controlar o objeto
<applet> Desuso. Use <object>
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 não 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.
Especificação HTML (em inglês) http://www.w3.org/TR/html4

Especificação HTML (em espanhol) http://html.conclase.net/w3c/html401-es/cover.html
Consórcio da web docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web
• Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto
http://www.w3.org/TR/html4/struct/text.html
• Listas: blocos para a criação de listagens

http://www.w3.org/TR/html4/struct/lists.html
• Frames: permite que a página exibida no navegador seja formada por mais de um
arquivo html (não recomendado, veja em Acessibilidade)
http://www.w3.org/TR/html4/present/frames.html
• Formulários: possibilita a interação do seu html com aplicações web.

http://www.w3.org/TR/html4/interact/forms.html
• Scripting: permite a automatização de certas seções do seu documento.

http://www.w3.org/TR/html4/interact/scripts.html
• Meta-informações: fornecem dados a respeito do próprio 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 irão 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 erão
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 pág 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 iços 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 iço. 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 iço d e hos p eda ge m.
O u tra o pção é 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 sérvios 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 são 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 faço 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 mín i o (espaço 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 INFORMAÇÕES 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 AVANÇADO

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 não 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 isão 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 nâm 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 ação g rá f ica. Co mo ex e mp lo, ao in vés 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 são :
• 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 ação
• 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 ação pa ra se us d oc um e ntos
• F ac i l ita a cr i ação 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 são 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

Especificação 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 uão
u sáv 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 não 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 rên c ias
• Use um a lóg 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 dinâmicos 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 são 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 são 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 cação
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 cação. 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 vés do pr ee nch im e nto de fo r mu lá ri os.
O s B lo gs são 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 iár 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 lár i o.
Já os W ik is são 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
são : 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 rís 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 ações 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 são 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 validação
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 são 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 vés 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 rár 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 nço u se u
n av e ga dor p r óp r io. A p r i me i ra ver são 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, não 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 rsões 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 não 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 rsão 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 tão na s ua

v e rsão 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 ntão , 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 rsão 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>Título</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 ação 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 tão 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 - Validação?! 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 não, 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 não é ú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 ê não 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 REFERÊNCIA RÁPIDA

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 rístic 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 cabeça do documento sim
title bloco que define o título 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 itálico sim
u bloco sublinhado sim
font muda as características da fonte sim
pre mantém 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 não
center texto centralizado sim
p parágrafos recomendado
div cria uma divisão sim
Atribu to s d ive rso s

CÓ DI GO AT RIB UTO F UN ÇÃO V ALO RES POS SÍVEIS
p, div align alinhamento letf, right, justify, center
font face fonte nome da fonte
font size tamanho -7 a +7
font color cor ver no tópico de cores
E sp aç am en to e en tid a de s
espaço simples não é uma tag
O d ocu m en to H T ML bá s ic o
<html>
<head>
<title>Aqui colocamos o título</title>
</head>
<body>
Aqui colocamos os conteúdos visíveis
</body>
- 51 -
-----------------------------------------------------------------------------------------------------------
<html>
E lem en tos d e c abeç a lh o (para capítulos ou secções)

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

<p>Isto é um parágrafo</p>
<br> (mudança forçada de linha)
<hr> (linha horizontal)
<pre>Isto é texto pré-formatado</pre>
E s tilos lóg ic os
<em>Isto é texto enfatizado</em>
<strong>Isto é texto forte</strong>
<code>Isto é código de computador</code>
E s tilos f ísic os
<b>Isto é texto em negrito</b>
<i>Isto é texto em itálico</i>
L iga çõ es e ânc o ra s
<a href="http://www.tiagosouza.com/">Isto é uma Ligação</a>
<a href=" http://www.tiagosouza.com/"><img src="URL" alt="Texto alternativo"></a>
<a href="mailto:tiagocopa@gmail.com ">Enviar e-mail</a>
Um a ân cora c o m n om e:
<a name="dicas" id="dicas">Dicas Úteis</a>
<a href="#dicas">Saltar para a Secção 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>Definição</dd>
<dt>Termo seguinte</dt>
<dd>Definição</dd>
</dl>
T ab e la s
<table border="1">
<tr>
<th>um cabeçalho</th>
<th>outro cabeçalho</th>
</tr>
<tr>
<td>algum texto</td>
<td>mais texto</td>
</tr>
</table>
- 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>
Endereço (1ª linha)<br>
Endereço (2ª linha)<br>
Cidade<br>
</address>
22 – REFERÊNCIAS 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 DESCRIÇÃO
 Permite inserir um comentário
<!DOCTYPE> Indica o tipo de documento usado na página
<a> Insere uma âncora (marca que identifica o local do documento em que se
encontra)
<abbr> Insere uma abreviação
<acronym> Insere um acrônimo
<address> Insere um endereço (postal)
<applet> Insere um applet (miniaplicação 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 ligações relativas da página
<basefont> Define o tipo de letra base para a página. Desuso (usar CSS)
<bdo> Define a direção em que o texto é apresentado
<big> Texto com letra maior
<blockquote> Define uma citação extensa
<body> Elemento que contém o corpo (conteúdo visível) da página
- 53 -
-----------------------------------------------------------------------------------------------------------
<br> Provoca uma mudança de linha forçada

<button> Insere um botão num formulário
<caption> Define a legenda de uma tabela
<center> Texto alinhado ao centro. Desuso.
<cite> Insere uma citação
<code> Define o texto que é código de computador
<col> Define os atributos para as colunas de uma tabela
<colgroup> Agrupa colunas numa tabela
<dd> Insere texto que descreve uma definição
<del> Define texto que foi apagado ("deleted")
<dir> Mostra uma lista de diretório. Desuso.
<dfn> Insere a definição de um termo
<div> Insere uma divisão (ou seção) dentro da página
<dl> Insere uma lista de definições ("definition list")
<dt> Insere a definição de um termo
<em> Insere texto enfatizado (escreve-se em itálico)
<fieldset> Elemento que contém um grupo de campos de um formulário
<font> Define o tipo de letra, o tamanho e a cor a aplicar ao texto. Desuso.
(usar CSS)
<form> Insere um formulário
<frame> Define uma subjanela (moldura) dentro da janela principal do browser. A
subjanela contém a sua própria página da Web
<frameset> Insere um conjunto de subjanelas ("frames")
<h1> a <h6> Define cabeçalhos ("headers") desde o nível 1 (mais importante) até ao
nível 6 (menos importante)
<head> Contém informação importante a respeito do documento que não deve ser
apresentada no corpo da página
<hr> Desenha uma linha horizontal
<html> Elemento dentro do qual são colocados todos os restantes elementos da
página
<i> Insere texto para ser escrito com caracteres itálicos
<iframe> Insere no interior da página da Web uma subjanela ("frame") contendo a
sua própria página da Web
<img> Insere uma imagem
<input> Define uma caixa para inserção de texto num formulário
<ins> Define texto que foi inserido em substituição de outro mais antigo
<isindex>
<kbd> Define texto inserido através 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 título num elemento <fieldset>
<li> Define um item de uma lista
<link> Faz referência a um recurso externo e estabelece a ligação com ele
<map> Define um mapeamento sobre uma imagem
<menu> Define uma lista de menu. Desuso.
<meta> Dá informação sobre aquilo que o documento contém
<noframes> Define um bloco noframes, o qual só será apresentado se o browser não
suportar os elementos <frameset> e <frame>
<noscript> Define um bloco noscript, o qual só será apresentado se o browser não
suportar o elemento <script>
<object> Insere um objeto dentro da página (como um filme em Flash, por
exemplo)
<ol> Define uma lista ordenada
<optgroup> Define um grupo de opções
<option> Define uma opção numa lista de um formulário
<p> Insere um parágrafo
<param> Define um parâmetro para o elemento <object>
<pre> Define texto pré-formatado
<q> Define uma citação curta
<s> Define texto que se escreve com um traço horizontal sobreposto
("strikethrough") Desuso. (usar CSS)
- 54 -
-----------------------------------------------------------------------------------------------------------
<samp> Define uma amostra ("sample") de código de computador

<script> Insere um script
<select> Define uma lista com itens selecionáveis
<small> Define texto menor ("small")
<span> Insere uma divisão (ou secção) dentro da página
<strike> Define texto que se escreve com um traço horizontal sobreposto
("strikethrough") Desuso (usar CSS).
<strong> Define texto mais forte (será escrito em negrito)
<style> Define estilos CSS a aplicar na página
<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 divisão, ou célula, numa tabela
<textarea> Define uma área para inserção de texto num formulário
<tfoot> Define o rodapé de uma tabela
<th> Define o cabeçalho de uma coluna numa tabela
<thead> Define o cabeçalho de uma célula numa tabela
<title> Define o título da página
<tr> Define uma linha de células numa tabela
<tt> Define texto que imita o de uma máquina de escrever antiga ("teletype
text")
<u> Define texto sublinhado ("underlined") Desuso (usar CSS)
<ul> Define uma lista não ordenada ("unordered list")
<var> Define uma variável
23. ATRIBUTOS ESPECIAIS DE HTML 4

23.1 - Atributos intrínsecos
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 são 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 são 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 são at r i bu tos i n tr í nse cos da l i nguag e m.
23.2 - Atributos nucleares ou intrínsecos (" Core Attributes ")
Não 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 (não deve ser repetido no
mesmo documento) para o elemento
style style_definition Definição de um estilo dentro do próprio corpo
do documento ("inline style definition")
title tooltip_text Texto a apresentar como dica
23.3 - Atributos lingüísticos
Não 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 direção do texto
lang language_code Define o código da língua usada na escrita dos textos
23.4 - Atributos de teclado

accesskey carácter (corresponde a Define um atalho do teclado (seqüência de
uma tecla) teclas) que permite aceder mais rapidamente a
um elemento da página
tabindex número Define o número de ordem ("tab order") do
elemento no acesso através da tecla tab
23.5 - Eventos de janela
A p ar ti r da ve rsão 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 formulários
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 lár io :
ATRIBUTO VALOR DESCRIÇÃO

onchange script Script a executar quando o valor contido no elemento sofrer
uma alteração
onsubmit script Script a executar quando o formulário for submetido
onreset script Script a executar quando o conteúdo do formulário 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
Não 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
Não 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 botão do rato é pressionado
onmousemove script Script a executar quando o ponteiro do rato muda de posição
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 botão 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 opós 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 fôn 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 róx 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 consórcio da Web
O HTML e d e ma is l in g ua ge ns d e ma rca ção são 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 nsór 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 ação
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 Marcação

Genérica Padrão) 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 ação 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 vés 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 pós 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 são :
• M a th ML: u sa da pa ra n ota ção ma te mát 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 Conteúdo de Sítios 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 lém 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 notícias, músicas ou
programas de rádio) . 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.
Então, 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 bás 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 bém es tar á fa ci l it an do a le i tu ra, in te r p ret ação 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 ação 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" - "Código 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 nár 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 lár 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 tân 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 não 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.
Estabeleça 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 rão a pág 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 não ao m e u p ú bl i co a lv o? !
O s ob je t ivos não 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 ação 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 fác i l de c om eça r se u
t ra ba l ho.
Divida seu conteúdo em tópicos

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 não i mp or ta a o r de m. Es ta
é um a fo r ma de c om eça 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 opções).
Organização e Navegação
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 Visão 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 ução 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.
Conteúdo 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 são 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 exão é 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 rês 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 navegação e projeto gráfico).
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 ação 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 não 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 uções 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 não 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 rão 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 rão os p rin c i pa is

a tra t ivos de s uas pág i nas, a não s e r q ue o p on to c ha ve se ja m as
i m ag ens. Po r iss o, não 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 não 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 pági 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 não é 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 ação 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. CONCLUSÃO
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 são
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 eça 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 nça 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 Pratico Do HTML Web Standards e Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia Pratico Do HTML Web Standards e Css

Uploaded by

Copyright:

Available Formats

Guia Prático de HTML – Prof.

Tiago Daniel de Souza

Guia Prático 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 PÁGIN A E M HT ML . ........ ........ ....... ........ ....... ... 06

5 . O CABEÇALHO 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 Não O r de na das ........ ........ ............... ....... ........ ....... .. 21

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

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

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 não 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 inglês) 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 (também chamado de browser) , na da ma is faz d o q ue ab r i r

3. SUA PRIMEIRA PÁGINA 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 dão 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 - Explicação do Exemplo

A p r i me i ra t ag e m s eu d o c um en to HTML é <h tm l>. Est a t ag d e fi n e o i n íc io d e

O tex to e nt r e as ta gs <h ea d> ... < /h ea d> é a in fo r ma ção d o ca b eça lh o.

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 extensão .htm ou .html?

O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nsão . h tm l, mas a

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

3.5 - Editores "Puros" versus WYSIWYG

Ex is te m duas fo r mas d e s e cr ia r u m te xto fo r mata do at ra vés d e lin g ua ge ns d e

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 Freqüentes)

De p o is q ue eu ed ite i m eu a rq u ivo H TM L, eu n ão co ns igo v is ua liz ar o

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 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 pós 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) :

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 pós 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

4.2 – Atributos das Tags

T a g é um c ó di go usad o pa ra ma rc ar o i níc io e, o nde f or r e que r i do, o fim d e

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 ta g <bod y> de f ine o co rpo ( body ) de um a pá gi na HT ML. No ex em pl o

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