HTMLWeb, Manual de HTML. Etiqueta BODY

manuales - recursos - gráficos - programación...

Home- HTML - Estructura - 1 - 2 - 3 - 4- 5

Estructura de un documento web (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Cuerpo (BODY).-

Comprende todo el código situado entre las etiquetas <BODY> y </BODY>, su contenido si es visible en la ventana del navegador y puede contener los siguientes elementos:

Elementos estándares HTML: párrafos, formularios, tablas, listas, etc.
Capas definidas mediante etiquetas <div>…</div> o <span>…</span>
Codigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
Objetos incrustados: Applets, animaciones Flahs, etc.

Todos estos elementos los iremos estudiando en los temas sucesivos, pero es importante ahora centrarnos en una serie de atributos propios de la etiqueta BODY que, si bien en la actualidad han sido en su mayoría sustituidos por sus equivalentes mediante CSS, aún podemos verlos en multitud de páginas.

La etiqueta BODY posee un grupo de atributos que determinan la apariencia del fondo de la página:

background="ruta_imagen": que define una imagen de fondo para la página web, y en donde "ruta_imagen" es la ruta en la que se encuentra la imagen de fondo, pudiendo estar referida a la estructura relativa local de carpetas o ser la URL global del fichero de imagen respecto a nuestro servidor web. Un factor a destacar es que si la imagen es de un tamaño inferior al de la resolución de pantalla usada, se repetirá horizontal y verticalmente hasta rellenar la totalidad de la pantalla. En algunos textos podréis encontrar el atributo bgproperties="fixed" para la etiqueta BODY, cuyo fin es que la imagen no se repita, pero teóricamente sólo es compatible con Internet Explorer, y prácticamente no da resultados, por lo que es mejor no usarla. Es posible evitar la repetición de la imagen de fondo mediante atributos de CSS, que veremos luego.
bgcolor="color": que establece un color de fondo para la página, y en donde "color" puede venir expresado mediante el nombre web inglés estándar o mediante el código hexadecimal del color (Ver capítulo sobre el color en la web).

Ejemplo de imagen de fondo:

<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo background</title>
</head>
<body background="images/logo.gif">
</body>
</html>

cuyo resultado está en esta ventana.

Ejemplo de color de fondo:

<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo bgcolor</title>
</head>
<body bgcolor="red">
</body>
</html>

que podéis ver en acción en esta ventana.

Entendemos por márgenes de página la distancia existente entre cada uno de los laterales de la misma y su contenido interior más cercano. Así, el margen superior de la página será la distancia existente entre el borde superior de la ventana útil del navegador y el contenido de la página más cercano a él. Y lo mismo para los demás bordes de la página.

La etiqueta BODY posee una serie de atributos que nos van a permitir configurar los márgenes de la página, si bien serán diferentes según el navegador usado.

En el caso de Internet Explorer, disponemos de un atributo para fijar cada uno de los márgenes de la página:

leftmargin="n", para el margen izquierdo
topmargin="n", para el margen superior
rightmargin="n", para el margen derecho
bottommargin="n", para el margen inferior

En todos los casos anteriores, "n" es un número entero, que expresa los pixels de separación.

Para el navegador Nestcape Navigator, en todas sus versiones actuales, los atributos para configuración de los márgenes son:

marginwidth="n", para los márgenes izquierdo y derecho.
marginheight="n", para los márgenes superior e inferior.

Donde, al igual que antes, "n" es un número entero, que expresa los pixels de separación. Como vemos, Nestcape fija los márgenes en parejas, permitiéndonos con ello menos posibilidades de configuración.

Para poder establecer unos márgenes de página compatibles con ambos navegadores, deberemos establecer las etiquetas correspondientes a los dos. Ejemplo:

<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de margenes</title>
</head>
<body topmargin="100" leftmargin="50" marginheight="100" marginwidth="50">
<p>Este BODY tiene margenes</p>
</body>
</html>

cuyo resultado está en esta ventana.

Otro grupo de atributos de la etiqueta BODY es el formado por aquellos que permiten al diseñador web fijar el color que va a tener el texto de la página y el color de los enlaces de la misma, aclarando que un enlace puede tener tres estados generales: normal (el enlace no ha sido activado todavía), activo (cuando se ha activado y tiene todavía el foco) y visitado (una vez que ha sido activado y regresamos a la página que contiene el enlace). Los atributos correspondientes son:

text="color", para el texto de la página.
link="color", para los enlaces normales.
alink="color", para los enlaces activos.
vlink="color", para los enlaces visitados.

En todos ellos "color" puede venir expresado mediante su nombre web inglés estándar o mediante su código hexadecimal.

Destacar que un enlace que ya ha sido visitado puede permanecer en ese estado aunque cerremos el navegador y volvamos a la página que lo contiene posteriormente. Esto es así porque el navegador guarda en su caché un registro de los enlaces visitados.

Ejemplo:

<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de color en texto y enlaces</title>
</head>
<body bgcolor="#ffff99" text="green" link="red" alink="#663300" vlink="#ff33ff">
<a href="www.yahoo.es">Yahoo</a><br><br>
<a href="www.google.com">Google</a><br><br>
<a href="www.terra.com">Terra</a>
</body>
</html>

cuyo efecto podéis ver en esta ventana (he desabilitado los enlaces para no irnos de la página).

Por último, la etiqueta BODY admite otros tres atributos, relacionados todos ellos con el uso de CSS, y que sirven para definir estilos que afectarán a toda la página en su conjunto. Estos atributos son:

style="propiedad:valor;propiedad:valor;...", que permite asignar estilos "en línea".
id="identificador", que permite asignar al cuerpo de la página una serie de estilos únicos, cuya definición estará en la cabecera de la página (dentro de un bloque <STYLE>...</STYLE) o en un fichero de estilos externo.
class="clase", que permite asignar al cuerpo de la página una serie de estilos compartidos, definidos en un grupo de ellos denominado clase, cuya definición estará en la cabecera de la página (dentro de un bloque <STYLE>...</STYLE) o en un fichero de estilos externo.

Ejemplo:

<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de estilos en el BODY</title>
</head>
<body style="background:#99cc66;font-size:18px;font-family:Comic Sans MS;color:red;"222>
<div align="center">Hola, amigos</div>
</body>
</html>

que tenéis en esta ventana en esta ventana.

Estilos para el BODY.-

CSS nos permite definir un gran conjunto de estilos diferentes para la etiqueta BODY, que afectarán a todos los contenidos del mismo, siempre y cuando estos contenidos no se encuentren incluidos en un bloque de página que tenga asignados sus propios estilos.

Esto es debido a la propia naturaleza de las Hojas de Estilo en Cascada, que se llaman precisamente así (en Cascada) porque los estilos se van asignando mediante niveles jerárquicos, predominando siempre los estilos definidos más cerca del elemento a considerar.

Un factor a tener en cuenta siempre que hablemos en delante de propiedades CSS es que, bien no son soportadas de forma estándar por todos los navegadores comunes, bien son interpretadas de forma más o menos diferente. Por este motivo, explicaremos solo las propiedades compatibles con los principales navegadores o aquellas que, por su utilidad práctica o porque haya una forma alternativa que permita su uso, indicando en este último caso los navegadores que la soportan.

Otro aspecto importante es que existen determinadas propiedades que se heredan por los bloques contenidos en el que se han definidos los estilos. Por ejemplo, si la propiedad CSS "P" se establece en la etiqueta BODY y es heredable, todos los bloques incluidos dentro de <BODY>...</BODY> tendrán asignado esa misma propiedad, y con el mismo valor, salvo que posean una definición propia de estilos que afecte redefina la propiedad "P".

Las principales propiedades CSS que acepta la etiqueta BODY son (para información sobre CSS y sus propiedades:, consulta en apéndice correspondiente):

Propiedades de las fuentes: font, font-size, font-family, font-weight, font-style.

Ejemplo:

<body style="font-size:13x;font-family:Comic Sans MS;font-weight:bold">
Ejemplo de estilos en fuentes
</body>

Resultado

Propiedades de los textos: color, line-height, text-align, text-decoration, text-indent, text-transform, letter-spacing (no Nestcape 4x).

Ejemplo:

Resultado

Propiedades del fondo: background, background-color; background-image, background-repeat; background-attachment (no Nestcape 4x), background-position (no Nestcape 4x).

Ejemplo:

Resultado

Propiedades de márgenes: margin, margin-left, margin-top, margin-right, margin-bottom.

Ejemplo:

Resultado

Propiedades de acolchado: padding, padding-left, padding-top, padding-right y padding-bottom son soportadas correctamente.

Propiedades de bordes: todas las posibles, de acuerdo con las limitaciones. Es importante experimentar en este caso con cada una de las propiedades en cada uno de los navegadores, ya que la forma de renderizar cada propiedad (width, color, style, lateral individual) varía mucho de un navegador a otro, e incluso no son soportadas.

Ejemplo:

<body style="border:2px solid red>
Ejemplo de estilos en bordes
</body>

Resultado

Propiedades de posicionamiento y tamaño: aunque no tienen significado en esta etiqueta (los posicionamientos son siempre respecto al elemento padre, y BODY es el padre de todos los elementos), saber que Nestcape Navigator soporta la propiedad position, situando el contenido de la página en las coordenadas dadas por left top. Pero no se deben usar, al ser incompatibles con I. Explorer. Igual ocurre con las propiedades de tamaño, width, height y clip, siendo aceptadas por Nestcape Navigator, pero no por Internet Explorer.

Propiedades de visibilidad: la propiedad visibility es soportada por Internet Explorer y Nestcape 6x, y la propiedad display sólo por Internet Explorer. Aunque estas propiedades parecen no tener utilidad práctica, se pueden usar en páginas concretas por ejemplo para ocultar el contenido de un frame sin tener que cargar en él una nueva página, pero sólo se debe usar en aplicaciones desarrolladas para los navegadores que las soportan.

Propiedades del cursor: soportadas sólo por Internet Explorer, en todas sus variantes (default, hand, move, help, etc.).

Home- HTML - Estructura - 1 - 2 - 3 - 4- 5