Explicamos una serie de atributos que se aplican
de manera global a toda la página, como el color de fondo
el del texto, de los enlaces, márgenes, etc.
Las páginas HTML pueden
construirse con variedad de atributos que le pueden dar un aspecto a la página muy
personalizado. Podemos definir atributos como el color de fondo, el color del
texto o de los enlaces. Estos atributos se definen en la etiqueta <body>
y, como decíamos son generales a toda la página.
Lo mejor
para explicar su funcionamiento es verlos uno por uno.
Atributos para fondos
bgcolor:
especificamos un color de fondo para la página. En el capítulo
anterior y en el taller de los colores y HTMLhemos
aprendido a construir cualquier color, con su nombre o su valor RGB. El color
de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo
para toda la superficie del navegador.
background: sirve
para indicar la colocación de una imagen como fondo de la página. La imagen se
coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo
el espacio del fondo de la página. En capítulos más adelante veremos cómo se
insertan imágenes con HTML y los tipos de imágenes que se pueden utilizar.
Ejemplo de fondo
Vamos a colocar esta imagen
como fondo en la página.
La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la página. En este caso se colocaría la siguiente etiqueta <body>
<bodybackground="fondo.jpg">
Se puede
ver el efecto de colocar ese fondo en una página a parte.
Consejo: siempre
que coloquemos una imagen de fondo, debemos poner también un color de fondo
cercano al color de la imagen.
Esto se debe a que, al colocar una imagen de fondo, el texto de la
página debemos colocarlo en un color que contraste suficientemente con dicho
fondo. Si el visitante no puede ver el fondo por cualquier cuestión (Por
ejemplo tener deshabilitada la carga de imágenes) puede que el texto no
contraste lo suficiente con el color de fondo por defecto de la web.
Creo que lo mejor será poner un ejemplo. Si la imagen de fondo es
oscura, tendremos que poner un texto claro para que se pueda leer. Si el
visitante que accede a la página no ve la imagen de fondo, le saldrá el fondo
por defecto, que generalmente es blanco, de modo que al tener un texto con color
claro sobre un fondo blanco, nos pasará que no podremos leer el texto
convenientemente.
Ocurre parecido cuando se está cargando la página. Si todavía no
ha llegado a nuestro sistema la imagen de fondo, se verá el fondo que hayamos
seleccionado con bgcolor y es interesante que sea parecido al color de la
imagen para que se pueda leer el texto mientras se carga la imagen de fondo.
Color del texto
text: este
atributo sirve para asignar el color del texto de la página. Por defecto es el
negro.
Además
del color del texto, tenemos tres atributos para asignar el color de los
enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del
resto del texto de la página para que los usuarios puedan identificarlos
fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el
texto. Los tres atributos son los siguientes:
link: el
color de los enlaces que no han sido visitados. (por defecto es azul clarito)
vlink: el
color de los enlaces visitados. La "v" viene justamente de la palabra
visitada. Es el color que tendrán los enlaces que ya hemos visitado. Por
defecto su color es morado. Este color debería ser un poco menos vivo que el
color de los enlaces normales.
alink: es el
color de los enlaces activos. Un enlace está activo en el preciso instante que
se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque
en el momento en el que se activa es porque lo estamos pulsando y en ese caso
el navegador abandonará la página rápidamente y no podremos ver el enlace activo
más que por unos instantes mínimos.
Ejemplo de color del texto
Vamos a ver una página
donde el color de fondo sea negro, y los colores del texto y los enlaces sean
claros. Pondremos el color de texto blanco y los enlaces amarillos, más
resaltados los que no estén visitados y menos resaltados lo que ya están
visitados. Para ello escribiríamos la etiqueta body así:
<bodybgcolor="#000000"
text="#ffffff" link="#ffff33" alink="#ffffcc"
vlink="ffff00">
El efecto
se puede ver en una página a parte.
Márgenes
Con otros atributos de la
etiqueta <body> se pueden asignan espacios de margen en las páginas, lo
que es muy útil para eliminar los márgenes en blanco que aparecen a los lados,
arriba y debajo de la página. Estos atributos son distintos para Internet Explorer
y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que
todos los navegadores los interpreten perfectamente.
leftmargin: para
indicar el margen a los lados de la página. Válido para iexplorer.
topmargin: para
indicar el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la
contrapartida de leftmargin para Netscape. (Margen a los lados)
marginheight: igual
que topmargin, pero para Netscape. (Margen arriba y abajo)
Tenemos
un artículo sobre la utilización de estos atributos para hacer diseños
avanzados con tablas en distintas definiciones de pantalla, que
puede ser interesante de leer.
Un
ejemplo de página sin margen es la propia página de DesarrolloWeb.com, que
estás visitando actualmente. (Por lo menos a la hora de escribir este artículo)
Además, vamos a ver otra página sin márgenes, por si alguien necesita ver el
ejemplo en estas líneas.
<body
topmargin=0 leftmargin=0 marginheight=0 marginwidth=0
bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Graciasporvisitarme!
</td></tr></table>
</body>
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Graciasporvisitarme!
</td></tr></table>
</body>
Esta
página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la página
podremos ver que la tabla ocupa el espacio en la página sin dejar sitio para
ningún tipo de margen.
