Tutorial de HTML

Tutorial:

O que HTML? Aprendendo Ttulos Textos Imagens Links Imagens Clic !eis "xplorando o TA# $O%& M'sica de (undo #i)s Animados Ta*elas Testando sua + gina

O que HTML?
HTML uma linguagem essencial na criao de sites. Existem linguagens mais modernas como o Java e o HTML Dinmico, mas so muito complicadas e preciso muito mais tempo para a!"#las manualmente. $ HTML um ar%uivo de texto. &ara a!er um, 'asta voc" pegar um programa de edio de Homepages ou a'rir um 'loco de notas no seu (indo)s. * necess+rio %ue voc" salve o texto com o inal ,.htm- em uma &asta ,ou diret.rio- criada para salvar sua /omepage ,Ex.0 c01/omepage- . 2'ra um 'loco de notas, e se orientando 3 partir desse texto, v+ criando aos pucos sua /omepage.

Aprendendo
Passo 1 # 2'ra um 4loco de 5otas Passo 2 # 6opie o texto a'aixo e cole no 4loco0 78D$6T9&E HTML &u'lic :#;;<ET=;;DTD HTML;;E5: ##> 7HE2D> 7T<TLE> 7;T<TLE> 74$D9> 7;HE2D> 7HTML> 7;4$D9> 7;HTML> Passo 3 # 2gora salve o seu ar%uivo como index.htm. Lem're#se de salvar todos os ar%uivos escrevendo seu nome usando apenas letras min?sculas. <sso

serve para imagens e para ar%uivos HTML. 2 primeira p+gina da sua Homepage tem %ue se c/amar index./tm J+ deu pra perce'er, %ue todos comandos %ue voc" colou no 4loco de 5otas comeam ,Ex.0 7T<TLE>- e terminam ,Ex.0 7;T<TLE>. Esses comandos so c/amados de T2@s. Entre esses T2@s devem ser colocados alguma coisa. Entre os T2@s T<TLE, voc" deve colocar o tAtulo da sua Homepage ,Ex.0 7T<TLE> D=ranBCs Homepage 7;T<TLE> -. 2gora %ue voc" D+ sa'e, vai l+ no 4loco de 5otas e coloca um tAtulo na sua p+gina. Esse tAtulo vai aparecer l+ na 'arra mais alta do Explorer. Passo 4 # 2gora vamos de inir a cor ou a imagem do undo da sua /omepage. Dentro do T2@ 4$D9 colo%ue o seguinte0 4@6$L$EF:9ELL$(: ,Ex.0 74$D9 4@6$L$EF:9ELL$(:> -. Goc" pode mudar para a cor %ue voc" %uiser escrevendo no lugar do 9ELL$(, o nome da cor %ue voc" %uiser, mas sempre em ingl"s. &ara colocar uma imagem ao invs de uma cor, ao invs de 4@6$L$EF:9ELL$(: colo%ue 426B@E$H5DF:imagem.gi : ,Ex.0 74$D9 426B@E$H5DF:imagem.gi :> -. 2 imagem pode ser gi) ou ,pg, por %ue carregam mais r+pido. * necess+rio %ue voc" copie a imagem %ue voc" %uer usar, para a pasta ,c01/omepage- onde est+ o ar%uivo index./tm. 2 imagem pode ter %ual%uer nome. 2gora voc" vai comear a montar a sua Homepage. &rimeiro voc" tem %ue a!"#la no seu computador, e s. depois de tudo pronto %ue voc" exporta para internet.

