Estructura básica del DOM

El Document Object Model - DOM (Modelo de Objetos del Documento), es esencialmente una Interfaz de Programacion de Aplicaciones - API, que define la estructura lógica de los documentos HTML y el modo en que se accede y manipula un objeto.

A travez del DOM, el autor puede crear documentos, navegar por su estructura, añadir, modificar o eliminar elementos y contenido. El responsable de dicho estandar en el World Wide Web Consortium - W3C.

El DOM tienen una estructura lógica que es muy parecida a un árbol genealogico, donde cada elemento puede ser hijo de otro elemento y a su vez padre de otros elementos. DE forma generica podemos hablas de ansestros y descendientes. Por ejemplo de la figura anterior podemos decir que TBODY es hijo de TABLE, a su vez padre de 2 TR y abuelo de 4 TD. Tanto los TD como TR son descendidntes de TABLE.

Es fundamental entender la relacion existente entre las etiquetas en el DOM para aplicar estilos CSS.

Todo DOM debe tener una estructura con los siguientes elementos:

1. Prólogo identificador

Esta debe ser necesariamente la primera línea del documento, es la identificación del tipo de documento y su versión según la definición de la RFC. Ej: para referirse a un documento HTML de nivel 5 conforme a las especificaciones es así:

<!DOCTYPE html>

De omitir esta línea, de hecho muchos autores lo hacen, el navegador cliente, herramientas de validación y otros softwares tendrá dificultades para identificar la versión HTML del documento y después de todo a nosotros no nos cuesta nada declararla, no ?.

2. Conjunto de elementos <HTML>

Un documento HTML comienza con la etiqueta <HTML>, y termina con </HTML>. Esto identifica al documento como contenedor de códigos HTML. Se pone inmediatamente después del prólogo identificador y sirve para exponer todos los elementos del texto, pero no serán visibles a no ser que estén contenidos en <BODY> o <FRAME>.

Dentro del documento, entre las etiquetas de principio y fin de HTML, hay dos zonas bien diferenciadas: el encabezamiento HEAD, que sirve para definir diversos valores genéricos para todo el documento y el cuerpo BODY, donde reside la información del documento.

Es una colección de etiquetas de información sin orden particular, que no afectan directamente la forma de mostrar el documento, pero sí son usados; dan importante información al navegador cliente (el browser que intenta interpretar la página).

Estas etiquetas son:

<TITLE> - Especifica el título del doc (obligatorio)

<BASE> - Proporcina una dirección básica específica para el doc. Debe tener obligatoriamente el atrubutos HREF y TARGET.

<ISINDEX> - Habilita la búsqueda desde teclado

<LINK> - Indica la relación entre doc. Debe tener el atributo REL y opcionalmente HREF

<NEXTID> - Crea una identificación única del doc

<META> - Especifica la información usable por el cliente/servidor en documentos dinámicos. Sus posibles atributos son: NAME, HTTP-EQUIV, CONTENT y CHARSET.

<STYLE> - Declara el estilo CSS que se usara en la pagina. Su posibles atrubutos son: HREF, REL, TYPE, MEDIA y SCOPED.

La etiqueta título es obligatorio, los demás son opcionales, como parte del encabezado de un documento HTML.
Cada documento HTML debe tener un título <TITLE> que identifique su contenido y este NO debe contener elementos de control como centrado, negritas, subrayado etc

La longitud del título no tiene límite, pero los títulos largos son cortados en ciertas aplicaciones. Para minimizar este problema te recomiendo que el título no pase de 64 caracteres.

También ten en cuenta de que en Internet los títulos son jalados a listas de búsqueda (como Google y Yahoo) y títulos como "Introducción" mandarán a muchos al desvío. En lugar de eso te sugiero:

<!DOCTYPE html>
<HEAD>
   <TITLE>Introducción al uso de HTML</TITLE>
</HEAD>

4. Cuerpo <BODY>

El cuerpo 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.

Debo hacerte notar que NO TODOS estos elementos son soportados por todos los navegadores (Browsers) y eso depende de la versión de HTML que manejen (Ej 1, 2, 3, 3.2, 4 o 5) incluso Netscape y Explorer están "creando" cada uno sus propias especificaciones.

Dichos efectos se especifican exclusivamente a través de los 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:

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


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 16 colores de la paleta básica predefinida. Por default el texto es negro sobre fondo gris.

Sintáxis:

<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.

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

Sintáxis:

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

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 DEMO.

Sintáxis:

<BODY BACKGROUND=ruta/archivo.gif>

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).

Si en el navegador la opcion de "Auto Load Images" esta off, no podrás cargar la imagen de fondo y BGCOLOR no será especificado y todos los controles de color de texto como TEXT, LINK, VLINK o ALINK son ignorados, dejando el fondo gris y texto negro. :-(

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 HTML 5, hacen referencia a ya no usar ninguno de estos parametros de BODY y en su lugar usar estilos CSS. Consulta la pagina sobre estilos CSS para saber mas de ello.