Atributos para páginas
Explicaremos una serie de atributos que se aplican de manera global a toda la página, como el color de fondo del texto, de los enlaces, márgenes, etc.
En este punto nos metemos de nuevo en el terreno del CSS. Veremos todo tipo de estilos que se pueden aplicar a una página, colores o imágenes de fondo, colores para los enlaces, etc.
Las paginas HTML pueden construirse con variedad de productos que le pueden dar un aspecto muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o el de los enlaces, etc.
Estos atributos se definen en la etiqueta <body> y, como decíamos son generales a toda la página.
ATRIBUTOS PARA FONDOS
-
bgcolor: especificamos un color de fondo para la página. En puntos anteriores hemos aprendido a construir cualquier color, con su nombre o 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. Próximamente veremos como insertar imágenes en HTML y los tipos de imágenes que se pueden utilizar.
Para colocar una imagen como fondo de mosaico, se escribiría la siguiente línea en la etiqueta <body>.
<body background=’fondo.jpg’>…</body>
NOTA: siempre que coloquemos una imagen de fondo, debemos también poner 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 desactivada la carga de imágenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. 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á a imagen por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasara que no podemos leer el texto convenientemente. Ocurre lo mismo 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 hallamos seleccionado con el atributo “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 negro.
Además del color del texto, tenemos 3 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 mas vivo que el texto. Los 3 atributos son los siguientes:
-
link: el color de los enlaces que no han sido visitados, por defecto azul clarito.
-
vlink: el color de los enlaces visitados. La “V” viene justamente de la palabra “visited”. 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 que se activa, es porque lo estamos pulsando y en ese caso el navegador abandonara la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.
MARGENES
Con otros atributos de la etiqueta <body>, se pueden asignar espacios de márgenes en las páginas, lo que es muy útil para eliminarlos 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 otros navegadores, por lo que debemos utilizarlos todos si queremos que todos los clientes web los interpreten perfectamente.
-
leftmargin: para indicar el margen a los lados de la página. Valido para Internet Explorer.
-
topmargin: para indicar el margen arriba y debajo de la página. Valido para Internet Explorer.
-
marginwidth: la contrapartida de “left-margin” para Firefox.
-
marginheight: igual que “top-margin”, pero para Firefox.
<body leftmargin=’0’ topmargin=’0’ marginwidth=’0’ marginheight=’0’ bgcolor=’#FFFFFF’>
Ejercicio-1
Ejercicio-2
Ejercicio-3
