En la lección precedente hemos visto cómo crear un documento HTML partiendo de cero y cómo impostar el título y las marcas de metainformación.
La operación que sigue a la impostación del documento es la definición del color o de la imagen del fondo, así como de los colores de los enlaces activos y de los visitados.
<BODY>
El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento.
Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.
La sintaxis correcta del elemento <BODY> es la siguiente:
<BODY>
Contenido del documento
</BODY>
La marca <BODY> se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles.
BGCOLOR
El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
<BODY BGCOLOR="#ff0000">
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.
BACKGROUND
BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es:
<BODY BACKGROUND="sfondo.gif">
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición.
Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible.
Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo.
TEXT
Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
También en este caso los colores pueden expresarse con nombres o con valores hexadecimales. En el interior del documento podemos marcar parte del texto con colores diferentes del que hemos impostado en TEXT.
LINK
Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes:
<BODY BACKGROUND="sfondo.gif" LINK="red">
Todos los enlaces de la página no serán ya azules sino rojos (red). Este color puede expresarse en valores hexadecimales.
ALINK
Cuando hacemos clic en un enlace, éste se vuelve de un color distinto al impostado en LINK (o al azul de la opción por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color:
<BODY BACKGROUND="sfondo.gif" ALINK="yellow">
VLINK
Cuando se visita un URL asociado a un enlace, este último se vuelve de un color distinto al de LINK (o al azul de la opción por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color:
<BODY BACKGROUND="sfondo.gif" VLINK="green">
BGPROPERTIES
Hablando del atributo BACKGROUND hemos resaltado el hecho de que las imágenes estén dispuestas ocupando toda la pantalla disponible. Si la página fuera tan larga como para tener que activar la barra de desplazamiento lateral, el fondo (la imagen asociada) iría pasando junto con la página. Para comprender mejor esta cuestión, haz clic aquí para ver un ejemplo, y después pasa la página hacia abajo.
Gracias a la propiedad BGPROPERTIES es posible hacer que el fondo permanezca inmóvil respecto al desplazamiento de página. La sintaxis correcta es:
<BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed">
Esto funciona sólo con MsIe y no con Netscape que, en cambio, continúa desplazando la página.
Comenta: