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

com -----------------------------------------------------------------------------------------------------------

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

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

-1-

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

SUMÁRIO

1 . IN T RODUÇÃO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 2 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 3 . S U A P RI MEI R A PÁGIN 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 nsão .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 pós tro fos ..... ....... ........ ....... ... 4 .4 – Notas Rá p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 5 . O CABEÇALHO 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 rág 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 são ..... ....... ........ ....... ........ ....... ........ ....... . 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 bás icos d o HTM L . ..... ........ ....... ........ ....... ... 8 . FOR MAT AÇÃO 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 GAÇÕES 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-

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

1 0. 1 1 0. 2 1 0. 3 1 0. 4

– –

L is tas Não 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 AÇÃO 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 tão 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 ERÇÃO 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-

. ....... .GUI A DE REF ERÊN CI A R ÁPI DA ... ....... ............We b sta n da rds e va li da ção ...... ................... ....................... ...... ....... .. ..A tr ib u tos de tec la do ......... .. ............. ... 2 3.......... . ........... 5....... ........................... ..... ..... .. ... ....... 2 . ...........com ----------------------------------------------------------------------------------------------------------- 1 8 .... -4- .... ....................... ............ ........ .. 4 P RESEN TE E O F UT URO DO M AR KUP .. ...... ........... . . .... . . ......... .. .... .... .. ..... 5 . 1........ .......... 2 3....... ........ . ........ ............ ................. .. H TML A V AN ÇADO .... . .... 2 0...... ... ..... .. ........... 1 9. ......... .... ... .. . ....... 1 ......... 1 ...... .. .. ......... .........A tr ib u tos l i n güí st i cos .Fo l has de Est i lo ( C SS ) ....... ...........Va l i daçã o? ! Po r q uê d ev e r ia eu faz e r is to? ! .... 2 3.. . . .. 6 .. . 4 – Si tes di nâ mi cos o u a ut oma ti za dos .. ....... 3 2 4........ ....... 1 2 4.E ven tos de t ecl a do .. .. ...... 1 – Ist o é t u do q ue eu pr ec iso ? ! .............. ..Como e u f aço en v io os a r qu i vos do me u s ite ? ! ......... ... .. . .. . .... ... 2 0........... . ..... . 5............. . 4 .. .. ....E ven tos de jane la . 2 0.... ....... .. .... 1 9 .... 8 ....... .... 2 2 – RE FER ÊN CI AS COM PLE TAS DE H TM L 4 . ...... . . ....... .. ............ . 5 . ..E ven tos do mou se ....... 2 0.Guia Prático de HTML – Prof... ... ... ...................... ...... 2 0 ................... 2 3. .. ...... 2 ............... .. 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 .. .... ... 2 3..... 2 3..0 1 . ... 2 . .......... 3 – Ac ess i bi l i da de ....................... ....... O 2 4.. . .......R DF e S y nd i cati o n ....... . ...... . ........... 3 .................. ..... 1 .............. .... O UT RAS POSSIBILI DADES ... .O q u e ma is há pa ra co nh e ce r s ob re HTM L ? ! ............ ...... ........ 24..... CON CL US ÃO .O con só rc io da We b ................ ................... 5............ ... .. ............ ...... .. .. 2 0...... . 2 1 ....... .. . ..... 1.... .................. ......... ....... .... ....... ........................ .. ..... 2 6 ....A tr ib u tos i n tr ín se cos .. ... .. ..... ............... 2 – T emp l ate s ............. ...... ...E ven tos pa ra fo r mu lá ri os .. ...A tr ib u tos n u cle ar es ou int r ín sec os (" Co r e At tr ib u tes ") ..........tiagosouza...... ........ ...... .... .. ... . ... .... .......................... ...... 2 0.. 2 0.. 1 .............. .... 2 0. COLOCAN DO S EU S IT E NO AR .. ... 1 9...... ........... AT RIBUTO S E SPE CI AI S DE HT ML 4 ...... ....... .... ... .. .... ....... Tiago Daniel de Souza http://www.... .. ......... – XML . ........ ... . ......L e ga l !! Posso a nu nc iar ? ! ......... 2 2 4. ... 2 3... ..... .....S GML e HTML . ..... 2 3...... . ..... ........... ..... ..... ... DI CAS FIN AI S ... .... ......... ... 7 ........... ........... 2 3 .................... ........... .......... ...... .... ..... ........ ............. .......

q u an do me nos es p era r.. u ma l in g uag e m de mar ca ção d e h i p er tex to.h tm l e e tc. A ap ost i la pa rt e d a estac a z e ro e n ão r e qu e r q ual q u er con he c im en to pr é v io d e pro g ram ação. se rá n e cessá r io q u e v oc ê se em p en he .h tml. 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. L in gu ag en s d e ma rc a çã o (markup languages em inglês) s ão l in g ua ge ns q u e c om b in am t ext o com i n fo r maçõ es ex tras sob r e o tex to. fo o. 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. INTRODUÇÃO A s p essoas im ag i nam q ue é m u it o d i f íci l co nst r uir um s ite .com ----------------------------------------------------------------------------------------------------------- 1. 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. Ex em p lo : ind ex . M ais e sp e ci f i cam en te . P or ta nto. Essa i n for m ação ex tr a p o de se r re p res en ta da po r d i ver sos s ím bol os o u pa la v ras. 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.h tm l. -5- . O u tro s pe nsa m . s e voc ê pr ete n de tr i lh ar o ca m in ho c e rto.as ta is p á gi nas w eb . Ch e ga d e c on ve rsa. a a pos ti l a não e ns in a tu do. 2. 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. Mas. I sto não é v e r dad e !! Q ua l qu e r um p o de a pr e nd e r c om o cons t ru i r u ma pá g ina . Tiago Daniel de Souza http://www. esta rá ap to a co nst r u ir um ra pid a me nte. É 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ê.Guia Prático de HTML – Prof. 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 .tiagosouza. O na ve ga do r (também chamado de browser) . O K. q ue é a m an i fes ta ção g rá f ica dos có d ig os . SOBRE O HTML O H T ML é u ma L in gu ag e m de m a rca ção d e te xto . Va mos co me ça r. os nom es d os a r qu i vos em HTM L t e rm i nam c om . O b v ia me nte .aquilo que você usualmente vê quando navega pela internet . usa n do co mo me io a i nter n et. Fe l i zm en te. S e v oc ê c on ti n ua r l e n do. n ão se abor r eç a. 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. ba r. Po r co nv e nçã o. D ia nt e d isto.cha ve d if e re ntes. 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. a nt es d e co me ça r a fa la r d e HTM L. i n te r pr etá -los se g un do o pa d rão d o h i pe rt ex to e ge ra r a " pág i na h t ml ". O pr oc essa do r e v is ua l iz ad or d e HTML são c ham a dos de n a ve ga dor .erroneamente . hm l (existem também arquivos html que terminam com .shtml e outras extensões malucas) . de ve rá cr ia r vo cê mes mo o w e bsi te. Al g u ns ma is f e c had os q u e o ut ros. O o bj et iv o d es ta m in ha a pos t il a é fo rn ec e r os c onh eci me nto s b ás icos qu e p e r mi ti rão c ons tr u i r um we bs it e d e fo rma co r ret a. ca so esses a rq u i vos co nt en ha m cód i go s HTML . 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.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. 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.

