Atributos para páginas

  • Por
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 HTML hemos 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 como 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.

Imagen que utilizaremos de fondo

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>

<body background="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 visitandos. La "v" viene justamente de la palabra visitado. 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 balnco 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í:

<body bgcolor="#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>
Gracias por visitarme!
</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. Puede verse el ejemplo en una página a parte.

Todo lo que hemos visto hasta ahora en el Manual de HTML lo podemos encontrar en vídeo y en concreto las explicaciones de los últimos artículos se han recogido en el Vídeotutorial de HTML - Fuentes, colores y estilos de BODY.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jefazo

05/5/2005
supongo q no puedo poner align entre otro de los atributos de la etiqueta body no?

karolina

23/5/2005
quisiera saber si ahi una etiqueta que pueda acomo dar la imagen alado de u texto

ESME

05/10/2006
muy buena la pagina

Mª JOSÉ

03/11/2006
Estoy intentando ponerle margen al body y no lo consigo, estoy en el block de notas

Lluís

18/6/2007
Hay un error de escritura en el ejmplo de color de texto dice:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">

y mirando el código fuente de la página aparte es así:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" vlink="#ffffcc" alink="ffff00">

Pierre

08/7/2007
Intente colocar un fondo pero no me sale, a si me ha pasado casi siempre y de todas formas no me deja por eso quisiaera que en esa parte colocaran como un demo o algo parecido

Ulises

12/10/2007
hola desarrolloweb.com ....quisiera preguntar una cosa sobre los fondos de la pagina....si tengo 1 imagen y quisiera que se viera la imagen en toooooooda la pagina sin que se vea varias veces.....como lograria eso? sin tener que modificarla en paint o algo asi....hay algun comando que necesito todavia? porfavor....respondanme mi duda....gracias por su atencion

jose

27/9/2008
bien, estoy siguiendo su pagina, mi primer manual de html, se los agradesco... pero hasta aqui no mencionaron la utilidad de la etiqueta <table> o soy muy despistado y me la pase de alto, mis disculpas entonces...
estaria bueno que agregen la cualidad de esta etiqueta, de seguro la explican mas adelante, pero confudiria a un aprendiz como yo que sigue paso por paso su tutorial... muchas gracias...

ADDERLY

12/3/2009
lluís gracias por la aclaración me salvaste de un error en mi examen final

daniel

10/10/2009
agradecimiento
La verdad, muchas gracias por todaa esta informacion, me ha sido de mucha ayuda, porque estoy estudiando creacion de paginas web!!!
muchas gracias...

KARLA

06/2/2010
hola
MANUAL PARA TRABAJAR EN HTML

arkan

23/3/2010
cómo hacer un salto de página
Hola.

He estado buscando como hacer un enlace para que haga un salto de página y no lo he encontrado.
¿Alguien me puede decir como se hace?

¿Muchas gracias!

melvin

15/4/2010
como le pongo yna imagen de margin a mi web?
como le pongo yna imagen de margin a mi web? que ayuda estoy aprendiendo bien

denice

11/6/2010
ayuda
hola necesitoo ayuda .. la verdad...esta muy bueno el manual este felicitaciones...


pero necesito ke me ayuden no puedo color una imagen de fondo nose en ke partee se escriben las etiquetas ..ayuda tengo ke azer una pagina web de tareaa...URGENTE

deapro

23/7/2010
CSS
Si estamos en HTML, por qué en el enlace del ejemplo hay cosas en CSS??=S al menos es lo que ponía
Además de ello prescinde del head y title que está incluido dentro del head y está bien así? YO pensaba que era mejor siempre poniéndolo
Y por qué utilizamos text si para el color del texto también se podría utilizar font color?
Muchas gracias

oscar antonio hurtado vargas

07/9/2010
fondo
quisiera saber si hay alguien que me pueda explicar porque no puedo cargar las imagenes de fondo estoy usando el bloc de notas los colores si me los toma pero las imagenes no. tengo muchas imagenes en mis imagenes pero ninguna la puedo subir a la pagina que estoy diseñando.

ISABEL

21/1/2011
interesante
me a resultado de mucha utilidad esta tu pag. estoy creando la pagina para mi escuela ipem299almafuerte.edu.ar
mil gracias ya que e realizado un curso donde fue superficial lo que nos dieron y gracias a tu ayuda pude darle color al texo pero me gustaria poner de fondo de pantalla la fachada del colegio e colocado tu pag en favoritos muchas gracias

black

03/2/2011
Tamaño de la imagen
Bueno solo para aquellos que quieran saber como agrandar la imagen de fondo solo tienen que establecer los atributos width="" y height="" dentro de la etiqueta background
o img.

viktor

02/5/2011
respuesta para arkan
primero debes crear el sitio de salto definiendolo como <a name="abajo">

y luego en algun lado pones <a href="#abajo">ir abajo</a> y listo

PakoPortalo

25/11/2013
Otras dudas
Hola! antes de nada, genial tutorial, estoy aprendiendo muchísimo sobre el código html, pero me ha surgido una duda.

Mi pregunta es:
ya sabemos poner un color predeterminado para toda la página, pero ¿cómo podríamos poner un tipo de fuente o un tamaño predeterminado para las letras?

un saludo!

David

18/5/2014
Margenes en HTML
Las etiquetas que proporcionas para establecer los margenes no me funcionan.
Gracias.