Ttulos
Passo 1 # Ialve mais uma ve! a sua p+gina. Passo 2 &ara criar tAtulos voc" pode usar T2@s como HJ a HK, dependendo do taman/o %ue voc" %uiser HJ o %ue deixa o tAtulo maior e HK o %ue deixa menor. G+ no 4loco de 5otas e escreva a'aixo do >4$D9 4@6$L$E7 ou do >4$D9 426B@E$H5D7 ,Dependendo de %ual deles voc" escol/eu a!er- e escreva 7HJ>5ome da Homepage 7;HJ>. &ara %ue o tAtulo da sua /omepage i%ue no centro da p+gina, voc" precisa coloc+#lo entre os tags 76E5TEE> 7;6E5TEE> &ara <ncrementar mais seu tAtulo voc" pode usar os seguintes T2@s0 76E5TEE>7;6E5TEE> # 6oloca o texto ou o tAtulo no centro 7H>7;H> # Iu'lin/a o texto ou o tAtulo 74>7;4> # Deixa o texto ou o TAtulo em -egrito 74L<5B>7;4L<5B> # =a! o TAtulo icar piscando ,I. unciona no 5etscape7<>7;<> # Deixa o texto ou o TAtulo em itlico 7& 2L<@5F:E<@HT:>7;&> # 2lin/a o texto 3 direita 7M2ELHEE>7;M2ELHEE> # =a! o tAtulo icar correndo da direita para es%uerda ,I. unciona no Explorer74E> # Muda de lin/a. * como se osse o E5TEE %uando se escreve no ($ED Vamos ver como que est ficando a sua Homepage?. 2'ra um Explorer ,Eecomendado- ou um 5etscape e escreva na 'arra de endereos0 601/omepage1index./tm . Ie tudo deu certo, na 'arra superior do seu 4ro)ser vai estar escrito o nome da sua Homepage, $ undo vai estar da cor %ue voc" colocou, ou com a imagem %ue voc" escol/eu.

Textos
$s textos devem ser inserido a'aixo do tAtulo. 5o preciso colocar T2@s entre o texto. 4asta escrev"#los. Goc" pode incrementar o seu texto usando as opMes listadas acima. Goc" tam'm pode mudar o taman/o e a onte da letra0 Ex.0 7=$5T I<NEF:O: =26EF:2rial:> 7=$5T I<NEF:K: =26EF:Times 5e) Eoman> Goc" pode mudar a cor do seu texto, mais tome cuidado para no deix+#lo ilegAvel. &ara isso voc" precisa usar os seguintes T2@s0 7=$5T 6$L$EF:6$E:>TEPT$ 6$L$E<D$7;=$5T>. 5o se es%uea %ue no lugar de 6$E, deve#se escrever o nome da cor em ingl"s, ou ento o c.digo dela. Ex.0 7=$5T 6$L$EF:QRSSSSS:> 2'aixo est+ uma ta'ela com o c.digo das principais cores0

Cdigo
./00000 .00/000 ./0/000 .0000/0 .c0c0c0 .c0dcc0 .a4ca)0 ./0/0/0 .))0000 .0000)) .))))00 .)))))) .000000

Cor
1ermel2o "scuro 1erde "scuro Amarelo "scuro A3ul "scuro 1erde Claro 1erde #arra)a A3ul Claro Cin3a "scuro 1ermel2o A3ul Amarelo $ranco +reto

Imagens
&odemos inserir imagens em um documento HTML. $s ormatos mais usados so @<= e J&@. &ara inserir uma imagem, use o T2@ 7<M@ IE6> sem T2@ de inali!ao "5: 7 <M@ IE6F:imagem.gi :>. LEM4EE#IE0 2 imagem deve estar na mesma pasta do ar%uivo index./tm Ialve novamente seu texto no 4loco de 5otas

Links
LinTs so a%uelas rases ou palavras, %ue %uando voc" clica , te levam para outra p+gina. Gamos supor %ue voc" %ueira colocar um linT na sua p+gina incial ,index./tm-, para uma p+gina so're a cidade %ue voc" mora, %ue voc" vai a!er. "scre!a: 72 HEE=F:cidade./tm:>Gisite a min/a p+gina so're a cidade %ue eu moro 7;a> . Gai icar assim0 Gisite a min/a p+gina so're a cidade %ue eu moro ,5o 6li%ueEnto voc" deve a'rir outro 4loco de 5otas do (indo)s e a!er outra p+gina alando da cidade %ue voc" mora ,ou do %ue pre erirGoc" pode a!er um linT para a p+gina de um amigo seu, ou uma p+gina %ue voc" gostou0 7 2 HEE=F:/ttp0;;))).endereco.com.'r ;amigo:>

