Guia Prático de HTML, Web Standards e CSS

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.
com -----------------------------------------------------------------------------------------------------------
Guia Prtico de HTML

Este Guia foi escrito por Tiago Daniel de Souza Email: tiagocopa [at] gmail [dot] com Site do Autor: http://www.tiagosouza.com
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Brazil License.
http://creativecommons.org/licenses/by-nc-sa/2.0/br
-1-
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------
SUMRIO
1 . IN T RODUO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 2 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 3 . S U A P RI MEI R A PGIN A E M HT ML . ........ ........ ....... ........ ....... ... 3 .1 - O q ue es t d en tro de u m a rq u i vo e m HTM L? ! .... ...... ........ ....... 3 .2 - Ex p eri m en te voc mes mo ...... ........ ....... ........ ....... ........ ....... 3 .3 - Ex p l ica o do Exe m p lo .......... ........ ....... ........ ....... ........ ....... 3 .4 - De vem os usa r a ex te nso .h t m ou . htm l ? ............. ........ ....... .. 3 .5 - E d itor es " P uro s" v e rsus W YS IW Y G ......... ........ ....... ........ ....... . 3 .6 - FA Q (P e rg u ntas F r eq e nt es) .. ........ ....... ........ ....... ........ ....... 4 . ELE MEN TOS E AT R IBUTOS ........ .......... ........ ....... ........ ....... ..... 4 .1 El eme nt os . .......... ........ ....... ........ ....... ........ ....... ........ ....... 4 .2 A tr i bu tos das Ta gs ...... ....... ........ ....... ........ ....... ........ ....... .. 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 ....... ........ . 4 .3 - De vem os usa r as pas o u p l ic as/a ps tro fos ..... ....... ........ ....... ... 4 .4 Notas R p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 5 . O CABEALHO DE UM DO CUM ENTO H TM L ... ........... ........ ....... .. 5 .1 - O El em e nto <h ea d > ( ca be a lh o do doc u me nto ) ..... ........ ....... .. 5 .1 .1 - A In fo r ma o C o nt id a no E le me nto <h ea d > ....... ........ ....... 5 .1 .2 - E lem e ntos de c ab e al ho ( <hea d > ) ...... ............ ........ ...... 5 .1 .3 - A de c la ra o D O CT YPE ..... ........ ....... ........ ....... ........ ....... 5 .2 - O e lem e nto <m et a> .. ........... ........ ....... ........ ....... ........ ....... 5 .2 .1 - P ala v ras- cha ve pa ra os m oto re s de p es qu isa ..... ........ ....... . 5 .2 .2 - Va lo res des con h ec i dos pa ra o at r ibu to nam e do <m eta > .... . 6 . MODIFICAN DO O CO RPO DO DO CUMEN TO .......... ........ ....... ..... 7 . ELE MEN TOS B SI COS DA LIN GU AGEM H TML ...... ........ ....... ...... 7 .1 Ca b e al hos .... ..... ........ ....... ........ ....... ........ ....... ........ ....... . 7 .2 Pa rg r af os . ........ ........ ....... ........ ....... ........ ....... ........ ....... . 7 .2 .1 - A l i nh am en tos d e pa r graf o ....... ........ ........ ....... ........ ...... 7 .3 - C ria nd o u ma di vi so ..... ....... ........ ....... ........ ....... ........ ....... . 7 .4 Q ue br as d e L i nha ..... ........... ........ ....... ........ ....... ........ ....... 7 .5 Co men t r ios ......... ........ ....... ........ ....... ........ ....... ........ ...... 7 .6 I n fo rm a es te is .... .......... ........ ....... ........ ....... ........ ....... . 7 .7 L ista d e e le me ntos bs icos d o HTM L . ..... ........ ....... ........ ....... ... 8 . FOR MAT AO 8 .1 El eme nt os 8 .2 El eme nt os 8 .3 El eme nt os DE TE XTO . ...... ........ ....... ........ ....... ........ ....... .... pa ra f o rma ta o d e te xto ...... ........ ....... ........ ....... pa ra o " ou tp ut de c di go de com p utad o r" .... ........ ... pa ra c i ta es e li stas de def i n i es ........ ........ .......
05 05 06 06 06 06 07 07 07 08 08 09 10 11 11 11 11 11 12 12 12 12 13 13 14 14 14 14 15 16 16 16 17 17 17 18 18 18 19 20 20 20 20 21
9 . LI GAES DE HIPE R TE XTO ( "LIN KS") ........ .......... ........ ....... ... 9 .1 - Li n ks i n te rn os ....... ........ ....... ............... ........ ....... ........ ...... 9 .2 - Li n ks l oc ais o u re la ti vos ....... ........ ....... ........ ....... ........ ....... . 9 .3 - Li n ks e xte r nos ...... ........ ....... ........ ....... ........ ....... ........ ....... 9 .4 - Al vo ( ta r get ) ....... ........ ....... ........ ....... ........ ....... ........ ....... . 9 .5 El eme nt os pa ra f a ze r l i ga es . ............ ........ ....... ........ ....... .. 1 0 . LIS T AS ...... .......... ........ ....... ........ ....... ........ ....... ........ ....... ...
-2-
1 0. 1 1 0. 2 1 0. 3 1 0. 4
L is tas No O r de na das ........ ........ ............... ....... ........ ....... .. L is tas Or de na das .... ........... ........ ....... ........ ....... ........ ....... . L istas de De fi ni es ........... ........ ....... ........ ....... ........ ....... E l em e ntos pa ra L is tas ........ ........ ....... ........ ....... ........ ....... .
21 21 21 22 22 23 24 24 24 24 25 25 25 26 26 27 27 27 28 30 32 32 32 33 35 35 37 37 37 37 38 38 38 39 39 39 40 40 40 40 41 41 41 41 41 42 42 42 42 43
1 1 . I MAGENS .... ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 1 1. 1 - Ta ma nh o de exi b i o da im a ge m . ....... ........ ....... ........ ....... .. 1 1. 2 - Tex to a lt er nat iv o ....... ........ ........ ....... ........ ....... ........ ....... . 1 1. 3 - Bo rda da i ma gem ......... ...... ........ ....... ........ ....... ........ ....... 1 1. 4 - A l inh am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 1 1. 5 - Es pa am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 1 1. 6 E l em e ntos re la ci ona dos c om im ag en s ............... ........ ....... ... 1 1. 7 Fu nd os de P gi na .. ............ ........ ....... ........ ....... ........ ....... 1 1. 7. 1 - O a tr i bu to bgc ol or do e le me nt o <bo d y > . .......... ........ ...... 1 1. 7. 2 - O a tr i bu to bac k g ro un d ...... ........ ....... ........ ....... ........ ..... 1 1. 8 D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 1 2 CO RES .... .......... ........ ....... ........ ....... ........ ....... ........ ....... .... 1 2. 1 - Fo rm as d e ex pr i m i r co res ...... ............ ........ ....... ........ ....... .. 1 2. 2 Nom es de co res .. ............. ........ ....... ........ ....... ........ ....... .. 1 2. 3 Co res s eg u ras d a We b ........ ........ ............... ....... ........ ....... 1 2. 4 - Fo rm as d e ex pr i m i r o s va lo res das c or es .... .......... ........ ....... . 1 2. 5 - Ma is d e 1 6 m i lh es d e co res d if e re ntes .. ............. ........ ....... . 1 2. 6 - Ma is n om es de c or es ........... ........ ....... ........ ....... ........ ....... 1 3 . EN TI DADES , ACEN T U AO E CARACT ER ES ESP E CI AIS .... ....... 1 4 . TABE LAS ........ ...... ........ ....... ........ ....... ........ ....... ........ ....... .. 1 4. 1 - Es pa am en to en t re c lu las ..... ........... ........ ....... ........ ....... .. 1 4. 2 - P re en c h im en to d e c lu las .... ........ ............... ....... ........ ....... 1 4. 3 - La r gu ra de c lul as e ta b elas .... ................... ....... ........ ....... . 1 4. 4 - Uso d e ta b el as .... ........ ....... ........ ....... ........ ....... ........ ....... 1 4. 5 D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 1 4. 6 E l em e ntos re la ti vos a tab e la ..... ....... ........ ....... ........ ....... ... 1 5 . FO RMUL RIO S ..... ........ ....... ........ ....... ........ ............... ....... .. 1 5. 1 C ri ar Fo r mu l r ios .... ........... ........ ....... ........ ....... ........ ....... 1 5. 2 i np ut .. ......... ...... ........ ....... ........ ....... ........ ....... ........ ...... 1 5. 3 - "R adi o Bu tto ns" ...... ............ ........ ....... ........ ....... ........ ...... 1 5. 4 C hec k box es ....... ........ ....... ........ ....... ........ ....... ........ ....... 1 5. 5 - O a tr i b uto a ct io n e o bo to de s ubm iss o ......... ........ ....... .... 1 5. 6 - E lem e ntos pa ra F or m ul r ios .... ........... ........ ....... ........ ....... . 1 6 . F R AMES H TML ..... ........ ....... ........ ....... ........ ....... ........ ....... ... 1 6. 1 - Va nta ge ns e des van ta ge ns d as mo l dur as ....... ....... ........ ....... 1 6. 2 - O E le me nt o f ram ese t .......... ........ ....... ........ ....... ........ ....... 1 6. 3 O Ele me nt o f ram e ...... ........ ........ ....... ........ ....... ........ ....... 1 6. 4 D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 1 6. 5 E l em e ntos pa ra F ra mes ...... ........ ....... ........ ....... ........ ....... . 1 7 . INS ERO DE SCR IP TS ....... ........ ....... ........ ....... ........ ....... ... 1 7. 1 - Ins er i r um s cr ip t nu ma p g i na HTM L .... ........ ....... ........ ....... . 1 7. 1. 1 - Um exe m p lo p r t ico ....... ........ ....... ........ ....... ........ ....... 1 7. 2 - Como li da r c om os b ro wser s an ti gos ..... ........ ....... ........ ....... 1 7. 2. 1 - O E le me nto <n osc r i pt > ...... ............ ........ ....... ........ ...... 1 7. 2. 2 - Um exe m p lo ...... ............ ........ ....... ........ ....... ........ ...... 1 7. 3 - E lem e ntos pa ra ins er i r scr i p ts e c d ig o ...... ......... ........ ....... .
-3-
1 8 . O UT RAS POSSIBILI DADES ...... .......... ........ ....... ........ ....... ..... 1 9 . COLOCAN DO S EU S IT E NO AR ............. ........ ....... ........ ....... ... 1 9. 1 Ist o t u do q ue eu pr ec iso ? ! ........ ...... ........ ....... ........ ....... . 1 9. 2 - Como e u f ao en v io os a r qu i vos do me u s ite ? ! ...... ........ ....... . 2 0 . H TML A V AN ADO ........ ........ ........ ....... ........ ....... ........ ....... ... 2 0. 1 - Fo l has de Est i lo ( C SS ) . ....... ........ ....... ........ ....... ........ ....... . 2 0. 2 T emp l ate s . ......... ........ ....... ........ ....... ........ ....... ........ ...... 2 0. 3 Ac ess i bi l i da de .... ........ ....... ........ ....... ........ ....... ........ ....... 2 0. 4 Si tes di n mi cos o u a ut oma ti za dos ....... ........ ....... ........ ....... . 2 0. 5 - We b sta n da rds e va li da o ...... .................... ....... ........ ....... 2 0. 5. 1 - O q u e ma is h pa ra co nh e ce r s ob re HTM L ? ! ..... ........ ....... ... 2 0. 5. 1. 1 - L e ga l !! Posso a nu nc iar ? ! ... ........... ........ ....... ........ ...... 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? ! ..... ........ ...... 2 1 - GUI A DE REF ERN CI A R PI DA .......... ........ ....... ........ ....... ... 2 2 RE FER N CI AS COM PLE TAS DE H TM L 4 .0 1 ...... ........ ....... ...... 2 3 . AT RIBUTO S E SPE CI AI S DE HT ML 4 ...... ........ ....... ........ ....... ... 2 3. 1 - A tr ib u tos i n tr n se cos ......... ........ ....... ........ ....... ........ ....... .. 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 ") ........ .... 2 3. 3 - A tr ib u tos l i n g st i cos ......... ........ ....... ........ ....... ........ ....... . 2 3. 4 - A tr ib u tos de tec la do .. ......... ........ ....... ........ ....... ........ ....... 2 3. 5 - E ven tos de jane la ... ........... ........ ....... ........ ....... ........ ....... . 2 3. 6 - E ven tos pa ra fo r mu l ri os .... ........ ............... ....... ........ ....... . 2 3. 7 - E ven tos de t ecl a do ....... ..... ........ ....... ........ ....... ........ ....... . 2 3. 8 - E ven tos do mou se ...... ....... ........ ....... ........ ....... ........ ....... . 24. O 2 4. 1 2 4. 2 2 4. 3 2 4. 4 P RESEN TE E O F UT URO DO M AR KUP ........ ...... ........ ....... ..... - O con s rc io da We b ..... ....... ........ ....... ........ ....... ........ ....... - S GML e HTML ..... ........ ....... ........ ....... ........ ....... ........ ....... XML ...... ............ ........ ....... ........ ....... ........ ....... ........ ....... - R DF e S y nd i cati o n .. ............ ........ ....... ........ ....... ........ .......
43 43 44 44 45 46 47 47 48 49 49 50 50 51 53 55 55 55 55 56 56 56 56 57 57 57 57 58 58 58 62
2 5 . DI CAS FIN AI S ...... ........ ....... ........ ....... ........ ............... ....... .. 2 6 . CON CL US O . ....... ........ ....... ........ ....... ........ ....... ........ ....... ...
-4-
1. INTRODUO
A s p essoas im ag i nam q ue m u it o d i f ci l co nst r uir um s ite . I sto no v e r dad e !! Q ua l qu e r um p o de a pr e nd e r c om o cons t ru i r u ma p g ina . S e v oc c on ti n ua r l e n do, esta r ap to a co nst r u ir um ra pid a me nte, q u an do me nos es p era r. O u tro s pe nsa m - erroneamente - qu e s er n ec ess rio so ft war es a van a dos e c ar os par a c ons t ru i r w e bsi tes. ve r da de q ue ex ist em m u itos so f twa res c ap az es de c r ia r u m w e bsi te par a vo c. Al g u ns ma is f e c had os q u e o ut ros. Mas, s e voc pr ete n de tr i lh ar o ca m in ho c e rto, de ve r cr ia r vo c mes mo o w e bsi te. Fe l i zm en te, i sto s i mp l es v oc j te m a sua d is pos i o to dos os so ft wa res q u e n ece ssi ta. O o bj et iv o d es ta m in ha a pos t il a fo rn ec e r os c onh eci me nto s b s icos qu e p e r mi ti ro c ons tr u i r um we bs it e d e fo rma co r ret a. A ap ost i la pa rt e d a estac a z e ro e n o r e qu e r q ual q u er con he c im en to pr v io d e pro g ram ao. O b v ia me nte , a a pos ti l a no e ns in a tu do. D ia nt e d isto, se r n e cess r io q u e v oc se em p en he , pr at i qu e e co nso li d e os e ns ina men tos a q ui c on ti dos . Mas, n o se abor r e a, p ois a p re nd e r c om o co nstr u i r u m w eb s ite bem d i ve rt i do e b ast an te sa tis fa t rio q u an do v oc tr i lh a o ca m in ho c ert o do a p ren d i za do. O K. Ch e ga d e c on ve rsa. Va mos co me a r...
2. SOBRE O HTML
O H T ML u ma L in gu ag e m de m a rca o d e te xto . M ais e sp e ci f i cam en te , u ma l in g uag e m de mar ca o d e h i p er tex to. P or ta nto, a nt es d e co me a r a fa la r d e HTM L, va mos e nt en d er o q ue v em a s er u ma l in g uage m d e mar ca o. L in gu ag en s d e ma rc a o (markup languages em ingls) s o l in g ua ge ns q u e c om b in am t ext o com i n fo r ma es ex tras sob r e o tex to. Essa i n for m ao ex tr a p o de se r re p res en ta da po r d i ver sos s m bol os o u pa la v ras- cha ve d if e re ntes, d e pe n de n do da l i ng uag e m d e mar ca o com q u e est i verm os tr ab alh an do. O H T ML n o e ra um a l i ng uag e m d e for m ata o d e t extos q u alq ue r, e la p oss i bi l ita va l i ga r t extos q ue esta va m nu m c om p uta dor a te xtos q u e e sta va m n u m o ut ro c o m pu ta do r, usa n do co mo me io a i nter n et. O pr oc essa do r e v is ua l iz ad or d e HTML so c ham a dos de n a ve ga dor , pe la car ac te r st ic a d o h i p er tex to q u e p er m ite ao usu r io " na da r" n a i n for ma o. O na ve ga do r (tambm chamado de browser) , na da ma is faz d o q ue ab r i r a r qu i vos de co m pu tad o r e, ca so esses a rq u i vos co nt en ha m cd i go s HTML , i n te r pr et -los se g un do o pa d ro d o h i pe rt ex to e ge ra r a " pg i na h t ml ", q ue a m an i fes ta o g r f ica dos c d ig os - aquilo que voc usualmente v quando navega pela internet . Po r co nv e n o, os nom es d os a r qu i vos em HTM L t e rm i nam c om .h tml. Ex em p lo : ind ex .h tm l, fo o. ba r.h tm l e e tc. hm l
(existem tambm arquivos html que terminam com .shtml e outras extenses malucas) . O bs e rv e qu e esses ar q u i vos pod e m es ta r t an to n o co m pu ta dor d o
u su r io que usa o nav e ga do r q ua nto e m ou t ros co m pu ta do res : o nav e gado r c ap az de a b ri r es ses a r qu i vos d es de q ue e les est eja m ac ess ve is - as ta is p gi nas w eb .
-5-
3. SUA PRIMEIRA PGINA EM HTML

