WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio INTRODUO Bem vindo a este man al de !

! ia Passo a Passo "ara We# Desi!ner$ Com o avan%o cada ve& mais da Internet ' necessrio mais do ( e n nca voc) est dentro da Rede M ndial de Com" tadores* a Net "ara os ami!os +ntimos$ ,o-e com m c sto m+nimo "ara acessar a Internet "essoas do m ndo inteiro "roc ram est sem"re inteirado do ass nto so#re Internet e dos rec rsos ( e ela o.erece* ainda mais a!ora com meios de aceso !rat ito atrav's do IG* S "er// e o tros$$$ 0oc) sa#e ( e a Internet ' o meio .cil de se com nicar com as "essoas* locali&ar in.orma%1es so#re "ol+tica* economia* not+cias* ed ca%2o* ima!ens* en.im ( al( er tema ( e "recisar* at' mesmo ass ntos ( entes$ Pela Internet tam#'m e "osso .a&er ami!os* div l!ar me tra#al3os* .a&er con.er)ncias atrav's de "ro!ramas de #ate "a"o como Mirc* IC4 e o tros$ Mais ainda* "osso com"rar* vender e div l!ar o me ne!5cio "ela Internet* atrav's de a"licativos voltados "ara WEB* desenvolvidos em ( al( er "lata.orma "ara atender a n5s amantes da NET$ Com toda essa tecnolo!ia ' necessrio 3o-e* n2o se limitar ao 6so da Internet* somente em sa#er7 O ( e ' "reciso "ara se conectar Meios de Nave!a%2o Correio Eletr8nico Rede Dial 6" 9 necessrio entender ( e estas in.orma%1es se "ro"a!am atrav's de "!ina no .ormato de 3:"erte;to* o se-a ,TM<=,:"erTe;t Mar> " <an! a!e?* tornando a WEB cada ve& mais din@mica$ Por isso ' necessrio 3o-e* ( al( er "essoa nave!ante da Internet Ter m con3ecimento m+nimo so#re ,TM<* "ara ( e assim ela "ossa .a&er s a "r5"ria ,ome Pa!e com tantos me!a#:tes como di& Gil#erto Gil e criar se We# Site "ara ( e s as in.orma%1es "essoais o comerciais "ossam vele-ar "ela Internet e "ossa atin!ir se "A#lico$ We# Desi!ner Passo a Passo "ara Iniciantes* ' m ! ia voltado "ara s rios lei!os no ass nto so#re con.ec%2o de ,ome Pa!es e ( e ao .inal "retende dei;Blo "ronto "ara montar ma "!ina "essoal o comercial com"osta de anima%1es* letreiros* #anners* ima!ens* ta#elas e .orm lrios "ostados "ra cai;a de eBmail e ainda a#ordar os conceitos so#re WWW (World Wide Web)* com te;tos o#-etivos* "assando "or t torias am"lamente e;em"li.icados so#re constr %2o de "!inas em HTML e de"ois tra#al3ando com o modo interativo atrav's Cront Pa!e E;"ress$ <em#rando ( e e;istem 3o-e m itos Editores de P!inas "ara WEB* limitarBse somente ao Cront Pa!e E;"ress* "ro!rama este ( e acom"an3a o WindoDs EF* ' ancorar se #arco na Net* "roc rar e;"andir se s con3ecimentos em We# Desi!ner ' realmente Ter entendido o Cront Pa!e E;"ress e Ter evol +do* "ois c3e!ar m tem"o em ( e este so.tDare n2o atender a tanta ima!ina%2o o cria%2o ( e "retenda .a&er$ Por 3ora* ' ma e;celente .erramenta "ara iniciar se s est dos so#re con.ec%2o de ,ome Pa!es * m2o o#ras e m #om est doGG Neilon Mrcio cmwn@bol.com.br a !or /

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

