Jair Galvï¿½o

CRIANDO UMA HOME PAGE

Nesta parte do tutorial, iremos seguir os passos da criaï¿½ï¿½o de uma homepage hipotï¿½tica sobre dinosauros (se quiser, escolha outro tema e faï¿½a a sua prï¿½pria pï¿½gina). Dela constarï¿½o os principais elementos e recursos do HTML, de forma que, seguindo os exemplos, vocï¿½ serï¿½ capaz de utilizar os mesmos recursos na criaï¿½ï¿½o da sua homepage pessoal.

Esta parte abrange os seguintes tï¿½picos:

Estrutura bï¿½sica
Tï¿½tulos, parï¿½grafos e separadores
Formataï¿½ï¿½o de blocos
Listas
Formataï¿½ï¿½o de caracteres
Tabelas

Estrutura Bï¿½sica

O primeiro passo ï¿½ a montagem da estrutura da pï¿½gina. No tï¿½pico anterior foi mostrada a estrutura hierï¿½rquica de uma pï¿½gina HTML tï¿½pica. Para nï¿½o precisar digitar os mesmos elementos toda vez que for criar uma nova pï¿½gina, crie um arquivo-base para usar como base para todos os outros documentos. Este arquivo deverï¿½ conter os elementos estruturais HTML. Por exemplo, crie um arquivo template.html com o seguinte conteï¿½do:





     















Hosted by www.Geocities.ws

Se vocï¿½ estï¿½ usando um editor HTML, pode ser que ele jï¿½ faï¿½a isto por vocï¿½. Salve este arquivo como somente-leitura e faï¿½a uma cï¿½pia dele sempre que for criar um novo documento HTML.

[Volta para o inï¿½cio desta pï¿½gina]

Tï¿½tulos, Parï¿½grafos e Separadores

Tï¿½tulo do documento

ï¿½ necessï¿½rio especificar um tï¿½tulo para o documento. Este tï¿½tulo nï¿½o aparecerï¿½ na pï¿½gina, mas em outra ï¿½rea fora da ï¿½rea de visualizaï¿½ï¿½o do documento (geralmente na barra de tï¿½tulo do browser). ï¿½ importante escolher um tï¿½tulo que tenha algum significado quando aparecer isolado em uma lista de bookmarks. Escreva entï¿½o o tï¿½tulo entre </b></a></CODE> e <CODE><b>. Neste exemplo, como nossa pï¿½gina ï¿½ sobre dinossauros, utilizaremos o seguinte tï¿½tulo:

Pï¿½gina dos Dinossauros

Tï¿½tulos e subtï¿½tulos de seï¿½ï¿½o

O tï¿½tulo que adicionamos acima nï¿½o aparece na pï¿½gina, pois nï¿½o estï¿½ definido dentro do bloco

. Para criarmos um tï¿½tulo na ï¿½rea de visualizaï¿½ï¿½o, utilizamos o elemento ... . Para o nosso exemplo:

Dinosaursï¿½ Web