U ma p gi na HTML di v i d id a e m d u as par tes, a c abe a e o c orpo . Na cab e a (ou cabealho) s o de f in i dos os a tr i b utos p r i nc i pa is d o do cu men to, co mo o t tu lo e as p a lav ras -ch av e. O corp o c on tm a pa rt e v is ve l do d o cu me nto, i.e, a q ue la qu e v oc ve r p r oc essa da em s eu n av e ga dor . Ex is te a i nd a uma r eg i o d a p gi na q u e es t ta nto fo ra da ca be a qu an to do co r po (no! no a falta de juzo!) , m as no i re mos e nt rar ne sse m r i to.
3.1 - O que est dentro de um arquivo em HTML?!
U m a r qu i vo HT ML con st it u d o po r tex tos qu e de f i nem os e le me nt os da l i n gu ag em HTM L usa nd o "etiquetas de marcao" ; A s et i qu etas de mar ca o do ins tr u es a o nav e ga do r so b re a es t ru tu ra d o doc u men to e so bre a f or ma d e co mo a p g ina de ve se r a p rese nt ada gr af i came nt e; O s ar q ui vos HTM L po de m se r es c ri tos usa n do u m si m p les e d it or de t ext os e seu s no mes de ve m possu i r a ex te nso .h tm l
3.2 - Experimente voc mesmo

Bo m, se vo c u t il i za o Wi n dows (95, 98, 2000, XP, etc) , i n ic ie o Bloc o d e Not as (Notepad). A g ora d ig i te o se g u in te tex to:
<html> <head> <title> Ttulo da Pgina </title> </head> <body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body> </html>
S al ve este a r qu i vo com o no me in d ex .h tm A b ra o se u na v ega do r. A go ra a br a o ar q ui vo qu e vo c sa lvo u a cim a, c ha mad o in de x .h tm u t i l iz an do a s o p es d o m en u o u a r rast an d o o co ne d o a r qu iv o p a ra d en tro da ja ne la d o na ve gad o r. O bse rv e o r esu lta do.
3.3 - Explicao do Exemplo

A p r i me i ra t ag e m s eu d o c um en to HTML <h tm l>. Est a t ag d e fi n e o i n c io d e u m d oc ume nt o HTM L e i n d i ca ao na ve ga do r q ue to do cont e do p os te r io r d e ve se r t ra ta do c omo u ma s r ie de c d ig os HTM L. A lt ima ta g e m se u doc um e nto d e ve r se r < /h tm l>. Es ta ta g i n d ica ao n av eg ador q ue o f i m d e se u d o cu me nto HTM L. O tex to e nt r e as ta gs <h ea d> ... < /h ea d> a in fo r ma o d o ca b ea lh o. Ne nh u ma in fo r ma o c on ti da no c ab e al ho exi b i da na jan el a do na v ega do r.
-6-
O te xto ent r e as ta gs < title > ... < /title> o t t u lo de se u do cu me nt o. O t tu lo se r e xi b i do na l e ge n da d o na v ega do r, n a pa rt e d e c i ma do b ro wse r. O t exto ent r e as t ags <b od y> ... < /bod y> s o as i nfo r ma es que ser o e xi b i das na p g i na. O tex to e ntr e <b> ... < /b> f i ca r c om o est i lo Ne g ri to (Bold)
3.4 - Devemos usar a extenso .htm ou .html?

O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nso . h tm l, mas a e xte nso .h tm a i nd a u t il i za da. Est e f ato uma he ra n a dos t e mp os (prhistricos no que diz respeito Internet) d o M S- DO S e d o W ind ows 1 6 b its , e m q ue os no mes dos a rq u ivo s t in ha m no m xi mo 8 ca rac te res e as su as e xte ns es n o p od iam te r ma is d e 3 ca rac te r es. Essas de f ici nc ias, q ue no p assad o o br i ga ra m a usa r a ex te nso . h tm em v e z d e .h tm l j fo ra m e lim i na das. Po r isso de ve mos usa r a ext enso . h tm l, a no se r q ue ex ist a u ma b oa ra zo pa ra voc esta r u t i li za n do . h tm (pouco
provvel).
3.5 - Editores "Puros" versus WYSIWYG

Ex is te m duas fo r mas d e s e cr ia r u m te xto fo r mata do at ra vs d e lin g ua ge ns d e m a rca o. A p r im e ir a c ons is te em es cr ev e r o tex to, usa n do as in st ru e s d a l i n gu ag em , n u m e d itor d e te xto p u ro. E m se g ui da , u sa-se o pr oc essa do r d e t ext o pa ra p r od u z ir o t ext o fo r ma tad o. A o ut ra ma ne i ra usa r u m e d it or d e text os WY SIWY G ( What You See Is What You Get - O Que Voc V O Que Voc Tem ). A pesa r d a s i gla se r c om p r id a, o c on ce it o s im p les: esse t i po d e p ro g ram a co mp ost o po r u m e d ito r d e t ext o qu e t am b m u m pr oc essa do r de te xtos fo r mata dos. A d i f er en a aq u i q ue o tex to que o us u ri o es t e d it an d o e vis ua l iz an do no o t ext o p uro, mas s im o t exto j f o rma ta do g r af i cament e, o u s ej a, o qu e v oc v o qu e vo c te m. Vo c p ro vav e lm en te j uso u e d it or es desse t ip o. O s e d ito r es c om o o Word , o AbiWord e o OpenOffice Writer so W YSIW YG e os doc u me nt os q ue eles g e ra m ut i l iz am L ing ua g ens d e m a rca o .
3.6 - FAQ (Perguntas Freqentes)

De p o is q ue eu ed ite i m eu a rq u ivo H TM L, eu n o co ns igo v is ua liz ar o re su ltad o e m m eu na ve ga do r. Po r q u? ! Ve r i fi q ue se vo c sa lv ou o a rq ui v o co m o n om e c or reto e q ue s ua ex te nso se ja . h tm. C on f ir a t am b m em s ua bar r a de e nd e re os do na v ega do r, v e r if i qu e qu an to ao d ir e tr io se es t co r re to. Qu a l nav eg a do r eu d ev o u tiliz a r? ! Vo c po de u t i li za r qual q u er b rowse r, co mo o I nte r net Ex p lo re r, Mo z il la, O per a, e tc. .. pa r tic u la rm en te r ec om en do o F i re fox e o In te rne t Ex pl or er.
-7-
P o rq ue u tiliz am os ta gs c o m le tras m in sc u la s?! E m HTM L os nom es das tag s e el e me ntos po de m se r es cr it os ta nto com l et ras m a is cu las q ua nto com le tr as mi n s cu las, t an to q ue <B> a m es ma co isa q u e <b>. S e v oc obse r va r e m t ut or ia is en co nt ra dos p e la We b, v ai no tar q u e os m ais a nt i gos ge ra lm e nte ut i liz am le tr as m a is cu las p ara es c rev e r os no mes d as ta gs, m as os mai s mo de rnos ut i l iza m e xc lu si va ment e le tras m i n sc u las. Nes ta m i nha a post i la u t i li zo se mp r e l et ras m i n sc u las p or q ue ex ist e u ma raz o m u it o fo rt e p ar a isso. A nov a ge ra o do H TML u ma a p l ic a o do XML e d es i gn ada p o r XHT ML. O XHT ML a m el ho r l i n gu ag em p a ra se c r ia r p g i nas p ar a a We b, m as mais r est ri ta d o q ue o HTM L (rouba algumas das liberdades que o HTML oferece) . A o co nt r r io d o q u e aco nte ce em HTM L, e m XM L as et i qu et as <B> e <b> re p rese nt am e l em e ntos d ife r en tes, vist o q ue em XH T ML f o i a dot ad o um a c on ve n o se g und o a q ual to da s a s e tiqu e tas de ve m s e r e s c ritas c o m le tra s m in sc u la s. Por est e mo ti vo e xt re ma men te r e com en dv e l qu e s e e sc re va to das as e ti q u etas com le tra s m in sc u las. D es te m odo, vo c es ta r a d qu i rin d o bo ns m o dos e qu ase no te r tra ba l ho de c on ve r te r su as p g i nas HTM L pa ra X HTML.
4. ELEMENTOS E ATRIBUTOS
4.1 - Elementos
U m e le men to um a es tr ut u ra se m nt ica, c om pos ta de ta g d e ab e rtura, c on te do e ta g d e fe c ha me nto . O s doc u men tos HTML s o s im p les a rq u ivos de te xto q ue co nt m "tags de marcao" . Ess as et iq u etas d efi n em os e le me nt os da l in g ua gem HTM L e os se us c on te d os. A lis ta se g ui nt e i n d ic a a l g um as d e suas c ara ct er st i cas :

A s "t ags de m ar ca o" d o HTML so usa das p a ra d ef i nir os e le men tos. A s ta gs HTM L esc re v em -se ut il i za n do os car ac te res < e > , e nt re e les o n om e do ele me nt o e os se us at r ib u tos. A p r i me ir a t ag do pa r a ta g de i n ci o (ou de abertura) e a s eg un d a d o p a r a ta g d e f i m (ou de fechamento) . T ud o o q ue se en co nt ra r e nt re a s t ags de i n c io e de fim fa z em pa rt e d o c on te do do e le me nt o. E m XHTM L as ta gs d ev e m s er esc r it as s emp r e co m l et ras mi n sc u las, e as ta gs <b> e <B> no re p resen ta m o mes mo e le men to.
Vo c se lem b ra de nosso p ri me i ro ex e mp lo m ost ra do ? !

<html> <head> <title> Ttulo da Pgina </title> </head> <body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body> </html>
-8-
Es ta pa r te a ba ixo um e le me nto HTM L:

<b>Este texto est em negrito</b>
Re pa r e a l gu ns as pe ctos do c d ig o ac i ma :

Es te e le men to in ic ia c om a t ag : <b > O co n te do do e le m en to es te : Es te tex to es t em ne g rito O el em en to te rm in a co m a ta g f in al : </ b >
O p ro ps ito da ta g <b> co lo ca r o con te d o d o e lem e nto HTM L e m n e gr i to
(bold)
Um e x emp lo m a is co m p le xo Es te ex em pl o a bai xo ta m b m um e le me nto do HTML (mais complexo) :
<body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body>
Es te e le men to HTM L in ic ia com t ag <b od y> e te rm in a co m a ta g < /bo dy> O p ro ps i to da ta g <b od y> d e f in i r o c o nte do p r i n ci pa l, o co r po d o d o cu me nto.
4.2 Atributos das Tags

T a g um c di go usad o pa ra ma rc ar o i nc io e, o nde f or r e que r i do, o fim d e u m e le men to HTML. H , co mo ex post o a c im a, ta gs de ab e rt u ra e d e f e cha me nto. Um a t ag d e a b er tur a re p rese nt ada po r s in a l d e m e no r ( < ), u m no me d e e lem ento HT ML, e u m s in a l d e m a io r ( > ) (ex. <p>) e d ev e se r co lo cad a i me d iata me nt e ante s do in c io d o cont e do do el e me nto. Um a ta g de f ec ha m en to se di fe r enc ia de uma ta g de ab e rt u ra ape nas po r uma b a rr a ( / ) an tes do n o me do e le m en to (ex. </p>) e d ev e se r co lo ca da i m e dia ta men te ap s o f im do c on te do d o e l em en to. O s Atribu to s se r ve m p a ra d e fi n ir u ma pro pr i e da de de u m e le men to HTM L. O s a tr i bu tos HTM L de ve m s e r co locad os se mp re n a ta g d e a be rtu ra, l o go a ps o n om e do e le me n to, p r e ce d i do d e u m es pa o e com p osto d e u m n om e d e a trib uto, u m s ina l d e igu a l ( = ) e u m va lo r de a tribu to, c er ca do po r a sp as d upla s ( " ) ou s i m pl es ( ) A ta g <bod y> de f ine o co rpo ( body ) de um a p gi na HT ML. No ex em pl o se g u in te ad i c io ne i o a tr i bu to bg c o lo r (que significa "background color", ou cor de fundo) pa ra i nd i ca r mos qu e q ue r emos qu e a p g ina f iq ue com u ma c or v e rm e lha em s eu p lano de fu n do.
<html> <body bgcolor="red"> Esta a minha primeira pgina da web. <b>Este texto est em negrito</b> </body> </html>
Va mos cons i de ra r a go ra a ta g < tab le>, q u e de f ine u m e le me nt o d e um a t ab el a. Ao j un ta rm os o at ri b uto bo rde r (que significa borda) co m o val o r
-9-
a p rese nt ado a se gu i r, es tam os d i ze n do ao nav e gad o r pa ra n o co lo car as b o rd as da ta be la ( <table border="0"> indica uma espessura nula para a linha
de contorno da tabela):
<html> <body> <table border="0"> <tr> <td> Esta a minha primeira tabela. </td> </tr> </table> </body> </html>
J no exe mp l o a ba ixo es ta mos diz e nd o ao na ve ga do r pa ra des en ha r uma l i nh a d e c on to rno c om es p ess ur a 2 ( border="2" )

<html> <body> <table border="2"> <tr> <td> Esta a minha segunda tabela. </td> </tr> </table> </body> </html>
O s at r ib utos s em p re n am e="v alu e"
e nt ra m
em
pa res
n om e/ va lo r
(name/value), ass im :
N o ta 1 : Os at r i bu tos s po de m a pa re ce r nas t ags de i n ci o. p ro i bi do co loc ar a tr i bu tos nas ta gs de f e cha me nto. N o ta 2 : Pa ra ga ran ti r a co m pa ti b i li da de c om a l in g ua ge m X HTML, uti l i ze l e tras m in sc u las p ar a es c re ve r o nom e dos a tr i b utos, e s em pre co lo q ue os v a lor es e ntr e as pas.
4.2.1 - Atributos podem ser aplicados maioria das tags

Vo c no rma l me nte usa r a tr i b utos co m m ai s fr e q n cia e m a l gum as t ags, ta is c om o a tag b od y e ra ra me nte u sa r e m o ut ras, com o por exe m p lo, a ta g br q u e u m c om an do pa ra pu la r de l i nha e no p re c isa d e ne nh u ma i nfo r ma o a d ic io na l. A ssi m co mo ex ist em m u it as ta gs, ta mb m e x iste m m u it os at r ib u tos. A l gu ns a tr i bu tos so e mp re ga dos em ta gs esp ec f i cas en q ua nto ou tr os s er ve m p a ra v rias ta gs. E v ic e-ve rsa : a l gum as ta gs p o de m co nt e r som en te u m t i po d e a tr i bu to, en q ua nto o ut ras po de m co nt e r v ri os t i pos. I sto po de p a re ce r um po u co co nf uso, mas m e di da q ue vo c f o r p rat i can d o v a i cons tata r q ue t u do f c i l e l g i co, b em co mo vai ve r i fi ca r as in m er as p oss i bi l i dad es qu e os at r i bu tos o fe re ce m.
- 10 -
4.3 - Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')?

A ca ba mos d e v er q ue o s val or es dos at r i bu tos d ev em se r se mp r e co loc ad os e nt r e as pas. No rm al m en te u t il i za mos as as pas no r mais ( " ), mas os a ps tro fos ( ' ) ta m bm s o p erm i t ido s. E m al g uns c asos, o val o r do at r ib u to co nt m o p rp rio ca ra ct er e as pas. Num a s it ua o dess as, de ve mos usa r a ps tro fos (que aqui funcionam como aspas simples) pa ra co lo ca r e m to rn o d o v alo r do at r i bu to, ass im : a lt ='E le disse : " N o !" '
4.4 Notas Rpidas
A s Ta gs HTM L so ut i l iz ada s pa ra ma rca r e l em en tos HTM L. E las esto c e rca das pe los do is ca ra cte re s < (menor que) e > (maior que) A s ta gs no rm a lm en te a pa re ce m e m par es, c om o <b> e < /b> A p ri me i ra ta g e m um pa r sem p r e a ta g d e i n c io, a se g un da t ag do p a r a ta g d e f i m O tex to e ntr e o co m eo e o fi m da ta g o co nt e do do e le me nto . HTM L n o sensitive , o u s eja , <b> a m es ma co isa q u e <B> S e p or a caso vo c es c re ve u os c d i gos HTM L e rr ad o - por e xe mp lo >b> i nv s d e <b> - no se d es esp e re, p o is o mx i mo q ue p o de a con te ce r o se u nav e ga do r int e rp re ta r su a p gi na d e fo r ma di f e re nte d o es pe ra do e des en h- la de um j e ito m al uc o.
5. O CABEALHO DE UM DOCUMENTO HTML

5.1 - O Elemento <head> (cabealho do documento)
O e le me nt o <h ea d> co nt m i n f or ma o d e car ac te re ge ra l, ta mb m d es i gn ada p o r me ta- in fo r ma o, s ob r e o co nt e do do d oc um ent o e so b re a f o rma como e le de ve se r a p resen ta do. P od e mos di z e r qu e o t e rmo m eta- i nf or ma o ( ou meta-dados ) s ig n i f ica da dos q u e d esc rev e m ou tro s d ad os ou in fo r ma es.
5.1.1 - A Informao Contida no Elemento <head>

O s el em en tos co nt i dos d en tr o do e le me nto <h ea d> n o s o exi b i dos n a te la d o na ve gad o r. O pa d ro HTM L estab e le ce qu e s u m peq u en o n me ro de e lem e ntos pod e a pa re ce r d e nt ro do ca b ea l ho. E les so : <base >, < link>, < meta> , < title> , <s t y le> e <s c rip t> .
- 11 -
A co nst ru o se r ia o se g u in te :
<head> <p>Aqui temos algum texto</p> </head>
Nes ta si tu a o ac i ma, o nav eg ad or po d e re ag i r de dua s f or mas :

A p re se nta r o te xto por q ue el e se e nco nt ra d e nt ro de u m e l em ent o <p > Es co nd e o t ext o po r qu e e le pe rte n ce ao cab e a lho .
S e v oc col oc ar um el e me nto no a uto r i zado, co mo <h2 > o u <p>, de nt ro d o c ab e al ho, a mai or ia dos nav e gado res va i esc r ev er este e le me nto n a p g i na. A p ar en te me nt e, as p esso as qu e so res po ns ve is pe la con c ep o dos b r owse rs a cha m q ue est e gn e ro de e r ros ac e it ve l. Es ta e out ras d e f ic i n cias dos b rows e rs s o p a rc ia l ment e r es pons ve is pe las m s p r tic as d e co di f ic a o a d qu i ri d as p or m u it os c r ia do res de p gi nas HTM L. U ma das r a zes q ue l e va ram c r ia o d a l i n guag e m XHTML f o i a ne cess i da de d e a ca ba r co m es tas si tua es de um a v ez po r to das.
5.1.2 - Elementos de cabealho ( <head> ) Elemento

<head> <title> <base> <link> <meta>
Descrio
Contm informao importante a respeito do documento mas que no deve ser apresentada no corpo da pgina Define o ttulo da pgina Define um URL base comum para todas as ligaes relativas da pgina Faz referncia a um recurso externo e estabelece a ligao com ele D informao sobre aquilo que o documento contm
5.1.3 - A declarao DOCTYPE

A d ec la rao DO CTYPE s er ve p a ra i n d ica r o DT D a us ar pa ra val i da r n a p gi na. Qua n do ut i l iza da, de ve a pa re ce r lo go n o i nc io da p gi na , a nt es d o e l em en to <h tm l>
Declarao Descrio
<!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html>
5.2 - O elemento <meta>

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

D u ra nt e a lg u ns anos a u ti l iz ao ma is f req en te da i n fo r ma o f o r ne ci da p e lo e l em en to < me ta> fo i a c ri ao de n d ices pa ra si tes de bus ca. At ual men te so me nt e a lg u ns b usc ad o res ai n da usa m esta i n fo rma o p ar a ind ex ar p g in as, e os d e ma io r s uc esso i g no ram e ste e lem e nto. No e n ta nto, h pa rt es q u e
- 12 -
c on ti n uam a s er t i das e m co nsi d er a o pe los a g en tes ( robots ) dos b us ca do res, c om o po r ex em p lo, as i n d i ca es d a das so br e as pastas em q u e n o de v e se r f e ita q ual qu e r i n dexa o. A l g uns s ist em as d e b us ca ( no muitos ) usa m a i n fo r mao co nt id a n os e l em en to m et a pa ra i n d exa r as p g i nas. No f ra g men to d e c di g o s eg u in te , o e l em en to < me ta> co nt m uma b r ev e d esc r i o d a p g ina :
<meta name="description" content="Tutoriais JavaScript, XML, XSLT, SVG"> e referncias tcnicas de HTML, CSS,
Na par te do c d i go ab a ixo o e le me nt o <m e ta> con t m u ma p a lav ras -ch av e p a ra i n dexa r a p g i na:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">
C o mo ac aba mos de ver , os no mes da dos ao a tr i bu to na m e i n d icam c la ra men t e a fi na l id ade da in fo rm a o co nti d a no e lem e nto me ta . I n f el i zm en te , mu itos c r ia do res de p g i nas p a ra a Web a b usa ram d o el eme nt o m et a e usar a m d e fo rm a c on tr ri a s ua f i loso f ia pa ra e n ga na r os mot or es d e p es q uis a. E m cons e q nc ia d isso, os s it es d e b us ca p assa ra m a i g nor ar ca da v e z ma is o e l e me nto < me ta>, o q ue a cab o u d if i cu lt an do to dos aq ue l es q u e p r et en d ia m us -l o d e f o rma co rre ta.
5.2.2 - Valores desconhecidos para o atributo name do elemento <meta>

A l g um as ve z es en co nt ra mos s itu a es e m q u e o a tr ib uto na m e d o e le men to < me ta> co nt m um v a lor des con h ec i do, co mo no exe m p lo se gui n te :
<meta name="security" content="low">
Nu ma s i tua o des tas de ve mos i n te r pr etar o e l em ent o m e ta co mo con ten d o i n fo r ma o q u e espe c f i ca do w e bsi te. Essa i nfo r ma o po de se r im po r tan te p a ra o a uto r da p g in a, mas pro va ve lm en te i rr el eva nt e p ara os v is ita ntes . p oss v e l qu e essas in fo r ma es se jam tei s pa ra a lgu m so ftw ar e q ue le ia a p gi na.
6. MODIFICANDO O CORPO DO DOCUMENTO

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

b gc o lo r: de f in e a co r d e f u nd o d e um docu m en to te x t: a co r d o tex to link : a co r d os l i nks a link: a c or dos l in ks at i vos at ua lm en te (a pgina que voc est
visitando)
v link : co r d os l i n ks j v is it ado s
- 13 -
O s a r gu men tos so o n o me ou o n m er o d e u ma cor , exata m en te co mo n o c aso d o a t ri b u to c olo r us ado no e l em en to fo n t. Po r ex em p lo:

<html> <head> <title>Isso uma confuso!</title></head> <body bgcolor="black" text="gray" link="red" alink="white"> Isso uma pgina em html. </body> </html>
Essa u ma p g in a HTM L o n de o f u n do s er p r e to, com l e tras c in za s, li n ks e m v e rm e lho e l i nks a ti vos e m b ra nco. Essas so as d e fi n i es glo ba is d e co r p ar a se u d oc ume nt o, e a q ua l qu er i nst an te v oc po d e m u dar as co re s com o e l em en to fo n t.
7. ELEMENTOS BSICOS DA LINGUAGEM HTML

7.1 - Cabealhos
O s ca be a lh os (tambm chamados de Headings) s er v em pa ra c r ia r t t u los d i f er en c ia r as se es d a s ua p g ina . E le s p ossu em se is val or es d i fe re nt es, se n do qu e a de va lo r 1 a q ue p oss ui a ma io r fon te e a d e v alo r 6 po ssu i a m e no r fo nte . P or exe m plo, usan do o se g ui nt e c di go :
<h1> <h2> <h3> <h4> <h5> <h6> Ttulo Ttulo Ttulo Ttulo Ttulo Ttulo 1 2 3 4 5 6 </h1> </h2> </h3> </h4> </h5> </h6>
No c d i go a ci ma, o HTM L au toma ti ca me nte so lta uma li nh a em b r an co e ntr e u m t tu lo e o ut ro.
7.2 - Pargrafos
O s pa r g raf os so de fi n i dos c om a ta g < p>
<p>Este um pargrafo</p> <p>Este um outro pargrafo</p>
No c d igo a ci ma, o HTM L a uto ma ti ca me nte a c res ce nta u ma li n ha em b ra nc o a nt es e d ep o is d e u m p ar g ra fo.
7.2.1 - Alinhamentos de pargrafo

Vo c j d ev e te r v isto q u e em cer tos d oc ume nt os o text o a pa re ce o ra a l i nha do d ir ei ta, o ra es qu e rd a, no c e nt ro ou e nt o oc up ando u ni fo r me me nte o es pa o da p gi na (texto justificado) . Isso po de ser ob t id o fa ci l me nt e e m HTM L. Ve ja a ta be la ab a ixo : ELE MEN TO
<p align=left>
DES CRI O
Alinha o texto esquerda
- 14 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<p align=right> <p align=center> <p align=justify> Alinha o texto direita Alinha o texto centralizado Alinha o texto justificado
Not e qu e e nt r e os de l i mi ta dor es < e > no en co nt ra-s e a pe nas o el em en to < p>. A l m d e le, ex ist e o t exto a lign= "a lin ha me n to". D iz em os q u e a lign u m at r i bu to d o el em en to p e a lin ha me nt o o va lo r dess e at ri b ut o. No c aso d e < p a lign="j us tif y">, o va lo r d o at ri b uto a lig n (que significa alinhamento em ingls) j us tif y (justificado) . O s at r i bu tos, as pa la v ras qu e se g ue m o e l em en to, i nfo r mam o na ve ga do r a r es pe it o das p ro p ri ed a des q ue os e le me nt os po de m ass u mi r. C o nf uso ? ! P ode p a re ce r um p ou co co nf uso, mas no . C o mo d isse a To ya, " Um disco de
banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco, tamanho, velocidade, etc, tudo isso so atributos. " E e u d i go m a is: se vo c
c ol oca o dis co n um t oc a- di scos, v oc po d e o uv i- lo em d u as o u n o m xi mo t rs v e lo ci da des. s ve zes d p ra o uv i r a o co ntr rio . Mas se vo c ar re mes sar seu s d i scos do Fo fo, ga ran to qu e e les po de ro g i ra r e m mu i tas o ut ras ve lo ci da des . A ssi m o HTM L, co m m u itas o p es pa ra v oc ex i bi r se u te xto. No HTML, os v al or es dos a tr i bu tos p o de m ser d e f in i dos da fo rm a a trib uto=v alo r o u atribu tos="v a lo r" (como em align="justify") , q ue ma is r e com en dad a. C o mo v oc v i u, ne m t od os os c d ig os e m HTM L n ec ess ita m de a tr i bu tos, e m es p ec ia l os com an dos de mo d if i ca o d e tex to c om o ne g r ito, i tl i co, s ub l i nha do, e tc. Re su m in do, os a tr i b utos d ef i ne m c a ra cte r sti ca s a d ic ion ai s aos e le me nt os. Nas se es s egu i nt es v er em os e le men tos c om v r ios at r ibu tos. Por e xe mp lo, no a d ian ta di ze r ao s eu na ve ga do r pr a p or um li n k e m algu ma pa rt e d o se u te xto, p re c iso di z e r ao na ve ga do r, por ex em p lo, p r a qu e lug a r ess e lin k apo nt a. i sso o q ue u m a tr i bu to faz .
7.3 - Criando uma diviso

Ex is te m mo me ntos em q u e que r emos q ue v r ios pa r g raf os p oss uam um m es mo va lo r d e a tr i bu to - centralizado, por exemplo . A o i nv s de es c re ve rm os a lign= "jus tify " a c ad a a be rt u ra de no vo pa r gr a fo, po dem os us ar o e l em en to div, q ue c ria u ma " d iv is o " n o d o cu me nto n a qu al alg u ns a tr i b ut os so p rese rv a dos. Ve ja mos o ex em p lo :
<div align="center"> <p> Pargrafo 1 Pargrafo 1 Pargrafo 1 </p> <p> Pargrafo 2 Pargrafo 2 Pargrafo 2 </p> <p> Pargrafo 3 Pargrafo 3 Pargrafo 3 </p> </div>
- 15 -
Ex p er i me nte mu da r os at r i bu tos d o al i nh am e nto p ra ve r o q ue a con te ce !! Na p a rte d e Fo lha s d e E s tilo most ra re i co mo u ti l i zar o e l e me nto d iv pa ra cr i ar se es l g ic as e m do cu m en tos.
7.4 Quebras de Linha

A ta g <b r> u t il i zad a q uan do v o c q ue r t e rm i na r u ma l i nha , mas no q u er c om ea r um no vo p ar g ra fo. Com est e com an do voc fa z co m q u e oco r ra u ma q u e bra de li n ha, o n de v oc po si c io na r a ta g. Not e qu e p a ra o e lem e nto <br> no exi st e o co ma n do < /br>, ist o , a q u e bra de l i n ha n o ag e nu ma reg i o d e t ext o d el i mitad a, mas sim n um po nt o d o tex to. C o mp l ic ado? ! E nto va mos l, m a is uma v e z exp l i ca n do de um a o ut ra fo rma : c oma n dos co mo <b>, < i> e < u> a gem so b re um a re g io d o t ext o e pre c isa m se r f e cha dos c om s eus r es pe ct i vos < /b>, </i> e < /u> , p o is do co nt r r io esse s co man d os a gi ro a t o f im do d ocu m en to. J o c om an do de q ue b ra d e l in ha, < /b r>, e a l gu ns ou t ros at uam som en te n o p o nto o nd e e les a pa rec e m. Ve ja o ex em p lo a ba ixo da u ti l i za o d a ta g <b r>
<p>Este <br> um par<br>grafo com quebra de linha</p>
A ta g <b r> uma e ti q u eta v az ia, e la no p oss ui tag f i na l.
7.5 Comentrios
A ta g de c om en t ri o u t il i za da par a i nse r i r co me ntr ios no c di go font e HTM L. To do ti po de c om en t ri o i g nor ado pe lo na ve ga do r, isto , e le no se r ex ib i do na t el a. Vo c po de ut i l iza r es ta t ag pa ra e xp l ic ar se u c d ig o f on te ou p a rt e de le , q u e po de r aj u d- lo q u an do voc est i ve r e d ita n do se us c di gos post e rio r me nt e.

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

1 ) Q ua nd o v oc esc r ev e r u m text o em HTML , est eja cie nt e d e q ue o t exto qu e v oc est v is ua l iz an do n o s er ex i bi do igu al m en te em tod os os na ve ga do res . A l g um as pess oas poss ue m c om p ut ad or es co m r eso l u es ma io res, out ros m e no res, tu d o isso in f l ui na qu est o da ex i bi o d a p g i na, o q ue p od e a con te ce r so os t extos e as jane las qu e po de m se r re d i me nsi ona dos. 2 ) As d if ere n as n os t ama n hos d as jan e las d os na ve ga do res fa ze m co m q ue o n me ro de c ar ac te res q u e c ab em n u ma l in ha va ri e mu it o. Po r esse mo ti vo no se r emos cap a zes de co nt ro la r n em o n me ro de l i nhas n e m os loc ai s e m que a con te ce m as mu dan as d e l in ha. Nu nca te nte for m ata r o te xto i nse rin d o es pa os ou l i n has va zi as, po r que os res u lta dos no se ro a qu eles q ue v oc es p era va.
- 16 -
3 ) O HTM L q u an do enc on tr a dois o u ma is es pa os se gui dos, e le tr ata -os com o se fosse um n i co es pa o. Q uan d o voc es c re ve um a s e q nc ia d e es pa os se g u id os, o r esu lt ado o mes mo d e es c rev e r um n ico es pa o. E m HTML, as t ec las Tab e E n te r e qu i va le m a u m es pa o. 4 ) Se m pr e q u e vo c q u is e r inse r i r li n has em b ra nc o, ut i li ze a ta g <br>. Ex is te m p essoas q ue u t i li za m p ar gr afos vaz i os p ara ob t er o mesm o r esu l tad o, m as isso es t er ra do. A ta g < p> de ve s er usa da ap ena s p a ra de f ini r p a r gra fos, e o e le men to <b r> n o de ve se r usa do, p o r ex em p lo, pa ra c ria r l i stas, poi s ex ist em ta gs co nc eb i da s es p ec i f ic am en te pa ra isso. Se m p re qu e v oc p re cisa r de o bte r u ma fo rm ata o es pe c ial , voc d ev e usa r o e le men to q u e fo i c r iad o p ara esse ef ei to. 5 ) E m m ui tas p g i nas, os par gr afos est o es c ri tos s em a e t i qu eta d e f e cha me nto (</p>) A p esa r dos na ve ga dor es ac e ita re m est a om iss o, ten ha se m p re ate n o p ara f e cha r tod os os e lem e ntos que re q ue rem u ma tag d e f e cha me nto. Se v oc t en ta r va lid a r uma p g i na q ue co nt en ha est es er ros, v e r q u e e la no passa r n o tes te de v al i da o. 6 ) Os e le me nt os < p> e <h 1> ... < h 6> o na ve gad o r a d ic io na a uto ma ti cam e nte um a l i nh a em br an co a ntes do i n c io e o ut ra dep o is do f im.
7.7 Lista de elementos bsicos do HTML