"#RT$ I
INT$RN$T INTRODUO Mais ( e m modismo a Internet torno Bse m .en8meno$ Conectando mais de m mil32o de com" tadores e cerca de HI mil31es de s rios* es"al3ados em noventa "a+ses* valores estes ( e m dam a cada dia* sem dAvida n2o dar "ara .icar de .ora desta teia$ En.im* se .ormos descrever Internet* a mel3or ' de.inirmos como Com nica%2o$ Com ela encontramos servi%os e .acilidades* not+cias e at alidades* o se "re.erir como ' o caso de m itos "essoas* m e;celente local "ara encontrar ami!os* -o!os* #ate "a"o e m ito mais* como lo-as virt ais* onde voc) "ode com"rar o vender com toda se! ran%a$ HI%T&RI'O A Internet deve in+cio em /EJE so# o nome de ARPANET =6SA?$ Com"osta de ( atro com" tadores tin3a coo .inalidade* demonstrar as "otencialidades na constr %2o de redes sando com" tadores dis"ersos =es"al3ados? em ma !rande rea$ A id'ia .oi #oa* e em /EKL* MI niversidades e instit i%1es militares - "oss +am cone;1es$ ,o-e ' ma ar( itet ra de so.tDare e 3ardDare ( e se com nicam entre si ( e s2o mantidas "or or!ani&a%1es comerciais e !overnamentais$ Mas ma das "rinci"ais caracter+sticas da Internet* ' ( e n2o "oss i dono* "ara or!ani&ar toda essa troca de in.orma%1es* e;istem associa%1es e !r "os ( e se dedicam "ara s "ortar* rati.icar "adr1es e resolver ( est1es o"eracionais* visando "romover os o#-etivos da Internet$ # WORD WID$ W$( As "essoas cost ma .alar em Internet e We#* ser a mesma coisaN Ser a"enas ma !+ria da mo%ada do #ate "a"oN O e;iste realmente m conceito cient+.ico "ara istoN Para resolver esta dAvida e tam#'m "ara come%armos a entender esta s'rie de de.ini%2o de conceitos* vamos "artir do se! inte "rinc+"io7 A Word Wide We# =teia m ndial? ' con3ecida como WWW* ma nova estr t ra de nave!a%2o "elos diversos itens de dados em vrios com" tadores di.erentes$ O modelo WWW ' tratar todos os dados da Internet como 3i"erte;to* isto '* vinc la%1es entre as di.erentes "artes do doc mento "ara "ermitir ( e as in.orma%1es se-am e;"loradas interativamente e n2o a"enas de ma .orma linear$
L

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

Por isso e;istem "ro!ramas como Microso.t Internet E;"lorer* ( e a mentaram m ito a "o" laridade da Internet e !ra%as as s as "otencialidades* 3o-e "odemos ver nas "!inas da Internet* doc mentos .ormatados =cores* e.eitos e etc$$$?* esc tar mAsica* assistir a v+deos* e m ito mais$ En.im a We#* ' a inter.ace !r.ica da Internet* "ois "odemos acessar a Internet* trans.erir ar( ivos= Processo a ( al c3amamos 6"<oad?* e reali&ar o tras o"era%1es #sica sem "recisar de ma inter.ace !r.ica$ Para concl ir s5 estamos de .ato sando a We#* ( ando estamos nave!ando .a&endo so das ,ome Pa!es "ara acessar m site* o se-a* m endere%o Anico ( e cont)m a ,ome Pa!e ="!ina inicial? e o tras "!inas ( e .a&em "arte deste con- nto de "!inas e todas em m Anico c5di!o .onte escrito em ma lin! a!em c3amada ,TM<$ 'ON$'T#NDO )%$ * INT$RN$T Em tem"os remotos somente al! ns "rivile!iados "odiam Ter acesso O Internet$ A!ora* ( al( er m "ode o#ter esse acesso "or m "re%o m+nimo* o mel3or* voc) "oder Ter acesso !rat ito* "a!ando somente o " lso da lin3a tele.8nica* o mais !rat ito ainda* o acesso e ainda o " lso da lin3a tele.8nica* o se-a* voc) de"endendo do ti"o da cone;2o ( e se n2o "recisa "a!ar nada* s5 "recisa Ter o e( i"amento necessrio "ara Ter acesso a Internet$ $+UI"#M$NTO% N$'$%%,RIO% Os e( i"amentos necessrios s2o7 H#RDW#R$ PC HFJPDQH /II F MEGA DE RAM P<ACA DE CAQ MODEM DE LF$FII #"s %O-TW#R$ Sistema O"eracional EM Internet E;"lorer o Netsca"e O tloo> E;"ress o Internet Mail 0oc) vai "recisa ainda7 "RO.$DOR D$ #'$%%O # INT$RN$T =em"resa ( e coloca voc) na Internet* lo!o a"5s voc) discar atrav's da Rede DialB6"? Lin/a Tele01nica (Di2i!al o #nal32ica) 0ale ressaltar ( e esta ' ma con.i! ra%2o m+nima* ( ando mel3or o e( i"amento ( e sar com certe&a voc) ser mais .eli& sando a Net$
R

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

TI"O% D$ 'ON$45$% E;istem dois ti"os de cone;1es "ara acesso a Internet$ D$DI'#D# S2o as cone;1es diretas* tili&adas "elos .ornecedores de servi%os ( e vendem cone;1es de todos os ti"os "ara "essoas e or!ani&a%1es$ Estes ti"os de .ornecedores c3amamos de Provedores$ Estas lin3as s2o de alta velocidade e tam#'m m ito caras$ DI%'#D# B 9 o ti"o de cone;2o sada "or s rios com ns$ Nesse caso* voc) disca "ara o "rovedor atrav's da Rede Dial6"* "edindo acesso a Internet$ Bem * tendo entendido t do isso e voc) .eli& da vida* daremos inicio ao nosso c rso de ,TM<$$

INI'IO DO 'UR%O D$ HTML 6.7

Toda ve& ( e voc) acessar m site =ve-a t5"ico Word Wide We#? "or meios de dom+nios ( ando adiciona a 6R< na #arra de endere%o* do se Nave!ador =BroDser?* voc) ver "!inas na WEB #em din@micas* or!ani&adas* animadas e com ela tra&endo in.orma%1es* ima!ens* sons* v+deos e etc$ Ent2o* voc) deve se "er! ntar$ Como ' .eitoN Como elas se "ro"a!amN Todas estas "!inas "oss em m c5di!o .onte escrito n ma lin! a!em c3amada ,TM< =,:"er Te;t Mar> " <an! a!e?$ Este t torial tem "or o#-etivo mostrBlo como criar e e;i#ir "!inas ,TM<* como as ( e voc) ver atrav's da WEB$ Tais "!inas s2o criadas a "artir de ar( ivos te;to ASCII* contendo caracteres de marca%2o da lin! a!em ,TM<$ 6ma ve& criados* estes ar( ivos s2o salvos com ma e;tens2o $3tml$ Ent2o* entendido novamente mais ma eta"a* vamos iniciar o c rso de verdade$ A cada e;em"lo voc) dever salvar se ar( ivo com a e;tens2o 3tml$ Certo N HI$R#R+UI# D$ $L$M$NTO% Primeiramente* !ostaria de lem#rarBl3e como citei a lin3as acima* ( e e;istem vrios editores de ,ome Pa!es* como "or e;em"lo7 o Cront Pa!e E;"ress* Netsca"e Com"oser* ,ome Site* etc$ S5 ( e na a s)ncia destes a"licativos e voc) descon3ecendo a <in! a!em de ,:"erTe;tos* ,TM<* n2o "oderia criar s as "!inas$ Da+ a im"ort@ncia de se con3ecer esta lin! a!em$ Entende N M ito #em* ' "ara est darmos ,TM<* saremos o - con3ecido Bloco de Notas e m BroDser =Internet E;"lorer o Netsca"e?$ Para nossos e;em"los sarei o Internet E;"lorer$ T do BemN 0amos nessaG
H

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

A estr t ra #sicas de ma "!ina ,TM< ' mostrada na li8!a2em 9.9$ O#serve ( e a constr %2o de "!inas e;i!ir o so de marcadores c3amados de STAGST$ 0e-a a!ora o so deles na li8!a2em 9.9 Li8!a2em 9.9 <html> <head> <title>COLOQUE AQUI O TTULO DA PGINA</title> </head> <body> DAQUI EM DIANTE </body> </html> -im da Li8!a2em 9.9 Com certe&a voc) o#servo ( e sem"re sei os ta!s* .a&endo demarca%2o* o se-a* eles sem"re e8!ar:o #NT$% D$ #L;UM# 'OI%# E #"&% #L;UM# 'OI%#. 4 er mais m e;em"lo "ara entender mel3orN T do #em$ E;em"lo7 <title>$DITOR# $RI'#</title<
IM"ORT#NT $

o!" DE#EN OL E #UA PGINA

'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; U3tmlV U3eadV UtitleV U#od:V

O +U$ -#> Marca o in+cio e o .im do doc mento ,TM<$ Com ele voc) inicia e .inali&a a constr %2o da "!ina We#$ Marca o in+cio e do .im do ca#e%al3o* o se-a* a rea onde ser2o descritos ca#e%al3os e o t+t lo da "!ina Marca o in+cio e o .im do t+t lo do ca#e%al3o$ O t+t lo da "!ina a"arecer na #arra s "erior do #roDser$ Marca o in+cio e o .im do do cor"o da "!ina

$4$R'='IO 9 .amo8 ?ra!icar@

Bem entendido os conceitos #sicos e voc) mais .eli&* vamos criar nossa "rimeira "!ina$ /W? A#ra o Bloco de Notas IniciarPPro!ramasPAcess5riosPBloco de Notas LW? Di!ite o c5di!o da lista!em /$L$ A"5s di!itBlo salve na "asta Meus Documentos o em o tra se "re.erir com o nome eAem?lo9./!ml. 'omo@ Re8?o8!aB
M

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

9) #bra o Men #rC iDo e e8col/a %alDar E) Na Fanela C e a?arecer como mo8!rar 0i2 ra 9.9G 0aHa a8 8e2 in!e8 !are0a8B E.9) Na o?H:o %alDar em 8elecione a ?a8!a onde de8eFa 8alDarG no ca8o Me 8 Doc men!o8 E.E) Na o?H:o Nome do arC iDo coloC e o nome do arC iDo eAem?lo9./!ml E.I) -inalmen!e cliC e no bo!:o %alDar.

-i2 ra 9.9 Li8!a2em 9.E <html> <head> <title>Mi$ha %ome Pa&e</title> </head> <body> A'(i $e)te e)*a+o de)e$,ol,e-ei mi$ha %ome Pa&e. A&(a-de.. </body> </html> -im da Li8!a2em 9.E Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo9./!ml. 0e-a a .i! ra /$L
J

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

O TZT6O ADICIONADO NA P[GINA ATRA09S DO TAG TIT<E

-i2 ra 9.E

$AercKcio E ) .amo8 a?render mai8 m ?o co@

Em al! ns momentos em s a "!ina .a& necessrio comentar al! ns trec3os do c5di!o "ara .acilitar na leit ra e man ten%2o da "!ina* "or isso adicionamos comentrios* o se-a* "alavras o .rases ( e n2o s2o e;i#idos no Neve!ador* a"enas s2o visto como estamos tra#al3ando no c5di!o .onte$ Na li8!a2em 9.I .aremos m novo e;em"lo e incrementaremos novos ta!s$ Di!ite a li8!a2em 9.I a#ai;o e salve com o nome eAem?loE./!ml na "asta Me s Doc mentos$ ATENXYO7 Salve sem"re os se s e;em"los na "asta Me s Doc mentos* o "rocesso "ara salvar ' i! al ao do E;em"lo/* tro( e a"enas o nome do ar( ivo$ Na dAvida ve-a o e;em"lo /$ T do #emN Li8!a2em 9.I <.I$/!io do Do!(me$to %TML> <html> <head> <title>Melho-a$do Mi$ha %ome Pa&e</title> <meta $ame01a(tho-1 !o$te$t01NM2# I$3o-m4ti!a1> <meta $ame015ey6o-d)1 !o$te$t01html7 home*a&e)1>

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

</head> <. I$/!io do Co-*o da P4&i$a> <body> <h8>E)te 9 o t/t(lo P-i$!i*al</h8> <h:>E)te 9 o t/t(lo #e!($d4-io</h:> <h;> E)to( ado-a$do !-ia- *4&i$a)</h;> <h-> <*>E)te 9 o Li$ha do 8< <*>Com e)te e)te -e!(-)o <h-> <. >im do Co-*o da P4&i$a> </body> </html> <. >im do Do!(me$to %TML> -im da Li8!a2em 9.I Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loE./!ml. 0e-a a .i! ra /$R 8< P-imei-o Pa-a&-43o <b-> E)ta 9 := Pa-a&-43o -e!(-)o i$i!io (m *a-a&-43o<b-> E Com '(eb-o (ma li$ha

-i2 ra 9.I
F

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; UGV UmetaV

IM"ORT#NT $

O +U$ -#> Insere comentrios nas "!inas Marcas Metas$ Servem "ara voc) es"eci.icar o a tor* "alavrasB c3aves* descri%2o da "!ina* etc$$ Dentro do ta!UmetaV* tem os comandos name e o content$ No comando name voc) es"eci.ica ( e in.orma%2o voc) ( er dar* e no content voc) descreve a in.orma%2o Marca m t+t lo$ Sendo ( e n re"resenta m valor ( e "ode ser de / a J* o taman3o m da de .orma decrescente* o se-a* o nAmero / ' o maior taman3o do t+t lo$ Insere ma lin3a 3ori&ontal Marca m "ar!ra.o e acrescenta ma lin3a em #ranco$ Insere ma ( e#ra de lin3a

U3nV U3rV U"V U#rV

A!ora* ( e voc) vi o res ltado do e;em"loL$3tml a cada ve& mais .eli&* "or est entendendo esta lin! a!em* vamos "assar "ara o E;erc+cio R$

$AercKcio I ) T#;% D$ #LINH#M$NTO

Assim* como n m doc mento com m* 3 necessidade de mel3orar a a"ar)ncia do doc mento* e a "rimeira "rovid)ncia a tomar ' c idar do alin3amento do te;to$ O Alin3amento "adr2o ( e vem con.i! rado nos nave!adores* ' a es( erda$ Para entender isto* di!ite a li8!a2em 9.6* e salve como eAem?loI./!ml* e acom"an3e o conceito de ta! ( e marcam o alin3amento dos t+t los e "ara!r.os nas "!inas$ Li8!a2em 9.6 <html> <head> <title>Ta&) *a-a Ali$hame$to)</title> </head> <body> <h? ali&$0!e$te->T/t(lo Ce$t-ali@ado</h?> <h? ali&$0-i&ht>T/t(lo A Di-eita</h?> <h? ali&$0le3t> T/t(lo A E)'(e-da<h?> <h-> <* <* <* <* B()ti3i!adoD ali&$0!e$te-> Pa-4&-a3o ao Ce$t-o ali&$0-i&ht>Pa-4&-a3o a di-eita ali&$0le3t>Pa-a&-43o a e)'(e-da ali&$0B()ti3y>E)te 9 (m teCto Na li$&(a&em %TML temo) ,4-io) ti*o) de
E

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

ali$hame$to) '(e ,o!" *ode-4 a*li!a- em )(a *4&i$aD Ne)ta *a-te do li,-o7,e-emo) !omo ali$ha- li$ha)7 *a-4&-a3o) e !abe+alho)D <b-> <b-> <h- 6idth0EFG ali&$0!e$te-> <blo!5'(ote>TeCto !om mai) ma-&em</blo!5'(ote> <blo!5'(ote><blo!5'(ote>Tem !om mai) ma-&em ai$da</blo!5'(ote></blo!5'(ote> </body> </html> -im da Li8!a2em 9.6 Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loI./!ml. 0e-a a .i! ra /$H

-i2 ra 9.6 'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; UcenterV ali!n\center* ri!3t* le.t o - sti.:
IM"ORT#NT $

O +U$ -#> Alin3a o trec3o =te;to* ima!em o ta#ela ao centroV Atri# +dos dentro do ta! U"V ( e marca o in+cio de m "ar!ra.o modi.icam o alin3amento do t+t lo$ Center\ alin3a ao centro Ri!3t \ alin3a a direita <e.t \ alin3a a es( erda ] sti.: \ .a& a - sti.ica%2o do "ar!ra.o$
/I

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

U#loc>( oteV U3rV

Adiciona ma mar!em de cerca de m cent+metro Atri# tos Si&e \ de.ine a alt ra da lin3a$ E;em"lo7 U3r si&e\MIV Widt3 \ de.ine a lar! ra da lin3a 3ori&ontal$ E;em"lo7 U3r Didt3\LIIVo U3r Didt3\MI^V Nos3ade \ desen3a a lin3a sem a som#ra "ara dar o e.eito de tr)s dimens1es$ E;em"lo7 U3r nos3adeV

$AercKcio 6 ) -ORM#T#O D$ $%TILO%

M ito #em caro est dante* "erce#a ( e a cada e;em"lo s a "!ina vai mel3orando ainda mais s a a"ar)ncia$ Neste e;em"lo tra#al3aremos com a .ormata%2o das letras #em como cor* taman3o de .onte* estilo* e etc$$ Bem* "re"aradoN 0amos l novamente "ara mais m est doG Para entender isto* di!ite a li8!a2em 9.L* e salve como eAem?lo6./!ml* Li8!a2em 9.L <html> <head> <title>>o-mata$do E)tilo)</title> </head> <body> <!e$te->M(da$do o E)tilo do) Ca-a!te-e)</!e$te-> <*> <b>TeCto em Ne&-ito</b><b-> <i>TeCto em It4li!o</i><b-> <(>TeCto )(bli$hado</(><b-> <tt>TeCto Mo$oe)*a+ado</tt><b-> <b-><3o$t !olo-0-ed>TeCto em e-melho</3o$t>

<b-><3o$t )i@e0E>TeCto em Tama$ho E</3o$t> <b-><3o$t e-da$a</3o$t> 3a!e0,e-da$a>TeCto !om a let-a

<b-><3o$t 3a!e0a-ial bla!5> o!" *ode 3a@e!ombi$a+He)</3o$t> <b-><!e$te-> <3o$t !olo-0bl(e 3a!e0,e-da$a )i@e0E><b>Edito-a I-i!a</b></3o$t></!e$te-> <b-> o!" *ode-4 o) at-ib(to) *a-a !ada ti*o de let-a.
//

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

<b-> <3o$t !olo-0bl(e )i@e0J>E</3o$t><3o$t !olo-0-ed )i@e0?>dito-a I-i!a</3o$t> <b-> <*-e> E)tamo) *-o&-edi$do $o !(-)o de %TMLD E)te ta& *e-mite '(e todo) o) e)*a+o) 3eito) $o !Kdi&o 3o$te )eBam -e)*eitado)D Ce-toL </*-e> </body> </html> -im da Li8!a2em 9.L Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo6./!ml. 0e-a a .i! ra /$M

