até

---

Define Define Define Define Insere Insere Define um documento HTML o conteúdo principal, o corpo do documento títulos, de 1 a 6 parágrafo linhas em branco, quebra de linha uma linha horizontal um comentário 8. FORMATAÇÃO DE TEXTO A l i n gu ag em HTM L de f in e vá ri os el em en tos pa ra s e for mata r um t exto , co mo p o r ex em p lo, esc re ve r e m ne gr i to, it ál i co, s ub l i nha do, e tc . O exe m p lo a ba ixo m ost ra a l gu ns de les : Este exemplo tem texto em itálico, negrito, enfatizado, sublinhado e tipo código de computador 8.1 – Elementos para formatação de texto TAG DESCRIÇÃO Define Define Define Define Define seu seu seu seu seu texto texto texto texto texto em negrito grande em itálico pequeno forte - 17 - Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ---------------------------------------------------------------------------------------------------------- Define seu texto subscrito (ex: H2O) Define seu texto sobrescrito (ex: 152) Define texto inserido Define texto apagado Desuso. Utilize ao invés Desuso. Utilize ao invés Desuso. Utilize ao invés 8.2 – Elementos para o "output de código de computador" TAG DESCRIÇÃO

   <xmp>

Define códigos de texto Define o texto com uma fonte especial determinada pelo navegador Define código de computador de amostra Define o texto utilizando uma fonte de tipo e largura definidas pelo navegador Define variáveis Define o texto pré-formatado Desuso. Utilize <pre> ao invés Desuso. Utilize <pre> ao invés Desuso. Utilize <pré> ao invés

8.3 – Elementos para citações e listas de definições TAG

DESCRIÇÃO

<abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn>

Define Define Define Define Define Define Define Define

uma abreviação uma sigla um elemento de endereço a direção do texto uma longa citação uma pequena citação a citação um termo de citação

9. 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 mos f 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 a a o ut ras pá g inas ht ml ou pa ra qu al q ue r o ut ro ti po de a r qu i vo qu e se en con t re e m ou tro s l u ga res d a w e b. 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 te d 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 e c om o um a r e fe rê nc ia par a o l i n k. Se vo cê c l ic ar so br e esse tex to, se u n av e ga dor au tom at i cam ent e ten ta rá a br i r a p ág in a h tt p :/ /ww w. m id ia i nd ep e n de nte. or g

- 18 -

 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 r n u m ar q u ivo qu e est eja n al g um lo ca l da in te r ne t. O fo r mato d a URL é : protocolo://nome-do-computador/pastas/arquivo

O p ro toco lo in d ica c omo o n av e ga dor i rá b uscar o ar q ui vo. N om e d o c o mp u ta do r é aq ue le en de re ço d o t i po w ww. n in g ue m. co m.b r e as pasta s são os d i ret ór ios d en tr o de sse co m pu ta dor o n de es tão os a r qu iv os. U ma UR L de um a rt i go do s it e da CMI Br as il é, por e xe mp lo, h tt p :/ /ww w. m id ia i nd ep e n de nte. or g / pt/ b l ue/2 0 0 4/ 09 /2 90 6 6 9.sh tm l, o nd e h ttp: // é o p ro to co lo , p t, b lue , 2 0 04 e 0 9 s ão p as tas (uma fica dentro da outra) e 29 0 6 6 9 .sh tm l é o nom e d o a rqu iv o . h tt p :/ / \-- - www.m i d ia in d epe n de nt e.o rg \ --- pt \-- b l u e \-- - 2 00 4 \- -- 0 9 \- -- 2 906 69 .sh tm l L e mb r e-se ta m bém q ue q ua n do v ocê ac essa o en d er eç o h tt p :/ /ww w. ni n gu em .co m. br , p or e xe mp lo, es tá na verd ad e ve nd o o a r q uiv o h tt p :/ /ww w. ni n gu em .co m. br / in dex. ht m l. Os ar q u ivos do t i po in d ex .h tm l se m p re são pr oc u rados pe lo nav e ga do r qu an do vo cê so l ic i ta a pe nas o n om e d o si te o u u ma pas ta d e um c omp u ta do r. 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 internos L ink s in tern os s ão a q ue les q ue l i ga m um a se ção d e um a pág i na co m u ma o ut ra se ção d a mes ma p ág i na. Po r exe m pl o, se e u qu ise r f az er um a re fe r ênc ia p a ra a s eção H i pe rt ex to de ssa n ossa ap ost i la, basta q ue e u p ri m e iro de f in a u m no me p a ra a se ção H i pe rt ex to e e nt ão a d ic io ne u m l in k pr a e la. 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 és d e s im p lesm e nte esc re ve r o t ít u lo da se ção: <a name="Hipertexto">Hipertexto</a>

