FONDOS Y COLORES

  





7.FONDOS Y COLORES


Se puede cambiar el fondo de dos maneras distintas:
1.  Con un color uniforme
2.  Con una imagen

1.  Fondos con un color uniforme


Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:
<BODY BGCOLOR="#XXYYZZ">
XX  Es un número indicativo de la cantidad de color rojo YY   Es un número indicativo de la cantidad de color verde ZZ  Es un número indicativo de la cantidad de color azul
Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos son:
0 1 2 3 4 5 6 7 8 9 A B C D E F   (A=10, B=11, C=12, D=13, E=14, F=15)
Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF (=255). Así, por ejemplo, el color rojo es el
#FF0000, porque tiene el máximo de rojo y cero de los otros dos colores. Los colores más simples son:

#FF0000 Rojo
#FFFFFF
Blanco
#FF00FF
Magenta
#00FF00 Verde
#000000
Negro
#00FFFF
Celeste
#0000FF Azul
#FFFF00
Amarillo
#CCCCCC
Gris

Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa con #FF7070.


Colores del texto y de los enlaces

Si no variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectu- ra contra un fondo oscuro fuese dificultosa o imposible, si el fondo fuese precisamente negro o azul.
Para evitar esto, podemos escoger los colores del texto y de los enlaces, añadiendo a la etiqueta (si se desea) los siguientes comandos:

TEXT
color del texto
LINK   color de los enlaces
VLINK
color de los enlaces visitados
ALINK  color de los enlaces activos (al ser pulsados)

 
Los códigos de los colores son los mismos que los que se han visto anteriormente. La etiqueta, con todas sus posibilidades, sería:
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el color de la tota- lidad del texto de la página.
Tanto el Netscape Navigator 2, como el Microsoft Explorer soportan una etiqueta de color de la fuente con la que se puede cambiar sólo una parte del texto:
<FONT COLOR="#XXYYZZ"> Este texto es de color XXYYZZ </FONT>


2.  Fondos con una imagen


El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPG. Esta imagen se repite por toda la página, como un mosaico. La estructura de la etiqueta puede ser:
<BODY BACKGROUND="imagen.gif">
<BODY BACKGROUND="imagen.jpg">
No todos los navegadores soportan este formato.


Se puede añadir también a esta etiqueta todos los comandos para cambiar los colores del texto y de los enlaces, vistos ante- riormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en contraste con el color o imagen de fondo.


Hay que prever la posibilidad de que quien acceda a nuestra página haya deshabilitado la carga automática de imágenes, en cuyo caso tampoco cargaría la imagen que sirve como fondo y sólo vería el fondo estándar. Esto podría ser muy perju- dicial si hemos escogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo. La solución a este problema es poner dentro de la etiqueta <BODY> los dos comandos BACKGROUND y BGCOLOR (en este orden), tenien- do cuidado en escoger un color uniforme de fondo parecido al de la imagen.


Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un color de fondo azul claro, #CCFFFF. La etiqueta quedaría así:
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF">
Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automática de imágenes, al cargar la pági- na, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen.