-= 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 , da seguinte maneira: 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. 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: Trocando a cor de uma parte do texto: O comando TEXT explicado anteriormente (que vai englobado dentro da etiqueta ), troca a cor da totalidade do texto de uma página. A etiqueta e troca a cor do texto de uma determinada parte da página: Este texto está em vermelho, mas este está em azul. 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 é: ou 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 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: 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. Para isso, carregamos num editor de textos o arquivo aula5.html e substituímos a etiqueta por esta outra: Gravamos nosso exemplo no diretório criado no primeiro capítulo, com o nome de aula6.htm