Escolar Documentos
Profissional Documentos
Cultura Documentos
Guia Prático de HTML
Guia Prático de HTML
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-
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-
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
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.
-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)
provvel).
-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.
-8-
Re pa r e a l gu ns as pe ctos do c d ig o ac i ma :
(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.
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>
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.
- 10 -
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.
- 11 -
A co nst ru o se r ia o se g u in te :
<head> <p>Aqui temos algum texto</p> </head>
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.
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
Declarao Descrio
<!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html>
- 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.
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.
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 -
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.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>
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 .
- 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.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.
<!-- Este o comentrio -->
- 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.
DES CRI O
Define Define Define Define Insere Insere Define um documento HTML o contedo principal, o corpo do documento ttulos, de 1 a 6 pargrafo linhas em branco, quebra de linha uma linha horizontal um comentrio
8. FORMATAO DE TEXTO
A l i n gu ag em HTM L de f in e v ri os el em en tos pa ra s e for mata r um t exto , co mo p o r ex em p lo, esc re ve r e m ne gr i to, it l i co, s ub l i nha do, e tc . O exe m p lo a ba ixo m ost ra a l gu ns de les :
<html> <body> Este exemplo tem texto em <i>itlico</i>, <b>negrito</b>, <em>enfatizado</em>, <u>sublinhado</u> e tipo <code>cdigo de computador</code> </body> </html>
DESCRIO
Define Define Define Define Define seu seu seu seu seu texto texto texto texto texto em negrito grande em itlico pequeno forte
- 17 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<sub> <sup> <ins> <del> <s> <strike> <u> Define seu texto subscrito (ex: H2O) Define seu texto sobrescrito (ex: 152) Define texto inserido Define texto apagado Desuso. Utilize <del> ao invs Desuso. Utilize <del> ao invs Desuso. Utilize <styles> ao invs
DESCRIO
Define cdigos de texto Define o texto com uma fonte especial determinada pelo navegador Define cdigo de computador de amostra Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador Define variveis Define o texto pr-formatado Desuso. Utilize <pre> ao invs Desuso. Utilize <pre> ao invs Desuso. Utilize <pr> ao invs
DESCRIO
Define Define Define Define Define Define Define Define uma abreviao uma sigla um elemento de endereo a direo do texto uma longa citao uma pequena citao a citao um termo de citao
C o mo voc d ev e t er p e rc eb i do, o at r i bu d o h ref (Hipertext Reference / Referncia de Hipertexto) i n di ca o e n de re o da p g i na q ue vo c q u e r "l i nka r" ( l i ga r) ao se u do c ume nt o. No ex em p lo ac im a, o texto CMI B ra s il a pa rec e c om o um a r e fe r nc ia par a o l i n k. Se vo c c l ic ar so br e esse tex to, se u n av e ga dor au tom at i cam ent e ten ta r a br i r a p g in a h tt p :/ /ww w. m id ia i nd ep e n de nte. or g
- 18 -
O s e n de re os s o es cr i tos na for m a d e URL (Uniform Resource Locators) , q u e um a man e ir a q ue in v en ta ram p ar a s e es pe c if i car o cam i nho at se c he ga r n u m ar q u ivo qu e est eja n al g um lo ca l da in te r ne t. O fo r mato d a URL :
protocolo://nome-do-computador/pastas/arquivo
O p ro toco lo in d ica c omo o n av e ga dor i r b uscar o ar q ui vo. N om e d o c o mp u ta do r aq ue le en de re o d o t i po w ww. n in g ue m. co m.b r e as pasta s so os d i ret r ios d en tr o de sse co m pu ta dor o n de es to os a r qu iv os. U ma UR L de um a rt i go do s it e da CMI Br as il , por e xe mp lo, h tt p :/ /ww w. m id ia i nd ep e n de nte. or g / pt/ b l ue/2 0 0 4/ 09 /2 90 6 6 9.sh tm l, o nd e h ttp: // o p ro to co lo , p t, b lue , 2 0 04 e 0 9 s o p as tas (uma fica dentro da outra) e 29 0 6 6 9 .sh tm l o nom e d o a rqu iv o . h tt p :/ / \-- - www.m i d ia in d epe n de nt e.o rg \ --- pt \-- b l u e \-- - 2 00 4 \- -- 0 9 \- -- 2 906 69 .sh tm l L e mb r e-se ta m bm q ue q ua n do v oc ac essa o en d er e o h tt p :/ /ww w. ni n gu em .co m. br , p or e xe mp lo, es t na verd ad e ve nd o o a r q uiv o h tt p :/ /ww w. ni n gu em .co m. br / in dex. ht m l. Os ar q u ivos do t i po in d ex .h tm l se m p re so pr oc u rados pe lo nav e ga do r qu an do vo c so l ic i ta a pe nas o n om e d o si te o u u ma pas ta d e um c omp u ta do r. E m h tm l, ex ist em t rs f o rmas poss ve is d e se fa ze r l in ks : os link s inte rno s, os link s loc a is (ou relativos) e os link s ex te rno s .
2 - A di c io no o li n k p ra ess a s eo com o se g u in te cd i go ,
<a href="#Hipertexto">V para a seo hipertexto</a>
"Hipertexto").
Q ua n do voc fi z er u ma re fe r n cia a u m l i nk i n te r no u til i za n do o at r i bu to h ref , v oc p rec isa ne cess ar i am en te ad i c io nar o c ar ac te re # (jogo da velha) ant es
- 19 -
Ess e t ip o d e a r gu men to pa ra o h ref t amb m cham a do d e link s re la tiv os. S e vo c q ui se r l in ka r u ma p gi na q ue es tej a do d i ret r io (pasta) s up er io r d a s ua p g i na, u se d ois p o ntos e um a ba r ra an tes do n om e do ar q ui v o:
<a href="../links.html">Acesse os links!</a>
A va nta gem de voc usa r l i nks r el at iv os qu e vo c po d e mo ve r to do o se u s it e pa ra um no vo end e re o na in te r ne t e no pr ec isa r r ee d ita r to dos os l i nk s q u e ap on tam pa ra p gi na s do se u p r p r io si te .
O a r g um ent o do a tr i bu to ta rge t o n om e d a ja ne la do n av eg ado r q ue a b r ir o l in k. Se v oc qu iser q u e o li nk se ja a be rt o n um a no va jan e la, s im p les men te es co l ha q ua l qu er no me com o ar gu m en to.
DES CRI O
Define uma ncora ou uma ligao de hipertexto
- 20 -
10. LISTAS
A l i n gua ge m HTM L c on t m e l em en tos q u e pe rm i te m d e f in i es, lis tas o rd e na das e lis ta s no ord ena da s . cr iar lis tas de
D e nt ro d e u ma li sta n o or d ena da p od emos c olo ca r p ar g ra fos, qu eb ras d e l i n ha, i ma ge ns, o ut ras l is tas, e tc.
Es te o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor: 1 . R um 2 . Ba ga o D e nt ro d e u ma l ista o r de na da po de mos c olo ca r pa r gra fos, q ueb r as d e l inh a, i m ag ens, ou t ras l is tas, e tc.
- 21 -
A s lis tas de d ef i n i es s o c r ia das co m o el e me nto <d l> ("definition list") O n om e de ca da te r mo f i ca d en t ro d e u m e lem e nto <d t> ("definition term") e a s ua d esc r io f ica no e l em en to < dd> ("definition description")
<dl> <dt>Rum</dt> <dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd> <dt>Bagao</dt> <dd>Bebida com elevado teor alcolico. A sabedoria popular atribui-lhe fortes propriedades teraputicas.</dd> </dl>
Es te o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor: R um Be b i da es pir i tu osa m u it o a p re c ia da pe los pi ra tas do Ca ri b e Ba ga o Be b i da co m e le va do t eo r a lco l ico. A s ab e do r ia po p ular r eco n hece -l he f o rtes p ro pr i e da des t er a p ut ic as. D e nt ro de u m e l em ent o < d d> po de mos co lo ca r pa r gr a fos, qu eb r as d e l i nh a, i m ag ens, ou t ras l is tas, e tc.
DES CRI O
Define uma lista ordenada Define uma lista no ordenada Insere um item na lista Insere uma lista de definies Apresenta a definio de um termo Insere a definio de um termo Desuso. Utilize <ul> Desuso. Utilize <ul>
11. IMAGENS
A l m d e ma ni p u lar t ex to, o h tml t am b m se r ve pa ra ex ib i r im ag e ns de um a m an e ira mu i to si m p les, usan do p a ra iss o o e le me nto im g :
<img src="emma.jpg" width="221" height="300">
O a tr i bu to s rc - source, fonte em ingls - d o n o me d o a rq u ivo d a ima ge m e o ni co at r ib ut o o b ri ga t ri o pa ra o e le me nt o img . Os a t rib u tos pa ra a l a rg u ra (width) e a a lt u ra (height) no so ne cess r ios, m as se ro m uit o te is qua nd o as p essoas es t ive r em na v eg a ndo e m se u s it e: q ua n do se u n av e ga dor a b re u m a r qu i vo htm l e en con t ra o e lem e nto img , e le usar o r es pe ct i vo a tr i bu to s rc co mo o en d er e o ond e es t o ar q u i vo d e im a ge m a ser e xi b i do. Em o ut ras pa la vr as, o e l em en to im g a pe nas pa ssa uma r e fe r nc ia d o a r qu i vo d e i ma ge m ao n av eg ad o r, ou sej a, vo c no es t col oc an do esse a r qu i vo d e i ma g em de nt ro do se u a r qu i vo h t ml, vo c est a pen as co lo can d o e m s eu a rqu i vo ht m l u ma r e fe rn c ia a ess e a r q ui vo de i ma ge m. O n av eg ado r, p o r sua v ez , c om ea a ba ixa r essa i ma gem a par t ir dess e e nde r eo a t ri bu to e n qu an to te r mi na de e xi b i r o doc u me nto. D e pe n de ndo do t i po d e a r qu iv o de i ma ge m, e la s se r e x ib i do p e lo n av e ga dor q u an do t e rm i na r de se r ba ixa da. S e isso oco r re r e voc no ut i l izo u
- 22 -
os a tr i bu tos w id th e h e ig h t no se u d ocu m en to, o na v ega dor s r ese rv a r es pa o n a t ela do se u co m pu ta do r pa ra a ex i b i o d a i ma gem q uan do e la es t iv er s id o ba ixa da, e d u ran te r ess e i n te rv alo a fo rmat ao do se u d o cu me nto po d e f ica r d i fe re nt e. Pa ra e vi tar isso - somente por uma questo de estilo - r e com en dam os qu e vo c s em p re us e os atr i b utos w id th e h e igh t, q u e i n fo rm am a o n av e ga dor o ta ma nh o d a i ma ge m, a ntes mes mo d e le c om ea r a ba ix - la, e assi m o es pa o n a te la do se u com p ut ad or se r a p ro pr ia dam e nte res er v ado pa ra e la.
O u se ja, a i ma ge m fo i mo st ra da c om um t ama n ho me no r d o qu e o o ri g in al . Ta m b m po de r a mos usa r ta ma nh os ma io res qu e o r ig i nal... q u e ta l vo c e xp er i me nta r a lgo com o wid th=" 2 2 10 " h e ig h t=" 30 0 0 "?! O s eg u ndo mo do de d et er m ina r o taman ho de exi b i o d as i ma ge ns n o n av e ga dor c ons is te em ut i l iz ar po rc en ta gem . Po r ex em p lo :
<img src="emma.jpg" width="10%" height="10%">
Re su lta r n u ma i ma ge m ex i bi da co m u m d c im o ( 1 0% ) do es pa o d is po nv e l d a te la do c om p uta dor . Nos do is m o dos d e d e te rm i na r o ta ma nho - em pixels e em porcentagem p o de mos es co lh er va lo res i n de pe n de nt es p a ra a a ltu ra e a lar g u ra, d e t al f o rma q ue a ima g em fi q u e d isto rc i da. Ol ha q u e e ng raa do :
<img src="emma.jpg" width="50" height="400">
- 23 -
O tex to a pa re ce ao lad o d a i ma ge m. Ess e c d i go po d e fun c io na r mu i to be m, m as s v e zes acon te ce d o t ext o a pa re ce r ab a ixo da im a ge m. Par a fa ze r o p os i ci onam ento da i m ag ens e d o t ext o cor re ta me nte, b ast a ut il iz a r o at r ibu to a lign, q u e f u nc io na d e mo do a n lo go ao d o al i nham e nto de pa ra g rf os:
<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">
O tex to va i a pa rec er es qu erd a da i mag e m (o atributo right faz que a imagem fique direita da tela) , m es mo t en d o esc r it o a ps o cd i go s ob r e a i m ag em. En q ua nto o t ext o pu der f i ca r ao la do da i mag e m, el e fic ar . Q ua nd o e l e no ma is co u be r n esse esp a o, el e c om ea r a se r ex ibi d o a ba ixo da i m ag em, com o vo c pod e ve r aq u i. Ut i l iza r o a l in ha me nto de ima ge ns a me l ho r ma ne i ra de gar an t ir q ue e la a pa re ce r n o lo ca l d ese ja do.
- 24 -
O tex to vai a par ec e r d ir ei ta d a ima g em, a ci n co pi xe ls de d i st nc ia de la. D e u pra no tar a di fer e na ? ! Ut il i za n do t odos esses at r i bu tos par a a exi b i o d e ima g ens v oc o b tm u m tex to b e m d ia gra ma do e bo nito de ser l i do. N o ta: Ao u t i l iza r i m ag ens, l e m br e-se d e q u e e l as pod e m au me nt ar c ons i de ra ve l me nt e o t em po de c ar re ga me nt o pa ra v e r o co nte do de su as p gi nas, po r iss o, use -as co m cu i da do.
DES CRI O
Insere uma imagem Define um mapeamento sobre a imagem ("image map") Define uma rea clicvel sobre um mapa de imagem
As
l i nh as
a p res en ta das
ma is
a c ima
usa m
for mas
d i f eren tes
(mas todas
- 25 -
O va lo r do at r i bu to ba ck g rou nd u ma UR L (site) qu e de f in e o lo cal on de s e e n con tr a a i ma ge m. Na pr i me i ra li n ha ma is ac i ma, demos uma UR L re la t iva e n a se gu n da d e mos u ma UR L a bsol u ta. N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pg i na b ase ia- se e m e s tilos CSS. A u ti l i za o d est e at ri b u to s se jus t if i ca se p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n o s up or tam CS S (veremos sobre CSS no fim da apostila).
11.8 Dicas
S e mp re q ue u t il i za r um a i ma gem d e f u ndo na p g i na, n o se es q ue a d est es as pe ct os:
C e rt i f iq ue-se de q ue o tam an ho d a i mage m (em KBytes) no m ui to g r an de , po is e m caso af i rma ti vo, o te m po pa ra ca rr egar a p g ina a um en ta ri a co ns i de ra ve l me nt e. C e rt i f iq ue-se de qu e a ima g em d e fu n do co m bi na bem co m a co r d o tex to. C e rt i f iq ue-se d e qu e o f un do c om b in a be m co m as o utras im a ge ns da p gi na. Ve r i fi q ue se a re pe ti o da i mag e m de f un d o e m mosai co resu l ta e m um p a dr o pe rf e ito . Se vo c p er ce be r al g um as f a l has apa re nt es, uti l i ze o ut ra i m ag em de f u nd o ou fa a u ma e di o nes ta a tua l. C e rt i f iq ue-se d e q ue a i ma ge m n o in cm o da e q ue n o des vi a a at en o d o te xto.
O s at r i bu tos b gc o lor, b ack g ro un d e te x t do ele me nt o <bo d y> fora m re p rova dos na s reco me n da es ma is rec e ntes d a W 3 C pa ra a li n guag e m HTM L (HTML 4 e XHTML) . A f o rma re co me n dad a p ara o bte r os m esm os r es u lta dos b ase ia- se n a ut i li za o d e est i los C SS . A u t i li za o d es tes at r ib u tos s se j ust if i ca se pr ec is ar mos de man te r a co m pat i bili d ad e co m n av e ga dores a nt i gos q ue no su por ta m C SS . S o p ou cos os s ites d e qua l i dad e qu e u ti li z am im agens de f u nd o, e a q uel es q u e o fa zem , usa m f un d os q ue no a tra pa l ha m a v isu ali z ao do si t e.
- 26 -
12 CORES
P od e mos ob t er q ua l qu e r c or q ue d ese ja rmos co m bi nan do p ro po r es co rr etas d e t rs co res bas es: Ve r me l ho (Red) , Ve r de (Green) e Az u l (Blue) .
A p esa r d e n o esta re m de fin i dos o f ici a lm en te, os nom es d as co res a p rese nt ados a se gu i r so r eco nh e ci dos por to dos os n av e ga dores re le va ntes , c om e xc eo das v e rs es ma is a nt i gas. N o ta: Est es no mes d e c or es no est o def i n i dos em n e nh um p ad r o do W3 C , a pes ar de se r em r eco n hec i dos pe los pr i nc ip a is na vega do res, ess e r e con he c ime nt o no ex i g id o a n e nh um nav e ga do r para es tar con fo r me com as r eco men d a es o fi c ia is. po uco p ro vv e l qu e nos a nos ma is p rx i mos os
- 27 -
n av e ga dores pa ra PDA e t e le fon es mv e is c ons i ga m r e con he ce r es tes nom es d e co r. S e q u is er ga ran t ir a a pr ese nt ao co r ret a das c or es das s uas p gi nas e m to dos os na ve gad o res co nfo r mes co m as n or mas do W3 C, e m v ez dos n om es a pres en ta dos n a ta be la, u t i li ze o s c d ig os h exa de c ima is a p rese nt ados j u nto das co res.
COR CDIGO HEXADECIMAL #F0F8FF #FAEBD7 #7FFFD4 #000000 #0000FF #8A2BE2 #A52A2A NOME DA COR AliceBlue AntiqueWhite Aquamarine Black Blue BlueViolet Brown
A ta be la ab a ixo mostr a t oda s as 21 6 co mb i na es de co res qu e po de mos f o rma r com os va lores ap r ese nt ado s na ta be la a nt er ior. Estas so , p or tan to, as 21 6 cores s e gu ras d a We b, q u e mo st ra mos ju ntam e nte co m se us c d ig os h exa de c ima is (o caractere # no incio foi omitido) :
- 28 -
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 330000 333300 336600 339900 00FF33 330033 333333 336633 339933 00FF66 330066 333366 336666 339966 00FF99 330099 333399 336699 339999 00FFCC 3300CC 3333CC 3366CC 3399CC 00FFFF 3300FF 3333FF 3366FF 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 660000 663300 666600 669900 33FF33 660033 663333 666633 669933 33FF66 660066 663366 666666 669966 33FF99 660099 663399 666699 669999 33FFCC 6600CC 6633CC 6666CC 6699CC 33FFFF 6600FF 6633FF 6666FF 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 990000 993300 996600 999900 66FF33 990033 993333 996633 999933 66FF66 990066 993366 996666 999966 66FF99 990099 993399 996699 999999 66FFCC 9900CC 9933CC 9966CC 9999CC 66FFFF 9900FF 9933FF 9966FF 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF
A t ua lm en te q u a lq ue r c o mp ut ado r co nse gu e a p res en ta r m il hes d e co res d i f er en tes ao mes mo t em po, no hav en do n ec ess id ad e de usa r a pe nas c or es se g u ras da We b. A pesa r d isso, es te t ema co nt i nua a se r fo cad o e m q uase t oda s as i nt ro d u es c ons tr u o de p gin as.
- 29 -
Nada de Vermelho
S e des l i gar m os co mp l eta m en te a co r V er m el ha, f i ca mos co m 6 5 5 36 cor es d i f er en tes q ue res u lt am de c om b i na r 2 56 q uan t id ad es de ver d e co m 25 6 q u an ti da des de a zu l (65536 = 256 256) . A ta be la seg u i nt e most ra a l gu mas dest as com b i na es :
003300 006600 009900 00CC00 00FF00 003333 006633 009933 00CC33 00FF33 003366 006666 009966 00CC66 00FF66 003399 006699 009999 00CC99 00FF99 0033CC 0066CC 0099CC 00CCCC 00FFCC 0033FF 0066FF 0099FF 00CCFF 00FFFF
Vermelho ao Mximo
S e c olo ca rm os a quan t i dad e de Ve r me l ho c om s eu va lor m xi mo, q ue 25 5 (#FF em cdigo hexadecimal) f i ca mos a in d a co m 65 5 3 6 (256 x 256) co res d i f er en tes q u e res ul tam d e c om bi na r mos t od os os va lo res poss ve is de Ve rd e c om tod os os va lor es p oss v e is de Az u l. A ta be la seg u i nt e most ra a l gu mas dest as com b i na es :
FF3300 FF6600 FF9900 FFCC00 FFFF00 FF3333 FF6633 FF9933 FFCC33 FFFF33 FF3366 FF6666 FF9966 FFCC66 FFFF66 FF3399 FF6699 FF9999 FFCC99 FFFF99 FF33CC FF66CC FF99CC FFCCCC FFFFCC FF33FF FF66FF FF99FF FFCCFF FFFFFF
Tons de Vermelho
A ta be la ap r ese nta da a ba ixo most ra o res ul ta do o bt ido var ia n do a q ua nt i da de d e co r ve rm e lh a d e 0 at 25 5 ao m esmo t em po q ue s e m an tm e m ze ro as q u an ti da des de v e rd e e d e a z ul. Ex is te m 2 56 to ns d ifer e nt es de ve r me lh o pur o e mu i tas ou t ras q ue co nt m mis tu ra s de o utr as co re s.
- 30 -
R GB
rgb(0,0,0) rgb(8,0,0) rgb(16,0,0) rgb(24,0,0) rgb(32,0,0) rgb(40,0,0) rgb(48,0,0) rgb(56,0,0) rgb(64,0,0) rgb(72,0,0) rgb(80,0,0) rgb(88,0,0) rgb(96,0,0) rgb(104,0,0) rgb(112,0,0) rgb(120,0,0) rgb(128,0,0) rgb(136,0,0) rgb(144,0,0) rgb(152,0,0) rgb(160,0,0) rgb(168,0,0) rgb(176,0,0) rgb(184,0,0) rgb(192,0,0) rgb(200,0,0) rgb(208,0,0) rgb(216,0,0) rgb(224,0,0) rgb(232,0,0) rgb(240,0,0) rgb(248,0,0) rgb(255,0,0)
Tons de Cinza
A s co res c in za s ob t m-s e co m bi na n do q ua nti d ad es ig uai s d e v e rme l ho, ve r de e a zu l. A cor b ra nca co r res po nd e ao c i nza ma is cla ro de to dos e o bt m-s e j u nta n do 2 5 5 de ver m el ho, 25 5 de v erd e e 2 5 5 d e a z ul (#FFFFFF em hexadecimal). O p re to o c i nza m ais es cu ro de t odos e o bt m -se col oca n do t oda s as co res e m 0 (#000000 em hexadecimal). E nt re est es do is va lo res e xt re mos, te mos 25 4 g r aus de int ens i da de p oss v e is. A ta be la seg u i nt e d um a i d ia dos t ons de c i n za q ue po de mos o bt e r:
RGB(0,0,0) RGB(8,8,8) RGB(16,16,16) RGB(24,24,24) RGB(32,32,32) RGB(40,40,40) RGB(48,48,48) RGB(56,56,56) RGB(64,64,64) RGB(72,72,72) RGB(80,80,80) RGB(88,88,88) RGB(96,96,96) RGB(104,104,104) #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868
- 31 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------RGB(112,112,112) RGB(120,120,120) RGB(128,128,128) RGB(136,136,136) RGB(144,144,144) RGB(152,152,152) RGB(160,160,160) RGB(168,168,168) RGB(176,176,176) RGB(184,184,184) RGB(192,192,192) RGB(200,200,200) RGB(208,208,208) RGB(216,216,216) RGB(224,224,224) RGB(232,232,232) RGB(240,240,240) RGB(248,248,248) RGB(255,255,255) #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF
ACENTUAO
CARACTERES
A l g uns ca ra ct er es em HTM L so c hama dos de c ara c tere s re s e rva do s o u m a rca do re s, qu e s er i am os < (menor que) e > (maior que) , qu e q uan d o a pa re ce m n u m doc um e nto HTM L so i nt e rp re ta dos pe lo nav e ga do r co mo d e l im it ad ores de ins tr u o. Mas e se e u q u ise r sim pl esm en te qu e esses c ar ac te res f aa m pa rt e do m e u tex to e no se ja m i nt erp r eta dos co mo m a rca do res? ! No HTM L, to dos os car ac te res t m u m no me e sp ec ia l, ou c di go. Pa ra a cessa r u m car ac ter e, voc p re c isa usa r a se g ui nt e c on ve n o:
&nome-especial;
- 32 -
o n de o nom e -e sp e cia l o no me ou um n m er o asso ci ad o ao s m bo lo g r f ico q u e vo c d es eja most ra r no se u do c um en to. Isso d e f in e a l go q ue po de mos c ha ma r de s eq n cia r es er va da, q ue um g r u po de cara ct eres q ue q ua n d o i n te r pr eta do pe lo na ve ga do r p rod u z i r u m c ar ac te re, q u e in cl us iv e po de se r u m c ara cte r e res er va do. No HTM L, os no mes es pec ia is so c ha ma dos d e e nt i da des. Na pr xi ma t ab el a mos tra mos al g u ns no mes esp ec ia is de c ara ct e res e s uas r es pe ct i vas se q nc ias rese r va das pa ra acess - los: CAR ACTER ES
& < >
NO ME E SPE CI AL
aacute Aacute eacute atilde ocirc amp lt gt cent pound yen section copyright registered trademark multiplication division
Ve ja a lis ta co m p let a d e e nt i da des HTM L no li n k abaixo : h tt p :/ /ww w.w 3.o r g/TR/R EC -h tm l 40 /s gm l /e nt it i es.h tm l
14. TABELAS
Ta be las a ux i li am na v is ua l iz ao de da dos o u na divis o d e su a p g i na e m se to res. E nt en da po r u ma tab e la H TML c om o se ndo se me l ha nte a u ma ta b el a q u e voc d es en ha r ia nu ma fo l ha de pa pe l o u nu m o ut ro p r o gra ma d e c om p uta dor . O e le men to p ri n ci pa l de uma t ab el a o tab le e aq u i s eg ue u m e xe mp lo s im p l es d e ta be la :
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>
E m HTML, as ta b el as so di v id id as e m l inh as e c l ulas. Na tab e la ac i ma, a p r i me i ra l in ha co nt m as c l ul as P rimeira e S e gu nd a, e n qu an to q ue a se g un da l in ha con tm as c l ul as Te rce ira e Qu a rta.
- 33 -
D e nt ro d e u m b lo co tab le, os p ri n c ip ais e lem e ntos q ue v oc u t il iz a r so o tr, o u table row (linha) , e o td, ou table data (clula) . D essa fo rm a, po d emos d e f in i r as li n has e as c lu las da t ab el a. m an da tri o q ue um b lo co td es te ja d e f in i do de nt ro d e um b l oco tr, ou se ja, q u e as c lu la s es te jam d e nt ro d e l i n has. No ex em p lo a nte r io r, c r iam os um a l in ha co m tr e em s eg u i da, d en t ro de u m b l oco td, es c re ve mos o tex to d a c lu la (P rime ira). A b r im os ou t ro bl oco td n esse m esm o b loc o tr, on de co lo ca mos o te xto da seg u n da c l ul a (S egu nd a) . D e po is, f ech am os a l in ha com o < /tr> pa ra e m s e gu id a a br i r um a no va l in ha, o n de c r iamos as c lu las con te ndo os t extos T e rce ira e Qu a rta. O a tr i b uto bo rde r no e le me nto tab le se rv e p ara dar bo r da t ab el a. Sem o e l e no fi ca r ia m ui to d i st in to ond e c om ea e te rm i na ca da u ma das c lu las :
<table> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> Primeira Segunda Terceira Quarta
O c d ig o f ic a co m pl i ca do o ta nto qua nt o se q ue ir a. A g ora q ue v o c ca pt ou a ess n cia d as t a be las, v am os most ra r do is t r s a tr i bu tos qu e pod em se r ut il i za dos e m ta bel as.
- 34 -
ut i l iza mos
at r ib u to
Primeira Terceira
Segunda Quarta
Primeira
Segunda
Terceira
Quarta
- 35 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------</tr> <tr> <td>Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr> </table> Primeira Segunda Terceira Quarta Quinta Sexta
qu e
as
c lu la s
D a mes ma f o r ma, s e q u i se rmo s u m a co lun a co m a pe nas u ma c lu la e ou t ra c om d uas , p o d er a mos usa r o a t ri b uto row sp an. V e ja a d i f e re na en t re u sa rmos e n o usa r mos o row sp an :
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table> Primeira Segunda Terceira <table border="1"> <tr> <td rowspan="2">Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table>
- 36 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------Primeira Segunda Terceira
Not e q ue qu an do o wid th ut i liz a do co m o e le me nto ta b le, a la r gu ra r ef er e se la rgu ra d a pg i na, en q ua nto q ue q u an do usa do de nt ro d e um td a l a rg u ra re f er en te ao ta man do d a tab e la. Isso t udo d es de q ue o ar g um en to se ja da do e m p o rc enta g em e no e m pi xel s.
14.5 - Dicas
O s el em en tos < th ea d>, < tbo dy> e < tf oot> ai n da so pou co usa dos de vid o ao su po rt e d e f ic i en te o f er ec i do p e los na ve ga do res an t i gos. Os n a ve ga dor es m o de rnos j s upo r tam b e m est es e le me nto s.
DES CRI O
Define uma tabela Define um cabealho para uma tabela Insere uma nova linha numa tabela Insere uma clula numa tabela Define uma legenda para uma tabela Agrupa colunas numa tabela Define os valores dos atributos para uma ou mais colunas da tabela Define um cabealho de uma tabela Define um corpo numa tabela Define o rodap de uma tabela
- 37 -
15. FORMULRIOS
O s f or m ulr i os se r vem p ar a r ec ol he r da dos i nt ro duz idos p e los v isi ta ntes e e n vi - las pa ra v oc , at ra vs de se u se r vi do r.
O e le me nto < fo rm> p o r si s n o faz com q ue o na ve ga do r des en he na da na p gi na nem p er m ite i ns er i r dad os. E le co nt m e lem e ntos que re co lh em o s d a dos e poss ui at r ib ut os q ue d iz e m ao na ve ga do r co mo e pa ra o n de de ve m se r e n via dos os da dos ins er i dos p e lo v is itan te .
15.2 - input
O e le me nto q ue e n co nt ra mos c om ma io r f r e q n c ia em fo rm u l r ios o e l em en to < in pu t>. O exe m p lo a ba ixo most ra um fo rm u l r io sim p l es co m d o is e l em en tos i n p ut :
<form action="processar.php" method="post"> Primeiro nome: <input type="text" name="primeiro_nome"> <br> ltimo nome: <input type="text" name="ultimo_nome"> </form>
O fo r mu l r io a ci ma fi ca r se n do e xi b i do d est a fo r ma em s eu na veg a do r: P r i me i ro no me : lt i mo no me : O el em ent o d i f er en tes. < in put> po d e assu m ir d i ve rsas fo r mas c om fi na l id a des
- 38 -
Re pa r e q ue s p od emos se l ec io na r u ma das o p es ac im a.
15.4 Checkboxes
A s ca ixas d e va li da o ("checkboxes") d e ve m se r usa das se m p re q u e q u er e mos q u e o v is it an te ac ei te (ou no) os i te ns d e n tr o de u m p e q ue no g r u po. pe r mi t id o val i da r mais d e uma o p o si m ul tan ea me nt e.
<form> <input type="checkbox" name="carro">Eu tenho um carro <br> <input type="checkbox" name="surf">Eu tenho uma prancha de surf <form>
- 39 -
Submeter
Nome de usurio:
DES CRI O
Define um formulrio para recolher dados inseridos pelo utilizador Insere um campo para introduzir dados Define uma rea de texto (permite inserir texto com vrias linhas e um
O c r ia dor d e p g inas v -s e o br ig a do a li da r c om um n me ro ma io r de p gi nas ao m esm o tem p o. A i m pr esso do co nt e d o do nave ga do r f i ca m ais d if cil . A l g um as vez es se r nec ess r io a u t i li za o d e u m ni co e le me nto < a>, p a ra qu e el e rea l i ze a l i g ao d e d u as ou ma is p ginas, o q ue o br i ga a u t i li za r Java Sc r ip t.
O e le me nto <f ram es e t> de f ine a fo r ma c om o a ja ne la do b rows e r s e s ub d i vi d e pa ra ac omod a r as mo ld u ras. Es te e le men to di v i de a jan el a do b ro wse r em l in has e c ol u nas.
- 40 -
No ex em p lo a pr ese nta do a ba ixo, t emos um co nj un to de mo l du ra s co m d u as c ol u nas. A p r i m ei ra c ol u na o c up a 2 5% da la r g ura d a ja ne la d o na ve gad o r, e n qu an to a se gun d a co lu na o cu pa 7 5% da lar g u ra. O do cum e nto m o ldu ra _a . htm l ocu p a a p rim e ir a co lun a e o doc u me nto m o ldu ra _b .h tm l o cu pa a seg u n da co l un a:
<frameset cols="25%,75%"> <frame src="moldura_a.html"> <frame src="moldura_b.html"> <frameset>
16.4 Dicas
Q ua n do um a mo l d ura poss ui l in has de co nto r no v is v eis, vo c po de a lte ra r s uas d i me ns es ar ras ta n do as l i nh as d e l i mit e co m o mo use. Par a i m p ed i r q ue i sso a co nte a, ut i l ize o at r ibu to no resiz e="n o res ize " d ent ro da tag <f ram e> Ut i l iz e a tag <n of ram e s> pa ra q u e os nav e ga do res q u e no s up o rta m fr am es p ossa m most ra r u m av is o na j ane la de qu em est a cessa n do o s it e.
<a href ="pagina_1.html" target="principal">Pgina 1</a><br> <a href="pagina_2.html" target ="principal">Pgina 2</a><br> <a href="pagina_3.html" target ="principal">Pgina 3</a>
DES CRI O
Define um conjunto de molduras Define o contedo de uma subjanela (moldura, ou "frame") Define uma seo "noframes" para ser usada pelos browsers que no suportam molduras Define uma subjanela (moldura) interior ("inline frame")
- 41 -
Guia Prtico de HTML Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<html> <head> </head> <body> <script type="text/javascript"> document.write("Ol Mundo!"); </script> </body> </html>
O s c ri p t ac im a fa r o se g u in te r esu l ta do:
Ol Mundo!
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>
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>
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 ;- )
- 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
("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
- 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 :
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; }
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 -
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.
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 -
- 49 -
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.
- 50 -
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.
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
E XI GE FECH AMEN TO
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
E XI GE FECH AMEN TO
no sim recomendado sim
AT RIB UTO
align face size color
F UN O
alinhamento fonte tamanho cor
E sp a am en to e en tid a de s C DI GO
F UN O
espao simples
E XI GE FECH AMEN TO
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 -
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 -
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
<!-- Isto um comentrio --> <blockquote> Texto citado a partir de uma fonte externa. </blockquote> <address> Endereo (1 linha)<br> Endereo (2 linha)<br> Cidade<br> </address>
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
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
- 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
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
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
valor contido no elemento sofrer formulrio for submetido contedo do formulrio for elemento for selecionado elemento perder o foco elemento ganhar o foco
- 56 -
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
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.
- 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
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.
- 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
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.
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.
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 -
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
- 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 -