se vo cê u t il i za o Wi n dows (95.h tm l • • 3. XP. O s ar q ui vos HTM L po de m se r es c ri tos usa n do u m si m p les e d it or de t ext os e seu s no mes de ve m possu i r a ex te nsão . 3. 98. A g ora d ig i te o se g u in te tex to: <html> <head> <title> Título da Página </title> </head> <body> Esta é minha primeira página. 2000.. < /h ea d> é a in fo r ma ção d o ca b eça lh o. A ú lt ima ta g e m se u doc um e nto d e ve rá se r < /h tm l>.2 . i n ic ie o Bloc o d e Not as (Notepad).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. 3. Est a t ag d e fi n e o i n íc io d e u m d oc ume nt o HTM L e i n d i ca ao na ve ga do r q ue to do cont eú do p os te r io r d e ve se r t ra ta do c omo u ma sé r ie de có d ig os HTM L. <b>Este texto está em negrito</b> </body> </html> S al ve este a r qu i vo com o no me in d ex ..Explicação do Exemplo A p r i me i ra t ag e m s eu d o c um en to HTML é <h tm l>.e. Tiago Daniel de Souza http://www. m as não i re mos e nt rar ne sse m ér i to. c ha mad o in de x .1 .O que está dentro de um arquivo em HTML?! • U m a r qu i vo HT ML é con st it u íd o po r tex tos qu e de f i nem os e le me nt os da l i n gu ag em HTM L usa nd o "etiquetas de marcação" . co mo o t í tu lo e as p a lav ras -ch av e. a c abe ça e o c orpo . a q ue la qu e v oc ê ve rá p r oc essa da em s eu n av e ga dor . -6- . A go ra a br a o ar q ui vo qu e vo cê sa lvo u a cim a.h tm A b ra o se u na v ega do r. etc) .tiagosouza. Es ta ta g i n d ica ao n av eg ador q ue é o f i m d e se u d o cu me nto HTM L.3 . Ne nh u ma in fo r ma ção c on ti da no c ab eç al ho é exi b i da na jan el a do na v ega do r.Experimente você mesmo Bo m. Ex is te a i nd a uma r eg i ão d a pá gi na q u e es tá ta nto fo ra da ca be ça qu an to do co r po (não! não é a falta de juízo!) . O bse rv e o r esu lta do.Guia Prático de HTML – Prof. i. O corp o c on tém a pa rt e v is í ve l do d o cu me nto. Na cab eç a (ou cabeçalho) sã o de f in i dos os a tr i b utos p r i nc i pa is d o do cu men to.com ----------------------------------------------------------------------------------------------------------- 3. O tex to e nt r e as ta gs <h ea d> . SUA PRIMEIRA PÁGINA EM HTML U ma pá gi na HTML é di v i d id a e m d u as par tes. A s et i qu etas de mar ca ção dão ins tr u ções a o nav e ga do r so b re a es t ru tu ra d o doc u men to e so bre a f or ma d e co mo a pá g ina de ve se r a p rese nt ada gr af i came nt e.

Qu a l nav eg a do r eu d ev o u tiliz a r? ! Vo cê po de u t i li za r qual q u er b rowse r. eu n ão co ns igo v is ua liz ar o re su ltad o e m m eu na ve ga do r.. n a pa rt e d e c i ma do b ro wse r. n u m e d itor d e te xto p u ro. e tc. O per a. Essas de f ici ê nc ias. h tm l.. A p r im e ir a c ons is te em es cr ev e r o tex to. e m q ue os no mes dos a rq u ivo s t in ha m no m áxi mo 8 ca rac te res e as su as e xte nsõ es n ão p od iam te r ma is d e 3 ca rac te r es.Guia Prático de HTML – Prof. A d i f er en ça aq u i é q ue o tex to que o us uá ri o es tá e d it an d o e vis ua l iz an do não é o t ext o p uro. Po r isso de ve mos usa r a ext ensão . h tm.Devemos usar a extensão . E m se g ui da . q ue no p assad o o br i ga ra m a usa r a ex te nsão .h tm l já fo ra m e lim i na das. h tm (pouco provável). O t exto ent r e as t ags <b od y> . 3.h tm a i nd a é u t il i za da. h tm l.. O tex to e ntr e <b> . < /b> f i ca rá c om o est i lo Ne g ri to (Bold) 3. Tiago Daniel de Souza http://www.6 . usa n do as in st ru çõe s d a l i n gu ag em .4 ... < /title> é o t ít u lo de se u do cu me nt o. v e r if i qu e qu an to ao d ir e tór io se es tá co r re to. a não se r q ue ex ist a u ma b oa ra zão pa ra voc ê esta r u t i li za n do .O Que Você Vê É O Que Você Tem ). Mo z il la. < /bod y> s ão as i nfo r maçõ es que ser ão e xi b i das na p ág i na..5 . u sa-se o pr oc essa do r d e t ext o pa ra p r od u z ir o t ext o fo r ma tad o.html? O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nsão . A o ut ra ma ne i ra é usa r u m e d it or d e text os WY SIWY G ( What You See Is What You Get . h tm em v e z d e . mas a e xte nsão . -7- . C on f ir a t am bé m em s ua bar r a de e nd e re ços do na v ega do r.FAQ (Perguntas Freqüentes) De p o is q ue eu ed ite i m eu a rq u ivo H TM L. o AbiWord e o OpenOffice Writer são W YSIW YG e os doc u me nt os q ue eles g e ra m ut i l iz am L ing ua g ens d e m a rcaç ão . O t í tu lo se rá e xi b i do na l e ge n da d o na v ega do r. . Po r q uê? ! Ve r i fi q ue se vo cê sa lv ou o a rq ui v o co m o n om e c or reto e q ue s ua ex te nsão se ja . o qu e v oc ê v ê é o qu e vo cê te m. A pesa r d a s i gla se r c om p r id a. co mo o I nte r net Ex p lo re r.htm ou . pa r tic u la rm en te r ec om en do o F i re fox e o In te rne t Ex pl or er.tiagosouza. O s e d ito r es c om o o Word . mas s im o t exto já f o rma ta do g r af i cament e. Vo cê p ro vav e lm en te já uso u e d it or es desse t ip o. 3.DO S e d o W ind ows 1 6 b its . o c on ce it o é s im p les: esse t i po d e p ro g ram a é co mp ost o po r u m e d ito r d e t ext o qu e t am b ém é u m pr oc essa do r de te xtos fo r mata dos.Editores "Puros" versus WYSIWYG Ex is te m duas fo r mas d e s e cr ia r u m te xto fo r mata do at ra vés d e lin g ua ge ns d e m a rca ção. Est e f ato é uma he ra nç a dos t e mp os (préhistóricos no que diz respeito à Internet) d o M S..com ----------------------------------------------------------------------------------------------------------- O te xto ent r e as ta gs < title > . o u s ej a.

A lis ta se g ui nt e i n d ic a a l g um as d e suas c ara ct er íst i cas : • • A s "t ags de m ar ca ção" d o HTML são usa das p a ra d ef i nir os e le men tos. A 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. 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. O s doc u men tos HTML sã o s im p les a rq u ivos de te xto q ue co ntê m "tags de marcação" . D es te m odo.1 . Tiago Daniel de Souza http://www. c on teú do e ta g d e fe c ha me nto . 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. vo cê es ta rá a d qu i rin d o bo ns m o dos e qu ase não te rá tra ba l ho de c on ve r te r su as pá g i nas HTM L pa ra X HTML. c om pos ta de ta g d e ab e rtura. 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. 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. A o co nt rá r io d o q u e aco nte ce em HTM L.com ----------------------------------------------------------------------------------------------------------- P o rq ue u tiliz am os ta gs c o m le tras m inú sc u la s?! E m HTM L os nom es das tag s e el e me ntos po de m se r es cr it os ta nto com l et ras m a iús cu las q ua nto com le tr as mi n ús cu las. 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. 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.Elementos U m e le men to é um a es tr ut u ra se mâ nt ica. 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.Guia Prático de HTML – Prof. 4. 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. v ai no tar q u e os m ais a nt i gos ge ra lm e nte ut i liz am le tr as m a iús cu las p ara es c rev e r os no mes d as ta gs. 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) . ELEMENTOS E ATRIBUTOS 4. 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. • • • Vo cê se lem b ra de nosso p ri me i ro ex e mp lo m ost ra do ? ! <html> <head> <title> Título da Página </title> </head> <body> Esta é minha primeira página. m as é mais r est ri ta d o q ue o HTM L (“rouba” algumas das liberdades que o HTML oferece) . <b>Este texto está em negrito</b> </body> </html> -8- . t an to q ue <B> é a m es ma co isa q u e <b>. Por est e mo ti vo é e xt re ma men te r e com en dáv e l qu e s e e sc re va to das as e ti q u etas com le tra s m inú sc u las. e as ta gs <b> e <B> não re p resen ta m o mes mo e le men to.tiagosouza.

Um a ta g de f ec ha m en to se di fe r enc ia de uma ta g de ab e rt u ra ape nas po r uma b a rr a ( / ) an tes do n o me do e le m en to (ex. Ao j un ta rm os o at ri b uto bo rde r (que significa borda) co m o val o r -9- . l o go a pós o n om e do e le me n to. q u e de f ine u m e le me nt o d e um a t ab el a. <p>) e d ev e se r co lo cad a i me d iata me nt e ante s do in íc io d o cont eú do do el e me nto.2 – Atributos das Tags T a g é um c ó di go usad o pa ra ma rc ar o i níc io e. <html> <body bgcolor="red"> Esta é a minha primeira página da web. e u m s in a l d e m a io r ( > ) (ex. <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 pós i to da ta g <b od y> é d e f in i r o c o nte ú do p r i n ci pa l. o fim d e u m e le men to HTML.Guia Prático de HTML – Prof. 4. No ex em pl o se g u in te ad i c io ne i o a tr i bu to bg c o lo r (que significa "background color". O s a tr i bu tos HTM L de ve m s e r co locad os se mp re n a ta g d e a be rtu ra. Um a t ag d e a b er tur a é re p rese nt ada po r s in a l d e m e no r ( < ). Tiago Daniel de Souza http://www. co mo ex post o a c im a. ta gs de ab e rt u ra e d e f e cha me nto. ou cor de fundo) pa ra i nd i ca r mos qu e q ue r emos qu e a pá g ina f iq ue com u ma c or v e rm e lha em s eu p lano de fu n do. o nde f or r e que r i do.com ----------------------------------------------------------------------------------------------------------- Es ta pa r te a ba ixo é um e le me nto HTM L: <b>Este texto está em negrito</b> Re pa r e a l gu ns as pe ctos do có d ig o ac i ma : • • • Es te e le men to in ic ia c om a t ag : <b > O co n te údo do e le m en to é es te : Es te tex to es tá em ne g rito O el em en to te rm in a co m a ta g f in al : </ b > O p ro pós ito da ta g <b> é co lo ca r o con teú d o d o e lem e nto HTM L e m n e gr i to (bold) Um e x emp lo m a is co m p le xo Es te ex em pl o a bai xo ta m bé m é um e le me nto do HTML (mais complexo) : <body> Esta é minha primeira página. </p>) e d ev e se r co lo ca da i m e dia ta men te ap ós o f im do c on te ú do d o e l em en to. p r e ce d i do d e u m es pa ç o e é com p osto d e u m n om e d e a trib uto. u m s ina l d e igu a l ( = ) e u m va lo r de a tribu to. <b>Este texto está em negrito</b> </body> </html> Va mos cons i de ra r a go ra a ta g < tab le>.tiagosouza. u m no me d e e lem ento HT ML. c er ca do po r a sp as d upla s ( " ) ou s i m pl es ( ‘ ) A ta g <bod y> de f ine o co rpo ( body ) de um a pá gi na HT ML. o co r po d o d o cu me nto. H á. O s Atribu to s se r ve m p a ra d e fi n ir u ma pro pr i e da de de u m e le men to HTM L.

mas à m e di da q ue vo cê f o r p rat i can d o v a i cons tata r q ue t u do é f ác i l e ló g i co. E v ic e-ve rsa : a l gum as ta gs p o de m co nt e r som en te u m t i po d e a tr i bu to. Tiago Daniel de Souza http://www. I sto po de p a re ce r um po u co co nf uso.com ----------------------------------------------------------------------------------------------------------- a p rese nt ado a se gu i r.Atributos podem ser aplicados à maioria das tags Vo cê no rma l me nte usa rá a tr i b utos co m m ai s fr e qü ên cia e m a l gum as t ags. e s em pre co lo q ue os v a lor es e ntr e as pas.Guia Prático de HTML – Prof.2. É p ro i bi do co loc ar a tr i bu tos nas ta gs de f e cha me nto. </td> </tr> </table> </body> </html> Já no exe mp l o a ba ixo es ta mos diz e nd o ao na ve ga do r pa ra des en ha r uma l i nh a d e c on to rno c om es p ess ur a 2 ( border="2" ) <html> <body> <table border="2"> <tr> <td> Esta é a minha segunda tabela. 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. a ta g br q u e é u m c om an do pa ra pu la r de l i nha e não p re c isa d e ne nh u ma i nfo r ma ção a d ic io na l.tiagosouza. 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. b em co mo vai ve r i fi ca r as in úm er as p oss i bi l i dad es qu e os at r i bu tos o fe re ce m. 4. .10 - . com o por exe m p lo. ta is c om o a tag b od y e ra ra me nte u sa rá e m o ut ras. en q ua nto o ut ras po de m co nt e r vá ri os t i pos. 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. </td> </tr> </table> </body> </html> O s at r ib utos s em p re n am e="v alu e" e nt ra m em pa res n om e/ va lo r (name/value).1 . A l gu ns a tr i bu tos são e mp re ga dos em ta gs esp ec íf i cas en q ua nto ou tr os s er ve m p a ra v á rias ta gs. ta mb ém e x iste m m u it os at r ib u tos. 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. A ssi m co mo ex ist em m u it as ta gs.

<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 .11 - . < meta> .O Elemento <head> (cabeçalho do documento) O e le me nt o <h ea d> co nté m i n f or ma ção d e car ac te re ge ra l.3 . o val o r do at r ib u to co nt ém o p róp rio ca ra ct er e as pas. < title> . a se g un da t ag do p a r é a ta g d e f i m O tex to e ntr e o co m eço e o fi m da ta g é o co nt eú do do e le me nto .la de um j e ito m al uc o. Tiago Daniel de Souza http://www.com ----------------------------------------------------------------------------------------------------------- 4. s ob r e o co nt eú do do d oc um ent o e so b re a f o rma como e le de ve se r a p resen ta do. p o is o máx i mo q ue p o de a con te ce r é o se u nav e ga do r int e rp re ta r su a pá gi na d e fo r ma di f e re nte d o es pe ra do e des en há. ass im : a lt ='E le disse : " Nã o !" ' 4. Num a s it ua ção dess as.1. de ve mos usa r a pós tro fos (que aqui funcionam como aspas simples) pa ra co lo ca r e m to rn o d o v alo r do at r i bu to.Devemos usar aspas ou plicas/apóstrofos (escrevemos "texto" ou 'texto')? A ca ba mos d e v er q ue o s val or es dos at r i bu tos d ev em se r se mp r e co loc ad os e nt r e as pas. O pa d rão HTM L estab e le ce qu e só u m peq u en o nú me ro de e lem e ntos pod e a pa re ce r d e nt ro do ca b eça l ho. 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.4 – Notas Rápidas • A s Ta gs HTM L são ut i l iz ada s pa ra ma rca r e l em en tos HTM L.i nf or ma ção ( ou meta-dados ) s ig n i f ica da dos q u e d esc rev e m ou tro s d ad os ou in fo r ma ções. < link>. E las estão c e rca das pe los do is ca ra cte re s < (menor que) e > (maior que) A s ta gs no rm a lm en te a pa re ce m e m par es. .A Informação Contida no Elemento <head> O s el em en tos co nt i dos d en tr o do e le me nto <h ea d> n ão s ão exi b i dos n a te la d o na ve gad o r.Guia Prático de HTML – Prof. o u s eja . HTM L nã o é sensitive . E m al g uns c asos. P od e mos di z e r qu e o t e rmo m eta.1 . 5. • • • • • 5. E les são : <base >. No rm al m en te u t il i za mos as as pas no r mais ( " ). <s t y le> e <s c rip t> .tiagosouza.por e xe mp lo >b> i nv és d e <b> . O CABEÇALHO DE UM DOCUMENTO HTML 5. mas os a pós tro fos ( ' ) ta m bém s ão p erm i t ido s. ta mb é m d es i gn ada p o r me ta.1 .in fo r ma ção.não se d es esp e re.

A declaração DOCTYPE A d ec la ração DO CTYPE s er ve p a ra i n d ica r o DT D a us ar pa ra val i da r n a p á gi na.Palavras-chave para os motores de pesquisa D u ra nt e a lg u ns anos a u ti l iz ação ma is f req ü en te da i n fo r maçã o f o r ne ci da p e lo e l em en to < me ta> fo i a c ri ação de í n d ices pa ra si tes de bus ca. o nav eg ad or po d e re ag i r de dua s f or mas : • • A p re se nta r o te xto por q ue el e se e nco nt ra d e nt ro de u m e l em ent o <p > Es co nd e o t ext o po r qu e e le pe rte n ce ao cab e ça lho .tiagosouza. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html> 5.2 .2.com ----------------------------------------------------------------------------------------------------------- A co nst ru ção se r ia o se g u in te : <head> <p>Aqui temos algum texto</p> </head> Nes ta si tu aç ão ac i ma. h á pa rt es q u e . e os d e ma io r s uc esso i g no ram e ste e lem e nto.Elementos de cabeçalho ( <head> ) Elemento <head> <title> <base> <link> <meta> Descrição Contém informação importante a respeito do documento mas que não deve ser apresentada no corpo da página Define o título da página Define um URL base comum para todas as ligações relativas da página Faz referência a um recurso externo e estabelece a ligação com ele Dá informação sobre aquilo que o documento contém 5. 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.2 . No e n ta nto. A p ar en te me nt e. U ma das r a zões q ue l e va ram à c r ia ção d a l i n guag e m XHTML f o i a ne cess i da de d e a ca ba r co m es tas si tua ções de um a v ez po r to das.12 - . S e v oc ê col oc ar um el e me nto não a uto r i zado. Qua n do ut i l iza da. co mo <h2 > o u <p>. de ve a pa re ce r lo go n o i níc io da pá gi na . S ua f i na l i dad e é fo rn ec er i n fo r maçã o q u e des c re ve o do cum e nto. 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. 5. Tiago Daniel de Souza http://www. de nt ro d o c ab eç al ho. as p esso as qu e são res po nsá ve is pe la con c ep ção dos b r owse rs a cha m q ue est e gên e ro de e r ros é ac e itá ve l.3 . 5.Guia Prático de HTML – Prof.O elemento <meta> O e le me nto < me ta> c on té m in fo r maçã o de ca ra cte r e g e ra l (meta-informação ) so b re o do cu me nt o e d e ve s e r c o lo ca do d e nt ro do e l em en to <h ea d>.1.1 .1. At ual men te so me nt e a lg u ns b usc ad o res ai n da usa m esta i n fo rma ção p ar a ind ex ar p ág in as. a nt es d o e l em en to <h tm l> Declaração Descrição <!DOCTYPE> Define o tipo de documento.

co mo no exe m p lo se gui n te : <meta name="security" content="low"> Nu ma s i tua ção des tas de ve mos i n te r pr etar o e l em ent o m e ta co mo con ten d o i n fo r maçã o q u e é espe c íf i ca do w e bsi te. JavaScript. XML.2 .13 - . 5. A qu i mo st ra rem os a pe nas os a tr i bu tos qu e i nt e rf ere m n as co res da s ua p á gi na : • • • • • b gc o lo r: de f in e a co r d e f u nd o d e um docu m en to te x t: a co r d o tex to link : a co r d os l i nks a link: a c or dos l in ks at i vos at ua lm en te (a página que você está visitando) v link : co r d os l i n ks já v is it ado s . XSLT. XML. 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. 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. CSS. o e l em en to b od y en g lo ba o c or po do s eu d o cu me nto H TML.Valores desconhecidos para o atributo name do elemento <meta> A l g um as ve z es en co nt ra mos s itu açõ es e m q u e o a tr ib uto na m e d o e le men to < me ta> co nt ém um v a lor des con h ec i do. CSS. XSLT. 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>. mas pro va ve lm en te é i rr el eva nt e p ara os v is ita ntes . SVG"> C o mo ac aba mos de ver . E le p oss ui m u it os a tr ib u tos q ue p ossi b i li tam m o di f ic ar a a pa rê nc ia d a s ua pág i na.com ----------------------------------------------------------------------------------------------------------- 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. 6. MODIFICANDO O CORPO DO DOCUMENTO C o mo di to a nt er io rm e nte . c om o po r ex em p lo. co mo c o r de f un d o o u das let ras. XHTML. 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. No f ra g men to d e có di g o s eg u in te . 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 . Esse s at r i but os t am bé m po de m se r u t i li za dos j u nto com o at r ib uto td. A l g uns s ist em as d e b us ca ( não muitos ) usa m a i n fo r mação co nt id a n os e l em en to m et a pa ra i n d exa r as pá g i nas.2. 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. Tiago Daniel de Souza http://www. 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. É 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. DHTML.tiagosouza.Guia Prático de HTML – Prof. 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. E m cons e qü ê nc ia d isso. SVG"> e referências técnicas de HTML. I n f el i zm en te .

1 .Parágrafos O s pa rá g raf os são de fi n i dos c om a ta g < p> <p>Este é um parágrafo</p> <p>Este é um outro parágrafo</p> No có d igo a ci ma.tiagosouza. 7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML 7. o HTM L au toma ti ca me nte so lta uma li nh a em b r an co e ntr e u m t í tu lo e o ut ro.14 - . o HTM L a uto ma ti ca me nte a c res ce nta u ma li n ha em b ra nc o a nt es e d ep o is d e u m p ar ág ra fo. Isso po de ser ob t id o fa ci l me nt e e m HTM L. o ra à es qu e rd a.1 . P or exe m plo. se n do qu e a de va lo r 1 é a q ue p oss ui a ma io r fon te e a d e v alo r 6 po ssu i a m e no r fo nte . usan do o se g ui nt e c ó di go : <h1> <h2> <h3> <h4> <h5> <h6> Título Título Título Título Título Título 1 2 3 4 5 6 </h1> </h2> </h3> </h4> </h5> </h6> No c ód i go a ci ma. 7. </body> </html> Essa é u ma p á g in a HTM L o n de o f u n do s erá p r e to. E le s p ossu em se is val or es d i fe re nt es.Guia Prático de HTML – Prof.2 . 7. li n ks e m v e rm e lho e l i nks a ti vos e m b ra nco. com l e tras c in za s.2. Ve ja a ta be la ab a ixo : ELE MEN TO <p align=”left”> DES CRI ÇÃO Alinha o texto à esquerda . 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. exata m en te co mo n o c aso d o a t ri b u to c olo r us ado no e l em en to fo n t. no c e nt ro ou e nt ão oc up ando u ni fo r me me nte o es pa ço da p á gi na (texto justificado) . Po r ex em p lo: <html> <head> <title>Isso é uma confusão!</title></head> <body bgcolor="black" text="gray" link="red" alink="white"> Isso é uma página em html. Essas são as d e fi n iç ões glo ba is d e co r p ar a se u d oc ume nt o. Tiago Daniel de Souza http://www.Cabeçalhos O s ca be ça lh os (também chamados de Headings) s er v em pa ra c r ia r t ít u los d i f er en c ia r as seç ões d a s ua pá g ina .com ----------------------------------------------------------------------------------------------------------- O s a r gu men tos são o n o me ou o n úm er o d e u ma cor .Alinhamentos de parágrafo Vo cê já d ev e te r v isto q u e em cer tos d oc ume nt os o text o a pa re ce o ra a l i nha do à d ir ei ta.

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 . " E e u d i go m a is: se vo cê c ol oca o dis co n um t oc a. não a d ian ta di ze r ao s eu na ve ga do r pr a p or um li n k e m algu ma pa rt e d o se u te xto.Guia Prático de HTML – Prof. mas não é. velocidade. por ex em p lo. 7. No HTML. O s at r i bu tos. q ue é ma is r e com en dad a. Ve ja mos o ex em p lo : <div align="center"> <p> Parágrafo 1 Parágrafo 1 Parágrafo 1 </p> <p> Parágrafo 2 Parágrafo 2 Parágrafo 2 </p> <p> Parágrafo 3 Parágrafo 3 Parágrafo 3 </p> </div> . i tál i co. q ue c ria u ma " d iv is ão " n o d o cu me nto n a qu al alg u ns a tr i b ut os são p rese rv a dos. co m m u itas o pç ões pa ra v oc ê ex i bi r se u te xto.lo em d u as o u n o má xi mo t rês v e lo ci da des.15 - . as pa la v ras qu e se g ue m o e l em en to.a cor do disco. Tiago Daniel de Souza http://www. C o nf uso ? ! P ode p a re ce r um p ou co co nf uso. " Um disco de banda punk pode ter diversas propriedades ou 'atributos' .Criando uma divisão Ex is te m mo me ntos em q u e que r emos q ue v ár ios pa rá g raf os p oss uam um m es mo va lo r d e a tr i bu to . C o mo d isse a To ya.3 . A lé m d e le. ga ran to qu e e les po de rão g i ra r e m mu i tas o ut ras ve lo ci da des . tudo isso são atributos.di scos.tiagosouza. é p re c iso di z e r ao na ve ga do r. Por e xe mp lo. s ub l i nha do. 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. A o i nv és de es c re ve rm os a lign= "jus tify " a c ad a a be rt u ra de no vo pa rá gr a fo. etc. tamanho. po dem os us ar o e l em en to div. 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. v oc ê po d e o uv i. 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. Às ve zes d á p ra o uv i r a o co ntr á rio . C o mo v ocê v i u. Mas se vo cê ar re mes sar seu s d i scos do Fo fão. 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">.centralizado. 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. o va lo r d o at ri b uto a lig n (que significa alinhamento em inglês) é j us tif y (justificado) . Re su m in do. 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") .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 > não en co nt ra-s e a pe nas o el em en to < p>. 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 exemplo . A ssi m é o HTM L. ex ist e o t exto a lign= "a lin ha me n to". e tc.

Com est e com an do você fa z co m q u e oco r ra u ma q u e bra de li n ha.Guia Prático de HTML – Prof. o q ue p od e a con te ce r são os t extos e as jane las qu e po de m se r re d i me nsi ona dos. Po r esse mo ti vo não se r emos cap a zes de co nt ro la r n em o nú me ro de l i nhas n e m os loc ai s e m que a con te ce m as mu dan ças d e l in ha. po r que os res u lta dos não se rão a qu eles q ue v ocê es p era va. out ros m e no res. Not e qu e p a ra o e lem e nto <br> não exi st e o co ma n do < /br>.com ----------------------------------------------------------------------------------------------------------- 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. Nu nca te nte for m ata r o te xto i nse rin d o es pa ços ou l i n has va zi as. 2 ) As d if ere n ças n os t ama n hos d as jan e las d os na ve ga do res fa ze m co m q ue o n ú me ro de c ar ac te res q u e c ab em n u ma l in ha va ri e mu it o.5 – Comentários A ta g de c om en tá ri o é u t il i za da par a i nse r i r co me ntár ios no c ó di go font e HTM L. o n de v oc ê po si c io na r a ta g. </i> e < /u> . p o is do co nt rá r io esse s co man d os a gi rão a té o f im do d ocu m en to. To do ti po de c om en tá ri o é i g nor ado pe lo na ve ga do r. e la não p oss ui tag f i na l. 7.tiagosouza. C o mp l ic ado? ! E ntão va mos lá. e le não se rá ex ib i do na t el a.16 - . tu d o isso in f l ui na qu est ão da ex i bi ção d a pá g i na.6 – Informações Úteis 1 ) Q ua nd o v oc ê esc r ev e r u m text o em HTML . isto é. e nã o an tes d o p ar ên teses f ina l. < /b r>. Tiago Daniel de Souza http://www. Ve ja o ex em p lo a ba ixo da u ti l i zaç ão d a ta g <b r> <p>Este <br> é um pará<br>grafo com quebra de linha</p> A ta g <b r> é uma e ti q u eta v az ia. mas sim n um po nt o d o tex to.Este é o comentário --> Not e q ue vo cê pr ec isa de u m po nto de exc la ma ção de po is do pa rê nt eses d e a be rt u ra. e a l gu ns ou t ros at uam som en te n o p o nto o nd e e les a pa rec e m. ist o é.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. 7. q u e po de rá aj u dá. 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 .4 – Quebras de Linha A ta g <b r> é u t il i zad a q uan do v o cê q ue r t e rm i na r u ma l i nha . A l g um as pess oas poss ue m c om p ut ad or es co m r eso l uçõ es ma io res. . <!-. a q u e bra de l i n ha nã o ag e nu ma reg i ão d e t ext o d el i mitad a. est eja cie nt e d e q ue o t exto qu e v oc ê está v is ua l iz an do nã o s erá ex i bi do igu al m en te em tod os os na ve ga do res . 7. mas não q u er c om eça r um no vo p ará g ra fo. Já o c om an do de q ue b ra d e l in ha. m a is uma v e z exp l i ca n do de um a o ut ra fo rma : c oma n dos co mo <b>. < i> e < u> a gem so b re um a re g ião d o t ext o e pre c isa m se r f e cha dos c om s eus r es pe ct i vos < /b>.