ou 7 2 HEE=F:/ttp0;;))).cade.com.'r:>

Imagens Clic !eis

6rie um ar%uivo de imagem ,@<= ou J&@- ou copie alguma imagem para a pasta ,c01/omepageonde est+ o ar%uivo index./tm . 6olo%ue o comando 72 HEE=F:enderecoUdaUpagina./tm:>7<M@ IE6F:imagem.gi : 4$EDEEF:S:>7;2>. Goc" pode modi icar o valor de 4$EDEE de inindo a largura da 'orda da imagem.

"xplorando mais o TA# $O%&

* no T2@ 4$D9 %ue se de ine a cor sou imagem de undo, como D+ oi parcialmente explicado. * tam'm no 4$D9 %ue de inimos a cor dos linTs antes e depois de serem clicados, e tam'm a cor inicial do texto Todo texto %ue no estiver entre o T2@ 7=$5T 6$L$EF:6$E:>7;=$5T> ica da cor inicial. &ara mudar a cor de undo, como D+ oi explicado, voc" precisa escrever dentro do Tag 4$D9 4@6$L$EF:6$E: . Essa cor pode ser escrita em ingl"s ou podemos colocar no lugar da palavra 6$E, o c.digo da cor, %ue est+ na ta'ela acima. &ara Mudar as cores dos LinTs escreva dentro do T2@ 4$D90 L<5BF:6$E: # 6or dos LinTs GL<5BF:6$E: # 6or dos LinTs D+ Gisitados 2L<5BF:6$E: # 6or dos linTs 2tivos # $ linT ica ativo %uando voc" clica nele. ,2t %ue ele ica contornado por um pontil/adin/o-

M'sica de (undo
Existem v+rias maneiras de colocar m?sica em sua p+gina. Hma das mais simples dela com o Microso)t Internet "xplorer a partir de sua veso V.S &ara tocar m?sica em sua Home &age, inclua o T2@. 74@ I$H5DF:ar%uivo.mid: L$$&F<5=<5<TE> ao invs de ar%uivo.mid, voc" pode colocar tam'm ar%uivo.)av. E ao invs de L$$&F<5=<5<TE voc" pode colocar L$$&F,%uantidade de ve!es %ue voc" %uer %ue a m?sica to%ue ou %ue o som se repita-. Lem're#se de %ue o ar%uivo M<D< ou (2GE deve estar no diret.rio ,601/omepage&elo -etscape -a!igator , o comando outro0 7EM4ED IE6F:ar%uivo.mid 2HT$IT2ETF:true: G$LHMEF:JSS: (<DTHF:S: HE<@HTF:S: 6$5TE$LIF:none> L"M$6"78": $s ar%uivos M<D so 'em menores %ue os ar%uivos (2G %ICA: <nclua esses dois comandos na sua Home &age, pois assim, %uem usa um desses dois 4ro)ser , a imensa maioria -, ir+ escutar a m?sica, en%uanto se voc" colocar apenas o da Microso t,

apenas os %uem usam o Explorer iro escutar ou vice#versa. Ie voc" colocar esses comandos na primeira p+gina, todos %ue entrarem na sua Home &age ouviro automaticamente a m?sica.

#i)s Animados
@i s 2nimados so imagens em ormato @<= %ue a!em animaMes. Goc" mesmo pode a!er os seus usando o programa Microso)t #I( Animator , a!endo um Do)nload dosite da Microso t . Goc" vai ter %ue se virar pra a!er um @<= 2nimado. $ mais +cil sair pela internet procurando @<=s 2nimados. J+ %ue voc" est+ navegando nesse momento pela D=ranB, 'asta a'rir outro explorer, entrar na D=ranB e visitar a sesso @<=s 2nim. Ialve todos @<=s %ue interessarem ,clicar com o 'oto direito do mouse no @<= e escol/er salvar igura como...- na pasta ,601/omepageIe voc" %uiser, pode a!er linTs com esses @<=s, do mesmo geito %ue se a! com as imagens comuns.