-i2 ra 9.L 'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; U#V UiV U V UttV U.ontV
IM"ORT#NT $

O +U$ -#> Coloca o te;to em ne!rito Coloca o te;to em itlico Coloca o te;to s #lin3ado Coloca o te;to em .onte monoes"a%ada$ =.onte Co rier*como m( ina de escrever? Modi.ica a .ormata%2o do te;to$ Atri# tos7 %iMe \ de.ine o taman3o da letra$ E;7 U.ont si&e\MVTe;toUP.ontV -ace \ de.ine o estilo da letra$ E;7 U.ont .ace\verdanaVTe;toUP.ontV 'olor \ de.ine a cor da letra$ E;7U.ont color\redVTe;toUP.ontV
/L

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

U"reV

Marca m trec3o .ormatado com .onte monoes"a%ada$ A .ormata%2o com es"a%os e entrada de "ar!ra.os ' res"eitada$ U#ase.ontV Modi.ica a .ormata%2o "adr2o do te;to$ E;7 U#ase.ont si&e\MV T#($L# D$ 'OR$% 0oc) "erce#e ( e as cores a .onte o#edecem o idioma in!l)s* no entanto* as cores da .onte "odem ser adicionados atrav's do nome o de se s res"ectivos c5di!os$ Ent2o "ara voc) .icar mais .eli&* relacionei a( i al! mas cores "ara colorir e diversi.icar s a 3ome "a!e$ 0e-a a 0i2 ra 9.N

