Estructura del HTML

Directivas del HTML

El HTML (HyperText Makeup Language), en realidad no es un lenguaje de programación, sino como su nombre indica es un �lenguaje de maquillado� ya que nosotros lo único que hacemos es �maquillar� una serie de textos e imágenees para que el navegador nos dé la presentación deseada en conjunto.

El HTML está en contínuo desarrollo, por lo que en un principio sólo existe un HTML estándar que es el que se denomina SGML (Standart Generalized Makeup Language), que es lenguaje estándar reconocido por todos los navegadores. Sólo hay una versión (por el momento), que es la 1.0 y las desventajas que posee sobre el HTML es que es un poco pobre de contenidos, ya que no actualiza las nuevas directivas que están en contínuo desarrollo.

Las directivas en HTML son aquellas �ordenes� que se hayna entre los símbolos <...> y que son de 2 clases: abiertas y cerradas.

Abiertas
Son aquellas directivas que no necesitan ser cerradas para que su acción sea comprendida por el navegador (<HR>, <BR>, ...)
Cerradas
Son aquellas directivas que para ser comprendidas por el navegador, deben indicar en dónde comienzan y e dónde terminan. Son las más, y cuando indican al navegador que cierran la directiva poseen el formato </DIRECTIVA> donde DIRECTIVA es la �orden� que queremos cerrar. El texto o imágenes o elementos que se hayen entre las 2 directivas <DIRECTIVA>...</DIRECTIVA> quedan afectadas por la acción de dicha DIRECTIVA en su totalidad (<H1>...</H1>, <TABLE>...</TABLE>, ...).

Las directivas en HTML no tienen por qué ser escritas en mayúsculas, ya que pueden escribirse sin lugar a errores en minúsculas. En este texto, las directivas se emplearán en mayúsculas para mayor claridad y destaque del código HTML, del resto de texto.

Estructura del Documento

Todo el contenido de un documento HTML debe encontrarse englobado en el interior de la directiva cerrada <HTML>...</HTML>. Esto indica al navegador que estamos empleando que todo lo que se encuentra entre estas dos marcacs, es código HTML y que debe ser interpretado como tal.

La directiva <HTML>...</HTML> contiene en su interior 2 bloques: <HEAD>...</HEAD> que es la directiva que se�ala la cabecera del documento y, <BODY>...</BODY>, que contiene el cuerpo del documento o para entendernos lo que visualizamos en el navegador con el formato correspondiente. En resumen un fichero de HTML sería de la forma:

<HTML>
     <HEAD>
     ...
     </HEAD>
     <BODY>
     ...
     </BODY>
</HTML>

<HEAD> CABECERA DEL DOCUMENTO

Esta cabecera contiene esencialmente información del documento. Entre esta directiva podremos poner otras directivas que acontinuación explico:

<BASE>
Se emplea para especificar un directorio de trabajo (o base) distinto del que actualmente estemos trabajando. Cuando un navegador lee un documento, toma como dirección de este documento con una dirección en el que se halla (http://www.miserver.es/directorio/index.html), como refencia base para el resto del documento. Si ahora usásemos una imagene en nuestro documento (ver sección IMAGENES) con la directiva:

<IMG HREF=�dibujos/indice.gif�>

el navegador buscará el dibujo en http://www.miserver.es/directorio/dibujos/indice.gif (ya que para el navegador el directorio base es directorio y la refencia de la imagen, el navegador la hece sobre esta referencia).

Suponemos ahora que el documento index.html lo modificamos, y para comprobar que funciona (tras haberlo modificado), lo colocamos en la dirección: http://www.miserver.es/pruebas/index.html.

La imagen que tenemos referenciada como <IMG HREF=�dibujos/indice.gif�>, ahora será buscada en http://www.miserver.es/pruebas/dibujos/indice.gif, directorio que seguramente no exista y por lo tanto no veremos la imagen. Aquí es donde entra una de las aplicaciones de la directica <BASE>.

Si en el ancabezado indicamos cuál es el directorio base o raíz de nuestro documento, el resto de referencias a imágenes las podremos seguir manteniendo, de forma que si ponemos:
```
<HTML>
     <HEAD>
     <BASE HREF=� http://www.miserver.es/directorio/�>
     ...
```
podemos cambiar el documento HTML que queramos de directorio, que las referencias de las imágenes las seguirá manteniendo.
<META>
Esta es otra directiva que puede incluirse entre las directivas <HEAD>...</HEAD>. Se usa para incluir metainformación no definida en las restantes directivas HTML.

Una aplicación mucho más práctica es la construcción de páginas dinámicas con Netsacpe, lo que se verá más adelante. El siguiente ejemplo, tras cargar el documento, carga otro al cabo de 10 segundos, si el usuario no sigue antes de este príodo de tiempo ningún otro enlace:
```
<HTML>
     <HEAD>
     <META http-equiv=REFRESH content=�10;URL=http://www.miserver.es/directorio/siguiente.html�>
     ...
```
...
<META> es una directiva obligatoria en ningún documento HTML, sino que es opcional totalmente.

TRUCO: Podemos hacer con esta directiva, que al finalizar la carga de la página, en lugar de hacer que tras un tiempo salte a otra, suene una cacnión, en formato .au (Real Audio, reconocido por Netscape).
<TITLE>
Es otra directiva de la cabecera del documento y en este caso es una directiva cerrada a diferencia de las anteriores que eran abierta (<TITLE>...</TITLE>). Esta directiva nos da la opción de darle un título al documento, y mejor aún, permite visualizarlo en el visualizador de la barra del navegador:
```
<HTML>
     <HEAD>
     <TITLE> Documento de Javier Gorriz </TITLE>
     </HEAD>
     ...
```
Aunque en principio no se imponen límites a la longitud de un título, conviene ser razonable y no usar ni nombre largos nombre muy peque�os. En este tipo de directiva, no se puede emplear ninguna directiva que modifique el tipo de texto, es decir, no podemos ponerlo en negrilla, ni subrayado, ni en cursiva, ni cambiarle el color, simplemente no debemos limitar a poner el texto que deseemos. Ninguna modificación surtirá efecto, y por el contrario serán también parte del título las distintas directivas que queramos emplear para modificar la apariencia del título.

Aunque está directiva a diferencia de las anteriores, no es obligatoria, es conveniente poner título a nuestra página ya que podremos identificarla en todo momento sin tener que verla por completo, para conocer el contenido de la misma.

TRUCO: En Netscape se pueden intentar efectos de �scrolling� o texto pasante en el título del mismo, separando las distintas líneas con el carácter �backspace�.

<BODY> CUERPO DEL DOCUMENTO

En el cuerpo del documento se encontrarán todas las directivas HTML así como el texto, las imágenes, sonidos, tablas, listas, etc... Como descripción gráfica, podremos decir que todo lo que aparezca entre las directivas <BODY>...</BODY> será visualizado de una u otra manera en la pantalla del navegandor.

Esta directiva puede alojar en su interior una serie de atributos que suelen hacerla de lo más interesante en lo que se refiere a la presentación principal del documento HTML.

BACKGROUND="..."

Este atributo define un gráfico en formato .jpg o .gif que nos servirá de fondo para la página de nuestro documento. El gráfico que empleemos se pondrá en toda el área de visualización del documento, de forma que complete un mosaico en el que repite el motivo que no es otro que la imagen que definimos en esta directiva.

La imagen que nos servirá de fondo en nuestra página, puede ser puesta con su ruta absoluta de referencia en el servidor, como por ejemplo la ruta absoluta http://www.miservidor.es/fondos/imagen.gif, lo que nos cargaría la imagen.gif definida en la ruta de internet http://www.miservidor.es/fondos/, como fondo de nuestra pantalla, o con su ruta relativa como podría ser imagen.gif, que indicaría al servidor que dicho imagen GIF, está situada en el mismo directorio del documento que se está cargando en el navegador.

NOTA: En el caso de que nuestro visitante tenga desactivada la opción de cargar imágenes, el fondo de nuestra página no sería cargada, y el fondo que aparecería (en caso de que no lo impidieramos definiendo otro color de fondo), sería de color gris oscuro.

BGCOLOR="..."

Este atributo define el color que aparecerá de fondo en nuestra página. Por defecto, en el navegador Netscape, aparecería de color gris oscuro a no ser que se le definiera otro color.

Los colores se definiran de dos formas: en formato RGB, o dando el nombre del color deseado en inglés.

El formato RGB lo que hace es definir en 3 pares de números hexagesimales, el valor de Rojo (Red), Verde (Green) y Azul (Blue) en cantidad que va desde 0 a 255 (00-FF en hexagesimal). El conjunto en total nos da un color deternimado que será el indicativo del que aparecerá de fondo en nuestro documento. En el caso de que definamos el color del modo RGB, debemos anteponer una almohadilla (#) de forma que el navegador con esta almohadilla sepa que el siguiente número, es un número hexagesimal y no una serie de caracteres. Por ejemplo, BGCOLOR="#FF0000" en el atributo <BODY> (<BODY BGCOLOR="#FF0000">), nos dará el color de fondo ROJO, el BGCOLOR="#00FF00" el color VERDE y el BGCOLOR="#0000FF" el color AZUL.

Existen muchos programas que nos permiten seleccionar el color que deseemos sintener que hacer cálculos hexagesimales del valor RGB del color, por lo que nosotros solo nos debemos de preocupar de elegir el color y colocar el atributo con el valor correspondiente dentro de la directiva <BODY>.

La otra forma de definir los valores de los colores (por lo menos en Netscape), es la de otorgar el nombre en Ingles del color que deseemos colocar. Esta opción tiene el fallo de que no todos los colores están definidos, y sólo los más básicos son los definidos. Por ejemplo BGCOLOR="Red", BGCOLOR="Green" y BGCOLOR="Blue", nos daría al igual que antes, colores Rojo, Verde y Azul de fondo de documento

TRUCO: Aunque nuestro visitante tenga predefinido el no cargar las imágenes y por lo tanto no ver nuestro fondo (en caso de que tuvieramos una imagen), si definimos un color al mismo tiempo que definimos una imagen de fondo, si el usuario no ve las imágenes, SI verá el color que predefinamos,permitiendonos definir un color similar al que predomine en el mosaico que genera la imagen que colocamos de fondo, y dando un efecto similar al que tendría si hubiera cargado la imagen de fondo.

TEXT="..."

Es un atributo de la directiva <BODY>, que nos permite modificar el color del TEXTO general que aparecerá en nuestro documento. Es decir, del total del texto que se muestre en la página HTML que hagamos. Al igual que el color de fondo podemos definirlo del modo anterior: o bien en RGB o bien con el nombre en ingles del color.

Por defecto, si no definimos el color del texto, se mostrará el color NEGRO (por defecto).

LINK="..."

Este atributo define el color de cualquier enlace que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color será AZUL.

VLINK="..."

Este atributo define el color de cualquier enlace ya visitado que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color será VIOLETA.

ALINK="..."
Este atributo define el color de cualquier enlace sobre el que mantengamos pulsado el ratón sin soltar, es decir manteniendo sobre el enlace el ratón con el botón pulsado (lo que haría que se habriera ese enlace en otra ventana). Se define al igual que los atributos anteriores. Por defecto el color será ROJO.