Cuerpo BODY

El cuerpo del DOM es el que contiene todo el texto e imágenes de la página, que junto a los elementos HTML te dan el control del formato.

Antiguamente NO TODOS estos elementos eran soportados por todos los navegadores (Browsers) y eso depende de la versión de HTML que manejen (Ej 1, 2, 3, 3.2, 4, 5 o 5.2) incluso Netscape y Explorer estaban creando cada uno sus propias especificaciones.

A partir de HTML5 esto ya no ocurre porque ahora las recomendaciones van delante incluso de los desarrolladores de los navegadores.

1. Características

Todos los efectos requeridos en la pagina web, debe ser necesariamente especifican exclusivamente a través de las etiquetas. Es decir los espacios, tabulaciones y retornos de carro que metas en el archivo fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:

Todas           estas
      palabras 
forman          una frase.

Obtendremos exactamente lo mismo que con:

Todas estas palabras forman una frase.

En resumen, la estructura básica de un documento HTML es:

Es importante tener en cuenta, que al presentar el documento el navegador cliente hará caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente.

<!DOCTYPE html>
<HTML lang="es">
<HEAD>
   <TITLE>Título</TITLE>
</HEAD>
<BODY>
   Texto del documento, etiqueta de formateo, enlaces,
   imágenes, sonido, video, aplicaciones en JAVA, JavaScript,
   VBScript, ActiveX, CGI's...
</BODY>
</HTML>

2. Atributos de BODY hasta HTML 4

A partir de HTML5 ya no se debería usar estos parámetros de BODY. Sin embargo los mencionaremos aquí porque en realidad aunque ya no se recomiendo usarlos siguen funcionando en los navegadores.

Especifica una imagen de fondo.

Atributos validos hasta HTML 4
Atributo	Descripción
TEXT	Especifica el color del texto en todo el documento
BGCOLOR	Especifica el color del fondo
BACKGROUND
LINK	Color de enlaces no visitados
ALINK	Color de enlaces activos
VLINK	Color de enlaces visitados

2.1 BGCOLOR

Parámetro usado para especificar el color del fondo sin imagen. #rrggbb representa la trica RGB (Red-Green-Blue) en hexadecimal. color representa uno de los 156 colores de la paleta extendida. Por default el texto es negro sobre fondo gris.

<Body BGCOLOR=#rrggbb> o
<Body BGCOLOR=color>

Una buena ayuda para la selección de colores con #rrggbb la puedes encontrar en: Paleta de Colores

Text parámetro usado para definir el color del texto por omisión. Su formato es el mismo que el de BGCOLOR. Por default es negro.

Link, Vlink, y Alink parámetros usados para especificar el color por omisión de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omisión son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

2.2 MARGIN

LEFTMARGIN y TOPMARGIN: Margen izquierdo y superior del documento en pixels.

<BODY LEFTMARGIN=60> o 
<BODY TOPMARGIN=60>

2.3 BACKGROUND

Parámetro usado para especificar la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento, que será mostrada, dependiendo de su tamaño como mosaico para cubrir toda la ventana, como el papel tapiz en Windows.

Para mas información consulta la etiqueta BACKGROUND en este mismo manual.