Veja o resultado no browser (para voltar use a opï¿½ï¿½o/botï¿½o [BACK], do seu browser). Observe tambï¿½m onde aparece o tï¿½tulo do documento que foi marcado com </code>.<br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Parï¿½grafos</h3> <p>Todo o texto que adicionarmos na pï¿½gina, deve estar dentro do <b>elemento de parï¿½grafo</b>, definido pelos rï¿½tulos <code><b><a href="http://br.geocities.com/controle.html#P"><b><P></b></a></b></code> e <code><b></P></b></code>. Neste caso, o rï¿½tulo de fechamento ï¿½ opcional e pode ser dispensado. Portanto, devemos iniciar cada novo parï¿½grafo com <code><P></code>. Lembre-se que a formataï¿½ï¿½o do texto no editor <i>nï¿½o afeta</i> o resultado final no visualizador. No nosso exemplo, acrescentaremos as seguintes linhas: <pre><p>Esta ï¿½ a pï¿½gina dos velociraptores, tiranossauros e pterosauros. Aqui vocï¿½ encontra tudo sobre dinossauros... bem, hmmm... na verdade, este ï¿½ sï¿½ um exemplo para vocï¿½ aprender HTML. Se vocï¿½ realmente procura algo sobre dinossauros, sugiro que procure no ï¿½ndice do Yahoo ou faï¿½a uma busca no WebCrawler. <p>Este ï¿½ mais um parï¿½grafo da pï¿½gina sobre dinossauros. Dinossauros eram animais enormes que habitavam a terra hï¿½ milhï¿½es de anos atrï¿½s. A grande maioria deles se alimentavam de plantas e insetos, mas havia tambï¿½m espï¿½cies carnï¿½voras que se alimentavam dos outros.<p>Este terceiro parï¿½grafo, embora nï¿½o aparente ser outro parï¿½grafo no editor de texto, aparece no visualizador como tal.</pre> <p><A HREF="http://br.geocities.com/jgalvaosg/dino2.html"><img src="eye4.gif" align=left> <b>Veja o resultado</b></A>. Observe, que apesar de haver apenas dois parï¿½grafos acima, no browser aparece um terceiro.<br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Quebras de linha</h3> <p>Quando ï¿½ necessï¿½rio <b>quebrar uma linha</b> dentro de um parï¿½grafo, deve-se usar <code><a href="http://br.geocities.com/controle.html#BR"><b><BR></b></a></code>. Este elemento nï¿½o possui rï¿½tulo de fechamento e apenas marca a posiï¿½ï¿½o onde deve ser quebrada uma linha. As <i>trï¿½s</i> linhas do exemplo abaixo sï¿½o quebradas em <i>quatro</i> linhas no mesmo parï¿½grafo: <pre><p>Eu gostaria que este parï¿½grafo tivesse quatro linhas.<br> Esta seria a segunda linha<br> e esta a terceira e <br>esta a quarta.</pre> <p><A HREF="http://br.geocities.com/jgalvaosg/dino3.html"><img src="eye4.gif" align=left> <b>O resultado</b></A> mostra que as linhas forma quebradas no ponto onde colocamos <code><BR></code>, e nï¿½o onde elas quebram no editor de textos.<br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Separadores</h3> <p>O elemento <code><a href="http://br.geocities.com/controle.html#HR"><b><HR></b></a></code> define uma <b>linha horizontal</b>. A maioria dos <i>browsers</i> grï¿½ficos apresentam-na como uma linha sombreada que atravessa toda a largura da tela. No nosso exemplo, utilizaremos <code><HR></code> para separar o tï¿½tulo do corpo do texto e algumas seï¿½ï¿½es que criaremos para o nosso documento. <p>Aproveitamos tambï¿½m para utilizar mais dois <b>nï¿½veis de cabeï¿½alho</b> (<code><a href="http://br.geocities.com/cabeca.html"><H2></a></code> e <code><a href="http://br.geocities.com/cabeca.html"><H3></a></code>), para destacar subseï¿½ï¿½es em nï¿½veis hierï¿½rquicos decrescentes. Acrescentamos entï¿½o, uma linha horizontal apï¿½s o tï¿½tulo: <blockquote><pre><h1>Dinosaursï¿½ Web</h1> <hr></pre></blockquote> <p>e mais quatro linhas, separando trï¿½s subseï¿½ï¿½es do documento: <blockquote><pre><hr> <h2>Perï¿½odos da Era Mesozï¿½ica</h2> <hr> <h2>Lista de Dinossauros</h2> <h3>Tabela de Dinossauros</h3> <h3>Imagens de Dinossauros</h3> <hr> <h2>Outras Fontes de Informaï¿½ï¿½o</h2> <hr> </pre></blockquote> <A HREF="http://br.geocities.com/jgalvaosg/dino4.html"><b><img src="eye4.gif" align=left> Veja o resultado</b></A>. Observe que as linhas automaticamente introduzem uma <b>quebra de linha</b> ao separar os blocos de texto. ï¿½ possï¿½vel controlar a largura, espessura, posiï¿½ï¿½o e sombra da linha utilizando <a href="http://br.geocities.com/controle.html#HR">atributos propostos pelo Netscape</a>. <br clear=all> <p><a href="#top"><img align=middle src="uptotop.gif">[Volta para o inï¿½cio desta pï¿½gina]</a> <center><H2><a name="endenta"></a><hr width=420 size=3>Formataï¿½ï¿½o de Blocos</H2></center> <h3><img src="dot.gif"> Endentaï¿½ï¿½o</h3> <p>O elemento <code><a href="http://br.geocities.com/controle.html#BLOCKQUOTE"><b><BLOCKQUOTE></b></a></code> ï¿½ utilizado para <b>destacar um bloco de texto</b>. Em alguns browsers ele aparece em itï¿½lico, em um parï¿½grafo separado do texto; em outros, como o Netscape, ele aparece endentado. No nosso exemplo, acrescentaremos uma citaï¿½ï¿½o no inï¿½cio da pï¿½gina, marcada com <code><BLOCKQUOTE></code>, da forma abaixo: <pre><blockquote> "Os rï¿½pteis sï¿½o criaturas repugnantes por causa de seu corpo frio, coloraï¿½ï¿½o pï¿½lida, pele asquerosa, cheiro incï¿½modo, esconderijos miserï¿½veis e veneno terrï¿½vel; seu Criador, portanto, nï¿½o exerceu o poder de criar muitos deles." (Linnaeus, 1797)</blockquote></pre> <p><A HREF="http://br.geocities.com/jgalvaosg/dino6.html"><b><img src="eye4.gif" align=left> Veja o resultado</b></A> da marcaï¿½ï¿½o acima. <br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Endereï¿½o</h3> <p>Outro bloco de texto que pode ser definido ï¿½ um <b>bloco de endereï¿½o</b>. <a href="http://br.geocities.com/controle.html#ADDRESS"><code><b><ADDRESS></b></code></a> ... <code><b></ADDRESS></b></code> marcam o inï¿½cio e o fim de tal bloco, que pode ser usado para identificar a autoria do documento, conter endereï¿½os para contato, e-mail e outras informaï¿½ï¿½es sobre o documento. <code><ADDRESS></code> geralmente ï¿½ utilizado no final da pï¿½gina. No exemplo, acrescentamos o seguinte bloco de texto no final do documento: <pre><hr> <address> Para mais informaï¿½ï¿½es entre em contato com dino@raptor.ingen.com.<br> Criado em 31 de fevereiro de 75.340.522 A.C. (Cretï¿½ceo) </address></pre> <p><A HREF="http://br.geocities.com/jgalvaosg/dino6.html#add"><b><img src="eye4.gif" align=left> Veja</b></A> como o seu <i>browser</i> formata o elemento <code>ADDRESS</code> (no final da pï¿½gina).<br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Prï¿½-formatado</h3> <p>Outro elemento ï¿½til para formataï¿½ï¿½o de blocos de texto ï¿½ o <code><a href="http://br.geocities.com/controle.html#PRE"><b><PRE></b></a></code>. Todo o texto rotulado com <code><PRE></code> preserva os espaï¿½os, tabulaï¿½ï¿½es novas-linhas e retornos e ï¿½ formatado na tela com uma fonte fixa, geralmente Courier. ï¿½ extremamente ï¿½til para reproduzir planilhas, listagens de computador e outros dados que nï¿½o suportam fontes proporcionais. No nosso exemplo, decidimos refazer a citaï¿½ï¿½o usando <code><PRE></code>, e fizemos previamente a sua formataï¿½ï¿½o com tabulaï¿½ï¿½es, espaï¿½os e novas-linhas: <pre><pre> "Os rï¿½pteis sï¿½o criaturas repugnantes por causa de seu corpo frio, coloraï¿½ï¿½o pï¿½lida, pele asquerosa, cheiro incï¿½modo, esconderijos miserï¿½veis e veneno terrï¿½vel; seu Criador, portanto, nï¿½o exerceu o poder de criar muitos deles" (Linnaeus, 1797)</pre></pre> <p><A HREF="http://br.geocities.com/jgalvaosg/dino7.html"><img src="eye4.gif" align=left></a> Verifique e compare a formataï¿½ï¿½o do bloco de texto acima com o <A HREF="http://br.geocities.com/jgalvaosg/dino7.html"><b>resultado</b></A>. <br clear=all> <p>Alï¿½m dos trï¿½s elementos de formataï¿½ï¿½o de blocos acima, existe um elemento suportado pelo Netscape (que nï¿½o faz parte da especificaï¿½ï¿½o HTML) e alguns outros <i>browsers</i> que permite que se defina um bloco alinhado em relaï¿½ï¿½o ao centro da pï¿½gina. Veja <code><a href="http://br.geocities.com/controle.html#CENTER"><CENTER></a></code>. <p><a href="#top"><img align=middle src="uptotop.gif">[Volta para o inï¿½cio desta pï¿½gina]</a> <center><H2><a name="listas"></a><hr width=420 size=3>Listas</H2></center> <p>O HTML define vï¿½rias formas de apresentar <a href="http://br.geocities.com/listas.html">listas</a> em um documento. Toda lista possui um rï¿½tulo inicial e final e sï¿½ pode conter rï¿½tulos <code><b><a href="http://br.geocities.com/listas.html#LI"><LI></a></b></code>, que por sua vez podem conter texto, parï¿½grafos ou outras listas. Isto ï¿½ mais facilmente explicado atravï¿½s de exemplos, que veremos a seguir. <h3><hr width=300 align=left><img src="dot.gif"> Nï¿½o-ordenadas</h3> <p>As listas <b>nï¿½o-ordenadas</b> sï¿½o marcadas pelos rï¿½tulos <code><b><a href="http://br.geocities.com/listas.html#UL"><UL></a></b></code> e <code><b></UL></b></code>. Cada ï¿½tem ï¿½ contido dentro de <code><LI></code>, que nï¿½o necessita de rï¿½tulo de fechamento (qualquer novo <code><LI></code> ou o rï¿½tulo <code></UL></code> automaticamente fecham o item <code><LI></code>). No nosso exemplo, utilizaremos o rï¿½tulo <code></UL></code> para fazer um pequeno sumï¿½rio dos ï¿½tens constantes da nossa pï¿½gina: <blockquote><pre><hr> <h2>Sumï¿½rio</h2> <ul> <li>Perï¿½odos da Era Mesozï¿½ica <li>Lista de Dinossauros <ul> <li>Tabela <li>Imagens </ul> <li>Endereï¿½o para contato </ul></pre></blockquote> <p>Observe que, <b>dentro do segundo item</b> da lista acima, alï¿½m do texto <code>"Lista de dinossauros"</code>, <b>hï¿½ uma outra lista</b> de nï¿½vel hierï¿½rquico inferior, com mais dois itens. O <i>browser</i> formatarï¿½ a sub-lista de uma forma diferente (geralmente endentada e com um marcador diferente). <p><a href="http://br.geocities.com/jgalvaosg/dino8.html"><img src="eye4.gif" align=left> <b>Veja o resultado</b></a>.<br clear=all> <h3><hr width=300 align=left><img src="dot.gif"> Ordenadas</h3> <p>As listas <b>ordenadas</b> sï¿½o marcadas pelos rï¿½tulos <code><b><a href="http://br.geocities.com/listas.html#OL"><OL></a></b></code> e <code><b></OL></b></code>. Da mesma forma que nas listas nï¿½o-ordenadas, cada ï¿½tem ï¿½ contido dentro de <code><LI></code>, cujo fechamento ï¿½ determinado pela prï¿½xima ocorrï¿½ncia de <code><LI></code> ou pelo rï¿½tulo de fechamento <code></OL></code>. No exemplo, usamos <code><OL></code> para relacionar os trï¿½s perï¿½odos da Era Mesozoica: <blockquote><pre><ol> <li>Triï¿½ssico: de 250 a 208 milhï¿½es de anos atrï¿½s. <li>Jurï¿½ssico: de 208 a 144 milhï¿½es de anos atrï¿½s <li>Cretï¿½ceo: de 144 a 66 milhï¿½es de anos atrï¿½s </ol></pre></blockquote> <p><A HREF="http://br.geocities.com/jgalvaosg/dino8.html"><img src="eye4.gif" align=left> <b>Confira o resultado</b></A> e compare com as listagens acima. As <a href="http://br.geocities.com/listas.html">extensï¿½es do Netscape</a> permitem usar numeraï¿½ï¿½o romana e letras nas listas ordenadas, e marcadores diferentes, nas listas nï¿½o-ordenadas. Veja tambï¿½m as <a href="http://br.geocities.com/listas.html#DL">listas de definiï¿½ï¿½es</a> (<code><DL></code>).<br clear=all> <p><a href="#top"><img align=middle src="uptotop.gif">[Volta para o inï¿½cio desta pï¿½gina]</a> <center><H2><a name="caracter"></a><hr width=420 size=3>Formataï¿½ï¿½o de Caracteres</H2></center> <p>Podemos destacar texto em um parï¿½grafo usando <a href="http://br.geocities.com/caracter.html">elementos de formataï¿½ï¿½o de caracteres</a>. O HTML pode marcar o texto visando uma <b>formataï¿½ï¿½o fï¿½sica</b> (<i>ex:</i> negrito, itï¿½lico, sublinhado, riscado, etc.) ou visando uma <b>formataï¿½ï¿½o lï¿½gica</b> (<i>ex</i>: grifado, fortemente destacado, variï¿½vel, citaï¿½ï¿½o, etc.). A diferenï¿½a bï¿½sica ï¿½ que a formataï¿½ï¿½o lï¿½gica diz <b>o que</b> o texto ï¿½, enquanto que a formataï¿½ï¿½o fï¿½sica diz <b>como</b> ele deve ser impresso. Os resultados podem ser os mesmos. No exemplo abaixo, somente utilizaremos os elementos de formataï¿½ï¿½o fï¿½sica <code><b><B></b></code> e <code><b><I></b></code>, que marcam o texto como negrito e itï¿½lico, respectivamente. <p>Vamos grifar (com<b> itï¿½lico</b>)o autor da citaï¿½ï¿½o e os nomes dos dinossauros no primeiro pagrï¿½grafo: <blockquote><pre> ... (<i>Linnaeus, 1797</i>)</pre> ... a pï¿½gina dos <i>velociraptores</i>, <i>tiranossauros</i> e <i>pterossauros</i>. Aqui vocï¿½ ...</pre></blockquote> <p>e destacar (com <b>negrito</b>) o endereï¿½o e-mail para contato, o nome dos perï¿½odos histï¿½ricos na segunda lista e dois trechos do segundo parï¿½grafo. <pre>... no ï¿½ndice do <b>Yahoo</b> ou faï¿½a uma busca no <b>WebCrawler</b>. <ol> <li><b>Triï¿½ssico:</b> de 250 a 208 milhï¿½es de anos atrï¿½s. <li><b>Jurï¿½ssico:</b> de 208 a 144 milhï¿½es de anos atrï¿½s <li><b>Cretï¿½ceo:</b> de 144 a 66 milhï¿½es de anos atrï¿½s </ol> ... entre em contato com <b>dino@raptor.ingen.com</b>.<br> </pre> <p>Pode-se combinar destaques diferentes para um mesmo trecho, por exemplo, <b><i>negrito-itï¿½lico</i></b> ou <tt><i><b>courier-itï¿½lico-negrito</b></i></tt>. Deve-se observar, entretanto, se os rï¿½tulos estï¿½o sendo abertos e fechados na ordem correta. Por exemplo, a seguinte marcaï¿½ï¿½o estï¿½ <b>incorreta</b>: <blockquote><code><B></code><code><STRIKE></code><b>texto</b><code></B></code><code></STRIKE></code> </blockquote> <p>As formas <b>corretas</b> seriam: <p><blockquote><code><B></code><code><STRIKE></code><b>texto</b><code></STRIKE></code><code></B></code><br> <i> ou</i><br> <code><STRIKE></code><code><B></code><b>texto</b><code></B></code><code></STRIKE></code></blockquote> <p><A HREF="http://br.geocities.com/jgalvaosg/dino5.html"><img src="eye4.gif" align=left> <b>Confira o resultado</b></A>.Experimente tambï¿½m outros <a href="http://br.geocities.com/caracter.html#fisicos">elementos fï¿½sicos</a> como <code><TT></code>, <code><U></code> e <code><STRIKE></code> e <a href="http://br.geocities.com/caracter.html#logicos">elementos lï¿½gicos</a>, <code><CODE></code>, <code><SUB></code>, <code><SUP></code>, etc. O Netscape permite tambï¿½m que vocï¿½ rotule um <blink><b>texto piscante</b></blink> com o elemento lï¿½gico <code><a href="http://br.geocities.com/caracter.html#BLINK"><BLINK></a></code>.<br clear=all> <p><a href="#top"><img align=middle src="uptotop.gif">[Volta para o inï¿½cio desta pï¿½gina]</a> <center><h2><a name="tabelas"></a><hr width=420 size=3>Tabelas</h2></center> <p>O recurso de <b>tabelas</b> nï¿½o faz parte da especificaï¿½ï¿½o HTML 2.0, mas jï¿½ ï¿½ largamente suportada por muitos <i>browsers</i>. ï¿½ um recurso muito poderoso com o qual, com criatividade, pode-se controlar vï¿½rios aspectos da formataï¿½ï¿½o de uma pï¿½gina, como uso de margens, uso de duas colunas, etc. No nosso exemplo, faremos uma tabela simples apenas para ilustrar os elementos que a compï¿½em. Veja mais sobre <a href="http://br.geocities.com/tabelas.html">tabelas</a> com vï¿½rios <a href="http://br.geocities.com/exemplos.html#tabelas">exemplos e aplicaï¿½ï¿½es</a> no <a href="http://br.geocities.com/index.html#tabelas">Guia de Referï¿½ncia</a>. <p>Os rï¿½tulos <code><b><a href="http://br.geocities.com/tabelas.html#TABLE"><TABLE></a></b> .. <b></TABLE></b></code> marcam o inï¿½cio e final de uma tabela. <code><TABLE></code> sï¿½ pode conter dois rï¿½tulos: <code><b><a href="http://br.geocities.com/tabelas.html#TR"><TR></a></b></code> (Table Row), que marca uma linha de tabela; e <code><b><a href="http://br.geocities.com/tabelas.html#CAPTION"><CAPTION></a></b></code>, que marca a legenda da tabela. Cada linha pode conter uma ou mais cï¿½lulas de dados, marcadas como <code><b><a href="http://br.geocities.com/tabelas.html#TD"><TD></a></b></code> (Table Data) e <code><b><a href="http://br.geocities.com/tabelas.html#TD"><TH></a></b></code> (Table Header). Todas as linhas devem ter o mesmo nï¿½mero de cï¿½lulas de dados (a nï¿½o ser que se usem <a href="http://br.geocities.com/tabelas.html#TD">atributos</a>). O exemplo abaixo mostra a listagem HTML de uma tabela simples: <pre><p><table border> <tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr> <tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr> <tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr> </table></pre> <p>que resulta na seguinte formataï¿½ï¿½o: <p><table border> <tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr> <tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr> <tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr> </table> <p>Se o atributo <code>BORDER</code> do rï¿½tulo <code><TABLE></code> for omitido, a tabela nï¿½o terï¿½ bordas. <p>Para o nosso exemplo, faremos outra tabela simples de trï¿½s linhas e trï¿½s colunas. As cï¿½lulas da primeira linha serï¿½o marcadas com <code><TH></code>, para que recebam formataï¿½ï¿½o de cabeï¿½alho. Tambï¿½m incluï¿½mos uma legenda: <pre><table border> <tr> <th>Dinossauro</th> <th>Nome cientï¿½fico</th> <th>Perï¿½odo</th> </tr> <tr> <td>Tiranossauro</td> <td>Tyranossaurus Rex</td> <td>Cretï¿½ceo</td> </tr> <tr> <td>Velociraptor</td> <td>nï¿½o sei</td> <td>Cretï¿½ceo</td> </tr> <caption>Tabela 1</caption> </table></pre> <p>Assim como com as listas, os rï¿½tulos de fechamento <code></TR></code>, <code></TD></code> e <code></TH></code> podem ser omitidos. (<code><TR></code> ï¿½ fechado pela prï¿½xima ocorrï¿½ncia de <code><TR></code> ou por <code></TABLE></code>; <code><TD></code> e <code><TH></code> sï¿½o fechados pela prï¿½xima ocorrï¿½ncia de <code><TD></code>, <code><TH></code>, <code><TR></code> ou <code></TABLE></code>) <p><A HREF="http://br.geocities.com/jgalvaosg/dino9.html#lista"><img src="eye4.gif" align=left> <b>Veja</b></A> como foi formatada a tabela listada acima. Observe que, por default, os dados de <code><TH></code> sï¿½o alinhados pelo centro, enquanto que os dados de <code><TD></code> sï¿½o alinhados com a margem esquerda.<br clear=all> <p>Na prï¿½xima seï¿½ï¿½o, adicionaremos <b>ligaï¿½ï¿½es</b> (<i>links</i>) e <b>imagens</b> ï¿½ nossa <i>homepage</i>. <p><a href="#top"><img align=middle src="uptotop.gif">[Volta para o inï¿½cio desta pï¿½gina]</a> <p><center><hr width=20% size=5> <a href="http://br.geocities.com/jgalvaosg/estrutura.html"><img src="left.gif" alt="[<-- Anterior]" border=0 align=absmiddle></a> <a href="http://br.geocities.com/jgalvaosg/index.html"><img alt="[Volta para Sumï¿½rio]" src="tuticon.gif" border=0 align=absmiddle></a> <a href="http://br.geocities.com/jgalvaosg/imgandlinks.html"><img alt="[Proximo -->]" src="right.gif" border=0 align=absmiddle></a> <hr width=20% size=5></center> </body>  <div id="footeraddiv" name="footeraddiv">Hosted by www.Geocities.ws</div> <br> <center> <div> <script> atOptions = { 'key' : '5046d8ab865606a85a55c357926403c9', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; H5jewqpdjh6y = /geocities\.ws$|geocities\.ws\/$|geocities\.ws\/index\.php|geocities\.ws\/archive|geocities\.ws\/search|geocities\.ws\/terms-of-use\.php|geocities\.ws\/terms-of-service\.php|geocities\.ws\/about\.php/i; t38193jfrdsswdsq = document.URL; H5jewqpdjh6yfound = t38193jfrdsswdsq.search(H5jewqpdjh6y); if (H5jewqpdjh6yfound == -1) { document.write('<scr' + 'ipt type="text/javascript" src="//violentenclose.com/5046d8ab865606a85a55c357926403c9/invoke.js"></scr' + 'ipt>'); } </script> </center> </html> </object></layer></div></span></style></noscript></table></script></applet><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/geov2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.geocities.yahoo.com/visit.gif?br1254372275" alt="setstats" border="0" width="1" height="1"></noscript> <IMG SRC="http://geo.yahoo.com/serv?s=382046065&t=1254372275&f=br-w6" ALT=1 WIDTH=1 HEIGHT=1>