Your SlideShare is downloading. ×
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
025 guia pratico-do-html-css-e-web-standards
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

025 guia pratico-do-html-css-e-web-standards

2,141

Published on

1 Comment
0 Likes
Statistics
Notes
  • Obrigado por postar, na época em que escrevi e distribuí o ebook na Internet, não imaginava essa repercussão toda! Fico feliz que esteja ajudando as pessoas :)

    Um abraço,
    Tiago Souza - www.tiagosouza.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,141
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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-
  • 2. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------SUMÁRIO1 . IN T RODUÇÃO ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 052 . SOB RE O HT ML .. ..... ........ ....... ........ ....... ........ ....... ........ ....... .. 053 . S U A P RI MEI R A PÁGIN A E M HT ML . ........ ........ ....... ........ ....... ... 06 3 .1 - O q ue es tá d en tro de u m a rq u i vo e m HTM L? ! .... ...... ........ ....... 06 3 .2 - Ex p eri m en te você mes mo ...... ........ ....... ........ ....... ........ ....... 06 3 .3 - Ex p l ica ção do Exe m p lo .......... ........ ....... ........ ....... ........ ....... 06 3 .4 - De vem os usa r a ex te nsão .h t m ou . htm l ? ............. ........ ....... .. 07 3 .5 - E d itor es " P uro s" v e rsus W YS IW Y G ......... ........ ....... ........ ....... . 07 3 .6 - FA Q (P e rg u ntas F r eq üe nt es) .. ........ ....... ........ ....... ........ ....... 074 . ELE MEN TOS E AT R IBUTOS ........ .......... ........ ....... ........ ....... ..... 08 4 .1 – El eme nt os . .......... ........ ....... ........ ....... ........ ....... ........ ....... 08 4 .2 – A tr i bu tos das Ta gs ...... ....... ........ ....... ........ ....... ........ ....... .. 09 4 .2 .1 - A t rib u tos pod em s e r a p l ica dos à m aio r ia das tag s ....... ........ . 10 4 .3 - De vem os usa r as pas o u p l ic as/a pós tro fos ..... ....... ........ ....... ... 11 4 .4 – Notas Rá p id as ..... ........ ....... ........ ....... ........ ....... ........ ....... . 115 . O CABEÇALHO DE UM DO CUM ENTO H TM L ... ........... ........ ....... .. 11 5 .1 - O El em e nto <h ea d > ( ca be ça lh o do doc u me nto ) ..... ........ ....... .. 11 5 .1 .1 - A In fo r ma ção C o nt id a no E le me nto <h ea d > ....... ........ ....... 11 5 .1 .2 - E lem e ntos de c ab eç al ho ( <hea d > ) ...... ............ ........ ...... 12 5 .1 .3 - A de c la raçã o D O CT YPE ..... ........ ....... ........ ....... ........ ....... 12 5 .2 - O e lem e nto <m et a> .. ........... ........ ....... ........ ....... ........ ....... 12 5 .2 .1 - P ala v ras- cha ve pa ra os m oto re s de p es qu isa ..... ........ ....... . 12 5 .2 .2 - Va lo res des con h ec i dos pa ra o at r ibu to nam e do <m eta > .... . 136 . MODIFICAN DO O CO RPO DO DO CUMEN TO .......... ........ ....... ..... 137 . ELE MEN TOS B ÁSI COS DA LIN GU AGEM H TML ...... ........ ....... ...... 14 7 .1 – Ca b eç al hos .... ..... ........ ....... ........ ....... ........ ....... ........ ....... . 14 7 .2 – Pa rág r af os . ........ ........ ....... ........ ....... ........ ....... ........ ....... . 14 7 .2 .1 - A l i nh am en tos d e pa rá graf o ....... ........ ........ ....... ........ ...... 14 7 .3 - C ria nd o u ma di vi são ..... ....... ........ ....... ........ ....... ........ ....... . 15 7 .4 – Q ue br as d e L i nha ..... ........... ........ ....... ........ ....... ........ ....... 16 7 .5 – Co men tá r ios ......... ........ ....... ........ ....... ........ ....... ........ ...... 16 7 .6 – I n fo rm aç ões Úte is .... .......... ........ ....... ........ ....... ........ ....... . 167 .7 – L ista d e e le me ntos bás icos d o HTM L . ..... ........ ....... ........ ....... ... 178 . FOR MAT AÇÃO DE TE XTO . ...... ........ ....... ........ ....... ........ ....... .... 17 8 .1 – El eme nt os pa ra f o rma ta ção d e te xto ...... ........ ....... ........ ....... 17 8 .2 – El eme nt os pa ra o " ou tp ut de có di go de com p utad o r" .... ........ ... 18 8 .3 – El eme nt os pa ra c i taç ões e li stas de def i n iç ões ........ ........ ....... 189 . LI GAÇÕES DE HIPE R TE XTO ( "LIN KS") ........ .......... ........ ....... ... 18 9 .1 - Li n ks i n te rn os ....... ........ ....... ............... ........ ....... ........ ...... 19 9 .2 - Li n ks l oc ais o u re la ti vos ....... ........ ....... ........ ....... ........ ....... . 20 9 .3 - Li n ks e xte r nos ...... ........ ....... ........ ....... ........ ....... ........ ....... 20 9 .4 - Al vo ( ta r get ) ....... ........ ....... ........ ....... ........ ....... ........ ....... . 20 9 .5 – El eme nt os pa ra f a ze r l i gaçõ es . ............ ........ ....... ........ ....... .. 201 0 . LIS T AS ...... .......... ........ ....... ........ ....... ........ ....... ........ ....... ... 21 -2-
  • 3. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- 1 0. 1 - L is tas Não O r de na das ........ ........ ............... ....... ........ ....... .. 21 1 0. 2 - L is tas Or de na das .... ........... ........ ....... ........ ....... ........ ....... . 21 1 0. 3 – L istas de De fi ni çõ es ........... ........ ....... ........ ....... ........ ....... 21 1 0. 4 – E l em e ntos pa ra L is tas ........ ........ ....... ........ ....... ........ ....... . 221 1 . I MAGENS .... ........ ........ ....... ........ ....... ........ ....... ........ ....... ... 22 1 1. 1 - Ta ma nh o de exi b i ção da im a ge m . ....... ........ ....... ........ ....... .. 23 1 1. 2 - Tex to a lt er nat iv o ....... ........ ........ ....... ........ ....... ........ ....... . 24 1 1. 3 - Bo rda da i ma gem ......... ...... ........ ....... ........ ....... ........ ....... 24 1 1. 4 - A l inh am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24 1 1. 5 - Es paç am en to da ima g em ..... ........ ....... ........ ....... ........ ....... . 24 1 1. 6 – E l em e ntos re la ci ona dos c om im ag en s ............... ........ ....... ... 25 1 1. 7 – Fu nd os de Pá gi na .. ............ ........ ....... ........ ....... ........ ....... 25 1 1. 7. 1 - O a tr i bu to bgc ol or do e le me nt o <bo d y > . .......... ........ ...... 25 1 1. 7. 2 - O a tr i bu to bac k g ro un d ...... ........ ....... ........ ....... ........ ..... 26 1 1. 8 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 261 2 – CO RES .... .......... ........ ....... ........ ....... ........ ....... ........ ....... .... 27 1 2. 1 - Fo rm as d e ex pr i m i r co res ...... ............ ........ ....... ........ ....... .. 27 1 2. 2 – Nom es de co res .. ............. ........ ....... ........ ....... ........ ....... .. 27 1 2. 3 – Co res s eg u ras d a We b ........ ........ ............... ....... ........ ....... 28 1 2. 4 - Fo rm as d e ex pr i m i r o s va lo res das c or es .... .......... ........ ....... . 30 1 2. 5 - Ma is d e 1 6 m i lhõ es d e co res d if e re ntes .. ............. ........ ....... . 32 1 2. 6 - Ma is n om es de c or es ........... ........ ....... ........ ....... ........ ....... 321 3 . EN TI DADES , ACEN T U AÇÃO E CARACT ER ES ESP E CI AIS .... ....... 321 4 . TABE LAS ........ ...... ........ ....... ........ ....... ........ ....... ........ ....... .. 33 1 4. 1 - Es paç am en to en t re c é lu las ..... ........... ........ ....... ........ ....... .. 35 1 4. 2 - P re en c h im en to d e c é lu las .... ........ ............... ....... ........ ....... 35 1 4. 3 - La r gu ra de cé lul as e ta b elas .... ................... ....... ........ ....... . 37 1 4. 4 - Uso d e ta b el as .... ........ ....... ........ ....... ........ ....... ........ ....... 37 1 4. 5 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 37 1 4. 6 – E l em e ntos re la ti vos a tab e la ..... ....... ........ ....... ........ ....... ... 371 5 . FO RMUL ÁRIO S ..... ........ ....... ........ ....... ........ ............... ....... .. 38 1 5. 1 – C ri ar Fo r mu lá r ios .... ........... ........ ....... ........ ....... ........ ....... 38 1 5. 2 – i np ut .. ......... ...... ........ ....... ........ ....... ........ ....... ........ ...... 38 1 5. 3 - "R adi o Bu tto ns" ...... ............ ........ ....... ........ ....... ........ ...... 39 1 5. 4 – C hec k box es ....... ........ ....... ........ ....... ........ ....... ........ ....... 39 1 5. 5 - O a tr i b uto a ct io n e o bo tão de s ubm iss ão ......... ........ ....... .... 39 1 5. 6 - E lem e ntos pa ra F or m ulá r ios .... ........... ........ ....... ........ ....... . 401 6 . F R AMES H TML ..... ........ ....... ........ ....... ........ ....... ........ ....... ... 40 1 6. 1 - Va nta ge ns e des van ta ge ns d as mo l dur as ....... ....... ........ ....... 40 1 6. 2 - O E le me nt o f ram ese t .......... ........ ....... ........ ....... ........ ....... 40 1 6. 3 – O Ele me nt o f ram e ...... ........ ........ ....... ........ ....... ........ ....... 41 1 6. 4 – D icas ..... ........... ........ ....... ........ ....... ........ ....... ........ ....... 41 1 6. 5 – E l em e ntos pa ra F ra mes ...... ........ ....... ........ ....... ........ ....... . 411 7 . INS ERÇÃO DE SCR IP TS ....... ........ ....... ........ ....... ........ ....... ... 41 1 7. 1 - Ins er i r um s cr ip t nu ma p ág i na HTM L .... ........ ....... ........ ....... . 41 1 7. 1. 1 - Um exe m p lo p rá t ico ....... ........ ....... ........ ....... ........ ....... 42 1 7. 2 - Como li da r c om os b ro wser s an ti gos ..... ........ ....... ........ ....... 42 1 7. 2. 1 - O E le me nto <n osc r i pt > ...... ............ ........ ....... ........ ...... 42 1 7. 2. 2 - Um exe m p lo ...... ............ ........ ....... ........ ....... ........ ...... 42 1 7. 3 - E lem e ntos pa ra ins er i r scr i p ts e có d ig o ...... ......... ........ ....... . 43 -3-
  • 4. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------1 8 . O UT RAS POSSIBILI DADES ...... .......... ........ ....... ........ ....... ..... 431 9 . COLOCAN DO S EU S IT E NO AR ............. ........ ....... ........ ....... ... 43 1 9. 1 – Ist o é t u do q ue eu pr ec iso ? ! ........ ...... ........ ....... ........ ....... . 44 1 9. 2 - Como e u f aço en v io os a r qu i vos do me u s ite ? ! ...... ........ ....... . 442 0 . H TML A V AN ÇADO ........ ........ ........ ....... ........ ....... ........ ....... ... 45 2 0. 1 - Fo l has de Est i lo ( C SS ) . ....... ........ ....... ........ ....... ........ ....... . 46 2 0. 2 – T emp l ate s . ......... ........ ....... ........ ....... ........ ....... ........ ...... 47 2 0. 3 – Ac ess i bi l i da de .... ........ ....... ........ ....... ........ ....... ........ ....... 47 2 0. 4 – Si tes di nâ mi cos o u a ut oma ti za dos ....... ........ ....... ........ ....... . 48 2 0. 5 - We b sta n da rds e va li da ção ...... .................... ....... ........ ....... 49 2 0. 5. 1 - O q u e ma is há pa ra co nh e ce r s ob re HTM L ? ! ..... ........ ....... ... 49 2 0. 5. 1. 1 - L e ga l !! Posso a nu nc iar ? ! ... ........... ........ ....... ........ ...... 50 2 0. 5. 1. 2 - Va l i daçã o? ! Po r q uê d ev e r ia eu faz e r is to? ! ..... ........ ...... 502 1 - GUI A DE REF ERÊN CI A R ÁPI DA .......... ........ ....... ........ ....... ... 512 2 – RE FER ÊN CI AS COM PLE TAS DE H TM L 4 .0 1 ...... ........ ....... ...... 532 3 . AT RIBUTO S E SPE CI AI S DE HT ML 4 ...... ........ ....... ........ ....... ... 55 2 3. 1 - A tr ib u tos i n tr ín se cos ......... ........ ....... ........ ....... ........ ....... .. 55 2 3. 2 - A tr ib u tos n u cle ar es ou int r ín sec os (" Co r e At tr ib u tes ") ........ .... 55 2 3. 3 - A tr ib u tos l i n güí st i cos ......... ........ ....... ........ ....... ........ ....... . 55 2 3. 4 - A tr ib u tos de tec la do .. ......... ........ ....... ........ ....... ........ ....... 56 2 3. 5 - E ven tos de jane la ... ........... ........ ....... ........ ....... ........ ....... . 56 2 3. 6 - E ven tos pa ra fo r mu lá ri os .... ........ ............... ....... ........ ....... . 56 2 3. 7 - E ven tos de t ecl a do ....... ..... ........ ....... ........ ....... ........ ....... . 56 2 3. 8 - E ven tos do mou se ...... ....... ........ ....... ........ ....... ........ ....... . 5724. O P RESEN TE E O F UT URO DO M AR KUP ........ ...... ........ ....... ..... 57 2 4. 1 - O con só rc io da We b ..... ....... ........ ....... ........ ....... ........ ....... 57 2 4. 2 - S GML e HTML ..... ........ ....... ........ ....... ........ ....... ........ ....... 57 2 4. 3 – XML ...... ............ ........ ....... ........ ....... ........ ....... ........ ....... 58 2 4. 4 - R DF e S y nd i cati o n .. ............ ........ ....... ........ ....... ........ ....... 582 5 . DI CAS FIN AI S ...... ........ ....... ........ ....... ........ ............... ....... .. 582 6 . CON CL US ÃO . ....... ........ ....... ........ ....... ........ ....... ........ ....... ... 62 -4-
  • 5. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------1. INTRODUÇÃOA s p essoas im ag i nam q ue é m u it o d i f íci l co nst r uir um s ite . I sto não év e r dad e !! Q ua l qu e r um p o de a pr e nd e r c om o cons t ru i r u ma pá g ina . S e v oc êc on ti n ua r l e n do, esta rá ap to a co nst r u ir um ra pid a me nte, q u an do me noses p era r.O u tro s pe nsa m - erroneamente - qu e s er á n ec essá rio so ft war es a van ça dos ec ar os par a c ons t ru i r w e bsi tes. É ve r da de q ue ex ist em m u itos so f twa resc ap az es de c r ia r u m w e bsi te par a vo cê. Al g u ns ma is f e c had os q u e o ut ros.Mas, s e voc ê pr ete n de tr i lh ar o ca m in ho c e rto, de ve rá cr ia r vo cê mes mo ow e bsi te. Fe l i zm en te, i sto é s i mp l es é v ocê já te m a sua d is pos iç ão to dos osso ft wa res q u e n ece ssi ta.O o bj et iv o d es ta m in ha a pos t il a é fo rn ec e r os c onh eci me nto s b ás icos qu ep e r mi ti rão c ons tr u i r um we bs it e d e fo rma co r ret a. A ap ost i la pa rt e d a estac az e ro e n ão r e qu e r q ual q u er con he c im en to pr é v io d e pro g ram ação.O b v ia me nte , a a pos ti l a não e ns in a tu do. D ia nt e d isto, se rá n e cessá r io q u ev oc ê se em p en he , pr at i qu e e co nso li d e os e ns ina men tos a q ui c on ti dos . Mas,n ão se abor r eç a, p ois a p re nd e r c om o co nstr u i r u m w eb s ite é bem d i ve rt i do eb ast an te sa tis fa tó rio q u an do v ocê tr i lh a o ca m in ho c ert o do a p ren d i za do.O K. Ch e ga d e c on ve rsa. Va mos co me ça r...2. SOBRE O HTMLO H T ML é u ma L in gu ag e m de m a rca ção d e te xto . M ais e sp e ci f i cam en te ,u ma l in g uag e m de mar ca ção d e h i p er tex to. P or ta nto, a nt es d e co me ça r a fa la rd e HTM L, va mos e nt en d er o q ue v em a s er u ma l in g uage m d e mar ca ção.L in gu ag en s d e ma rc a çã o (markup languages em inglês) s ão l in g ua ge ns q u ec om b in am t ext o com i n fo r maçõ es ex tras sob r e o tex to. Essa i n for m ação ex tr ap o de se r re p res en ta da po r d i ver sos s ím bol os o u pa la v ras- cha ve d if e re ntes,d e pe n de n do da l i ng uag e m d e mar ca ção com q u e est i verm os tr ab alh an do.O H T ML n ão e ra um a l i ng uag e m d e for m ata ção d e t extos q u alq ue r, e lap 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 mn u m o ut ro c o m pu ta do r, usa n do co mo me io a i nter n et. O pr oc essa do r ev is ua l iz ad or d e HTML são c ham a dos de n a ve ga dor , pe la car ac te r íst ic a d oh i p er tex to q u e p er m ite ao usu ár io " na da r" n a i n for maç ão.O na ve ga do r (também chamado de browser) , na da ma is faz d o q ue ab r i ra r qu i vos de co m pu tad o r e, ca so esses a rq u i vos co nt en ha m cód i go s HTML ,i n te r pr etá -los se g un do o pa d rão d o h i pe rt ex to e ge ra r a " pág i na h t ml ", q ue éa m an i fes ta ção g rá f ica dos có d ig os - aquilo que você usualmente vê quandonavega pela internet . Po r co nv e nçã o, os nom es d os a r qu i vos em HTM Lt e rm i nam c om .h tml. Ex em p lo : ind ex .h tm l, fo o. ba r.h tm l e e tc. hm l(existem também arquivos html que terminam com .shtml e outras extensõesmalucas) . 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 ou suá r io que usa o nav e ga do r q ua nto e m ou t ros co m pu ta do res : o nav e gado r éc ap az de a b ri r es ses a r qu i vos d es de q ue e les est eja m ac ess íve is - as ta isp á gi nas w eb . -5-
  • 6. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------3. SUA PRIMEIRA PÁGINA EM HTMLU ma pá gi na HTML é di v i d id a e m d u as par tes, a c abe ça e o c orpo . Na cab eç a(ou cabeçalho) sã o de f in i dos os a tr i b utos p r i nc i pa is d o do cu men to, co mo ot í tu lo e as p a lav ras -ch av e. O corp o c on tém a pa rt e v is í ve l do d o cu me nto, i.e,a q ue la qu e v oc ê ve rá p r oc essa da em s eu n av e ga dor . Ex is te a i nd a uma r eg i ãod 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 faltade juízo!) , m as não i re mos e nt rar ne sse m ér i to.3.1 - O que está dentro de um arquivo em HTML?! • U m a r qu i vo HT ML é con st it u íd o po r tex tos qu e de f i nem os e le me nt os da l i n gu ag em HTM L usa nd o "etiquetas de marcação" ; • A s et i qu etas de mar ca ção dão ins tr u ções a o nav e ga do r so b re a es t ru tu ra d o doc u men to e so bre a f or ma d e co mo a pá g ina de ve se r a p rese nt ada gr af i came nt e; • O s ar q ui vos HTM L po de m se r es c ri tos usa n do u m si m p les e d it or de t ext os e seu s no mes de ve m possu i r a ex te nsão .h tm l3.2 - Experimente você mesmoBo m, se vo cê u t il i za o Wi n dows (95, 98, 2000, XP, etc) , i n ic ie o Bloc o d eNot as (Notepad).A g ora d ig i te o se g u in te tex to:<html><head><title> Título da Página </title></head><body>Esta é minha primeira página. <b>Este texto está em negrito</b></body></html>S al ve este a r qu i vo com o no me in d ex .h tmA b ra o se u na v ega do r. A go ra a br a o ar q ui vo qu e vo cê sa lvo u a cim a, c ha mad oin de x .h tm u t i l iz an do a s o p ções d o m en u o u a r rast an d o o í co ne d o a r qu iv op a ra d en tro da ja ne la d o na ve gad o r. O bse rv e o r esu lta do.3.3 - Explicação do ExemploA p r i me i ra t ag e m s eu d o c um en to HTML é <h tm l>. Est a t ag d e fi n e o i n íc io d eu 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 vese r t ra ta do c omo u ma sé r ie de có d ig os HTM L. A ú lt ima ta g e m se u doc um e ntod e ve rá se r < /h tm l>. Es ta ta g i n d ica ao n av eg ador q ue é o f i m d e se ud o cu me nto HTM L.O tex to e nt r e as ta gs <h ea d> ... < /h ea d> é a in fo r ma ção d o ca b eça lh o.Ne nh u ma in fo r ma ção c on ti da no c ab eç al ho é exi b i da na jan el a do na v ega do r. -6-
  • 7. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------O te xto ent r e as ta gs < title > ... < /title> é o t ít u lo de se u do cu me nt o. Ot í tu lo se rá e xi b i do na l e ge n da d o na v ega do r, n a pa rt e d e c i ma do b ro wse r.O t exto ent r e as t ags <b od y> ... < /bod y> s ão as i nfo r maçõ es que ser ãoe xi b i das na p ág i na.O tex to e ntr e <b> ... < /b> f i ca rá c om o est i lo Ne g ri to (Bold)3.4 - Devemos usar a extensão .htm ou .html?O s no mes d os a r qu i vos esc r itos e m HTM L d e ve m t er a e xte nsão . h tm l, mas ae xte nsão .h tm a i nd a é u t il i za da. Est e f ato é uma he ra nç a dos t e mp os (pré-históricos no que diz respeito à Internet) d o M S- DO S e d o W ind ows 1 6 b its ,e m q ue os no mes dos a rq u ivo s t in ha m no m áxi mo 8 ca rac te res e as su ase xte nsõ es n ão p od iam te r ma is d e 3 ca rac te r es.Essas de f ici ê nc ias, q ue no p assad o o br i ga ra m a usa r a ex te nsão . h tm em v e zd e .h tm l já fo ra m e lim i na das. Po r isso de ve mos usa r a ext ensão . h tm l, a nãose r q ue ex ist a u ma b oa ra zão pa ra voc ê esta r u t i li za n do . h tm (poucoprovável).3.5 - Editores "Puros" versus WYSIWYGEx 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 em a rca ção. A p r im e ir a c ons is te em es cr ev e r o tex to, usa n do as in st ru çõe s d al i n gu ag em , n u m e d itor d e te xto p u ro. E m se g ui da , u sa-se o pr oc essa do r d et ext o pa ra p r od u z ir o t ext o fo r ma tad o.A o ut ra ma ne i ra é usa r u m e d it or d e text os WY SIWY G ( What You See IsWhat You Get - O Que Você Vê É O Que Você Tem ). A pesa r d a s i gla se rc om p r id a, o c on ce it o é s im p les: esse t i po d e p ro g ram a é co mp ost o po r u me 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. Ad i f er en ça aq u i é q ue o tex to que o us uá ri o es tá e d it an d o e vis ua l iz an do não éo t ext o p uro, mas s im o t exto já f o rma ta do g r af i cament e, o u s ej a, o qu e v oc êv ê é o qu e vo cê te m.Vo cê p ro vav e lm en te já uso u e d it or es desse t ip o. O s e d ito r es c om o o Word , oAbiWord e o OpenOffice Writer são W YSIW YG e os doc u me nt os q ue elesg e ra m ut i l iz am L ing ua g ens d e m a rcaç ão .3.6 - FAQ (Perguntas Freqüentes)De p o is q ue eu ed ite i m eu a rq u ivo H TM L, eu n ão co ns igo v is ua liz ar ore su ltad o e m m eu na ve ga do r. Po r q uê? !Ve r i fi q ue se vo cê sa lv ou o a rq ui v o co m o n om e c or reto e q ue s ua ex te nsãose ja . h tm. C on f ir a t am bé m em s ua bar r a de e nd e re ços do na v ega do r,v e r if i qu e qu an to ao d ir e tór io se es tá co r re to.Qu a l nav eg a do r eu d ev o u tiliz a r? !Vo cê po de u t i li za r qual q u er b rowse r, co mo o I nte r net Ex p lo re r, Mo z il la, O per a,e tc. .. pa r tic u la rm en te r ec om en do o F i re fox e o In te rne t Ex pl or er. -7-
  • 8. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 rasm a iús cu las q ua nto com le tr as mi n ús cu las, t an to q ue <B> é a m es ma co isaq u e <b>. S e v oc ê obse r va r e m t ut or ia is en co nt ra dos p e la We b, v ai no tar q u eos 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 mesd as ta gs, m as os mai s mo de rnos ut i l iza m e xc lu si va ment e le tras m i n úsc u las.Nes ta m i nha a post i la u t i li zo se mp r e l et ras m i n úsc u las p or q ue ex ist e u ma raz ãom u it o fo rt e p ar a isso.A nov a ge ra ção do H TML é u ma a p l ic açã o do XML e é d es i gn ada p o rXHT ML. O XHT ML é a m el ho r l i n gu ag em p a ra se c r ia r p ág i nas p ar a a We b,m as é mais r est ri ta d o q ue o HTM L (“rouba” algumas das liberdades que oHTML oferece) . A o co nt rá r io d o q u e aco nte ce em HTM L, e m XM L as et i qu et as<B> e <b> re p rese nt am e l em e ntos d ife r en tes, vist o q ue em XH T ML f o ia 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 re s c ritas c o m le tra s m in úsc u la s. Por est e mo ti vo é e xt re ma men ter e com en dáv e l qu e s e e sc re va to das as e ti q u etas com le tra s m inú sc u las.D es te m odo, vo cê es ta rá a d qu i rin d o bo ns m o dos e qu ase não te rá tra ba l ho dec on ve r te r su as pá g i nas HTM L pa ra X HTML.4. ELEMENTOS E ATRIBUTOS4.1 - ElementosU m e le men to é um a es tr ut u ra se mâ nt ica, c om pos ta de ta g d e ab e rtura,c on teú do e ta g d e fe c ha me nto .O s doc u men tos HTML sã o s im p les a rq u ivos de te xto q ue co ntê m "tags demarcação" . Ess as et iq u etas d efi n em os e le me nt os da l in g ua gem HTM L e osse us c on teú d os. A lis ta se g ui nt e i n d ic a a l g um as d e suas c ara ct er íst i cas : • A s "t ags de m ar ca ção" d o HTML são usa das p a ra d ef i nir os e le men tos. • A s ta gs HTM L esc re v em -se ut il i za n do os car ac te res < e > , e nt re e les o n om e do ele me nt o e os se us at r ib u tos. • A p r i me ir a t ag do pa r é a ta g de i n í ci o (ou de abertura) e a s eg un d a d o p a r é a ta g d e f i m (ou de fechamento) . • T ud o o q ue se en co nt ra r e nt re a s t ags de i n íc io e de fim fa z em pa rt e d o c on te ú do do e le me nt o. • E m XHTM L as ta gs d ev e m s er esc r it as s emp r e co m l et ras mi nú sc u las, e as ta gs <b> e <B> não re p resen ta m o mes mo e le men to.Vo cê se lem b ra de nosso p ri me i ro ex e mp lo m ost ra do ? !<html><head><title> Título da Página </title></head><body>Esta é minha primeira página. <b>Este texto está em negrito</b></body></html> -8-
  • 9. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------Es ta pa r te a ba ixo é um e le me nto HTM L:<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 xoEs 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. <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 co r po d od o cu me nto.4.2 – Atributos das TagsT a g é um c ó di go usad o pa ra ma rc ar o i níc io e, o nde f or r e que r i do, o fim d eu m e le men to HTML. H á, co mo ex post o a c im a, ta gs de ab e rt u ra e d ef e cha me nto. Um a t ag d e a b er tur a é re p rese nt ada po r s in a l d e m e no r ( < ),u m no me d e e lem ento HT ML, e u m s in a l d e m a io r ( > ) (ex. <p>) e d ev ese r co lo cad a i me d iata me nt e ante s do in íc io d o cont eú do do el e me nto. Um ata 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 umab a rr a ( / ) an tes do n o me do e le m en to (ex. </p>) e d ev e se r co lo ca dai m e dia ta men te ap ós o f im do c on te ú do d o e l em en to.O s Atribu to s se r ve m p a ra d e fi n ir u ma pro pr i e da de de u m e le men to HTM L. O sa tr i bu tos HTM L de ve m s e r co locad os se mp re n a ta g d e a be rtu ra, l o go a pós on om e do e le me n to, p r e ce d i do d e u m es pa ç o e é com p osto d e u m n om e d ea trib uto, u m s ina l d e igu a l ( = ) e u m va lo r de a tribu to, c er ca do po ra sp as d upla s ( " ) ou s i m pl es ( ‘ )A ta g <bod y> de f ine o co rpo ( body ) de um a pá gi na HT ML. No ex em pl ose 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", oucor 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 orv e rm e lha em s eu p lano de fu n do.<html><body bgcolor="red"> Esta é a minha primeira página da web. <b>Este texto está em negrito</b></body></html>Va mos cons i de ra r a go ra a ta g < tab le>, q u e de f ine u m e le me nt o d e um at ab el a. Ao j un ta rm os o at ri b uto bo rde r (que significa borda) co m o val o r -9-
  • 10. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------a p rese nt ado a se gu i r, es tam os d i ze n do ao nav e gad o r pa ra n ão co lo car asb o rd as da ta be la ( <table border="0"> indica uma espessura nula para a linhade contorno da tabela):<html><body><table border="0"><tr><td> Esta é a minha primeira tabela.</td></tr></table></body></html>Já no exe mp l o a ba ixo es ta mos diz e nd o ao na ve ga do r pa ra des en ha r uma l i nh ad e c on to rno c om es p ess ur a 2 ( border="2" )<html><body><table border="2"><tr><td> Esta é a minha segunda tabela.</td></tr></table></body></html>O s at r ib utos s em p re e nt ra m em pa res n om e/ va lo r (name/value), ass im :n am e="v alu e"N o ta 1 : Os at r i bu tos só po de m a pa re ce r nas t ags de i n í ci o. É p ro i bi do co loc ara tr i bu tos nas ta gs de f e cha me nto.N o ta 2 : Pa ra ga ran ti r a co m pa ti b i li da de c om a l in g ua ge m X HTML, uti l i zel e tras m inú sc u las p ar a es c re ve r o nom e dos a tr i b utos, e s em pre co lo q ue osv a lor es e ntr e as pas.4.2.1 - Atributos podem ser aplicados à maioria das tagsVo cê no rma l me nte usa rá a tr i b utos co m m ai s fr e qü ên cia e m a l gum as t ags, ta isc om o a tag b od y e ra ra me nte u sa rá e m o ut ras, com o por exe m p lo, a ta g brq 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 çãoa d ic io na l.A ssi m co mo ex ist em m u it as ta gs, ta mb ém e x iste m m u it os at r ib u tos. A l gu nsa 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 rav á rias ta gs. E v ic e-ve rsa : a l gum as ta gs p o de m co nt e r som en te u m t i po d ea tr i bu to, en q ua nto o ut ras po de m co nt e r vá ri os t i pos.I sto po de p a re ce r um po u co co nf uso, mas à m e di da q ue vo cê f o r p rat i can d ov a i cons tata r q ue t u do é f ác i l e ló g i co, b em co mo vai ve r i fi ca r as in úm er asp oss i bi l i dad es qu e os at r i bu tos o fe re ce m. - 10 -
  • 11. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------4.3 - Devemos usar aspas ou plicas/apóstrofos (escrevemos"texto" ou texto)?A ca ba mos d e v er q ue o s val or es dos at r i bu tos d ev em se r se mp r e co loc ad ose nt r e as pas. No rm al m en te u t il i za mos as as pas no r mais ( " ), mas osa pós tro fos ( ) ta m bém s ão p erm i t ido s.E m al g uns c asos, o val o r do at r ib u to co nt ém o p róp rio ca ra ct er e as pas. Num as it ua ção dess as, de ve mos usa r a pós tro fos (que aqui funcionam como aspassimples) pa ra co lo ca r e m to rn o d o v alo r do at r i bu to, ass im :a lt =E le disse : " Nã o !" 4.4 – Notas Rápidas • A s Ta gs HTM L são ut i l iz ada s pa ra ma rca r e l em en tos HTM L. E las estão c e rca das pe los do is ca ra cte re s < (menor que) e > (maior que) • A s ta gs no rm a lm en te a pa re ce m e m par es, c om o <b> e < /b> • A p ri me i ra ta g e m um pa r é sem p r e a ta g d e i ní c io, a se g un da t ag do p a r é a ta g d e f i m • O tex to e ntr e o co m eço e o fi m da ta g é o co nt eú do do e le me nto . • HTM L nã o é sensitive , o u s eja , <b> é a m es ma co isa q u e <B> • S e p or a caso vo cê es c re ve u os c ód i gos HTM L e rr ad o - por e xe mp lo >b> i nv és d e <b> - não se d es esp e re, p o is o máx i mo q ue p o de a con te ce r é o se u nav e ga do r int e rp re ta r su a pá gi na d e fo r ma di f e re nte d o es pe ra do e des en há- la de um j e ito m al uc o.5. O CABEÇALHO DE UM DOCUMENTO HTML5.1 - O Elemento <head> (cabeçalho do documento)O e le me nt o <h ea d> co nté m i n f or ma ção d e car ac te re ge ra l, ta mb é md es i gn ada p o r me ta- in fo r ma ção, s ob r e o co nt eú do do d oc um ent o e so b re af o rma como e le de ve se r a p resen ta do.P od e mos di z e r qu e o t e rmo m eta- i nf or ma ção ( ou meta-dados ) s ig n i f ica da dosq u e d esc rev e m ou tro s d ad os ou in fo r ma ções.5.1.1 - A Informação Contida no Elemento <head>O s el em en tos co nt i dos d en tr o do e le me nto <h ea d> n ão s ão exi b i dos n a te lad o na ve gad o r.O pa d rão HTM L estab e le ce qu e só u m peq u en o nú me ro de e lem e ntos pod ea pa re ce r d e nt ro do ca b eça l ho. E les são : <base >, < link>, < meta> ,< title> , <s t y le> e <s c rip t> . - 11 -
  • 12. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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, o nav eg ad or po d e re ag i r de dua s f or mas : • A p re se nta r o te xto por q ue el e se e nco nt ra d e nt ro de u m e l em ent o <p > • Es co nd e o t ext o po r qu e e le pe rte n ce ao cab e ça lho .S e v oc ê col oc ar um el e me nto não a uto r i zado, co mo <h2 > o u <p>, de nt ro d oc ab eç al ho, a mai or ia dos nav e gado res va i esc r ev er este e le me nto n a pá g i na.A p ar en te me nt e, as p esso as qu e são res po nsá ve is pe la con c ep ção dosb r owse rs a cha m q ue est e gên e ro de e r ros é ac e itá ve l. Es ta e out rasd 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 asd e co di f ic aç ão a d qu i ri d as p or m u it os c r ia do res de pá gi nas HTM L. U ma dasr 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 ea ca ba r co m es tas si tua ções de um a v ez po r to das.5.1.2 - Elementos de cabeçalho ( <head> ) Elemento Descrição <head> Contém informação importante a respeito do documento mas que não deve ser apresentada no corpo da página <title> Define o título da página <base> Define um URL base comum para todas as ligações relativas da página <link> Faz referência a um recurso externo e estabelece a ligação com ele <meta> Dá informação sobre aquilo que o documento contém5.1.3 - A declaração DOCTYPEA 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 ap á gi na. Qua n do ut i l iza da, de ve a pa re ce r lo go n o i níc io da pá gi na , a nt es d oe l em en to <h tm l> Declaração Descrição <!DOCTYPE> Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html>5.2 - O elemento <meta>O e le me nto < me ta> c on té m in fo r maçã o de ca ra cte r e g e ra l (meta-informação )so b re o do cu me nt o e d e ve s e r c o lo ca do d e nt ro do e l em en to <h ea d>. S uaf i na l i dad e é fo rn ec er i n fo r maçã o q u e des c re ve o do cum e nto.5.2.1 - Palavras-chave para os motores de pesquisaD 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 loe l em en to < me ta> fo i a c ri ação de í n d ices pa ra si tes de bus ca. At ual men teso me nt e a lg u ns b usc ad o res ai n da usa m esta i n fo rma ção p ar a ind ex ar p ág in as,e os d e ma io r s uc esso i g no ram e ste e lem e nto. No e n ta nto, h á pa rt es q u e - 12 -
  • 13. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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,c om o po r ex em p lo, as i n d i ca ções d a das so br e as pastas em q u e n ão de v e se rf e ita q ual qu e r i n dexaç ão.A l g uns s ist em as d e b us ca ( não muitos ) usa m a i n fo r mação co nt id a n ose l em en to m et a pa ra i n d exa r as pá g i nas. No f ra g men to d e có di g o s eg u in te , oe l em en to < me ta> co nt ém uma b r ev e d esc r i ção d a pá g ina :<meta name="description" content="Tutoriais e referências técnicas de HTML, CSS,JavaScript, XML, XSLT, SVG">Na par te do c ód i go ab a ixo o e le me nt o <m e ta> con té m u ma p a lav ras -ch av ep a ra i n dexa r a pá g i na:<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG">C o mo ac aba mos de ver , os no mes da dos ao a tr i bu to na m e i n d icam c la ra men t ea fi na l id ade da in fo rm açã o co nti d a no e lem e nto me ta .I n f el i zm en te , mu itos c r ia do res de p ág i nas p a ra a Web a b usa ram d o el eme nt om 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 ep es q uis a. E m cons e qü ê nc ia d isso, os s it es d e b us ca p assa ra m a i g nor ar ca dav e z ma is o e l e me nto < me ta>, o q ue a cab o u d if i cu lt an do to dos aq ue l es q u ep r et en d ia m us á-l o d e f o rma co rre ta.5.2.2 - Valores desconhecidos para o atributo name doelemento <meta>A l g um as ve z es en co nt ra mos s itu açõ es e m q u e o a tr ib uto na m e d o e le men to< me ta> co nt ém um v a lor des con h ec i do, co mo no exe m p lo se gui n te :<meta name="security" content="low">Nu ma s i tua ção des tas de ve mos i n te r pr etar o e l em ent o m e ta co mo con ten d oi n fo r maçã o q u e é espe c íf i ca do w e bsi te. Essa i nfo r maç ão po de se r im po r tan tep a ra o a uto r da pá g in a, mas pro va ve lm en te é i rr el eva nt e p ara os v is ita ntes . Ép oss ív e l qu e essas in fo r ma ções se jam ú tei s pa ra a lgu m so ftw ar e q ue le ia ap á gi na.6. MODIFICANDO O CORPO DO DOCUMENTOC o mo di to a nt er io rm e nte , o e l em en to b od y en g lo ba o c or po do s eud o cu me nto H TML. E le p oss ui m u it os a tr ib u tos q ue p ossi b i li tam m o di f ic ar aa pa rê nc ia d a s ua pág i na, co mo c o r de f un d o o u das let ras. Esse s at r i but ost am bé m po de m se r u t i li za dos j u nto com o at r ib uto td. A qu i mo st ra rem osa pe nas os a tr i bu tos qu e i nt e rf ere m n as co res da s ua p á gi na : • b gc o lo r: de f in e a co r d e f u nd o d e um docu m en to • te x t: a co r d o tex to • link : a co r d os l i nks • a link: a c or dos l in ks at i vos at ua lm en te (a página que você está visitando) • v link : co r d os l i n ks já v is it ado s - 13 -
  • 14. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 , exata m en te co mo n oc aso d o a t ri b u to c olo r us ado no e l em en to fo n t. Po r ex em p lo:<html><head> <title>Isso é uma confusão!</title></head><body bgcolor="black" text="gray" link="red" alink="white">Isso é uma página em html.</body></html>Essa é u ma p á g in a HTM L o n de o f u n do s erá p r e to, com l e tras c in za s, li n ks e mv e rm e lho e l i nks a ti vos e m b ra nco. Essas são as d e fi n iç ões glo ba is d e co r p ar ase u d oc ume nt o, e a q ua l qu er i nst an te v oc ê po d e m u dar as co re s com oe l em en to fo n t.7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML7.1 - CabeçalhosO s ca be ça lh os (também chamados de Headings) s er v em pa ra c r ia r t ít u losd i f er en c ia r as seç ões d a s ua pá g ina . E le s p ossu em se is val or es d i fe re nt es,se n do qu e a de va lo r 1 é a q ue p oss ui a ma io r fon te e a d e v alo r 6 po ssu i am e no r fo nte .P or exe m plo, usan do o se g ui nt e c ó di go :<h1> Título 1 </h1><h2> Título 2 </h2><h3> Título 3 </h3><h4> Título 4 </h4><h5> Título 5 </h5><h6> Título 6 </h6>No c ód i go a ci ma, o HTM L au toma ti ca me nte so lta uma li nh a em b r an co e ntr eu m t í tu lo e o ut ro.7.2 - ParágrafosO s pa rá g raf os são de fi n i dos c om a ta g < p><p>Este é um parágrafo</p><p>Este é um outro parágrafo</p>No có d igo a ci ma, o HTM L a uto ma ti ca me nte a c res ce nta u ma li n ha em b ra nc oa nt es e d ep o is d e u m p ar ág ra fo.7.2.1 - Alinhamentos de parágrafoVo cê já d ev e te r v isto q u e em cer tos d oc ume nt os o text o a pa re ce o ra a l i nha doà d ir ei ta, o ra à es qu e rd a, no c e nt ro ou e nt ão oc up ando u ni fo r me me nte oes pa ço da p á gi na (texto justificado) . Isso po de ser ob t id o fa ci l me nt e e mHTM L. Ve ja a ta be la ab a ixo : ELE MEN TO DES CRI ÇÃO <p align=”left”> Alinha o texto à esquerda - 14 -
  • 15. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- <p align=”right”> Alinha o texto à direita <p align=”center”> Alinha o texto centralizado <p align=”justify”> Alinha o texto justificadoNot e qu e e nt r e os de l i mi ta dor es < e > não en co nt ra-s e a pe nas o el em en to< p>. A lé m d e le, ex ist e o t exto a lign= "a lin ha me n to". D iz em os q u e a lign éu m at r i bu to d o el em en to p e a lin ha me nt o é o va lo r dess e at ri b ut o. No c aso d e< p a lign="j us tif y">, o va lo r d o at ri b uto a lig n (que significa alinhamentoem inglês) é j us tif y (justificado) .O s at r i bu tos, as pa la v ras qu e se g ue m o e l em en to, i nfo r mam o na ve ga do r ar es pe it o das p ro p ri ed a des q ue os e le me nt os po de m ass u mi r. C o nf uso ? ! P odep a re ce r um p ou co co nf uso, mas não é. C o mo d isse a To ya, " Um disco debanda punk pode ter diversas propriedades ou atributos - a cor do disco,tamanho, velocidade, etc, tudo isso são atributos. " E e u d i go m a is: se vo cêc ol oca o dis co n um t oc a- di scos, v oc ê po d e o uv i- lo em d u as o u n o má xi mo t rêsv e lo ci da des. Às ve zes d á p ra o uv i r a o co ntr á rio . Mas se vo cê ar re mes sar seu sd i scos do Fo fão, ga ran to qu e e les po de rão g i ra r e m mu i tas o ut ras ve lo ci da des .A ssi m é o HTM L, co m m u itas o pç ões pa ra v oc ê ex i bi r se u te xto.No HTML, os v al or es dos a tr i bu tos p o de m ser d e f in i dos da fo rm aa trib uto=v alo r o u atribu tos="v a lo r" (como em align="justify") , q ue é ma isr e com en dad a.C o mo v ocê v i u, ne m t od os os có d ig os e m HTM L n ec ess ita m de a tr i bu tos, e mes p ec ia l os com an dos de mo d if i caç ão d e tex to c om o ne g r ito, i tál i co,s ub l i nha do, e tc.Re su m in do, os a tr i b utos d ef i ne m c a ra cte r ísti ca s a d ic ion ai s aos e le me nt os. Nasse çõ es s egu i nt es v er em os e le men tos c om vá r ios at r ibu tos. Por e xe mp lo, nãoa d ian ta di ze r ao s eu na ve ga do r pr a p or um li n k e m algu ma pa rt e d o se u te xto,é p re c iso di z e r ao na ve ga do r, por ex em p lo, p r a qu e lug a r ess e lin k apo nt a. Éi sso o q ue u m a tr i bu to faz .7.3 - Criando uma divisãoEx 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 umm es mo va lo r d e a tr i bu to - centralizado, por exemplo . A o i nv és de es c re ve rm osa lign= "jus tify " a c ad a a be rt u ra de no vo pa rá gr a fo, po dem os us ar oe l em en to div, q ue c ria u ma " d iv is ão " n o d o cu me nto n a qu al alg u ns a tr i b ut ossão p rese rv a dos. Ve ja mos o ex em p lo :<div align="center"><p>Parágrafo 1Parágrafo 1Parágrafo 1</p><p>Parágrafo 2Parágrafo 2Parágrafo 2</p><p>Parágrafo 3Parágrafo 3Parágrafo 3</p></div> - 15 -
  • 16. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 !! Nap 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 arse çõ es ló g ic as e m do cu m en tos.7.4 – Quebras de LinhaA ta g <b r> é u t il i zad a q uan do v o cê q ue r t e rm i na r u ma l i nha , mas não q u erc om eça r um no vo p ará g ra fo. Com est e com an do você fa z co m q u e oco r ra u maq u e bra de li n ha, o n de v oc ê po si c io na r a ta g.Not e qu e p a ra o e lem e nto <br> não exi st e o co ma n do < /br>, ist o é, aq u e bra de l i n ha nã o ag e nu ma reg i ão d e t ext o d el i mitad a, mas sim n um po nt od o tex to. C o mp l ic ado? ! E ntão va mos lá, m a is uma v e z exp l i ca n do de um ao 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 ot ext o e pre c isa m se r f e cha dos c om s eus r es pe ct i vos < /b>, </i> e < /u> ,p o is do co nt rá r io esse s co man d os a gi rão a té o f im do d ocu m en to. Já oc om an do de q ue b ra d e l in ha, < /b r>, e a l gu ns ou t ros at uam som en te n op o nto o nd e e les a pa rec e m.Ve ja o ex em p lo a ba ixo da u ti l i zaç ão d a ta g <b r><p>Este <br> é um pará<br>grafo com quebra de linha</p>A ta g <b r> é uma e ti q u eta v az ia, e la não p oss ui tag f i na l.7.5 – ComentáriosA 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 eHTM L. To do ti po de c om en tá ri o é i g nor ado pe lo na ve ga do r, isto é, e le nãose rá ex ib i do na t el a. Vo cê po de ut i l iza r es ta t ag pa ra e xp l ic ar se u có d ig of on te ou p a rt e de le , q u e po de rá aj u dá- lo q u an do você est i ve r e d ita n do se usc ó di gos post e rio r me nt e.<!-- 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 ea be rt u ra, e nã o an tes d o p ar ên teses f ina l.7.6 – Informações Úteis1 ) Q ua nd o v oc ê esc r ev e r u m text o em HTML , est eja cie nt e d e q ue o t exto qu ev oc ê está v is ua l iz an do nã o s erá ex i bi do igu al m en te em tod os os na ve ga do res .A l g um as pess oas poss ue m c om p ut ad or es co m r eso l uçõ es ma io res, out rosm e no res, tu d o isso in f l ui na qu est ão da ex i bi ção d a pá g i na, o q ue p od ea con te ce r são os t extos e as jane las qu e po de m se r re d i me nsi ona dos.2 ) As d if ere n ças n os t ama n hos d as jan e las d os na ve ga do res fa ze m co m q ue on ú me ro de c ar ac te res q u e c ab em n u ma l in ha va ri e mu it o. Po r esse mo ti vo nãose 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 quea con te ce m as mu dan ças d e l in ha. Nu nca te nte for m ata r o te xto i nse rin d oes pa ços ou l i n has va zi as, po r que os res u lta dos não se rão a qu eles q ue v ocêes p era va. - 16 -
  • 17. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------3 ) O HTM L q u an do enc on tr a dois o u ma is es pa ços se gui dos, e le tr ata -os com ose fosse um ún i co es pa ço. Q uan d o voc ê es c re ve um a s e qüê nc ia d e es pa çosse g u id os, o r esu lt ado é o mes mo d e es c rev e r um ú n ico es pa ço. E m HTML, ast ec las Tab e E n te r e qu i va le m a u m es pa ço.4 ) Se m pr e q u e vo cê q u is e r inse r i r li n has em b ra nc o, ut i li ze a ta g <br>.Ex is te m p essoas q ue u t i li za m p ar á gr afos vaz i os p ara ob t er o mesm o r esu l tad o,m as isso es tá er ra do. A ta g < p> de ve s er usa da ap ena s p a ra de f ini rp a rá gra fos, e o e le men to <b r> n ão de ve se r usa do, p o r ex em p lo, pa ra c ria rl i stas, poi s ex ist em ta gs co nc eb i da s es p ec i f ic am en te pa ra isso. Se m p re qu ev oc ê p re cisa r de o bte r u ma fo rm ata ção es pe c ial , voc ê d ev e usa r o e le men toq u e fo i c r iad o p ara esse ef ei to.5 ) E m m ui tas pá g i nas, os par á gr afos est ão es c ri tos s em a e t i qu eta d ef e cha me nto (</p>) A p esa r dos na ve ga dor es ac e ita re m est a om iss ão, ten hase 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 ef e cha me nto. Se v oc ê t en ta r va lid a r uma p ág i na q ue co nt en ha est es er ros, v e ráq u e e la não passa rá n o tes te de v al i da ção.6 ) Os e le me nt os < p> e <h 1> ... < h 6> o na ve gad o r a d ic io naa uto ma ti cam e nte um a l i nh a em br an co a ntes do i n íc io e o ut ra dep o is do f im.7.7 – Lista de elementos básicos do HTML T AG DES CRI ÇÃO <html> Define um documento HTML <body> Define o conteúdo principal, o corpo do documento <h1> até <h6> Define títulos, de 1 a 6 <p> Define parágrafo <br> Insere linhas em branco, quebra de linha <hr> Insere uma linha horizontal <!--> Define um comentário8. FORMATAÇÃO DE TEXTOA l i n gu ag em HTM L de f in e vá ri os el em en tos pa ra s e for mata r um t exto , co mop o r ex em p lo, esc re ve r e m ne gr i to, it ál i co, s ub l i nha do, e tc . O exe m p lo a ba ixom ost ra a l gu ns de les :<html><body> Este exemplo tem texto em <i>itálico</i>, <b>negrito</b>, <em>enfatizado</em>, <u>sublinhado</u> e tipo <code>código de computador</code></body></html>8.1 – Elementos para formatação de texto TAG DESCRIÇÃO <b> Define seu texto em negrito <big> Define seu texto grande <i> Define seu texto em itálico <small> Define seu texto pequeno <strong> Define seu texto forte - 17 -
  • 18. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- <sub> Define seu texto subscrito (ex: H2O) <sup> Define seu texto sobrescrito (ex: 152) <ins> Define texto inserido <del> Define texto apagado <s> Desuso. Utilize <del> ao invés <strike> Desuso. Utilize <del> ao invés <u> Desuso. Utilize <styles> ao invés8.2 – Elementos para o "output de código de computador" TAG DESCRIÇÃO <code> Define códigos de texto <kbd> Define o texto com uma fonte especial determinada pelo navegador <samp> Define código de computador de amostra <tt> Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador <var> Define variáveis <pre> Define o texto pré-formatado <listing> Desuso. Utilize <pre> ao invés <plaintext> Desuso. Utilize <pre> ao invés <xmp> Desuso. Utilize <pré> ao invés8.3 – Elementos para citações e listas de definições TAG DESCRIÇÃO <abbr> Define uma abreviação <acronym> Define uma sigla <address> Define um elemento de endereço <bdo> Define a direção do texto <blockquote> Define uma longa citação <q> Define uma pequena citação <cite> Define a citação <dfn> Define um termo de citação9. LIGAÇÕES DE HIPERTEXTO ("LINKS")Essa é uma das se ções ma is i mp o rta nt es d es ta a post ila, po is af i na l esta mosf a lan do de h i p er tex to. Q ue re mos q ue um a pá g ina HTML possa fa ze r re fe rê nci aa 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 ree m ou tro s l u ga res d a w e b. No jar g ão da i nte r ne t, voc ê q u e r l i ga r ( l i n k) pa r ted a sua pá gi na co m out ras.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, c omo s egu e :<a href="http://www.midiaindependente.org">CMI Brasil</a>C o mo você d ev e t er p e rc eb i do, o at r i bu d o h ref (Hipertext Reference /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. No ex em p lo ac im a, o texto CMI B ra s il a pa rec ec om o um a r e fe rê nc ia par a o l i n k. Se vo cê c l ic ar so br e esse tex to, se un av e ga dor au tom at i cam ent e ten ta rá a br i r a p ág in ah tt p :/ /ww w. m id ia i nd ep e n de nte. or g - 18 -
  • 19. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------O s e n de re ços s ão es cr i tos na for m a d e URL (Uniform Resource Locators) , q u eé um a man e ir a q ue in v en ta ram p ar a s e es pe c if i car o cam i nho at é se c he ga rn u m ar q u ivo qu e est eja n al g um lo ca l da in te r ne t.O fo r mato d a URL é :protocolo://nome-do-computador/pastas/arquivoO p ro toco lo in d ica c omo o n av e ga dor i rá b uscar o ar q ui vo. N om e d oc o mp u ta do r é aq ue le en de re ço d o t i po w ww. n in g ue m. co m.b r e as pasta ssã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. U ma UR Lde um a rt i go do s it e da CMI Br as il é, por e xe mp lo,h tt p :/ /ww w. m id ia i nd ep e n de nte. or g / pt/ b l ue/2 0 0 4/ 09 /2 90 6 6 9.sh tm l, o nd eh ttp: // é o p ro to co lo , p t, b lue , 2 0 04 e 0 9 s ão p as tas (uma fica dentro daoutra) e 29 0 6 6 9 .sh tm l é o nom e d o a rqu iv o .h tt p :/ / -- - www.m i d ia in d epe n de nt e.o rg --- pt -- b l u e -- - 2 00 4 - -- 0 9 - -- 2 906 69 .sh tm lL e mb r e-se ta m bém q ue q ua n do v ocê ac essa o en d er eç oh tt p :/ /ww w. ni n gu em .co m. br , p or e xe mp lo, es tá na verd ad e ve nd o o a r q uiv oh tt p :/ /ww w. ni n gu em .co m. br / in dex. ht m l. Os ar q u ivos do t i po in d ex .h tm lse 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 ed o si te o u u ma pas ta d e um c omp u ta do r.E m h tm l, ex ist em t rês f o rmas poss í ve is d e se fa ze r l in ks : os link s inte rno s,os link s loc a is (ou relativos) e os link s ex te rno s .9.1 - Links internosL 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 mao ut ra se ção d a mes ma p ág i na. Po r exe m pl o, se e u qu ise r f az er um a re fe r ênc iap a ra a s eção H i pe rt ex to de ssa n ossa ap ost i la, basta q ue e u p ri m e iro de f in au 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. Isso éf e ito da seg u i nt e fo rm a:1 - 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 , ao i nv ésd 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 - 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 ,<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 map á gi na ht ml . O va lo r d e na me po de s er q ua l qu er u m (nesse caso eu coloquei"Hipertexto").Q ua n do voc ê fi z er u ma re fe r ên cia a u m l i nk i n te r no u til i za n do o at r i bu to h ref ,v oc ê p rec isa ne cess ar i am en te ad i c io nar o c ar ac te re # (jogo da velha) ant es - 19 -
  • 20. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------d o nom e da s ua s eção - no nosso caso, #Hipertexto - po is do c on t rár io se un av e ga dor t en ta rá a bri - lo co mo um l in k loc al .9.2 - Links locais ou relativosL 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 oc om p uta dor q u e a sua pá g i na. L ink s lo cais nã o c ont ém o ht tp: // no i n íc io d oe n de re ço. P or ex em p lo, 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 kp a ra o a rqu i vo link s .h tm l q ue es tá n a mes ma p asta d o m eu doc u me nto, nãop r ec iso d igi ta l o e nd er e ço co m ple to, m as ap e nas :<a href="links.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.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 as ua pá g i na, u se d ois p o ntos e um a ba r ra an tes do n om e do ar q ui v o:<a href="../links.html">Acesse os links!</a>A va nta gem de voc ê usa r l i nks r el at iv os é qu e vo cê po d e mo ve r to do o se us 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 sq u e ap on tam pa ra pá gi na s do se u p ró p r io si te .9.3 - Links externosL 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 vod i sp on í ve l n a i nt er ne t, c omo po r ex em p lo :<a href="http://pt.wikipedia.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 oe n de re ço co m pl eto do a rq u iv o.9.4 - 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, qu e pe r mi t eq 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.<a href="http://pt.wikipedia.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. Se v oc ê qu iser q u e o li nk se ja a be rt o n um a no va jan e la, s im p les men tees co l ha q ua l qu er no me com o ar gu m en to.9.5 – Elementos para fazer ligações ELE MEN TO DES CRI ÇÃO <a> Define uma âncora ou uma ligação de hipertexto - 20 -
  • 21. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------10. LISTASA 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 cr iar lis tas ded e f in iç õ es, lis tas o rd e na das e lis ta s não ord ena da s .10.1 - Listas Não OrdenadasU 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 os ím bo lo (normalmente um círculo pequeno ou um quadrado pequeno).P ar a cr ia r u ma lis ta n ão or de na da, u ti l i zam os o e l em e nto <u l> ("unorderedlist"). De nt ro d esse e l em en to, os vá r ios it ens são cr i ad os co m o el e ment o< li> ("list item").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çoD e nt ro d e u ma li sta n ão or d ena da p od emos c olo ca r p ará g ra fos, qu eb ras d el i n ha, i ma ge ns, o ut ras l is tas, e tc.10.2 - Listas OrdenadasU 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 oe l em en to < o l> ("ordered list") . Os it ens da li sta de f in em -se c om o e lem e nto< li> ("list item") .<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 . R um 2 . Ba ga çoD e nt ro d e u ma l ista o r de na da po de mos c olo ca r pa rá gra fos, q ueb r as d e l inh a,i m ag ens, ou t ras l is tas, e tc.10.3 – Listas de DefiniçõesU 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 , mas s imp 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. - 21 -
  • 22. 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") On 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 as 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 eBa 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 DES CRI ÇÃO <ol> Define uma lista ordenada <ul> Define uma lista não ordenada <li> Insere um item na lista <dl> Insere uma lista de definições <dt> Apresenta a definição de um termo <dd> Insere a definição de um termo <dir> Desuso. Utilize <ul> <menu> Desuso. Utilize <ul>11. IMAGENSA 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 am 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 me é 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 al 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 un 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 á or 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 sere 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 oa 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 essea 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 oe 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 toe 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 lon 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 -
  • 23. 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 laes 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 ud 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ãode 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 lec 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 imagemO 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 mov 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 oc 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 osp 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 ose 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 ec 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 ep 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 mp 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 rq 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 suai 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 ãoa 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 ed 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 md 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 eso 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. Noe 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", ai 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 on 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 ld 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 alf 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 -
  • 24. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------11.2 - Texto alternativoEx 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 çov 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 rso 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 imagemU 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 rsasf 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 oa 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 ot 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 doa 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 aimagem 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 ai 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 oe 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 dai 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 laa pa re ce rá n o lo ca l d ese ja do.11.5 - Espaçamento da imagemNot 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 ld 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 osa tr i bu tos vs pa c e (espaçamento vertical) e hs pa c e (espaçamento horizontal) . - 24 -
  • 25. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 rea ima g em e q ual q ue r o b jet o:<img src="emma.jpg" width="3%" height="3%" border="1" align="left" hspace="5"border="1">O tex to vai a par ec e r à d ir ei ta d a ima g em, a ci n co pi xe ls de d i stâ nc ia de la.D e u pra no tar a di fer e nça ? ! Ut il i za n do t odos esses at r i bu tos par a a exi b i çãod 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.N o ta: Ao u t i l iza r i m ag ens, l e m br e-se d e q u e e l as pod e m au me nt arc 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 asp á gi nas, po r iss o, use -as co m cu i da do.11.6 – Elementos relacionados com imagens ELE MEN TO DES CRI ÇÃO <img> Insere uma imagem <map> Define um mapeamento sobre a imagem ("image map") <área> Define uma área clicável sobre um mapa de imagem11.7 – Fundos de PáginaU 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 od a pá gi na, m as u ma m á es co lh a é ca paz d e c ausar d anos mu i to gr av es nal e g ib i l id ad e e n o asp ec to ge ra l da pá gi na.11.7.1 - 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 esd o t exto e a co r d e fu n do. Ta mb é m po dem os us ar um a i ma gem co mo pad r ãod e fu n do.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. O qu adr ose 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 umc ó di go de c or he xa dec i ma l, um c ó di go R GB e um nom e de co r (veja mais àfrente o tópico sobre cores).<body bgcolor="#000000"><body bgcolor="rgb(0,0,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 todasválidas) par a d ar a c or p re ta ao f u n do d a pá g ina .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 nab ase ia- se e m es tilo s CSS. 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 sep 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 ãos up or tam CS S (veremos sobre CSS no fim da apostila). - 25 -
  • 26. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------11.7.2 - O atributo backgroundO 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 mai m ag em. 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. S eas 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, on av e ga dor r e pe ti rá a im a ge m (como num chão de mosaicos ou em uma paredede azulejos), po r f or ma a o cu pa r t od o o fu nd o d a pá g in a.O exe m pl o a ba ixo most ra be m com o se f az isso :<body background="imagem.jpg"><body background="http://www.tiagosouza.com/imagem.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 ee n con tr a a i ma ge m. Na pr i me i ra li n ha ma is ac i ma, demos uma UR L re la t iva en a se gu n da d e mos u ma UR L a bsol u ta.N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i nab ase ia- se e m e s tilos CSS. A u ti l i zaç ão d est e at ri b u to s ó se jus t if i ca sep 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 ãos up or tam CS S (veremos sobre CSS no fim da apostila).11.8 – DicasS e mp re q ue u t il i za r um a i ma gem d e f u ndo na p ág i na, nã o se es q ue ça d est esas 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 , po is e m caso af i rma ti vo, o te m po pa ra ca rr egar a pá g ina a um en ta ri a co ns i de ra ve l me nt e.• C e rt i f iq ue-se de qu e a ima g em d e fu n do co m bi na bem co m a co r d o tex to.• C e rt i f iq ue-se d e qu e o f un do c om b in a be m co m as o utras im a ge ns da p á gi na.• Ve r i fi q ue se a re pe ti ção da i mag e m de f un d o e m mosai co resu l ta e m um p a dr ão pe rf e ito . Se vo cê p er ce be r al g um as f a l has apa re nt es, uti l i ze o ut ra i m ag em de f u nd o ou fa ça u ma e di çã o nes ta a tua l.• C e rt i f iq ue-se d e q ue a i ma ge m n ão é in côm o da e q ue nã o des vi a a at en ção d o te xto.O s at r i bu tos b gc o lor, b ack g ro un d e te x t do ele me nt o <bo d y> fora mre 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 mHTM L (HTML 4 e XHTML) . A f o rma re co me n dad a p ara o bte r os m esm osr es u lta dos b ase ia- se n a ut i li za ção d e est i los C SS . A u t i li za ção d es tes at r ib u tossó 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 doresa nt i gos q ue não su por ta m C SS .S ão p ou cos os s ites d e qua l i dad e qu e u ti li z am im agens de f u nd o, e a q uel esq u e o fa zem , 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. - 26 -
  • 27. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------12 – CORESP 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 etasd e t rês co res bas es: Ve r me l ho (Red) , Ve r de (Green) e Az u l (Blue) .12.1 - Formas de exprimir coresE 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. Des ta f o r ma as co res e x pr i mem u san do t r ês núm e rosh exa de c ima is q ue de f in em as q ua nt i da des de v erm e lh o, ve rd e e az u l q uee nt ra m n a c om pos i ção de um a d e te rm i na da co r. O va lor m ais b a ixo de umad e te rm i na da co r é 0 (#00 na notação hexadecimal usada em CSS) e o val o rm a is al to é 2 5 5 (#FF em código hexadecimal). Assi m , a co r p r eta te m 0 d ev e rm e lho, 0 d e v er de e 0 de a zu l, esc rev e nd o na f o rma # 00 0 0 0 0. Já ob r an co poss ui 25 5 de v e rm e lho, 2 5 5 de v erd e e 25 5 de a z ul , s end o se u có di g o# FF FF FF. O a mar e lo f o rte p ossui 2 5 5 de ver m el ho, 2 55 d e ver de e 0 d e a zu l,se n do se u c ó di go # FF F F0 0A 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 VALOR RGB (DECIMAL) #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255)12.2 – Nomes de coresA 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 doso f ic ia lm en te p elo W 3C . To dos os nav e ga do res re co nh ece m estes no mes p e loq 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 Black Blue Fuchsia (#00FFFF) (#000000) (#0000FF) (#FF00FF) Green Gray Lime Maroon (#008000) (#808080) (#00FF00) (#800000) Navy Olive Purple Red (#000080) (#808000) (#800080) (#FF0000) Silver Teal White Yellow (#C0C0C0) (#008080) (#FFFFFF) (#FFFF00)A p esa r d e n ão esta re m de fin i dos o f ici a lm en te, os nom es d as co resa 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 ,c om e xc eção das v e rsõ es ma is a nt i gas.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 ,a pes ar de se r em r eco n hec i dos pe los pr i nc ip a is na vega do res, ess er 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 comas r eco men d açõ es o fi c ia is. É po uco p ro váv e l qu e nos a nos ma is p róx i mos os - 27 -
  • 28. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 esd e co r. 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 nase m to dos os na ve gad o res co nfo r mes co m as n or mas do W3 C, e m v ez dosn om es a pres en ta dos n a ta be la, u t i li ze o s có d ig os h exa de c ima is a p rese nt adosj u nto das co res. COR CÓDIGO HEXADECIMAL NOME DA COR #F0F8FF AliceBlue #FAEBD7 AntiqueWhite #7FFFD4 Aquamarine #000000 Black #0000FF Blue #8A2BE2 BlueViolet #A52A2A Brown12.3 – Cores seguras da WebP rob le mas c au sa dos p o r um n úm e ro red uz ido d e c o re sTo 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 ro u m i lhõ es d e co r es e m s im u ltân eo. Co nt ud o, at é m eados da d éc ad a d e 1 99 0m 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 av e z. 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 taf i xa q ue con t in ha a pen as 2 56 cor es.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 asas co res qu e não con se gu ia m a p rese nt ar. O s e fe it os des tas ap r ox ima çõese 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 hasd e c or. 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 , na pr i mei r a m eta de d a dé ca da d e 1 99 0, a ma io ri a do sc 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 ec ad a ve z. D e ssas 2 5 6 co res, o s s ist em as o p erat i vos Windows e AppleMacintosh 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 uasi n te r fac es g r áf i cas. Ass im , d e um to ta l de 2 5 6 co res p oss í ve is, a pe nas 21 6p 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 adast an to nu ma m á qu i na W in do ws co mo em um Ma c. Es tas 2 16 co res r ec e be ra m ad es i gn ação d e c o re s s e gu ra s da W eb.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 eu 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 josc ó 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 at ab el a s e gu i nt e: RGB 00 51 102 153 204 255 Hex 00 33 66 99 CC FFA 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 mosf o rma r com os va lores ap r ese nt ado s na ta be la a nt er ior. Estas são , p or tan to,as 21 6 cores s e gu ras d a We b, q u e mo st ra mos ju ntam e nte co m se us c ód ig osh exa de c ima is (o caractere # no início foi omitido) : - 28 -
  • 29. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFFCC0000 CC0033 CC0066 CC0099 CC00CC CC00FFCC3300 CC3333 CC3366 CC3399 CC33CC CC33FFCC6600 CC6633 CC6666 CC6699 CC66CC CC66FFCC9900 CC9933 CC9966 CC9999 CC99CC CC99FFCCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFFCCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FFFFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFFA 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 resd i f er en tes ao mes mo t em po, não hav en do n ec ess id ad e de usa r a pe nas c or esse g u ras da We b. A pesa r d isso, es te t ema co nt i nua a se r fo cad o e m q uaset oda s as i nt ro d uçõ es à c ons tr u ção de pá gin as. - 29 -
  • 30. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------12.4 - Formas de exprimir os valores das coresA 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 esd e Ve r me lh o (Red) , Ve r de (Green) e A z ul (Blue) qu e e nt ra m em s uac om pos i ção. A qu an t i dad e mí n i ma de u ma co r é 0 (#00 em códigohexadecimal) e a qua nt i da de m áx ima é 2 5 5 (#FF em código hexadecimal)A ssi m, 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. 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. Naf o rma d e cim a l a co r br an ca ex p rim e-s e como rgb( 2 5 5, 2 5 5 , 25 5 ) e a co r p re tae xp r im e-s e co mo rgb( 0 , 0, 0 ). En t re es tes d o is ext rem os, te mos to da a ga mad e c or es qu e pod em se r a p resen ta das e m u m mon i tor.Nada de VermelhoS e des l i gar m os co mp l eta m en te a co r V er m el ha, f i ca mos co m 6 5 5 36 cor esd 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 6q u an ti da des de a zu l (65536 = 256 × 256) .A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões :003300 006600 009900 00CC00 00FF00003333 006633 009933 00CC33 00FF33003366 006666 009966 00CC66 00FF66003399 006699 009999 00CC99 00FF990033CC 0066CC 0099CC 00CCCC 00FFCC 0033FF 0066FF 0099FF 00CCFF 00FFFFVermelho ao MáximoS e c olo ca rm os a quan t i dad e de Ve r me l ho c om s eu va lor má xi mo, q ue é 25 5(#FF em código hexadecimal) f i ca mos a in d a co m 65 5 3 6 (256 x 256) co resd 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 ec om tod os os va lor es p oss ív e is de Az u l.A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões :FF3300 FF6600 FF9900 FFCC00 FFFF00FF3333 FF6633 FF9933 FFCC33 FFFF33FF3366 FF6666 FF9966 FFCC66 FFFF66FF3399 FF6699 FF9999 FFCC99 FFFF99FF33CC FF66CC FF99CC FFCCCC FFFFCC FF33FF FF66FF FF99FF FFCCFF FFFFFFTons de VermelhoA 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 ded 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 asq u an ti da des de v e rd e e d e a z ul. Ex is te m 2 56 to ns d ifer e nt es de ve r me lh o pur oe mu i tas ou t ras q ue co nt êm mis tu ra s de o utr as co re s. - 30 -
  • 31. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------T ONS DE VE R MELHO HE X ADE CIM AL R GB #000000 rgb(0,0,0) #080000 rgb(8,0,0) #100000 rgb(16,0,0) #180000 rgb(24,0,0) #200000 rgb(32,0,0) #280000 rgb(40,0,0) #300000 rgb(48,0,0) #380000 rgb(56,0,0) #400000 rgb(64,0,0) #480000 rgb(72,0,0) #500000 rgb(80,0,0) #580000 rgb(88,0,0) #600000 rgb(96,0,0) #680000 rgb(104,0,0) #700000 rgb(112,0,0) #780000 rgb(120,0,0) #800000 rgb(128,0,0) #880000 rgb(136,0,0) #900000 rgb(144,0,0) #980000 rgb(152,0,0) #A00000 rgb(160,0,0) #A80000 rgb(168,0,0) #B00000 rgb(176,0,0) #B80000 rgb(184,0,0) #C00000 rgb(192,0,0) #C80000 rgb(200,0,0) #D00000 rgb(208,0,0) #D80000 rgb(216,0,0) #E00000 rgb(224,0,0) #E80000 rgb(232,0,0) #F00000 rgb(240,0,0) #F80000 rgb(248,0,0) #FF0000 rgb(255,0,0)Tons de CinzaA s co res c in za s ob tê m-s e co m bi na n do q ua nti d ad es ig uai s d e v e rme l ho, ve r de ea zu l. A cor b ra nca co r res po nd e ao c i nza ma is cla ro de to dos e o bt ém-s ej u nta n do 2 5 5 de ver m el ho, 25 5 de v erd e e 2 5 5 d e a z ul (#FFFFFF emhexadecimal). O p re to é o c i nza m ais es cu ro de t odos e o bt ém -se col oca n dot oda s as co res e m 0 (#000000 em hexadecimal). E nt re est es do is va lo rese xt re mos, te mos 25 4 g r aus de int ens i da de p oss ív e is.A ta be la seg u i nt e dá um a i dé ia dos t ons de c i n za q ue po de mos o bt e r: RGB(0,0,0) #000000 RGB(8,8,8) #080808 RGB(16,16,16) #101010 RGB(24,24,24) #181818 RGB(32,32,32) #202020 RGB(40,40,40) #282828 RGB(48,48,48) #303030 RGB(56,56,56) #383838 RGB(64,64,64) #404040 RGB(72,72,72) #484848 RGB(80,80,80) #505050 RGB(88,88,88) #585858 RGB(96,96,96) #606060 RGB(104,104,104) #686868 - 31 -
  • 32. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- RGB(112,112,112) #707070 RGB(120,120,120) #787878 RGB(128,128,128) #808080 RGB(136,136,136) #888888 RGB(144,144,144) #909090 RGB(152,152,152) #989898 RGB(160,160,160) #A0A0A0 RGB(168,168,168) #A8A8A8 RGB(176,176,176) #B0B0B0 RGB(184,184,184) #B8B8B8 RGB(192,192,192) #C0C0C0 RGB(200,200,200) #C8C8C8 RGB(208,208,208) #D0D0D0 RGB(216,216,216) #D8D8D8 RGB(224,224,224) #E0E0E0 RGB(232,232,232) #E8E8E8 RGB(240,240,240) #F0F0F0 RGB(248,248,248) #F8F8F8 RGB(255,255,255) #FFFFFF12.5 - Mais de 16 milhões de cores diferentesC 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 6c or es do A z u l, 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) .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 ãop 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. Noe nt an to, é p r e c iso te r e m men te q u e os n o vos sist emas mó ve is (celulares,PDA’s, etc) , 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 ma pe nas 25 6 co r es, ou tr os 4 0 96 ou 6 55 3 6.12.6 - Mais nomes de coresA 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 isr e la cio na dos a c or es, to dos es tão de f in i dos n os pa drões do W3 C.h tt p :/ /ww w. cr ia rw e b.co m/a rt i gos/ exe m p los/t al le r js/ t a be la co res. htm l13. ENTIDADES, ACENTUAÇÃO E CARACTERESESPECIAISA 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 um a rca do re s, qu e s er i am os < (menor que) e > (maior que) , qu e q uan d oa 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 mod e l im it ad ores de ins tr u ção. Mas e se e u q u ise r sim pl esm en te qu e essesc 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 mom a rca do res? !No HTM L, to dos os car ac te res t êm u m no me e sp ec ia l, ou có di go. Pa ra a cessa ru m car ac ter e, voc ê p re c isa usa r a se g ui nt e c on ve n ção:&nome-especial; - 32 -
  • 33. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 icoq u e vo cê d es eja most ra r no se u do c um en to. Isso d e f in e a l go q ue po de mosc ha ma r de s eq üê n cia r es er va da, q ue é um g r u po de cara ct eres q ue q ua n d oi n te r pr eta do pe lo na ve ga do r p rod u z i rá u m c ar ac te re, q u e in cl us iv e po de se ru m c ara cte r e res er va do. No HTM L, os no mes es pec ia is são c ha ma dos d ee nt i da des.Na pr óxi ma t ab el a mos tra mos al g u ns no mes esp ec ia is de c ara ct e res e s uasr es pe ct i vas se q üê nc ias rese r va das pa ra acess á- los: CAR ACTER ES NO ME E SPE CI AL SEQ UÊN CIA RES ERVADA á aacute á Á Aacute Á é eacute é ã atilde ã ô ocirc ô & amp & < lt < > gt > ¢ cent ¢ £ pound £ ¥ yen ¥ § section § © copyright © ® registered trademark ® × multiplication × ÷ division ÷Ve ja a lis ta co m p let a d e e nt i da des HTM L no li n k abaixo :h tt p :/ /ww w.w 3.o r g/TR/R EC -h tm l 40 /s gm l /e nt it i es.h tm l14. TABELASTa 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 mse to res. E nt en da po r u ma tab e la H TML c om o se ndo se me l ha nte a u ma ta b el aq 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 ec om p uta dor . O e le men to p ri n ci pa l de uma t ab el a é o tab le e aq u i s eg ue u me 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 SegundaTerceira QuartaE m HTML, as ta b el as são di v id id as e m l inh as e c él ulas. Na tab e la ac i ma, ap r i me i ra l in ha co nt ém as cé l ul as P rimeira e S e gu nd a, e n qu an to q ue ase g un da l in ha con tém as cé l ul as Te rce ira e Qu a rta. - 33 -
  • 34. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------D e nt ro d e u m b lo co tab le, os p ri n c ip ais e lem e ntos q ue v oc ê u t il iz a rá são o tr,o u table row (linha) , e o td, ou table data (célula) . D essa fo rm a, po d emosd e f in i r as li n has e as c é lu las da t ab el a. É m an da tóri o q ue um b lo co td es te jad e f in i do de nt ro d e um b l oco tr, ou se ja, q u e as c élu la s es te jam d e nt ro d el i n has.No ex em p lo a nte r io r, c r iam os um a l in ha co m tr e em s eg u i da, d en t ro de u mb l oco td, es c re ve mos o tex to d a cé lu la (P rime ira). A b r im os ou t ro bl oco tdn esse m esm o b loc o tr, on de co lo ca mos o te xto da seg u n da cé l ul a (S egu nd a) .D e po is, f ech am os a l in ha com o < /tr> pa ra e m s e gu id a a br i r um a no va l in ha,o n de c r iamos as c é lu las con te ndo os t extos T e rce ira e Qu a rta.O a tr i b uto bo rde r no e le me nto tab le se rv e p ara dar bo r da à t ab el a. Sem oe 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 SegundaTerceira QuartaD 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 SegundaTerceira Quarta QuintaO có d ig o f ic a co m pl i ca do o ta nto qua nt o se q ue ir a.A g ora q ue v o cê ca pt ou a essê n cia d as t a be las, v am os most ra r do is t r êsa tr i bu tos qu e pod em se r ut il i za dos e m ta bel as. - 34 -
  • 35. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------14.1 - Espaçamento entre célulasP ar a co nt ro la rm os a d i stâ nc ia e n tr e duas cé l ul as, ut i l iza mos o at r ib u toc e llsp ac ing , 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> Primeira Segunda Terceira QuartaP ar a co nt ro la r o es paç am en to v er t ic al, 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 Quarta14.2 - Preenchimento de célulasP 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 asc é lu las, 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.F ar em os o se g u in te :<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> - 35 -
  • 36. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- </tr> <tr> <td>Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr></table>Primeira SegundaTerceiraQuarta Quinta SextaP e rc eb eu c om o a ta be la f ic ou c he ia de b u rac os? ! Pa ra qu e as cé lu la sp r ee nc ha m os b u ra cos, 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 SegundaTerceiraQuarta Quinta SextaD a mes ma f o r ma, s e q u i se rmo s u m a co lun a co m a pe nas u ma c é lu la e ou t rac om d uas , p o d er ía mos usa r o a t ri b uto row sp an. V e ja a d i f e re nça en t reu 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 SegundaTerceira<table border="1"> <tr> <td rowspan="2">Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr></table> - 36 -
  • 37. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- SegundaPrimeira Terceira14.3 - Largura de células e tabelasP ar a es co lh e r a la rg u ra d e ta be las e c é lu las, u ti l i za-s e o j á con he c id oa tr i bu to w id th, 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 SegundaTerceira QuartaNot e q ue qu an do o wid th é ut i liz a do co m o e le me nto ta b le, a la r gu ra r ef er e -se à la rgu ra d a pág i na, en q ua nto q ue q u an do usa do de nt ro d e um td al a rg u ra é re f er en te ao ta man do d a tab e la. Isso t udo d es de q ue o ar g um en tose ja da do e m p o rc enta g em e não e m pi xel s.14.4 - Uso de tabelasA 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. 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 ru ma pá g ina in te i ra u t i li za n do t ab el as. Ex ist em mui tos o ut ros e le me ntos ea tr i bu tos p a ra a j udá- lo n essa t a re fa. Co nsu l te a s re f er ên c ias pa ra m a isi n fo r maçõ es so b re ta be las.14.5 - DicasO s el em en tos < th ea d>, < tbo dy> e < tf oot> ai n da são pou co usa dos de vid oao su po rt e d e f ic i en te o f er ec i do p e los na ve ga do res an t i gos. Os n a ve ga dor esm o de rnos já s upo r tam b e m est es e le me nto s.14.6 – Elementos relativos a tabela ELE MEN TO DES CRI ÇÃO <table> Define uma tabela <th> Define um cabeçalho para uma tabela <tr> Insere uma nova linha numa tabela <td> Insere uma célula numa tabela <caption> Define uma legenda para uma tabela <colgroup> Agrupa colunas numa tabela <col> Define os valores dos atributos para uma ou mais colunas da tabela <thead> Define um cabeçalho de uma tabela <tbody> Define um corpo numa tabela <tfoot> Define o rodapé de uma tabela - 37 -
  • 38. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------15. FORMULÁRIOSO 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 ee n vi á- las pa ra v oc ê, at ra vés de se u se r vi do r.15.1 – Criar FormuláriosU 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 ep 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 tiposde elementos <input>, <option> e <select>). Estes el em en tos pe r mi temi ns e ri r d ados nu mé r icos, t ext os p e q ue nos, t ext os lo n gos, se l ec ion ar el em ent ose m uma l ist a co m vá rias esco l has, res po n der f ac i lm en te co m res pos tas do t ip o"sim" ou "não" , 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,e tc.O s fo rm u lár i os sã o cri a dos co m o e le me nto <f orm>. D e nt ro d esse e l em en top 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.<form> <input> . . . <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 nap á gi na nem p er m ite i ns er i r dad os. E le co nt ém e lem e ntos que re co lh em o sd 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 mse r e n via dos os da dos ins er i dos p e lo v is itan te .15.2 - inputO 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 é oe l em en to < in pu t>. O exe m p lo a ba ixo most ra um fo rm u lá r io sim p l es co m d o ise l em en tos i n p ut :<form action="processar.php" method="post"> Primeiro nome: <input type="text" name="primeiro_nome"> <br> Último nome: <input type="text" name="ultimo_nome"></form>O fo r mu lá r io a ci ma fi ca rá se n do e xi b i do d est a fo r ma em s eu na veg a do r:P r i me i ro no me :Ú lt i mo no me :O el em ent o < in put> po d e assu m ir d i ve rsas fo r mas c om fi na l id a desd i f er en tes. - 38 -
  • 39. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------15.3 - "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çõese m qu e a pe nas po dem os se le cio na r u ma de ca da v ez.<form action="processamento.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 FemininoRe pa r e q ue só p od emos se l ec io na r u ma das o pçõ es ac im a.15.4 – CheckboxesA s ca ixas d e va li da ção ("checkboxes") d e ve m se r usa das se m p re q u eq 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 nog r u po. É pe r mi t id o val i da r mais d e uma o pç ão si m ul tan ea me nt e.<form> <input type="checkbox" name="carro">Eu tenho um carro <br> <input type="checkbox" name="surf">Eu tenho uma prancha de surf<form>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 surfRe 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.15.5 - O atributo action e o botão de submissãoQ 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"), as o p çõ esm 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) . O a tr i bu to a c tion do e l em en to <f o rm> co nt ém oe n de re ço (UR L) do re c urso da We b ( site, download, email, etc ) qu e est áe n car r ega do de r eal iz a r est e pr oc essa men to. É pa ra lá q ue o co nte ú do dof o rm u lár io se rá e n vi ad o.<form name="input" action="exemplos/action.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: - 39 -
  • 40. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- SubmeterNome de usuário:15.6 - Elementos para Formulários ELE MEN TO DES CRI ÇÃO <form> Define um formulário para recolher dados inseridos pelo utilizador <input> Insere um campo para introduzir dados <textarea> Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres) <label> Define um nome para um elemento <fieldset> Agrupa elementos num formulário <legend> Define uma legenda para um grupo de elementos do formulário <select> Define uma lista com várias opções selecionáveis <optgroup> Define um grupo de opções <option> Insere mais uma opção em uma lista com várias opções selecionáveis <button> Define um botão que pode ser pressionado <isindex> Desuso. Utilize <input> com o atributo type="button"16. FRAMES HTMLA 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 ob r owse r. 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 .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. A ss ub ja ne las são ha bi tua l me nte des i gna das po r mo l d uras, o u " frames ".16.1 - Vantagens e desvantagens das moldurasA 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 aHTM L nu ma ú n ica ja ne la d o b rows e r. Ca da p á g in a es tá d en tr o da sua p ró pr i am o ld u ra ( subjanela ) e é i n dep e n de nte d as r esta nt es pá g i nas. A p esar d eo 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 en 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 mb ast an te m a is rá p i do o ca rr eg a me nto das pá g inas, as mo ldu ra s ta mbé mp o de m da r o r ig em a a lg u mas di f i cu l da de s, 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. • 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 l g um as vez es se rá nec essá r io a u t i li za ção d e u m ú ni co e le me nto < a>, p a ra qu e el e rea l i ze a l i g ação d e d u as ou ma is pá ginas, o q ue o br i ga a u t i li za r Java Sc r ip t.16.2 - 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. • Es te e le men to di v i de a jan el a do b ro wse r em l in has e c ol u nas. - 40 -
  • 41. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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.16.3 – O Elemento frameO e le me nto < f ra me> de f in e q u al o doc u me nto HTM L a co lo ca r n um ad e te rm i na da mol d u ra.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 asc ol u nas. A p r i m ei ra c ol u na o c up a 2 5% da la r g ura d a ja ne la d o na ve gad o r,e n qu an to a se gun d a co lu na o cu pa 7 5% da lar g u ra. O do cum e ntom o ldu ra _a . htm l ocu p a a p rim e ir a co lun a e o doc u me nto m o ldu ra _b .h tm lo cu pa a seg u n da co l un a:<frameset cols="25%,75%"> <frame src="moldura_a.html"> <frame src="moldura_b.html"><frameset>16.4 – DicasQ ua n do um a mo l d ura poss ui l in has de co nto r no v is ív eis, vo cê po de a lte ra rs uas d i me nsõ es ar ras ta n do as l i nh as d e l i mit e co m o mo use. Par a i m p ed i r q uei sso a co nte ça, ut i l ize o at r ibu to no resiz e="n o res ize " d ent ro da tag<f ram e>Ut i l iz e a tag <n of ram e s> pa ra q u e os nav e ga do res q u e não s up o rta m fr am esp ossa m most ra r u m av is o na j ane la de qu em está a cessa n do o s it e.<a href ="pagina_1.html" target="principal">Página 1</a><br><a href="pagina_2.html" target ="principal">Página 2</a><br><a href="pagina_3.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 ase g un da mo l du ra ( à direita ), q ue t em po r no me "p rinc ip al”.16.5 – Elementos para Frames ELE MEN TO DES CRI ÇÃO <frameset> Define um conjunto de molduras <frame> Define o conteúdo de uma subjanela (moldura, ou "frame") <noframes> Define uma seção "noframes" para ser usada pelos browsers que não suportam molduras <iframe> Define uma subjanela (moldura) interior ("inline frame")17. INSERÇÃO DE SCRIPTSA 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 ee 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 usv is i tan tes.17.1 - Inserir um script numa página HTMLA 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> - 41 -
  • 42. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------<html> <head> </head><body> <script type="text/javascript"> document.write("Olá Mundo!"); </script></body></html>O s c ri p t ac im a fa rá o se g u in te r esu l ta do:Olá Mundo!17.1.1 - Um exemplo prático<html><body><script type="text/javascript"><!--document.write("Olá mundo!");--></script></body></html>17.2 - Como lidar com os browsers antigosU 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 as ua ut il i dad e na W eb a tua l é mu i to re d uz id a. Es tes br ows ers , ao en co nt rar e mu m e le men to <s c rip t> ( cujo significado desconhecem ), l i m ita m-s e aa 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 on or ma l. Pa ra i m pe d ir q ue isso ac on te ça, d e ve-s e c oloca r o c on te ú do d oe l em en to <s c rip t> d e nt ro de u m co me ntá r io. Des te m o do, os n a ve ga dor esq u e não s u po rtam sc r i pts i g n ora m-n os, mas os ou t ros na ve ga do resr e con he cem os s cr i pts e ex ec uta m- nos ( apesar dos comentários ) . M esmo co mb r owse rs m o de rnos , a ut i l iza ção de co me nt ár ios nos sc r i pts é uma pr át i car 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 oss cr i pts na li n g ua ge m X HTML.17.2.1 - O Elemento <noscript>A l ém d e esc on de r mos o có di go d e nt ro de u m co me ntá r io, u ma o ut ra fo rma dea 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 rao fe re ce r c on te ú dos a lte r nat i vos.O e le me nto < no sc rip t> é usad o pa ra c om p ens ar de al g uma fo r ma a fa lta dee xe cu ção d e u m sc r ip t. O co nte ú do des te e l em en to s erá a pr ese nt ad o p el osb r owse rs qu e n ão r eco nh ec em sc r i pts, mas se rá ig no ra do pe los b r owse rs m a ism o de rnos e não in te rf e re na ap res en ta ção d a p ág i na.17.2.2 - Um exemplo<html><body><script type="text/javascript"><!--document.write("Olá mundo!") - 42 -
  • 43. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -------------------------------------------------------------------------------------------------------------></script><noscript> O seu browser não suporta JavaScript!</noscript></body></html>17.3 - Elementos para inserir scripts e código E lem en to De sc riçã o <script> Define um bloco que contém um script <noscript> Define texto alternativo para ser apresentado sempre que o script não é executado <object> Insere um objeto na página <param> Define parâmetros para controlar o objeto <applet> Desuso. Use <object>18. OUTRAS POSSIBILIDADESO p r in c íp io d e fu nc ion am en to do HTM L j á d e ve e sta r só l id o em s ua m en te, seé q u e vo cê l e u t ud o o q ue a ntec e de est a se ção. P ara q ue es te t ex to não s et or ne en fad o nho, passa re mos p a ra a Esp e ci f i caçã o HTM, dese n vo lv i da p e loc ons ór c io da w eb , a tar e fa de d eta lh ar ca da u m dos tó pi co s l ista dos a se g ui r.Especificação HTML (em inglês) http://www.w3.org/TR/html4Especificação HTML (em espanhol) http://html.conclase.net/w3c/html401-es/cover.htmlConsórcio da web docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web • Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto http://www.w3.org/TR/html4/struct/text.html • Listas: blocos para a criação de listagens http://www.w3.org/TR/html4/struct/lists.html • Frames: permite que a página exibida no navegador seja formada por mais de um arquivo html (não recomendado, veja em Acessibilidade) http://www.w3.org/TR/html4/present/frames.html • Formulários: possibilita a interação do seu html com aplicações web. http://www.w3.org/TR/html4/interact/forms.html • Scripting: permite a automatização de certas seções do seu documento. http://www.w3.org/TR/html4/interact/scripts.html • Meta-informações: fornecem dados a respeito do próprio documento, como data, conjunto de caracteres usado, data de validade, etc http://www.w3.org/TR/html4/struct/global.html#h-7.4.4Essas 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 mc om p le tos. P ross eg u ir e mos a gor a a pa rt e f i na l d esta a post i la, on d e s erãoa bo r da dos a l gu ns te mas be m ba ca nas ;- )19. COLOCANDO SEU SITE NO ARA té a go ra so me nt e vo cê co ns egu i u v is ua li za r suas pág i nas. Ch eg o u a hor a d em ost rá- las p a ra o m und o to do. - 43 -
  • 44. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------P ar a p ub l ica r se u tr ab a lho na In te r ne t, voc ê p r ec isa so me nte d e es pa ço e mu m se r v id or e u m p rog r ama FTP g r at ui to.S e vo cê cos tu ma acess ar a I nt e rn et já d e ve t er vi sto q u e ex ist em v ári osse r v iços gra tu ito s de hos p ed age m d e s i tes. S eu e nd e re ço no se rv i do r se r áa l gu ma c oisa pa re ci da com ht tp : // ho me.se r v ido r. com / ~nom e do usu ar io. Vo cêt em q ue a ti va r o se r v iço. I n fo r me-s e co mo fa ze r i sto na d o cu me ntaç ãof o rn ec i da pe lo se r v iço d e hos p eda ge m.O u tra o pção é o b te r u m es paç o g r at u ito de u m s er v ido r na In te r ne t. Isto éi g ua l a re gi st ra r u ma c on ta d e e- ma il ( co mo p or ex em p lo, o bt er um e n de re çod 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 ru m es pa ço e m um s e rv ido r n a I n te rne t. E xis tem vá r ias co m pan h ias q ueo fe re ce m est e s er v iç o g r at u ito - e nt r e e las a A ng e lf i re (clique em "Sign Up" eescolha membro gratuito - ou veja mais abaixo uma lista com sérvios gratuitosde hospedagem) - isto é u m pr ocess o b em rá p id o.Angelfire http://angelfire.lycos.comP ar a ac essa r o s er v id o r v oc ê pr e cis a co nh e ce r o "N om e d o s eu se rv id o r"(por exemplo, ftp.angelfire.com) e t er um no me de usu ár io e s enh a.19.1 – Isto é tudo que eu preciso?!P ar a a ce ssa r o se rv i do r e pu b l ica r as p ág in as vo cê pr e cis a d e u m p rog ram aF TP. Vo cê n ão de ve te r um p ro gr a ma d est es a i nda , mas exi ste m v á rios d elesn a I nt er ne t p ar a do wnl oa d e são g r at ui tos.Ex is te m mu i tos pro g ra mas FT P. U m dos me l ho res é o Fi le Zi l la, e é g rat u it o .Vo cê po de o bt er o Fi le Zi ll a em ht t p: // fi l ez i ll a.so u rce for g e. net19.2 - Como eu faço envio os arquivos do meu site?!A b aix o fo rn e ce mos um ex em p lo d e com o fa ze r isto usa n do o ser v i do r A n ge l f ir ee o p ro gra ma F il e Zil l a. Es te p r oc ed i men to é ma is o u me nos i g ua l p a raq u al q ue r pr o gr ama FTP .C o nec te- se à In te rne t e a b ra o p rogr a ma FT P. I ns i ra "H os t Nam e"("ftp.angelfire.com" no "Address") , n om e d o us uá rio (em "User") e se nh a(em "Password") cl i qu e " Conn ec t". Vo cê a go ra t em a cesso a o se r v ido r. E mu 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 uc om p uta dor ("Local Site") , e n o o ut ro o d o se r v id or ("Remote Site"): - 44 -
  • 45. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 "Localsite") 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 umc l i qu e d u p lo nos ar q uiv os. A go ra o mu n do tod o p od e rá v e r se u s i te .D ê a u ma d as pá g i nas o no me d e "ind ex .h tm" (ou "index.html") e e la ser áa uto ma ti cam e nte a p á gi na de e nt ra da n o si te, o u se ja, b ast a d i git arh tt p :/ /ww w.a n ge l fi re. co m/ fo lk /h tm l ne t (sem qualquer nome de arquivo) ea b ri rá htt p: // www .ang e l fi r e.co m/ fo l k/ ht ml ne t/ i nd ex. htmP 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 noservidor) só pa ra vo cê (www.seu-nome.com) e ass i m t er um nom e do si te b e mm 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 tod a I nte r net . Vo cê po de e nco nt ra r na I nt e rn et vá rias f i rmas q u e ve nd emd o mí n io. Fa ça u ma bu sca do Goo g le.LISTA DE SITES COM INFORMAÇÕES SOBRE HOSPEDAGEM GRATUITALink 01http://neosite.ilogic.com.br/artigos/hospedagemgratis.htmLink 02http://criandosite.virgula.com.br/Link 03http://www.babooforum.com.br/idealbb/view.asp?topicID=42583520. HTML AVANÇADOEs 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 arf a mi l ia ri zad o c om a l in g ua ge m e f az e r si tes n a i nt er net . Da q ui em d ia nt e, es tea rt i go a pe nas fa rá um tour po r ou t ras li n gua ge ns e tec no lo g ias qu e po de m se r - 45 -
  • 46. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------u t i li za das p a ra o r gani z ar s eu s do cu me nt os, s epa ra r a a pa rê nc ia d o con te úd o,f ac i l ita r bus cas e c ri ar d oc u me ntos q ue, sob r et u do não ut i li z em f o rma tos qu ev e nha m a se r to r na r ob so le tos.Es tar e i d and o a qu i uma v isão ge ra l de t od as as te cno log i as us adas a tua l me nt eq 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 em 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ç ão20.1 - Folhas de Estilo (CSS)F ol has de es t il o p er mi t em q ue vo cê s ep ar e o co nte ú do do s eu do cu me nt o das ua r ep r ese nt ação g rá f ica. Co mo ex e mp lo, ao in vés de um a ex press ão do tip o :<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>Vo cê ut il i za a l go ma is o rg an i za do, com o:<div class="estilosa">Estilo separado do texto</div>E e ntã o voc ê d e fi n ir ia u ma c lasse de nome e st il osa o n de os atr i b utos , com ot i po de f ont e, ta ma nho e cor s er i am de f in id os. Essa d e f in i ção po de in c lus iv ees 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 oses t il os.O me ca nism o ma is u ti l i za do para c r ia r fo l has de es ti lo pa ra u m a r qu i vo HTM Lé o Cascading Style Sheet , o u CS S. Em C SS , o est i lo es t il osa par a o exe mp l oa ci ma po der i a s e r de f in i do com o:div.estilosa { color : red; font : fixed; font-size: 14;}A s va nta g en s d e usa r f o lhas de est i lo são : • S e pa raçã o e nt r e a i nfo r maçã o qu e o se u te xto pr et en d e p assa r e s ua a p rese nt ação • P e rm it e que to da a ap r ese nta ção do se u te xto s ej a mu da da s em q u e se ja p r ec iso a lte ra r o h t m l, b ast an do a pe nas q ue o ar q u iv o q ue c on te nha a f ol ha de est i lo se ja al t era do • Ma is o rg ani z ação pa ra se us d oc um e ntos • F ac i l ita a cr i ação de Te m p lat esP e la c la re za e o rg an iza çã o re s u ltante d o uso d e f olha s d e es tilo ,m u ita s tag s e a tribu tos do HT ML são c on s id e rad as obs o le tas ou se uu so é d epre c ia d o, in c lu s ive m u ita s d as q ua is en s in ad as n es te tu to ria l.S em p re qu e p oss íve l , u tiliz e CSS n os se us d o cum e ntos . - 46 -
  • 47. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------P ar a ma is in fo r ma ções so b re Fo lhas de Est i lo em HTML, co nsu lt e os l in ks q uea nex ei a ba ixo :Materiais de CSS http://www.codigofonte.com/cssEspecificação HTML http://www.w3.org/TR/html4/present/styles.htmlCascading Style Sheets, level 1 http://www.w3.org/TR/1999/REC-CSS1-1999011120.2 – TemplatesQ 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 es im u m g ran d e n ú me ro de le s. S e v oc ê es tá r e d ig i n do um te xto o u f a ze nd o ums it e co m post o po r mui tos a r qu i vos, p rov ave l me nt e voc ê dese ja q u e to dos se usd o cu me ntos HTM L te nh am a mesm a ap ar ênc ia o u o mes mo es t ilo.P ar a un i for m i za r o es t il o e a a p res en taç ão, vo cê p o d e c r iar u m m ode lo,t am bé m con h ec i do com o T em p la te, qu e co nt en ha o es q ue let o d e q ua l que rp á gi na de u m s ite o u tex to q u e se ja d i v i di do em vá rios a r qu i vos. Ess et em p la te po de con te r m e nus, tabe las e to dos os ca m pos qu e vo cê f or ut i li za r.Ex is te m ain d a os mo tor es de t em p lat e, q u e s ão so ft wa res q u e j un tam oc on te ú do c om os tem p la tes e p r o du ze m p á g in as HTM L. C r ia r um t emp l ated e pe n de do gosto de cad a um , po ré m se voc ê pr e te nd e uti l i za r u m s ít ioa uto ma ti zad o ex ist em vá r ios m oto re s de t em p la te q ue voc ê p od e ut i li z ar,c om o po r ex em p lo: • F r eeMa r ke r: é u m tem p la te e ng i n e. El e fa ci l it a a gera ção de t ext ua l (HTML, PostScript, TeX, source code, etc) e aj u da a s ep ara r ed i ção d e d es i gn da ló g ica . I nt eg r ad o co m se r v lets , XM L, P yt ho n e mais . • S ma rt y : é u ma c lass e d e te m p lat es. Fu n cion a de u ma f o rma q ue se pa re i n te r fac e d a ló g ic a d e pro g ram açã o e te m p or ob j et ivo, fac i l ita r e m e lh ora r o d ese n vo lv im e nto de qu al q ue r a pli ca ção e m P HP.20.3 – AcessibilidadeU 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ãou sáv e l e ac ess ív e l e le é, ta nto e m te r mos v isu ais qu an to na or g an i zaç ão d oc on te ú do. L e mb r e-se q u e to dos os t i pos de pesso as po de m ac essa r se u s it e,d es de as le i gas at é as es pe c ial ist as no assu n to q ue vo cê t rat a, d es de a qu el asq u e já co nh e ce m o s it e até as q u e n un ca ou v i ram fa la r d el e. S e u con te úd ot 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 sep e rc am.P ar a t e r u m b om n í ve l d e u sa bi l i da de e m se u s it e, si ga a s s eg u in tesr e com en daç ões : • Use esq uem as si m p les • A na ve ga ção do se u s ít io de ve ser i nt u it iv a • C r i e s eç ões d o t ip o "So b re es te sí t io ", " Qu em s omos ", e tc • Use ín d i ces na me d i da d o poss í vel • Es c re va r esu mos • Use re fe rên c ias • Use um a lóg i ca pa ra os n om es d e a rq u iv os e p astas • E v ite usa r f r am es, e las b lo qu e ia m o mo do nat u ra l d e s e nav eg a r pe la web - 47 -
  • 48. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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 , na me di d a do poss í ve l, s eu co nt eú do e m ma is d e u m f o rma to : tex to si m pl es, doc u me nto HTM L, etc • D is po n i bi l i ze s eu c on te ú do e m co p yl ef t ou e m o ut ras li c en ças • Va l i de s eu HT ML : ve r i fi q ue s e s eu có d ig o HT ML es tá vá l ido ou se e xis te m i nco r re çõesA 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 en e cess i da des esp ec ia is.O W3 C poss ui l i nha s g e ra is de r e co me nda ção q uant o à a cess i bi l i da de d oc on te ú do de do cu me nt os q ue u sa m l i ng ua ge m de ma rc açã o.20.4 – Sites dinâmicos ou automatizadosS 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 ed 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 uae xis tê nc ia. C aso na da d i sso se ja v e r dad e e v oc ê es tá f a ze nd o alg o gr an de o ue nt ão voc ê n ão te m te m po pa ra es c re ve r seu có d i go HTM L n a m ão, ta lv e z se jao mo me nto d e co nsi de ra r a a doç ão de um s ist ema aut oma t iza do. Des tac o tr êst i pos de les: • Ge re n cia dor es de c on te ú do • Bl o gs • W ik isGe 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 ea d mi n ist ram i n fo rma çõ es d is po n ív e is e m s ites . Mu it os s it es na web são a p enasa r qu i vos ht m l, mas t am bé m ex ist em s ites a uto mat i za dos q ue p e rm it ema 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 coc 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çãose 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 md e ma r cação. A l gu ns ge r en c iad o res d e c on te ú do p e r mite m q u e e xis tamu suá r ios ca pa zes d e a d ic io na r co me ntá r ios e m p u b li ca ções ex iste nt es o u at ém es mo c r iar suas p ró pr i as pá g in as at ra vés do pr ee nch im e nto de fo r mu lá ri os.O s B lo gs são cas os es p ec ia is de g e re nc iad o res d e co nt eú do qu e f un c iona mc om o d iár ios o u co lun a de e d ito r ia l, o n de o do no do blo g a dic io na t exto ,i m ag ens e c ó di go HTM L no s it e a pe nas pr ee n ch en do u m fo rm u lár i o.Já os W ik is são fe rr am e ntas que pe rm i te m q ua l qu er p esso a cr iar o u e di ta r u mt 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 ru t i li za da do q ue o HTM L. D uas c a ra cte r íst i cas p r in ci p ais d os s ist emas W ik isã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 mn om e es pe c ia l pa ra e la e es cr ev e r na pá gi na já e xis te nt e. A o ut rac 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 umh is tó ri co de tod as as m o di f ic ações fe it as nu m doc u men to.O s ge r en cia do res de c on te ú do, b l og s e wik is são es cr i tos na l g um a l in g ua ge md e p ro g ram açã o como PH P, Pe rl , Py th on, Ja va, Ru b y e m u it as v e zes u ti l iza mu m ba nco d e da dos p a ra ar maz e na r o con te ú do. Com u m po uc o d e est ud o,v oc ê p od e es c re ve r se u pró p r io s ist ema o u e ntã o ut i l iz a r u ma sol u ção p ron ta,c om o po r ex em p lo: - 48 -
  • 49. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- • Ge ren c ia do re s de c on teú do : Dr u pa l, S P IP, e tc • W ik is : P mW ik i, Ph pWi k i, M ed iaW ik i, TW ik i, e tc • B lo gs : b 2, Wo rd P ress, e tc20.5 - Web standards e validaçãoNes ta l i ção v oc ê a p ren d er á ma is a lg u ns con c ei tos te ór i cos do HTM L.20.5.1 - O que mais há para conhecer sobre HTML?!HTM L po d e se r esc r ito de vá r ias ma ne i ras. O n av eg ado r está ap to a le r HTM Les c ri to de v á rias ma ne i ras. P od em os d i ze r q u e HTML t em mu i tos d ia l etos. Est aé a raz ão p o rq ue a l gu ns w ebs i tes são a p res en ta dos de for mas d i ve rsas e md i f er en tes n av e ga dores .D es de o ap a re ci me nto da I nt ern et t e m s id o f ei tas vá r ias te ntat i vas p ara s en or ma ti za r o HTM L n ota da me nt e at ra vés d o World Wide Web Consortium(W 3 C) fu nd a do po r T im Be r ne rs- Le e (yep! o grande sujeito que inventou oHTML) . Mas, es te t em s ido um á rd u o e lo n go c am i nho.No passa do - quando você tinha que comprar um navegador – o Netsc ap ed o mi na va o m er ca do d e n av e ga do res. À qu e la é poca a s no rmas pa ra o HTM Les ta vam nas su as ve rsõ es 2. 0 e 3. 2. Mas pe lo fat o de do mi na r 9 0 % d om e rca do a Nets ca pe n ão te r ia - e nã o te ve - qu e s e p r eoc u pa r m u ito c omn or mas. Pe lo co nt rár i o, a Ne ts ca pe in ven ta va se us pr óp r ios e l em en tos d em a rca ção qu e nã o f unc io na va m em ou tros na ve ga do res.P or mu it os an os a M ic roso ft i g no rou co m p let am e nte a I n te rn et. Emd e te rm i na do m om en to, reso l veu co mp et ir co m a Ne tsca p e e la nço u se un av e ga dor p r óp r io. A p r i me i ra ver são do n av e ga do r da M i c roso ft s, o I nte r ne tEx p lo re r, não era me lh or do q ue o Ne tsca pe no su po rt e às no r mas do HTML .Mas, a Mi cr oso ft res ol v eu d ist r i bu i r s eu na ve ga do r g rat u ita me nt e ( is to se m prea 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 rm a is usa do e mais pop u la r.A pa rt i r das v e rsões 4 e 5 a Mi c roso ft an un c ia va q ue se us na ve ga dor eso fe re c iam c ad a v e z ma io r s upo r te às n or mas HTM L do W 3C. A Nets ca pe não sem 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 av e lh a e d esa tua l i zad a v e rsão 4.O q ue v em a s eg u i r é h is tó ri a. Nos d ias at ua is as nor m as HTML es tão na s uav e rsão 4. 01 e n o XHTM L. H oj e e m d ia é o I n t er ne t Exp lo re r q ue d et ém q u ase9 0 % d o m er ca do. O In te r ne t Exp l or e r ai n da te m se us e le m en tos p r óp r ios, m aso fe re ce sup o rte pa ra as no r mas HTM L do W3 C . Os na vega do res Mo z il la, Ope rae Ne tsc ap e ta m bé m su p or tam as n or mas.E ntão , quan d o v ocê c o di f ica HTM L de a co r do com as no rm as d o W 3 C, v oc êes tá c ons tru i n do u m w e bsi te par a se r vis ua l iz ado em to dos os n av e ga dores -n ão só a gor a m as tam b ém no fu t uro . E f el i z me nt e, tud o o q ue v oc ê a pr end e un est e t utor i al está de a co r do co m a ma is n ova ve rsão do HTM L, q ue é oX HTML. - 49 -
  • 50. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------20.5.1.1 - Legal!! Posso anunciar?!D e v ido à e xis tê nc ia d e di f er en tes ti pos de HTM L, vo cê pr ec isa in fo rm ar aon av e ga dor q u al é o "d i al eto " do H TML e no se u caso v o cê a pr en d eu XHTM L.P ar a i n fo rm a r ao na ve ga do r, v o cê usa o Document Type Definition . ODocument Type Definition d e ve se r es c ri to se m p re no to po do do cu m en to:Ex em p lo 1 :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Título</title></head><body><p>texto texto</p></body></html>A l ém d o Do cu m en t T y p e Def in ition, q ue i n fo rma ao na ve gad o r qu e vo cêes tá co di f ic an do XHTM L, voc ê pr e cis a a in da a d i ci onar i n fo r ma ção ext ra na t agh t ml , usa nd o os at r ibu tos x m lns e lan g.x m lns é a b re vi ação d e "XM L- Na me -S pac e " e dev e te r sem p r e o va lo rh tt p :/ /ww w.w 3.o r g/ 1 99 9 /xh tm l. Ist o é t u do o q ue você p r ec isa s ab e r. Se vocêt em o há bit o o u gosta de se a p ro fu n da r e c on he ce r co isas c om pl i ca das po de rál e r ma is sob r e na m esp a ce s no si t e do W 3C.namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names-19990114No 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 linguagemhumana) o do c um en to é es cr it o. As a br e via tu ras p ara as l íng uas ex ist en tes nom u n do to do, es tão nas ISO 639 standard . No exe m p lo ac i ma a l í n g ua d ef i ni d an o at r ib uto é o por tu gu ês do Bras i l ("pt-br") .U ma DT D in fo r ma rá ao n av eg ado r co mo de ve s er l ido e re nd e riz a do o HTM L.Use o exem p lo m ostr a do, co mo u m te mp l ate p a ra t o dos os s eus f u tur osd o cu me ntos HTM L.O DT D é im p or tan te a in da , pa ra a va l i daç ão da p ág i na.20.5.1.2 - Validação?! Porquê deveria eu fazer isto?!I ns i ra o DTD nas s uas p ág i nas e p o de rá v e rif i ca r e rr os n o se u HTM L, usa n do ov a li da do r gr at u ito do W 3C. ( ht tp : // va li da to r.w 3.o r g )P ar a tes tar o va l i dad o r fa ça o se g u in te: c ri e u ma pá gi na e p ub l i qu e n aI n te r net. A se g ui r e ntr e e m h tt p: // va l id ato r.w 3.o r g e lá di g it e o e n de re ço (aURL) da su a pá g i na, d e po is c liq u e no bot ão va l i dar. S e seu HTM L est iv e rc or r eto, va i a pa re cer u ma me nsa ge m d e con g rat u laç ões. S e não, se ráa p rese nt ada u ma l ista d e e r ros, in fo r ma nd o o q uê est á e r ra do e on d e. Co me taa l gu ns e r ros pro pos i tai s no se u có d ig o pa ra v e r if i car o q u e aco nt ec e.O va l id ador não é úti l so me nt e no e n cont ro de e r ros. Al g uns na ve ga dor est en ta m i nte r p ret ar os e r ros c om et i dos pel os dese n vo l ve do res e co nse rtar o - 50 -
  • 51. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------c ó di go m ost ra n do a p á gi na co rr e tam en te. Em n av ega do res assi m voc ê nun cae n con tr ará e r ros n o p r óp r io nav e ga do r. Já ou tr os na ve ga do res n ão ac e itam oe r ro e ap rese nt am a pá g ina a r ru in a da o u mes mo n em ap rese nt am . O va l ida do re nt ão a j uda v ocê a e n con tr ar e r ros q ue v oc ê não te nha ne m i d é ia d e qu ee xis t iamS e mp re val i d e suas p á gi nas, pa ra t e r cer t eza q ue e las s er ão most ra dasc or r eta me nt e e m to dos os na v ega do res.21 - GUIA DE REFERÊNCIA RÁPIDAC o mo res um o de to do o c ód i go HT ML ap res en ta do at é ago ra, d e ixo al g um ast 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 nob o lso.Ca rac te rístic as g e rais d e u m d o cu me nto H TML CÓ DI GO F UN ÇÃO E XI GE FECH AMEN TO html bloco interno é considerado documento html sim head bloco que define a cabeça do documento sim title bloco que define o título do documento sim body bloco interno é considerado o corpo do html simAp a rê nc ia d o do cu me n to CÓ DI GO F UN ÇÃO E XI GE FECH AMEN TO b bloco em negrito sim i bloco em itálico sim u bloco sublinhado sim font muda as características da fonte sim pre mantém o texto pré-formatado simQu eb ra d e linh a, p ará g ra fo s e d iv isõ es CÓ DI GO F UN ÇÃO E XI GE FECH AMEN TO br quebra de linha não center texto centralizado sim p parágrafos recomendado div cria uma divisão simAtribu to s d ive rso s CÓ DI GO AT RIB UTO F UN ÇÃO V ALO RES POS SÍVEIS p, div align alinhamento letf, right, justify, center font face fonte nome da fonte font size tamanho -7 a +7 font color cor ver no tópico de coresE sp aç am en to e en tid a de s CÓ DI GO F UN ÇÃO E XI GE FECH AMEN TO   espaço simples não é uma tagO d ocu m en to H T ML bá s ic o<html><head> <title>Aqui colocamos o título</title></head><body> Aqui colocamos os conteúdos visíveis</body> - 51 -
  • 52. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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>. . . </h2><h3>. . . </h3><h4>. . . </h4><h5>. . .</h5><h6>Cabeçalho menor</h6>E lem en tos p a ra te xto<p>Isto é um parágrafo</p><br> (mudança forçada de linha)<hr> (linha horizontal)<pre>Isto é texto pré-formatado</pre>E s tilos lóg ic os<em>Isto é texto enfatizado</em> <strong>Isto é texto forte</strong> <code>Isto é código de computador</code>E s tilos f ísic os<b>Isto é texto em negrito</b> <i>Isto é texto em itálico</i>L iga çõ es e ânc o ra s<a href="http://www.tiagosouza.com/">Isto é uma Ligação</a><a href=" http://www.tiagosouza.com/"><img src="URL" alt="Texto alternativo"></a><a href="mailto:tiagocopa@gmail.com ">Enviar e-mail</a>Um a ân cora c o m n om e:<a name="dicas" id="dicas">Dicas Úteis</a><a href="#dicas">Saltar para a Secção de Dicas</a>L is ta nã o o rd ena da<ul> <li>Primeiro item</li> <li>Item seguinte</li> </ul>L is ta o rd en ad a<ol> <li>Primeiro item</li> <li>Item seguinte</li> </ol>L is ta de de f in içõ es<dl> <dt>Primeiro termo</dt> <dd>Definição</dd> <dt>Termo seguinte</dt> <dd>Definição</dd> </dl>T ab e la s<table border="1"><tr> <th>um cabeçalho</th> <th>outro cabeçalho</th></tr><tr> <td>algum texto</td> <td>mais texto</td></tr></table> - 52 -
  • 53. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------S ubjan e las (molduras, ou "frames")<frameset cols="25%,75%"> <frame src="pagina1.html"> <frame src="pagina2.html"><frameset>F o rmu lá rio s<form action="http://www.tiagosouza.com/processar.php" method="post/get"><input type="text" name="lastname" value="Nabo" size="30" maxlength="50"><input type="password"><input type="checkbox" checked="checked"><input type="radio" checked="checked"><input type="submit"><input type="reset"><input type="hidden"><select><option>Rabanetes<option selected>Alhos<option>Cebolas</select><textarea name="Comentario" rows="60" cols="20"></textarea></form>E ntida d es< representa o mesmo que <> representa o mesmo que >© representa o mesmo que ©Ou tros E le m en tos<!-- Isto é um comentário --><blockquote> Texto citado a partir de uma fonte externa.</blockquote><address>Endereço (1ª linha)<br>Endereço (2ª linha)<br>Cidade<br></address>22 – REFERÊNCIAS COMPLETAS DE HTML 4.01To dos os e le me nt os ord e na dos a lf a bet i ca men te : ELEMENTO DESCRIÇÃO <!--...--> Permite inserir um comentário <!DOCTYPE> Indica o tipo de documento usado na página <a> Insere uma âncora (marca que identifica o local do documento em que se encontra) <abbr> Insere uma abreviação <acronym> Insere um acrônimo <address> Insere um endereço (postal) <applet> Insere um applet (miniaplicação em Java) Desuso (utilize <object>) <area> Define uma área sobre uma imagem <b> Insere texto carregado (negrito ou "bold") <base> Define o URL base de onde partem todas as ligações relativas da página <basefont> Define o tipo de letra base para a página. Desuso (usar CSS) <bdo> Define a direção em que o texto é apresentado <big> Texto com letra maior <blockquote> Define uma citação extensa <body> Elemento que contém o corpo (conteúdo visível) da página - 53 -
  • 54. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com-----------------------------------------------------------------------------------------------------------<br> Provoca uma mudança de linha forçada<button> Insere um botão num formulário<caption> Define a legenda de uma tabela<center> Texto alinhado ao centro. Desuso.<cite> Insere uma citação<code> Define o texto que é código de computador<col> Define os atributos para as colunas de uma tabela<colgroup> Agrupa colunas numa tabela<dd> Insere texto que descreve uma definição<del> Define texto que foi apagado ("deleted")<dir> Mostra uma lista de diretório. Desuso.<dfn> Insere a definição de um termo<div> Insere uma divisão (ou seção) dentro da página<dl> Insere uma lista de definições ("definition list")<dt> Insere a definição de um termo<em> Insere texto enfatizado (escreve-se em itálico)<fieldset> Elemento que contém um grupo de campos de um formulário<font> Define o tipo de letra, o tamanho e a cor a aplicar ao texto. Desuso. (usar CSS)<form> Insere um formulário<frame> Define uma subjanela (moldura) dentro da janela principal do browser. A subjanela contém a sua própria página da Web<frameset> Insere um conjunto de subjanelas ("frames")<h1> a <h6> Define cabeçalhos ("headers") desde o nível 1 (mais importante) até ao nível 6 (menos importante)<head> Contém informação importante a respeito do documento que não deve ser apresentada no corpo da página<hr> Desenha uma linha horizontal<html> Elemento dentro do qual são colocados todos os restantes elementos da página<i> Insere texto para ser escrito com caracteres itálicos<iframe> Insere no interior da página da Web uma subjanela ("frame") contendo a sua própria página da Web<img> Insere uma imagem<input> Define uma caixa para inserção de texto num formulário<ins> Define texto que foi inserido em substituição de outro mais antigo<isindex><kbd> Define texto inserido através do teclado<label> Define uma marca que será associada a um controlo. Ao clicar nessa marca, o controle que estiver associado deverá ser acionado.<legend> Define um título num elemento <fieldset><li> Define um item de uma lista<link> Faz referência a um recurso externo e estabelece a ligação com ele<map> Define um mapeamento sobre uma imagem<menu> Define uma lista de menu. Desuso.<meta> Dá informação sobre aquilo que o documento contém<noframes> Define um bloco noframes, o qual só será apresentado se o browser não suportar os elementos <frameset> e <frame><noscript> Define um bloco noscript, o qual só será apresentado se o browser não suportar o elemento <script><object> Insere um objeto dentro da página (como um filme em Flash, por exemplo)<ol> Define uma lista ordenada<optgroup> Define um grupo de opções<option> Define uma opção numa lista de um formulário<p> Insere um parágrafo<param> Define um parâmetro para o elemento <object><pre> Define texto pré-formatado<q> Define uma citação curta<s> Define texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso. (usar CSS) - 54 -
  • 55. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- <samp> Define uma amostra ("sample") de código de computador <script> Insere um script <select> Define uma lista com itens selecionáveis <small> Define texto menor ("small") <span> Insere uma divisão (ou secção) dentro da página <strike> Define texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso (usar CSS). <strong> Define texto mais forte (será escrito em negrito) <style> Define estilos CSS a aplicar na página <sub> Define texto que fica alinhado um pouco mais abaixo ("subscript") <sup> Define texto que fica alinhado um pouco mais acima ("superscript") <table> Define uma tabela <tbody> Define um corpo ("body") numa tabela <td> Define uma divisão, ou célula, numa tabela <textarea> Define uma área para inserção de texto num formulário <tfoot> Define o rodapé de uma tabela <th> Define o cabeçalho de uma coluna numa tabela <thead> Define o cabeçalho de uma célula numa tabela <title> Define o título da página <tr> Define uma linha de células numa tabela <tt> Define texto que imita o de uma máquina de escrever antiga ("teletype text") <u> Define texto sublinhado ("underlined") Desuso (usar CSS) <ul> Define uma lista não ordenada ("unordered list") <var> Define uma variável23. ATRIBUTOS ESPECIAIS DE HTML 423.1 - Atributos intrínsecosQ uas e t odos os e lem e ntos do HTML p oss ue m a tr i bu tos. O s a tr i bu toses 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 oe l em en to n a Re fe rê n cia d e H TML (veja mais acima) . O s a tr i bu tosa 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 emHTM 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 ntosd o HTM L 4, p or q ue são at r i bu tos i n tr í nse cos da l i nguag e m.23.2 - Atributos nucleares ou intrínsecos (" Core Attributes ")Não pod em se r usa dos co m os el e me ntos ba se, h e ad, h tm l, me ta, p a ram,s c rip t, s tyle, e title. AT RIB UTO V ALO R DES CRI ÇÃO class class_rule ou style_rule A classe (CSS) a que pertence o elemento id id_name Um nome único (não deve ser repetido no mesmo documento) para o elemento style style_definition Definição de um estilo dentro do próprio corpo do documento ("inline style definition") title tooltip_text Texto a apresentar como dica23.3 - Atributos lingüísticosNão po de se r us ado co m os e l em en tos bas e, b r, f ra m e, f ram es e t, h r,if ram e , para m e s c rip t. - 55 -
  • 56. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- AT RIB UTO V ALO R DES CRI ÇÃO dir ltr | rtl Define a direção do texto lang language_code Define o código da língua usada na escrita dos textos23.4 - Atributos de teclado AT RIB UTO V ALO R DES CRI ÇÃO accesskey carácter (corresponde a Define um atalho do teclado (seqüência de uma tecla) teclas) que permite aceder mais rapidamente a um elemento da página tabindex número Define o número de ordem ("tab order") do elemento no acesso através da tecla tab23.5 - Eventos de janelaA 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 tosp 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 rp a rte d o na ve ga do r, c om o po r ex em p lo, exe c uta r có dig os J ava S cr i p t qu an do ov is i tan te c li ca r n u m de te r mi na do e le me nto . A lis ta a pr es en tad a m a is a ba ixom 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 ra ções de res pos ta a e ve nt os.S ó po d em se r usad os c om os e l em e ntos <bo d y> e <fra m es e t> AT RIB UTO V ALO R DES CRI ÇÃO onload script Script a executar quando o documento acabar de ser carregado onunload script Script a executar quando o documento for abandonado23.6 - Eventos para formuláriosS ó po d em se r usad os c om e l em en tos asso c ia dos a u m fo rm u lár io : ATRIBUTO VALOR DESCRIÇÃO onchange script Script a executar quando o valor contido no elemento sofrer uma alteração onsubmit script Script a executar quando o formulário for submetido onreset script Script a executar quando o conteúdo do formulário for reposto nos valores iniciais onselect script Script a executar quando o elemento for selecionado onblur script Script a executar quando o elemento perder o foco onfocus script Script a executar quando o elemento ganhar o foco23.7 - Eventos de tecladoNão p od em s e r usa dos co m os e le me nt o base , b do, b r, f ra me, f ra mes et, h ea d,h t ml , i fr ame , me ta, pa ra m, sc r ipt , s ty l e, e ti t le. ATRIBUTO VALOR DESCRIÇÃO onkeydown script Script a executar quando uma tecla é pressionada onkeypress script Script a executar quando uma tecla é pressionada e seguidamente libertada onkeyup script Script a executar quando uma tecla é libertada - 56 -
  • 57. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------23.8 - Eventos do mouseNão po dem s er usad os co m os e le me ntos base, b do, br, f ram e, fra mese t,h ea d, h tm l, i f ra me, me ta, par am, sc r i pt, sty l e e t it le . ATRIBUTO VALOR DESCRIÇÃO onclick script Script a executar quando é detectado um clique no rato ondblclick script Script a executar quando é detectado um clique duplo no rato onmousedown script Script a executar quando o botão do rato é pressionado onmousemove script Script a executar quando o ponteiro do rato muda de posição onmouseout script Script a executar quando o ponteiro do rato deixa de estar sobre um elemento onmouseover script Script a executar quando o ponteiro do rato passa a estar sobre um elemento onmouseup script Script a executar quando o botão do rato é libertado24. O PRESENTE E O FUTURO DO MARKUPA 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 raa r maz en ar e cat eg or i za r co nt eú do, t an to é q u e e las est ão s en do d es en vo lv id asp a ra a como da r da dos c om d i fe re nt es pr opós it os, in clu i n do re p res en ta ções d er ot eam en to d e c ha mad as te le fôn i cas, fó rm u las ma te má ti cas e e s que mas d ec la ssi f ica ção de r em é d ios. Nos p róx i mos tó pi cos ve re mos c om o essag e ne ra l iza ção es tá tom an do fo rm a.24.1 - O consórcio da WebO 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 dosp e lo Wo rl d Wi d e W eb C onso r ti um , o Co nsór c io da W eb ou s im p les me nt e W3C ,u ma i n ic ia ti v a cr ia da p a ra pa d ron i za r m ui tas d as t ecn o log ias d e i n fo rm açãos ur g i das com o a d ve nto da I nt e rne t.O s u cesso d o HTM L l e vou a d i v ers os pes q u isa dores a ex plo ra r ma is asp 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 masA 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 mag 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 usadaspara definir linguagens) fo ra m de f in i das : o S GML e o XML.24.2 - SGML e HTMLO S GML (ou Standard Generalized Markup Language, Linguagem de MarcaçãoGené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 rl a rg am en te a do ta da. C o mo meta l in g ua ge m, o S GML é u t il i za do pa ra d efi n i rn 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 deS GML. - 57 -
  • 58. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------24.3 – XMLO XML tam b ém é um a l in g ua ge m d ef i n ida so br e S GM L, mas que se rv e pa rad 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 eb e m es tr i ta. O XML é m a is si m p les d e se r in te r p ret ado v ia so ftwa re e p or issot em ga n ho b ast an te vi s ib i l id ad e. Ex em p los d e l in g uage ns de ma rc açã o c r ia dase m XM L são : • M a th ML: u sa da pa ra n ota ção ma te mát ic a. • R DF: usa do pr i nc i pa lm e nte pa ra a rma z ena r n ot íc ias. • V o ic e XML: p r oj eta da p a ra esq u em at iz ar c on ve rsas e nt re um se r h u ma no e u m com p uta do r. • XHT ML: um a v ers ão d o HTM L ma is si m p les e es c ri ta em XML .24.4 - RDF e SyndicationE m esp ec ia l, o R DF (Resource Description Framework) é um a l in g uag e mu 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 (RDFSite Summary, ou Conteúdo de Sítios em RDF) , qu e é u m c on tê in e r p a raa r maz en ar i n fo r maçõ es de s ites n a i nt er ne t.P or exe m pl o, se vo cê q ui sesse d i v u lga r n ot íc ias veic u la das do s it e iM ast e rsd e nt ro de se u p ró pr i o we bs ite , vo cê TE RI A q ue f az er u m p ro g ra ma b e mc om p l ica do p a ra ex tr a ir essa i n fo r maçã o d o HTM L, mas o s it e iM aste rst am bé m o fe r ece s eu c on te ú do em R SS, que na da mai s é do que u m ar q u iv oes c ri to num d ia le to X ML qu e co nt ém os tí t u los, as data s e os/ as au tor es dasn ot íc ias n um a es tr ut ur a be m r í g id a, qu e pod e s er facil m en te in te r p ret ada p o ro ut ros s i tes e p ro gram as. E nt ão, se al g ué m q u ise r di v u l ga r a l gu m ti po d ec on te ú do pu b l ic ad o no s i te iMast e rs de nt ro d e se u s ite , basta uti l i za r o RSSd o i Mast ers.* iMasters é um site voltado a desenvolvedores web, muito bem conceituado. www.imasters.com.brO R SS r esol v eu o p ro bl e ma d e jun ta r i nf or ma ções de d if e re nt es s ites , ca da umd 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 lateHTM L. A lém d isso, o RS S pe r mi t e q ue a in fo r ma ção d o s it e se ja o bt i da p orq u al q ue r s ist em a d e tr ata me nt o d e in fo r maç ões (ou tro s it e, u m p r og ra ma q u ef a z a le i tu ra de n ot íc ias, um a par e lh o mó vel , et c) .O RS S é su f i ci en te me nt e co m p le to pa ra pe r mi t ir ta mbé m qu e in fo r ma ções d ec on te ú dos m u lt i m íd ia se ja m dis t ri b u í das. Exe m p los disso sã o os p o dcas ts e ov o dcas t. O p o d ca st é o RS S qu e co nt ém i n f or ma ções d e ar q ui v os de á ud iod i sp on í ve is e m u m s it e (por exemplo, áudios de notícias, músicas ouprogramas de rádio) . Um toc ad or d e á u d io po de se r c ons ta nte me nt ea 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 odosos á u d ios a uto ma ti cam e nte , sem i nt e rv enç ão do usuá rio. Co m u m v od cas t és im i la r e co ns iste num R S S pa ra a r qu i vos d e ví d eo.25. DICAS FINAISS e vo cê est á le n do is to a qu i n este mom en to, p ara b éns, iss o s i gn i fi ca qu e vo cêc e rta me nt e es tá ap to c om o con te ú do a qu i tr an sm it i do.Então, agora eu já sei tudo?!Vo cê a p re nd e u u m boc ad o d e coi sas e já est á e m co ndi çõ es d e c ons tr u i r se uw e bsi te. No en ta nto o q ue vo cê a p re n de u é o bás i co e a in da há m u i ta co isa a - 58 -
  • 59. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------se r ap er f eiç oa da. Pod e mos d i ze r q ue voc ê co nst rui u u ma base só li da p a rac on ti n ua r e se a p rof u nd a r no assu n to.Nes ta ú lt i ma li ção, de ixo a l gu mas d i cas fi na is : • P ar a com eç ar , a co nse l ha mos a es cr ev er se us d oc um e ntos HTM L de f o rma o r de na da e est r ut u rad a. Ass i m faz e nd o vo cê e sta rá n ão só m ost ra nd o aos ou tr os qu e poss ui u ma bas e só li da d e co nh ec i me nt o, m as ta m bém es tar á fa ci l it an do a le i tu ra, in te r p ret ação e man ut en ção d o có d i go. • S i ga as nor m as e va lid e s eu có di g o. Mas, n ão faç a di sto u ma fo nt e d e st r ess. Es cr e va u m XHTM L c lar o, us e o DTD e v al i de s uas p ág in as no h tt p :/ /va l i da tor .w 3c.o rg • C o lo qu e con te ú dos nas s uas pá gi na s. L em br e-s e qu e HTM L é ape nas a f e r ram en ta q u e poss ib i l it a a pr ese nt ar i nf or m ação na I n te r net, ass i m é n e cessá r io q u e ha ja a in fo r ma ção a ser a pr ese nta da o u se ja, o c on te ú do. P ág i nas l ind as e be m d es en ha das s ão ó ti mas, mas as p esso as b us ca m i n fo r maçã o na In te rn et. • E v ite en ch e r suas p á gi nas c om im a ge ns pes ad as e o utros " ba la n ga nda ns" qu e v oc ê en con t ra na In te r ne t. Ist o fa z com s uas p á gi nas dem o re m a ca r re ga r e é f r ust ra nte p ara o usu ár io. Pá gin as q ue d e mo ram m a is de 20 s e gu n dos par a ca rr e ga r po d em p erde r a té 5 0% d os se us v is ita nt es. • L e mb r e-se d e ca das tr a r se u s ite nos si tes de b us ca, d e m od o a q ue o ut ras pessoas , al ém d a s ua f am í l ia, possa m e nco ntrá- las e v is itá -la s. Na pá g ina d e en tr ad a d os s i tes p a ra cad ast ro em m ecan is mos de b us ca v oc ê en co nt ra rá u m l in k pa ra a di c io na r s eu si te (o mais importante é o Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos). • Nes ta a post i la vo cê a p re nd eu a usa r o Bl oc o d e Not as, qu e é u m s im p les e fá ci l e d ito r d e t exto s, c on tu do t alv e z vo cê ag o ra p ossa p e nsar e m us ar u m e d ito r m ais sof i st ica do c om ma is p oss ib il ida des e f e r ram en tas. Vo cê en co nt ra um a lis ta gem e s um ár i o de di fe r en tes e d ito r es em Su p er dow n loa ds. com . br o u p el o p ró p r io Goo g le.Como eu aprendo mais?!A n tes de m a is n ada é m u ito i m po rt an te q u e vo cê c o ntin ue a tr ab al har ee xp er i me nta r co m t ud o q ue voc ê ap re n deu n est e tut or ia l. Q uan d o e n con tr a ra l gu m s it e q u e con te n ha u ma c o isa qu e v o cê a che i nter essa nt e, es tud e oc ó di go do s ite . No se u n av ega do r vá ao me nu "View" - "Ver" e esc ol ha"Source" - "Código Fonte" p ar a ve r o có d i go d o s i te.S ó nos rest a des eja r a vo cê q u e p ass e ho ras a gra dá ve is ao la do d o se u nov oa m igo , o HTM L.O que pretende divulgar?!Q u e t ip o d e con te úd o v oc ê po de a p res en ta r na We b ? ! P rat i ca me nt e o q u eq u is er. E is a q ui a l gu ns t i pos d e c on te ú do m a is co mun s na We b, n o mo me nt o: • I nfo rma çõ e s pe ss oa is: in fo rma ções so b re vo cê, por ex em p lo. • H obbies ou in te re sse s e sp ec ia is: fi l mes, moto c ic let as, et c. • P ublica çõe s: com o jo rn ais , re v ist as. - 59 -
  • 60. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.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, e tc • Do cu m en ta çã o On -lin e: d esd e ma n uai s, g ui as d e t r ei na me nto, d i c io nár ios, e tc. • Ca tá lo go s d e co mp ra s: c om er ci a li za ção de a rt i gos. • L oja s on lin e . • P es qu isas d e op in iã o: a in ter at i vi da d e c om o usu ár io a tr av és de f o rm u lár ios, c ai xas d e su g estõ es, e tc. • E du ca çã o on line : n u me rosas un i ve rsi d ad es, esc ol as e em p r esas p a rt ic u la res o fe re ce m o e nsi no a d is tân c ia a tra vé s da We b.O ú n ico l im i te da We b é a sua p r óp r ia von ta de. Po r i sso, s e a s ua id éi a n ãoes t iv er nest a l ist a ou p a re ce r m ei o m al uc a o u a in da não est iv e r a ma du re c i da,p a re e nav e gu e u m p o uco pe la I nt e rn et. Co m c er te za e nc on tr a ex ce le nt esi d é ias e pod e rá a ma du r ec er as su as e te r m u it as o ut ras.Estabeleça seus objetivosVo 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 rc 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 ed 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 eq 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 dao u não ao m e u p ú bl i co a lv o? !O s ob je t ivos não p r ec is am se r g r an d iosos, mas a d ete rm i naçã o i rá a ju dá -l o ae la bo ra r, or g an i za r e c o di f ica r su as pá gi nas com u ma m a ior p rob a bi l i da de d es uc esso.C aso vá d ese n vo lv er u ma a p rese nt ação We b pa ra um a emp re sa o u p essoas éi m po rt an te q u e vo cê c ol ha ju nt o ao s eu cl ie nt e se us o b jet i vos, id é ias, a for m aq u e ima g ina s ua pá gin a, e tc. Ass im , f i ca rá be m ma is fác i l de c om eça r se ut ra ba l ho.Divida seu conteúdo em tópicosC r i e u ma list a co m os p r i nc i pa is t óp i cos, a p r i nc í pio não i mp or ta a o r de m. Es taé um a fo r ma de c om eça r a se o rga ni za r.S ua l is ta p o de rá te r q u a ntos tó p icos d ese ja r, mas se p e rca l i sta n do um aq u an ti da de e no r me de tó p icos (seu leitor poderá se cansar e se perder emmeio a tantas opções).Organização e NavegaçãoA 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 ea in da con sid e ra ções im p or tan tes co mo : • O s t ipo s de i n fo rma ção qu e s e ad a pta m m el h or a c ad a es tr ut u ra. • C o mo os lei to res co nse g ue m se d es lo ca r pe lo co nte údo de ca da t i po de es t ru tu ra pa ra e nco ntr a r a s i nf orm aç ões d e q u e p re c isa m • C o mo Te r c e rte za de q u e os l e it or es co nse g ue m se lo ca li za r n os se us d o cu me ntos (contexto) e a ch ar o ca mi n ho de vo lt a at é uma p os içã o c on he c id a.A o le r esta p a rt e re f lit a c omo su as in fo r ma ções se en ca ixa r ia em c ad a u ma.Vo cê po de rá com b i nar, a té mes mo, d uas es tr u tu ras e cr i ar um a no va fo rma d en av e gaçã o. - 60 -
  • 61. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com -----------------------------------------------------------------------------------------------------------Webdesign e Visão do ProjetoA 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 mWe b Si te, o q u e é u m e r ro.O co nc e ito d e W eb D es i gn en vo l ve t odo s os as p ec tos da con st r uçã o d e u ms it e, d es de o des en ho de su a est r utu ra de na ve ga ção e fo rm a d ed i sp on i bi l i za ção da i n fo r maçã o a té o des en vo l vi me nto d o p ro je to g r áf i co.A c ons tr ução d e u m We bs it e dev e, an tes d e ma is nad a, s er e nt en d i da com ou m p ro jet o, co mpo sto d e fas es e d ese nvo lv i do po r pess oas de b ac k g rou nd sd i f er en tes.Conteúdo e FormaO 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 ec ons tr u ção d e si tes.A p r i me i ra m u it o re la ci o na-se ao p ú b l i co a lv o. Pa ra qu al t i po d e p ú b l i co voc êes tá d is pon i b i li za n do i n fo rma ção ? ! Q uai s são as pr io ri d ad es e i nt e resses dest ep ú b l ico ? Qu e t i po d e c on exão é m a is usa da p or el e? !A s res postas pa ra a se g un da p erg u nt a c e rta me nt e e nv o lv em t rês po ntos : o 1 ºé o con te úd o. É o e lem e nto c en tr a l. O 2 º po nto é o des i g n do s it e (estruturade 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 vap 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 es uc esso, co ns id er an do o ti po d e i nfo r ma ção d isp on i bi li za da c on fo r me se up ú b l ico a lv o. O ut ro p on to é a at ua l izaç ão pa ra q u e não pe r ca u ma d asp r i nc i pa is ca ra cte r íst i cas da I nt e rn et : a d i nam i c idad e. 1 . Na c r iaçã o d o p ro j eto g rá f ico , t en te se mp r e o p ta r po r so l uções q u e m e lh or se a da pt em a p la ta for ma m ais usad a. Po r exe mp lo: mon i to r 1 4 p o le ga das c om reso l uç ão d e 6 40x 48 0, faç a co m a m el hor d iag ram açã o d as pá gi nas a co nte ça q u an do o s it e é vi st o n esse t ip o de mo ni to r e r eso l uçã o. C aso o se u si te de va se r dia g ram a do pa ra u ma r eso lu ção o u t ama n ho de mo ni to r d i f er en tes d o ma is usa do, in fo rme n o s it e. 2 . Nu m pro jet o g rá fi co d ev e se mp r e se p erg u nt ar se s ua ap res en ta ção f i co u a de qu a da o u não ao qu e s eu c l ie nte d ese ja va e ao s eu p ú b l ico a l vo. 3 . P ar a te r u ma g ar an t ia que suas im a ge ns se rão se mp r e be m v is ua l iz ad as, pro c ur e t ra ba l har co m i ma ge ns p al et i za das (formato .gif) . O m e lho r r es u lta do p a ra isso se rá t ra balh ar sua s ima ge ns em R GB e d e po is i nde xá- las com o m eno r n ú m ero d e co r es poss íve l. Caso p re c ise u t i li za r i ma ge ns Tr ue C olo r, sa lv e-as e m fo r mato . jpe g, qu e res ul ta rá e m a rq u iv os pe qu eno s. 4 . S e mp re i ndi q u e em que b rows er s ua pá g i na se rá m e lhor v is ua li zad a. 5 . A pá g i na d e en tra da d e um s it e é mu i to i mpo r tant e. E la dev e se r p r oj eta da d e fo r ma q u e d iga a q u e o si te se de st in a, s eja de f or ma t ext ua l, v isu al o u es tru t ura l. - 61 -
  • 62. Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------- 6 . O co nt eú do e fo r ma c omo el e é a p res en ta do se rão os p rin c i pa is a tra t ivos de s uas pág i nas, a não s e r q ue o p on to c ha ve se ja m as i m ag ens. Po r iss o, não pe nse que a net é ig u al a o ut ras mí d ias. 7 . D i r ei tos au to ra is: A p r ote ção d e d ir e itos a ut ora is não cost u ma se r m u it o e vi de nt e n a We b. O des ej o or i g in al d e um a pági na n ão é p r ote g i do. Mas q ua l qu e r tex to, g r áf i co, v íd eo ou á ud i o o r i gi nai s de ve se r p ro te g id o. U m l i nk o u UR L não é p ro teg i do , mas u ma l is ta de l i n ks (como no caso das bibliotecas virtuais) d e ve s er p r ote g i do p e los d i r ei tos a ut ora is. 8 . A n et iq ue ta e Do m ín io pú b l ico : A We b f oi c r ia da com b ase em se r ca paz d e a ta r l in ks d e h ip e rt exto de q ua l qu er o ut ra lo ca liz ação da re d e. C o nse qu ent em en te, qu an do voc ê d is po n ib i l iz a u m si te, i m p li ca em vo cê p e r mi ti r a o ut ros " li n ka r" su a p á g in a de We b, po ré m a ne t iq ue ta r e com en da q u e s e p e ça p er m issã o aos W e bmast e rs se mp r e q ue p oss ív e l.26. CONCLUSÃOO 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 nteg r an de , e d i f ic i lm en te uma p essoa d om i na to dos os as pe ctos ep a rt ic u la ri da des. Po r i sso é b as tan te c o mu m o uv i r mos t e rmos com o“ We bd es ign e r” e “P rog r ama do r We b ”. Os We b des i gne rs ge ra lme nt e do m ina m aa rt e d a c ri aç ão de la yo uts, i nt e rfa ces co m o usuá r io, t i po gr a fia , C SS ep r og ra mas d e e d i ção d e i m ag en s. Os P rog r ama do res W eb po r s ua v e z sãor es po nsá vei s pe la es tr u tu ra ção d os có d i gos da s pá gin as, p ela p r og ra ma çãod as L i n guag e ns de Se r v ido r e Na ve ga do r e pe la cr ia ção de ba nco d e da dos.A p esa r de e xc ita nt e, a d is cuss ão so br e esses t ema s c om eça a fu g i r mu i to d oo b jet i vo ini c ia l des ta a pos ti la, q u e é a in t ro du ção p r át ic a do l e ito r o u d al 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 an oçã o s ob re as no vas t ec no lo g ias e o fu tu ro d a l i ngua ge m de ma rc açã o.A o a va nça r n os est u dos lo go se p e rc e be essa ra m if i caç ão e c ab e a o es tu dan ted es en vo lv er a ár ea q ue ma is l he a tra i.Es pe ro qu e v oc ê te nha gosta do.U m a b ra ço,T ia go So u zah tt p :/ /ww w. tia gos ou za. comh tt p :/ /us ecl i c k. bl ogs po t.co m - 62 -

×