-i2 ra 9.N

$AercKcio L ) LI%T#% NUM$R#D#% $ M#R'#D#%

E l vamos n5s "ara m mais e;erc+cio$ Desta ve& tra#al3aremos com listas n meradas e marcadores$ Assim como em ma carta o ( al( er o tro doc mento com m* "recisamos listar t5"icos atrav's de s+m#olos o nAmeros$ Para entender isto* di!ite a li8!a2em 9.N* e salve como eAem?loL./!ml*

/R

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

Li8!a2em 9.N <html> <head><title>Li)ta)</title> </head> <body> <h;>I)to 9 (ma li)ta</h;> <. I$/!io do) N(me-ado-e)> <ol> <li>Item 8 <li>Item : <li>Item ; </ol> <. >im do) N(me-ado-e)> <h- 6idth0EFG )i@e0E ali&$0le3t> <. I$/!io do) Ma-!ado-e)> <(l> <li>Item 8 <li>Item : <li>Item ; </(l> <. >im do) Ma-!ado-e)> </body> </html> -im da Li8!a2em 9.N Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loL./!ml. 0e-a a .i! ra /$K

-i2 ra 9.O

/H

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

IM"ORT#NT $

'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; UolV

U lV

O +U$ -#> Marca o in+cio e o .im de ma lista ordenada$ Rece#em na "rimeira lin3a m nAmero o letra$ Devem ser sados com ta! U<IV #!rib !o8 %!ar! \ es"eci.ica o nAmero a "artir do ( al os itens come%am a ser contados$ E;7 Uol start\RV TP?e \ modi.ica o ti"o do n merador ( e "ode ser7 nAmero* letras o al!arismo romano$ E;7 Uol t:"e\AV Uol t:"e\IV Marca o in+cio e o .im de ma lista n2o ordenada* o se-a* os itens da lista rece#em s+m#olos na "rimeira lin3a$ Devem ser sados com ta! U<IV #!rib !o8 TP?e \ modi.ica o ti"o do marcador =s+m#olo?* ( e "ode ser7 'ircle \ m c+rc lo va&io$ E;7 U l t:"e\circleV Di8c \ m c+rc lo c3eio$ E;7 U l t:"e\discV %C are \ m ( adrado c3eio E;7 U l t:"e\s( areV

