|
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:dino@raptor.ingen.com>
dino@raptor.ingen.com</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]
| 
