[<-- Anterior] [Volta para Sumário]

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.

Usuários do DSC podem usar os diversos ícones, botões e linhas disponíveis na rede local. Escolha a imagem na Biblioteca de Ícones e inclua na sua página com <IMG SRC="nome-da-imagem.gif">.

[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. Veja a Tabela de Cores 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. Veja mais na seção do Guia de Referência sobre <BODY> e uma tabela com várias amostras de papel de parede.

Usuários do DSC podem incluir backgrounds em suas páginas usando <BODY BACKGROUND="backgrounds/nome-da-imagem">. O nome e o tamanho do arquivo (GIF ou JPEG) são mostrados na tabela de Amostras de Papel de Parede.

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]

[<-- Anterior] [Volta para Sumário]