Cico con. soN 4 er mais m e;em"lo "ara entender le!alN 0amos nessaG Para entender isto* di!ite a li8!a2em 9.O* e salve como eAem?loN./!ml* Li8!a2em 9.O <html> <head><title>Li)ta)</title> </head> <body> <h;>I)to 9 (ma li)ta&em i$i!ia$do $o $Mme-o ?</h;> <ol )ta-t0?> <li>Item 8 <li>Item : <li>Item ; </ol> <h;>I)to 9 (ma li)ta&em !om let-a)</h;> <ol ty*e0A> <li>Edito-a <li>I-i!a <li>Li,-o) </ol> <h;>I)to 9 (ma li)ta&em em al&a-i)mo -oma$o</h;> <ol ty*e0I> <li>Edito-a <li>I-i!a <li>Li,-o) </ol>

/M

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

<h;>E)ta 9 (ma li)ta&em em al&a-i)mo -oma$o a *a-tido $Mme-o ;</h;> <ol ty*e0I )ta-t0;> <li>Edito-a <li>I-i!a <li>Li,-o) </ol> </body> </html> -im da Li8!a2em 9.O Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loN./!ml. 0e-a a .i! ra /$F -i2 ra 9.Q

0amos terminar esta li%2o com mais m e;em"loN Desta ve&* .aremos ma lista!em com s #n+veis$ Para entender isto* di!ite a li8!a2em 9.Q* e salve como eAem?loO./!ml

Li8!a2em 9.Q
/J

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

<html> <head><title>Li)ta)</title> </head> <body> <h;>Li)ta&em e #(bLi)ta&em</h;> <ol><. I$/!io do N(me-ado-> <li>Item 8 <(l><. I$/!io do Ma-!ado- de$t-o do N(me-ado-> <li ty*e0di)!>Item 8D8 <li ty*e0di)!>Item 8D: <li ty*e0di)!>Item 8D; </(l><. >im do Ma-!ado- de$t-o do N(me-ado-> <li> Item : <(l><. I$/!io do Ma-!ado- de$t-o do N(me-ado-> <li ty*e0)'(a-e>Item :D8 <(l><.I$/!io do Ma-!ado- de$t-o do Ma-!ado-> <li ty*e0!i-!le>Item :D8D8 <li ty*e0!i-!le>Item :D8D: <li ty*e0!i-!le>Item :D8D; </(l><.>im do Ma-!ado- de$t-o do Ma-!ado-> <li ty*e0!i-!le>Item :D: <li ty*e0di)!>Item :D; </(l><. >im do Ma-!ado- de$t-o do N(me-ado-> <li> Item ; </ol><. >im do N(me-ado-> </body> </html> -im da Li8!a2em 9.Q 6.aG Terminamos mais ma eta"aG Esse c5di!o .oi !rande* mas vale G Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lO./!ml. 0e-a a .i! ra /$E

