Quizás por la rápida comercialización de la Red y por el deseo de los diseñadores y usuarios de la Telaraña de tener un mayor control sobre el aspecto de las páginas, los dos navegadores más populares Netscape Navigator y Microsoft Explorer han introducido extensiones propias al HTML, aunque, como hemos visto, han incorporado muchas de las propuestas del HTML 3.0 a sus visores.
En este caso, comentaremos las extensiones separando entre los elementos nuevos y los atributos añadidos a los ya existentes:
Prácticamente todos los comentados son propios del visor Netscape. Separaremos aquí entre las extensiones para elementos de la cabecera y para elementos del cuerpo:
Atributos para Elementos de la Cabecera (HEAD)
Dentro de los elementos de la cabecera se han incluido atributos para los elementos <ISINDEX> y <META>.
En el primero se ha incluido el atributo PROMPT, que permite al autor indicar que mensaje debe aparecer en la página antes del campo de entrada del índice. Si no se emplea el atributo el mensaje por defecto es:
|
This is a searchable index. Enter search keywords: |
La extensión del segundo está relacionada con la actualización dinámica de los documentos, mediante el empleo del atributo HTTP-EQUIV con el valor "Refresh".
Por ejemplo, la siguiente cabecera hace que después de 19 segundos se acceda al URL especificado:
|
<META HTTP-EQUIV="Refresh" CONTENT="19;
URL=http://www/19.html"> |
Mientras que una cabecera como:
| <META HTTP-EQUIV="Refresh" CONTENT="10">
|
hace que el visor espere 10 segundos y vuelva a acceder al documento presentado actualmente.
Si su visor soporta el atributo puede ver un ejemplo pinchando aquí.
Atributos para el Elemento BODY
Netscape ha introducido nuevos atributos para el elemento BODY, principalmente para indicar los colores del texto y el fondo de los documentos (además de soportar el uso del BACKGROUND del HTML 3.0):
Es muy probable que todos ellos sean incorporados al estándar.
Atributos para la Línea Horizontal (<HR>)
Se han añadido cuatro atributos para permitir ajustar el aspecto de la línea horizontal. Los atributos son SIZE, WIDTH, ALIGN y NOSHADE:
Hay que señalar que prácticamente todos estos atributos sólo tienen sentido para visores gráficos, e incluso algunos sólo en el Netscape, como el NOSHADE, ya que asumen una presentación con sombra por defecto de la línea que no tiene por qué ser igual en todos los visores.
Básicamente se trata de atributos para controlar el aspecto de las marcas de cada línea de la lista y los números en las listas ordenadas.
Para la lista desordenada (<UL>), se emplean por defecto marcas circulares en cada línea, que van cambiando conforme las listas se van anidando. En Netscape pasan de un disco sólido a un círculo o un cuadrado. El nuevo atributo TYPE permite especificar qué tipo de símbolo queremos emplear en nuestras líneas independientemente del nivel de anidamiento: TYPE=disc, TYPE=circle o TYPE=square (disco, círculo o cuadrado).
Las listas ordenadas (<OL>) siempre comienzan en 1 y van subiendo progresivamente. Se han añadido a este elemento dos atributos: TYPE y START. El primero permite indicar qué letras se deben emplear para cada línea: letras mayúsculas (TYPE=A), letras minúsculas (TYPE=a), números romanos en mayúscula (TYPE=I), números romanos en minúscula (TYPE=i) o números (TYPE=1).
El atributo START permite especificar el número del primer ítem de la lista, para cuando queramos que comiencen en un valor distinto al uno. El orden se da siempre en número, y se presenta según el tipo especificado. Por ejemplo, START=5 se mostraría como 'E', 'e', 'V', 'v', o '5' según el tipo.
Para dar aún mayor flexibilidad en las listas se han añadido también atributos al elemento <LI>. Por un lado, se ha añadido el atributo TYPE, que puede tomar los mismos valores que toma en la lista en la que se encuentra la línea. Cuando se especifica, cambia el tipo de lista para ese ítem y los siguientes.
Además, si la línea pertenece a una lista ordenada también se puede emplear el atributo VALUE, de manera que se puede modificar el número de cuenta para ese ítem y los siguientes.
Atributos para las Imágenes (<IMG>)
Probablemente uno de los elementos con mayor número de cambios es la marca IMG. En realidad esto se debe a que se han incorporado muchas de las posibilidades del elemento FIG del borrador al elemento IMG, sin incorporar soporte para el primero.
En primer lugar se ha extendido el número de valores posibles de la alineación de las imágenes. Los valores posibles son: left, right, top, texttop, middle, absmiddle, baseline, bottom y absbottom.
Los dos primeros valores, "left" y "right" (izquierda y derecha), tienen características especiales, ya que se emplean para que las imágenes sean "flotantes".
Así, una imagen incluida con <IMG ALIGN=left> se colocará en el primer hueco disponible a partir del margen izquierdo, hacia abajo, y el texto subsiguiente se colocará a la derecha de la imagen. En el caso del alineamiento a la derecha (ALIGN=right), la imagen se coloca a la derecha y el texto a la izquierda.
La posibilidad de imágenes flotantes ha hecho que Netscape haya implementado el soporte para el atributo CLEAR en los saltos de línea (<BR>), con el mismo funcionamiento que en la propuesta del estándar descrita anteriormente.
El resto de opciones son simplemente variaciones sobre las tres originales (top, middle y bottom), necesarias para determinar claramente las posiciones del texto respecto a las imágenes. Los valores y las alineaciones asociadas son:
En realidad, los nuevos valores sólo tienen sentido en el Netscape Navigator, ya que no todos los visores implementan igual las alineaciones de imágenes y textos, de hecho han incluido nuevos valores para no estropear las páginas ya hechas, pero en realidad hubiera bastado con modificar la gestión de los tres valores estándar en el visor. Además de los nuevos valores para ALIGN, Netscape incorpora varios atributos nuevos:
Pinche aquí para ver un ejemplo de las alineaciones.
Extensiones para los Anclajes (TARGET)
En el HTML 2.0 se incluye el atributo TITLE para los anclajes, que permite nombrar los recursos antes de obtenerlos. Ese nombre se puede emplear para las ventanas en las que se presentan recursos que no tienen nombre.
En el Netscape Navigator se ha introducido algo similar (aunque no exactamente igual), el atributo TARGET, que nos da el nombre de la ventana del Navegador a emplear, de modo que cuando se pincha en el enlace, el documento aparece en una ventana que tiene ese nombre. Si la ventana no existe, se abre una nueva y se le asigna el nombre dado por TARGET. Generalmente el nombre no se ve (se emplea el del recurso obtenido), pero otros anclajes pueden hacer referencia a esa ventana y, al seleccionarlos, el visor los muestra en ella.
La sintaxis es:
|
<A HREF="url.html" TARGET="nom_ventana">Pinche
aquí para abrir otra ventana</A> |
Además del atributo para los anclajes, se ha creado una marca BASE que permite indicar un nombre por defecto para cada enlace de un documento que no tiene el atributo TARGET. El formato es:
|
<BASE TARGET="ventana por defecto"> |
Los nombres de las ventanas deben comenzar por un carácter alfanumérico, si no, son ignorados. De todos modos, existe una serie de nombres especiales que empiezan con el carácter subrayado (_):
La utilidad de este atributo está en que podemos hacer que el cliente abra distintas ventanas para cada enlace, sin dejar de tener nuestra página disponible; además de sus usos en el nuevo elemento FRAME, que comentaremos más adelante.
Respecto a las tablas definidas en el HTML 3.0, Netscape ha incluido algunos atributos, relacionados con el control del tamaño de las tablas y los bordes:
Extensiones de los Formularios
Encontramos dos extensiones:
Un ejemplo de este tipo de formularios sería:
|
<FORM ENCTYPE="multipart/form-data" ACTION="_URL_"
METHOD=POST> Enviar este archivo: <INPUT NAME="userfile" TYPE="file"> <INPUT TYPE="submit" VALUE="Enviar"> </FORM> |
Los nuevos elementos definidos por Netscape y Microsoft son los siguientes:
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 representado 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 ése sería un buen lugar por donde cortar si hiciera falta.
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.
Con el nuevo elemento FONT se puede cambiar el tamaño de los tipos, 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 los tipos 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.
Especifica el tamaño base de los tipos (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 los tipos. Lo mismo sucede con los decrementos de tamaño para un tamaño base de 1.
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:
La imagen del objeto se escalará para encajar en el alto y ancho especificados.
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 pixeles 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.
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.
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:
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:
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"> |
El atributo NAME indica el nombre del mapa, para poder referenciarlo desde los elementos IMG (es, por 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 pixeles y sus valores dependen del tipo de figura:
Por último se incluye el atributo HREF o NOHREF, el primero indicará a dónde ir si se pincha en esa á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 se cortan, 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 que se debe 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ó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ón</H1> <P>Sólo podrá seleccionar en esta barra si su visor soporta mapas sensibles controlados por él:</P> <IMG SRC="colores.gif" USEMAP="#colores"> <P>Este mapa funcionará independientemente del tipo de visor:</P> <A HREF="/cgi-bin/imagemap/colores"> <IMG SRC="colores.gif" USEMAP="#colores" ISMAP> </A> <P>Pinchando aquí llegará a una página con el mismo contenido de la pá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, puede verlo pinchando aquí.
Para terminar diremos que este modelo de mapas de selección basado en los clientes se justifica por varias razones:
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:
Estas propiedades ofrecen nuevas posibilidades:
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:
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 pixeles, porcentajes entre 1 y 100, 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:
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:
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í</A> para ver un í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> |
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 número 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:
Puede encontrar más información sobre el JavaScript en: http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/ .