AULA 7: Barras de rolagem, dicas para criar um site

Vamos aprender dois pormenores gráficos que pode querer utilizar. São eles o Background (imagem de fundo) e o tag <hr> (horizontal rule, ou barra horizontal). Vamos ainda saber como criar um site, e alguns cuidados a ter.

Até aqui já aprendeu praticamente todos os tags básicos para construir uma homepage completamente funcional. Vamos agora só acrescentar mais dois pormenores gráficos que são dispensáveis mas que pode querer utilizar. São eles o Background (imagem de fundo) e o tag <hr> (horizontal rule, ou barra horizontal).

Imagens de fundo

Na sua página poderá querer ter como fundo, não apenas uma côr, mas sim uma textura, ou algo gráficamente mais complexo.
Para isto usamos um parâmetro do tag <body> que se chama background=""
Usamos assim:

<body background="nomedaimagem"

Óbviamente que deve substituir a parte 'nomedaimagem' pelo nome e extenção real de uma imagem previamente guardada na mesma directoria da sua página. Se por exemplo quiser uma página inundada de rádios, usará:

<body background="radio.jpg">
</body>

(este <body> é o mesmo onde já definiu a côr do texto, links, etc. Aliás, só existe um body e um /body num dado ficheiro HTML)

Este parâmetro vai pegar na imagem que definiu e repeti-la até preencher toda a sua página, como se de um azulejo se tratasse. Não aconselhamos a usar o rádio como fundo, já que pode tornar a sua página num autêntico caos.
Opte pelas imagens simples, tons suaves com pouca informação. Na aula anterior já demos alguns endereços de sites onde pode encontrar imagens próprias para serem usadas como fundo.

Repare que a imagem de fundo sobrepõe a côr que definiu para fundo. Isto é : se definir na sua página uma côr de fundo e uma imagem de fundo (background) a imagem irá sempre sobrepôr-se à côr de fundo. O que poderá, no entanto, acontecer é, quando a sua página está alojada num servidor e um utilizador a visita, poderá vêr primeiro a côr de fundo e de seguida a imagem de fundo a sobrepôr-se a ela. Se a imagem do background fôr muito pesada, o visitante ainda ficará algum tempo a vêr a sua página com a côr de fundo definida. É portanto aconselhável definir sempre uma côr que respeite mais ou menos os tons da imagem de fundo.

Outro acréscimo gráfico: o <hr>

O tag <hr> significa horizontal rule, ou régua horizontal. Não é uma régua, é apenas um traço. Este tag , embora tenha caído em desuso, pode ajudar na organização gráfica da sua página criando uma separação de zonas e temas.

Para o usar não é preciso ser nenhum perito, apenas acrescente o tag <hr> na zona onde pretende ter uma linha a separar o conteúdo da sua homepage. Este tag automáticamente cria um parágrafo e 'parte' o conteúdo em dois.

O <hr> tem alguns parâmetros que podem ser usados. O mais útil será o do tamanho. Se não lhe definir qualquer tamanho ele automáticamente adoptará toda a largura da sua página.

Parâmetro para o comprimento:
width=""
Parâmetro para a altura:
size=""

Assim, se pretender uma pequena linha apenas como quebra usará, por exemplo:

<hr width="200" size="2">

Esta linha terá 200 pixeis de comprimento e 2 de altura.

Poderá também definir uma côr para o seu <hr>, com o parâmetro color="" que é usado precisamente da mesma maneira que a côr do texto, links ou fundo. No entanto, este parâmetro NÃO é reconhecido pelo Netscape.

Mais uma vez vamos ver qual o estado possível da sua página, utilizando estes dois novos elementos:

<HTML>

<TITLE>A minha primeira página</TITLE>

<BODY bgcolor="#FFFF00" text="#0000FF" link="#FF0000" vlink="#808000" background="fundopagina.gif">

<center>
<h1>A minha primeira página</h1>
</center>

<IMG SRC="radio.jpg" width="75" height="100" border="0" align="left" alt="Fotografia de um rádio antigo">




Viva, esta é a minha primeira página. 
Estou ainda a aprender como construir
uma página html.
Nesta ultima aula aprendi como inserir uma imagem de fundo.
 
Sei também que se quiser posso
linkar esta imagem para outra página.
 
Numa das aulas anteriores compilei
alguns dos meus sites preferidos, que poderá visitar.
Que estão por baixo de uma linha que criei com o tag HR. 
Como podem ver a minha página aos poucos e poucos vai ganhando forma.
Estou a tornar-me um verdadeiro profissional :) .
 




<center>
<hr width="500" color="#FF0000">
</center>



<UL>

<LI>
<a href="http://www.aminharadio.com">
AMINHARADIO
</a> - O site português dedicado à rádio, Restauro,
Sons, fotos, música antiga, etc.

<LI>
<a href="http://www.sapo.pt">
Sapo
</a> - O mais famoso dos índices de sites portugueses.

<LI>
<a href="http://www.negocios.pt">
Canal de Negócios
</a> - Onde eu vou para saber como estão as minhas acções da bolsa.

<LI>
<a HREF="autor.html">
Acerca de mim
</a> - Um pouco sobre o autor desta página.

</UL>


Envie-me um

<a href="mailto:a.silva@xpto.pt">e-mail</a>




</BODY>
</HTML>

Nunca é demais relembrar que a melhor maneira de criar boas páginas, é criando muitas. Experimente vários fundos, veja como eles combinam com as cores que escolheu para o seu texto, para os links etc.. Se for necessário (ou mesmo que não seja) não tenha problemas em começar tudo de novo, agora com outras cores, outras fontes com vários tamanhos. Insira imagens alinhe à esquerda e à direita, mude a posição do texto, se correr mal, pode sempre recomeçar.

Criar um 'Site'

Até aqui supomos que já tenha a sua página de entrada minimamente estruturada, mas ter toda a informação numa só página pode ser um pouco desagradável.
Imagine como vai querer o seu site. Quantas páginas vai ter, idealize o aspecto gráfico geral, mantenha uma coerência em todas as páginas que dele fazem parte.
A primeira página, geralmente funciona como um hall de boas vindas, onde o visitante chega e tem à disposição os caminhos por onde poderá seguir (links) Estes links serão, neste caso links internos, já que apontam para outras páginas pertencentes ao mesmo site, o seu.
Todos os htmls e demais ficheiros deverão estar na mesma directoria, assim o link será simplesmente com o nome do ficheiro html sem necesitar de um endereço tipo 'http://www....'.
Depois, e apenas como sugestão poderá criar a tal página autor.html, que já falámos mas ainda não criámos, uma página de links interessantes, uma sobre os seus hobbies, família, currículum vitae... enfim, escolha o que vai querer mostrar.

Lembre-se que é sempre agradável para o visitante dispôr de um link de regresso à página principal. No fim das páginas acrescente sempre este link. Assim a pessoa que o visita escolhe uma área, e depois pode voltar atrás para visitar outra. Mais tarde iremos falar de formas possíveis de organizar o seu site. Lembre-se que deve sempre facilitar a navegação aos visitantes da sua página.<