-i2 ra 9.R

/K

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

$AercKcio N ) D$-ININDO O 'OR"O D# ",;IN#

0oc) teve Ter o#servado em al! mas sites* ( e as cores de . ndo da "!ina s2o #em diversi.icados* o em o tros casos* ma ima!em ' adicionado no . ndo da "!ina* como ma marca d_! a$ Ent2o* todas estas de.ini%1es s2o .eitas dentro do ta! UBOD`V$ 0amos "raticarN Para entender isto* di!ite a li8!a2em 9.R* e salve como eAem?loQ./!ml* Li8!a2em 9.R <html> <head><title>P4&i$a !om >($do Colo-ido</title> </head> <body b&!olo-0bei&e teCt0bl(e> <h;>De3i$3o !o- de 3($do *a-a a *4&i$a</h;> </body> </html> -im da Li8!a2em 9.R Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loQ./!ml. O res ltado* ser ma "!ina como . ndo de cor #e!e e o te;to na cor a& l$ CertoN$ 0e-a .i! ra /$/I

-i2 ra 9.97 Ob8erDaH:oB 0oc) "oder adicionar a cor ( e dese-ar* tanto "ara o . ndo ( anto "ara o te;to$ Os dois s5 n2o "odem ser da mesma corG=risos?$ Para escol3er a cor* cons lte na Ta#elade Cores (0i2 ra 9.N)

/F

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

Como comentei lin3as acima* voc) tam#'m "ode colocar m ima!em no . ndo da "!ina$ Mas* antes de .a&er o e;erc+cio* o#serve as se! intes recomenda%1es7 As ima!ens s "ortadas s2o do ti"o GIC e ]PG$ Na dAvida so#re ima!ens aconsel3o* cons ltar m livro de P3otoS3o" M$I o o tra vers2o$ As ima!ens devem estar na mesma "asta* onde estar o doc mento ,TM<* o n ma s #"asta$ E;em"lo7 Ima!ine ( e voc) tem ma "asta c3amada ?roFe!o e nessa "asta voc) arma&ena todos os doc mentos ,TM< re.erente a "!ina ( e "or 3ora desenvolve$ Certo at' a+N Ent2o* #asta ( e os ar( ivos de ima!ens* tam#'m .i( em na mesma "asta "ro-eto* assim n2o ter "ro#lema na 3ora de vis ali&ar no BroDser$ O tro e;em"lo ( e "osso citar ' o se! inte$ Ima!ine a!ora o tra sit a%2o7 0oc) a!ora resolve or!ani&ar ainda mais o desenvolvimento de s a "!ina$ Crio ma "asta ?roFe!o e dentro arma&eno todos os ar( ivos ,TM<$ CertoN De"ois resolve criar ma s #"asta dentro da "asta ?roFe!o c3amada ima2en8. M ito #em !arotoG E;celente atit de e nela voc) coloco todas as ima!ens$ Ent2o* t do est correto* mas n2o es( e%a de na 3ora de es"eci.icar a ima!em ( e dese-a inserir no . ndo dentro do ta! UBOD`V* o camin3o* o se-a* o nome da s #"asta$ Entende N N2o se "reoc "e voc) .ar e;em"lo "ara as d as sit a%1es* e "rometoG M ito #em* caro De# desi!ner* entendido t do isso* vamos "raticar$ Para entender isto* di!ite a li8!a2em 9.97* e salve como eAem?loR./!ml* Li8!a2em 9.97 <html> <head><title>I$)e-i$do Ima&em $o >($do da P4&i$a</title> </head> <body ba!5&-o($d0*a-edeD&i3 b&*-o*e-tie)03iCed> <h8 ali&$0!e$te->Edito-a I-i!a</h8> <3o$t )i@e0? 3a!e0,e-da$a> <(l> <li>Li,-o) <li>Di!a) <li> olte #em*-e </(l> </3o$t> </body> </html> -im da Li8!a2em 9.97 Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?loR./!ml. 0e-a .i! ra /$//

/E

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

-i2 ra 9.99 Ob8erDaH:oB Caso a ima!em estivesse em ma s #"asta #astaria a"ontar o camin3o "ara ela no ta!$ 0e-a o e;em"lo7 E;em"lo7 <body ba!5&-o($d=/imagens/parede.gif b&*-o*e-tie)03iCed> Onde7 ima!ens\ ' o nome da s #"asta "arede$!i. \ o nome do ar( ivo$ 'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; U#od:V
IM"ORT#NT $

O +U$ -#> Marca o in+cio e o .im do cor"o da "!ina Atri# tos (2color \ de.ine a cor do . ndo da "!ina TeA! \ de.ine a cor do te;to "adr2o da "!ina (acS2ro nd \ "ermite inserir ma ima!em como . ndo da "!ina (2?ro?er!ie8 \ .i;a a ima!em no . ndo da "!ina ( ando a "!ina ' rolada* criando m e.eito de marca d_! a$