Tiago Daniel de Souza http://www. 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 . 7. <b>negrito</b>. as t ec las Tab e E n te r e qu i va le m a u m es pa ço.tiagosouza. 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. 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. quebra de linha uma linha horizontal um comentário 8. <u>sublinhado</u> e tipo <code>código de computador</code> </body> </html> 8. m as isso es tá er ra do. o r esu lt ado é o mes mo d e es c rev e r um ú n ico es pa ço. co mo p o r ex em p lo. de 1 a 6 parágrafo linhas em branco. 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>itálico</i>. e o e le men to <b r> n ão de ve se r usa do. pa ra c ria r l i stas. 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. ut i li ze a ta g <br>. s ub l i nha do.com ----------------------------------------------------------------------------------------------------------- 3 ) O HTM L q u an do enc on tr a dois o u ma is es pa ços se gui dos. 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.7 – Lista de elementos básicos do HTML T AG <html> <body> <h1> até <h6> <p> <br> <hr> <!--> DES CRI ÇÃO Define Define Define Define Insere Insere Define um documento HTML o conteúdo principal. FORMATAÇÃO DE TEXTO A l i n gu ag em HTM L de f in e vá ri os el em en tos pa ra s e for mata r um t exto . p o r ex em p lo. 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...1 – Elementos para formatação de texto TAG <b> <big> <i> <small> <strong> DESCRIÇÃO Define Define Define Define Define seu seu seu seu seu texto texto texto texto texto em negrito grande em itálico pequeno forte . 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. E m HTML. 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. it ál i co.Guia Prático de HTML – Prof. 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. < 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.17 - . <em>enfatizado</em>. o corpo do documento títulos. v e rá q u e e la não passa rá n o tes te de v al i da ção. esc re ve r e m ne gr i to. 6 ) Os e le me nt os < p> e <h 1> . 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. e le tr ata -os com o se fosse um ún i co es pa ço.

Utilize <pré> ao invés 8. No ex em p lo ac im a.org">CMI Brasil</a> C o mo você d ev e t er p e rc eb i do.tiagosouza. LIGAÇÕES DE HIPERTEXTO ("LINKS") Essa é uma das se ções ma is i mp o rta nt es d es ta a post ila.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. No jar g ão da i nte r ne t. Tiago Daniel de Souza http://www. po is af i na l esta mos f a lan do de h i p er tex to. Utilize <pre> ao invés Desuso.Guia Prático de HTML – Prof.18 - . Se vo cê c l ic ar so br e esse tex to. Utilize <pre> ao invés Desuso. m id ia i nd ep e n de nte. Utilize <del> ao invés Desuso. voc ê q u e r l i ga r ( l i n k) pa r te d a sua pá gi na co m out ras. 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. Utilize <styles> ao invés 8.2 – Elementos para o "output de código de computador" TAG <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp> DESCRIÇÃO Define códigos de texto Define o texto com uma fonte especial determinada pelo navegador Define código de computador de amostra Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador Define variáveis Define o texto pré-formatado Desuso. Utilize <del> ao invés Desuso. I sso é fe ito d e mo do m u it o s i m pl es com o e l em en to a. Q ue re mos q ue um a pá g ina HTML possa fa ze r re fe rê nci a a o ut ras pá g inas ht ml ou pa ra qu al q ue r o ut ro ti po de a r qu i vo qu e se en con t re e m ou tro s l u ga res d a w e b. c omo s egu e : <a href="http://www. or g . o at r i bu d o h ref (Hipertext Reference / Referência de Hipertexto) i n di ca o e n de re ço da p ág i na q ue vo cê q u e r "l i nka r" ( l i ga r) ao se u do c ume nt o.midiaindependente. 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.3 – Elementos para citações e listas de definições TAG <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> DESCRIÇÃO Define Define Define Define Define Define Define Define uma abreviação uma sigla um elemento de endereço a direção do texto uma longa citação uma pequena citação a citação um termo de citação 9.

ao i nv és d e s im p lesm e nte esc re ve r o t ít u lo da se ção: <a name="Hipertexto">Hipertexto</a> 2 . por e xe mp lo. o nd e h ttp: // é o p ro to co lo . b lue . p or e xe mp lo. h tt p :/ / \-.www.co m. Po r exe m pl o. 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. Isso é f e ito da seg u i nt e fo rm a: 1 .-.-.com ----------------------------------------------------------------------------------------------------------- O s e n de re ços s ão es cr i tos na for m a d e URL (Uniform Resource Locators) . O va lo r d e na me po de s er q ua l qu er u m (nesse caso eu coloquei "Hipertexto").1 . m id ia i nd ep e n de nte.tiagosouza. br / in dex.b r e as pasta s são os d i ret ór ios d en tr o de sse co m pu ta dor o n de es tão os a r qu iv os. Os ar q u ivos do t i po in d ex .Links internos L ink s in tern os s ão a q ue les q ue l i ga m um a se ção d e um a pág i na co m u ma o ut ra se ção d a mes ma p ág i na.co m. h tt p :/ /ww w. 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 . ht m l. E m h tm l.2 906 69 . co m. br . ni n gu em . 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 .h tm l se m p re são pr oc u rados pe lo nav e ga do r qu an do vo cê so l ic i ta a pe nas o n om e d o si te o u u ma pas ta d e um c omp u ta do r.Guia Prático de HTML – Prof. <a href="#Hipertexto">Vá para a seção hipertexto</a> O a tr i bu to n am e s e rve a pe nas pa ra da r u m n o me p ara u ma pos iç ão de u ma p á gi na ht ml . se e u qu ise r f az er um a re fe r ênc ia p a ra a s eção H i pe rt ex to de ssa n ossa ap ost i la.m i d ia in d epe n de nt e. p t.sh tm l L e mb r e-se ta m bém q ue q ua n do v ocê ac essa o en d er eç o h tt p :/ /ww w. basta q ue e u p ri m e iro de f in a u m no me p a ra a se ção H i pe rt ex to e e nt ão a d ic io ne u m l in k pr a e la.b l u e \-.. ex ist em t rês f o rmas poss í ve is d e se fa ze r l in ks : os link s inte rno s. 2 0 04 e 0 9 s ão p as tas (uma fica dentro da outra) e 29 0 6 6 9 . es tá na verd ad e ve nd o o a r q uiv o h tt p :/ /ww w.sh tm l é o nom e d o a rqu iv o .sh tm l.19 - .0 9 \. 9. Tiago Daniel de Souza http://www.2 00 4 \. os link s loc a is (ou relativos) e os link s ex te rno s .A di c io no o li n k p ra ess a s eção com o se g u in te cód i go .Vou at é o i n íc io d a s eçã o H i pe r tex to e ad i c io no o se g u in te cód i go . ni n gu em . 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. or g / pt/ b l ue/2 0 0 4/ 09 /2 90 6 6 9. n in g ue m.o rg \ --. 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. U ma UR L de um a rt i go do s it e da CMI Br as il é.pt \-..

m as ap e nas : <a href="links..no nosso caso. 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. qu e pe r mi t e q u e o l i nk se ja a be rt o n u ma ou tra jan el a do se u na ve ga do r. Tiago Daniel de Souza http://www. se no m e u do cum e nto h tml e u q u ise r f a ze r u m l i n k p a ra o a rqu i vo link s .po is do c on t rár io se u n av e ga dor t en ta rá a bri . 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. 9. c omo po r ex em p lo : <a href="http://pt.3 .4 .html">Acesse os links!</a> A va nta gem de voc ê usa r l i nks r el at iv os é qu e vo cê po d e mo ve r to do o se u s it e pa ra um no vo end e re ço na in te r ne t e não pr ec isa r r ee d ita r to dos os l i nk s q u e ap on tam pa ra pá gi na s do se u p ró p r io si te .wikipedia. P or ex em p lo. 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=". L ink s lo cais nã o c ont ém o ht tp: // no i n íc io d o e n de re ço./links. #Hipertexto .com ----------------------------------------------------------------------------------------------------------- d o nom e da s ua s eção .Links externos L ink s e x te rno s são a q ue les q u e po dem a pon ta r p a ra q ual q u er ar q ui vo d i sp on í ve l n a i nt er ne t.h tm l q ue es tá n a mes ma p asta d o m eu doc u me nto. 9.5 – Elementos para fazer ligações ELE MEN TO <a> DES CRI ÇÃO Define uma âncora ou uma ligação de hipertexto .tiagosouza.Alvo (target) U m a t ri b uto in te ressan te pa ra o e le me nto <a h ref> é o ta rge t.2 . s im p les men te es co l ha q ua l qu er no me com o ar gu m en to. <a href="http://pt.lo co mo um l in k loc al .org">Acesse a Wikipedia!</a> O s link s e x terno s p r ec isa m ne cess ar ia me nt e co nter o pr e fixo h tt p: // e o e n de re ço co m pl eto do a rq u iv o.Links locais ou relativos L ink s lo cais s ão a que l es q ue re f er en c iam u m a r qu i vo q ue es tej a n o m esm o c om p uta dor q u e a sua pá g i na.Guia Prático de HTML – Prof.wikipedia.20 - . não p r ec iso d igi ta l o e nd er e ço co m ple to. 9. 9.org" target="_blank">Acesse a Wikipedia!</a> O a r g um ent o do a tr i bu to ta rge t é o n om e d a ja ne la do n av eg ado r q ue a b r ir á o l in k.html">Acesse os links!</a> Ess e t ip o d e a r gu men to pa ra o h ref t amb é m é cham a do d e link s re la tiv os.

i m ag ens. e tc.2 .Listas Ordenadas U ma lis ta o rde na da co nté m v ár ios ite ns n u me ra dos e é c r ia da co m o e l em en to < o l> ("ordered list") . Tiago Daniel de Souza http://www. qu eb ras d e l i n ha. i ma ge ns. O exe m pl o se g u in te mos tra um a li sta s i mp les : <ul> <li>Rum</li> <li>Bagaço</li> </ul> Es te é o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor: • • Ru m Bag aço D e nt ro d e u ma li sta n ão or d ena da p od emos c olo ca r p ará g ra fos. 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.3 – Listas de Definições U ma lista d e d ef in içõ e s não é c o nst it u ída p or u ma s é ri e de it ens . Os it ens da li sta de f in em -se c om o e lem e nto < li> ("list item") . ou t ras l is tas. os vá r ios it ens são cr i ad os co m o el e ment o < li> ("list item"). R um 2 . cr iar lis tas de 10. u ti l i zam os o e l em e nto <u l> ("unordered list"). mas s im p o r vá r ios t e rmos a com p an ha dos d e d esc r içõ es d e s eus s ig n if i ca dos. q ueb r as d e l inh a. 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. P ar a cr ia r u ma lis ta n ão or de na da. 10.com ----------------------------------------------------------------------------------------------------------- 10.Guia Prático de HTML – Prof.21 - .tiagosouza.1 . . lis tas o rd e na das e lis ta s não ord ena da s . <ol> <li>Rum</li> <li>Bagaço</li> </ol> Es te é o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor: 1 . De nt ro d esse e l em en to.Listas Não Ordenadas U ma lis ta n ão o rd ena da co ntém vá r ios ite ns mar cad os to dos c om o mesm o s ím bo lo (normalmente um círculo pequeno ou um quadrado pequeno). o ut ras l is tas. 10. e tc.

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

A s lis tas de d ef i n içõ es sã o c r ia das co m o el e me nto <d l> ("definition list") O n om e de ca da te r mo f i ca d en t ro d e u m e lem e nto <d t> ("definition term") e a s ua d esc r ição f ica no e l em en to < dd> ("definition description")
<dl> <dt>Rum</dt> <dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd> <dt>Bagaço</dt> <dd>Bebida com elevado teor alcoólico. A sabedoria popular atribui-lhe fortes propriedades terapêuticas.</dd> </dl>

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.

10.4 – Elementos para Listas
ELE MEN TO
<ol> <ul> <li> <dl> <dt> <dd> <dir> <menu>

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

- 22 -

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

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

11.1 - Tamanho de exibição da imagem
O s at r i bu tos w id th e h e ig ht m e re ce m u m po u co m a is de a te nção . Co mo v i mos, sã o os at r i but os q ue de te r mi na m o ta ma nh o q ue a i ma ge m se rá e xi b i da. Exi st em d uas f o rma s d e s e fa z er isso, ut i liz and o o tam anh o e m pi xel s (tamanho absoluto) e e m va lo res r e lat i vos ao tam an ho d is po ní v e l da tela d o c om p uta dor , is to é, em po r ce ntag e m. U m p ix e l é a m en or u n i da de lu m i nosa da te la do se u co mp ut ado r q ue os p r og ra mas p od em ma ni p u lar , e i sso d ep en d e m ui to d a r eso lu ção da te la d o se u co mp ut ado r. Um p i xe l é u m q u ad ra d in ho l um i noso. At ua l me nt e as te las d e c om p uta dor te m uma r eso l uçã o d e 80 0 pi xe ls de comp ri me nto e 6 0 0 d e a ltu ra , às v ez es po de se r de 1 0 2 4 de co m pr i me nto e 76 8 na a l tu ra o u r eso l uçõ es a té m a ior es, de tal mo do qu e nossos o lh os j á não conse gue m d ist i n gu i r ent r e p i xe ls co nt íg u os. O ta ma nho das i mag e ns c om pu ta do r iza das tam b ém p od e se r me d id o e m p i xe ls, q ue é o tam anh o qu e a im a ge m v ai o c upa r na t e la do s eu c om p utad o r q u an do el a f o r ex i b i da. Pa ra q ue vo cê d es cu b ra qu al é o ta ma nh o d a sua i m ag em, vo cê te rá qu e usa r a lg u m p ro g ra ma de e d iç ão de i mag e ns o u ent ão a b ri -l a d i re ta me nte n o se u nav e ga do r. Ex pe r im en te ir no m en u Ar q ui vo e d e po is e m A b r i r, no se u na ge vad o r, o u e nt ão di g ita r a lo ca li zaç ão da imag e m d i r eta me nte na ba rra de en der e ços. Quan d o a i mag e m f or ex i bi da , c l iq u e so b re e la co m o bo tão d i r e ito do se u mo use e e m se gu id a vá em Pr o pr i eda d es. U ma j an ela c om as i nf o rma çõe s d a im ag ens - inclusive seu tamanho - d e ver á a pa re ce r. D e poss e d ess es va lo res, b asta co lo ca r- los d en tr o d a do i m g. No e xe mp lo an te r io r, o nd e usa mos o c ó di go w id th="2 2 1 " h e igh t= "3 0 0", a i m ag em fo i ex i b ida co m 221 p i x e ls d e la rgu ra e 30 0 d e a ltu ra, c oi n ci d en tem e nte s end o se u ta ma nh o o r i gi na l. Po d er íam os te r esc r it o:
<img src="emma.jpg" width="22" height="30">

O u se ja, a i ma ge m fo i mo st ra da c om um t ama n ho me no r d o qu e o o ri g in al . Ta m bé m po de r ía mos usa r ta ma nh os ma io res qu e o r ig i nal... q u e ta l vo cê e xp er i me nta r a lgo com o wid th=" 2 2 10 " h e ig h t=" 30 0 0 "?! O s eg u ndo mo do de d et er m ina r o taman ho de exi b i ção d as i ma ge ns n o n av e ga dor c ons is te em ut i l iz ar po rc en ta gem . Po r ex em p lo :
<img src="emma.jpg" width="10%" height="10%">

Re su lta rá n u ma i ma ge m ex i bi da co m u m dé c im o ( 1 0% ) do es pa ço d is po nív e l d a te la do c om p uta dor . Nos do is m o dos d e d e te rm i na r o ta ma nho - em pixels e em porcentagem p o de mos es co lh er va lo res i n de pe n de nt es p a ra a a ltu ra e a lar g u ra, d e t al f o rma q ue a ima g em fi q u e d isto rc i da. Ol ha q u e e ng raça do :
<img src="emma.jpg" width="50" height="400">

- 23 -

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

11.2 - Texto alternativo
Ex is te m a in d a o ut ros a t ri b utos i n te r essan tes p a ra a ex i bi ção d e i m ag ens. Vo cê p o de i n cl ui r uma des cr i ção da i ma ge m p a ra q ue se , po r qu al q ue r raz ão, a l gu ém não co nsi ga v e r a im ag e m e la possa l er um a des cr i ção no espa ço v a zio . Essa des cr i ção ta m bé m a par ec er á q ua nd o vo cê p assa r o mo use p o r so b re a i ma ge m. Vo cê po de a d ic io na r um a p eq ue na des cr i ção d est a ma ne i ra :
<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">

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

11.3 - Borda da imagem
U ma bo r da (contorno) d a i ma gem po de s er a di c io nad a co m o at r ib u to b or d er :
<img src="emma.jpg" width="10%" height="10%" border="1"> <img src="emma.jpg" width="10%" height="10%" border="2"> <img src="emma.jpg" width="10%" height="10%" border="3">

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

