|
INCREMENTANDO SUA HOME PAGE
Depois que voc� aprendeu a fazer sua Home
Page, voc� pode se aprofundar mais e aproveitar os recursos do HTML para tornar a sua
p�gina mais atraente. Tenha em mente que a medida em que voc� aumenta a sofistica��o
da sua p�gina, voc� pode estar reduzindo o p�blico que ir� acess�-la. Se voc� usa
muitas imagens grandes, a transfer�ncia atrav�s da rede se tornar� lenta e muitas
pessoas, em localidades com acesso mais lento, podem n�o ter paci�ncia de esperar 30
e tantos minutos para que sua p�gina apare�a na tela.
Outro fator importante s�o os elementos que n�o fazem parte da especifica��o HTML, como as extens�es do Netscape. Ao
utiliz�-los, voc� deve presumir que a maior parte das pessoas que ir�o acessar a sua
p�gina usam o Netscape. Quem n�o estiver usando o Netscape ver� uma p�gina bem
diferente daquela que voc� imaginou ter criado. Teste, sempre que poss�vel, a sua
p�gina em outros browsers, como o Mosaic, por exemplo, para garantir que quem
acessar sua p�gina usando outro browser, vai pelo menos conseguir l�-la . Se a
informa��o que voc� vai disponibilizar se destina a um n�mero muito grande de pessoas,
que talvez usem Lynx ou Mosaic, n�o utilize as extens�es do Netscape.
O objetivo desta se��o � apresentar superficialmente os recursos
utilizados para produzir a vers�o final da homepage-exemplo..
Os t�picos s�o os seguintes:
Linhas, Marcadores e �cones
O HTML oferece meios para produzir linhas horizontais que podem ser
sombreadas (default) ou s�lidas (sem sombra). Para usar separadores coloridos, �
necess�rio recorrer a imagens. No local onde se deseja colocar a linha, chama-se a imagem
(com <IMG>), de prefer�ncia dentro de um par�grafo e seguida por uma
quebra de linha. Pode-se ainda usar o elemento <CENTER> (Netscape) para
alinh�-la pelo centro. Na p�gina exemplo, fizemos:
<center><p><img src="blueline.gif"><br></center>
� proposta do HTML+ (futuro) a cria��o de um atributo SRC
para <LI> onde se colocaria a URL de uma imagem GIF que seria utilizada
como marcador. Enquanto os browsers de hoje n�o suportam este atributo, pode-se usar
alguns truques. Um deles � a utiliza��o de tabelas sem borda com duas colunas:
uma para o bullet (marcador), e outra para o texto. Outro � utilizando listas de
defini��es <DL> da forma ilustrada abaixo:
<dl>
<dd><img src="star.gif">
<B>Tri�ssico:</B> de 250 a 208 milh�es de anos atr�s.
<dd><img src="star.gif">
<B>Jur�ssico:</B> de 208 a 144 milh�es de anos atr�s
<dd><img src="star.gif">
<B>Cret�ceo:</B> de 144 a 66 milh�es de anos atr�s
</dl>
 Confira os
resultados na vers�o final.
[Volta para o in�cio desta p�gina]
 Recursos do