$AercKcio O ) IM#;$N%
M ito #em* voc) est evol indo a cada e;erc+cio$ Neste e;em"lo e;ercitaremos os ta!s ( e "ermitem a inser%2o de ima!ens em s a 3ome "a!e$ Antes de iniciar o est do so#re ima!ens* ( ero lem#rarBl3e ( e ma ima!em s5 "oder ser e;i#ida no #roDser* se ela estiver na mesma "asta* o ent2o* voc) dever a"ontar o camin3o onde est* con.orme o e;em"lo de nAmero J$ <em#raN O tro .ato ' ( e* voc) "oder escol3er as ima!ens ( e dese-ar* #asta s #stit ir o nome da ima!em ( e est no e;em"lo "ela a ( e voc) escol3e $ T do certin3o a!oraN 0amos em .renteG
LI

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

Para entender isto* di!ite a li8!a2em 9.99* e salve como eAem?lo97./!ml* Li8!a2em 9.99 <html> <head><title>Ima&e$)</title> </head> <body> <h8>A&o-a e)tamo) t-abalha$do !om ima&e$)</h8> <h;> E)ta 9 )(a *-imei-a ima&emD #o--iaL</h;> <im& )-!03i&DB*& ali&$0le3t> eBa )e !o$)e&(e e$Ce-&a-7 a) )e&(i$te) ima&e$)L<b-> O -o)to de (m ,elho<b-> Uma mo+a<b-> Um !a!ho--o<b-> Um o(t-o ,elho<b-> Um *4))a-o<b-> E al&o mai)<b-> </body> </html> -im da Li8!a2em 9.99 Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo97./!ml. 0e-a .i! ra /$/L

-i2 ra 9.9E

L/

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

9 isso a+* n2o se "reoc "e se voc) n2o conse! i en;er!ar todas as ima!ens* o mais im"ortante "ara mim ' ( e voc) ten3a entendido a a la$ =risosGGG? 0amos "ara m e;em"loN Desta ve&* tra#al3aremos com o alin3amento da ima!em e do te;to$ Para entender isto* di!ite a li8!a2em 9.9E* e salve como eAem?lo99./!ml Li8!a2em 9.9E <html> <head><title>Ima&e$)</title> </head> <body> Note $e)te eCem*lo '(e a ima&em <im& )-!03i&:DB*&> e)t4 e$t-e o teCto<b-> <im& )-!03i&:DB*& ali&$0to*>Ima&em e)'(e-da e o teCto $o to*o<b-> <im& )-!03i&:DB*& ali&$0middle>Ima&em e)'(e-da e o teCto $o !e$t-o<b-> e)t4 e)t4 N N

