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:
