HTML 2.0. Manual de Referencia - Nuevos Elementos

Los nuevos elementos definidos por Netscape y Microsoft son los siguientes:

• NOBR/WBR. Permite indicar cómo se cortan las líneas en el visor.
• CENTER. Permite centrar bloques.
• FONT. Cambia tamaño y/o propiedades de los tipos de letra.
• BASEFONT. Indica la fuente por defecto.
• EMBED. Permite la inclusión de cualquier tipo de objetos en una página HTML (sólo Netscape Navigator 2.0 y posteriores).
• APPLET. Java Applets (sólo Netscape Navigator 2.0 y posteriores).
• MARQUEE. Marquesina de texto (sólo Microsoft Explorer 2.0 y posteriores).
• MAP. Mapa de selección dirigido por el cliente.
• FRAME. Divide en vistas (marcos) los documentos (Netscape Navigator 2.0 y posteriores).
• SCRIPT. Programa de script del documento (Netscape Navigator 2.0 y posteriores).

NOBR/WBR

El elemento NOBR viene de NO BReak (Sin cortes). Esto quiere decir que el texto situado entre las marcas <NOBR> y </NOBR> no puede ser representados con saltos de línea entre ellos. Aunque en algunos casos esta marca es necesaria, es recomendable controlar el uso de este elemento, ya que una línea larga dentro de un elemento NOBR puede tener un aspecto realmente extraño.

El elemento WBR viene de Word Break (Partición de palabra). Este elemento es para el caso en el que tenemos una sección NOBR y sabemos en qué punto exacto queremos que se corte. El elemento sólo es informativo, es decir, no provoca el salto de línea (para eso está la marca BR), sólo le dice al visor que ese sería un buen lugar por donde cortar si hace falta.

CENTER

Todas las líneas de texto entre las marcas <CENTER> y </CENTER> se centran respecto a los márgenes izquierdo y derecho actuales.

El uso de la nueva marca en lugar de aprovechar el atributo ALIGN de los párrafos (<P align="center">) está motivado por que el uso de este último hace que muchos visores existentes fallen, además de ser mucho menos general y no soportar todos los casos en los que sería deseable el centrado. Esta marca está soportada por la mayoría de navegadores de última generación.

FONT

Con el nuevo elemento FONT se puede cambiar el tamaño de las fuentes, usando la marca <FONT SIZE=valor>Texto</FONT>. Los tamaños van de 1 a 7. Los valores dados en el atributo SIZE pueden tener un signo + o - delante, indicando un incremento o disminución del tamaño respecto al tamaño base de la página. El tamaño base por defecto es 3, aunque se puede cambiar con el elemento BASEFONT.

Además de soportar el elemento FONT, el visor de Microsoft soporta el atributo FACE para especificar el tipo de letra a emplear. Por ejemplo FACE="arial" indica que el tipo a emplear es el arial. Esta característica sólo es útil en Windows, ya que los nombres de las fuentes se toman del Gestor de Tipos de ese sistema, por lo que es necesario saber los nombres y tener los tipos instalados para que esto funcione. Por tanto, en máquinas bajo el MacOS o alguna versión de UNIX no es posible sacar partido de esta facilidad.

Por último, con la aparición del Netscape 2.0 se ha incluido un nuevo atributo al elemento FONT, COLOR, que permite especificar el valor RGB (de la misma manera que en el cuerpo de la página) empleado para mostrar un bloque de texto.

BASEFONT

Especifica el tamaño base de las fuentes (atributo SIZE) para los cambios de tamaño relativos. Generalmente se pone al principio del cuerpo de la página. Por defecto se asume <BASEFONT SIZE=3>.

Hay que indicar que si ponemos <BASEFONT SIZE=7>, entonces <FONT SIZE=+3> no funcionará, ya que 7 es el máximo tamaño de las fuentes. Lo mismo sucede con los decrementos de tamaño para un tamaño base de 1.