T AG
<html> <body> <h1> at <h6> <p> <br> <hr>  </script> </body> </html>
17.2 - Como lidar com os browsers antigos

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

A l m d e esc on de r mos o c di go d e nt ro de u m co me nt r io, u ma o ut ra fo rma de a ju da r os b r owse rs m u it o a nt ig os s e ria u t i li za r o el e me nto <n os c rip t> p a ra o fe re ce r c on te dos a lte r nat i vos. O e le me nto < no sc rip t> usad o pa ra c om p ens ar de al g uma fo r ma a fa lta de e xe cu o d e u m sc r ip t. O co nte do des te e l em en to s er a pr ese nt ad o p el os b r owse rs qu e n o r eco nh ec em sc r i pts, mas se r ig no ra do pe los b r owse rs m a is m o de rnos e no in te rf e re na ap res en ta o d a p g i na.
17.2.2 - Um exemplo
<html> <body> <script type="text/javascript"> <!-document.write("Ol mundo!")
- 42 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ------------------------------------------------------------------------------------------------------------> </script> <noscript> O seu browser no suporta JavaScript! </noscript> </body> </html>
17.3 - Elementos para inserir scripts e cdigo

E lem en to
<script> <noscript> <object> <param> <applet>
De sc ri o
Define um bloco que contm um script Define texto alternativo para ser apresentado sempre que o script no executado Insere um objeto na pgina Define parmetros para controlar o objeto 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 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 t or ne en fad o nho, passa re mos p a ra a Esp e ci f i ca o HTM, 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 em s ua m en te, se es te t ex to no s e dese n vo lv i da p e lo l ista dos a se g ui r.
Especificao HTML (em ingls) http://www.w3.org/TR/html4 Especificao HTML (em espanhol) http://html.conclase.net/w3c/html401-es/cover.html docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web Consrcio da web Texto estruturado: blocos que permitem estruturar lgica e visualmente seu texto http://www.w3.org/TR/html4/struct/text.html Listas: blocos para a criao de listagens http://www.w3.org/TR/html4/struct/lists.html Frames: permite que a pgina exibida no navegador seja formada por mais de um arquivo html (no recomendado, veja em Acessibilidade) http://www.w3.org/TR/html4/present/frames.html Formulrios: possibilita a interao do seu html com aplicaes web. http://www.w3.org/TR/html4/interact/forms.html Scripting: permite a automatizao de certas sees do seu documento. http://www.w3.org/TR/html4/interact/scripts.html Meta-informaes: fornecem dados a respeito do prprio documento, como data, conjunto de caracteres usado, data de validade, etc http://www.w3.org/TR/html4/struct/global.html#h-7.4.4
Essas f u nc io na l i dad es pe r mi t iro q ue vo c fa a d o cume ntos HTM L be m c om p le tos. P ross eg u ir e mos a gor a a pa rt e f i na l d esta a post i la, on d e s ero a bo r da dos a l gu ns te mas be m ba ca nas ;- )
19. COLOCANDO SEU SITE NO AR