Netscape
Como voc� deve ter observado (se voc� usa o Netscape), o nosso exemplo
tem um "papel de parede" que cobre todo o fundo da tela. Al�m disso, as cores
dos textos e dos links s�o diferentes. Todas essas altera��es s�o poss�veis
utilizando atributos do elemento <BODY> propostos pelo Netscape. Na p�gina-exemplo, fizemos o seguinte:
<BODY background="backgrounds/smblue_rock.gif"
bgcolor=#336666
text=#cccc33 vlink=#cc9933 link=#99cccc>
O atributo BACKGROUND cont�m a URL da imagem que
vai ser espalhada pelo fundo da tela. Os outros atributos definem cores que s�o
referenciadas pelo seu �ndice em hexadecimal que mostra 99 c�digos com suas respectivas
cores. TEXT define a cor do texto, LINK, a cor da
liga��o (link) n�o-visitada ainda, VLINK, a cor do link
visitado e ALINK, a cor do link ativo.
O atributo BGCOLOR define uma cor de fundo. Neste
exemplo ela � encoberta pelo background, mas, como estamos usando uma cor clara para o
texto, definimos uma cor de fundo escura para que o texto continue leg�vel caso o
backgound s�o seja carregado por algum motivo.
O Netscape possui atributos para controlar a espessura, largura e
alinhamento das linhas horizontais (<HR>). A linha:
<hr width=50% size=5>
define uma linha horizontal com 5 pixels de espessura e ocupando metade
da p�gina. No exemplo, foi centrada utilizando o elemento <CENTER> do
Netscape.
O elemento <IMG> pode receber um atributo BORDER
para determinar a espessura da borda que aparece ao redor da figura. Por default, a borda
� 0 em imagens passivas (que n�o s�o �ncoras) e 2 em imagens ativas. Utilizamos BORDER=0
para eliminar a borda ao redor da seta na linha abaixo:
<a href="index.html"><img src="left.gif"
border=0 align=middle>
Volta para Tutorial.</a>
Finalmente, podemos controlar tamb�m o tamanho da fonte de caracteres
individuais com o elemento <FONT>, proposto pelo Netscape.
Atrav�s do atributo SIZE � poss�vel especificar qualquer tamanho entre 1 e
7. (o default � 3).
<h1><font size=7>D</font>INOSAUR�S <font
size=7>W</font>EB</h1>
Confira
a utiliza��o desses recursos na p�gina-exemplo.
[Volta para o in�cio desta p�gina]
Recursos Avan�ados
Al�m dos recursos que utilizamos no exemplo, h� v�rios outros que
podem enriquecer mais ainda a sua homepage:
Formul�rios
Formul�rios permitem que a pessoa que acessa suas p�ginas possa
interagir com elas. � poss�vel criar �reas para entrada de texto, fazer pesquisas,
criar p�ginas din�micas que mudam de cor e/ou de forma a cada vez que s�o acessadas,
p�ginas cujo formato dependem de uma op��o escolhida pela pessoa que a acessa, etc. A
cria��o de formul�rios deve ser feita em paralelo com programas que ir�o
processar as informa��es recebidas.
Imagens com �reas Ativas
� poss�vel adicionar imagens ativas cuja a��o dependa da posi��o
onde o mouse foi clicado sobre elas. S�o as imagens mapeadas ou imagemaps.
Por exemplo, uma foto com v�rias pessoas pode ser transformada em um imagemap de
forma que a sele��o de cada pessoa, com o mouse, leve para a sua homepage.
Contadores de Acesso
Outro dispositivo bastante usado � o contador de acessos. O
contador � um programa que conta a quantidade de vezes que sua p�gina � acessada. H�
varias implementa��es diferentes de contadores. A instala��o deles depende do gerente
da sua rede (Webmaster). Uma vez havendo um programa contador de acessos instalado, voc�
pode incluir um display na sua p�gina.
[Volta para o in�cio desta p�gina]
E agora?
Agora, m�os � obra! Fa�a a SUA Home Page! Se precisar de mais
informa��es, voc� pode consultar:
e para sempre fazer p�ginas melhores, melhores e melhores,
o segredo � ver como os outros est�o fazendo! Sempre que voc� encontrar uma
p�gina interessante, salve-a em disco ou use a op��o View Source do seu browser
para ver como ela foi feita. Mantenha-se sempre em dia, conferindo as novidades e novos
elementos HTML que v�o surgindo.
[Volta para o in�cio desta
p�gina]
Listagem da Vers�o Final
Abaixo est� a listagem completa do c�digo HTML da vers�o final da Home Page utilizada como exemplo para este
tutorial.
<!DOCTYPE HTML Public "-//IETF//DTD
HTML//EN" -->
<HTML>
<HEAD>
<TITLE>Pagina dos Dinossauros (Tutorial sobre HTML)</TITLE>
</HEAD>
<BODY background="backgrounds/smblue_rock.gif" bgcolor=#336666
text=#cccc33 vlink=#cc9933 link=#99cccc>
<center><img src="velociraptor.gif"><br>
<h1><font size=7>D</font>INOSAUR�S <font
size=7>W</font>EB</h1></center>
<hr>
<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"
(<I>Linnaeus, 1797</I>)</pre>
<p><font size=+2><B>E</B></font><font
size=+1><B>sta</B> � a p�gina</font>
dos <I>velociraptores</I>, <I>tiranossauros</I> e
<I>pterossauros</I>.
Aqui voc� encontra <b>tudo</b> sobre dinossauros... bem,
<i>hmmm...</i> na
verdade, este � s� um exemplo para voc� aprender HTML. Se voc� realmente
procura algo sobre dinossauros, sugiro que procure no �ndice do
<a href=http://www.yahoo.com><B>Yahoo</B></a>
ou fa�a uma busca no <a
href=http://www.webcrawler.com><B>WebCrawler</B></a>,
ou veja os links no <a href="#fontes">final desta p�gina</a>.
<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.
<center><p><img src="blueline.gif"></center><br>
<CENTER><h2>Sum�rio</h2></CENTER>
<ul>
<li><a href="#periodos">Per�odos da Era Mesoz�ica</a>
<li><a href="#lista">Lista de Dinossauros</a>
<ul>
<li>Tabela
<li>Imagens
</ul>
<li><a href="#fontes">Outras fontes de informa��o</a>
</ul>
<hr width=50% size=5>
<CENTER><h2><a name="periodos"></a>
Per�odos da Era Mesoz�ica</h2></CENTER>
<dl>
<dd><img src="star.gif">
<B>Tri�ssico:</B> de 250 a 208 milh�es de anos atr�s.
<dd><img src="star.gif">
<B>Jur�ssico:</B> de 208 a 144 milh�es de anos atr�s
<dd><img src="star.gif">
<B>Cret�ceo:</B> de 144 a 66 milh�es de anos atr�s
</dl>
<hr width=50% size=5>
<CENTER><h2><a name="lista"></a>Lista de
Dinossauros</h2>
</CENTER>
<h3>Tabela de Dinossauros</h3>
<center><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 align=bottom>Tabela 1</caption>
</table></center>
<hr>
<h3>Imagens de Dinossauros</h3>
<p>Este � um <b>Estegosauro</b>: <img src="stego.gif>,
animal do grupo <i>Ornitischia</i> do final do per�odo Jur�ssico.
A figura do estegossauro foi inclu�da neste par�grafo sem alinhamento vertical.
<p>O <b>Triceratops</b> <img src="tricera.gif"
align=middle>,
dinossauro do grupo <i>Ornitischia</i> que viveu na America do Norte
no final do per�odo Cret�ceo, foi inclu�do neste par�grafo com alinhamento
pelo meio da linha.
O <b>Apatossauro</b> (ou brontossauro) <img src="bronto.gif"
align=top>
� um dinossauro do grupo <i>Saurischia</i>, que viveu no per�odo
Jur�ssico. Neste par�grafo ele foi alinhado com a parte de cima da linha.
<p>Finalmente, esta barata (Arghh!)
<a href="barata.gif"><img src="baratinha.gif" align=middle
border=0></a> tamb�m foi alinhada pelo meio (n�o sei se a barata
dinossauro, mas n�o resisti em coloc�-la aqui). Se voc� clicar sobre a barata,
receber� uma barata maior!
<hr width=50% size=5>
<center><a name="fontes"></a><h2>Outras Fontes de
Informa��o</h2></center>
<p>Se voc� realmente procura alguma coisa um pouco mais s�ria sobre
dinossauros, confira o <a
href="http://ucmp1.berkeley.edu/expo/dinoexpo.html">
Dinosaur Hall</a>. Se procura imagens e informa��es sobre o filme
<a href="jplogo.gif">Parque dos Dinossauros</a>, veja
<a href="http://www.efn.org/~billy/">Billy�s Place of Info and
Pictures</a>.
Finalmente, se voc� quer entrar para o clube da Sabedoria dos Dinossauros
e escolher seu dinossauro preferido, v� para a
<a href="http://www.sirius.com/~chaosium/saurin/saurin.html">
Saurintology Page</a>.
<hr>
<a href="index.html"><img src="left.gif" border=0
align=middle>
Volta para Tutorial.</a>
<hr>
<address>
Para mais informa��es entre em contato com
<a href="mailto:[email protected]>
[email protected]</a>. (endere�o fict�cio)<br>
Criado em 31 de fevereiro de 75.340.522 A.C. (Cret�ceo)
</address>
<hr>
</BODY>
</HTML>
[Volta para o in�cio desta p�gina]
[Voltar para o Sum�rio]
| 
