voltar
para a página anteriorDepois 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:
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="/gifs/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="/gifs/star.gif"> <B>Triássico:</B> de 250 a 208 milhões de anos atrás. <dd><img src="/gifs/star.gif"> <B>Jurássico:</B> de 208 a 144 milhões de anos atrás <dd><img src="/gifs/star.gif"> <B>Cretáceo:</B> de 144 a 66 milhões de anos atrás </dl>
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="/gifs/nome-da-imagem.gif">.
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="/gifs/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="/gifs/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="/gifs/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.
Além dos recursos que utilizamos no exemplo, há vários outros que podem enriquecer mais ainda a sua homepage:
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.
É 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.
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.
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.
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="/gifs/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="/gifs/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="/gifs/star.gif">
<B>Triássico:</B> de 250 a 208 milhões de anos atrás.
<dd><img src="/gifs/star.gif">
<B>Jurássico:</B> de 208 a 144 milhões de anos atrás
<dd><img src="/gifs/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="/gifs/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="/gifs/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="/gifs/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="/gifs/barata.gif"><img src="/gifs/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="/gifs/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>