Si en el navegador del cliente la opción de "Auto Load Images" esta off, no podrás cargar la imagen de fondo y todos los atributos de color de texto como: TEXT, BGCOLOR, LINK, ALINK y VLINK son ignorados, dejando el fondo gris y texto negro. :-(

Sintáxis:

<BODY BACKGROUND=ruta/archivo.gif>

3. Atributos de globales

Los atributos globales son atributos comunes a todos los elementos HTML, pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.

3.1 accesskey

Proporciona y genera un acceso de teclado para el elemento actual. Este atributo consiste de una lista de caracteres, separadas por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.

3.2 class

Es una lista de clases del elemento, separadas por espacios. Classes permiten a CSS y JavaScript seleccionar y acceder a elementos específicos a través del class selectors o funciones como el método Document.getElementsByClassName().

3.3 contenteditable

Es un atributo enumerado que indica si el elemento debe ser modificable por el usuario. Si es así, el navegador modifica su widget para permitir la edición. El atributo debe tener uno de los siguientes valores:

true o empty string, el cual indicaque el elemento debe ser editable.
false, el cual indicaque el elemento no debe ser editable.

3.4 contextmenu

Es el id de un

para usar como menú contextual para este elemento.

3.5 data

Forma una clase de atributos, llamados custom data attributes, que permite que la información del propietario sea intercambianda entre el HTML y su representación DOM que puede ser utilizada por los scripts. Todos estos datos personalizados están disponibles a través de la interfaz HTMLElement del elemento the attribute is set on. La propiedadHTMLElement.dataset da acceso al mismo.

3.6 DIR

Es un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores:

ltr, significa left to right y se utiliza para idiomas que se escriben de izquierda a derecha (como el Español).
rtl, significa right to left y se utiliza para idiomas que se escriben de derecha a izquierda (como el Árabe);
auto, permite que el agente decida. Se utiliza un algoritmo básico, que analiza los caracteres dentro del elemento hasta que encuentra un caracter con una direccionalidad fuerte, a continuación, aplica la direccionalidad a todo el elemento.

3.7 draggable

Es un atributo enumerado que indica si el elemento puede ser arrastrado, usando la Drag and Drop API. Puede tener los siguiente valores:

true, indica que el elemento puede ser arrastrado.
false, indica que el elemento no puede ser arrastrado.

3.8 dropzone

Es un atributo enumerado que indica qué tipos de contenidos pueden soltarse sobre el elemento, usando la Drag and Drop API. Puede tener los siguiente valores:

copy, indica que al soltar se crea una copia del elemento que fue arrastrado
move, indica que el elemento que fue arrastrado será movido a esta nueva locación.
link, creará un link a la información arrastrada.

3.9 hidden

Es un atributo Booleano que indica si el elemento aún no es, o ya no es, relevante. Por ejemplo, puede usarse para ocultar elementos de la página que no pueden usarse hasta que el proceso de ingreso se complete. El navegador no mostrará/renderizará dichos elementos. Este atributo no debe ser utilizado para ocultar el contenido que legítimamente podría ser mostrado.

3.10 id

Define un identificador único (ID) el cual debe ser único en todo el documento. Su propósito es identificar el elemento cuando es objetivo de un linking (usando un fragment identifier), scripting, o styling (mediante CSS).

3.11 itemid

Identificador único y global de un item.

3.12 itemprop

Usado para agregar propiedades a un item. Cada elemento HTML puede tener un atributo itemprop especificado, donde un itemprop consiste de un par nombre y valor.

3.13 itemref

Propiedades que no son descendientes de un elemento mediante el atributo itemscope pueden ser asociadas con el item usando un itemref. Itemref provee una lista de element ids (no itemids) con propiedades adicionales en cualquier parte del documento.

3.14 itemscope

Itemscope (usualmente) funciona junto con itemtype para especificar que el HTML contenido en un bloque es sobre un item en particular. Itemscope crea el item y define el scope del itemtype asociado con él. itemtype es una URL válida de vocabulario (como schema.org) que describe el item y el contexto de sus propiedades.

3.15 itemtype

Especifica la URL del vocabulario que será usado para definir itemprops (propiedades del item) in la estructura de datos. Itemscope es usado para setear el scope de dónde en la estructura de datos es seteado el vocabulario por itemtype.

3.16 lang

Participa en la definición del lenguaje del elemento, del lenguaje en que son escritos elementos no-editables o del lenguaje en que deben ser escritos elementos editables. El tag contiene un solo valor en el formato definido en Tags for Identifying Languages (BCP47) documento IETF. xml:lang tiene prioridad sobre el mismo.

3.17 spellcheck

Es un atributo enumerado que definde si el elemento se puede comprobar por errores de ortografía. Puede tener los siguientes valores:

true, indica que el elemento debería, si es posible, chequearse por errores.
false, indica que el elemento no debe ser chequeado por errores.

3.18 style

Contiene declaraciones de estilo CSS para ser aplicadas al elemento. Note que es recomendado que los estilos sean definidos en archivo/s separados. Este atributo y el elemento <style> tienen el objetivo principal de permitir un estilizado rápido, por ejemplo con fines de testeo.

3.19 tabindex

Es un atributo Integer que indica si el elemento puede obtener un focus de input (es focusable), si debe participar de la navegación secuencial con el teclado, y si es así, en qué posición. Puede tomar diferentes valores:

un valor negativo significa que el elemento debe ser focuseable, pero no debe ser alcanzado vía la navegación secuencial del teclado.
0 significa que el elemento debe ser focusable y alcanzable vía la navegación secuencial del teclado, pero el orden relativo es definido por la convención de la plataforma.
a valor positivo which significa que debe ser focusable y alcanzable vía la navegación secuencial del teclado, el orden relativo es definido por el valor del atributo: sigue la secuencia en orden ascendente según el valor de tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue su posición en el documento.

3.20 title

Contiene un texto que representa información de asesoramiento en relación al elemento al que pertenece. Dicha información se presenta típicamente al usuario como un tooltip.

3.21 translate

Es un atributo enumerado que se usa para especificar si los valores de los atributos de un elemento y los valores de su nodo hijo Text son traducidos cuando su página es localizada, o si hay que dejarlos sin cambios. Puede tener los siguientes valores:

cadena vacía y "yes", indica que el elemento será traducido.
"no", indica que el elemento no será traducido.

4. Manejadores de eventos

HTML no puede manejar de eventos es por eso que para estas tareas usamos JavaScript.

<HTML>
<HEAD>
	<TITLE>Usuario esta en linea o no ?</TITLE>
	<Script>
		function xyz(online){
			document.getElementById('status').textContent = online ? 'Online' : 'Offline';
		}
	</Script>
</HEAD>
<BODY Online="xyz(true)" Offline="xyz(false)" Online="xyz(navigator.onLine)">
	<P>Ud esta: <SPAM ID=status>(Desconocido)</SPAN></P>
	...
</BODY>
</HTML>

Ejemplo 2

<BODY OnLoad=funcion()>

Ejemplo 3

<BODY OnPageShow=funcion()>

class=tip>Para mas detalle consulta Manual JS.

5. Consideraciones

Cada elemento de color en BODY solo puede ser especificado una sola vez para todo el documento, no puede ser cambiado para parte del documento. Para cambiar el color de un texto en particular te recomiendo usar CSS.

Al especificar una imagen como fondo, se requiere que dicha imagen sea cargada completamente, esto reduce la velocidad de carga del documento y ninguna parte podrá ser mostrada hasta que la imagen termina de ser cargada y decodificada. Por lo que es muy importante que las imágenes de fondo sean pequeñas y simples. Por defecto esta imagen de fondo es repetida hasta llenar toda la pantalla (como mosaico).

Otro aspecto a tener en cuenta cuando usas imágenes de fondo es el contraste entre el fondo y el color del texto de manera que aún sea posible leer sin mayor dificultad.

Las recomendaciones HTML5, hacen referencia a ya no usar ninguno de estos atributos de BODY y en su lugar usar estilos CSS. Consulta la pagina sobre estilos CSS para saber mas de ello.