EMBED

El elemento EMBED permite la inserción de cualquier tipo de objetos directamente en una página HTML. Estos objetos son soportados por módulos específicos de los visores (Netscape Plug-ins). EMBED puede tomar todo tipo de atributos. A nivel general se han definido los siguientes:

• SRC. URL del objeto. Este atributo es obligatorio.
• HEIGHT. Altura del objeto.
• WIDTH. Anchura del objeto.

La imagen del objeto se escalará para encajar en el alto y ancho especificados.

APPLET

Netscape Navigator 2.0 y el HOT JAVA Browser soportan la inclusión de JAVA Applets (programas escritos en Java, que pueden ser incluidos y ejecutados en un documento HTML). Esta inclusión se realiza mediante el elemento APPLET.

Veamos un ejemplo:

|| <APPLET CODE="Blink.class" WIDTH=300 HEIGHT=100>
<PARAM name=lbl value="Este es un texto que se desplaza ... ">
<PARAM name=speed value="4">
</APPLET>
||

Aquí, CODE da el nombre de la aplicación a ejecutar, WIDTH y HEIGHT el espacio en píxeles que necesita y los elementos PARAM dentro de APPLET, los parámetros a pasar al programa. Es probable que en un futuro se reemplace el elemento APPLET por otro más genérico, que podría ser el EMBED comentado antes.

MARQUEE

Este elemento es soportado únicamente por el programa Microsoft Internet Explorer 2.0 y se emplea para crear una marquesina de texto que se desplaza.

Por ejemplo:

|| <MARQUEE ALIGN="top">Texto que se desplaza ...</MARQUEE>
||

crea una marquesina con el texto desplazándose a través del marco. La utilidad de este elemento es relativa, ya que con la inclusión de los JAVA Applets, se puede obtener el mismo resultado con un programa que, además, puede hacer muchas otras cosas.

MAP

Una de las cosas que ha popularizado el uso del Web es el empleo de Mapas de Selección (Image-maps). El uso más común es el de permitir a los usuarios acceder a documentos pinchando en distintas áreas de una imagen.

Pese a ser tan popular, la implementación actual tiene varias limitaciones, como ya hemos apuntado anteriormente:

1. Sólo funciona mediante el protocolo HTTP, haciéndolo inútil para leer documentos locales (en el disco duro, disquete o CD-ROM) o accedidos mediante otros protocolos.
2. Se hace necesaria una transacción con el servidor sólo para devolver un enlace, lo que puede requerir mucho tiempo si accedemos a uno distante.
3. A diferencia de lo que sucede con los enlaces normales, no hay ningún medio para el programa cliente de dar información visual al usuario de a dónde va a saltar si pincha en una porción de la imagen antes de que lo haga.
4. Por último, la implementación de los mapas de selección es dependiente del servidor, por lo que la portabilidad de los documentos es relativa.

Una posible solución sería la implementación del elemento FIG del borrador del HTML 3.0, pero no se ha considerado apropiada por varias razones:

1. El soporte completo del elemento FIG requiere un proceso adicional considerable por parte del visor.
2. El mapa no puede ser empleado en los visores que no soportan el elemento FIG.
3. Precisa que la descripción del mapa esté especificada cuando aparece el mapa, lo que no es apropiado en algunas aplicaciones.

La extensión propuesta resuelve todos estos problemas; por un lado se añade un nuevo elemento para describir los mapas (MAP) y por otro se añade un atributo al elemento IMG para indicar que se debe usar la descripción para gestionar el mapa (USEMAP).

Las regiones de cada imagen se describen usando el elemento MAP. Este elemento describe cada región de la imagen e indica a dónde apunta. El formato básico del elemento es:

|| <MAP NAME="nombre_mapa">
<AREA [SHAPE="figura"] COORDS="x,y,..."
[HREF="referencia" | NOHREF]>
</MAP>
||

