El fondo de sus páginas debería quedarse justamente ahí, en el fondo. A medida que añadamos diferentes colores o tramas tenga presente que no debe interferir con la buena legibilidad del texto. Para las páginas de este tutorial hemos usado un color blanco sólido que resulta ser "limpio" y no interfiere con la lectura del texto.
Con algunas modificaciones a la etiqueta <body> (introducida hace ya tiempo, en la lección 1) es posible añadir un color sólido de fondo a sus páginas. Pero, antes de mostrarle cómo funciona esto debemos hablar primero acerca de los códigos de color RGB y su representación "hexadecimal".
Aquí tiene un truco. Mejor que identificar un color como algo parecido a "102,153,255" cada número se convierte de su represntación en base 10 (los números de cada día, los dígitos 0,1,2,3,4,5,6,7,8,9) a hexadecimal, base 16 (los "dígitos" 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). ¿Porqué? El código hexadecimal es más fácil y eficaz de ser entendido por los ordenadores. Así, el color del ejemplo anterior lo escribiríamos en hexadecimal como "6699FF". En este ejemplo "66" es el valor del Rojo, "99" el del Verde y "FF" el del Azul.
Vea unos valores hexadecimales de ejemplo para diferentes colores:
| Colores de Ejemplo | Códigos Hexadecimales |
|---|---|
| xx oo xx FFCCCC | xx oo xx 3300FF |
| xx oo xx 33FF66 | xx oo xx AA0000 |
| xx oo xx 663300 | xx oo xx 9900FF |
| xx oo xx 000077 | xx oo xx FFFF00 |
| xx oo xx EEEEEE | xx oo xx 888888 |
| xx oo xx 444444 | xx oo xx 000000 |
|
¡No tenga miedo a hacer muchas conversiones numéricas! Existen muchas herramientas que le permitirán hacer click en un
color y que le devolverán su representación hexadecimal. Muchas de estas herramientas están disponibles en
Yahoo.
Pero, mejor aún, muchos Borwsers soportan los estándares 16 colores (los favoritos de las VGA de Windows): | |
| xx oo xx agua (aqua) | xx oo xx negro (black) |
| xx oo xx azul (blue) | xx oo xx fucsia (fuchsia) |
| xx oo xx gris (gray) | xx oo xx verde (green) |
| xx oo xx lima (lime) | xx oo xx marrón (maroon) |
| xx oo xx azul marino (navy) | xx oo xx verde oliva (olive) |
| xx oo xx púrpura (purple) | xx oo xx rojo (red) |
| xx oo xx plata (silver) | xx oo xx verde azulado (teal) |
| xx oo xx blanco (white) | xx oo xx amarillo (yellow) |
NOTA: Quizás debiera ver una prueba para ver si su Browser soporta fondos de color sólido.Para nuestra Web de Volcanes la primera cosa que haremos será añadir un fondo de color al archivo index.htm. El código para añadir un fondo de color implica modificar la etiqueta <body> y que quede así:
<body bgcolor=#XXXXXX>donde XXXXXX es la representación hexadecimal (indicada por el signo # al principio) del color deseado.
Si recuerda, la imagen que usábamos al comienzo del archivo tiene dibujos de volcanes sobre un fondo negro; así que, si usáramos el mismo color negro para el fondo de la página, la imagen parecería mezclarse con la misma:
<body bgcolor=#000000>
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>donde los valores XXXXXX determinarán:
Ahora puede cambiar algunos de estos valores de los colores simplemente modificando la etiqueta <BODY>:
<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>Esto ofrece un fondo negro, texto de color amarillo, links azul claro y links visitados en rojo.
NOTA: el orden de los elementos en la etiqueta <BODY> no importa.Ahora debería modificar las etiquetas <BODY> en en todos sus archivos HTML (el método más rápido y cómodo es copiar y pegar el ejemplo anterior de la etiqueta <body>).
NOTA: Quizás debiera ver una prueba para ver si su Browser soporta texturas de fondo.Los colores añaden variedad a sus páginas; pero puede ir un poco más allá si les añade una textura de fondo. Use una imagen pequeña (GIF o JPEG) y el Browser la colocará de fondo de su página reiterando la imagen varias veces. Algunas cosas a tener en cuenta son:
<body background="fichero.gif">donde fichero.gif es el nombre del archivo con la imagen (puede ser la URL completa o la ruta relativa del archivo. Vea la lección 8a).
A continuación le listamos los nombres de tres archivos de fondos. Puede bajarse cada uno (si no sabe como bajarse gráficos de una página web vaya a nuestra página de ayuda). Debería dejar cada archivo gráfico en su directorio/carpeta pictures en su área de trabajo:
<body background="../pictures/paper.gif" text=##AA0000>lo que nos resultaría texto rojo sobre fondo de papel amarillo.
NOTA: Muchos Browsers disponen de la facultad de cambiar los colores por defecto. A veces el usuario puede tener como preferentes colores que interfieren con los que usted ha elegido. No obstante le sugerimos que cuando use cualquier etiqueta para fondos (colores o texturas) incluya los colores normales; negro para el texto, azul para los links y rosa para los links visitados:Si quiere ver ejemplos de archivos de texturas para fondos vea los Archivos de Fondos y Texturas de Kai's Power Tips<BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE>
<body bgcolor=#FFFFFF>y
<body background="tiles.gif">?
El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net
URL:
