Atributos para páginas

Explicamos uma série de atributos que se aplicam de maneira global a toda página, como a cor de fundo, a do texto, e dos links, as margens, etc.

As páginas HTML podem ser construídas com uma variedade de atributos que lhe podem dar um aspecto à página muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links. Estes atributos se definem na etiqueta <body> e, como dizíamos são gerais a toda a página.

O melhor para explicar seu funcionamento é vê-los um a um.

Atributos para fundos

Bgcolor: especificamos uma cor de fundo para a página. No capítulo anterior aprendemos a construir qualquer cor, com seu nome ou seu valor RGB. A cor de fundo que podemos atribuir com bgcolor é uma cor plana, ou seja, a mesma para toda a superfície do navegador.

Background: serve para indicar a colocação de uma imagem como fundo da página. Nos capítulos mais adiante, veremos como se inserem imagens com HTML e os tipos de imagens que se podem utilizar.

Exemplo de fundo

Vamos colocar esta imagem no fundo da página.

A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretório que a página. Neste caso se colocaria a seguinte etiqueta <body>

<body background="fondo.jpg">

Pode-se ver o efeito de colocar este fundo em uma página a parte.

Conselho: Sempre que colocarmos uma imagem de fundo, devemos também pôr uma cor de fundo próxima da cor da imagem.

Isto se deve, pois ao colocar uma imagem de fundo, temos que colocar uma cor que contraste suficientemente com tal fundo. Se o visitante não pode ver o fundo por qualquer questão (por exemplo, por ter a carga de imagens desabilitada) pode que o texto não contraste o suficiente com a cor de fundo padrão da web.

Acredito que o melhor a fazer é testar com um exemplo. Se a imagem de fundo é escura, teremos que colocar um texto claro para que se possa ler. Se o visitante que acessa a página não vê a imagem de fundo, sairá o fundo padrão, que geralmente é branco, de modo que ao ter um texto de cor clara sobre um fundo branco, não será possível ler o texto convenientemente.

Ocorre parecido quando se está fazendo o download da página. Se ainda não chegou ao nosso sistema a imagem de fundo, veremos o fundo que tivermos selecionado com bgcolor e é interessante que seja parecido à cor da imagem para que se possa ler o texto enquanto se faz o download da imagem de fundo.

Cor do texto

Text: Este atributo serve para atribuir a cor do texto da página. Por padrão é o negro.

Ademais da cor do texto, temos três atributos para atribuir a cor dos links da página. Já devemos saber que os links devem diferenciar-se do resto do texto da página para que os usuários possam identificá-los facilmente. Para isso, eles costumam aparecer sublinhados e com uma cor mais viva que o texto. Os três atributos são os seguintes:

Link: a cor dos links que não foram visitados.

Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. É a cor que terão os links que já visitamos. Por padrão sua cor é roxa. Esta cor deverá ser um pouco menos viva que a cor dos links normais.

Alink: é a cor dos links ativos. Um link está ativo no preciso momento em que se clica. Às vezes é difícil perceber quando um link está ativo porque no momento em que se ativa, é porque o estamos clicando e nesse caso, o navegador abandonará a página rapidamente e não poderemos ver o link ativo mais que um mínimo instante.

Exemplo de cor de texto

Vamos ver uma página em que a cor de fundo seja preta, e as cores dos textos e dos links sejam claros. Colocaremos a cor do texto branca e os links amarelos, mais ressaltados os que não tenham sido visitados e menos ressaltados os que já tenham sido. Para isso, escreveríamos a etiqueta body assim:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" vlink="ffff00">

O efeito pode-se ver em uma página a parte.

Margens

Com outros atributos da etiqueta <body> podem-se atribuir espaços de margens nas páginas, o que é muito útil para eliminar as margens em branco que aparecem nos lados, em cima e embaixo da página. Estes atributos são diferentes para o Internet Explorer e para o Netscape Navigator, por isso, devemos utilizá-los todos se queremos que todos os navegadores os interpretem perfeitamente.

Leftmargin: para a indicar a margem nos lados da página. Válido para Internet Explorer.

Topmargin: para indicar a margem acima e abaixo da página. Para Internet Explorer.

Marginwidth: a contrapartida de leftmargin para Netscape. (margem nos lados)

Marginheight: igual ao topmargin, mas para Netscape. (margem acima e abaixo)

Um exemplo de página sem margem é a própria página de criarweb.com que você está visitando atualmente. (pelo menos na hora de escrever este artigo). Além disso, vamos ver outra página sem margens, caso alguém necessite ver o exemplo nestas linhas:

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Olá amigos</h1>
<br>
<br>
Obrigado por me visitar!
</td></tr></table>
</body>

Esta página tem o fundo branco e dentro um painel com o fundo vermelho. Na página poderemos ver que o painel ocupa o espaço na página sem deixar lugar para nenhum tipo de margem. Pode-se ver o exemplo em uma página à parte.