Curso de html para Cegos.

Aula 6 - Fundos de Tela e Cores.



-= Curso HTML - Fundos de Tela e cores =-
Marco Antonio de Queiroz.


As cores que podemos colocar em nossas páginas são as defundo de tela, dos textos e descrição dos links hipertext. Nessa última, se quisermos, podemos colocar cores distintas no link antes de ser utilizado, mudar a cor na volta da página linkada como aviso de que já foi visitada, no momento da conecção até que apareça a nova página, informando que esta esta sendo acionada e também mudança de cor no momento em que o mouse passa por cima do link.

Podemos ter o fundo de duas maneiras:

1. com uma cor uniforme.
2. com uma imagem.

Fundos com uma cor uniforme.

Consegue-se com o comando BGCOLOR com a etiqueta <BODY>, da seguinte maneira:

<BODY BGCOLOR="#XXYYZZ">

onde: XX é o número indicativo da quantidade de cor vermelho (Red).
YY é o número indicativo da quantidade de cor verde (Green).
ZZ é o número indicativo da quantidade de cor azul (Blue).

Estes números estão em hexadecimal. Esta numeração se caracteriza por ter 16 dígitos (no lugar dos dez da nossa numeração decimal habitual). Estes dígitos são:
0 1 2 3 4 5 6 7 8 9 A B C D E F
O menor número é 00 e o maior é FF. Assim, por exemplo, a cor vermelha é: #FF0000, porque tem o máximo de vermelho e zero nas outras cores.

As cores primárias são:

#FF0000 - Vermelho.
#00FF00 - Verde.
#0000FF - Azul.

Outras cores são:

#FFFFFF - Branco.
#000000 - Preto.
#FFFF00 - Amarelo.

Para fazer uma cor mais escura, temos que reduzir o número correspondente, deixando os outros invariáveis. Assim o vermelho #FF0000 se pode fazer mais escuro com #AA0000, ou ainda mais escuro com #550000 (quanto mais próximo do 00 mais escuro e do ff mais claro).

Para fazermos cores mais suaves, devemos variar as outras duas cores deixando-as mais claras (número mais alto), em uma quantidade igual. Assim, podemos converter o vermelho em rosa com #FF7070. Todas as cores iguais dá o cinza: Quanto mais claro, maior são os números (exemplos: #404040 (escuro), #909090 (médio) #CCCCCC (claro).

Cores do texto e dos links

Se não se variassem as cores habituais do texto e dos links (preto e azul, respectivamente), poderia ocorrer que a página contra o fundo escuro ficasse difícil ou impossível de ser lida. Para evitar isto, podemos escolher as cores do texto e dos links, com os seguintes comandos:
TEXT - cor do texto,
LINK - cor dos links,
VLINK - cor dos links visitados,
ALINK - cor dos links ativos.
Os códigos das cores são os mesmos já vistos anteriormente. A etiqueta, com todas as possibilidades, seria:

<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK "#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">

Trocando a cor de uma parte do texto:

O comando TEXT explicado anteriormente (que vai englobado dentro da etiqueta <BODY>), troca a cor da totalidade do texto de uma página. A etiqueta <FONT COLOR> e </FONTt> troca a cor do texto de uma determinada parte da página:

<FONT COLOR="#bb0000"> Este texto está em vermelho, </FONT>
<FONT COLOR="#00bb00">mas este está em verde.</FONT>
Como fica na Tela:

Este texto está em vermelho, mas este está em verde.

Fundos com uma imagem:

O fundo de uma página pode ser também uma imagem, no formato GIF ou JPG. Esta imagem se repete por toda a página, de uma maneira análoga ao papel de parede do Windows, na opção lado-a-lado. A estrutura da etiqueta é:

<BODY BACKGROUND="imagem.gif">
ou
<BODY BACKGROUND="imagem.jpg">

Podemos aninhar a esta etiqueta os comandos para trocar as cores do texto e dos links, vistos anteriormente. Isto é imprescindível as vezes para conseguir que o texto seja legível, em contraste com o fundo.

Temos que prever a possibilidade de que quem acesse nossa página tenha desabilitado a carga automática das imagens, fazendo com que nossa imagem de fundo seja substituída por uma cor de fundo. Isto poderia ser muito prejudicial se a cor do nosso texto ou dos links sejam as mesmas do fundo ou uma cor de difícil contraste. A solução para este problema é colocarmos dentro da etiqueta <BODY> os dois comandos BACKGROUND e BGCOLOR (nesta ordem), tendo o cuidado de escolher uma cor uniforme de fundo parecido com o da imagem.

Por exemplo, suponhamos que queremos por como fundo a imagem cinza.jpg. Escolhemos então uma cor parecida, ou seja, um cinza parecido, por exemplo, #BBBBBB. A etiqueta seria assim:

<BODY BACKGROUND="cinza.jpg" BGCOLOR="#BBBBBB">

Exemplo prático.

Vamos colocar como fundo a imagem cinza.jpg, junto com um fundo alternativo de cor cinza claro (#BBBBBB) e fazer que o texto seja de cor azul, no nosso exemplo da aula04 (aula4.htm). Para isso, é necessário capturar a imagem e guardá-la no mesmo diretório onde estamos gravando nossos exemplos (isso já está sendo feito no nosso caso, estando todas as imagens citadas no diretório remoto da geocities, aulas_html). Para isso, carregamos num editor de textos o arquivo .aula5.html e substituímos a etiqueta <BODY> por esta outra:

<BODY BACKGROUND="cinza.jpg" BGCOLOR="#BBBBBB" TEXT="#000090">

Gravamos nosso exemplo no diretório criado no primeiro capítulo, com o nome de aula6.htm

Esta aula est&á abaixo em formato txt para download.

Aula 6 - Fundos de Tela e Cores em txt.



Voltar para a Página Principal.

Bengala Legal.


Hosted by www.Geocities.ws

1