11.4 - Alinhamento da imagem
É poss í ve l a in da co loc ar i ma ge ns e te xto u m do la do do o ut ro, de d i ve rsas f o rmas . V am os su po r a mais s i mp l es :
<img src="emma.jpg" width="3%" height="3%" border="1">

O tex to a pa re ce ao lad o d a i ma ge m. Ess e c ód i go po d e fun c io na r mu i to be m, m as às v e zes acon te ce d o t ext o a pa re ce r ab a ixo da im a ge m. Par a fa ze r o p os i ci onam ento da i m ag ens e d o t ext o cor re ta me nte, b ast a ut il iz a r o at r ibu to a lign, q u e f u nc io na d e mo do a ná lo go ao d o al i nham e nto de pa ra g ráf os:
<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">

O tex to va i a pa rec er à es qu erd a da i mag e m (o atributo right faz que a imagem fique à direita da tela) , m es mo t en d o esc r it o a pós o cód i go s ob r e a i m ag em. En q ua nto o t ext o pu der f i ca r ao la do da i mag e m, el e fic ar á. Q ua nd o e l e não ma is co u be r n esse esp aç o, el e c om eça rá a se r ex ibi d o a ba ixo da i m ag em, com o vo cê pod e ve r aq u i. Ut i l iza r o a l in ha me nto de ima ge ns é a me l ho r ma ne i ra de gar an t ir q ue e la a pa re ce rá n o lo ca l d ese ja do.

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

- 24 -

11. N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i na b ase ia. <body bgcolor="#000000"> <body bgcolor="rgb(0.se e m es tilo s CSS. Tiago Daniel de Souza http://www. N o ta: Ao u t i l iza r i m ag ens. use -as co m cu i da do. A u ti l i za ção do a tr i bu to bg c o lo r só se j ust i fi ca se p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n ão s up or tam CS S (veremos sobre CSS no fim da apostila). a ci n co pi xe ls de d i stâ nc ia de la.7. um c ó di go R GB e um nom e de co r (veja mais à frente o tópico sobre cores).1 . 11.Guia Prático de HTML – Prof.7 – Fundos de Página U ma co r ou u ma imag e m de fun d o b em es co lh i do po de m me lho ra r o as pe ct o d a pá gi na. 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.com ----------------------------------------------------------------------------------------------------------- O va lo r desse s a tr i b ut os d i z ao n av e ga dor q u al se rá o es pa ço em p ixe ls en t re a ima g em e q ual q ue r o b jet o: <img src="emma. Ta mb é m po dem os us ar um a i ma gem co mo pad r ão d e fu n do. O qu adr o se g u in te mos tra t rês f o rmas d e i n d ic ar a co r de f undo da pá g i na usa nd o um c ó di go de c or he xa dec i ma l. po r iss o. .6 – Elementos relacionados com imagens ELE MEN TO <img> <map> <área> DES CRI ÇÃO Insere uma imagem Define um mapeamento sobre a imagem ("image map") Define uma área clicável sobre um mapa de imagem 11.25 - .jpg" border="1"> width="3%" height="3%" border="1" align="left" hspace="5" O tex to vai a par ec e r à d ir ei ta d a ima g em. D e u pra no tar a di fer e nça ? ! Ut il i za n do t odos esses at r i bu tos par a a exi b i ção d e ima g ens v oc ê o b tém u m tex to b e m d ia gra ma do e bo nito de ser l i do.O atributo bgcolor do elemento <body> O e le me nto <b od y> p ossu i a tri b u tos q ue n os p er m it em es pec if i ca r as cor es d o t exto e a co r d e fu n do.tiagosouza. m as u ma m á es co lh a é ca paz d e c ausar d anos mu i to gr av es na l e g ib i l id ad e e n o asp ec to ge ra l da pá gi na.0. O at r i bu to b gc o lo r nos p er m it e e sco l he r a c o r de f und o da pá g in a.0)"> <body bgcolor="black"> As l i nh as a p res en ta das ma is a c ima usa m for mas d i f eren tes (mas todas válidas) par a d ar a c or p re ta ao f u n do d a pá g ina .

• • • • O s at r i bu tos b gc o lor. Na pr i me i ra li n ha ma is ac i ma. 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. 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. 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. 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). 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 . A u t i li za ção d es tes at r ib u tos só se j ust if i ca se pr ec is ar mos de man te r a co m pat i bili d ad e co m n av e ga dores a nt i gos q ue não su por ta m C SS . C e rt i f iq ue-se d e q ue a i ma ge m n ão é in côm o da e q ue nã o des vi a a at en ção d o te xto. Tiago Daniel de Souza http://www.26 - .se e m e s tilos CSS. N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i na b ase ia.jpg"> O va lo r do at r i bu to ba ck g rou nd é u ma UR L (site) qu e de f in e o lo cal on de s e e n con tr a a i ma ge m. 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) . Se vo cê p er ce be r al g um as f a l has apa re nt es.tiagosouza.com/imagem. O exe m pl o a ba ixo most ra be m com o se f az isso : <body background="imagem. po is e m caso af i rma ti vo. . 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 .2 .7. 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. nã o se es q ue ça d est es as pe ct os: • C e rt i f iq ue-se de q ue o tam an ho d a i mage m (em KBytes) não é m ui to g r an de . S e as d i me nsõ es da im a ge m f or e m in fe r io res às di m ens ões d a pá g ina.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. usa m f un d os q ue não a tra pa l ha m a v isu ali z ação do si t e.se n a ut i li za ção d e est i los C SS . po r f or ma a o cu pa r t od o o fu nd o d a pá g in a. O v al or des te a tr i b uto i n d ic a o loc al o n de se en con t ra a i ma ge m.O atributo background O at ri b uto ba ck g roun d es ta be le ce q ue o p a dr ão d e f u n do da pá g ina s er á u ma i m ag em. 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. o n av e ga dor r e pe ti rá a im a ge m (como num chão de mosaicos ou em uma parede de azulejos).jpg"> <body background="http://www.Guia Prático de HTML – Prof.tiagosouza. 11.com ----------------------------------------------------------------------------------------------------------- 11. 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.