El atributo NAME indica el nombre del mapa, para poder referenciarlo desde los elementos IMG (es por lo tanto necesario).

En el elemento AREA se indica el tipo de figura (SHAPE), las coordenadas de la misma (COORDS) y la referencia a emplear cuando se selecciona un punto del área (HREF o NOHREF).

El tipo de figura puede ser SHAPE="RECT", SHAPE="POLY", SHAPE="CIRCLE" o SHAPE="DEFAULT" (rectángulo, polígono, círculo o por defecto). Si se omite el tipo de figura, se asume RECT.

El atributo COORDS da las coordenadas de la figura en píxeles y sus valores dependen del tipo de figura:

• Para las regiones rectangulares las coordenadas se dan de la forma "izquierda, arriba, derecha, abajo". La región definida incluye la esquina inferior derecha. Por ejemplo, para especificar el área total de una imagen de 100x100 píxeles las coordenadas serían "0,0,99,99").
• Para los polígonos se especifica una lista de puntos ("x1, y1, x2, y2, …"). El visor cierra el polígono automáticamente.
• Los círculos se definen con un punto central y un radio (un total de tres valores, coordenadas x e y, y el valor del radio).

Por último se incluye el atributo HREF o NOHREF, el primero indicará a donde ir si se pincha en ese área y el segundo que no se debe hacer nada si se pincha en ese área. Hay que indicar que los anclajes relativos se expandirán tomando como base el URL de la descripción del mapa (si hay una marca BASE en el documento que contiene la descripción, será ese URL el empleado, no el del documento desde el que se referencia).

Se puede especificar un número arbitrario de atributos AREA. Si dos de las zonas intersectan, la que aparece en primer lugar en el mapa toma precedencia en la zona en la que se superponen.

El atributo USEMAP indica que la imagen es un mapa gestionado por el cliente, aunque puede ser usado junto al atributo ISMAP, de manera que un visor que no soporte USEMAP accederá al mapa del servidor.

El valor del atributo indica el mapa a emplear con la imagen, en un formato similar al del atributo HREF en los anclajes. Así, una referencia a un mapa que comience con una almohadilla se encontrará en el mismo documento que la referencia.

Veamos un ejemplo completo:

|| <HTML>
<HEAD>
<TITLE>Ejemplos de mapas de selecci&oacute;n</TITLE>
</HEAD>
<BODY>
<!-- Mapa para una imagen de 160x60 -->

---

<MAP NAME="colores">
<AREA SHAPE="POLY" COORDS="10,49,29,10,49,49" HREF="rojo.html">
<AREA SHAPE="RECT" COORDS="60,10,99,49" HREF="verde.html">
<AREA SHAPE="CIRCLE" COORDS="130,30,20" HREF="azul.html">
<AREA SHAPE="RECT" COORDS="0,0,159,59" HREF="negro.html">
<!-- La última área hace que todo lo que no estaba marcado por las anteriores sea negro -->

---

</MAP>
<H1>Ejemplos de mapas de Selecci&oacute;n</H1>
<P>S&oacute;lo podr&aacute; seleccionar en esta barra si su visor soporta mapas sensibles controlados por &eacute;l:</P>
<IMG SRC="colores.gif" USEMAP="#colores">
<P>Este mapa funcionar&aacute; independientemente del tipo de visor:</P>
<A HREF="/cgi-bin/imagemap/colores">
<IMG SRC="colores.gif" USEMAP="#colores" ISMAP>
</A>
<P>Pinchando aqu&iacute; llegar&aacute; a una p&aacute;gina con el mismo contenido de la p&aacute;gina en formato texto (siempre y cuando su visor no soporte mapas sensibles de usuario):</P>
<A HREF="colores.html">
<IMG SRC="colores.gif" USEMAP="#colores">
</A>
</BODY>
</HTML>
||
El ejemplo es autoexplicativo.

Para terminar diremos que este modelo de mapas de selección basado en los clientes se justifica por varias razones:

