Lorenzo Martínez

Tutor Curso MentorHTML

 

DISEÑO DE PÁGINA

La etiqueta <body> puede contener varios atributos que podemos utilizar para mejorar la presentación de nuestra página Web. Estos atributos nos permiten definir el color de fondo, del texto y de los vínculos, también nos permiten la inserción de una imagen de fondo y la modificación de los márgenes del documento.


Atributos de body.

ATRIBUTO FUNCIÓN
BGCOLOR Define el color de fondo de fondo del documento.
TEXT Define el color de la fuente del documento.
LINK Define el color de un enlace no visitado..
ALINK Define el color de un enlace cuando se hace clic sobre él.
VLINK Define el color de un enlace después de visitarlo.
BACKGROUND Inserta una imagen como fondo del documento.
LEFTMARGIN Define el margen izquierdo en Explorer.
TOPMARGIN Define el el margen superior en Explorer.
MARGINHEIGHT Define el margen superior en Netscape.
MARGINWIDTH Define el margen izquierdo en Netscape.


BGCOLOR

Define el color de fondo de un documento HTML. Su valor puede expresarse mediante formato RGB hexadecimal:

<body bgcolor="#FFFFFF">

EL formato RGB (Red, Green, Blue) utiliza dos cifras para representar cada color, las dos primeras cifras de la izquierda representan el color rojo, las dos del centro el color verde y las dos de la derecha el color azul. Combinándoles podemos llegar a representar varios millones de colores. El color blanco es #FFFFFF, el número más alto que se puede representar, y el negro el #000000.

Si utilizamos los llamados colores seguros, las dos cifras que representan a cada color son iguales, podemos utilizar una notación simplificada escribiendo solamente una de las cifras de cada pareja. El color blanco sería #FFF y el negro #000.

También podemos expresar su valor mediante el nombre inglés del color.

<body bgcolor="yellow">



TEXT

Define el color del texto del documento. Al igual que el atributo bgcolor puede expresarse su valor mediante el formato hexadecimal o mediante el nombre del color.

<body text="red">
<body text="#FCFCFC">

El color del texto debe de contrastar con el del fondo para facilitar la lectura del texto.



LINK, ALINK, VLINK

Definen los colores de los vínculos o enlaces. LINK enlace no visitado, ALINK pulsación sobre el enlace, VLINK enlace visitado. Sus valores pueden expresarse en formato hexadecimal o mediante el nombre del color.

<body link="blue" alink="yellow" vlink="red">
<body link="#000080" alink="#FFFF00" vlink="FF0000">

Los colores predeterminados son el azul para un enlace no visitado y rojo/granate para el visitado. El cambiar el color de los enlaces es una decisión que hay que meditar bastante, las personas que navegan por Internet están acostumbradas a esos colores y pueden sentirse perdidas si los modificamos. El sentido común nos dice que deberemos diferenciarlos del texto normal y que sería una barbaridad invertir sus colores.



BACKGROUND

Establece una imagen de fondo en el documento. Su valor debe de ser la dirección de un fichero en formato gif o jpg. Para formar el fondo la imagen indicada se repite hasta ocupar todo el espacio de la pantalla del navegador como si fuese un mosacico.

<body background="fondo.jpg">

No es recomendable el uso de fotografías o imágenes muy definidas como fondo ya que su repetición puede imposibilitar la lectura de la información contenida en el documento. También deberemos tener cuidado con los fondos que solamente llevan dibujo en el lateral izquierdo al verlas en un monitor de mayor resolución que en el que se ha creado el documento podría repetirse el gráfico lateral en la zona derecha de la pantalla.



MÁRGENES

Internet Explorer y Netscape utilizan atributos diferentes para establecer los márgenes del documento no formando parte ninguno de ellos del estándar de HTML. Microsoft tiene atributos para definir los cuatro márgenes; leftmargin, topmargin, rigthmagin y bottommargin. Nestcape solamente utiliza dos atributos marginwidth, que define los márgenes izquierdo y derecho y marginheight que ajusta el margen superior.


<body leftmargin="5" topmargin="5"> Define los márgenes izquierdo y superior en Explorer.

<body marginwidth="5" marginheight="5"> Define los márgenes izquierdo/derecho y superior en Netscape

<body leftmargin="5" topmargin="5" marginwidth="5" marginheight="5"> Define los márgenes en los dos navegadores.

La mejor solución para evitarnos problemas es recurrir a las páginas de estilo para definir los márgenes, añadiendo estas líneas en la cabecera los márgenes se crearán en todos los navegadores.

<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px}
</style>



ATRIBUTOS ESPECÍFICOS DE EXPLORER

Además de los atributos de márgenes, Internet Explorer posee dos atributos más que se pueden incluir en la etiqueta <body>.

bgproperties que admite el valor fixed. Hace que la imagen de fondo permanezca fija mientras el texto y el resto de imágenes se desplazan al mover el cuadro de la barra de desplazamiento o pulsar sobre ella. Scroll admite los valores yes/no. Permite ocultar las barras de desplazamientos.

Microsoft ha desarrollado unas extensiones que controlan la apariencia de las barras de desplazamiento de las ventanas ya sean de un elemento <body> o de un <text-area>, podemos utilizarlas bien dentro de una etiqueta <style> o bien en una hoja de estilo externa. Las extensiones son: scrollbar-3d-light-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-dark-shadow-color, scrollbar-face-color, scrollbar-highlight-color y scrollbar-shadow-color. El valor de estas propiedades debe ser el valor de un color, sea con el nombre o en hexadecimal. Fíjate en la barra de desplazamiento de esta ventana y en el área de texto que hemos colocado, su código lo tienes escrito a continuación, deberás incluirlo en la cabecera :

<style type="text/css">
<!--
TEXTAREA{
scrollbar-face-color:#0c6387;
scrollbar-arrow-color:#ff9966;
scrollbar-track-color:#1382b0;
scrollbar-shadow-color:#023e50;
scrollbar-highlight-color:#023e50;
scrollbar-3dlight-color:#023e50;
scrollbar-darkshadow-Color:#023e50;
}
-->
</style>