0) rgb(0. a co r p r eta te m 0 d e v e rm e lho. O a mar e lo f o rte p ossui 2 5 5 de ver m el ho. N o ta: Est es no mes d e c or es não est ão def i n i dos em n e nh um p ad r ão do W3 C . ess e r e con he c ime nt o não é ex i g id o a n e nh um nav e ga do r para es tar con fo r me com as r eco men d açõ es o fi c ia is.Guia Prático de HTML – Prof.1 . O va lor m ais b a ixo de uma d e te rm i na da co r é 0 (#00 na notação hexadecimal usada em CSS) e o val o r m a is al to é 2 5 5 (#FF em código hexadecimal).2 – Nomes de cores A ta be la se g ui nt e m ost ra as 16 cor es cu jos n om es fo ra m d ef in i dos o f ic ia lm en te p elo W 3C . 0 d e v er de e 0 de a zu l.255.Formas de exprimir cores E m CS S a f o rma r ecom e nd ada p a ra ut i l iza r c o res é usa n do có dig o (notações) h exa de c ima l.255) rgb(255.255) rgb(255.255. se n do se u c ó di go # FF F F0 0 A ta be la a ba ixo most ra os res ul ta dos de div e rsas co mb i na ções de co res : COR CÓDIGO HEXADECIMAL #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF VALOR RGB (DECIMAL) rgb(0.255) 12. 12. Já o b r an co poss ui 25 5 de v e rm e lho.0. c om e xc eção das v e rsõ es ma is a nt i gas.27 - . Tiago Daniel de Souza http://www.0. os nom es d as co res a p rese nt ados a se gu i r são r eco nh e ci dos por to dos os n av e ga dores re le va ntes . 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. s end o se u có di g o # FF FF FF.tiagosouza. To dos os nav e ga do res re co nh ece m estes no mes p e lo q u e po d em us á-l os s em q ua lq ue r p ro b le ma : Cores com Nomes Atribuídos Oficialmente Aqua (#00FFFF) Green (#008000) Navy (#000080) Silver (#C0C0C0) Black (#000000) Gray (#808080) Olive (#808000) Teal (#008080) Blue (#0000FF) Lime (#00FF00) Purple (#800080) White (#FFFFFF) Fuchsia (#FF00FF) Maroon (#800000) Red (#FF0000) Yellow (#FFFF00) A p esa r d e n ão esta re m de fin i dos o f ici a lm en te. 2 5 5 de v erd e e 25 5 de a z ul .0.192. Assi m .255) rgb(192.0) rgb(0. esc rev e nd o na f o rma # 00 0 0 0 0.com ----------------------------------------------------------------------------------------------------------- 12 – CORES P od e mos ob t er q ua l qu e r c or q ue d ese ja rmos co m bi nan do p ro po rç ões co rr etas d e t rês co res bas es: Ve r me l ho (Red) . Ve r de (Green) e Az u l (Blue) .255. É po uco p ro váv e l qu e nos a nos ma is p róx i mos os .0) rgb(0.0) rgb(255. 2 55 d e ver de e 0 d e a zu l. ve rd e e az u l q ue e nt ra m n a c om pos i ção de um a d e te rm i na da co r.255.192) rgb(255. Des ta f o r ma as co res e x pr i mem u san do t r ês núm e ros h exa de c ima is q ue de f in em as q ua nt i da des de v erm e lh o.0.

3 – Cores seguras da Web P rob le mas c au sa dos p o r um n úm e ro red uz ido d e c o re s To dos os co m pu ta dores mo de r nos são ca pa zes de mos tra r de ze nas de m il ha r o u m i lhõ es d e co r es e m s im u ltân eo. Es tas 2 16 co res r ec e be ra m a d es i gn ação d e c o re s s e gu ra s da W eb.tiagosouza. O s nav e gad o res e ram o b r i gad os a u sar a pe nas 2 56 co res p ara s im u la r t od as as co res qu e não con se gu ia m a p rese nt ar. Estas são . d e um to ta l de 2 5 6 co res p oss í ve is. O s e fe it os des tas ap r ox ima ções e ra m vis í ve is na fo rm a pon tos a d jac en tes c om co res d i f er en tes e d e ma nc has d e c or. Co nt ud o. At ua l me nte e st as l im i taçõ es já quase não ex is te m. C o mo a caba mos de ver . a ma io ri a do s c om p uta dor es e ra m c ap az es d e a pr ese ntar ap en as 2 5 6 co r es d i f er en tes d e c ad a ve z.28 - . Es ta li m i taçã o ob r i ga va os n a ve ga dor es a t ra ba lh ar em com u ma pa le ta f i xa q ue con t in ha a pen as 2 56 cor es. S e q u is er ga ran t ir a a pr ese nt ação co r ret a das c or es das s uas pá gi nas e m to dos os na ve gad o res co nfo r mes co m as n or mas do W3 C. q u e mo st ra mos ju ntam e nte co m se us c ód ig os h exa de c ima is (o caractere # no início foi omitido) : . Tiago Daniel de Souza http://www. o s s ist em as o p erat i vos Windows e Apple Macintosh r es er va va m 2 0 c o res c ad a um (40 no total) p ara d ese n ha r s uas i n te r fac es g r áf i cas. Ass im . A fo r ma e nc on tr ad a pa ra li m ita r as cons e qüê n cias res ul ta nt es d a u t i li za ção d e u ma p al eta co m a pe nas 2 16 c or es co nsi st e e m usa r a penas co res cu jos c ó di gos h exa d ec im ais u sa m ap en as co mb in açõ es dos n úm er os i n d i ca dos n a t ab el a s e gu i nt e: RGB Hex 00 00 51 33 102 66 153 99 204 CC 255 FF A ta be la ab a ixo mostr a t oda s as 21 6 co mb i na ções de co res qu e po de mos f o rma r com os va lores ap r ese nt ado s na ta be la a nt er ior. p or tan to.com ----------------------------------------------------------------------------------------------------------- n av e ga dores pa ra PDA e t e le fon es móv e is c ons i ga m r e con he ce r es tes nom es d e co r. D e ssas 2 5 6 co res. na pr i mei r a m eta de d a dé ca da d e 1 99 0.Guia Prático de HTML – Prof. a pe nas 21 6 p o di am s er es co lh i das l i v re me nt e c om a ga ra nt ia de pod e re m se r a p rese nt adas t an to nu ma m á qu i na W in do ws co mo em um Ma c. at é m eados da d éc ad a d e 1 99 0 m u it os sis te mas a pe nas cons e gui a m ap re sen ta r 2 5 6 co res d if e ren tes d e cad a v e z. 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. e m v ez dos n om es a pres en ta dos n a ta be la. COR CÓDIGO HEXADECIMAL #F0F8FF #FAEBD7 #7FFFD4 #000000 #0000FF #8A2BE2 #A52A2A NOME DA COR AliceBlue AntiqueWhite Aquamarine Black Blue BlueViolet Brown 12. as 21 6 cores s e gu ras d a We b.

tiagosouza.Guia Prático de HTML – Prof. A pesa r d isso. Tiago Daniel de Souza http://www. 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.com ----------------------------------------------------------------------------------------------------------- 000000 003300 006600 009900 000033 003333 006633 009933 000066 003366 006666 009966 000099 003399 006699 009999 0000CC 0033CC 0066CC 0099CC 0000FF 0033FF 0066FF 0099FF 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 hões d e co res d i f er en tes ao mes mo t em po.29 - . . não hav en do n ec ess id ad e de usa r a pe nas c or es se g u ras da We b.

A qu an t i dad e mí n i ma de u ma co r é 0 (#00 em código hexadecimal) e a qua nt i da de m áx ima é 2 5 5 (#FF em código hexadecimal) A ssi m. 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. Na f o rma d e cim a l a co r br an ca ex p rim e-s e como rgb( 2 5 5.4 . 0.tiagosouza. A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões : 003300 006600 009900 00CC00 00FF00 003333 006633 009933 00CC33 00FF33 003366 006666 009966 00CC66 00FF66 003399 006699 009999 00CC99 00FF99 0033CC 0066CC 0099CC 00CCCC 00FFCC 0033FF 0066FF 0099FF 00CCFF 00FFFF Vermelho ao Máximo S e c olo ca rm os a quan t i dad e de Ve r me l ho c om s eu va lor má xi mo. Tiago Daniel de Souza http://www. te mos to da a ga ma d e c or es qu e pod em se r a p resen ta das e m u m mon i tor. 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. .com ----------------------------------------------------------------------------------------------------------- 12. 25 5 ) e a co r p re ta e xp r im e-s e co mo rgb( 0 . Ve r de (Green) e A z ul (Blue) qu e e nt ra m em s ua c om pos i ção. q ue é 25 5 (#FF em código hexadecimal) f i ca mos a in d a co m 65 5 3 6 (256 x 256) co res d i f er en tes q u e res ul tam d e c om bi na r mos t od os os va lo res poss í ve is de Ve rd e c om tod os os va lor es p oss ív e is de Az u l. a co r b ran ca es c re ve-s e n a fo rm a # FF FF FF e a co r pr e ta n a for m a # 0 00 0 0 0. 2 5 5 . U ma f or ma ma is an t ig a qu e ai nd a fu nc io na é a fo r ma de c ima l.30 - .Formas de exprimir os valores das cores A s c or es de f in em -se u san do no ta ção hex ade c ima l q ue e x pr i me as q uan t idad es d e Ve r me lh o (Red) .Guia Prático de HTML – Prof. En t re es tes d o is ext rem os. 0 ). 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 : 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 têm e m ze ro as q u an ti da des de v e rd e e d e a z ul.

0.24.24) RGB(32.0.0) rgb(160.40.88) RGB(96.0.0.0) rgb(8.0.96) RGB(104.0. Tiago Daniel de Souza http://www.0.32.72.0) rgb(48.96.0) rgb(16.0.8.56.16.0) rgb(96.0) rgb(224.0.0) rgb(32. te mos 25 4 g r aus de int ens i da de p oss ív e is.0.0.0.0.0) rgb(248.0. 25 5 de v erd e e 2 5 5 d e a z ul (#FFFFFF em hexadecimal).0) rgb(255.88.104.64) RGB(72. ve r de e a zu l.0) rgb(168.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.0) rgb(232.0) rgb(136.0) rgb(64.0.0.0.0.0.0.com ----------------------------------------------------------------------------------------------------------- T ONS DE VE R MELHO HE X ADE CIM AL #000000 #080000 #100000 #180000 #200000 #280000 #300000 #380000 #400000 #480000 #500000 #580000 #600000 #680000 #700000 #780000 #800000 #880000 #900000 #980000 #A00000 #A80000 #B00000 #B80000 #C00000 #C80000 #D00000 #D80000 #E00000 #E80000 #F00000 #F80000 #FF0000 R GB rgb(0. 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) rgb(88.0) rgb(192.0.80) RGB(88.80.31 - .0) rgb(184. 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).0) rgb(40.0) rgb(120.0) rgb(144.0.0) rgb(80.0.0. E nt re est es do is va lo res e xt re mos.16) RGB(24.40) RGB(48.48.48) RGB(56.0.0.56) RGB(64.0) rgb(240.32) RGB(40.0.0.0) rgb(112. 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.0) rgb(176.0) rgb(24.0) rgb(104.64.0) rgb(128.0.Guia Prático de HTML – Prof.0) rgb(152.0) rgb(72.0.0.72) RGB(80.0.tiagosouza.8) RGB(16.0.0) rgb(200.0.0) rgb(56.0) rgb(208.0) rgb(216.0) RGB(8.104) #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 .

tiagosouza. 12. to dos os car ac te res t êm u m no me e sp ec ia l. h tt p :/ /ww w.216.com ----------------------------------------------------------------------------------------------------------RGB(112. P ra t ica me nt e to dos o s moni to res d os co m pu ta do res mo de r nos est ão p r e pa rad os p a ra a p res en ta r ma is de 1 6 m i l hõ es d e co res d i f er en tes.co m/a rt i gos/ exe m p los/t al le r js/ t a be la co res. PDA’s.240. Tiago Daniel de Souza http://www. Mas e se e u q u ise r sim pl esm en te qu e esses c ar ac te res f aça m pa rt e do m e u tex to e não se ja m i nt erp r eta dos co mo m a rca do res? ! No HTM L.184.112) RGB(120. voc ê p re c isa usa r a se g ui nt e c on ve n ção: &nome-especial.200.112.120.200) RGB(208.136) RGB(144.248.5 .184) RGB(192.168) RGB(176.224) RGB(232.248) RGB(255.32 - . to dos es tão de f in i dos n os pa drões do W3 C.192.232. ou tr os 4 0 96 ou 6 55 3 6.192) RGB(200.128) RGB(136.Guia Prático de HTML – Prof. é p r e c iso te r e m men te q u e os n o vos sist emas mó ve is (celulares.224. Pa ra a cessa r u m car ac ter e. ou có di go.152.Mais de 16 milhões de cores diferentes C o mb i nan do as 2 56 co res d e Ver m el ho com as 25 6 c or es de Ve r de e as 2 5 6 c or es do A z u l. .144) RGB(152.232) RGB(240. etc) .176) RGB(184.216) RGB(224. ESPECIAIS ACENTUAÇÃO E CARACTERES A l g uns ca ra ct er es em HTM L são c hama dos de c ara c tere s re s e rva do s o u m a rca do re s.160. qu e q uan d o a pa re ce m n u m doc um e nto HTM L são 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.136.Mais nomes de cores A s c or es m ost ra das n o s it e ab a ixo possu e m di ve rsos có d ig os h exa d ec im a is r e la cio na dos a c or es.144. htm l 13.255) #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF 12.168.255.6 . ge ra lme n te possu e m pa le tas m ais red u z i das. A lg u ns mos tr a m a pe nas 25 6 co r es. No e nt an to.128.152) RGB(160. cr ia rw e b.208) RGB(216. co nse g u imos c ri a r ma is de 1 6 m i lhõ es de cor es d i fe re nt es (256×256×256) .208. qu e s er i am os < (menor que) e > (maior que) . ENTIDADES.240) RGB(248.176.120) RGB(128.160) RGB(168.

&cent. &divide. e n qu an to q ue a se g un da l in ha con tém as cé l ul as Te rce ira e Qu a rta.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 SEQ UÊN CIA RES ERVADA &aacute.tiagosouza. &eacute. 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 á. &Aacute. . Tiago Daniel de Souza http://www. 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. 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> Cuj o res u lta do é: Primeira Segunda Terceira Quarta E m HTML. as ta b el as são di v id id as e m l inh as e c él ulas. &lt.w 3. &yen. 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.o r g/TR/R EC -h tm l 40 /s gm l /e nt it i es. 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. &ocirc. &sect. q u e in cl us iv e po de se r u m c ara cte r e res er va do.com ----------------------------------------------------------------------------------------------------------- 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. No HTM L. 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.h tm l 14. &amp. TABELAS Ta be las a ux i li am na v is ua l iz ação de da dos o u na divis ão d e su a pá g i na e m se to res.33 - .Guia Prático de HTML – Prof. &pound. os no mes es pec ia is são c ha ma dos d e e nt i da des. &atilde. Na tab e la ac i ma. &copy. &reg. &gt. 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 . &times.

34 - . D e po is. 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. 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. c r iam os um a l in ha co m tr e em s eg u i da. o n de c r iamos as c é lu las con te ndo os t extos T e rce ira e Qu a rta. es c re ve mos o tex to d a cé lu la (P rime ira). É m an da tóri 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. D essa fo rm a. o u table row (linha) . e o td. ou table data (célula) . 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.com ----------------------------------------------------------------------------------------------------------- D e nt ro d e u m b lo co tab le. . Tiago Daniel de Souza http://www. on de co lo ca mos o te xto da seg u n da cé l ul a (S egu nd a) . q u e as c élu la s es te jam d e nt ro d e l i n has. A b r im os ou t ro bl oco td n esse m esm o b loc o tr. ou se ja. No ex em p lo a nte r io r. os p ri n c ip ais e lem e ntos q ue v oc ê u t il iz a rá são o tr.tiagosouza. po d emos d e f in i r as li n has e as c é lu las da t ab el a. Sem o e l e não fi ca r ia m ui to d i st in to ond e c om eça 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 D e nt ro d e u m bl oco td é poss í ve l c olo ca r c ó di gos HTM L e i nc l us iv e c r iar a té t ab el as d en t ro d e c élu la s ! V ej a só : <table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td> <table border="1"> <tr> <td>Quarta</td> <td>Quinta</td> </tr> </table> </td> </tr> </table> Primeira Segunda Terceira Quarta Quinta 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.Guia Prático de HTML – Prof. d en t ro de u m b l oco td.

F ar em os o se g u in te : <table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> .Guia Prático de HTML – Prof. c e llsp ac ing .35 - . a se g un da co m a pe nas u m a cé lul a e a te rc e ir a c om t r ês cé lu las.Espaçamento entre células P ar a co nt ro la rm os a d i stâ nc ia e n tr e duas cé l ul as. Tiago Daniel de Souza http://www. ut i liz am os o c ellp ad d in g: <table cellspacing="20" cellpadding="35" border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> Primeira Segunda Terceira Quarta 14.1 .Preenchimento de células P od e s er q u e voc ê q u e ira u ma ta be la on d e a p r im e ir a li n ha te nh a du as c é lu las.tiagosouza.com ----------------------------------------------------------------------------------------------------------- 14.2 . c ujo a r gu m en to é da do e m p ixe ls : <table cellspacing="20" border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> ut i l iza mos o at r ib u to Primeira Terceira Segunda Quarta P ar a co nt ro la r o es paç am en to v er t ic al.

V e ja a d i f e re nça 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> . 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 . ut il i za rem os o at r ibu to c o ls pan : <table border="1"> <tr> <td>Primeira</td> <td colspan="2">Segunda</td> </tr> <tr> <td colspan="3">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.tiagosouza. p o d er ía mos usa r o a t ri b uto row sp an.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 P e rc eb eu c om o a ta be la f ic ou c he ia de b u rac os? ! Pa ra p r ee nc ha m os b u ra cos. Tiago Daniel de Souza http://www.36 - .Guia Prático de HTML – Prof.

lo n essa t a re fa.6 – Elementos relativos a tabela ELE MEN TO <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> DES CRI ÇÃO Define uma tabela Define um cabeçalho para uma tabela Insere uma nova linha numa tabela Insere uma célula 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 cabeçalho de uma tabela Define um corpo numa tabela Define o rodapé de uma tabela . Co nsu l te a s re f er ên c ias pa ra m a is i n fo r maçõ es so b re ta be las.4 .Dicas O s el em en tos < th ea d>. 14. < tbo dy> e < tf oot> ai n da são 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. 14. a la r gu ra r ef er e se à la rgu ra d a pág i na. Vo cê po de ut i li z ál as par a con st ru i r u ma s im p les ca ixa pa ra ex i bi ção de i n fo r maçõ es c omo fa ze r u ma pá g ina in te i ra u t i li za n do t ab el as.37 - . Ex ist em mui tos o ut ros e le me ntos e a tr i bu tos p a ra a j udá. 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 não e m pi xel s. Tiago Daniel de Souza http://www. u ti l i za-s e o j á con he c id o a tr i bu to w id th.Guia Prático de HTML – Prof.tiagosouza. c uj o ar g u me nto é i d ên ti co pa ra o cas o d e ima g ens: <table border="1" width="200"> <tr> <td width="30%">Primeira</td> <td width="70%">Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> Primeira Terceira Segunda Quarta 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.3 . 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.5 . 14.Uso de tabelas A q u i ex p lor a mos p ouc as p ossi b il i da d es das ta b el as HTM L.Largura de células e tabelas P ar a es co lh e r a la rg u ra d e ta be las e c é lu las. 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.com ----------------------------------------------------------------------------------------------------------Primeira Segunda Terceira 14.

las pa ra v oc ê.Guia Prático de HTML – Prof. at ra vés de se u se r vi do r. 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.tiagosouza. se l ec ion ar el em ent os e m uma l ist a co m vá rias esco l has. t ext os p e q ue nos. D e nt ro d esse e l em en to p r i nc i pa l co lo cam os di v e rsos e lem e ntos pa ra a ins erção dos d ad 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 . t ext os lo n gos. 15.38 - .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 .1 – Criar Formulários U m fo r mu lá r io é u ma se ção da pá gi na HTM L q ue co nt ém el e me ntos q u e p e r mi te m ao v is ita nt e i n se r ir em d a dos (elementos <tetxarea> e vários tipos de elementos <input>. FORMULÁRIOS O s f or m ulár 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 á. <form> <input> . .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>. .2 . O s fo rm u lár i os sã o cri a dos co m o e le me nto <f orm>. e tc. res po n der f ac i lm en te co m res pos tas do t ip o "sim" ou "não" .com ----------------------------------------------------------------------------------------------------------- 15. Estes el em en tos pe r mi tem i ns e ri r d ados nu mé r icos. <option> e <select>). se lec io na r ra pid a me nte um a o pç ão e m um p eq u en o g rup o. Tiago Daniel de Souza http://www. <input> </form> 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. 15.

É pa ra lá q ue o co nte ú do do f o rm u lár io se rá e n vi ad o. Tiago Daniel de Souza http://www. O a tr i bu to a c tion do e l em en to <f o rm> co nt ém o e n de re ço (UR L) do re c urso da We b ( site.asp"> <input type="radio" name="sexo" value="masculino"> Masculino <br> <input type="radio" name="sexo" value="feminino"> Feminino <form> O exe m pl o a ci ma fi ca rá se n do ex ib i do des ta m an e ira em s eu b rows e r: Masculino Feminino 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.Guia Prático de HTML – Prof. as o p çõ es m a rca das e o tex to q ue fo ram inse r i dos no f o rm u lár io são e n via dos par a voc ê (ou para seu servidor) .39 - . <form name="input" action="exemplos/action."Radio Buttons" O s " Ra d io Bu tton s" são ut i l iza dos pa ra se c r ia r u m g ru p o p eq uen o d e o pções e m qu e a pe nas po dem os se le cio na r u ma de ca da v ez.com ----------------------------------------------------------------------------------------------------------- 15. etc ) qu e est á e n car r ega do de r eal iz a r est e pr oc essa men to.O atributo action e o botão de submissão Q ua n do o vi s ita nte c l ic a so b re o b otã o "S ub me te r" (ou "Submit"). 15. É 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. download.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 não) os i te ns d e n tr o de u m p e q ue no g r u po. <form action="processamento. email.tiagosouza.5 . <form> <input type="checkbox" name="carro">Eu tenho um carro <br> <input type="checkbox" name="surf">Eu tenho uma prancha de surf <form> O exe m pl o a ci ma fi ca rá se n do ex ib i do des ta f o rma em se u bro wse r: Eu tenho um carro Eu tenho uma prancha de surf Re pa r e q ue p od em os se l ec io nar vá r ias op çõ es ao m es mo t em po.3 .html" method="get"> Nome de usuário: <input type="text" name="usuario"> <input type="submit" value="Submeter"> <form> O exe m pl o a ci ma fi ca rá se n do ex ib i do da seg u i nt e form a e m s eu na v ega do r: . 15.

Tiago Daniel de Souza http://www. A s s ub ja ne las são ha bi tua l me nte des i gna das po r mo l d uras.40 - .6 .Elementos para Formulários ELE MEN TO <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> DES CRI ÇÃO Define um formulário para recolher dados inseridos pelo utilizador Insere um campo para introduzir dados Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres) Define um nome para um elemento Agrupa elementos num formulário Define uma legenda para um grupo de elementos do formulário Define uma lista com várias opções selecionáveis Define um grupo de opções Insere mais uma opção em uma lista com várias opções selecionáveis Define um botão que pode ser pressionado Desuso. 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>. Utilize <input> com o atributo type="button" 16.tiagosouza.com ----------------------------------------------------------------------------------------------------------- Submeter Nome de usuário: 15. Ca da p á g in a es tá d en tr o da sua p ró pr i a m o ld u ra ( subjanela ) e é i n dep e n de nte d as r esta nt es pá g i nas. A i m pr essão do co nt eú d o do nave ga do r f i ca m ais d if ícil . A p esar d e o fe re ce re m al g um a l ib e r da de ao f ac i li ta rem bas tan te a cr ia ção d e ba r ras d e n av e gaçã o e m co nj un tos de doc u me ntos c om m ui tas pá ginas e d e to r nar e m b ast an te m a is rá p i do o ca rr eg a me nto das pá g inas. FRAMES HTML A s mo l du ras ( " frames " ) são su bj an e las de fi n i das so bre a ja ne la p r in c i pal d o b r owse r.O Elemento frameset • 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. Est as su b jan e las são c r ia das d i vi d i n do a ja ne la em v á rias p ar tes .2 . • . • • 16. o q ue o br i ga a u t i li za r Java Sc r ip t. C a da u ma d essas pa rt es p od e ap r ese nta r u ma pá g ina da We b d i f er en te. o u " frames ".Guia Prático de HTML – Prof. 16.Vantagens e desvantagens das molduras A s mo l du ras (" frames ") nos per m i te m apr es en tar ma is do qu e u ma pá g in a HTM L nu ma ú n ica ja ne la d o b rows e r.1 . as mo ldu ra s ta mbé m p o de m da r o r ig em a a lg u mas di f i cu l da de s. p a ra qu e el e rea l i ze a l i g ação d e d u as ou ma is pá ginas. 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. tai s co mo : • 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.

5 – Elementos para Frames ELE MEN TO <frameset> <frame> <noframes> <iframe> DES CRI ÇÃO Define um conjunto de molduras Define o conteúdo de uma subjanela (moldura.com ----------------------------------------------------------------------------------------------------------• O s va lo res at r ib u í dos às l in has e às co l unas i n d icam a q uan t ida de de á rea de é c ra n q ue ca da li n ha e ca da c ol un a d e ve m ocup a r. 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 . 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.75%"> <frame src="moldura_a. O do cum e nto m o ldu ra _a .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.html"> <frame src="moldura_b. e n qu an to a se gun d a co lu na o cu pa 7 5% da lar g u ra. 17. ou "frame") Define uma seção "noframes" para ser usada pelos browsers que não suportam molduras Define uma subjanela (moldura) interior ("inline frame") 17.41 - . 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.html" target="principal">Página 1</a><br> <a href="pagina_2.html"> <frameset> 16.Inserir um script numa página HTML A i nse rç ão d e um s cr ip t e m HTML fa z-s e a tr a vés do e le me nt o < sc rip t> . INSERÇÃO DE SCRIPTS A i ns er ção d e sc r ip ts e m s uas p ág i nas es cr it as e m HTM L po de m f a ze r com q u e e las se jam c a paz es d e r ea g ir d e f or ma d i nâm i ca e i nt era g ir c om se us v is i tan tes.Guia Prático de HTML – Prof.html" target ="principal">Página 2</a><br> <a href="pagina_3. Tiago Daniel de Souza http://www. <a href ="pagina_1. 16.1 . 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 não 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.html" target ="principal">Página 3</a> A o c l ica r nu m l in k d en t ro d a mol d u ra de na ve ga ção a n ova pá g in a ab r e-se n a se g un da mo l du ra ( à direita ). 16.3 – O Elemento frame O e le me nto < f ra me> d e te rm i na da mol d u ra.h tm l o cu pa a seg u n da co l un a: <frameset cols="25%. de f in e q u al o doc u me nto HTM L a co lo ca r n um a 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. Par a i m p ed i r q ue i sso a co nte ça.tiagosouza. q ue t em po r no me "p rinc ip al”.

O Elemento <noscript> A l ém d e esc on de r mos o có di go d e nt ro de u m co me ntá r io. d e ve-s e c oloca r o c on te ú do d o e l em en to <s c rip t> d e nt ro de u m co me ntá r io. Es tes br ows ers .write("Olá mundo!") .2 . Tiago Daniel de Souza http://www.1 . u ma o ut ra fo rma de a ju da r os b r owse rs m u it o a nt ig os s e ria u t i li za r o el e me nto <n os c rip t> p a ra o fe re ce r c on te ú dos a lte r nat i vos. a ut i l iza ção de co me nt ár ios nos sc r i pts é uma pr át i ca r e com en dáv e l po r qu e e v i ta mu it os pr ob lem as qu e su r ge m q uan d o u t il i zam os s cr i pts na li n g ua ge m X HTML. --> </script> </body> </html> 17.42 - .2 .tiagosouza. Pa ra i m pe d ir q ue isso ac on te ça.1 . </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. ao en co nt rar e m u m e le men to <s c rip t> ( cujo significado desconhecem ).1. l i m ita m-s e a a p rese nt ar o te xto q ue est á de ntr o do el eme nt o co mo se t rata sse d e co nt eúd o n or ma l. mas os ou t ros na ve ga do res r e con he cem os s cr i pts e ex ec uta m. os n a ve ga dor es q u e não s u po rtam sc r i pts i g n ora m-n os. M esmo co m b r owse rs m o de rnos . O e le me nto < no sc rip t> é usad o pa ra c om p ens ar de al g uma fo r ma a fa lta de e xe cu ção d e u m sc r ip t.Um exemplo <html> <body> <script type="text/javascript"> <!-document.Guia Prático de HTML – Prof.Como lidar com os browsers antigos U m n av eg ad o r qu e não r eco n hec e o e le me nt o <s c rip t> é m uit o a nt ig o e a s ua ut il i dad e na W eb a tua l é mu i to re d uz id a.com ----------------------------------------------------------------------------------------------------------<html> <head> </head> <body> <script type="text/javascript"> document. mas se rá ig no ra do pe los b r owse rs m a is m o de rnos e não in te rf e re na ap res en ta ção d a p ág i na.write("Olá Mundo!").write("Olá mundo!"). 17.2.2.Um exemplo prático <html> <body> <script type="text/javascript"> <!-document. O co nte ú do des te e l em en to s erá a pr ese nt ad o p el os b r owse rs qu e n ão r eco nh ec em sc r i pts.nos ( apesar dos comentários ) . Des te m o do. 17.

etc http://www.3 .html#h-7. a tar e fa de d eta lh ar ca da u m dos tó pi co s em s ua m en te.html Meta-informações: fornecem dados a respeito do próprio documento.4. OUTRAS POSSIBILIDADES O p r in c íp io d e fu nc ion am en to do HTM L j á d e ve e sta r só l id o é q u e vo cê l e u t ud o o q ue a ntec e de est a se ção. data de validade. Ch eg o u a hor a d e m ost rá. se es te t ex to não s e dese n vo lv i da p e lo l ista dos a se g ui r. http://www.43 - ..html Listas: blocos para a criação de listagens http://www.w3.) 19.w3.net/w3c/html401-es/cover.html Formulários: possibilita a interação do seu html com aplicações web. Use <object> 18.Guia Prático de HTML – Prof.org/TR/html4/interact/scripts.tiagosouza.w3. .4 • • • Essas f u nc io na l i dad es pe r mi t irão q ue vo cê fa ça d o cume ntos HTM L be m c om p le tos. Especificação HTML (em inglês) http://www.com ------------------------------------------------------------------------------------------------------------> </script> <noscript> O seu browser não suporta JavaScript! </noscript> </body> </html> 17.las p a ra o m und o to do.org/TR/html4/present/frames.html Scripting: permite a automatização de certas seções do seu documento.conclase. on d e s erão a bo r da dos a l gu ns te mas be m ba ca nas .w3.html docs.org/TR/html4/struct/text. passa re mos p a ra a Esp e ci f i caçã o HTM.org/TR/html4/interact/forms.w3. Tiago Daniel de Souza http://www. COLOCANDO SEU SITE NO AR A té a go ra so me nt e vo cê co ns egu i u v is ua li za r suas pág i nas. P ara q ue t or ne en fad o nho. conjunto de caracteres usado.indymedia. P ross eg u ir e mos a gor a a pa rt e f i na l d esta a post i la.html Frames: permite que a página exibida no navegador seja formada por mais de um arquivo html (não recomendado. veja em Acessibilidade) http://www. c ons ór c io da w eb .org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web Consórcio da web • • • Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto http://www.org/TR/html4/struct/global.w3. http://www. como data.w3.org/TR/html4/struct/lists.Elementos para inserir scripts e código E lem en to <script> <noscript> <object> <param> <applet> De sc riçã o Define um bloco que contém um script Define texto alternativo para ser apresentado sempre que o script não é executado Insere um objeto na página Define parâmetros para controlar o objeto Desuso.org/TR/html4 Especificação HTML (em espanhol) http://html.

S e vo cê cos tu ma acess ar a I nt e rn et já d e ve t er vi sto q u e ex ist em v ári os se r v iços gra tu ito s de hos p ed age m d e s i tes.com) e t er um no me de usu ár io e s enh a.1 – Isto é tudo que eu preciso?! P ar a a ce ssa r o se rv i do r e pu b l ica r as p ág in as vo cê pr e cis a d e u m p rog ram a F TP.2 . U m dos me l ho res é o Fi le Zi l la.ou veja mais abaixo uma lista com sérvios gratuitos de hospedagem) . mas exi ste m v á rios d eles n a I nt er ne t p ar a do wnl oa d e são g r at ui tos. 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") .com ----------------------------------------------------------------------------------------------------------- P ar a p ub l ica r se u tr ab a lho na In te r ne t.angelfire. Angelfire http://angelfire.so u rce for g e. C o nec te. Vo cê a go ra t em a cesso a o se r v ido r. Vo cê po de o bt er o Fi le Zi ll a em ht t p: // fi l ez i ll a.angelfire. Isto é i g ua l a re gi st ra r u ma c on ta d e e. I ns i ra "H os t Nam e" ("ftp. 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. 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.isto é u m pr ocess o b em rá p id o. net 19. Tiago Daniel de Souza http://www.Como eu faço envio os arquivos do meu site?! A b aix o fo rn e ce mos um ex em p lo d e com o fa ze r isto usa n do o ser v i do r A n ge l f ir e e o p ro gra ma F il e Zil l a. O u tra o pção é o b te r u m es paç o g r at u ito de u m s er v ido r na In te r ne t. e n o o ut ro o d o se r v id or ("Remote Site"): .com P ar a ac essa r o s er v id o r v oc ê pr e cis a co nh e ce r o "N om e d o s eu se rv id o r" (por exemplo.e nt r e e las a A ng e lf i re (clique em "Sign Up" e escolha membro gratuito .se r v ido r.se à In te rne t e a b ra o p rogr a ma FT P.tiagosouza.44 - .lycos. 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. e é g rat u it o . 19. 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 . Ex is te m mu i tos pro g ra mas FT P. com / ~nom e do usu ar io.ma il ( co mo p or ex em p lo. Es te p r oc ed i men to é ma is o u me nos i g ua l p a ra q u al q ue r pr o gr ama FTP . I n fo r me-s e co mo fa ze r i sto na d o cu me ntaç ão f o rn ec i da pe lo se r v iço d e hos p eda ge m. Vo cê t em q ue a ti va r o se r v iço.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".Guia Prático de HTML – Prof. ftp. Vo cê n ão de ve te r um p ro gr a ma d est es a i nda .

br/artigos/hospedagemgratis. 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. Da q ui em d ia nt e. HTML AVANÇADO Es ta pa rt e a ssu me q u e vo cê j á t re i nou HTM L o su f ic ie nt e pa ra est ar f a mi l ia ri zad o c om a l in g ua ge m e f az e r si tes n a i nt er net . b ast a d i git ar h tt p :/ /ww w. co m/ fo lk /h tm l ne t (sem qualquer nome de arquivo) e a b ri rá htt p: // www . o u se ja.ilogic.br/idealbb/view.br/ Link 03 http://www.a n ge l fi re.com ----------------------------------------------------------------------------------------------------------- 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.virgula. Fa ça u ma bu sca do Goo g le.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.com.45 - .seu-nome. Tiago Daniel de Souza http://www.Guia Prático de HTML – Prof.com. es te a rt i go a pe nas fa rá um tour po r ou t ras li n gua ge ns e tec no lo g ias qu e po de m se r . LISTA DE SITES COM INFORMAÇÕES SOBRE HOSPEDAGEM GRATUITA Link 01 http://neosite.htm Link 02 http://criandosite.ang e l fi r e.com.tiagosouza. A go ra o mu n do tod o p od e rá v e r se u s i te .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 . htm P ar a ma is a d ian te se rá u ma b oa i dé ia co mp ra r u m do mín i o (espaço no servidor) só pa ra vo cê (www. D ê a u ma d as pá g i nas o no me d e "ind ex .babooforum.co m/ fo l k/ ht ml ne t/ i nd ex.asp?topicID=425835 20.h tm" (ou "index.

Folhas de Estilo (CSS) F ol has de es t il o p er mi t em q ue vo cê s ep ar e o co nte ú do do s eu do cu me nt o da s ua r ep r ese nt ação g rá f ica. f ac i l ita r bus cas e c ri ar d oc u me ntos q ue. } A s va nta g en s d e usa r f o lhas de est i lo são : • S e pa raçã o e nt r e a i nfo r maçã o qu e o se u te xto pr et en d e p assa r e s ua a p rese nt ação P e rm it e que to da a ap r ese nta ção do se u te xto s ej a mu da da s em q u e se ja p r ec iso a lte ra r o h t m l.1 . 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.tiagosouza. ta ma nho e cor s er i am de f in id os. Co mo ex e mp lo. 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. com o t i po de f ont e.com ----------------------------------------------------------------------------------------------------------- u t i li za das p a ra o r gani z ar s eu s do cu me nt os. o u CS S.estilosa { color : red. s epa ra r a a pa rê nc ia d o con te úd o.Guia Prático de HTML – Prof. m u ita s tag s e a tribu tos do HT ML são c on s id e rad as obs o le tas ou se u u so é d epre c ia d o.46 - . . S em p re qu e p oss íve l . Es tar e i d and o a qu i uma v isão ge ra l de t od as as te cno log i as us adas a tua l me nt e q u e po de m s er i nt e gra das ou tem a l gu ma re la ção co m o HTM L e l i n gu ag ens d e m a rca ção : • • • • • F ol has de Es ti lo ( C SS) Te m p late s A c essi b i li da de S í ti os d i nâm i cos o u au to mat i za dos We b sta n da r ds e va l id aç ão 20. 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 . ao in vés de um a ex press ão do tip o : <font face="fixed" size="+2" color="red">Estilo misturado com o texto</font> Vo cê ut il i za a l go ma is o rg an i za do. b ast an do a pe nas q ue o ar q u iv o q ue c on te nha a f ol ha de est i lo se ja al t era do Ma is o rg ani z ação pa ra se us d oc um e ntos F ac i l ita a cr i ação de Te m p lat es • • • P e la c la re za e o rg an iza çã o re s u ltante d o uso d e f olha s d e es tilo . Em C SS . Tiago Daniel de Souza http://www. 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 . font : fixed. font-size: 14. sob r et u do não ut i li z em f o rma tos qu e v e nha m a se r to r na r ob so le tos. u tiliz e CSS n os se us d o cum e ntos .

S e u con te úd o t am bé m pre c isa es ta r o r gan i za do pa ra qu e ao lo ng o do te mpo as c ois as não se p e rc am. 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 ".org/TR/html4/present/styles.w3. 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. PostScript. co nsu lt e os l in ks q ue a nex ei a ba ixo : Materiais de CSS http://www. e tc Use ín d i ces na me d i da d o poss í vel Es c re va r esu mos Use re fe rên c ias Use um a lóg i ca pa ra os n om es d e a rq u iv os e p astas E v ite usa r f r am es. El e fa ci l it a a gera ção de t ext ua l (HTML. P ar a un i for m i za r o es t il o e a a p res en taç ão. 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. 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. 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.tiagosouza. t am bé m con h ec i do com o T em p la te. TeX. 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.com/css http://www. source code.org/TR/1999/REC-CSS1-19990111 20. 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 ma rt y : é u ma c lass e d e te m p lat es. vo cê p o d e c r iar u m m ode lo. tabe las e to dos os ca m pos qu e vo cê f or ut i li za r. " Qu em s omos ". I nt eg r ad o co m se r v lets . Tiago Daniel de Souza http://www.Guia Prático de HTML – Prof. etc) e aj u da a s ep ara r ed i ção d e d es i gn da ló g ica . 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. Ex is te m ain d a os mo tor es de t em p lat e. XM L.w3.com ----------------------------------------------------------------------------------------------------------- P ar a ma is in fo r ma ções so b re Fo lhas de Est i lo em HTML.3 – Acessibilidade U ma c ons id e ra ção imp o rta nt e ao esc re ve r s eus do cum e ntos HTM L é o q uão u sáv e l e ac ess ív e l e le é. 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. C r ia r um t emp l ate d e pe n de do gosto de cad a um .html Especificação HTML Cascading Style Sheets. 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 - . 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. • 20. 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. 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. level 1 http://www.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. P yt ho n e mais .codigofonte. Ess e t em p la te po de con te r m e nus. 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.

b l og s e wik is são es cr i tos na l g um a l in g ua ge m d e p ro g ram açã o como PH P. O s ge r en cia do res de c on te ú do. A l gu ns ge r en c iad o res d e c on te ú do p e r mite m q u e e xis tam u suá r ios ca pa zes d e a d ic io na r co me ntá r ios e m p u b li ca ções ex iste nt es o u at é m es mo c r iar suas p ró pr i as pá g in as at ra vés do pr ee nch im e nto de fo r mu lá ri os. mas t am bé m ex ist em s ites a uto mat i za dos q ue p e rm it em a r maz en ar o co nte ú do d as pá g inas nu m ban co d e d ados e a pa rti r d esse ban co c r ia r mu it as pá g inas h t ml e a i nd a man te r o s is te ma d e b usca e a p u bl i cação se m q ue pa ra iss o o u suá r io p re c ise sa be r h tm l ou qu al q ue r out ra li n gu age m d e ma r cação.com ----------------------------------------------------------------------------------------------------------• • • • 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 . A o ut ra c ar ac te rís t ic a dos wi ki s é a p r ese r vaç ão d as m od i f icaç ões : o w ik i poss u i um h is tó ri co de tod as as m o di f ic ações fe it as nu m doc u men to. 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. o n de o do no do blo g a dic io na t exto . Py th on. Já os W ik is são fe rr am e ntas que pe rm i te m q ua l qu er p esso a cr iar o u e di ta r u m t ext o u ti l i za n do u ma l i n gu ag em d e ma rca ção es pe cia l e ma is s im p l es d e se r u t i li za da do q ue o HTM L. 20. Pe rl . D uas c a ra cte r íst i cas p r in ci p ais d os s ist emas W ik i são : v oc ê p o de cr ia r f ac i l me nte u ma no va p á gi na s imp l es me nte es co l hen do u m n om e es pe c ia l pa ra e la e es cr ev e r na pá gi na já e xis te nt e. 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. i m ag ens e c ó di go HTM L no s it e a pe nas pr ee n ch en do u m fo rm u lár i o. Ja va. 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.48 - .tiagosouza. O s B lo gs são cas os es p ec ia is de g e re nc iad o res d e co nt eú do qu e f un c iona m c om o d iár ios o u co lun a de e d ito r ia l. C aso na da d i sso se ja v e r dad e e v oc ê es tá f a ze nd o alg o gr an de o u e nt ão voc ê n ão te m te m po pa ra es c re ve r seu có d i go HTM L n a m ão. c om o po r ex em p lo: . Tiago Daniel de Souza http://www. na me di d a do poss í ve l. Des tac o tr ês t i pos de les: • • • Ge re n cia dor es de c on te ú do Bl o gs W ik is Ge ren c ia do re s d e co n te úd o são so ftw ares q u e ro da m em se rv i do re s e q u e a d mi n ist ram i n fo rma çõ es d is po n ív e is e m s ites .Guia Prático de HTML – Prof. Mu it os s it es na web são a p enas a r qu i vos ht m l. ta lv e z se ja o mo me nto d e co nsi de ra r a a doç ão de um s ist ema aut oma t iza do. Com u m po uc o d e est ud o. doc u me nto HTM 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.4 – Sites dinâmicos ou automatizados S e u t exto o u si te p o de se r c om pos to s im p les men te p or m e ia d úz ia d e d o cu me ntos HT ML e t e r po uca ou ne n hu ma at ua liz aç ão ao l o ngo d a s ua e xis tê nc ia. 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 n av eg ado r está ap to a le r HTM L es c ri to de v á rias ma ne i ras. No passa do .com ----------------------------------------------------------------------------------------------------------• • • Ge ren c ia do re s de c on teú do : Dr u pa l. S P IP. Mas. TW ik i.Web standards e validação Nes ta l i ção v oc ê a p ren d er á ma is a lg u ns con c ei tos te ór i cos do HTM L. reso l veu co mp et ir co m a Ne tsca p e e la nço u se u n av e ga dor p r óp r io. 20. m as o fe re ce sup o rte pa ra as no r mas HTM L do W3 C . E ntão . a Ne ts ca pe in ven ta va se us pr óp r ios e l em en tos d e m a rca ção qu e nã o f unc io na va m em ou tros na ve ga do res. P od em os d i ze r q u e HTML t em mu i tos d ia l etos. À qu e la é poca a s no rmas pa ra o HTM L es ta vam nas su as ve rsõ es 2. Mas.Guia Prático de HTML – Prof. O In te r ne t Exp l or e r ai n da te m se us e le m en tos p r óp r ios. Em d e te rm i na do m om en to. não era me lh or do q ue o Ne tsca pe no su po rt e às no r mas do HTML . 0 e 3. .quando você tinha que comprar um navegador – o Netsc ap e d o mi na va o m er ca do d e n av e ga do res.tiagosouza.5 . Est a é a raz ão p o rq ue a l gu ns w ebs i tes são a p res en ta dos de for mas d i ve rsas e m d i f er en tes n av e ga dores . A pa rt i r das v e rsões 4 e 5 a Mi c roso ft an un c ia va q ue se us na ve ga dor es o fe re c iam c ad a v e z ma io r s upo r te às n or mas HTM L do W 3C. v oc ê es tá c ons tru i n do u m w e bsi te par a se r vis ua l iz ado em to dos os n av e ga dores n ão só a gor a m as tam b ém no fu t uro . o I nte r ne t Ex p lo re r.e nã o te ve .1 . H oj e e m d ia é o I n t er ne t Exp lo re r q ue d et ém q u ase 9 0 % d o m er ca do. quan d o v ocê c o di f ica HTM L de a co r do com as no rm as d o W 3 C. A p r i me i ra ver são do n av e ga do r da M i c roso ft 's. Ph pWi k i. E f el i z me nt e. a Mi cr oso ft res ol v eu d ist r i bu i r s eu na ve ga do r g rat u ita me nt e ( is to se m pre a g ra da a to dos ) e o In te r ne t E xp l or e r em p o uco t empo to r nou -se o na ve ga do r m a is usa do e mais pop u la r. e tc 20.5. Tiago Daniel de Souza http://www. Os na vega do res Mo z il la.qu e s e p r eoc u pa r m u ito c om n or mas. 01 e n o XHTM L. es te t em s ido um á rd u o e lo n go c am i nho. q ue é o X HTML. Wo rd P ress. tud o o q ue v oc ê a pr end e u n est e t utor i al está de a co r do co m a ma is n ova ve rsão do HTM L.O que mais há para conhecer sobre HTML?! HTM L po d e se r esc r ito de vá r ias ma ne i ras. A Nets ca pe não se m ov i me ntou pa ra a tua l iz ar s eu n av e ga dor e co nt in uou a co lo ca r n o m er ca do a v e lh a e d esa tua l i zad a v e rsão 4. 2.Le e (yep! o grande sujeito que inventou o HTML) . D es de o ap a re ci me nto da I nt ern et t e m s id o f ei tas vá r ias te ntat i vas p ara s e n or ma ti za r o HTM L n ota da me nt e at ra vés d o World Wide Web Consortium (W 3 C) fu nd a do po r T im Be r ne rs. Mas pe lo fat o de do mi na r 9 0 % d o m e rca do a Nets ca pe n ão te r ia . P or mu it os an os a M ic roso ft i g no rou co m p let am e nte a I n te rn et. Ope ra e Ne tsc ap e ta m bé m su p or tam as n or mas. Nos d ias at ua is as nor m as HTML es tão na s ua v e rsão 4. e tc B lo gs : b 2. M ed iaW ik i. Pe lo co nt rár i o.49 - . O q ue v em a s eg u i r é h is tó ri a. e tc W ik is : P mW ik i.

es tão nas ISO 639 standard . O DT D é im p or tan te a in da . namespaces no site do W3C .org/1999/xhtml" lang="pt-br"> <head> <title>Título</title> </head> <body> <p>texto texto</p> </body> </html> A l ém d o Do cu m en t T y p e Def in ition. usa n do o v a li da do r gr at u ito do W 3C.1 . x m lns é a b re vi ação d e "XM L. pa ra a va l i daç ão da p ág i na. in fo r ma nd o o q uê est á e r ra do e on d e. 20. se rá a p rese nt ada u ma l ista d e e r ros. d e po is c liq u e no bot ão va l i dar.w 3. As a br e via tu ras p ara as l íng uas ex ist en tes no m u n do to do.5.o r g ) P ar a tes tar o va l i dad o r fa ça o se g u in te: c ri e u ma pá gi na e p ub l i qu e n a I n te r net.org/TR/xhtml1/DTD/xhtml1-strict. Ist o é t u do o q ue você p r ec isa s ab e r. vo cê pr ec isa in fo rm ar ao n av e ga dor q u al é o "d i al eto " do H TML e no se u caso v o cê a pr en d eu XHTM L. v o cê usa o Document Type Definition . S e não.o r g/ 1 99 9 /xh tm l.o r g e lá di g it e o e n de re ço (a URL) da su a pá g i na.Legal!! Posso anunciar?! D e v ido à e xis tê nc ia d e di f er en tes ti pos de HTM L.2 . usa nd o os at r ibu tos x m lns e lan g. Co me ta a l gu ns e r ros pro pos i tai s no se u có d ig o pa ra v e r if i car o q u e aco nt ec e. A se g ui r e ntr e e m h tt p: // va l id ato r.0 Strict//EN" "http://www.5. S e seu HTM L est iv e r c or r eto.http://www.Guia Prático de HTML – Prof.50 - .1.dtd"> <html xmlns="http://www. 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. ( ht tp : // va li da to r. 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") .1.Validação?! Porquê deveria eu fazer isto?! I ns i ra o DTD nas s uas p ág i nas e p o de rá v e rif i ca r e rr os n o se u HTM L. va i a pa re cer u ma me nsa ge m d e con g rat u laç ões. O Document Type Definition d e ve se r es c ri to se m p re no to po do do cu m en to: Ex em p lo 1 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Al g uns na ve ga dor es t en ta m i nte r p ret ar os e r ros c om et i dos pel os dese n vo l ve do res e co nse rtar o . O va l id ador não é úti l so me nt e no e n cont ro de e r ros.w 3. 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. 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 .tiagosouza. Use o exem p lo m ostr a do. 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. 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. Tiago Daniel de Souza http://www.com ----------------------------------------------------------------------------------------------------------- 20. P ar a i n fo rm a r ao na ve ga do r.w3.w3.w3.w 3.Na me -S pac e " e dev e te r sem p r e o va lo r h tt p :/ /ww w.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.

Guia Prático de HTML – Prof. div font font font AT RIB UTO align face size color F UN ÇÃO alinhamento fonte tamanho cor V ALO RES POS SÍVEIS letf. justify.com ----------------------------------------------------------------------------------------------------------- c ó di go m ost ra n do a e n con tr ará e r ros n o e r ro e ap rese nt am a e nt ão a j uda v ocê a e xis t iam p á gi na co rr e tam en te. d e ixo al g um as t ab el as de r e fe r ên ci a r á p id a que p od em se r a té i m pressas e gu ar da das no b o lso.51 - . 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 parágrafos cria uma divisão E XI GE FECH AMEN TO não sim recomendado sim Atribu to s d ive rso s CÓ DI GO p.GUIA DE REFERÊNCIA RÁPIDA C o mo res um o de to do o c ód i go HT ML ap res en ta do at é ago ra. center nome da fonte -7 a +7 ver no tópico de cores E sp aç am en to e en tid a de s CÓ DI GO &nbsp. Tiago Daniel de Souza http://www. F UN ÇÃO espaço simples E XI GE FECH AMEN TO não é uma tag O d ocu m en to H T ML bá s ic o <html> <head> <title>Aqui colocamos o título</title> </head> <body> Aqui colocamos os conteúdos visíveis </body> .tiagosouza. 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 . right. 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. O va l ida do r e n con tr ar e r ros q ue v oc ê não te nha ne m i d é ia d e qu e S e mp re val i d e suas p á gi nas. 21 . Ca rac te rístic as g e rais d e u m d o cu me nto H TML CÓ DI GO html head title body F UN ÇÃO bloco bloco bloco bloco interno é considerado documento html que define a cabeça do documento que define o título 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 itálico bloco sublinhado muda as características da fonte mantém o texto pré-formatado E XI GE FECH AMEN TO sim sim sim sim sim Qu eb ra d e linh a. Em n av ega do res assi m voc ê nun ca p r óp r io nav e ga do r.

. Tiago Daniel de Souza http://www. . . </h2> <h3>.com/">Isto é uma Ligação</a> <a href=" http://www. .tiagosouza.com/"><img src="URL" alt="Texto alternativo"></a> <a href="mailto:tiagocopa@gmail.Guia Prático de HTML – Prof.tiagosouza.52 - . . .tiagosouza. .com ">Enviar e-mail</a> Um a ân cora c o m n om e: <a name="dicas" id="dicas">Dicas Úteis</a> <a href="#dicas">Saltar para a Secção de Dicas</a> L is ta nã o o rd ena da <ul> <li>Primeiro item</li> <li>Item seguinte</li> </ul> L is ta o rd en ad a <ol> <li>Primeiro item</li> <li>Item seguinte</li> </ol> L is ta de de f in içõ es <dl> <dt>Primeiro termo</dt> <dd>Definição</dd> <dt>Termo seguinte</dt> <dd>Definição</dd> </dl> T ab e la s <table border="1"> <tr> <th>um cabeçalho</th> <th>outro cabeçalho</th> </tr> <tr> <td>algum texto</td> <td>mais texto</td> </tr> </table> .com ----------------------------------------------------------------------------------------------------------<html> E lem en tos d e c abeç a lh o (para capítulos ou secções) <h1>Cabeçalho maior</h1> <h2>. </h3> <h4>. </h4> <h5>. .</h5> <h6>Cabeçalho menor</h6> E lem en tos p a ra te xto <p>Isto é um parágrafo</p> <br> (mudança forçada de linha) <hr> (linha horizontal) <pre>Isto é texto pré-formatado</pre> E s tilos lóg ic os <em>Isto é texto enfatizado</em> <strong>Isto é texto forte</strong> <code>Isto é código de computador</code> E s tilos f ísic os <b>Isto é texto em negrito</b> <i>Isto é texto em itálico</i> L iga çõ es e ânc o ra s <a href="http://www.

Isto é um comentário --> <blockquote> Texto citado a partir de uma fonte externa.. ou "frames") <frameset cols="25%. representa o mesmo que © Ou tros E le m en tos <!-.53 - .html"> <frameset> F o rmu lá rio s <form action="http://www. Tiago Daniel de Souza http://www.tiagosouza.Guia Prático de HTML – Prof.html"> <frame src="pagina2. representa o mesmo que > &#169.75%"> <frame src="pagina1.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 &lt. </blockquote> <address> Endereço (1ª linha)<br> Endereço (2ª linha)<br> Cidade<br> </address> 22 – REFERÊNCIAS COMPLETAS DE HTML 4.--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> DESCRIÇÃO Permite inserir um comentário Indica o tipo de documento usado na página Insere uma âncora (marca que identifica o local do documento em que se encontra) Insere uma abreviação Insere um acrônimo Insere um endereço (postal) Insere um applet (miniaplicação 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 ligações relativas da página Define o tipo de letra base para a página..com ----------------------------------------------------------------------------------------------------------- S ubjan e las (molduras.01 To dos os e le me nt os ord e na dos a lf a bet i ca men te : ELEMENTO <!--.com/processar. representa o mesmo que < &gt.tiagosouza. Desuso (usar CSS) Define a direção em que o texto é apresentado Texto com letra maior Define uma citação extensa Elemento que contém o corpo (conteúdo visível) da página .

Dá informação sobre aquilo que o documento contém Define um bloco noframes.Guia Prático de HTML – Prof. A subjanela contém a sua própria página da Web Insere um conjunto de subjanelas ("frames") Define cabeçalhos ("headers") desde o nível 1 (mais importante) até ao nível 6 (menos importante) Contém informação importante a respeito do documento que não deve ser apresentada no corpo da página Desenha uma linha horizontal Elemento dentro do qual são colocados todos os restantes elementos da página Insere texto para ser escrito com caracteres itálicos Insere no interior da página da Web uma subjanela ("frame") contendo a sua própria página da Web Insere uma imagem Define uma caixa para inserção de texto num formulário Define texto que foi inserido em substituição de outro mais antigo Define texto inserido através do teclado Define uma marca que será associada a um controlo. Tiago Daniel de Souza http://www. o tamanho e a cor a aplicar ao texto. (usar CSS) Insere um formulário Define uma subjanela (moldura) dentro da janela principal do browser.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 mudança de linha forçada Insere um botão num formulário Define a legenda de uma tabela Texto alinhado ao centro. Desuso. Desuso. o qual só será apresentado se o browser não suportar o elemento <script> Insere um objeto dentro da página (como um filme em Flash. o qual só será apresentado se o browser não suportar os elementos <frameset> e <frame> Define um bloco noscript. o controle que estiver associado deverá ser acionado.54 - . Define um título num elemento <fieldset> Define um item de uma lista Faz referência a um recurso externo e estabelece a ligação com ele Define um mapeamento sobre uma imagem Define uma lista de menu. (usar CSS) . Insere uma citação Define o texto que é código de computador Define os atributos para as colunas de uma tabela Agrupa colunas numa tabela Insere texto que descreve uma definição Define texto que foi apagado ("deleted") Mostra uma lista de diretório. Desuso. Ao clicar nessa marca. Insere a definição de um termo Insere uma divisão (ou seção) dentro da página Insere uma lista de definições ("definition list") Insere a definição de um termo Insere texto enfatizado (escreve-se em itálico) Elemento que contém um grupo de campos de um formulário Define o tipo de letra. por exemplo) Define Define Define Insere Define Define Define Define uma lista ordenada um grupo de opções uma opção numa lista de um formulário um parágrafo um parâmetro para o elemento <object> texto pré-formatado uma citação curta texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso.tiagosouza. Desuso.

b r. h e ad.55 - . h r. s tyle. numa tabela Define uma área para inserção de texto num formulário Define o rodapé de uma tabela Define o cabeçalho de uma coluna numa tabela Define o cabeçalho de uma célula numa tabela Define o título da página Define uma linha de células numa tabela Define texto que imita o de uma máquina de escrever antiga ("teletype Define Insere Define Define Insere Define text") Define texto sublinhado ("underlined") Desuso (usar CSS) Define uma lista não ordenada ("unordered list") Define uma variável 23.1 . para m e s c rip t. f ram es e t. Define texto mais forte (será escrito em negrito) Define estilos CSS a aplicar na página 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 divisão. e title. 23. ou célula.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 código de computador um script uma lista com itens selecionáveis texto menor ("small") uma divisão (ou secção) dentro da página texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso (usar CSS).3 .Atributos nucleares ou intrínsecos (" Core Attributes ") Não pod em se r usa dos co m os el e me ntos ba se. if ram e . h tm l. f ra m e. ATRIBUTOS ESPECIAIS DE HTML 4 23. O s a tr i bu tos a p rese nt ados na l ist a se g ui nt e fa ze m p ar te d o n úc leo ("core") da li n gu ag em HTM L e são ra ras as e xc eçõ es qu e po de m se r usa das e m to dos os el e me ntos d o HTM L 4.Guia Prático de HTML – Prof. me ta. O s a tr i bu tos es p ec í fi cos d e ca da e l em en to são des c rit os j un to à des cr i ção do p ró pr i o e l em en to n a Re fe rê n cia d e H TML (veja mais acima) . Tiago Daniel de Souza http://www. AT RIB UTO class id style title V ALO R class_rule ou style_rule id_name style_definition tooltip_text DES CRI ÇÃO A classe (CSS) a que pertence o elemento Um nome único (não deve ser repetido no mesmo documento) para o elemento Definição de um estilo dentro do próprio corpo do documento ("inline style definition") Texto a apresentar como dica 23. s c rip t.2 . p or q ue são at r i bu tos i n tr í nse cos da l i nguag e m. p a ram.tiagosouza.Atributos intrínsecos Q uas e t odos os e lem e ntos do HTML p oss ue m a tr i bu tos. .Atributos lingüísticos Não po de se r us ado co m os e l em en tos bas e.

s ty l e.Atributos de teclado AT RIB UTO accesskey V ALO R carácter (corresponde a uma tecla) número DES CRI ÇÃO Define um atalho do teclado (seqüência de teclas) que permite aceder mais rapidamente a um elemento da página Define o número de ordem ("tab order") do elemento no acesso através da tecla tab tabindex 23. sc r ipt . c om o po r ex em p lo.5 . b do.7 . h ea d.4 . i fr ame . h t ml .6 .com ----------------------------------------------------------------------------------------------------------- AT RIB UTO dir lang V ALO R ltr | rtl DES CRI ÇÃO Define a direção do texto Define o código da língua usada na escrita dos textos language_code 23. me ta. A lis ta a pr es en tad a m a is a ba ixo m ost ra os a tr i bu tos qu e p od em os i nse r i r nos e le me ntos do HTML pa ra d e fin i r a ções de res pos ta a e ve nt os.Eventos de janela A p ar ti r da ve rsão 4 d a li n guag e m HTM L p r at ica m en te to dos os el em en tos p o de m d ese n cad ea r ev e ntos qu e t êm com o r es post a a e xe cu ção d e a ções p o r p a rte d o na ve ga do r. S ó po d em se r usad os c om os e l em e ntos <bo d y> e <fra m es e t> AT RIB UTO onload onunload V ALO R script script DES CRI ÇÃO Script a executar quando o documento acabar de ser carregado Script a executar quando o documento for abandonado 23. Tiago Daniel de Souza http://www. exe c uta r có dig os J ava S cr i p t qu an do o v is i tan te c li ca r n u m de te r mi na do e le me nto .tiagosouza. pa ra m. ATRIBUTO onkeydown onkeypress onkeyup VALOR DESCRIÇÃO Script a executar quando uma tecla é pressionada Script a executar quando uma tecla é pressionada e seguidamente libertada Script a executar quando uma tecla é libertada script script script . e ti t le. f ra me. b r.Eventos de teclado Não p od em s e r usa dos co m os e le me nt o base .Guia Prático de HTML – Prof. f ra mes et.56 - .Eventos para formulários S ó po d em se r usad os c om e l em en tos asso c ia dos a u m fo rm u lár io : ATRIBUTO onchange onsubmit onreset onselect onblur onfocus VALOR DESCRIÇÃO Script a executar quando o uma alteração Script a executar quando o Script a executar quando o reposto nos valores iniciais Script a executar quando o Script a executar quando o Script a executar quando o script script script script script script valor contido no elemento sofrer formulário for submetido conteúdo do formulário for elemento for selecionado elemento perder o foco elemento ganhar o foco 23.

o S GML é u t il i za do pa ra d efi n i r n ov as l i ngu a ge ns d e m ar ca ção e a tu al me nt e o HTM L é de f ini d o at ra vés de S GML.Eventos do mouse Não po dem s er usad os co m os e le me ntos base.2 .O consórcio da Web O HTML e d e ma is l in g ua ge ns d e ma rca ção são a tu al m ente re g u lam en ta dos p e lo Wo rl d Wi d e W eb C onso r ti um . C o mo meta l in g ua ge m. t an to é q u e e las est ão s en do d es en vo lv id as p a ra a como da r da dos c om d i fe re nt es pr opós it os.1 .tiagosouza. Linguagem de Marcação Genérica Padrão) fo i a pr i me i ra g e ne ra l iza ção de li n gua ge m d e ma rc ação a se r l a rg am en te a do ta da.SGML e HTML O S GML (ou Standard Generalized Markup Language. O s u cesso d o HTM L l e vou a d i v ers os pes q u isa dores a ex plo ra r ma is as p oss i bi l i dad es das l i ng u ag ens de m ar ca ção q u e: • • • A co mo de m b e m o t ip o d e i n fo rma ção qu e pr e te nd em ar maz ena r S e pa re m o c on te ú do da vis ua l izaç ão P ossa m s er i n te rp r etad os por d ive rsos p ro gra mas A ab or da ge m qu e as pes qu isas n a ár ea es co lh er am fo i a bu sca po r u ma g e ne ra l iza ção to ta l das l i ng ua gen s e du as m et al i ng uag e ns (linguagens usadas para definir linguagens) fo ra m de f in i das : o S GML e o XML. o Co nsór c io da W eb ou s im p les me nt e W3C .Guia Prático de HTML – Prof. h tm l. br. par am. i f ra me. sc r i pt. sty l e e t it le . ATRIBUTO onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup VALOR DESCRIÇÃO Script a executar quando Script a executar quando Script a executar quando Script a executar quando Script a executar quando sobre um elemento Script a executar quando um elemento Script a executar quando script script script script script script script é é o o o detectado um clique no rato detectado um clique duplo no rato botão do rato é pressionado ponteiro do rato muda de posição ponteiro do rato deixa de estar o ponteiro do rato passa a estar sobre o botão do rato é libertado 24. b do. Nos p róx i mos tó pi cos ve re mos c om o essa g e ne ra l iza ção es tá tom an do fo rm a. u ma i n ic ia ti v a cr ia da p a ra pa d ron i za r m ui tas d as t ecn o log ias d e i n fo rm ação s ur g i das com o a d ve nto da I nt e rne t. me ta. fra mese t. O PRESENTE E O FUTURO DO MARKUP A s l i ng uag e ns d e m a rca ção se mos trar a m fo r mas po de ros íss imas pa ra a r maz en ar e cat eg or i za r co nt eú do. 24.57 - .com ----------------------------------------------------------------------------------------------------------- 23. .8 . in clu i n do re p res en ta ções d e r ot eam en to d e c ha mad as te le fôn i cas. Tiago Daniel de Souza http://www. f ram e. fó rm u las ma te má ti cas e e s que mas d e c la ssi f ica ção de r em é d ios. 24. h ea d.

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. 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. um a par e lh o mó vel . Tiago Daniel de Souza http://www. Exe m p los disso sã o os p o dcas ts e o v o dcas t. 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. músicas ou programas de rádio) . Um toc ad or d e á u d io po de se r c ons ta nte me nt e a l im en ta do co m u m po d cast e co m as i nf or m açõ es con ti das ne l e b ai xar t odos os á u d ios a uto ma ti cam e nte . qu e é u m c on tê in e r p a ra a r maz en ar i n fo r maçõ es de s ites n a i nt er ne t.tiagosouza. sem i nt e rv enç ão do usuá rio. www. No en ta nto o q ue vo cê a p re n de u é o bás i co e a in da há m u i ta co isa a . qu e pod e s er facil m en te in te r p ret ada p o r o ut ros s i tes e p ro gram as. mas que se rv e pa ra d e f in i r l in gu a ge ns de m a rca ção co m p ro pós it os esp ecí fi co s e co m u ma si nt ax e b e m es tr i ta. R DF: usa do pr i nc i pa lm e nte pa ra a rma z ena r n ot íc ias.imasters. se al g ué m q u ise r di v u l ga r a l gu m ti po d e c on te ú do pu b l ic ad o no s i te iMast e rs de nt ro d e se u s ite . o R DF (Resource Description Framework) é um a l in g uag e m u t i li za da pa ra c ri ar um a o ut ra so pa d e let r in has con h ec i da com o RSS (RDF Site Summary. A lém d isso. Então. vo cê TE RI A q ue f az er u m p ro g ra ma b e m c om p l ica do p a ra ex tr a ir essa i n fo r maçã o d o HTM L. agora eu já sei tudo?! Vo cê a p re nd e u u m boc ad o d e coi sas e já est á e m co ndi çõ es d e c ons tr u i r se u w e bsi te. ou Conteúdo de Sítios em RDF) . um se r 24. u m p r og ra ma q u e f a z a le i tu ra de 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. as data s e os/ as au tor es das n ot íc ias n um a es tr ut ur a be m r í g id a. muito bem conceituado.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. que na da mai s é do que u m ar q u iv o es c ri to num d ia le to X ML qu e co nt ém os tí t u los. DICAS FINAIS S e vo cê est á le n do is to a qu i n este mom en to.br O R SS r esol v eu o p ro bl e ma d e jun ta r i nf or ma ções de d if e re nt es s ites . et c) . mas o s it e iM aste rs t am bé m o fe r ece s eu c on te ú do em R SS. p ara b éns. * iMasters é um site voltado a desenvolvedores web. basta uti l i za r o RSS d o i Mast ers. iss o s i gn i fi ca qu e vo cê c e rta me nt e es tá ap to c om o con te ú do a qu i tr an sm it i do. XHT ML: um a v ers ão d o HTM L ma is si m p les e es c ri ta em XML . E nt ão. se vo cê q ui sesse d i v u lga r n ot íc ias veic u la das do s it e iM ast e rs d e nt ro de se u p ró pr i o we bs ite .Guia Prático de HTML – Prof.com ----------------------------------------------------------------------------------------------------------- 24.58 - . P or exe m pl o. 25. Ex em p los d e l in g uage ns de ma rc açã o c r ia das e m XM L são : • • • • M a th ML: u sa da pa ra n ota ção ma te mát ic a. 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.com.4 . 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.RDF e Syndication E m esp ec ia l. áudios de notícias. 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.

mas as p esso as b us ca m i n fo r maçã o na In te rn et. 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. H obbies ou in te re sse s e sp ec ia is: fi l mes. 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. moto c ic let as. • outros tais como. No se u n av ega do r vá ao me nu "View" .Guia Prático de HTML – Prof.59 - . O que pretende divulgar?! Q u e t ip o d e con te úd o v oc ê po de a p res en ta r na We b ? ! P rat i ca me nt e o q u e q u is er."Código Fonte" p ar a ve r o có d i go d o s i te. Q uan d o e n con tr a r a l gu m s it e q u e con te n ha u ma c o isa qu e v o cê a che i nter essa nt e. o HTM L. Na pá g ina d e en tr ad a d os s i tes p a ra cad ast ro em m ecan is mos de b us ca v oc ê en co nt ra rá u m l in k pa ra a di c io na r s eu si te (o mais importante é o • • • • Google mas. 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. 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. re v ist as. es tud e o c ó di go do s ite . 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. P ublica çõe s: com o jo rn ais . Nes ta a post i la vo cê a p re nd eu a usa r o Bl oc o d e Not as. Nes ta ú lt i ma li ção. 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. existem AlltheWeb e Lycos).w 3c. br o u p el o p ró p r io Goo g le. 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.o rg C o lo qu e con te ú dos nas s uas pá gi na s. por ex em p lo. m as ta m bém es tar á fa ci l it an do a le i tu ra. DMOZ. qu e é u m s im p les e fá ci l e d ito r d e t exto s. 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. AltaVista. E is a q ui a l gu ns t i pos d e c on te ú do m a is co mun s na We b. Como eu aprendo mais?! A n tes de m a is n ada é m u ito i m po rt an te q u e vo cê c o ntin ue a tr ab al har e e xp er i me nta r co m t ud o q ue voc ê ap re n deu n est e tut or ia l. us e o DTD e v al i de s uas p ág in as no h tt p :/ /va l i da tor . Es cr e va u m XHTM L c lar o. S i ga as nor m as e va lid e s eu có di g o. al ém d a s ua f am í l ia.com ----------------------------------------------------------------------------------------------------------- se r ap er f eiç oa da.tiagosouza. in te r p ret ação e man ut en ção d o có d i go. et c. L e mb r e-se d e ca das tr a r se u s ite nos si tes de b us ca. Mas. . Yahoo. de ixo a l gu mas d i cas fi na is : • P ar a com eç ar . n o mo me nt o: • • • I nfo rma çõ e s pe ss oa is: in fo rma ções so b re vo cê. com . L em br e-s e qu e HTM L é ape nas a f e r ram en ta q u e poss ib i l it a a pr ese nt ar i nf or m ação na I n te r net. 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. o c on te ú do. S ó nos rest a des eja r a vo cê q u e p ass e ho ras a gra dá ve is ao la do d o se u nov o a m igo . P ág i nas l ind as e be m d es en ha das s ão ó ti mas.las e v is itá -la s. possa m e nco ntrá."Ver" e esc ol ha "Source" . d e m od o a q ue o ut ras pessoas . Tiago Daniel de Souza http://www. n ão faç a di sto u ma fo nt e d e st r ess.

a p r i nc í pio não i mp or ta a o r de m. d uas es tr u tu ras e cr i ar um a no va fo rma d e n av e gaçã o. . E du ca çã o on line : n u me rosas un i ve rsi d ad es.com ----------------------------------------------------------------------------------------------------------• • • • • • P e rf is de e m p re sa: o qu e u ma e m p resa faz ou ve nd e. 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. Divida seu conteúdo em tópicos C r i e u ma list a co m os p r i nc i pa is t óp i cos.tiagosouza. Ass im . 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. P es qu isas d e op in iã o: a in ter at i vi da d e c om o usu ár io a tr av és de f o rm u lár ios. c ai xas d e su g estõ es. esc ol as e em p r esas p a rt ic u la res o fe re ce m o e nsi no a d is tân c ia a tra vé s da We b. • 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. mas se p e rca l i sta n do um a q u an ti da de e no r me de tó p icos (seu leitor poderá se cansar e se perder em meio a tantas opções). mas a d ete rm i naçã o i rá a ju dá -l o a e la bo ra r. a for m a q u e ima g ina s ua pá gin a. O ú n ico l im i te da We b é a sua p r óp r ia von ta de. e tc. f i ca rá be m ma is fác i l de c om eça r se u t ra ba l ho. g ui as d e t r ei na me nto. Vo cê po de rá com b i nar. Ca tá lo go s d e co mp ra s: c om er ci a li za ção de a rt i gos. p a re e nav e gu e u m p o uco pe la I nt e rn et. a té mes mo. Po r i sso. e tc. S ua l is ta p o de rá te r q u a ntos tó p icos d ese ja r. e tc Do cu m en ta çã o On -lin e: d esd e ma n uai s. Es ta é um a fo r ma de c om eça r a se o rga ni za r. or g an i za r e c o di f ica r su as pá gi nas com u ma m a ior p rob a bi l i da de d e s uc esso. e tc. d i c io nár ios. id é ias. Organização e Navegação A q u i de sc re ve r ei a l gum as das est r ut ur as e n av e gaçã o e s uas ca ra ct er íst i cas e a in da con sid e ra ções im p or tan tes co mo : • • O s t ipo s de i n fo rma ção qu e s e ad a pta m m el h or a c ad a es tr ut u ra. Estabeleça seus objetivos Vo cê de ve se pe r g un ta r os qu e se us le ito res pr oc ur am? ! O qu e des ej a r eal iz a r c om sua ap r ese nta ção ? ! E les le rão a pág i na i nt ei ra ou ap enas u ma par t e d e la ? ! A n tes d e co me ça r ent ra r co m có d ig os o u i m ag ens vo cê d ev e p e nsa r o q u e q u er o co loc ar e m m inh a pá g ina ?! C o mo se rá est r ut ur ad a ? ! E la est á a de q ua da o u não ao m e u p ú bl i co a lv o? ! O s ob je t ivos não p r ec is am se r g r an d iosos. s e a s ua id éi a n ão es t iv er nest a l ist a ou p a re ce r m ei o m al uc a o u a in da não est iv e r a ma du re c i da. C aso vá d ese n vo lv er u ma a p rese nt ação We b pa ra um a emp re sa o u p essoas é i m po rt an te q u e vo cê c ol ha ju nt o ao s eu cl ie nt e se us o b jet i vos. L oja s on lin e . Tiago Daniel de Souza http://www.Guia Prático de HTML – Prof.60 - .

tiagosouza. Tiago Daniel de Souza http://www. qu e res ul ta rá e m a rq u iv os pe qu eno s. Caso p re c ise u t i li za r i ma ge ns Tr ue C olo r. Pa ra qu al t i po d e p ú b l i co voc ê es tá d is pon i b i li za n do i n fo rma ção ? ! Q uai s são as pr io ri d ad es e i nt e resses dest e p ú b l ico ? Qu e t i po d e c on exão é m a is usa da p or el e? ! A s res postas pa ra a se g un da p erg u nt a c e rta me nt e e nv o lv em t rês po ntos : o 1 º é o con te úd o. Po r exe mp lo: mon i to r 1 4 p o le ga das c om reso l uç ão d e 6 40x 48 0. É o e lem e nto c en tr a l. O 2 º po nto é o des i g n do s it e (estrutura de navegação e projeto gráfico). Es tr ut u ra r a i n fo rma ção d e fo r ma qu e a na ve ga ção se ja o m a is i nt ui t i va p oss ív e l faz co m qu e s ua a pr ese nt ação We b t en ha m u ito mai s c ha nc e d e s uc esso. pro c ur e t ra ba l har co m i ma ge ns p al et i za das (formato .gif) . 2 .com ----------------------------------------------------------------------------------------------------------- Webdesign e Visão do Projeto A ma io r ia d as pessoas asso c iam D es i gn uni ca me nt e ao p roj eto g r áf i co de u m We b Si te.61 - . O ut ro p on to é a at ua l izaç ão pa ra q u e não pe r ca u ma d as p r i nc i pa is ca ra cte r íst i cas da I nt e rn et : a d i nam i c idad e. O m e lho r r es u lta do p a ra isso se rá t ra balh ar sua s ima ge ns em R GB e d e po is i nde xá. .las com o m eno r n ú m ero d e co r es poss íve l. co ns id er an do o ti po d e i nfo r ma ção d isp on i bi li za da c on fo r me se u p ú b l ico a lv o. jpe g. s eja de f or ma t ext ua l. o q u e é u m e r ro. A c ons tr ução d e u m We bs it e dev e. 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. d es de o des en ho de su a est r utu ra de na ve ga ção e fo rm a d e d i sp on i bi l i za ção da i n fo r maçã o a té o des en vo l vi me nto d o p ro je to g r áf i co. Nu m pro jet o g rá fi co d ev e se mp r e se p erg u nt ar se s ua ap res en ta ção f i co u a de qu a da o u não ao qu e s eu c l ie nte d ese ja va e ao s eu p ú b l ico a l vo. faç a co m a m el hor d iag ram açã o d as pá gi nas a co nte ça q u an do o s it e é vi st o n esse t ip o de mo ni to r e r eso l uçã o. 5 . 4 . O co nc e ito d e W eb D es i gn en vo l ve t odo s os as p ec tos da con st r uçã o d e u m s it e. 3 . Conteúdo e Forma O q ue faz u ma pess oa e nt ra r em u m s i te ?! O fa z a pess oa q ue re r ret or na r? ! Es tas pe r gu n tas de vem se m p re es ta r na cab e ça das pess oas de u ma e q ui pe d e c ons tr u ção d e si tes. s er e nt en d i da com o u m p ro jet o. A pá g i na d e en tra da d e um s it e é mu i to i mpo r tant e. S e mp re i ndi q u e em que b rows er s ua pá g i na se rá m e lhor v is ua li zad a. Na c r iaçã o d o p ro j eto g rá f ico . co mpo sto d e fas es e d ese nvo lv i do po r pess oas de b ac k g rou nd s d i f er en tes. E la dev e se r p r oj eta da d e fo r ma q u e d iga a q u e o si te se de st in a. in fo rme n o s it e. 1 . sa lv e-as e m fo r mato . P ar a te r u ma g ar an t ia que suas im a ge ns se rão se mp r e be m v is ua l iz ad as. t en te se mp r e o p ta r po r so l uções q u e m e lh or se a da pt em a p la ta for ma m ais usad a. an tes d e ma is nad a. v isu al o u es tru t ura l.Guia Prático de HTML – Prof. C aso o se u si te de va se r dia g ram a do pa ra u ma r eso lu ção o u t ama n ho de mo ni to r d i f er en tes d o ma is usa do.

a não s e r q ue o p on to c ha ve se ja m as i m ag ens. Po r 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 ”. Mas q ua l qu e r tex to. g r áf i co.tiagosouza. bl ogs po t. 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. T ia go So u za h tt p :/ /ww w. A n et iq ue ta e Do m ín io pú b l ico : A We b f oi c r ia da com b ase em se r ca paz d e a ta r l in ks d e h ip e rt exto de q ua l qu er o ut ra lo ca liz ação da re d e. com h tt p :/ /us ecl i c k. v íd eo ou á ud i o o r i gi nai s de ve se r p ro te g id o. Es pe ro qu e v oc ê te nha gosta do.62 - . A o a va nça r n os est u dos lo go se p e rc e be essa ra m if i caç ão e c ab e a o es tu dan te d es en vo lv er a ár ea q ue ma is l he a tra i. qu an do voc ê d is po n ib i l iz a u m si te.com ----------------------------------------------------------------------------------------------------------- 6 . i nt e rfa ces co m o usuá r io. A p esa r de e xc ita nt e. Po r iss o. a d is cuss ão so br e esses t ema s c om eça a fu g i r mu i to d o o b jet i vo ini c ia l des ta a pos ti la. 7 . O des ej o or i g in al d e um a pági na n ão é p r ote g i do. U m l i nk o u UR L não é p ro teg i do . 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.co m . O co nt eú do e fo r ma c omo el e é a p res en ta do se rão os p rin c i pa is a tra t ivos de s uas pág i nas. 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. tia gos ou za. t i po gr a fia . U m a b ra ço. C SS e p r og ra mas d e e d i ção d e i m ag en s. não pe nse que a net é ig u al a o ut ras mí d ias. 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. 8 . 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. C o nse qu ent em en te. 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. Tiago Daniel de Souza http://www. Os P rog r ama do res W eb po r s ua v e z são r es po nsá vei s pe la es tr u tu ra ção d os có d i gos da s pá gin as. 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. CONCLUSÃO O v ol u me d e i n for maç ões no mu n do do Des en vo l vi me nt o We b é ex tr em am e nte g r an de .Guia Prático de HTML – Prof. 26. D i r ei tos au to ra is: A p r ote ção d e d ir e itos a ut ora is não cost u ma se r m u it o e vi de nt e n a We b.

Sign up to vote on this title
UsefulNot useful