• La sintaxis da flexibilidad al autor para diseñar páginas utilizables en visores que no soporten el mecanismo, ya que los elementos MAP y AREA serán ignorados y el si el documento está en un servidor, éste puede proporcionar el mismo servicio con ISMAP. Por otro lado, si no se usa el servidor, el autor puede elegir entre no mostrar la imagen como un anclaje o enlazarla con otra página que puede proporcionar una lista equivalente de opciones en modo texto.
• La necesidad de mecanismos no basados en el HTTP para el uso de mapas de selección también se incrementará al aparecer cada vez más archivos en HTML en discos flexibles y CD-ROM. Esto puede ser fundamental también para el método alocativo de acceso, es decir, aquél en el que la información se trae una sola vez y se puede acceder repetidamente a ella en local.

FRAMES

Las vistas (frames) permiten dividir las páginas HTML en varias regiones con barras de desplazamiento, lo que permite presentar la información de manera muy flexible.

Cada vista o región tiene distintas características:

• Se le puede asignar un URL, de modo que puede cargar información independientemente de otras vistas de la página.
• Puede asignársele un nombre (NAME), permitiendo que sean referenciadas por otros URL.
• Puede redimensionarse dinámicamente si el usuario cambia el tamaño de la ventana (aunque el redimensionamiento puede deshabilitarse, asegurando un tamaño constante de las vistas).

Estas propiedades ofrecen nuevas posibilidades:

• Los elementos que el usuario debe ver siempre, como barras de control, copyrights o títulos gráficos pueden colocarse en vistas individuales estáticas. Mientras el usuario navega por el servidor en las vistas dinámicas, los contenidos de la vista estática permanecen fijos, independientemente de que otras vistas sean redibujadas.
• Los índices de contenidos son más funcionales. Una vista puede contener una página con enlaces que, al seleccionarse, muestren los resultados en una vista contigua.
• El diseño de vistas paralelas permite enviar consultas desde una de ellas y ver los resultados en la otra, teniendo pregunta y respuesta visibles en la misma página.

La sintaxis de las vistas es muy similar a la de las tablas, y están diseñadas para ser procesadas rápidamente por los visores.

Los nuevos elementos definidos son:

• FRAMESET, que define un conjunto de vistas,
• FRAME, que define las características de una vista concreta, y
• NOFRAMES, que permite incluir información para visores que no disponen de soporte para múltiples vistas.

Comentaremos a continuación cada uno de ellos.

El primer elemento, <FRAMESET>, es el principal contenedor para una vista. Toma dos atributos ROWS y COLS (filas y columnas). Un documento con vistas no tiene cuerpo (BODY) y ninguna de las marcas que normalmente se colocarían en él puede aparecer antes de la marca <FRAMESET> o esta última será ignorada.

La marca inicial FRAMESET tiene su correspondiente marca de cierre </FRAMESET>, y dentro de ellas sólo se pueden tener otras marcas de FRAMESET anidadas, marcas FRAME o la marca NOFRAMES.

Los valores de los atributos (ROWS y COLS) necesitan explicación; tanto uno como otro toman como valor una lista de valores separados por comas. Estos valores pueden ser: valores absolutos en píxeles, porcentajes entre 1 y 100 (tantos por cien), o valores de escala relativos.

En el caso del atributo ROWS, el número de filas está implícito en el número de elementos de la lista. Dado que el tamaño total de todas las filas debe coincidir con la altura de la ventana, el alto de las filas debe ser normalizado. Si no se incluye el atributo ROWS, se asume una sola fila de la misma altura que la ventana. El atributo COLS se comporta de manera similar.

Una vez definidas las filas y columnas, la asociación de elementos se hace en función de la forma de declararlas, por ejemplo si tenemos 4 filas y 2 columnas, tendremos un total de 8 valores, donde los primeros cuatro se asignarán a las vistas 1, 2, 3 y 4 de la primera columna, mientras los cuatro restantes corresponderán a las mismas vistas de la segunda columna.

