Actualizado el 14-01-2007
versión para imprimir
Colores y fondos
incluyendo un color de fondo
NOTA: la información de esta página está declarada en desuso. Consulta el nuevo apartado al final de la misma para ver como podríamos usar CSS en su lugar
Hasta ahora sabemos crear un documento html, con su estructura mínima. Sabemos incluir párrafos y alinearlos, incluir imágenes, enlaces y listas. Es el momento de darle un poco de color a la página.
El lenguaje html no es muy bueno en este sentido, pero sus instrucciones básicas permiten especificar un color de fondo para nuestra página, o incluir una imagen de fondo. Tambien podemos especificar el color en el que aparecerán
los enlaces (links) en su estado normal, activo (seleccionado) o visitado.
Estos cambios los logramos añadiendo atributos a la etiqueta <body>:
<html> <head> <title>Mi pagina en colores</title> </head> <body bgcolor="#507FFF"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>
Y veamos el resultado aqui.
El color se indica en código hexadecimal,
precedido del carácter almohadilla (#). Los colores que puedes usar son infinitos, pero su correcta visualización dependerá de la configuración del PC
donde se vea. Si usas colores complejos, no se verán bien salvo que tu visitante posea un PC configurado en color de 16 bits o 32 bits. Para sistemas inferiores (256 colores o menos) es mejor atenerse a los colores básicos.
Netscape ofrece una tabla de 216 "colores seguros" que teóricamente se verán bien en cualquier ordenador. Aqui la tienes.
Si no quieres ceñirte
a esta tabla de colores, y quieres elegir otro personalizado, el nombre hexadecimal puedes conseguirlo con cualquier programa de gráficos. O una solución mas sencilla, usa un color picker. Se trata de unos programas que te ofrecen el nombre hexadecimal de cualquier color que tengas en la pantalla, sin mas que posar el cursor sobre él. Hay muchos, y mi favorito es sin duda el color pad, pequeño, cómodo y freeware. Con él puedes conseguir el color exacto de toda página web que veas por ahi, o duplicar los colores de tu gráfico favorito.
Tambien puedes señalar los colores por su nombre. Efectivamente algunos colores tienen nombre, aunque no es el método mas
recomendado para utilizarlos. En esta página podrás jugar
con los colores y aprender sus nombres.
fondos
<html> <head> <title>Mi pagina en colores</title> </head> <body background="bkgnd2.gif"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>
Eso que acabas de ver es lo que has de hacer si deseas incluir un gráfico de
fondo en tu página. Fácil, sustituyes en la etiqueta body el atributo
bgcolor= por background= y indicas la ruta
(absoluta o relativa) al gráfico elegido. Ya sabes, ha de ser gif o jpg, y
cuidado, no se te ocurra poner un gráfico de colores fuertes o no se verá el
texto. Ah, y no hace falta que sea del tamaño de tu página. El navegador se
encarga de multiplicarlo las veces que sean necesarias para rellenar todo el
fondo.
Ahi tienes el gráfico que hemos usado: 
Y este sería el resultado.
Cambiando el color del texto y los enlaces
Por defecto, los navegadores presentan las páginas con texto en negro sobre
fondo blanco. Los enlaces son de color azul, que normalmente cambia a rojo
cuando los pulsamos, y a púrpura cuando vemos un enlace que ya ha sido
visitado.
Ya hemos visto como cambiar el color de fondo, o usar un
gráfico. Veamos ahora como cambiar el color del texto:
<html> <head> <title>Mi pagina en colores</title> </head> <body background="bkgnd2.gif" text="#000080"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>
Y este sería el nuevo resultado. La letra ahora no es negra sino azul.
Volvamos a los links. Esta es la apariencia que tendrían unos links no modificados:
| links azules, sin visitar rojos, activos púrpura, visitados. |
Ya te habrás dado cuenta de que se puede modificar su apariencia, por
ejemplo, los links en esta página no son así; tampoco lo son en muchas otras
páginas. Cada autor puede diseñar la propia apariencia de sus enlaces. Ojo.
Tradicionalmente y hasta hace poco tiempo los enlaces se visualizaban como hemos
visto arriba. Es fácil para todo el mundo identificar texto azul subrayado con
un enlace pulsable. Si tienes motivos para cambiar la apariencia de tus enlaces,
ocúpate de que sean fácilmente identificables.
Hay dos formas de cambiar los
enlaces: con CSS o con la etiqueta body. Veamos esta última forma:
<html> <head> <title>Mi pagina en colores</title> </head> <body background="../images/bkgnd2.gif" text="#000080" link="#00FF66" vlink="#F35654" alink="#ffffff"> <h1>bienvenido a mi página</h1> <p>Aqui iria el resto de la página</p> </body> </html>
donde naturalmente link es un link normal, vlink es uno visitado y alink uno activo. Este sería el resultado.
Colores y fondos con CSS
Con CSS podemos especificar el color de primer plano y de fondo para cada elemento que compone la página, no solamente para el conjunto.
Se habla de ello mas a fondo en el manual CSS, aqui nos limitamos a mostrar las equivalencias con los atributos html declarados en desuso:
<body style="color:#000080;background-color:#507FFF;">
color indica el color del elemento en primer plano (texto de la pagina) y background-color el del fondo.
Para indicar una imagen de fondo:
<body style="background-image:url(imagenes/fondo.gif);">