A t a go ra so me nt e vo c co ns egu i u v is ua li za r suas pg i nas. Ch eg o u a hor a d e m ost r- las p a ra o m und o to do.
- 43 -
P ar a p ub l ica r se u tr ab a lho na In te r ne t, voc p r ec isa so me nte d e es pa o e m u m se r v id or e u m p rog r ama FTP g r at ui to. S e vo c cos tu ma acess ar a I nt e rn et j d e ve t er vi sto q u e ex ist em v ri os se r v ios gra tu ito s de hos p ed age m d e s i tes. S eu e nd e re o no se rv i do r se r a l gu ma c oisa pa re ci da com ht tp : // ho me.se r v ido r. com / ~nom e do usu ar io. Vo c t em q ue a ti va r o se r v io. I n fo r me-s e co mo fa ze r i sto na d o cu me nta o f o rn ec i da pe lo se r v io d e hos p eda ge m. O u tra o po o b te r u m es pa o g r at u ito de u m s er v ido r na In te r ne t. Isto i g ua l a re gi st ra r u ma c on ta d e e- ma il ( co mo p or ex em p lo, o bt er um e n de re o d e e -ma i l d o h ot ma il) v o c p od e re g is tra r-s e g ratu itam en te p a ra ob te r u m es pa o e m um s e rv ido r n a I n te rne t. E xis tem v r ias co m pan h ias q ue o fe re ce m est e s er v i o g r at u ito - e nt r e e las a A ng e lf i re (clique em "Sign Up" e
escolha membro gratuito - ou veja mais abaixo uma lista com srvios gratuitos de hospedagem) - isto u m pr ocess o b em r p id o.
Angelfire http://angelfire.lycos.com
P ar a ac essa r o s er v id o r v oc pr e cis a co nh e ce r o "N om e d o s eu se rv id o r" (por exemplo, ftp.angelfire.com) e t er um no me de usu r io e s enh a.
19.1 Isto tudo que eu preciso?!

P ar a a ce ssa r o se rv i do r e pu b l ica r as p g in as vo c pr e cis a d e u m p rog ram a F TP. Vo c n o de ve te r um p ro gr a ma d est es a i nda , mas exi ste m v rios d eles n a I nt er ne t p ar a do wnl oa d e so g r at ui tos. Ex is te m mu i tos pro g ra mas FT P. U m dos me l ho res o Fi le Zi l la, e g rat u it o . Vo c po de o bt er o Fi le Zi ll a em ht t p: // fi l ez i ll a.so u rce for g e. net
19.2 - Como eu fao envio os arquivos do meu site?!

A b aix o fo rn e ce mos um ex em p lo d e com o fa ze r isto usa n do o ser v i do r A n ge l f ir e e o p ro gra ma F il e Zil l a. Es te p r oc ed i men to ma is o u me nos i g ua l p a ra q u al q ue r pr o gr ama FTP . C o nec te- se In te rne t e a b ra o p rogr a ma FT P. I ns i ra "H os t Nam e"
("ftp.angelfire.com" no "Address") , n om e d o us u rio (em "User") e se nh a (em "Password") cl i qu e " Conn ec t". Vo c a go ra t em a cesso a o se r v ido r. E m
u m la do da jan el a do pr og ra ma voc v er os di r et r ios e a rq u i vos do se u c om p uta dor ("Local Site") , e n o o ut ro o d o se r v id or ("Remote Site"):
- 44 -
A c he os se us d oc ume nt os HTML e im ag en s a se rem p ub lic adas (no "Local site") e t ra ns fi ra pa ra o se r vi do r ("Remote site") si m p les me nte da nd o um c l i qu e d u p lo nos ar q uiv os. A go ra o mu n do tod o p od e r v e r se u s i te . D a u ma d as p g i nas o no me d e "ind ex .h tm" (ou "index.html") e e la ser a uto ma ti cam e nte a p gi na de e nt ra da n o si te, o u se ja, b ast a d i git ar h tt p :/ /ww w.a n ge l fi re. co m/ fo lk /h tm l ne t (sem qualquer nome de arquivo) e a b ri r htt p: // www .ang e l fi r e.co m/ fo l k/ ht ml ne t/ i nd ex. htm P ar a ma is a d ian te se r u ma b oa i d ia co mp ra r u m do mn i o (espao no servidor) s pa ra vo c (www.seu-nome.com) e ass i m t er um nom e do si te b e m m a is c u rto e f c i l de g u ar da r qu e a q ue les f o rn ec i dos p o r um ser v i o g rat ui to d a I nte r net . Vo c po de e nco nt ra r na I nt e rn et v rias f i rmas q u e ve nd em d o m n io. Fa a u ma bu sca do Goo g le.
LISTA DE SITES COM INFORMAES SOBRE HOSPEDAGEM GRATUITA Link 01 http://neosite.ilogic.com.br/artigos/hospedagemgratis.htm Link 02 http://criandosite.virgula.com.br/ Link 03 http://www.babooforum.com.br/idealbb/view.asp?topicID=425835
20. HTML AVANADO

Es ta pa rt e a ssu me q u e vo c j t re i nou HTM L o su f ic ie nt e pa ra est ar f a mi l ia ri zad o c om a l in g ua ge m e f az e r si tes n a i nt er net . Da q ui em d ia nt e, es te a rt i go a pe nas fa r um tour po r ou t ras li n gua ge ns e tec no lo g ias qu e po de m se r
- 45 -
u t i li za das p a ra o r gani z ar s eu s do cu me nt os, s epa ra r a a pa r nc ia d o con te d o, f ac i l ita r bus cas e c ri ar d oc u me ntos q ue, sob r et u do no ut i li z em f o rma tos qu e v e nha m a se r to r na r ob so le tos. Es tar e i d and o a qu i uma v iso ge ra l de t od as as te cno log i as us adas a tua l me nt e q u e po de m s er i nt e gra das ou tem a l gu ma re la o co m o HTM L e l i n gu ag ens d e m a rca o :

F ol has de Es ti lo ( C SS) Te m p late s A c essi b i li da de S ti os d i nm i cos o u au to mat i za dos We b sta n da r ds e va l id a o
20.1 - Folhas de Estilo (CSS)

F ol has de es t il o p er mi t em q ue vo c s ep ar e o co nte do do s eu do cu me nt o da s ua r ep r ese nt ao g r f ica. Co mo ex e mp lo, ao in vs de um a ex press o do tip o :
<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>
Vo c ut il i za a l go ma is o rg an i za do, com o:
<div class="estilosa">Estilo separado do texto</div>
E e nt o voc d e fi n ir ia u ma c lasse de nome e st il osa o n de os atr i b utos , com o t i po de f ont e, ta ma nho e cor s er i am de f in id os. Essa d e f in i o po de in c lus iv e es ta r a rmaz e na da n um a rq u ivo se pa ra do do s eu do cum ento, s end o qu e n est e l t imo n e cess r io a pe nas um a r ef er n c ia ao ar q u i vo q ue co nt en ha os es t il os. O me ca nism o ma is u ti l i za do para c r ia r fo l has de es ti lo pa ra u m a r qu i vo HTM L o Cascading Style Sheet , o u CS S. Em C SS , o est i lo es t il osa par a o exe mp l o a ci ma po der i a s e r de f in i do com o:
div.estilosa { color : red; font : fixed; font-size: 14; }
A s va nta g en s d e usa r f o lhas de est i lo so :
S e pa ra o e nt r e a i nfo r ma o qu e o se u te xto pr et en d e p assa r e s ua a p rese nt ao P e rm it e que to da a ap r ese nta o do se u te xto s ej a mu da da s em q u e se ja p r ec iso a lte ra r o h t m l, b ast an do a pe nas q ue o ar q u iv o q ue c on te nha a f ol ha de est i lo se ja al t era do Ma is o rg ani z ao pa ra se us d oc um e ntos F ac i l ita a cr i ao de Te m p lat es
P e la c la re za e o rg an iza o re s u ltante d o uso d e f olha s d e es tilo , m u ita s tag s e a tribu tos do HT ML so c on s id e rad as obs o le tas ou se u u so d epre c ia d o, in c lu s ive m u ita s d as q ua is en s in ad as n es te tu to ria l. S em p re qu e p oss ve l , u tiliz e CSS n os se us d o cum e ntos .
- 46 -
P ar a ma is in fo r ma es so b re Fo lhas de Est i lo em HTML, co nsu lt e os l in ks q ue a nex ei a ba ixo :

Materiais de CSS http://www.codigofonte.com/css http://www.w3.org/TR/html4/present/styles.html Especificao HTML Cascading Style Sheets, level 1 http://www.w3.org/TR/1999/REC-CSS1-19990111
20.2 Templates
Q u em us a HTM L p ro va ve l me nte n o o fa z pa ra es cr eve r u m ni co d oc um ent o e s im u m g ran d e n me ro de le s. S e v oc es t r e d ig i n do um te xto o u f a ze nd o um s it e co m post o po r mui tos a r qu i vos, p rov ave l me nt e voc dese ja q u e to dos se us d o cu me ntos HTM L te nh am a mesm a ap ar nc ia o u o mes mo es t ilo. P ar a un i for m i za r o es t il o e a a p res en ta o, vo c p o d e c r iar u m m ode lo, t am b m con h ec i do com o T em p la te, qu e co nt en ha o es q ue let o d e q ua l que r p gi na de u m s ite o u tex to q u e se ja d i v i di do em v rios a r qu i vos. Ess e t em p la te po de con te r m e nus, tabe las e to dos os ca m pos qu e vo c f or ut i li za r. Ex is te m ain d a os mo tor es de t em p lat e, q u e s o so ft wa res q u e j un tam o c on te do c om os tem p la tes e p r o du ze m p g in as HTM L. C r ia r um t emp l ate d e pe n de do gosto de cad a um , po r m se voc pr e te nd e uti l i za r u m s t io a uto ma ti zad o ex ist em v r ios m oto re s de t em p la te q ue voc p od e ut i li z ar, c om o po r ex em p lo:
F r eeMa r ke r: u m tem p la te e ng i n e. El e fa ci l it a a gera o de t ext ua l (HTML, PostScript, TeX, source code, etc) e aj u da a s ep ara r ed i o d e d es i gn da l g ica . I nt eg r ad o co m se r v lets , XM L, P yt ho n e mais . S ma rt y : u ma c lass e d e te m p lat es. Fu n cion a de u ma f o rma q ue se pa re i n te r fac e d a l g ic a d e pro g ram a o e te m p or ob j et ivo, fac i l ita r e m e lh ora r o d ese n vo lv im e nto de qu al q ue r a pli ca o e m P HP.
20.3 Acessibilidade
U ma c ons id e ra o imp o rta nt e ao esc re ve r s eus do cum e ntos HTM L o q uo u sv e l e ac ess v e l e le , ta nto e m te r mos v isu ais qu an to na or g an i za o d o c on te do. L e mb r e-se q u e to dos os t i pos de pesso as po de m ac essa r se u s it e, d es de as le i gas at as es pe c ial ist as no assu n to q ue vo c t rat a, d es de a qu el as q u e j co nh e ce m o s it e at as q u e n un ca ou v i ram fa la r d el e. S e u con te d o t am b m pre c isa es ta r o r gan i za do pa ra qu e ao lo ng o do te mpo as c ois as no se p e rc am. P ar a t e r u m b om n ve l d e u sa bi l i da de e m se u s it e, si ga a s s eg u in tes r e com en da es :

Use esq uem as si m p les A na ve ga o do se u s t io de ve ser i nt u it iv a C r i e s e es d o t ip o "So b re es te s t io ", " Qu em s omos ", e tc Use n d i ces na me d i da d o poss vel Es c re va r esu mos Use re fe rn c ias Use um a lg i ca pa ra os n om es d e a rq u iv os e p astas E v ite usa r f r am es, e las b lo qu e ia m o mo do nat u ra l d e s e nav eg a r pe la web
- 47 -
Es co lha mai s d e u m est i lo pa ra se u s t io e e v ite usa r c om b ina es d e c or es q ue d i f i cu lt em a vis ua l iza o D is po n i bi l i ze , na me di d a do poss ve l, s eu co nt e do e m ma is d e u m f o rma to : tex to si m pl es, doc u me nto HTM L, etc D is po n i bi l i ze s eu c on te do e m co p yl ef t ou e m o ut ras li c en as Va l i de s eu HT ML : ve r i fi q ue s e s eu c d ig o HT ML es t v l ido ou se e xis te m i nco r re es
A ac ess ib i li d ad e de um s ite ta mb m le va e m co nsi de ra o os p o rta do res d e n e cess i da des esp ec ia is. O W3 C poss ui l i nha s g e ra is de r e co me nda o q uant o a cess i bi l i da de d o c on te do de do cu me nt os q ue u sa m l i ng ua ge m de ma rc a o.
20.4 Sites dinmicos ou automatizados

S e u t exto o u si te p o de se r c om pos to s im p les men te p or m e ia d z ia d e d o cu me ntos HT ML e t e r po uca ou ne n hu ma at ua liz a o ao l o ngo d a s ua e xis t nc ia. C aso na da d i sso se ja v e r dad e e v oc es t f a ze nd o alg o gr an de o u e nt o voc n o te m te m po pa ra es c re ve r seu c d i go HTM L n a m o, ta lv e z se ja o mo me nto d e co nsi de ra r a a do o de um s ist ema aut oma t iza do. Des tac o tr s t i pos de les:

Ge re n cia dor es de c on te do Bl o gs W ik is
Ge ren c ia do re s d e co n te d o so so ftw ares q u e ro da m em se rv i do re s e q u e a d mi n ist ram i n fo rma es d is po n v e is e m s ites . Mu it os s it es na web so a p enas a r qu i vos ht m l, mas t am b m ex ist em s ites a uto mat i za dos q ue p e rm it em a r maz en ar o co nte do d as p g inas nu m ban co d e d ados e a pa rti r d esse ban co c r ia r mu it as p g inas h t ml e a i nd a man te r o s is te ma d e b usca e a p u bl i cao se m q ue pa ra iss o o u su r io p re c ise sa be r h tm l ou qu al q ue r out ra li n gu age m d e ma r cao. A l gu ns ge r en c iad o res d e c on te do p e r mite m q u e e xis tam u su r ios ca pa zes d e a d ic io na r co me nt r ios e m p u b li ca es ex iste nt es o u at m es mo c r iar suas p r pr i as p g in as at ra vs do pr ee nch im e nto de fo r mu l ri os. O s B lo gs so cas os es p ec ia is de g e re nc iad o res d e co nt e do qu e f un c iona m c om o d ir ios o u co lun a de e d ito r ia l, o n de o do no do blo g a dic io na t exto , i m ag ens e c di go HTM L no s it e a pe nas pr ee n ch en do u m fo rm u lr i o. J os W ik is so fe rr am e ntas que pe rm i te m q ua l qu er p esso a cr iar o u e di ta r u m t ext o u ti l i za n do u ma l i n gu ag em d e ma rca o es pe cia l e ma is s im p l es d e se r u t i li za da do q ue o HTM L. D uas c a ra cte r st i cas p r in ci p ais d os s ist emas W ik i so : v oc p o de cr ia r f ac i l me nte u ma no va p gi na s imp l es me nte es co l hen do u m n om e es pe c ia l pa ra e la e es cr ev e r na p gi na j e xis te nt e. A o ut ra c ar ac te rs t ic a dos wi ki s a p r ese r va o d as m od i f ica es : o w ik i poss u i um h is t ri co de tod as as m o di f ic aes fe it as nu m doc u men to. O s ge r en cia do res de c on te do, b l og s e wik is so es cr i tos na l g um a l in g ua ge m d e p ro g ram a o como PH P, Pe rl , Py th on, Ja va, Ru b y e m u it as v e zes u ti l iza m u m ba nco d e da dos p a ra ar maz e na r o con te do. Com u m po uc o d e est ud o, v oc p od e es c re ve r se u pr p r io s ist ema o u e nt o ut i l iz a r u ma sol u o p ron ta, c om o po r ex em p lo:
- 48 -
Ge ren c ia do re s de c on te do : Dr u pa l, S P IP, e tc W ik is : P mW ik i, Ph pWi k i, M ed iaW ik i, TW ik i, e tc B lo gs : b 2, Wo rd P ress, e tc
20.5 - Web standards e validao

Nes ta l i o v oc a p ren d er ma is a lg u ns con c ei tos te r i cos do HTM L.
20.5.1 - O que mais h para conhecer sobre HTML?!

HTM L po d e se r esc r ito de v r ias ma ne i ras. O n av eg ado r est ap to a le r HTM L es c ri to de v rias ma ne i ras. P od em os d i ze r q u e HTML t em mu i tos d ia l etos. Est a a raz o p o rq ue a l gu ns w ebs i tes so a p res en ta dos de for mas d i ve rsas e m d i f er en tes n av e ga dores . D es de o ap a re ci me nto da I nt ern et t e m s id o f ei tas v r ias te ntat i vas p ara s e n or ma ti za r o HTM L n ota da me nt e at ra vs d o World Wide Web Consortium (W 3 C) fu nd a do po r T im Be r ne rs- Le e (yep! o grande sujeito que inventou o HTML) . Mas, es te t em s ido um rd u o e lo n go c am i nho. No passa do - quando voc tinha que comprar um navegador o Netsc ap e d o mi na va o m er ca do d e n av e ga do res. qu e la poca a s no rmas pa ra o HTM L es ta vam nas su as ve rs es 2. 0 e 3. 2. Mas pe lo fat o de do mi na r 9 0 % d o m e rca do a Nets ca pe n o te r ia - e n o te ve - qu e s e p r eoc u pa r m u ito c om n or mas. Pe lo co nt rr i o, a Ne ts ca pe in ven ta va se us pr p r ios e l em en tos d e m a rca o qu e n o f unc io na va m em ou tros na ve ga do res. P or mu it os an os a M ic roso ft i g no rou co m p let am e nte a I n te rn et. Em d e te rm i na do m om en to, reso l veu co mp et ir co m a Ne tsca p e e la no u se u n av e ga dor p r p r io. A p r i me i ra ver so do n av e ga do r da M i c roso ft 's, o I nte r ne t Ex p lo re r, no era me lh or do q ue o Ne tsca pe no su po rt e s no r mas do HTML . Mas, a Mi cr oso ft res ol v eu d ist r i bu i r s eu na ve ga do r g rat u ita me nt e ( is to se m pre a g ra da a to dos ) e o In te r ne t E xp l or e r em p o uco t empo to r nou -se o na ve ga do r m a is usa do e mais pop u la r. A pa rt i r das v e rses 4 e 5 a Mi c roso ft an un c ia va q ue se us na ve ga dor es o fe re c iam c ad a v e z ma io r s upo r te s n or mas HTM L do W 3C. A Nets ca pe no se m ov i me ntou pa ra a tua l iz ar s eu n av e ga dor e co nt in uou a co lo ca r n o m er ca do a v e lh a e d esa tua l i zad a v e rso 4. O q ue v em a s eg u i r h is t ri a. Nos d ias at ua is as nor m as HTML es to na s ua v e rso 4. 01 e n o XHTM L. H oj e e m d ia o I n t er ne t Exp lo re r q ue d et m q u ase 9 0 % d o m er ca do. O In te r ne t Exp l or e r ai n da te m se us e le m en tos p r p r ios, m as o fe re ce sup o rte pa ra as no r mas HTM L do W3 C . Os na vega do res Mo z il la, Ope ra e Ne tsc ap e ta m b m su p or tam as n or mas. E nto , quan d o v oc c o di f ica HTM L de a co r do com as no rm as d o W 3 C, v oc es t c ons tru i n do u m w e bsi te par a se r vis ua l iz ado em to dos os n av e ga dores n o s a gor a m as tam b m no fu t uro . E f el i z me nt e, tud o o q ue v oc a pr end e u n est e t utor i al est de a co r do co m a ma is n ova ve rso do HTM L, q ue o X HTML.
- 49 -
20.5.1.1 - Legal!! Posso anunciar?!

D e v ido e xis t nc ia d e di f er en tes ti pos de HTM L, vo c pr ec isa in fo rm ar ao n av e ga dor q u al o "d i al eto " do H TML e no se u caso v o c a pr en d eu XHTM L. P ar a i n fo rm a r ao na ve ga do r, v o c usa o Document Type Definition . O Document Type Definition d e ve se r es c ri to se m p re no to po do do cu m en to: Ex em p lo 1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> <head> <title>Ttulo</title> </head> <body> <p>texto texto</p> </body> </html>
A l m d o Do cu m en t T y p e Def in ition, q ue i n fo rma ao na ve gad o r qu e vo c es t co di f ic an do XHTM L, voc pr e cis a a in da a d i ci onar i n fo r ma o ext ra na t ag h t ml , usa nd o os at r ibu tos x m lns e lan g. x m lns a b re vi ao d e "XM L- Na me -S pac e " e dev e te r sem p r e o va lo r h tt p :/ /ww w.w 3.o r g/ 1 99 9 /xh tm l. Ist o t u do o q ue voc p r ec isa s ab e r. Se voc t em o h bit o o u gosta de se a p ro fu n da r e c on he ce r co isas c om pl i ca das po de r l e r ma is sob r e na m esp a ce s no si t e do W 3C.
namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names-19990114
No a tr i b uto lan g vo c es pe c f ica em q ue l n g ua (aqui trata-se de linguagem humana) o do c um en to es cr it o. As a br e via tu ras p ara as l ng uas ex ist en tes no m u n do to do, es to nas ISO 639 standard . No exe m p lo ac i ma a l n g ua d ef i ni d a n o at r ib uto o por tu gu s do Bras i l ("pt-br") . U ma DT D in fo r ma r ao n av eg ado r co mo de ve s er l ido e re nd e riz a do o HTM L. Use o exem p lo m ostr a do, co mo u m te mp l ate p a ra t o dos os s eus f u tur os d o cu me ntos HTM L. O DT D im p or tan te a in da , pa ra a va l i da o da p g i na.
20.5.1.2 - Validao?! Porqu deveria eu fazer isto?!

I ns i ra o DTD nas s uas p g i nas e p o de r v e rif i ca r e rr os n o se u HTM L, usa n do o v a li da do r gr at u ito do W 3C. ( ht tp : // va li da to r.w 3.o r g ) P ar a tes tar o va l i dad o r fa a o se g u in te: c ri e u ma p gi na e p ub l i qu e n a I n te r net. A se g ui r e ntr e e m h tt p: // va l id ato r.w 3.o r g e l di g it e o e n de re o (a URL) da su a p g i na, d e po is c liq u e no bot o va l i dar. S e seu HTM L est iv e r c or r eto, va i a pa re cer u ma me nsa ge m d e con g rat u la es. S e no, se r a p rese nt ada u ma l ista d e e r ros, in fo r ma nd o o q u est e r ra do e on d e. Co me ta a l gu ns e r ros pro pos i tai s no se u c d ig o pa ra v e r if i car o q u e aco nt ec e. O va l id ador no ti l so me nt e no e n cont ro de e r ros. Al g uns na ve ga dor es t en ta m i nte r p ret ar os e r ros c om et i dos pel os dese n vo l ve do res e co nse rtar o
- 50 -
c di go m ost ra n do a e n con tr ar e r ros n o e r ro e ap rese nt am a e nt o a j uda v oc a e xis t iam
p gi na co rr e tam en te. Em n av ega do res assi m voc nun ca 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 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 n con tr ar e r ros q ue v oc no te nha ne m i d ia d e qu e
S e mp re val i d e suas p gi nas, pa ra t e r cer t eza q ue e las s er o most ra das c or r eta me nt e e m to dos os na v ega do res.
21 - GUIA DE REFERNCIA RPIDA

C o mo res um o de to do o c d i go HT ML ap res en ta do at ago ra, d e ixo al g um as t ab el as de r e fe r n ci a r p id a que p od em se r a t i m pressas e gu ar da das no b o lso. Ca rac te rstic as g e rais d e u m d o cu me nto H TML C DI GO
html head title body
F UN O
bloco bloco bloco bloco interno considerado documento html que define a cabea do documento que define o ttulo do documento interno considerado o corpo do html
E XI GE FECH AMEN TO
sim sim sim sim
Ap a r nc ia d o do cu me n to C DI GO
b i u font pre
F UN O
bloco em negrito bloco em itlico bloco sublinhado muda as caractersticas da fonte mantm o texto pr-formatado
sim sim sim sim sim
Qu eb ra d e linh a, p ar g ra fo s e d iv is es C DI GO
br center p div
F UN O
quebra de linha texto centralizado pargrafos cria uma diviso
no sim recomendado sim
Atribu to s d ive rso s C DI GO

p, div font font font
AT RIB UTO
align face size color
F UN O
alinhamento fonte tamanho cor
V ALO RES POS SVEIS

letf, right, justify, center nome da fonte -7 a +7 ver no tpico de cores
E sp a am en to e en tid a de s C DI GO

F UN O
espao simples
no uma tag
O d ocu m en to H T ML b s ic o
<html> <head> <title>Aqui colocamos o ttulo</title> </head> <body> Aqui colocamos os contedos visveis </body>
- 51 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<html>
E lem en tos d e c abe a lh o (para captulos ou seces)

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

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

<frameset cols="25%,75%"> <frame src="pagina1.html"> <frame src="pagina2.html"> <frameset>
F o rmu l rio s
<form action="http://www.tiagosouza.com/processar.php" method="post/get"> <input type="text" name="lastname" value="Nabo" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Rabanetes <option selected>Alhos <option>Cebolas </select> <textarea name="Comentario" rows="60" cols="20"></textarea> </form>
E ntida d es
< representa o mesmo que < > representa o mesmo que > © representa o mesmo que
Ou tros E le m en tos
 <blockquote> Texto citado a partir de uma fonte externa. </blockquote> <address> Endereo (1 linha)<br> Endereo (2 linha)<br> Cidade<br> </address>
22 REFERNCIAS COMPLETAS DE HTML 4.01

To dos os e le me nt os ord e na dos a lf a bet i ca men te :
ELEMENTO  <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> DESCRIO Permite inserir um comentrio Indica o tipo de documento usado na pgina Insere uma ncora (marca que identifica o local do documento em que se
encontra)
Insere uma abreviao Insere um acrnimo Insere um endereo (postal) Insere um applet (miniaplicao em Java) Desuso (utilize <object>) Define uma rea sobre uma imagem Insere texto carregado (negrito ou "bold") Define o URL base de onde partem todas as ligaes relativas da pgina Define o tipo de letra base para a pgina. Desuso (usar CSS) Define a direo em que o texto apresentado Texto com letra maior Define uma citao extensa Elemento que contm o corpo (contedo visvel) da pgina
- 53 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <dfn> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> a <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> Provoca uma mudana de linha forada Insere um boto num formulrio Define a legenda de uma tabela Texto alinhado ao centro. Desuso. Insere uma citao Define o texto que cdigo de computador Define os atributos para as colunas de uma tabela Agrupa colunas numa tabela Insere texto que descreve uma definio Define texto que foi apagado ("deleted") Mostra uma lista de diretrio. Desuso. Insere a definio de um termo Insere uma diviso (ou seo) dentro da pgina Insere uma lista de definies ("definition list") Insere a definio de um termo Insere texto enfatizado (escreve-se em itlico) Elemento que contm um grupo de campos de um formulrio Define o tipo de letra, o tamanho e a cor a aplicar ao texto. Desuso.
(usar CSS)
Insere um formulrio Define uma subjanela (moldura) dentro da janela principal do browser. A subjanela contm a sua prpria pgina da Web Insere um conjunto de subjanelas ("frames") Define cabealhos ("headers") desde o nvel 1 (mais importante) at ao nvel 6 (menos importante) Contm informao importante a respeito do documento que no deve ser apresentada no corpo da pgina Desenha uma linha horizontal Elemento dentro do qual so colocados todos os restantes elementos da pgina Insere texto para ser escrito com caracteres itlicos Insere no interior da pgina da Web uma subjanela ("frame") contendo a sua prpria pgina da Web Insere uma imagem Define uma caixa para insero de texto num formulrio Define texto que foi inserido em substituio de outro mais antigo Define texto inserido atravs do teclado Define uma marca que ser associada a um controlo. Ao clicar nessa marca, o controle que estiver associado dever ser acionado. Define um ttulo num elemento <fieldset> Define um item de uma lista Faz referncia a um recurso externo e estabelece a ligao com ele Define um mapeamento sobre uma imagem Define uma lista de menu. Desuso. D informao sobre aquilo que o documento contm Define um bloco noframes, o qual s ser apresentado se o browser no suportar os elementos <frameset> e <frame> Define um bloco noscript, o qual s ser apresentado se o browser no suportar o elemento <script> Insere um objeto dentro da pgina (como um filme em Flash, por
exemplo)
Define Define Define Insere Define Define Define Define uma lista ordenada um grupo de opes uma opo numa lista de um formulrio um pargrafo um parmetro para o elemento <object> texto pr-formatado uma citao curta texto que se escreve com um trao horizontal sobreposto ("strikethrough") Desuso. (usar CSS)
- 54 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> uma amostra ("sample") de cdigo de computador um script uma lista com itens selecionveis texto menor ("small") uma diviso (ou seco) dentro da pgina texto que se escreve com um trao horizontal sobreposto ("strikethrough") Desuso (usar CSS). Define texto mais forte (ser escrito em negrito) Define estilos CSS a aplicar na pgina Define texto que fica alinhado um pouco mais abaixo ("subscript") Define texto que fica alinhado um pouco mais acima ("superscript") Define uma tabela Define um corpo ("body") numa tabela Define uma diviso, ou clula, numa tabela Define uma rea para insero de texto num formulrio Define o rodap de uma tabela Define o cabealho de uma coluna numa tabela Define o cabealho de uma clula numa tabela Define o ttulo da pgina Define uma linha de clulas numa tabela Define texto que imita o de uma mquina de escrever antiga ("teletype Define Insere Define Define Insere Define
text")
Define texto sublinhado ("underlined") Desuso (usar CSS) Define uma lista no ordenada ("unordered list") Define uma varivel
23. ATRIBUTOS ESPECIAIS DE HTML 4

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

No pod em se r usa dos co m os el e me ntos ba se, h e ad, h tm l, me ta, p a ram, s c rip t, s tyle, e title. AT RIB UTO
class id style title
V ALO R
class_rule ou style_rule id_name style_definition tooltip_text
DES CRI O
A classe (CSS) a que pertence o elemento Um nome nico (no deve ser repetido no mesmo documento) para o elemento Definio de um estilo dentro do prprio corpo do documento ("inline style definition") Texto a apresentar como dica
23.3 - Atributos lingsticos

No po de se r us ado co m os e l em en tos bas e, b r, f ra m e, f ram es e t, h r, if ram e , para m e s c rip t.
- 55 -
AT RIB UTO
dir lang
V ALO R
ltr | rtl
DES CRI O
Define a direo do texto Define o cdigo da lngua usada na escrita dos textos
language_code
23.4 - Atributos de teclado

AT RIB UTO
accesskey
V ALO R
carcter (corresponde a uma tecla) nmero
DES CRI O
Define um atalho do teclado (seqncia de teclas) que permite aceder mais rapidamente a um elemento da pgina Define o nmero de ordem ("tab order") do elemento no acesso atravs da tecla tab
tabindex
23.5 - Eventos de janela

A p ar ti r da ve rso 4 d a li n guag e m HTM L p r at ica m en te to dos os el em en tos p o de m d ese n cad ea r ev e ntos qu e t m com o r es post a a e xe cu o d e a es p o r p a rte d o na ve ga do r, c om o po r ex em p lo, exe c uta r c dig os J ava S cr i p t qu an do o v is i tan te c li ca r n u m de te r mi na do e le me nto . A lis ta a pr es en tad a m a is a ba ixo m ost ra os a tr i bu tos qu e p od em os i nse r i r nos e le me ntos do HTML pa ra d e fin i r a es de res pos ta a e ve nt os. S po d em se r usad os c om os e l em e ntos <bo d y> e <fra m es e t> AT RIB UTO
onload onunload
V ALO R
script script
DES CRI O
Script a executar quando o documento acabar de ser carregado Script a executar quando o documento for abandonado
23.6 - Eventos para formulrios

S po d em se r usad os c om e l em en tos asso c ia dos a u m fo rm u lr io :
ATRIBUTO onchange onsubmit onreset onselect onblur onfocus VALOR DESCRIO Script a executar quando o uma alterao Script a executar quando o Script a executar quando o reposto nos valores iniciais Script a executar quando o Script a executar quando o Script a executar quando o
script script script script script script
valor contido no elemento sofrer formulrio for submetido contedo do formulrio for elemento for selecionado elemento perder o foco elemento ganhar o foco
23.7 - Eventos de teclado

No p od em s e r usa dos co m os e le me nt o base , b do, b r, f ra me, f ra mes et, h ea d, h t ml , i fr ame , me ta, pa ra m, sc r ipt , s ty l e, e ti t le.
ATRIBUTO onkeydown onkeypress onkeyup VALOR DESCRIO Script a executar quando uma tecla pressionada Script a executar quando uma tecla pressionada e seguidamente libertada Script a executar quando uma tecla libertada
script script script
- 56 -
23.8 - Eventos do mouse

No po dem s er usad os co m os e le me ntos base, b do, br, f ram e, fra mese t, h ea d, h tm l, i f ra me, me ta, par am, sc r i pt, sty l e e t it le .
ATRIBUTO onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup VALOR DESCRIO Script a executar quando Script a executar quando Script a executar quando Script a executar quando Script a executar quando sobre um elemento Script a executar quando um elemento Script a executar quando
script script script script script script script
o o o
detectado um clique no rato detectado um clique duplo no rato boto do rato pressionado ponteiro do rato muda de posio ponteiro do rato deixa de estar
o ponteiro do rato passa a estar sobre o boto do rato libertado
24. O PRESENTE E O FUTURO DO MARKUP

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

O HTML e d e ma is l in g ua ge ns d e ma rca o so a tu al m ente re g u lam en ta dos p e lo Wo rl d Wi d e W eb C onso r ti um , o Co nsr c io da W eb ou s im p les me nt e W3C , u ma i n ic ia ti v a cr ia da p a ra pa d ron i za r m ui tas d as t ecn o log ias d e i n fo rm ao s ur g i das com o a d ve nto da I nt e rne t. O s u cesso d o HTM L l e vou a d i v ers os pes q u isa dores a ex plo ra r ma is as p oss i bi l i dad es das l i ng u ag ens de m ar ca o q u e:

A co mo de m b e m o t ip o d e i n fo rma o qu e pr e te nd em ar maz ena r S e pa re m o c on te do da vis ua l iza o P ossa m s er i n te rp r etad os por d ive rsos p ro gra mas
A ab or da ge m qu e as pes qu isas n a r ea es co lh er am fo i a bu sca po r u ma g e ne ra l iza o to ta l das l i ng ua gen s e du as m et al i ng uag e ns (linguagens usadas para definir linguagens) fo ra m de f in i das : o S GML e o XML.
24.2 - SGML e HTML

O S GML (ou Standard Generalized Markup Language, Linguagem de Marcao Genrica Padro) fo i a pr i me i ra g e ne ra l iza o de li n gua ge m d e ma rc ao a se r l a rg am en te a do ta da. C o mo meta l in g ua ge m, o S GML u t il i za do pa ra d efi n i r n ov as l i ngu a ge ns d e m ar ca o e a tu al me nt e o HTM L de f ini d o at ra vs de S GML.
- 57 -
24.3 XML
O XML tam b m um a l in g ua ge m d ef i n ida so br e S GM L, mas que se rv e pa ra d e f in i r l in gu a ge ns de m a rca o co m p ro ps it os esp ec fi co s e co m u ma si nt ax e b e m es tr i ta. O XML m a is si m p les d e se r in te r p ret ado v ia so ftwa re e p or isso t em ga n ho b ast an te vi s ib i l id ad e. Ex em p los d e l in g uage ns de ma rc a o c r ia das e m XM L so :

M a th ML: u sa da pa ra n ota o ma te mt ic a. R DF: usa do pr i nc i pa lm e nte pa ra a rma z ena r n ot c ias. V o ic e XML: p r oj eta da p a ra esq u em at iz ar c on ve rsas e nt re 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 .
um
se r
24.4 - RDF e Syndication

E m esp ec ia l, o R DF (Resource Description Framework) um a l in g uag e m u t i li za da pa ra c ri ar um a o ut ra so pa d e let r in has con h ec i da com o RSS (RDF Site Summary, ou Contedo de Stios em RDF) , qu e u m c on t in e r p a ra a r maz en ar i n fo r ma es de s ites n a i nt er ne t. P or exe m pl o, se vo c q ui sesse d i v u lga r n ot c ias veic u la das do s it e iM ast e rs d e nt ro de se u p r pr i o we bs ite , vo c TE RI A q ue f az er u m p ro g ra ma b e m c om p l ica do p a ra ex tr a ir essa i n fo r ma o d o HTM L, mas o s it e iM aste rs t am b m o fe r ece s eu c on te do em R SS, que na da mai s do que u m ar q u iv o es c ri to num d ia le to X ML qu e co nt m os t t u los, as data s e os/ as au tor es das n ot c ias n um a es tr ut ur a be m r g id a, qu e pod e s er facil m en te in te r p ret ada p o r o ut ros s i tes e p ro gram as. E nt o, se al g u m q u ise r di v u l ga r a l gu m ti po d e c on te do pu b l ic ad o no s i te iMast e rs de nt ro d e se u s ite , basta uti l i za r o RSS d o i Mast ers.
* iMasters um site voltado a desenvolvedores web, muito bem conceituado. www.imasters.com.br
O R SS r esol v eu o p ro bl e ma d e jun ta r i nf or ma es de d if e re nt es s ites , ca da um d e les esc r it o em u m d e te rm i na do so ft wa re o u usa n do de te rm i na do t em p late HTM L. A lm d isso, o RS S pe r mi t e q ue a in fo r ma o d o s it e se ja o bt i da p or q u al q ue r s ist em a d e tr ata me nt o d e in fo r ma es (ou tro s it e, u m p r og ra ma q u e f a z a le i tu ra de n ot c ias, um a par e lh o m vel , et c) . O RS S su f i ci en te me nt e co m p le to pa ra pe r mi t ir ta mb m qu e in fo r ma es d e c on te dos m u lt i m d ia se ja m dis t ri b u das. Exe m p los disso s o os p o dcas ts e o v o dcas t. O p o d ca st o RS S qu e co nt m i n f or ma es d e ar q ui v os de ud io d i sp on ve is e m u m s it e (por exemplo, udios de notcias, msicas ou programas de rdio) . Um toc ad or d e u d io po de se r c ons ta nte me nt e a l im en ta do co m u m po d cast e co m as i nf or m a es con ti das ne l e b ai xar t odos os u d ios a uto ma ti cam e nte , sem i nt e rv en o do usu rio. Co m u m v od cas t s im i la r e co ns iste num R S S pa ra a r qu i vos d e v d eo.
25. DICAS FINAIS

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

Vo c a p re nd e u u m boc ad o d e coi sas e j est e m co ndi es d e c ons tr u i r se u w e bsi te. No en ta nto o q ue vo c a p re n de u o bs i co e a in da h m u i ta co isa a
- 58 -
se r ap er f ei oa da. Pod e mos d i ze r q ue voc co nst rui u u ma base s li da p a ra c on ti n ua r e se a p rof u nd a r no assu n to. Nes ta lt i ma li o, de ixo a l gu mas d i cas fi na is :
P ar a com e ar , a co nse l ha mos a es cr ev er se us d oc um e ntos HTM L de f o rma o r de na da e est r ut u rad a. Ass i m faz e nd o vo c e sta r n o s m ost ra nd o aos ou tr os qu e poss ui u ma bas e s li da d e co nh ec i me nt o, m as ta m bm es tar fa ci l it an do a le i tu ra, in te r p ret ao e man ut en o d o c d i go. S i ga as nor m as e va lid e s eu c di g o. Mas, n o fa a di sto u ma fo nt e d e st r ess. Es cr e va u m XHTM L c lar o, us e o DTD e v al i de s uas p g in as no h tt p :/ /va l i da tor .w 3c.o rg C o lo qu e con te dos nas s uas p gi na s. L em br e-s e qu e HTM L ape nas a f e r ram en ta q u e poss ib i l it a a pr ese nt ar i nf or m ao na I n te r net, ass i m n e cess r io q u e ha ja a in fo r ma o a ser a pr ese nta da o u se ja, o c on te do. P g i nas l ind as e be m d es en ha das s o ti mas, mas as p esso as b us ca m i n fo r ma o na In te rn et. E v ite en ch e r suas p gi nas c om im a ge ns pes ad as e o utros " ba la n ga nda ns" qu e v oc en con t ra na In te r ne t. Ist o fa z com s uas p gi nas dem o re m a ca r re ga r e f r ust ra nte p ara o usu r io. P gin as q ue d e mo ram m a is de 20 s e gu n dos par a ca rr e ga r po d em p erde r a t 5 0% d os se us v is ita nt es. L e mb r e-se d e ca das tr a r se u s ite nos si tes de b us ca, d e m od o a q ue o ut ras pessoas , al m d a s ua f am l ia, possa m e nco ntr- las e v is it -la s. Na p g ina d e en tr ad a d os s i tes p a ra cad ast ro em m ecan is mos de b us ca v oc en co nt ra r u m l in k pa ra a di c io na r s eu si te (o mais importante o
Google mas, existem AlltheWeb e Lycos).
outros
tais
como,
DMOZ,
Yahoo,
AltaVista,
Nes ta a post i la vo c a p re nd eu a usa r o Bl oc o d e Not as, qu e u m s im p les e f ci l e d ito r d e t exto s, c on tu do t alv e z vo c ag o ra p ossa p e nsar e m us ar u m e d ito r m ais sof i st ica do c om ma is p oss ib il ida des e f e r ram en tas. Vo c en co nt ra um a lis ta gem e s um r i o de di fe r en tes e d ito r es em Su p er dow n loa ds. com . br o u p el o p r p r io Goo g le.
Como eu aprendo mais?!

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

Q u e t ip o d e con te d o v oc po de a p res en ta r na We b ? ! P rat i ca me nt e o q u e q u is er. E is a q ui a l gu ns t i pos d e c on te do m a is co mun s na We b, n o mo me nt o:

I nfo rma e s pe ss oa is: in fo rma es so b re vo c, por ex em p lo. H obbies ou in te re sse s e sp ec ia is: fi l mes, moto c ic let as, et c. P ublica e s: com o jo rn ais , re v ist as.
- 59 -
P e rf is de e m p re sa: o qu e u ma e m p resa faz ou ve nd e, e tc Do cu m en ta o On -lin e: d esd e ma n uai s, g ui as d e t r ei na me nto, d i c io nr ios, e tc. Ca t lo go s d e co mp ra s: c om er ci a li za o de a rt i gos. L oja s on lin e . P es qu isas d e op in i o: a in ter at i vi da d e c om o usu r io a tr av s de f o rm u lr ios, c ai xas d e su g est es, e tc. E du ca o on line : n u me rosas un i ve rsi d ad es, esc ol as e em p r esas p a rt ic u la res o fe re ce m o e nsi no a d is tn c ia a tra v s da We b.
O n ico l im i te da We b a sua p r p r ia von ta de. Po r i sso, s e a s ua id i a n o es t iv er nest a l ist a ou p a re ce r m ei o m al uc a o u a in da no est iv e r a ma du re c i da, p a re e nav e gu e u m p o uco pe la I nt e rn et. Co m c er te za e nc on tr a ex ce le nt es i d ias e pod e r a ma du r ec er as su as e te r m u it as o ut ras.
Estabelea seus objetivos

Vo c de ve se pe r g un ta r os qu e se us le ito res pr oc ur am? ! O qu e des ej a r eal iz a r c om sua ap r ese nta o ? ! E les le ro a pg i na i nt ei ra ou ap enas u ma par t e d e la ? ! A n tes d e co me a r ent ra r co m c d ig os o u i m ag ens vo c d ev e p e nsa r o q u e q u er o co loc ar e m m inh a p g ina ?! C o mo se r est r ut ur ad a ? ! E la est a de q ua da o u no ao m e u p bl i co a lv o? ! O s ob je t ivos no p r ec is am se r g r an d iosos, mas a d ete rm i na o i r a ju d -l o a e la bo ra r, or g an i za r e c o di f ica r su as p gi nas com u ma m a ior p rob a bi l i da de d e s uc esso. C aso v d ese n vo lv er u ma a p rese nt ao We b pa ra um a emp re sa o u p essoas i m po rt an te q u e vo c c ol ha ju nt o ao s eu cl ie nt e se us o b jet i vos, id ias, a for m a q u e ima g ina s ua p gin a, e tc. Ass im , f i ca r be m ma is fc i l de c om ea r se u t ra ba l ho.
Divida seu contedo em tpicos

C r i e u ma list a co m os p r i nc i pa is t p i cos, a p r i nc pio no i mp or ta a o r de m. Es ta um a fo r ma de c om ea r a se o rga ni za r. S ua l is ta p o de r te r q u a ntos t p icos d ese ja r, mas se p e rca l i sta n do um a q u an ti da de e no r me de t p icos (seu leitor poder se cansar e se perder em
meio a tantas opes).
Organizao e Navegao
A q u i de sc re ve r ei a l gum as das est r ut ur as e n av e ga o e s uas ca ra ct er st i cas e a in da con sid e ra es im p or tan tes co mo :

O s t ipo s de i n fo rma o qu e s e ad a pta m m el h or a c ad a es tr ut u ra. C o mo os lei to res co nse g ue m se d es lo ca r pe lo co nte do de ca da t i po de es t ru tu ra pa ra e nco ntr a r a s i nf orm a es d e q u e p re c isa m C o mo Te r c e rte za de q u e os l e it or es co nse g ue m se lo ca li za r n os se us d o cu me ntos (contexto) e a ch ar o ca mi n ho de vo lt a at uma p os i o c on he c id a.
A o le r esta p a rt e re f lit a c omo su as in fo r ma es se en ca ixa r ia em c ad a u ma. Vo c po de r com b i nar, a t mes mo, d uas es tr u tu ras e cr i ar um a no va fo rma d e n av e ga o.
- 60 -
Webdesign e Viso do Projeto

A ma io r ia d as pessoas asso c iam D es i gn uni ca me nt e ao p roj eto g r f i co de u m We b Si te, o q u e u m e r ro. O co nc e ito d e W eb D es i gn en vo l ve t odo s os as p ec tos da con st r u o d e u m s it e, d es de o des en ho de su a est r utu ra de na ve ga o e fo rm a d e d i sp on i bi l i za o da i n fo r ma o a t o des en vo l vi me nto d o p ro je to g r f i co. A c ons tr uo d e u m We bs it e dev e, an tes d e ma is nad a, s er e nt en d i da com o u m p ro jet o, co mpo sto d e fas es e d ese nvo lv i do po r pess oas de b ac k g rou nd s d i f er en tes.
Contedo e Forma
O q ue faz u ma pess oa e nt ra r em u m s i te ?! O fa z a pess oa q ue re r ret or na r? ! Es tas pe r gu n tas de vem se m p re es ta r na cab e a das pess oas de u ma e q ui pe d e c ons tr u o d e si tes. A p r i me i ra m u it o re la ci o na-se ao p b l i co a lv o. Pa ra qu al t i po d e p b l i co voc es t d is pon i b i li za n do i n fo rma o ? ! Q uai s so as pr io ri d ad es e i nt e resses dest e p b l ico ? Qu e t i po d e c on exo m a is usa da p or el e? ! A s res postas pa ra a se g un da p erg u nt a c e rta me nt e e nv o lv em t rs po ntos : o 1 o con te d o. o e lem e nto c en tr a l. O 2 po nto o des i g n do s it e (estrutura
de navegao e projeto grfico).

Es tr ut u ra r a i n fo rma o d e fo r ma qu e a na ve ga o se ja o m a is i nt ui t i va p oss v e l faz co m qu e s ua a pr ese nt ao We b t en ha m u ito mai s c ha nc e d e s uc esso, co ns id er an do o ti po d e i nfo r ma o d isp on i bi li za da c on fo r me se u p b l ico a lv o. O ut ro p on to a at ua l iza o pa ra q u e no pe r ca u ma d as p r i nc i pa is ca ra cte r st i cas da I nt e rn et : a d i nam i c idad e. 1 . Na c r ia o d o p ro j eto g r f ico , t en te se mp r e o p ta r po r so l ues q u e m e lh or se a da pt em a p la ta for ma m ais usad a. Po r exe mp lo: mon i to r 1 4 p o le ga das c om reso l u o d e 6 40x 48 0, fa a co m a m el hor d iag ram a o d as p gi nas a co nte a q u an do o s it e vi st o n esse t ip o de mo ni to r e r eso l u o. C aso o se u si te de va se r dia g ram a do pa ra u ma r eso lu o o u t ama n ho de mo ni to r d i f er en tes d o ma is usa do, in fo rme n o s it e. 2 . Nu m pro jet o g r fi co d ev e se mp r e se p erg u nt ar se s ua ap res en ta o f i co u a de qu a da o u no ao qu e s eu c l ie nte d ese ja va e ao s eu p b l ico a l vo. 3 . P ar a te r u ma g ar an t ia que suas im a ge ns se ro se mp r e be m v is ua l iz ad as, pro c ur e t ra ba l har co m i ma ge ns p al et i za das (formato .gif) . O m e lho r r es u lta do p a ra isso se r t ra balh ar sua s ima ge ns em R GB e d e po is i nde x- las com o m eno r n m ero d e co r es poss ve l. Caso p re c ise u t i li za r i ma ge ns Tr ue C olo r, sa lv e-as e m fo r mato . jpe g, qu e res ul ta r e m a rq u iv os pe qu eno s. 4 . S e mp re i ndi q u e em que b rows er s ua p g i na se r m e lhor v is ua li zad a. 5 . A p g i na d e en tra da d e um s it e mu i to i mpo r tant e. E la dev e se r p r oj eta da d e fo r ma q u e d iga a q u e o si te se de st in a, s eja de f or ma t ext ua l, v isu al o u es tru t ura l.
- 61 -
6 . O co nt e do e fo r ma c omo el e a p res en ta do se ro os p rin c i pa is a tra t ivos de s uas pg i nas, a no s e r q ue o p on to c ha ve se ja m as i m ag ens. Po r iss o, no pe nse que a net ig u al a o ut ras m d ias. 7 . D i r ei tos au to ra is: A p r ote o d e d ir e itos a ut ora is no cost u ma se r m u it o e vi de nt e n a We b. O des ej o or i g in al d e um a pgi na n o p r ote g i do. Mas q ua l qu e r tex to, g r f i co, v d eo ou ud i o o r i gi nai s de ve se r p ro te g id o. U m l i nk o u UR L no p ro teg i do , mas u ma l is ta de l i n ks (como no caso das bibliotecas virtuais) d e ve s er p r ote g i do p e los d i r ei tos a ut ora is. 8 . A n et iq ue ta e Do m n io p b l ico : A We b f oi c r ia da com b ase em se r ca paz d e a ta r l in ks d e h ip e rt exto de q ua l qu er o ut ra lo ca liz ao da re d e. C o nse qu ent em en te, qu an do voc d is po n ib i l iz a u m si te, i m p li ca em vo c p e r mi ti r a o ut ros " li n ka r" su a p g in a de We b, po r m a ne t iq ue ta r e com en da q u e s e p e a p er m iss o aos W e bmast e rs se mp r e q ue p oss v e l.
26. CONCLUSO
O v ol u me d e i n for ma es no mu n do do Des en vo l vi me nt o We b ex tr em am e nte g r an de , e d i f ic i lm en te uma p essoa d om i na to dos os as pe ctos e p a rt ic u la ri da des. Po r i sso b as tan te c o mu m o uv i r mos t e rmos com o We bd es ign e r e P rog r ama do r We b . Os We b des i gne rs ge ra lme nt e do m ina m a a rt e d a c ri a o de la yo uts, i nt e rfa ces co m o usu r io, t i po gr a fia , C SS e p r og ra mas d e e d i o d e i m ag en s. Os P rog r ama do res W eb po r s ua v e z so r es po ns vei s pe la es tr u tu ra o d os c d i gos da s p gin as, p ela p r og ra ma o d as L i n guag e ns de Se r v ido r e Na ve ga do r e pe la cr ia o de ba nco d e da dos. A p esa r de e xc ita nt e, a d is cuss o so br e esses t ema s c om ea a fu g i r mu i to d o o b jet i vo ini c ia l des ta a pos ti la, q u e a in t ro du o p r t ic a do l e ito r o u d a l e ito ra l in g ua ge m de mar ca o co n he ci da co mo HTM L e t am b m da r um a n o o s ob re as no vas t ec no lo g ias e o fu tu ro d a l i ngua ge m de ma rc a o. A o a va na r n os est u dos lo go se p e rc e be essa ra m if i ca o e c ab e a o es tu dan te d es en vo lv er a r ea q ue ma is l he a tra i. Es pe ro qu e v oc te nha gosta do. U m a b ra o, T ia go So u za h tt p :/ /ww w. tia gos ou za. com h tt p :/ /us ecl i c k. bl ogs po t.co m
- 62 -

Guia Prático de 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 Prático de HTML, Web Standards e CSS

Uploaded by

Copyright:

Available Formats

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.

Guia Prtico de HTML

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

3. SUA PRIMEIRA PGINA EM HTML

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

3.2 - Experimente voc mesmo

3.3 - Explicao do Exemplo

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

3.4 - Devemos usar a extenso .htm ou .html?

3.5 - Editores "Puros" versus WYSIWYG

3.6 - FAQ (Perguntas Freqentes)

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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

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

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

4.2 Atributos das Tags

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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" )

O s at r ib utos s em p re n am e="v alu e"

4.2.1 - Atributos podem ser aplicados maioria das tags

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

4.3 - Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')?

4.4 Notas Rpidas

5. O CABEALHO DE UM DOCUMENTO HTML

5.1.1 - A Informao Contida no Elemento <head>

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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 :

5.1.2 - Elementos de cabealho ( <head> ) Elemento

5.1.3 - A declarao DOCTYPE

5.2 - O elemento <meta>

5.2.1 - Palavras-chave para os motores de pesquisa

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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

6. MODIFICANDO O CORPO DO DOCUMENTO

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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

7. ELEMENTOS BSICOS DA LINGUAGEM HTML

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.

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

7.2.1 - Alinhamentos de pargrafo

7.3 - Criando uma diviso

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

7.4 Quebras de Linha

A ta g <b r> uma e ti q u eta v az ia, e la no p oss ui tag f i na l.

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

7.6 Informaes teis

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

7.7 Lista de elementos bsicos do HTML

8.1 Elementos para formatao de texto TAG

8.2 Elementos para o "output de cdigo de computador" TAG

8.3 Elementos para citaes e listas de definies TAG

9. LIGAES DE HIPERTEXTO ("LINKS")

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

9.1 - Links internos

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

Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------

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