Comentemos con algo más de detalle la sintaxis de la lista de valores:

• valor. Se asume que un valor numérico simple es un tamaño fijo en píxeles. éste es el tipo de valor más crítico, ya que el tamaño de la ventana del cliente variará mucho entre unos y otros. Si se usan valores fijos, será necesario mezclarlos con uno o más valores relativos, ya que en otro caso el visor del usuario probablemente ignorará los valores dados para asegurarse que las proporciones totales de las vistas toman el 100% del ancho y alto de la ventana del usuario.
• valor%. Este valor indica un porcentaje simple entre 1 y 100. Si el total de porcentajes supera 100, todos los porcentajes se escalan hacia abajo. Si el total es menor que 100, y existen vistas de tamaño relativo, el espacio sobrante se les dará a ellas. Si no hay vistas de tamaño relativo, todos los porcentajes se escalarán hacia arriba para llegar a un total del 100%.
• valor*. El valor de este campo es opcional, un sólo asterisco implica una vista de "tamaño relativo", lo que se interpreta como una petición de darle a la vista todo el espacio que quede libre. Si hay varias vistas de tamaño relativo, el espacio libre se divide entre ellas. Si hay un valor delante del asterisco, la vista que lo tenga toma más espacio relativo, por ejemplo "2*,*" daría 2/3 del espacio a la primera vista y un tercio a la segunda.

Veamos algunos ejemplos (sólo hemos empleado filas, pero se haría lo mismo para poner sólo columnas o para definir filas y columnas):

La siguiente declaración implica una página con tres vistas, la primera y la segunda más pequeñas que la central:

|| <FRAMESET ROWS="20%,60%,20%">
||

esta otra implica tres filas con las dos de los extremos de tamaño fijo y la central ocupa el espacio restante (variará según el tamaño de la ventana):

|| <FRAMESET ROWS="100,*,100">
||

La marca FRAMESET puede estar incluida en otras marcas FRAMESET. En ese caso, la subvista completa se coloca en el espacio que hubiera sido empleado para vista si en lugar de una marca FRAMESET hubiéramos puesto una marca FRAME.

La marca <FRAME> define una vista dentro de un conjunto de ellas. La marca FRAME no contiene nada, por lo que no tiene marca de cierre. Puede tener hasta seis atributos: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, y NORESIZE. Veamos qué indica cada uno de ellos:

• SRC="url". El atributo SRC toma como valor el URL del documento que se debe mostrar en esa vista en particular. Si no se incluye, se muestra un espacio en blanco del tamaño que debería haber tenido la vista.
• NAME="nom_vista". El atributo NAME se emplea para asignarle un nombre a una vista, de manera que pueda ser referenciada por enlaces en otros documentos (generalmente desde otras vistas en el mismo documento). El atributo es opcional; por defecto las ventanas no tienen nombre. Los nombres deben comenzar con caracteres alfanuméricos y pueden tener marcados sus contenidos con el nuevo atributo TARGET.
• MARGINWIDTH="valor". Este atributo se emplea cuando se quiere controlar el ancho de los márgenes izquierdo y derecho de una vista. Si se especifica un valor, será en píxeles. Los márgenes no pueden tener un tamaño menor que uno (los objetos dentro de la vista no pueden tocar los bordes) y no pueden tener un tamaño que no deje sitio para los contenidos del documento. Este atributo es opcional; por defecto es el visor el que decide el tamaño apropiado.
• MARGINHEIGHT="valor". Es igual que el anterior, pero se refiere a los márgenes superior e inferior.
• SCROLLING="yes|no|auto". El atributo SCROLLING se emplea para indicar si la vista debe tener barras de desplazamiento o no. Si ponemos yes tendremos siempre barras en esa vista, si ponemos no, nunca usaremos barras, mientras que auto hace que el visor decida cuando son necesarias y las coloque donde sea cuando hagan falta. Este atributo es opcional; el valor por defecto es auto.
• NORESIZE. Este atributo no tiene valores, es simplemente un indicador que dice que la vista no puede ser redimensionada por el usuario. Para redimensionar los usuarios seleccionan un borde de la vista y lo desplazan a una nueva posición. Si una vista adyacente a un borde no se puede redimensionar, todo ese borde no se podrá mover, lo que condicionará el redimensionado de otras vistas. El atributo es opcional, por defecto todas las vistas son redimensionables.