2 - 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 ma p á gi na ht ml . O va lo r d e na me po de s er q ua l qu er u m (nesse caso eu coloquei

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

 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 u n av e ga dor t en ta rá a bri - lo co mo um l in k loc al .

9.2 - Links locais ou relativos L ink s lo cais s ão a que l es q ue re f er en c iam u m a r qu i vo q ue es tej a n o m esm o c om p uta dor q u e a sua pá g i na. L ink s lo cais nã o c ont ém o ht tp: // no i n íc io d o e n de re ço. 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 k p 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ão p 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 a s ua pá g i na, u se d ois p o ntos e um a ba r ra an tes do n om e do ar q ui v o: <a href="../links.html">Acesse os links!</a>

A va nta gem de voc ê usa r l i nks r el at iv os é qu e vo cê po d e mo ve r to do o se u s it e pa ra um no vo end e re ço na in te r ne t e não pr ec isa r r ee d ita r to dos os l i nk s q u e ap on tam pa ra pá gi na s do se u p ró p r io si te .

9.3 - Links externos L ink s e x te rno s são a q ue les q u e po dem a pon ta r p a ra q ual q u er ar q ui vo d i sp on í ve l n a i nt er ne t, 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 o e 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 e q u e o l i nk se ja a be rt o n u ma ou tra jan el a do se u na ve ga do r. <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 te es 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 -

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

10. LISTAS A l i n gua ge m HTM L c on té m e l em en tos q u e pe rm i te m d e f in iç õ es, lis tas o rd e na das e lis ta s não ord ena da s .

cr iar

lis tas

de

10.1 - Listas Não Ordenadas U ma lis ta n ão o rd ena da co ntém vá r ios ite ns mar cad os to dos c om o mesm o s ím bo lo (normalmente um círculo pequeno ou um quadrado pequeno). 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> ("unordered list"). 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ço

D e nt ro d e u ma li sta n ão or d ena da p od emos c olo ca r p ará g ra fos, qu eb ras d e l i n ha, i ma ge ns, o ut ras l is tas, e tc.

10.2 - Listas Ordenadas U ma lis ta o rde na da co nté m v ár ios ite ns n u me ra dos e é c r ia da co m o e l em en to < o l> ("ordered list") . 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 ço D e nt ro d e u ma l ista o r de na da po de mos c olo ca r pa rá gra fos, q ueb r as d e l inh a, i m ag ens, ou t ras l is tas, e tc.

10.3 – Listas de Definições U ma lista d e d ef in içõ e s não é c o nst it u ída p or u ma s é ri e de it ens , mas s im p o r vá r ios t e rmos a com p an ha dos d e d esc r içõ es d e s eus s ig n if i ca dos.

- 21 -

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

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

Es te é o asp e cto de co mo v ai fi ca r e m s eu n av e ga dor: R um Be b i da es pir i tu osa m u it o a p re c ia da pe los pi ra tas do Ca ri b e Ba ga ço Be b i da co m e le va do t eo r a lcoó l ico. A s ab e do r ia po p ular r eco n hece -l he f o rtes p ro pr i e da des t er a pê ut ic as. D e nt ro de u m e l em ent o < d d> po de mos co lo ca r pa rá gr a fos, qu eb r as d e l i nh a, i m ag ens, ou t ras l is tas, e tc.

10.4 – Elementos para Listas ELE MEN TO

DES CRI ÇÃO

<ol> <ul> <li> <dl> <dt> <dd> <dir> <menu>

Define uma lista ordenada Define uma lista não ordenada Insere um item na lista Insere uma lista de definições Apresenta a definição de um termo Insere a definição de um termo Desuso. Utilize <ul> Desuso. Utilize <ul>

11. IMAGENS A l ém d e ma ni p u lar t ex to, o h tml t am bé m se r ve pa ra ex ib i r im ag e ns de um a m an e ira mu i to si m p les, usan do p a ra iss o o e le me nto im g : <img src="emma.jpg" width="221" height="300">

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

- 22 -

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

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

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

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

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

- 23 -

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

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

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

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

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

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

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

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

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

- 24 -

 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 re a ima g em e q ual q ue r o b jet o: <img src="emma.jpg" border="1">

width="3%"

height="3%"

border="1"

align="left"

hspace="5"

O tex to vai a par ec e r à d ir ei ta d a ima g em, 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 ção d e ima g ens v oc ê o b tém u m tex to b e m d ia gra ma do e bo nito de ser l i do. N o ta: Ao u t i l iza r i m ag ens, l e m br e-se d e q u e e l as pod e m au me nt ar c ons i de ra ve l me nt e o t em po de c ar re ga me nt o pa ra v e r o co nte ú do de su as p á gi nas, po r iss o, use -as co m cu i da do.

11.6 – Elementos relacionados com imagens ELE MEN TO

DES CRI ÇÃO

<img> <map> <área>

Insere uma imagem Define um mapeamento sobre a imagem ("image map") Define uma área clicável sobre um mapa de imagem

11.7 – Fundos de Página U ma co r ou u ma imag e m de fun d o b em es co lh i do po de m me lho ra r o as pe ct o d a pá gi na, m as u ma m á es co lh a é ca paz d e c ausar d anos mu i to gr av es na l e g ib i l id ad e e n o asp ec to ge ra l da pá gi na.

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 es d 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 ão d 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 o se g u in te mos tra t rês f o rmas d e i n d ic ar a co r de f undo da pá g i na usa nd o um c ó di go de c or he xa dec i ma l, 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 todas

vá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 na b 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 se p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n ão s up or tam CS S (veremos sobre CSS no fim da apostila).

- 25 -

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

11.7.2 - O atributo background O at ri b uto ba ck g roun d es ta be le ce q ue o p a dr ão d e f u n do da pá g ina s er á u ma i m ag em. 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 e as d i me nsõ es da im a ge m f or e m in fe r io res às di m ens ões d a pá g ina, o n av e ga dor r e pe ti rá a im a ge m (como num chão de mosaicos ou em uma parede de azulejos), 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 e e n con tr a a i ma ge m. Na pr i me i ra li n ha ma is ac i ma, demos uma UR L re la t iva e n a se gu n da d e mos u ma UR L a bsol u ta. N o ta: a fo r ma r ec om e nd ada pa ra fo rma ta r o t ext o e os f u nd os de pág i na b ase ia- se e m e s tilos CSS. A u ti l i zaç ão d est e at ri b u to s ó se jus t if i ca se p r ec isa r mos de man te r a com pa ti b i li da de c om nav eg a do res a nt i gos qu e n ão s up or tam CS S (veremos sobre CSS no fim da apostila).

11.8 – Dicas S e mp re q ue u t il i za r um a i ma gem d e f u ndo na p ág i na, nã o se es q ue ça d est es as pe ct os: •

C e rt i f iq ue-se de q ue o tam an ho d a i mage m (em KBytes) 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 m re p rova dos na s reco me n daçõ es ma is rec e ntes d a W 3 C pa ra a li n guag e m HTM L (HTML 4 e XHTML) . A f o rma re co me n dad a p ara o bte r os m esm os r es u lta dos b ase ia- se n a ut i li za ção d e est i los C SS . A u t i li za ção d es tes at r ib u tos só se j ust if i ca se pr ec is ar mos de man te r a co m pat i bili d ad e co m n av e ga dores a nt i gos q ue 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 es q 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 -

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

12 – CORES P od e mos ob t er q ua l qu e r c or q ue d ese ja rmos co m bi nan do p ro po rç ões co rr etas d e t rês co res bas es: Ve r me l ho (Red) , Ve r de (Green) e Az u l (Blue) .

12.1 - Formas de exprimir cores E m CS S a f o rma r ecom e nd ada p a ra ut i l iza r c o res é usa n do có dig o (notações) h exa de c ima l. Des ta f o r ma as co res e x pr i mem u san do t r ês núm e ros h exa de c ima is q ue de f in em as q ua nt i da des de v erm e lh o, ve rd e e az u l q ue e nt ra m n a c om pos i ção de um a d e te rm i na da co r. O va lor m ais b a ixo de uma d e te rm i na da co r é 0 (#00 na notação hexadecimal usada em CSS) e o val o r m a is al to é 2 5 5 (#FF em código hexadecimal). Assi m , a co r p r eta te m 0 d e v 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á o b 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 0 A ta be la a ba ixo most ra os res ul ta dos de div e rsas co mb i na ções de co res : COR CÓDIGO HEXADECIMAL #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF

VALOR RGB (DECIMAL) rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

12.2 – Nomes de cores A ta be la se g ui nt e m ost ra as 16 cor es cu jos n om es fo ra m d ef in i dos o f ic ia lm en te p elo W 3C . To dos os nav e ga do res re co nh ece m estes no mes p e lo q u e po d em us á-l os s em q ua lq ue r p ro b le ma :

Cores com Nomes Atribuídos Oficialmente Aqua (#00FFFF)

Black (#000000)

Blue (#0000FF)

Fuchsia (#FF00FF)

Green (#008000)

Gray (#808080)

Lime (#00FF00)

Maroon (#800000)

Navy (#000080)

Olive (#808000)

Purple (#800080)

Red (#FF0000)

Silver (#C0C0C0)

Teal (#008080)

White (#FFFFFF)

Yellow (#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 res a p rese nt ados a se gu i r são r eco nh e ci dos por to dos os n av e ga dores re le va ntes , 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 e r e con he c ime nt o não é ex i g id o a n e nh um nav e ga do r para es tar con fo r me com as r eco men d açõ es o fi c ia is. É po uco p ro váv e l qu e nos a nos ma is p róx i mos os

- 27 -

 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 es d 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 nas e m to dos os na ve gad o res co nfo r mes co m as n or mas do W3 C, e m v ez dos n om es a pres en ta dos n a ta be la, u t i li ze o s có d ig os h exa de c ima is a p rese nt ados j u nto das co res. COR

CÓDIGO HEXADECIMAL

NOME DA COR

#F0F8FF

AliceBlue

#FAEBD7

AntiqueWhite

#7FFFD4

Aquamarine

#000000

Black

#0000FF

Blue

#8A2BE2

BlueViolet

#A52A2A

Brown

12.3 – Cores seguras da Web P rob le mas c au sa dos p o r um n úm e ro red uz ido d e c o re s To dos os co m pu ta dores mo de r nos são ca pa zes de mos tra r de ze nas de m il ha r o u m i lhõ es d e co r es e m s im u ltân eo. Co nt ud o, at é m eados da d éc ad a d e 1 99 0 m u it os sis te mas a pe nas cons e gui a m ap re sen ta r 2 5 6 co res d if e ren tes d e cad a v e z. Es ta li m i taçã o ob r i ga va os n a ve ga dor es a t ra ba lh ar em com u ma pa le ta f i xa q ue con t in ha a pen as 2 56 cor es. O s nav e gad o res e ram o b r i gad os a u sar a pe nas 2 56 co res p ara s im u la r t od as as co res qu e não con se gu ia m a p rese nt ar. O s e fe it os des tas ap r ox ima ções e ra m vis í ve is na fo rm a pon tos a d jac en tes c om co res d i f er en tes e d e ma nc has d e c or. 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 s c om p uta dor es e ra m c ap az es d e a pr ese ntar ap en as 2 5 6 co r es d i f er en tes d e c ad a ve z. D e ssas 2 5 6 co res, o s s ist em as o p erat i vos Windows e Apple Macintosh r es er va va m 2 0 c o res c ad a um (40 no total) p ara d ese n ha r s uas i n te r fac es g r áf i cas. Ass im , d e um to ta l de 2 5 6 co res p oss í ve is, a pe nas 21 6 p o di am s er es co lh i das l i v re me nt e c om a ga ra nt ia de pod e re m se r a p rese nt adas t an to nu ma m á qu i na W in do ws co mo em um Ma c. Es tas 2 16 co res r ec e be ra m a d es i gn ação d e c o re s s e gu ra s da W eb. A fo r ma e nc on tr ad a pa ra li m ita r as cons e qüê n cias res ul ta nt es d a u t i li za ção d e u ma p al eta co m a pe nas 2 16 c or es co nsi st e e m usa r a penas co res cu jos c ó di gos h exa d ec im ais u sa m ap en as co mb in açõ es dos n úm er os i n d i ca dos n a t ab el a s e gu i nt e: RGB Hex

00 00

51 33

102 66

153 99

204 CC

255 FF

A ta be la ab a ixo mostr a t oda s as 21 6 co mb i na ções de co res qu e po de mos f o rma r com os va lores ap r ese nt ado s na ta be la a nt er ior. 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 os h exa de c ima is (o caractere # no início foi omitido) :

- 28 -

 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

0099FF

00CC00 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

3399FF

33CC00 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

6699FF

66CC00 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

9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00

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

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

A t ua lm en te q u a lq ue r c o mp ut ado r co nse gu e a p res en ta r m il hões d e co res d i f er en tes ao mes mo t em po, não hav en do n ec ess id ad e de usa r a pe nas c or es se g u ras da We b. A pesa r d isso, es te t ema co nt i nua a se r fo cad o e m q uase t oda s as i nt ro d uçõ es à c ons tr u ção de pá gin as.

- 29 -

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

12.4 - Formas de exprimir os valores das cores A s c or es de f in em -se u san do no ta ção hex ade c ima l q ue e x pr i me as q uan t idad es d e Ve r me lh o (Red) , Ve r de (Green) e A z ul (Blue) qu e e nt ra m em s ua c om pos i ção. A qu an t i dad e mí n i ma de u ma co r é 0 (#00 em código hexadecimal) e a qua nt i da de m áx ima é 2 5 5 (#FF em código hexadecimal) A ssi m, 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. Na f o rma d e cim a l a co r br an ca ex p rim e-s e como rgb( 2 5 5, 2 5 5 , 25 5 ) e a co r p re ta e 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 ma d e c or es qu e pod em se r a p resen ta das e m u m mon i tor.

Nada de Vermelho S e des l i gar m os co mp l eta m en te a co r V er m el ha, f i ca mos co m 6 5 5 36 cor es d i f er en tes q ue res u lt am de c om b i na r 2 56 q uan t id ad es de ver d e co m 25 6 q u an ti da des de a zu l (65536 = 256 × 256) . A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões : 003300 006600 009900 00CC00 00FF00 003333 006633 009933 00CC33 00FF33 003366 006666 009966 00CC66 00FF66 003399 006699 009999 00CC99 00FF99 0033CC 0066CC 0099CC 00CCCC 00FFCC 0033FF

0066FF

0099FF

00CCFF

00FFFF

Vermelho ao Máximo S e c olo ca rm os a quan t i dad e de Ve r me l ho c om s eu va lor má xi mo, q ue é 25 5 (#FF em código hexadecimal) f i ca mos a in d a co m 65 5 3 6 (256 x 256) co res d i f er en tes q u e res ul tam d e c om bi na r mos t od os os va lo res poss í ve is de Ve rd e c om tod os os va lor es p oss ív e is de Az u l. A ta be la seg u i nt e most ra a l gu mas dest as com b i naç ões : FF3300 FF6600 FF9900 FFCC00 FFFF00 FF3333 FF6633 FF9933 FFCC33 FFFF33 FF3366 FF6666 FF9966 FFCC66 FFFF66 FF3399 FF6699 FF9999 FFCC99 FFFF99 FF33CC FF66CC FF99CC FFCCCC FFFFCC FF33FF

FF66FF

FF99FF

FFCCFF

FFFFFF

Tons de Vermelho A ta be la ap r ese nta da a ba ixo most ra o res ul ta do o bt ido var ia n do a q ua nt i da de d e co r ve rm e lh a d e 0 at é 25 5 ao m esmo t em po q ue s e m an têm e m ze ro as q u an ti da des de v e rd e e d e a z ul. Ex is te m 2 56 to ns d ifer e nt es de ve r me lh o pur o e mu i tas ou t ras q ue co nt êm mis tu ra s de o utr as co re s.

- 30 -

 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 #000000 #080000 #100000 #180000 #200000 #280000 #300000 #380000 #400000 #480000 #500000 #580000 #600000 #680000 #700000 #780000 #800000 #880000 #900000 #980000 #A00000 #A80000 #B00000 #B80000 #C00000 #C80000 #D00000 #D80000 #E00000 #E80000 #F00000 #F80000 #FF0000

R GB rgb(0,0,0) rgb(8,0,0) rgb(16,0,0) rgb(24,0,0) rgb(32,0,0) rgb(40,0,0) rgb(48,0,0) rgb(56,0,0) rgb(64,0,0) rgb(72,0,0) rgb(80,0,0) rgb(88,0,0) rgb(96,0,0) rgb(104,0,0) rgb(112,0,0) rgb(120,0,0) rgb(128,0,0) rgb(136,0,0) rgb(144,0,0) rgb(152,0,0) rgb(160,0,0) rgb(168,0,0) rgb(176,0,0) rgb(184,0,0) rgb(192,0,0) rgb(200,0,0) rgb(208,0,0) rgb(216,0,0) rgb(224,0,0) rgb(232,0,0) rgb(240,0,0) rgb(248,0,0) rgb(255,0,0)

Tons de Cinza A s co res c in za s ob tê m-s e co m bi na n do q ua nti d ad es ig uai s d e v e rme l ho, ve r de e a zu l. A cor b ra nca co r res po nd e ao c i nza ma is cla ro de to dos e o bt ém-s e j u nta n do 2 5 5 de ver m el ho, 25 5 de v erd e e 2 5 5 d e a z ul (#FFFFFF em hexadecimal). O p re to é o c i nza m ais es cu ro de t odos e o bt ém -se col oca n do t oda s as co res e m 0 (#000000 em hexadecimal). E nt re est es do is va lo res e xt re mos, te mos 25 4 g r aus de int ens i da de p oss ív e is. A ta be la seg u i nt e dá um a i dé ia dos t ons de c i n za q ue po de mos o bt e r: RGB(0,0,0) RGB(8,8,8) RGB(16,16,16) RGB(24,24,24) RGB(32,32,32) RGB(40,40,40) RGB(48,48,48) RGB(56,56,56) RGB(64,64,64) RGB(72,72,72) RGB(80,80,80) RGB(88,88,88) RGB(96,96,96) RGB(104,104,104)

#000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868

- 31 -

 Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------RGB(112,112,112) RGB(120,120,120) RGB(128,128,128) RGB(136,136,136) RGB(144,144,144) RGB(152,152,152) RGB(160,160,160) RGB(168,168,168) RGB(176,176,176) RGB(184,184,184) RGB(192,192,192) RGB(200,200,200) RGB(208,208,208) RGB(216,216,216) RGB(224,224,224) RGB(232,232,232) RGB(240,240,240) RGB(248,248,248) RGB(255,255,255)

#707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF

12.5 - Mais de 16 milhões de cores diferentes C o mb i nan do as 2 56 co res d e Ver m el ho com as 25 6 c or es de Ve r de e as 2 5 6 c or es do A z u l, 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 ão p r e pa rad os p a ra a p res en ta r ma is de 1 6 m i l hõ es d e co res d i f er en tes. No e 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 m a pe nas 25 6 co r es, ou tr os 4 0 96 ou 6 55 3 6.

12.6 - Mais nomes de cores A s c or es m ost ra das n o s it e ab a ixo possu e m di ve rsos có d ig os h exa d ec im a is r e la cio na dos a c or es, 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 l

13. ENTIDADES, ESPECIAIS

ACENTUAÇÃO

E

CARACTERES

A l g uns ca ra ct er es em HTM L são c hama dos de c ara c tere s re s e rva do s o u m a rca do re s, qu e s er i am os < (menor que) e > (maior que) , qu e q uan d o a pa re ce m n u m doc um e nto HTM L são i nt e rp re ta dos pe lo nav e ga do r co mo d e l im it ad ores de ins tr u ção. Mas e se e u q u ise r sim pl esm en te qu e esses c ar ac te res f aça m pa rt e do m e u tex to e não se ja m i nt erp r eta dos co mo m a rca do res? ! No HTM L, to dos os car ac te res t êm u m no me e sp ec ia l, ou có di go. Pa ra a cessa r u m car ac ter e, voc ê p re c isa usa r a se g ui nt e c on ve n ção: &nome-especial;

- 32 -

 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 ico q u e vo cê d es eja most ra r no se u do c um en to. Isso d e f in e a l go q ue po de mos c ha ma r de s eq üê n cia r es er va da, q ue é um g r u po de cara ct eres q ue q ua n d o i n te r pr eta do pe lo na ve ga do r p rod u z i rá u m c ar ac te re, q u e in cl us iv e po de se r u m c ara cte r e res er va do. No HTM L, os no mes es pec ia is são c ha ma dos d e e nt i da des. Na pr óxi ma t ab el a mos tra mos al g u ns no mes esp ec ia is de c ara ct e res e s uas r es pe ct i vas se q üê nc ias rese r va das pa ra acess á- los: CAR ACTER ES

NO ME E SPE CI AL

SEQ UÊN CIA RES ERVADA

á Á é ã ô & < > ¢ £ ¥ § © ® × ÷

aacute Aacute eacute atilde ocirc amp lt gt cent pound yen section copyright registered trademark multiplication division

&aacute; &Aacute; &eacute; &atilde; &ocirc; &amp; &lt; &gt; &cent; &pound; &yen; &sect; &copy; &reg; &times; &divide;

Ve ja a lis ta co m p let a d e e nt i da des HTM L no li n k abaixo : h tt p :/ /ww w.w 3.o r g/TR/R EC -h tm l 40 /s gm l /e nt it i es.h tm l

14. TABELAS Ta be las a ux i li am na v is ua l iz ação de da dos o u na divis ão d e su a pá g i na e m se to res. E nt en da po r u ma tab e la H TML c om o se ndo se me l ha nte a u ma ta b el a q u e voc ê d es en ha r ia nu ma fo l ha de pa pe l o u nu m o ut ro p r o gra ma d e c om p uta dor . O e le men to p ri n ci pa l de uma t ab el a é o tab le e aq u i s eg ue u m e xe mp lo s im p l es d e ta be la : <table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>

Cuj o res u lta do é: Primeira Segunda Terceira Quarta

E m HTML, as ta b el as são di v id id as e m l inh as e c él ulas. Na tab e la ac i ma, a p r i me i ra l in ha co nt ém as cé l ul as P rimeira e S e gu nd a, e n qu an to q ue a se g un da l in ha con tém as cé l ul as Te rce ira e Qu a rta.

- 33 -

 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 emos d 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 ja d e f in i do de nt ro d e um b l oco tr, ou se ja, q u e as c élu la s es te jam d e nt ro d e l i n has. No ex em p lo a nte r io r, c r iam os um a l in ha co m tr e em s eg u i da, d en t ro de u m b l oco td, es c re ve mos o tex to d a cé lu la (P rime ira). A b r im os ou t ro bl oco td n esse m esm o b loc o tr, on de co lo ca mos o te xto da seg u n da cé l ul a (S egu nd a) . D e po is, f ech am os a l in ha com o < /tr> pa ra e m s e gu id a a br i r um a no va l in ha, o n de c r iamos as c é lu las con te ndo os t extos T e rce ira e Qu a rta. O a tr i b uto bo rde r no e le me nto tab le se rv e p ara dar bo r da à t ab el a. Sem o e l e não fi ca r ia m ui to d i st in to ond e c om eça e te rm i na ca da u ma das cé lu las : <table> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> Primeira Segunda Terceira Quarta

D e nt ro d e u m bl oco td é poss í ve l c olo ca r c ó di gos HTM L e i nc l us iv e c r iar a té t ab el as d en t ro d e c élu la s ! V ej a só : <table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td> <table border="1"> <tr> <td>Quarta</td> <td>Quinta</td> </tr> </table> </td> </tr> </table> Primeira Segunda Terceira

Quarta Quinta

O có d ig o f ic a co m pl i ca do o ta nto qua nt o se q ue ir a. A g ora q ue v o cê ca pt ou a essê n cia d as t a be las, v am os most ra r do is t r ês a tr i bu tos qu e pod em se r ut il i za dos e m ta bel as.

- 34 -

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

14.1 - Espaçamento entre células P ar a co nt ro la rm os a d i stâ nc ia e n tr e duas cé l ul as, c e llsp ac ing , c ujo a r gu m en to é da do e m p ixe ls :

ut i l iza mos

o

at r ib u to

<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

Quarta

P 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

Quarta

14.2 - Preenchimento de células P od e s er q u e voc ê q u e ira u ma ta be la on d e a p r im e ir a li n ha te nh a du as c é lu las, 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 -

 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 Segunda Terceira Quarta

Quinta

Sexta

P e rc eb eu c om o a ta be la f ic ou c he ia de b u rac os? ! Pa ra p r ee nc ha m os b u ra cos, ut il i za rem os o at r ibu to c o ls pan :

qu e

as

cé lu la s

<table border="1"> <tr> <td>Primeira</td> <td colspan="2">Segunda</td> </tr> <tr> <td colspan="3">Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr> </table> Primeira Segunda Terceira Quarta

Quinta Sexta

D a mes ma f o r ma, s e q u i se rmo s u m a co lun a co m a pe nas u ma c é lu la e ou t ra c om d uas , p o d er ía mos usa r o a t ri b uto row sp an. V e ja a d i f e re nça en t re u sa rmos e n ão usa r mos o row sp an : <table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table> Primeira Segunda Terceira <table border="1"> <tr> <td rowspan="2">Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table>

- 36 -

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

Segunda Terceira

14.3 - Largura de células e tabelas P ar a es co lh e r a la rg u ra d e ta be las e c é lu las, u ti l i za-s e o j á con he c id o a 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

Segunda

Terceira

Quarta

Not e q ue qu an do o wid th é ut i liz a do co m o e le me nto ta b le, 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 a l a rg u ra é re f er en te ao ta man do d a tab e la. Isso t udo d es de q ue o ar g um en to se ja da do e m p o rc enta g em e não e m pi xel s.

14.4 - Uso de tabelas A q u i ex p lor a mos p ouc as p ossi b il i da d es das ta b el as HTM L. Vo cê po de ut i li z ál as par a con st ru i r u ma s im p les ca ixa pa ra ex i bi ção de i n fo r maçõ es c omo fa ze r u ma pá g ina in te i ra u t i li za n do t ab el as. Ex ist em mui tos o ut ros e le me ntos e a 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 is i n fo r maçõ es so b re ta be las.

14.5 - Dicas O s el em en tos < th ea d>, < tbo dy> e < tf oot> ai n da são pou co usa dos de vid o ao su po rt e d e f ic i en te o f er ec i do p e los na ve ga do res an t i gos. Os n a ve ga dor es m o de rnos já s upo r tam b e m est es e le me nto s.

14.6 – Elementos relativos a tabela ELE MEN TO

DES CRI ÇÃO

<table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot>

Define uma tabela Define um cabeçalho para uma tabela Insere uma nova linha numa tabela Insere uma célula numa tabela Define uma legenda para uma tabela Agrupa colunas numa tabela Define os valores dos atributos para uma ou mais colunas da tabela Define um cabeçalho de uma tabela Define um corpo numa tabela Define o rodapé de uma tabela

- 37 -

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

15. FORMULÁRIOS O s f or m ulár i os se r vem p ar a r ec ol he r da dos i nt ro duz idos p e los v isi ta ntes e e n vi á- las pa ra v oc ê, at ra vés de se u se r vi do r.

15.1 – Criar Formulários U m fo r mu lá r io é u ma se ção da pá gi na HTM L q ue co nt ém el e me ntos q u e p e r mi te m ao v is ita nt e i n se r ir em d a dos (elementos <tetxarea> e vários tipos de elementos <input>, <option> e <select>). Estes el em en tos pe r mi tem i 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 os e 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 to p r i nc i pa l co lo cam os di v e rsos e lem e ntos pa ra a ins erção dos d ad os. <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 na p á gi na nem p er m ite i ns er i r dad os. E le co nt ém e lem e ntos que re co lh em o s d a dos e poss ui at r ib ut os q ue “ d iz e m” ao na ve ga do r co mo e pa ra o n de de ve m se r e n via dos os da dos ins er i dos p e lo v is itan te .

15.2 - input O e le me nto q ue e n co nt ra mos c om ma io r f r e qü ên c ia em fo rm u lá r ios é o e l em en to < in pu t>. O exe m p lo a ba ixo most ra um fo rm u lá r io sim p l es co m d o is e l em en tos i n p ut : <form action="processar.php" method="post"> Primeiro nome: <input type="text" name="primeiro_nome"> <br> Último nome: <input type="text" name="ultimo_nome"> </form>

O fo r mu lá r io a ci ma fi ca rá se n do e xi b i do d est a fo r ma em s eu na veg a do r: P r i me i ro no me : Ú lt i mo no me : O el em ent o d i f er en tes.

< in put>

po d e

assu m ir

- 38 -

d i ve rsas

fo r mas

c om

fi na l id a des

 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ções e 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 Feminino

Re pa r e q ue só p od emos se l ec io na r u ma das o pçõ es ac im a.

15.4 – Checkboxes A s ca ixas d e va li da ção ("checkboxes") d e ve m se r usa das se m p re q u e q u er e mos q u e o v is it an te ac ei te (ou não) os i te ns d e n tr o de u m p e q ue no g r u po. É pe r mi t id o val i da r mais d e uma o pç ão si m ul tan ea me nt e. <form> <input type="checkbox" name="carro">Eu tenho um carro <br> <input type="checkbox" name="surf">Eu tenho uma prancha de surf <form>

O exe m pl o a ci ma fi ca rá se n do ex ib i do des ta f o rma em se u bro wse r: Eu tenho um carro Eu tenho uma prancha de surf

Re pa r e q ue p od em os se l ec io nar vá r ias op çõ es ao m es mo t em po.

15.5 - O atributo action e o botão de submissão Q ua n do o vi s ita nte c l ic a so b re o b otã o "S ub me te r" (ou "Submit"), as o p çõ es m a rca das e o tex to q ue fo ram inse r i dos no f o rm u lár io são e n via dos par a voc ê (ou para seu servidor) . O a tr i bu to a c tion do e l em en to <f o rm> co nt ém o e n de re ço (UR L) do re c urso da We b ( site, 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 do f 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 -

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

Submeter

Nome de usuário:

15.6 - Elementos para Formulários ELE MEN TO

DES CRI ÇÃO

<form> <input> <textarea>

Define um formulário para recolher dados inseridos pelo utilizador Insere um campo para introduzir dados Define uma área de texto (permite inserir texto com várias linhas e um

número ilimitado de caracteres) <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex>

Define um nome para um elemento Agrupa elementos num formulário Define uma legenda para um grupo de elementos do formulário Define uma lista com várias opções selecionáveis Define um grupo de opções Insere mais uma opção em uma lista com várias opções selecionáveis Define um botão que pode ser pressionado Desuso. Utilize <input> com o atributo type="button"

16. FRAMES HTML A s mo l du ras ( " frames " ) são su bj an e las de fi n i das so bre a ja ne la p r in c i pal d o b r owse r. 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 s s 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 molduras A s mo l du ras (" frames ") nos per m i te m apr es en tar ma is do qu e u ma pá g in a HTM L nu ma ú n ica ja ne la d o b rows e r. Ca da p á g in a es tá d en tr o da sua p ró pr i a m o ld u ra ( subjanela ) e é i n dep e n de nte d as r esta nt es pá g i nas. A p esar d e o fe re ce re m al g um a l ib e r da de ao f ac i li ta rem bas tan te a cr ia ção d e ba r ras d e n av e gaçã o e m co nj un tos de doc u me ntos c om m ui tas pá ginas e d e to r nar e m b ast an te m a is rá p i do o ca rr eg a me nto das pá g inas, as mo ldu ra s ta mbé m p o de m da r o r ig em a a lg u mas di f i cu l da de s, 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 -

 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 frame O e le me nto < f ra me> d e te rm i na da mol d u ra.

de f in e

q u al

o

doc u me nto

HTM L

a

co lo ca r

n um a

No ex em p lo a pr ese nta do a ba ixo, t emos um co nj un to de mo l du ra s co m d u as c ol u nas. A p r i m ei ra c ol u na o c up a 2 5% da la r g ura d a ja ne la d o na ve gad o r, e n qu an to a se gun d a co lu na o cu pa 7 5% da lar g u ra. O do cum e nto m o ldu ra _a . htm l ocu p a a p rim e ir a co lun a e o doc u me nto m o ldu ra _b .h tm l o cu pa a seg u n da co l un a: <frameset cols="25%,75%"> <frame src="moldura_a.html"> <frame src="moldura_b.html"> <frameset>

16.4 – Dicas Q ua n do um a mo l d ura poss ui l in has de co nto r no v is ív eis, vo cê po de a lte ra r s uas d i me nsõ es ar ras ta n do as l i nh as d e l i mit e co m o mo use. Par a i m p ed i r q ue i sso a co nte ça, ut i l ize o at r ibu to no resiz e="n o res ize " d ent ro da tag <f ram e> Ut i l iz e a tag <n of ram e s> pa ra q u e os nav e ga do res q u e não s up o rta m fr am es p ossa m most ra r u m av is o na j ane la de qu em está a cessa n do o s it e. <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 a se 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> <frame> <noframes>

Define um conjunto de molduras Define o conteúdo de uma subjanela (moldura, ou "frame") Define uma seção "noframes" para ser usada pelos browsers que não suportam molduras Define uma subjanela (moldura) interior ("inline frame")

<iframe>

17. INSERÇÃO DE SCRIPTS A i ns er ção d e sc r ip ts e m s uas p ág i nas es cr it as e m HTM L po de m f a ze r com q u e e las se jam c a paz es d e r ea g ir d e f or ma d i nâm i ca e i nt era g ir c om se us v is i tan tes.

17.1 - Inserir um script numa página HTML A i nse rç ão d e um s cr ip t e m HTML fa z-s e a tr a vés do e le me nt o < sc rip t>

- 41 -

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

17.2.1 - O Elemento <noscript> A l ém d e esc on de r mos o có di go d e nt ro de u m co me ntá r io, u ma o ut ra fo rma de a ju da r os b r owse rs m u it o a nt ig os s e ria u t i li za r o el e me nto <n os c rip t> p a ra o fe re ce r c on te ú dos a lte r nat i vos. O e le me nto < no sc rip t> é usad o pa ra c om p ens ar de al g uma fo r ma a fa lta de e xe cu ção d e u m sc r ip t. O co nte ú do des te e l em en to s erá a pr ese nt ad o p el os b r owse rs qu e n ão r eco nh ec em sc r i pts, mas se rá ig no ra do pe los b r owse rs m a is m o de rnos e não in te rf e re na ap res en ta ção d a p ág i na.

17.2.2 - Um exemplo <html> <body> <script type="text/javascript"> <!-document.write("Olá mundo!")

- 42 -

 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> <noscript>

Define um bloco que contém um script Define texto alternativo para ser apresentado sempre que o script não é executado Insere um objeto na página Define parâmetros para controlar o objeto Desuso. Use <object>

<object> <param> <applet>

18. OUTRAS POSSIBILIDADES O p r in c íp io d e fu nc ion am en to do HTM L j á d e ve e sta r só l id o é q u e vo cê l e u t ud o o q ue a ntec e de est a se ção. P ara q ue t or ne en fad o nho, passa re mos p a ra a Esp e ci f i caçã o HTM, c ons ór c io da w eb , a tar e fa de d eta lh ar ca da u m dos tó pi co s

em s ua m en te, se es te t ex to não s e dese n vo lv i da p e lo l ista dos a se g ui r.

Especificação HTML (em inglês)
 http://www.w3.org/TR/html4 Especificação HTML (em espanhol)
 http://html.conclase.net/w3c/html401-es/cover.html Consórcio da web 
 docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web •

Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto http://www.w3.org/TR/html4/struct/text.html

•

Listas: blocos para a criação de listagens http://www.w3.org/TR/html4/struct/lists.html

•

Frames: permite que a página exibida no navegador seja formada por mais de um arquivo html (não recomendado, veja em Acessibilidade) http://www.w3.org/TR/html4/present/frames.html

•

Formulários: possibilita a interação do seu html com aplicações web. http://www.w3.org/TR/html4/interact/forms.html

•

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

•

Meta-informações: fornecem dados a respeito do próprio documento, como data, conjunto de caracteres usado, data de validade, etc http://www.w3.org/TR/html4/struct/global.html#h-7.4.4

Essas f u nc io na l i dad es pe r mi t irão q ue vo cê fa ça d o cume ntos HTM L be m c om p le tos. P ross eg u ir e mos a gor a a pa rt e f i na l d esta a post i la, on d e s erão a bo r da dos a l gu ns te mas be m ba ca nas ;- )

19. COLOCANDO SEU SITE NO AR A té a go ra so me nt e vo cê co ns egu i u v is ua li za r suas pág i nas. Ch eg o u a hor a d e m ost rá- las p a ra o m und o to do.

- 43 -

 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 m u m se r v id or e u m p rog r ama FTP g r at ui to. S e vo cê cos tu ma acess ar a I nt e rn et já d e ve t er vi sto q u e ex ist em v ári os se r v iços gra tu ito s de hos p ed age m d e s i tes. S eu e nd e re ço no se rv i do r se r á a l gu ma c oisa pa re ci da com ht tp : // ho me.se r v ido r. com / ~nom e do usu ar io. Vo cê t em q ue a ti va r o se r v iço. I n fo r me-s e co mo fa ze r i sto na d o cu me ntaç ão f o rn ec i da pe lo se r v iço d e hos p eda ge m. O u tra o pção é o b te r u m es paç o g r at u ito de u m s er v ido r na In te r ne t. Isto é i g ua l a re gi st ra r u ma c on ta d e e- ma il ( co mo p or ex em p lo, o bt er um e n de re ço d e e -ma i l d o h ot ma il) v o cê p od e re g is tra r-s e g ratu itam en te p a ra ob te r u m es pa ço e m um s e rv ido r n a I n te rne t. E xis tem vá r ias co m pan h ias q ue o fe re ce m est e s er v iç o g r at u ito - e nt r e e las a A ng e lf i re (clique em "Sign Up" e

escolha membro gratuito - ou veja mais abaixo uma lista com sérvios gratuitos de hospedagem) - isto é u m pr ocess o b em rá p id o. Angelfire 
 http://angelfire.lycos.com

P ar a ac essa r o s er v id o r v oc ê pr e cis a co nh e ce r o "N om e d o s eu se rv id o r" (por exemplo, ftp.angelfire.com) e t er um no me de usu ár io e s enh a.

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

19.2 - Como eu faço envio os arquivos do meu site?! A b aix o fo rn e ce mos um ex em p lo d e com o fa ze r isto usa n do o ser v i do r A n ge l f ir e e o p ro gra ma F il e Zil l a. Es te p r oc ed i men to é ma is o u me nos i g ua l p a ra q u al q ue r pr o gr ama FTP . C o nec te- se

à

In te rne t

e

a b ra

o

p rogr a ma

FT P.

I ns i ra

"H os t

Nam e"

("ftp.angelfire.com" no "Address") , n om e d o us uá rio (em "User") e se nh a (em "Password") cl i qu e " Conn ec t". Vo cê a go ra t em a cesso a o se r v ido r. E m u m la do da jan el a do pr og ra ma voc ê v erá os di r etó r ios e a rq u i vos do se u c om p uta dor ("Local Site") , e n o o ut ro o d o se r v id or ("Remote Site"):

- 44 -

 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 "Local site") e t ra ns fi ra pa ra o se r vi do r ("Remote site") si m p les me nte da nd o um c l i qu e d u p lo nos ar q uiv os. A go ra o mu n do tod o p od e rá v e r se u s i te . D ê a u ma d as pá g i nas o no me d e "ind ex .h tm" (ou "index.html") e e la ser á a uto ma ti cam e nte a p á gi na de e nt ra da n o si te, o u se ja, b ast a d i git ar h tt p :/ /ww w.a n ge l fi re. co m/ fo lk /h tm l ne t (sem qualquer nome de arquivo) e a b ri rá htt p: // www .ang e l fi r e.co m/ fo l k/ ht ml ne t/ i nd ex. htm P ar a ma is a d ian te se rá u ma b oa i dé ia co mp ra r u m do mín i o (espaço no servidor) só pa ra vo cê (www.seu-nome.com) e ass i m t er um nom e do si te b e m m a is c u rto e f ác i l de g u ar da r qu e a q ue les f o rn ec i dos p o r um ser v i ço g rat ui to d a I nte r net . Vo cê po de e nco nt ra r na I nt e rn et vá rias f i rmas q u e ve nd em d o mí n io. Fa ça u ma bu sca do Goo g le. LISTA DE SITES COM INFORMAÇÕES SOBRE HOSPEDAGEM GRATUITA Link 01 http://neosite.ilogic.com.br/artigos/hospedagemgratis.htm Link 02 http://criandosite.virgula.com.br/ Link 03 http://www.babooforum.com.br/idealbb/view.asp?topicID=425835

20. HTML AVANÇADO Es ta pa rt e a ssu me q u e vo cê j á t re i nou HTM L o su f ic ie nt e pa ra est ar f a mi l ia ri zad o c om a l in g ua ge m e f az e r si tes n a i nt er net . Da q ui em d ia nt e, es te a rt i go a pe nas fa rá um tour po r ou t ras li n gua ge ns e tec no lo g ias qu e po de m se r

- 45 -

 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 e v e nha m a se r to r na r ob so le tos. Es tar e i d and o a qu i uma v isão ge ra l de t od as as te cno log i as us adas a tua l me nt e q u e po de m s er i nt e gra das ou tem a l gu ma re la ção co m o HTM L e l i n gu ag ens d e m a rca ção : • • • • •

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

20.1 - Folhas de Estilo (CSS) F ol has de es t il o p er mi t em q ue vo cê s ep ar e o co nte ú do do s eu do cu me nt o da s ua r ep r ese nt ação g rá f ica. Co mo ex e mp lo, ao in vés de um a ex press ão do tip o : <font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>

Vo cê ut il i za a l go ma is o rg an i za do, com o: <div class="estilosa">Estilo separado do texto</div>

E e ntã o voc ê d e fi n ir ia u ma c lasse de nome e st il osa o n de os atr i b utos , com o t i po de f ont e, ta ma nho e cor s er i am de f in id os. Essa d e f in i ção po de in c lus iv e es ta r a rmaz e na da n um a rq u ivo se pa ra do do s eu do cum ento, s end o qu e n est e ú l t imo é n e cessá r io a pe nas um a r ef er ên c ia ao ar q u i vo q ue co nt en ha os es t il os. O me ca nism o ma is u ti l i za do para c r ia r fo l has de es ti lo pa ra u m a r qu i vo HTM L é o Cascading Style Sheet , o u CS S. Em C SS , o est i lo es t il osa par a o exe mp l o a ci ma po der i a s e r de f in i do com o: div.estilosa { color : red; font : fixed; font-size: 14; }

A s va nta g en s d e usa r f o lhas de est i lo são : •

S e pa raçã o e nt r e a i nfo r maçã o qu e o se u te xto pr et en d e p assa r e s ua a p rese nt ação

•

P e rm it e que to da a ap r ese nta ção do se u te xto s ej a mu da da s em q u e se ja p r ec iso a lte ra r o h t m l, b ast an do a pe nas q ue o ar q u iv o q ue c on te nha a f ol ha de est i lo se ja al t era do

•

Ma is o rg ani z ação pa ra se us d oc um e ntos

•

F ac i l ita a cr i ação de Te m p lat es

P e la c la re za e o rg an iza çã o re s u ltante d o uso d e f olha s d e es tilo , m u ita s tag s e a tribu tos do HT ML são c on s id e rad as obs o le tas ou se u u so é d epre c ia d o, in c lu s ive m u ita s d as q ua is en s in ad as n es te tu to ria l. S em p re qu e p oss íve l , u tiliz e CSS n os se us d o cum e ntos .

- 46 -

 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 ue a nex ei a ba ixo : Materiais de CSS 
 http://www.codigofonte.com/css Especificação HTML 
 http://www.w3.org/TR/html4/present/styles.html Cascading Style Sheets, level 1 
 http://www.w3.org/TR/1999/REC-CSS1-19990111

20.2 – Templates Q u em us a HTM L p ro va ve l me nte n ão o fa z pa ra es cr eve r u m ú ni co d oc um ent o e s im u m g ran d e n ú me ro de le s. S e v oc ê es tá r e d ig i n do um te xto o u f a ze nd o um s it e co m post o po r mui tos a r qu i vos, p rov ave l me nt e voc ê dese ja q u e to dos se us d o cu me ntos HTM L te nh am a mesm a ap ar ênc ia o u o mes mo es t ilo. P ar a un i for m i za r o es t il o e a a p res en taç ão, vo cê p o d e c r iar u m m ode lo, t am bé m con h ec i do com o T em p la te, qu e co nt en ha o es q ue let o d e q ua l que r p á gi na de u m s ite o u tex to q u e se ja d i v i di do em vá rios a r qu i vos. Ess e t em p la te po de con te r m e nus, tabe las e to dos os ca m pos qu e vo cê f or ut i li za r. Ex is te m ain d a os mo tor es de t em p lat e, q u e s ão so ft wa res q u e j un tam o c on te ú do c om os tem p la tes e p r o du ze m p á g in as HTM L. C r ia r um t emp l ate d e pe n de do gosto de cad a um , po ré m se voc ê pr e te nd e uti l i za r u m s ít io a uto ma ti zad o ex ist em vá r ios m oto re s de t em p la te q ue voc ê p od e ut i li z ar, c om o po r ex em p lo: •

F r eeMa r ke r: é u m tem p la te e ng i n e. El e fa ci l it a a gera ção de t ext ua l (HTML, PostScript, TeX, source code, etc) e aj u da a s ep ara r ed i ção d e d es i gn da ló g ica . I nt eg r ad o co m se r v lets , XM L, P yt ho n e mais .

•

S ma rt y : é u ma c lass e d e te m p lat es. Fu n cion a de u ma f o rma q ue se pa re i n te r fac e d a ló g ic a d e pro g ram açã o e te m p or ob j et ivo, fac i l ita r e m e lh ora r o d ese n vo lv im e nto de qu al q ue r a pli ca ção e m P HP.

20.3 – Acessibilidade U ma c ons id e ra ção imp o rta nt e ao esc re ve r s eus do cum e ntos HTM L é o q uão u sáv e l e ac ess ív e l e le é, ta nto e m te r mos v isu ais qu an to na or g an i zaç ão d o c on te ú do. L e mb r e-se q u e to dos os t i pos de pesso as po de m ac essa r se u s it e, d es de as le i gas at é as es pe c ial ist as no assu n to q ue vo cê t rat a, d es de a qu el as q u e já co nh e ce m o s it e até as q u e n un ca ou v i ram fa la r d el e. S e u con te úd o t am bé m pre c isa es ta r o r gan i za do pa ra qu e ao lo ng o do te mpo as c ois as não se p e rc am. P ar a t e r u m b om n í ve l d e u sa bi l i da de e m se u s it e, si ga a s s eg u in tes r e com en daç ões : • • • • • • • •

Use esq uem as si m p les A na ve ga ção do se u s ít io de ve ser i nt u it iv a C r i e s eç ões d o t ip o "So b re es te sí t io ", " Qu em s omos ", e tc Use ín d i ces na me d i da d o poss í vel Es c re va r esu mos Use re fe rên c ias Use um a lóg i ca pa ra os n om es d e a rq u iv os e p astas E v ite usa r f r am es, e las b lo qu e ia m o mo do nat u ra l d e s e nav eg a r pe la web

- 47 -

 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 ções

A ac ess ib i li d ad e de um s ite ta mb é m le va e m co nsi de ra ção os p o rta do res d e n e cess i da des esp ec ia is. O W3 C poss ui l i nha s g e ra is de r e co me nda ção q uant o à a cess i bi l i da de d o c on te ú do de do cu me nt os q ue u sa m l i ng ua ge m de ma rc açã o.

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

Ge re n cia dor es de c on te ú do Bl o gs W ik is

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

- 48 -

 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 tc

20.5 - Web standards e validação Nes ta l i ção v oc ê a p ren d er á ma is a lg u ns con c ei tos te ór i cos do HTM L.

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

- 49 -

 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 ao n av e ga dor q u al é o "d i al eto " do H TML e no se u caso v o cê a pr en d eu XHTM L. P ar a i n fo rm a r ao na ve ga do r, v o cê usa o Document Type Definition . O Document Type Definition d e ve se r es c ri to se m p re no to po do do cu m en to: Ex em p lo 1 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> <head> <title>Título</title> </head> <body> <p>texto texto</p> </body> </html>

A l ém d o Do cu m en t T y p e Def in ition, q ue i n fo rma ao na ve gad o r qu e vo cê es tá co di f ic an do XHTM L, voc ê pr e cis a a in da a d i ci onar i n fo r ma ção ext ra na t ag h t ml , usa nd o os at r ibu tos x m lns e lan g. x m lns é a b re vi ação d e "XM L- Na me -S pac e " e dev e te r sem p r e o va lo r h tt p :/ /ww w.w 3.o r g/ 1 99 9 /xh tm l. Ist o é t u do o q ue você p r ec isa s ab e r. Se você t em o há bit o o u gosta de se a p ro fu n da r e c on he ce r co isas c om pl i ca das po de rá l e r ma is sob r e na m esp a ce s no si t e do W 3C. namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names-19990114

No a tr i b uto lan g vo cê es pe cí f ica em q ue lí n g ua (aqui trata-se de linguagem humana) o do c um en to é es cr it o. As a br e via tu ras p ara as l íng uas ex ist en tes no m u n do to do, es tão nas ISO 639 standard . No exe m p lo ac i ma a l í n g ua d ef i ni d a n o at r ib uto é o por tu gu ês do Bras i l ("pt-br") . U ma DT D in fo r ma rá ao n av eg ado r co mo de ve s er l ido e re nd e riz a do o HTM L. Use o exem p lo m ostr a do, co mo u m te mp l ate p a ra t o dos os s eus f u tur os d o cu me ntos HTM L. O DT D é im p or tan te a in da , pa ra a va l i daç ão da p ág i na.

20.5.1.2 - Validação?! Porquê deveria eu fazer isto?! I ns i ra o DTD nas s uas p ág i nas e p o de rá v e rif i ca r e rr os n o se u HTM L, usa n do o v a li da do r gr at u ito do W 3C. ( ht tp : // va li da to r.w 3.o r g ) P ar a tes tar o va l i dad o r fa ça o se g u in te: c ri e u ma pá gi na e p ub l i qu e n a I n te r net. A se g ui r e ntr e e m h tt p: // va l id ato r.w 3.o r g e lá di g it e o e n de re ço (a URL) da su a pá g i na, d e po is c liq u e no bot ão va l i dar. S e seu HTM L est iv e r c or r eto, va i a pa re cer u ma me nsa ge m d e con g rat u laç ões. S e não, se rá a p rese nt ada u ma l ista d e e r ros, in fo r ma nd o o q uê est á e r ra do e on d e. Co me ta a l gu ns e r ros pro pos i tai s no se u có d ig o pa ra v e r if i car o q u e aco nt ec e. O va l id ador não é úti l so me nt e no e n cont ro de e r ros. Al g uns na ve ga dor es t en ta m i nte r p ret ar os e r ros c om et i dos pel os dese n vo l ve do res e co nse rtar o

- 50 -

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

c ó di go m ost ra n do a e n con tr ará e r ros n o e r ro e ap rese nt am a e nt ão a j uda v ocê a e xis t iam

p á gi na co rr e tam en te. Em n av ega do res assi m voc ê nun ca p r óp r io nav e ga do r. Já ou tr os na ve ga do res n ão ac e itam o pá g ina a r ru in a da o u mes mo n em ap rese nt am . O va l ida do r e n con tr ar e r ros q ue v oc ê não te nha ne m i d é ia d e qu e

S e mp re val i d e suas p á gi nas, pa ra t e r cer t eza q ue e las s er ão most ra das c or r eta me nt e e m to dos os na v ega do res.

21 - GUIA DE REFERÊNCIA RÁPIDA C o mo res um o de to do o c ód i go HT ML ap res en ta do at é ago ra, d e ixo al g um as t ab el as de r e fe r ên ci a r á p id a que p od em se r a té i m pressas e gu ar da das no b o lso. Ca rac te rístic as g e rais d e u m d o cu me nto H TML CÓ DI GO

F UN ÇÃO

E XI GE FECH AMEN TO

html head title body

bloco bloco bloco bloco

sim sim sim sim

interno é considerado documento html que define a cabeça do documento que define o título do documento interno é considerado o corpo do html

Ap a rê nc ia d o do cu me n to CÓ DI GO

F UN ÇÃO

E XI GE FECH AMEN TO

b i u font pre

bloco em negrito bloco em itálico bloco sublinhado muda as características da fonte mantém o texto pré-formatado

sim sim sim sim sim

Qu eb ra d e linh a, p ará g ra fo s e d iv isõ es CÓ DI GO

F UN ÇÃO

E XI GE FECH AMEN TO

br center p div

quebra de linha texto centralizado parágrafos cria uma divisão

não sim recomendado sim

Atribu to s d ive rso s CÓ DI GO

AT RIB UTO

F UN ÇÃO

V ALO RES POS SÍVEIS

p, div font font font

align face size color

alinhamento fonte tamanho cor

letf, right, justify, center nome da fonte -7 a +7 ver no tópico de cores

E sp aç am en to e en tid a de s CÓ DI GO

F UN ÇÃO

E XI GE FECH AMEN TO

&nbsp;

espaço simples

não é uma tag

O d ocu m en to H T ML bá s ic o <html> <head> <title>Aqui colocamos o título</title> </head> <body> Aqui colocamos os conteúdos visíveis </body>

- 51 -

 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 -

 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 &lt; representa o mesmo que < &gt; representa o mesmo que > &#169; 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.01 To dos os e le me nt os ord e na dos a lf a bet i ca men te : ELEMENTO <!--...--> <!DOCTYPE> <a>

DESCRIÇÃO Permite inserir um comentário Indica o tipo de documento usado na página Insere uma âncora (marca que identifica o local do documento em que se

encontra) <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body>

Insere uma abreviação Insere um acrônimo Insere um endereço (postal) Insere um applet (miniaplicação em Java) Desuso (utilize <object>) Define uma área sobre uma imagem Insere texto carregado (negrito ou "bold") Define o URL base de onde partem todas as ligações relativas da página Define o tipo de letra base para a página. Desuso (usar CSS) Define a direção em que o texto é apresentado Texto com letra maior Define uma citação extensa Elemento que contém o corpo (conteúdo visível) da página

- 53 -

 Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <dfn> <div> <dl> <dt> <em> <fieldset> <font>

Provoca uma mudança de linha forçada Insere um botão num formulário Define a legenda de uma tabela Texto alinhado ao centro. Desuso. Insere uma citação Define o texto que é código de computador Define os atributos para as colunas de uma tabela Agrupa colunas numa tabela Insere texto que descreve uma definição Define texto que foi apagado ("deleted") Mostra uma lista de diretório. Desuso. Insere a definição de um termo Insere uma divisão (ou seção) dentro da página Insere uma lista de definições ("definition list") Insere a definição de um termo Insere texto enfatizado (escreve-se em itálico) Elemento que contém um grupo de campos de um formulário Define o tipo de letra, o tamanho e a cor a aplicar ao texto. Desuso.

(usar CSS) <form> <frame> <frameset> <h1> a <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object>

Insere um formulário Define uma subjanela (moldura) dentro da janela principal do browser. A subjanela contém a sua própria página da Web Insere um conjunto de subjanelas ("frames") Define cabeçalhos ("headers") desde o nível 1 (mais importante) até ao nível 6 (menos importante) Contém informação importante a respeito do documento que não deve ser apresentada no corpo da página Desenha uma linha horizontal Elemento dentro do qual são colocados todos os restantes elementos da página Insere texto para ser escrito com caracteres itálicos Insere no interior da página da Web uma subjanela ("frame") contendo a sua própria página da Web Insere uma imagem Define uma caixa para inserção de texto num formulário Define texto que foi inserido em substituição de outro mais antigo Define texto inserido através do teclado Define uma marca que será associada a um controlo. Ao clicar nessa marca, o controle que estiver associado deverá ser acionado. Define um título num elemento <fieldset> Define um item de uma lista Faz referência a um recurso externo e estabelece a ligação com ele Define um mapeamento sobre uma imagem Define uma lista de menu. Desuso. Dá informação sobre aquilo que o documento contém Define um bloco noframes, o qual só será apresentado se o browser não suportar os elementos <frameset> e <frame> Define um bloco noscript, o qual só será apresentado se o browser não suportar o elemento <script> Insere um objeto dentro da página (como um filme em Flash, por

exemplo) <ol> <optgroup> <option> <p> <param> <pre> <q> <s>

Define Define Define Insere Define Define Define Define

uma lista ordenada um grupo de opções uma opção numa lista de um formulário um parágrafo um parâmetro para o elemento <object> texto pré-formatado uma citação curta texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso. (usar CSS)

- 54 -

 Guia Prático de HTML – Prof. Tiago Daniel de Souza http://www.tiagosouza.com ----------------------------------------------------------------------------------------------------------<samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt>

uma amostra ("sample") de código de computador um script uma lista com itens selecionáveis texto menor ("small") uma divisão (ou secção) dentro da página texto que se escreve com um traço horizontal sobreposto ("strikethrough") Desuso (usar CSS). Define texto mais forte (será escrito em negrito) Define estilos CSS a aplicar na página Define texto que fica alinhado um pouco mais abaixo ("subscript") Define texto que fica alinhado um pouco mais acima ("superscript") Define uma tabela Define um corpo ("body") numa tabela Define uma divisão, ou célula, numa tabela Define uma área para inserção de texto num formulário Define o rodapé de uma tabela Define o cabeçalho de uma coluna numa tabela Define o cabeçalho de uma célula numa tabela Define o título da página Define uma linha de células numa tabela Define texto que imita o de uma máquina de escrever antiga ("teletype Define Insere Define Define Insere Define

text") <u> <ul> <var>

Define texto sublinhado ("underlined") Desuso (usar CSS) Define uma lista não ordenada ("unordered list") Define uma variável

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

23.2 - Atributos nucleares ou intrínsecos (" Core Attributes ") Não pod em se r usa dos co m os el e me ntos ba se, h e ad, h tm l, me ta, p a ram, s c rip t, s tyle, e title. AT RIB UTO

V ALO R

DES CRI ÇÃO

class id

class_rule ou style_rule id_name

style

style_definition

title

tooltip_text

A classe (CSS) a que pertence o elemento Um nome único (não deve ser repetido no mesmo documento) para o elemento Definição de um estilo dentro do próprio corpo do documento ("inline style definition") Texto a apresentar como dica

23.3 - Atributos lingüísticos Não po de se r us ado co m os e l em en tos bas e, b r, f ra m e, f ram es e t, h r, if ram e , para m e s c rip t.

- 55 -

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

AT RIB UTO

V ALO R

DES CRI ÇÃO

dir lang

ltr | rtl

Define a direção do texto Define o código da língua usada na escrita dos textos

language_code

23.4 - Atributos de teclado AT RIB UTO

V ALO R

DES CRI ÇÃO

accesskey

carácter (corresponde a uma tecla)

tabindex

número

Define um atalho do teclado (seqüência de teclas) que permite aceder mais rapidamente a um elemento da página Define o número de ordem ("tab order") do elemento no acesso através da tecla tab

23.5 - Eventos de janela A p ar ti r da ve rsão 4 d a li n guag e m HTM L p r at ica m en te to dos os el em en tos p o de m d ese n cad ea r ev e ntos qu e t êm com o r es post a a e xe cu ção d e a ções p o r p a rte d o na ve ga do r, c om o po r ex em p lo, exe c uta r có dig os J ava S cr i p t qu an do o v is i tan te c li ca r n u m de te r mi na do e le me nto . A lis ta a pr es en tad a m a is a ba ixo m ost ra os a tr i bu tos qu e p od em os i nse r i r nos e le me ntos do HTML pa ra d e fin i r a ções de res pos ta a e ve nt os. S ó po d em se r usad os c om os e l em e ntos <bo d y> e <fra m es e t> AT RIB UTO

V ALO R

DES CRI ÇÃO

onload

script

onunload

script

Script a executar quando o documento acabar de ser carregado Script a executar quando o documento for abandonado

23.6 - Eventos para formulários S ó po d em se r usad os c om e l em en tos asso c ia dos a u m fo rm u lár io : ATRIBUTO onchange

script

VALOR

onsubmit onreset

script script

onselect onblur onfocus

script script script

DESCRIÇÃO Script a executar quando o uma alteração Script a executar quando o Script a executar quando o reposto nos valores iniciais Script a executar quando o Script a executar quando o Script a executar quando o

valor contido no elemento sofrer formulário for submetido conteúdo do formulário for elemento for selecionado elemento perder o foco elemento ganhar o foco

23.7 - Eventos de teclado Não p od em s e r usa dos co m os e le me nt o base , b do, b r, f ra me, f ra mes et, h ea d, h t ml , i fr ame , me ta, pa ra m, sc r ipt , s ty l e, e ti t le. ATRIBUTO onkeydown onkeypress

script script

VALOR

onkeyup

script

DESCRIÇÃO Script a executar quando uma tecla é pressionada Script a executar quando uma tecla é pressionada e seguidamente libertada Script a executar quando uma tecla é libertada

- 56 -

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

23.8 - Eventos do mouse Não po dem s er usad os co m os e le me ntos base, b do, br, f ram e, fra mese t, h ea d, h tm l, i f ra me, me ta, par am, sc r i pt, sty l e e t it le . ATRIBUTO onclick ondblclick onmousedown onmousemove onmouseout

script script script script script

VALOR

onmouseover

script

onmouseup

script

DESCRIÇÃO Script a executar quando Script a executar quando Script a executar quando Script a executar quando Script a executar quando sobre um elemento Script a executar quando um elemento Script a executar quando

é é o o o

detectado um clique no rato detectado um clique duplo no rato botão do rato é pressionado ponteiro do rato muda de posição ponteiro do rato deixa de estar

o ponteiro do rato passa a estar sobre o botão do rato é libertado

24. O PRESENTE E O FUTURO DO MARKUP A s l i ng uag e ns d e m a rca ção se mos trar a m fo r mas po de ros íss imas pa ra a r maz en ar e cat eg or i za r co nt eú do, t an to é q u e e las est ão s en do d es en vo lv id as p a ra a como da r da dos c om d i fe re nt es pr opós it os, in clu i n do re p res en ta ções d e r ot eam en to d e c ha mad as te le fôn i cas, fó rm u las ma te má ti cas e e s que mas d e c la ssi f ica ção de r em é d ios. Nos p róx i mos tó pi cos ve re mos c om o essa g e ne ra l iza ção es tá tom an do fo rm a.

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

A co mo de m b e m o t ip o d e i n fo rma ção qu e pr e te nd em ar maz ena r S e pa re m o c on te ú do da vis ua l izaç ão P ossa m s er i n te rp r etad os por d ive rsos p ro gra mas

A ab or da ge m qu e as pes qu isas n a ár ea es co lh er am fo i a bu sca po r u ma g e ne ra l iza ção to ta l das l i ng ua gen s e du as m et al i ng uag e ns (linguagens usadas para definir linguagens) fo ra m de f in i das : o S GML e o XML.

24.2 - SGML e HTML O S GML (ou Standard Generalized Markup Language, Linguagem de Marcação Genérica Padrão) fo i a pr i me i ra g e ne ra l iza ção de li n gua ge m d e ma rc ação a se r l a rg am en te a do ta da. C o mo meta l in g ua ge m, o S GML é u t il i za do pa ra d efi n i r n ov as l i ngu a ge ns d e m ar ca ção e a tu al me nt e o HTM L é de f ini d o at ra vés de S GML.

- 57 -

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

24.3 – XML O XML tam b ém é um a l in g ua ge m d ef i n ida so br e S GM L, mas que se rv e pa ra d e f in i r l in gu a ge ns de m a rca ção co m p ro pós it os esp ecí fi co s e co m u ma si nt ax e b e m es tr i ta. O XML é m a is si m p les d e se r in te r p ret ado v ia so ftwa re e p or isso t em ga n ho b ast an te vi s ib i l id ad e. Ex em p los d e l in g uage ns de ma rc açã o c r ia das e m XM L são : • • • •

M a th ML: u sa da pa ra n ota ção ma te mát ic a. R DF: usa do pr i nc i pa lm e nte pa ra a rma z ena r n ot íc ias. V o ic e XML: p r oj eta da p a ra esq u em at iz ar c on ve rsas e nt re h u ma no e u m com p uta do r. XHT ML: um a v ers ão d o HTM L ma is si m p les e es c ri ta em XML .

um

se r

24.4 - RDF e Syndication E m esp ec ia l, o R DF (Resource Description Framework) é um a l in g uag e m u t i li za da pa ra c ri ar um a o ut ra so pa d e let r in has con h ec i da com o RSS (RDF Site Summary, ou Conteúdo de Sítios em RDF) , qu e é u m c on tê in e r p a ra a r maz en ar i n fo r maçõ es de s ites n a i nt er ne t. P or exe m pl o, se vo cê q ui sesse d i v u lga r n ot íc ias veic u la das do s it e iM ast e rs d e nt ro de se u p ró pr i o we bs ite , vo cê TE RI A q ue f az er u m p ro g ra ma b e m c om p l ica do p a ra ex tr a ir essa i n fo r maçã o d o HTM L, mas o s it e iM aste rs t am bé m o fe r ece s eu c on te ú do em R SS, que na da mai s é do que u m ar q u iv o es c ri to num d ia le to X ML qu e co nt ém os tí t u los, as data s e os/ as au tor es das n ot íc ias n um a es tr ut ur a be m r í g id a, qu e pod e s er facil m en te in te r p ret ada p o r o ut ros s i tes e p ro gram as. E nt ão, se al g ué m q u ise r di v u l ga r a l gu m ti po d e c on te ú do pu b l ic ad o no s i te iMast e rs de nt ro d e se u s ite , basta uti l i za r o RSS d o i Mast ers. * iMasters é um site voltado a desenvolvedores web, muito bem conceituado. www.imasters.com.br

O R SS r esol v eu o p ro bl e ma d e jun ta r i nf or ma ções de d if e re nt es s ites , ca da um d e les esc r it o em u m d e te rm i na do so ft wa re o u usa n do de te rm i na do t em p late HTM L. A lém d isso, o RS S pe r mi t e q ue a in fo r ma ção d o s it e se ja o bt i da p or q u al q ue r s ist em a d e tr ata me nt o d e in fo r maç ões (ou tro s it e, u m p r og ra ma q u e f a z a le i tu ra de n ot íc ias, um a par e lh o mó vel , et c) . O RS S é su f i ci en te me nt e co m p le to pa ra pe r mi t ir ta mbé m qu e in fo r ma ções d e c on te ú dos m u lt i m íd ia se ja m dis t ri b u í das. Exe m p los disso sã o os p o dcas ts e o v o dcas t. O p o d ca st é o RS S qu e co nt ém i n f or ma ções d e ar q ui v os de á ud io d i sp on í ve is e m u m s it e (por exemplo, áudios de notícias, músicas ou programas de rádio) . Um toc ad or d e á u d io po de se r c ons ta nte me nt e a l im en ta do co m u m po d cast e co m as i nf or m açõ es con ti das ne l e b ai xar t odos os á u d ios a uto ma ti cam e nte , sem i nt e rv enç ão do usuá rio. Co m u m v od cas t é s im i la r e co ns iste num R S S pa ra a r qu i vos d e ví d eo.

25. DICAS FINAIS S e vo cê est á le n do is to a qu i n este mom en to, p ara b éns, iss o s i gn i fi ca qu e vo cê c e rta me nt e es tá ap to c om o con te ú do a qu i tr an sm it i do.

Então, agora eu já sei tudo?! Vo cê a p re nd e u u m boc ad o d e coi sas e já est á e m co ndi çõ es d e c ons tr u i r se u w e bsi te. No en ta nto o q ue vo cê a p re n de u é o bás i co e a in da há m u i ta co isa a

- 58 -

 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 ra c on ti n ua r e se a p rof u nd a r no assu n to. Nes ta ú lt i ma li ção, de ixo a l gu mas d i cas fi na is : •

P ar a com eç ar , a co nse l ha mos a es cr ev er se us d oc um e ntos HTM L de f o rma o r de na da e est r ut u rad a. Ass i m faz e nd o vo cê e sta rá n ão só m ost ra nd o aos ou tr os qu e poss ui u ma bas e só li da d e co nh ec i me nt o, m as ta m bém es tar á fa ci l it an do a le i tu ra, in te r p ret ação e man ut en ção d o có d i go.

•

S i ga as nor m as e va lid e s eu có di g o. Mas, n ão faç a di sto u ma fo nt e d e st r ess. Es cr e va u m XHTM L c lar o, us e o DTD e v al i de s uas p ág in as no h tt p :/ /va l i da tor .w 3c.o rg

•

C o lo qu e con te ú dos nas s uas pá gi na s. L em br e-s e qu e HTM L é ape nas a f e r ram en ta q u e poss ib i l it a a pr ese nt ar i nf or m ação na I n te r net, ass i m é n e cessá r io q u e ha ja a in fo r ma ção a ser a pr ese nta da o u se ja, o c on te ú do. P ág i nas l ind as e be m d es en ha das s ão ó ti mas, mas as p esso as b us ca m i n fo r maçã o na In te rn et.

•

E v ite en ch e r suas p á gi nas c om im a ge ns pes ad as e o utros " ba la n ga nda ns" qu e v oc ê en con t ra na In te r ne t. Ist o fa z com s uas p á gi nas dem o re m a ca r re ga r e é f r ust ra nte p ara o usu ár io. Pá gin as q ue d e mo ram m a is de 20 s e gu n dos par a ca rr e ga r po d em p erde r a té 5 0% d os se us v is ita nt es.

•

L e mb r e-se d e ca das tr a r se u s ite nos si tes de b us ca, d e m od o a q ue o ut ras pessoas , al ém d a s ua f am í l ia, possa m e nco ntrá- las e v is itá -la s. Na pá g ina d e en tr ad a d os s i tes p a ra cad ast ro em m ecan is mos de b us ca v oc ê en co nt ra rá u m l in k pa ra a di c io na r s eu si te (o mais importante é o

Google mas, existem AlltheWeb e Lycos). •

outros

tais

como,

DMOZ,

Yahoo,

AltaVista,

Nes ta a post i la vo cê a p re nd eu a usa r o Bl oc o d e Not as, qu e é u m s im p les e fá ci l e d ito r d e t exto s, c on tu do t alv e z vo cê ag o ra p ossa p e nsar e m us ar u m e d ito r m ais sof i st ica do c om ma is p oss ib il ida des e f e r ram en tas. Vo cê en co nt ra um a lis ta gem e s um ár i o de di fe r en tes e d ito r es em Su p er dow n loa ds. com . br o u p el o p ró p r io Goo g le.

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

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

I nfo rma çõ e s pe ss oa is: in fo rma ções so b re vo cê, por ex em p lo. H obbies ou in te re sse s e sp ec ia is: fi l mes, moto c ic let as, et c. P ublica çõe s: com o jo rn ais , re v ist as.

- 59 -

 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 ão es t iv er nest a l ist a ou p a re ce r m ei o m al uc a o u a in da não est iv e r a ma du re c i da, p a re e nav e gu e u m p o uco pe la I nt e rn et. Co m c er te za e nc on tr a ex ce le nt es i d é ias e pod e rá a ma du r ec er as su as e te r m u it as o ut ras.

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

Divida seu conteúdo em tópicos C r i e u ma list a co m os p r i nc i pa is t óp i cos, a p r i nc í pio não i mp or ta a o r de m. Es ta é um a fo r ma de c om eça r a se o rga ni za r. S ua l is ta p o de rá te r q u a ntos tó p icos d ese ja r, mas se p e rca l i sta n do um a q u an ti da de e no r me de tó p icos (seu leitor poderá se cansar e se perder em

meio a tantas opções).

Organização e Navegação A q u i de sc re ve r ei a l gum as das est r ut ur as e n av e gaçã o e s uas ca ra ct er íst i cas e a in da con sid e ra ções im p or tan tes co mo : •

O s t ipo s de i n fo rma ção qu e s e ad a pta m m el h or a c ad a es tr ut u ra.

•

C o mo os lei to res co nse g ue m se d es lo ca r pe lo co nte údo de ca da t i po de es t ru tu ra pa ra e nco ntr a r a s i nf orm aç ões d e q u e p re c isa m

•

C o mo Te r c e rte za de q u e os l e it or es co nse g ue m se lo ca li za r n os se us d o cu me ntos (contexto) e a ch ar o ca mi n ho de vo lt a at é uma p os içã o c on he c id a.

A o le r esta p a rt e re f lit a c omo su as in fo r ma ções se en ca ixa r ia em c ad a u ma. Vo cê po de rá com b i nar, a té mes mo, d uas es tr u tu ras e cr i ar um a no va fo rma d e n av e gaçã o.

- 60 -

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

Webdesign e Visão do Projeto A ma io r ia d as pessoas asso c iam D es i gn uni ca me nt e ao p roj eto g r áf i co de u m We b Si te, o q u e é u m e r ro. O co nc e ito d e W eb D es i gn en vo l ve t odo s os as p ec tos da con st r uçã o d e u m s it e, d es de o des en ho de su a est r utu ra de na ve ga ção e fo rm a d e d i sp on i bi l i za ção da i n fo r maçã o a té o des en vo l vi me nto d o p ro je to g r áf i co. A c ons tr ução d e u m We bs it e dev e, an tes d e ma is nad a, s er e nt en d i da com o u m p ro jet o, co mpo sto d e fas es e d ese nvo lv i do po r pess oas de b ac k g rou nd s d i f er en tes.

Conteúdo e Forma O q ue faz u ma pess oa e nt ra r em u m s i te ?! O fa z a pess oa q ue re r ret or na r? ! Es tas pe r gu n tas de vem se m p re es ta r na cab e ça das pess oas de u ma e q ui pe d e c ons tr u ção d e si tes. A p r i me i ra m u it o re la ci o na-se ao p ú b l i co a lv o. Pa ra qu al t i po d e p ú b l i co voc ê es tá d is pon i b i li za n do i n fo rma ção ? ! Q uai s são as pr io ri d ad es e i nt e resses dest e p ú b l ico ? Qu e t i po d e c on exão é m a is usa da p or el e? ! A s res postas pa ra a se g un da p erg u nt a c e rta me nt e e nv o lv em t rês po ntos : o 1 º é o con te úd o. É o e lem e nto c en tr a l. O 2 º po nto é o des i g n do s it e (estrutura

de navegação e projeto gráfico). Es tr ut u ra r a i n fo rma ção d e fo r ma qu e a na ve ga ção se ja o m a is i nt ui t i va p oss ív e l faz co m qu e s ua a pr ese nt ação We b t en ha m u ito mai s c ha nc e d e s uc esso, co ns id er an do o ti po d e i nfo r ma ção d isp on i bi li za da c on fo r me se u p ú b l ico a lv o. O ut ro p on to é a at ua l izaç ão pa ra q u e não pe r ca u ma d as p r i nc i pa is ca ra cte r íst i cas da I nt e rn et : a d i nam i c idad e. 1 . Na c r iaçã o d o p ro j eto g rá f ico , t en te se mp r e o p ta r po r so l uções q u e m e lh or se a da pt em a p la ta for ma m ais usad a. Po r exe mp lo: mon i to r 1 4 p o le ga das c om reso l uç ão d e 6 40x 48 0, faç a co m a m el hor d iag ram açã o d as pá gi nas a co nte ça q u an do o s it e é vi st o n esse t ip o de mo ni to r e r eso l uçã o. C aso o se u si te de va se r dia g ram a do pa ra u ma r eso lu ção o u t ama n ho de mo ni to r d i f er en tes d o ma is usa do, in fo rme n o s it e. 2 . Nu m pro jet o g rá fi co d ev e se mp r e se p erg u nt ar se s ua ap res en ta ção f i co u a de qu a da o u não ao qu e s eu c l ie nte d ese ja va e ao s eu p ú b l ico a l vo. 3 . P ar a te r u ma g ar an t ia que suas im a ge ns se rão se mp r e be m v is ua l iz ad as, pro c ur e t ra ba l har co m i ma ge ns p al et i za das (formato .gif) . O m e lho r r es u lta do p a ra isso se rá t ra balh ar sua s ima ge ns em R GB e d e po is i nde xá- las com o m eno r n ú m ero d e co r es poss íve l. Caso p re c ise u t i li za r i ma ge ns Tr ue C olo r, sa lv e-as e m fo r mato . jpe g, qu e res ul ta rá e m a rq u iv os pe qu eno s. 4 . S e mp re i ndi q u e em que b rows er s ua pá g i na se rá m e lhor v is ua li zad a. 5 . A pá g i na d e en tra da d e um s it e é mu i to i mpo r tant e. E la dev e se r p r oj eta da d e fo r ma q u e d iga a q u e o si te se de st in a, s eja de f or ma t ext ua l, v isu al o u es tru t ura l.

- 61 -

 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ÃO O v ol u me d e i n for maç ões no mu n do do Des en vo l vi me nt o We b é ex tr em am e nte g r an de , e d i f ic i lm en te uma p essoa d om i na to dos os as pe ctos e p a rt ic u la ri da des. Po r i sso é b as tan te c o mu m o uv i r mos t e rmos com o “ We bd es ign e r” e “P rog r ama do r We b ”. Os We b des i gne rs ge ra lme nt e do m ina m a a rt e d a c ri aç ão de la yo uts, i nt e rfa ces co m o usuá r io, t i po gr a fia , C SS e p r og ra mas d e e d i ção d e i m ag en s. Os P rog r ama do res W eb po r s ua v e z são r es po nsá vei s pe la es tr u tu ra ção d os có d i gos da s pá gin as, p ela p r og ra ma ção d as L i n guag e ns de Se r v ido r e Na ve ga do r e pe la cr ia ção de ba nco d e da dos. A p esa r de e xc ita nt e, a d is cuss ão so br e esses t ema s c om eça a fu g i r mu i to d o o b jet i vo ini c ia l des ta a pos ti la, q u e é a in t ro du ção p r át ic a do l e ito r o u d a l e ito ra à l in g ua ge m de mar ca ção co n he ci da co mo HTM L e t am bé m da r um a n oçã o s ob re as no vas t ec no lo g ias e o fu tu ro d a l i ngua ge m de ma rc açã o. A o a va nça r n os est u dos lo go se p e rc e be essa ra m if i caç ão e c ab e a o es tu dan te d es en vo lv er a ár ea q ue ma is l he a tra i. Es pe ro qu e v oc ê te nha gosta do. U m a b ra ço, T ia go So u za h tt p :/ /ww w. tia gos ou za. com h tt p :/ /us ecl i c k. bl ogs po t.co m

- 62 -

             </div>
        </div>
            </div>
    <!-- End Description Section -->
</main>
<!-- ========== END MAIN ========== -->

<div id="embedModal" class="js-login-window u-modal-window u-modal-window--embed">
    <button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button"
            onclick="Custombox.modal.close();">
        <span class="fas fa-times"></span>
    </button>

    <form class="p-7">
        <header class="text-center mb-7">
            <h4 class="h4 mb-0">Embed!</h4>
            <p>Guia Prático De Htm</p>
        </header>
        <textarea class="form-control u-form__input" rows="5"></textarea>
    </form>
</div>

<script>
    function check_recatpcha(token) {
        document.getElementById("download-form").submit();
        grecaptcha.reset();
    }
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
    <!-- ========== FOOTER ========== -->
    <hr class="my-0">
    <footer>
        <!-- Lists -->
        <div class="container u-space-2">
            <div class="row justify-content-md-between">
                <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
                    <h3 class="h6">
                        <strong>About us'</strong>
                    </h3>

                    <!-- List -->
                    <ul class="list-unstyled mb-0">
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/about-us">About us</a>
                        </li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
                        </li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/privacy-policy">Privacy policy</a></li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/sitemap">Sitemap</a></li>
                        <li><a class="u-list__link" href="https://azdoc.tips/career">Career</a>
                        </li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/contact-us">Contact us</a></li>
                    </ul>
                    <!-- End List -->
                </div>

                <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
                    <h3 class="h6">
                        <strong>Support</strong>
                    </h3>

                    <!-- List -->
                    <ul class="list-unstyled mb-0">
                        <li><a class="u-list__link" href="https://azdoc.tips/help">Help</a></li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/ticket">Submit ticket</a></li>
                    </ul>
                    <!-- End List -->
                </div>

                <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
                    <h3 class="h6">
                        <strong>Account</strong>
                    </h3>

                    <!-- List -->
                    <ul class="list-unstyled mb-0">
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/profile">Profile</a>
                        </li>
                        <li><a class="u-list__link" href="https://azdoc.tips/login">Login</a>
                        </li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/register">Register</a>
                        </li>
                        <li><a class="u-list__link"
                               href="https://azdoc.tips/recover-account">Forgot password</a>
                        </li>
                    </ul>
                    <!-- End List -->
                </div>

                <div class="col-md-6 col-lg-4">
                    <h3 class="h6">
                        <strong>Connect with us</strong>
                    </h3>
                    <!-- Social Networks -->
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item mb-3">
                            <a class="u-icon u-icon--sm u-icon-primary--air rounded"
                               href="https://facebook.com/azdoctipscom">
                                <span class="fab fa-facebook-f u-icon__inner"></span>
                            </a>
                        </li>
                        <li class="list-inline-item mb-3">
                            <a class="u-icon u-icon--sm u-icon-primary--air rounded"
                               href="https://plus.google.com/111647055250435329124">
                                <span class="fab fa-google u-icon__inner"></span>
                            </a>
                        </li>
                        <li class="list-inline-item mb-3">
                            <a class="u-icon u-icon--sm u-icon-primary--air rounded"
                               href="https://twitter.com/azdoctipscom">
                                <span class="fab fa-twitter u-icon__inner"></span>
                            </a>
                        </li>
                    </ul>
                    <!-- End Social Networks -->
                </div>
            </div>
        </div>
        <!-- End Lists -->

        <hr>

        <!-- Copyright -->
        <div class="container text-center u-space-1">
            <!-- Logo -->
            <a class="d-inline-block mb-2" href="https://azdoc.tips/" aria-label="AZDOCTIPS">
                <img src="https://azdoc.tips/assets/img/logo.png" alt="Logo" style="width: 120px;">
            </a>
            <!-- End Logo -->

            <p class="small text-muted">Copyright &copy; 2012-2024.</p>
        </div>
        <!-- End Copyright -->
    </footer>
    <!-- ========== END FOOTER ========== -->

        <!-- ========== SECONDARY CONTENTS ========== -->
    <!-- Account Sidebar Navigation -->
    <aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden"
           aria-labelledby="sidebarNavToggler">
        <div class="u-sidebar__scroller">
            <div class="u-sidebar__container">
                <div class="u-header-sidebar__footer-offset">
                    <!-- Toggle Button -->
                    <div class="d-flex align-items-center pt-4 px-7">
                        <button type="button" class="close ml-auto"
                                aria-controls="sidebarContent"
                                aria-haspopup="true"
                                aria-expanded="false"
                                data-unfold-event="click"
                                data-unfold-hide-on-scroll="false"
                                data-unfold-target="#sidebarContent"
                                data-unfold-type="css-animation"
                                data-unfold-animation-in="fadeInRight"
                                data-unfold-animation-out="fadeOutRight"
                                data-unfold-duration="500">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- End Toggle Button -->

                    <!-- Content -->
                    <div class="js-scrollbar u-sidebar__body">
                        <div class="u-sidebar__content u-header-sidebar__content">

                            <!-- Login -->
                            <div id="login" data-target-group="idForm">
                                <form class="js-validate" action="https://azdoc.tips/login" method="post">
                                    <!-- Title -->
                                    <header class="text-center mb-7">
                                        <h2 class="h4 mb-0">Welcome back</h2>
                                        <p>Login to manage your account</p>
                                    </header>
                                    <!-- End Title -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-user u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="email" class="form-control u-form__input" name="email" required
                                                   placeholder="Email address"
                                                   aria-label="Email address"
                                                   data-msg="Please enter a valid email address"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-2">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-lock u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="password" class="form-control u-form__input" name="password"
                                                   required
                                                   placeholder="Password"
                                                   aria-label="Password"
                                                   data-msg="Your password is invalid please try again"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <div class="clearfix mb-4">
                                        <a class="js-animation-link float-right small u-link-muted" href="javascript:;"
                                           data-target="#forgotPassword"
                                           data-link-group="idForm"
                                           data-animation-in="slideInUp">Forgot password</a>
                                    </div>

                                    <div class="mb-2">
                                        <button type="submit"
                                                class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login                                        </button>
                                    </div>

                                    <div class="text-center mb-4">
                                        <span class="small text-muted">Do not have an account?</span>
                                        <a class="js-animation-link small" href="javascript:;"
                                           data-target="#signup"
                                           data-link-group="idForm"
                                           data-animation-in="slideInUp">Register                                        </a>
                                    </div>

                                    <div class="text-center">
                                        <span class="u-divider u-divider--xs u-divider--text mb-4">Or</span>
                                    </div>

                                    <!-- Login Buttons -->
                                    <div class="d-flex">
                                        <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1"
                                           href="https://azdoc.tips/login/facebook">
                                            <span class="fab fa-facebook-square mr-1"></span>
                                            Facebook
                                        </a>
<!--                                        <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0"-->
<!--                                           href="--><!--">-->
<!--                                            <span class="fab fa-google mr-1"></span>-->
<!--                                            Google-->
<!--                                        </a>-->
                                    </div>
                                    <!-- End Login Buttons -->
                                </form>
                            </div>

                            <!-- Signup -->
                            <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
                                <form class="js-validate" action="https://azdoc.tips/register" method="post">
                                    <!-- Title -->
                                    <header class="text-center mb-7">
                                        <h2 class="h4 mb-0">Welcome to AZDOCTIPS.</h2>
                                        <p>Fill out the form to get started</p>
                                    </header>
                                    <!-- End Title -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-user u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="email" class="form-control u-form__input" name="email" required
                                                   placeholder="Email address"
                                                   aria-label="Email address"
                                                   data-msg="Please enter a valid email address"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-user u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="text" class="form-control u-form__input" name="username" required
                                                   placeholder="Username"
                                                   aria-label="Username"
                                                   data-msg="Please enter a valid username"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-lock u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="password" class="form-control u-form__input" name="password"
                                                   required
                                                   placeholder="Password"
                                                   aria-label="Password"
                                                   data-msg="Your password is invalid please try again"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fa fa-key u-form__text-inner"></span>
                        </span>
                                            </div>
                                            <input type="password" class="form-control u-form__input" name="confirm_password" id="confirmPassword"
                                                   required
                                                   placeholder="Confirm password"
                                                   aria-label="Confirm password"
                                                   data-msg="Password does not match with confirm password"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Checkbox -->
                                    <div class="js-form-message mb-5">
                                        <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                                            <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="terms_confirm" value="1" required                                                    data-msg="Please accept our terms and conditions"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                            <label class="custom-control-label" for="termsCheckbox">
                                                <small>
                                                    I agree to the
                                                    <a class="u-link-muted" href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
                                                </small>
                                            </label>
                                        </div>
                                    </div>
                                    <!-- End Checkbox -->

                                    <div class="mb-2">
                                        <button type="submit"
                                                class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get started                                        </button>
                                    </div>

                                    <div class="text-center mb-4">
                                        <span class="small text-muted">Already have account?</span>
                                        <a class="js-animation-link small" href="javascript:;"
                                           data-target="#login"
                                           data-link-group="idForm"
                                           data-animation-in="slideInUp">Login                                        </a>
                                    </div>

                                    <div class="text-center">
                                        <span class="u-divider u-divider--xs u-divider--text mb-4">Or</span>
                                    </div>

                                    <!-- Login Buttons -->
                                    <div class="d-flex">
                                        <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1"
                                           href="#">
                                            <span class="fab fa-facebook-square mr-1"></span>
                                            Facebook
                                        </a>
                                        <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0"
                                           href="#">
                                            <span class="fab fa-google mr-1"></span>
                                            Google
                                        </a>
                                    </div>
                                    <!-- End Login Buttons -->
                                </form>
                            </div>
                            <!-- End Signup -->

                            <!-- Forgot Password -->
                            <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
                                <form class="js-validate" action="https://azdoc.tips/recover-account" method="post">
                                    <!-- Title -->
                                    <header class="text-center mb-7">
                                        <h2 class="h4 mb-0">Forgot your password?.</h2>
                                        <p>Enter your email address below and we will get you back on track</p>
                                    </header>
                                    <!-- End Title -->

                                    <!-- Input -->
                                    <div class="js-form-message mb-4">
                                        <div class="js-focus-state input-group u-form">
                                            <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fas fa-envelope u-inner-form__text"></span>
                        </span>
                                            </div>
                                            <input type="email" class="form-control u-form__input" name="email" required
                                                   placeholder="Email address"
                                                   aria-label="Email address"
                                                   data-msg="Please enter a valid email address"
                                                   data-error-class="u-has-error"
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <div class="mb-2">
                                        <button type="submit"
                                                class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Request reset link                                        </button>
                                    </div>

                                    <div class="text-center mb-4">
                                        <span class="small text-muted">Remember your password?</span>
                                        <a class="js-animation-link small" href="javascript:;"
                                           data-target="#login"
                                           data-link-group="idForm"
                                           data-animation-in="slideInUp">Login                                        </a>
                                    </div>
                                </form>
                            </div>
                            <!-- End Forgot Password -->
                        </div>
                    </div>
                    <!-- End Content -->
                </div>

                <!-- Footer -->
                <footer class="u-sidebar__footer u-sidebar__footer--account">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item pr-3">
                            <a class="u-sidebar__footer--account__text"
                               href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
                        </li>
                        <li class="list-inline-item">
                            <a class="u-sidebar__footer--account__text" href="https://azdoc.tips/help">
                                <i class="fa fa-info-circle"></i> Help                            </a>
                        </li>
                    </ul>

                    <!-- SVG Background Shape -->
                    <div class="position-absolute-bottom-0">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;"
                             xml:space="preserve">
              <path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69
                c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"/>
                            <path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11
                c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2
                C282.5,76.7,292.7,74.4,300,68.5z"/>
                            <circle class="u-fill-danger" cx="259.5" cy="17" r="13"/>
                            <circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"/>
                            <circle class="u-fill-success" cx="288" cy="5.5" r="5.5"/>
                            <circle class="u-fill-warning" cx="232.5" cy="34" r="2"/>
            </svg>
                    </div>
                    <!-- End SVG Background Shape -->
                </footer>
                <!-- End Footer -->
            </div>
        </div>
    </aside>
    <!-- End Account Sidebar Navigation -->
    <!-- ========== END SECONDARY CONTENTS ========== -->
    
<!-- Go to Top -->
<a class="js-go-to u-go-to" href="#"
   data-position='{"bottom": 15, "right": 15 }'
   data-type="fixed"
   data-offset-top="400"
   data-compensation="#header"
   data-show-effect="slideInUp"
   data-hide-effect="slideOutDown">
    <span class="fa fa-arrow-up u-go-to__inner"></span>
</a>
<!-- End Go to Top -->

<!-- JS Global Compulsory -->
<script src="https://azdoc.tips/assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/bootstrap/bootstrap.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="https://azdoc.tips/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<script src="https://azdoc.tips/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="https://azdoc.tips/assets/vendor/pdfobject/pdfobject.js"></script>
<script src="https://azdoc.tips/assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/appear.js/appear.js"></script>
<script src="https://azdoc.tips/assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<script src="https://azdoc.tips/assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

<!-- JS Template -->
<script src="https://azdoc.tips/assets/js/hs.core.js"></script>
<script src="https://azdoc.tips/assets/js/helpers/hs.focus-state.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.header.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.unfold.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.validation.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.fancybox.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.slick-carousel.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.show-animation.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.sticky-block.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.scroll-nav.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.go-to.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.modal-window.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.cubeportfolio.js"></script>



<script src="https://azdoc.tips/assets/js/azdoctips.js?v=2"></script>
<script>
    // initialization of text animation (typing)
    if (jQuery('.u-text-animation.u-text-animation--typing').length > 0) {
        var typed = new Typed(".u-text-animation.u-text-animation--typing", {
            strings: ["Documents.", "Magazines.", "Articles.", "And more."],
            typeSpeed: 60,
            loop: true,
            backSpeed: 25,
            backDelay: 1500
        });
    }
</script>

</body>
</html>