Ta*elas
2s ta'elas so muito ?teis e muito usadas em todas as p+ginas. Elas so um pouco complicadas de se entender mas vamos te passar uma noo '+sica. $s 6omandos 4+sicos so0 WltT24LE>7;T24LE>0&ara iniciar e terminar uma ta'lela WltTE>7;TE>0 &ara iniciar e terminar uma lin/a 7TD>7;TD>0 &ara iniciar e terminar clula Ex.0 7T24LE 4$EDEEF:J:> 7TE> 7TD>6el. J Lin/a J7;TD> 7TD>6el. V Lin/a J7;TD> 7;TE> 7TE> 7TD>6ol. J Lin/a V7;TD> 7TD>6ol. V Lin/a V7;TD> 7;TE> 7;T24LE> Gai icar assim0
6el. J Lin/a J 6el. J Lin/a V 6el. V Lin/a J 6el. V Lin/a V

Goc" pode alterar a 'orda e a cor da ta'ela0 5o T2@ 7T24LE> voc" pode mudar o taman/o da 'orda da ta'ela inserindo a opo 4$EDEEF:P:. P o taman/o %ue voc" %uiser para a 'ordada ta'ela. Ex.0 7T24LE 4$EDEEF:V:>. $ taman/o varia de S a XX.

5o T2@ 7TD> voc" pode alterar a cor da clula inserindo a opo 4@6$L$EF:P:. P o c.digo da cor %ue voc" %uiser. Ex.0 7 7TD 4@6$L$EF:QSSSSRS:> Goc" pode mudar a imagem de undo da cluca com a opo 426B@E$H5DF:P:. P o endereo da imagem de undo %ue voc" %uer colocar. Ex.0 7TD 426B@E$H5DF:/ttp0;;))).d ranTsite.com;imagens;textura'.gi :>

Testando sua + gina

G+ at o Explorer ou o 5etscape e digite na 'arra de endereos0 ,c01/omepage1index./tm-. Teste cada linT da p+gina veri i%ue se cada imagem est+ aparecendo direito, e se os textos esto do Deito %ue voc" %uer. 6on ira se o c.digo da sua p+gina est+ mais ou menos assim. Ie estiver tudo $B voc" poder+ exportar sua p+gina para a <nternet. Lem're#se de %ue voc" D+ deve ter eito a inscrio de uma p+gina em um dos Iites de Hospedagens listados na sesso @r+tis;Hospedagem. Goc" tem %ue estar com o c.digo %ue l/e oi ornecido pelo Iite de Hospedagem e o L$@$5 ou 5ome da &+gina .

TA#s

76E5TEE>7;6E5TEE> # 6oloca o texto ou o tAtulo no centro 7H>7;H> # Iu'lin/a o texto ou o tAtulo 74>7;4> # Deixa o texto ou o TAtulo em -egrito 7<>7;<> # Deixa o texto ou o TAtulo em itlico 74L<5B>7;4L<5B> # =a! o TAtulo icar piscando ,I. unciona no 5etscape7& 2L<@5F:E<@HT:>7;&> # 2lin/a o texto 3 direita 7& 2L<@5F:LE=T:>7;&> # 2lin/a o texto 3 es%uerda 7& 2L<@5F:JHIT<=9:>7;&> # Justi ica o texto 7HE> # 6ria uma lin/a /ori!ontal cortando a tela 74E> # Muda de lin/a 7M2ELHEE>7;M2ELHEE> # =a! o tAtulo icar correndo da direita para es%uerda ,I. unciona no Explorer-