<im& )-!03i&:DB*& ali&$0le3t>Ne)te eCem*lo a ima&em 3i!o( ali$hada O e)'(e-da7 *e-miti$do '(e o teCto 3i!a))e todo N di-eita ao -edo- da ima&emD Utili@e e)te -e!(-)o toda ,e@ '(e de)eBa- '(e o teCto 3i'(e ao lado da ima&em <b-> </body> </html> -im da Li8!a2em 9.9E Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo99./!ml. 0e-a .i! ra /$/R

-i2 ra 9.9I

LL

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; Uim!V

IM"ORT#NT $

O +U$ -#> Insere ma ima!em #!rib !o8 8rc indica o nome da ima!em a ser carre!ado$ ali2nTmiddle centrali&a o #ase do te;to com o centro da ima!em ali2nTle0! .a& a ima!em .l t ar a es( erda en( anto o te;to circ nda ima!em O direita$ ali2nT!o? alin3a o te;to no to"o ali2nTri2/! .a& a ima!em .l t ar a direita en( anto o te;to circ nda ima!em O es( erda$ al!TUnU indica o te;to "ara ser e;i#ido ( ando o nave!ador n2o e;i#e a ima!em$ Sendo ( e n ' o t+t lo ( e identi.i( e a ima!em$ E;em"lo7 <img src=fig.jp alt=Esta uma imagem legal>

$AercKcio Q ) T#($L#%
Nesta eta"a con3eceremos os ta!s res"onsveis "ela constr %2o de ta#elas$ Na "arte II deste est do atrav's do Cront Pa!e E;"ress* tili&aremos a ta#ela como rec rso "ara a de.ini%2o dos la:o ts de nossas "!inas$ Por 3ora* vamos aos "rinci"ais ta!s$ T do BemN Como sem"re* di!ite a li8!a2em 9.9I* e salve como eAem?lo9E./!ml Li8!a2em 9.9I <html> <head><title>Mo$ta$do Tabela)</title> </head> <body> <table bo-de-0:> <. A'(i !ome+a a Tabela> <t-><. A'(i Come+a (ma li$ha> <td>C9l(la8</td> <td>C9l(la:</td> <td>C9l(la;</td> </t-><. A'(i te-mi$a (ma li$ha> <t-><. A'(i Come+a o(t-a li$ha> <td>>-a)e 8</td> <td>>-a)e :</td> <td>>-a)e ;</td> </t-><. >im da o(t-a li$ha> </table><. >im da Tabela> </body> </html> Li8!a2em 9.9I Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo9E./!ml. 0e-a .i! ra /$/H
LR

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

-i2 ra 9.9I 0oc) "ode tam#'m controlar as dimens1es de s a ta#ela$ 0amos "ara mais ma lista!emN Como sem"re* di!ite a li8!a2em 9.96* e salve como eAem?lo9I./!ml Li8!a2em 9.96 <html> <head><title>Mo$ta$do Tabela)</title> </head> <body> <table bo-de-08 6idth0?FF hei&ht0EF !ell*addi$&0E !ell)*a!i$&0E> <t-> <td>Item 8</td> <td>Item :</td> <td>Item ;</td> </t-> <t-> <td>Item ?</td> <td>Item E</td> <td>Item J</td> </t-> </table> </body> </html> -im da Li8!a2em 9.96 Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo9I./!ml. 0e-a .i! ra /$/M

LH

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

-i2 ra 9.9L #lin/amen!o8 Os elementos dentro da ta#ela tam#'m "odem ser alin3ados da mesma ( e m "ar!ra.o$ 0e-a mais m e;em"lo atrav's da lista!em 9.9L Li8!a2em 9.9L <html> <head><title>Mo$ta$do Tabela)</title> </head> <body> <table bo-de-08 6idth0?FF hei&ht08:F !ell*addi$&0E !ell)*a!i$&0E> <t-> <td ali&$0!e$te->No Ce$t-o</td> <td ali&$0-i&ht>Pa-a Di-eita</td> <td ali&$0le3t>Pa-a a E)'(e-da</td> </t-> <t-> <td ,ali&$0bottom>Em baiCo</td> <td ,ali&$0to*>No To*o</td> <td ,ali&$0middle>Ce$t-o $a e-ti!al</td> </t-> </table> </body> </html> -im da Li8!a2em 9.9L Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo96./!ml. 0e-a .i! ra /$/J

LM

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

-i2 ra 9.9N 'or de - ndo 0oc) "ode ainda adicionar cores no . ndo da ta#ela o a"enas de ma c'l la ( e dese-a$ <em#ra do atri# to b2color* ent2o ' com este mesmo ( e voc) "ode adicionar m cor "adr2o "ara ta#ela o "ara a c'l la$ 0e-a o e;em"lo7 V!able b2colorTbl e< O res ltado seria assim7 Toda Ta#ela teria m "reenc3imento a& l

0e-a mais este e;em"lo7 V!able< V!r< V!d b2colorTbei2e<(e2eVW!d< V!d b2colorTred< .ermel/oV!d< O res ltado seria assim7 As c'l las teriam cores di.erentes

LJ

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

'ON'$ITO DO% T#;% U%#DO% N$%T$ $4$R'='IO T#; Uta#leV

IM"ORT#NT $

UtrV UtdV #order\TnT ali!n\le.t ali!n\ri!3t ali!n\center vali!n\to" vali!n\#ottom vali!n\middle

O +U$ -#> Marca o in+cio e o .im de ma ta#ela #!rib !o8 Wid!/ de.ine a lar! ra da ta#ela o da c'l la Hei2/! de.ine a alt ra da ta#ela o da c'l la 'ell?addin2 de.ine a mar!em dentro das c'l las 'ell8?acin2 de.ine o es"a%o entre as c'l las (2color de.ine a cor de . ndo da ta#ela o da c'l la Marca o in+cio e o .im de ma lin3a Marca o in+cio e o .im de ma c'l la Coloca ma #orda na ta#ela* onde n ' o valor em "i;els da #orda Alin3a o conteAdo da c'l la a es( erda na 3ori&ontal Alin3a o conteAdo da c'l la a direita na 3ori&ontal Alin3a o conteAdo da c'l la ao centro na 3ori&ontal Alin3a o conteAdo da c'l la no to"o =vertical? Alin3a o conteAdo da c'l la na #ase da c'l la =vertical? Alin3a o conteAdo da c'l la no centro na vertica

Ob8erDaH:oB O atri# to de alin3amento A<IGN* .a& o alin3amento na 3ori&ontal$ O atri# to de alin3amento 0A<IGN* .a& o alin3amento na vertical$ E assim me caro leitor* concl +mos mais ma eta"a de nosso c rso$ Es"ero ( e te ! ia este-a sendo realmente m .arol em se a"rendi&ado$

$AercKcio R ) LINX%
Como .alei no in+cio* estamos "rod &indo "!inas de 3i"erte;tos* o se-a* te;tos ( e "odem .a&er li!a%1es com o tros te;tos* li!ando "!inas entre si e a WEB$ Ent2o* este "ontos n5s c3amamos de lin>s o 3:"erlin>s* @ncoras de 3i"erte;to* todos com a mesma . n%2o* de atrav's de m Anico cli( e so#re a .rase o ima!em cond &ir a al! m l !ar no site o na WEB$ O Ta! res"onsvel ' o UAV* onde dentro deste* atrav's de m atri# to coloco a re.er)ncia* o se-a* A 6R< =Uni0orm Re8o rce Loca!or). Para criar m lin> samos a se! inte sinta;e7 SINTAQE7 UA ,REC\T6R<TVCrase ( e a"arece na "!inaUPaV Onde7 UaV ta! ( e marca o in+cio e o .im do lin> 3re.\ atri# to ( e es"eci.ica o nome da re.er)ncia S6R<T ' o nome do local "ara onde dese-ar lin>ar =ir? Nada de com"lica%2o* ( e tal m e;erc+cio "ara entendermos le!al t do issoN 0amos nessaG Como sem"re* di!ite a li8!a2em 9.9N* e salve como eAem?lo9L./!ml

LK

WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio

Li8!a2em 9.9N <html> <head><title>E)t(da$do Li$5)</title> </head> <body> <h:>ECem*lo de Li$5) I$te-$o)</h:> <h;>#e+Po de ECem*lo)</h;> <a h-e30eCem*lo8Dhtml>ECem*lo8</a> <a h-e30eCem*lo:Dhtml>ECem*lo:</a> <h-> <h:>ECem*lo de Li$5) ECte-$o)</h:> <a h-e30htt*Q//666De-i!aD!omDb->Co$he+a a Edito-a I-i!a</a><b-> <a h-e30htt*Q//666Da**leD!om>A**le Com*(te-</a> <h;> o!" *ode ()aima&e$) *a-a ()a$o) li$5)</h;> <a h-e30eCem*lo8FDhtml><im& )-!0bolaD&i3> </a>Ima&e$) </body> </html> -im da Li8!a2em 9.9N Para ver o res ltado deste e;em"lo a#ra o Internet E;"lorer* e na #arra de endere%o di!ite 'BJMe 8 doc men!o8JeAem?lo9L./!ml. 0e-a .i! ra /$/K -i2 ra 9.9O

S2o a( eles v2o "ara al! ma o tra "!ina dentro do mesmo site

S2o a( eles v2o "ara o tro siteG

LF