Un visor que no soportara vistas no mostraría nada de un documento con cuerpo <FRAME>, para solucionarlo existe el último elemento mencionado, <NOFRAMES>, que se emplea para incluir una página alternativa para esos visores. Un visor que sí soporte la marca <FRAME> ignoraría todas las marcas y datos entre <NOFRAMES> y </NOFRAMES>.

Veamos un ejemplo:

|| <HTML>
<HEAD> <TITLE>La ventana Indiscreta</TITLE> </HEAD>
<FRAMESET ROWS="100, *, 100">
<NOFRAMES>
<BODY>
Su visor no tiene vistas, pinche <A HREF="nfindex.html">aqu&iacute;</A> para ver un &iacute;ndice de contenidos.
</BODY>
</NOFRAMES>
<FRAME SRC="menu.html">
<FRAMESET COLS="30%, 70%">
<FRAME NAME="indice">
<FRAME NAME="contenido">
</FRAMESET>
<FRAME SRC="copyright.html">
</FRAMESET>
</HTML>
||

SCRIPT

Introducida por Netscape, permite incluir el código de programas (scripts) directamente en el documento HTML. Sólo funciona en las versiones del Netscape Navigator 2.0 y superiores.

La sintaxis de la inclusión de los scripts en los documentos es:

|| <SCRIPT>
Instrucciones en JavaScript
...
</SCRIPT>
||

El atributo opcional LANGUAGE especifica el lenguaje de programación empleado para escribir el guión (pudiendo ser empleado en un futuro para incluir guiones en otros lenguajes de automatización como el AppleScript, PERL o VisualBASIC):

|| <SCRIPT LANGUAGE="JavaScript">
Instrucciones en JavaScript ...
</SCRIPT>
||

La marca <SCRIPT>, y su cierre, </SCRIPT>, pueden contener cualquier numero de sentencias JavaScript en un documento. El JavaScript distingue entre mayúsculas y minúsculas.

Una de las peculiaridades de esta marca es que su contenido no es ignorado por los visores que no lo soportan, por lo que se ha incorporado un mecanismo de ocultación del código: los guiones o scripts se pueden colocar dentro de comentarios:

|| <SCRIPT LANGUAGE="JavaScript">
<!-- Comienza la ocultación del guión.
Instrucciones en JavaScript ...
Termina aquí la ocultación. -->
</SCRIPT>
||

Aunque no vamos a describir aquí el JavaScript, hay que indicar un par de cosas sobre cómo se analizan los guiones y dónde se deben colocar en las páginas:

• Definición y llamada de funciones. Los guiones colocados entre marcas SCRIPT se evalúan después de cargar toda la página. Las funciones se almacenan, pero no se ejecutan hasta que no se produce algún evento en la página. Es importante marcar la diferencia entre la definición de la función y la llamada a la misma: la definición simplemente le asigna un nombre y especifica qué hacer cuando es llamada, mientras que la llamada es la que realmente ejecuta el código empleando los parámetros indicados.
• Situación de los guiones. Generalmente, se deben definir las funciones para una página en la cabecera de la misma (HEAD). Dado que la cabecera es lo primero que se carga, esta práctica garantiza que las funciones se han cargado antes de que el usuario tenga opción de hacer cualquier cosa que pueda llamar a una función.

Puede encontrar más información sobre el JavaScript en el URL: http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/##∞.