Curso de diseño Web HTML (página 2)

anterior

9. Formularios

La manera general para que los lectores de nuestra
página se puedan comunicar con nosotros es por medio de un
enlace a nuestra dirección de e-mail, con lo que
recibiríamos un e-mail convencional.

Pero puede ser que lo que necesitemos sea solamente una
respuesta concreta a unas opciones que presentaremos nosotros
mismos, o un comentario del usuario, para lo que le
suministraremos un espacio en donde introducirlo.

Se puede, hacer todo esto, además de otras cosas,
utilizando los formularios, con
los que se pueden confeccionar páginas que contengan los
elementos necesarios para ello, tal como botones de radio, listas de
selección, cajetines de introducción de texto y de
control, etc.,
como vamos a ver.

Los formularios
permiten que los demás nos envíen la información directamente a nosotros o bien
a nuestro servidor, en
donde hemos instalado un programa que
procese esta información. Por ejemplo, vamos a suponer
que queremos crear una lista de correo. Los usuarios pueden
introducir sus nombres y direcciones de e-mail y pulsar un
botón de envío.

Esos datos los podemos
recibir "en bruto" en nuestro correo, con los que
confeccionaríamos manualmente dicha lista de correo, sin
necesitar ningún programa para
ello. Este proceso es el
que vamos a comentar en este capítulo.

La otra posibilidad, de la que únicamente se va a
hacer esta mención, es que hubiéramos instalado en
nuestro servidor un
programa especial para procesar esos datos y
añadirlos a la lista de correo, y que incluso pudiera
devolver automáticamente al usuario algún tipo de
información. Para conseguir esto, los formularios
necesitan ejecutar programas o
scripts por medio del CGI (Common Gateway Interface). El CGI
permite a los formularios ser procesados por programas
escritos en cualquier lenguaje,
aunque los más usados en Internet son el Perl y el
C.

El tipo de formulario que se describe a
continuación podrá ser utilizado por la
mayoría de los navegadores,
con la notable excepción del Explorer (incluso la
versión 3.0), por lo que es conveniente suministrar al
final del formulario, como una alternativa para estos casos, un
enlace de e-mail ordinario (ver el Capítulo 4)

Estructura de un formulario

La estructura
general de un formulario es:

1.Etiqueta de inicio

El atributo ACTION indica la acción que se debe
efectuar y que es que los datos sean enviados por e-mail a la
dirección indicada. (Si hiciéramos
uso del CGI, sería precisamente aquí donde
indicaríamos su localización en el servidor, que
habitualmente es el directorio cgi-bin, para que procese los
datos).

El atributo METHOD=POST indica que los datos sean
inmediatamente enviados por correo a la dirección de
e-mail, nada más púlsar el usuario el botón
de envío.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las
respuestas las recibamos como un archivo de
texto,
perfectamente legible y sin codificar.

2.Cuerpo del Formulario (Elementos para introducir
los datos)

Los vamos a dividir en tres clases:

La introducción de los datos se consigue por
medio de la etiqueta:

<INPUT TYPE= "XXX" NAME="YYY" VALUE=
"ZZZ">

En donde:

Todo esto, que de momento parece muy confuso, se
aclarará al ir viendo los distintos casos.

Introducción por medio de
texto

Introducción por medio de texto (una
línea)

En este caso es XXX=TEXT, es decir, INPUT TYPE="TEXT".
El atributo VALUE no procede en este caso. Vamos a poner un
ejemplo.

solicitamos el apellido del usuario:

<FORM ACTION=
METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:

<BR><INPUT TYPE="TEXT"
NAME="Apellido">

</FORM>

Si el usuario introduce su apellido, p. ej. Ruiz, y
pulsa el botón de envío (que veremos más
adelante), recibiremos, un e-mail suyo con el siguiente
texto:

Apellido=Ruiz

La longitud de este formulario es por defecto de 20
caracteres. Se puede variar incluyendo en la etiqueta el atributo
SIZE="número". Por otra parte, sea cual sea la longitud
del formulario, si no se indica nada, el usuario puede introducir
el número de caracteres que quiera. Se puede limitar esto,
incluyendo en la etiqueta el atributo
MAXLENGTH="número".

En el caso que hemos visto, si hubiéramos
cambiado la etiqueta correspondiente por:

<INPUT TYPE="text" NAME="Apellido"
SIZE="10" MAXLENGTH="12">

(Se puede comprobar cómo no se
pueden introducir más de 12 caracteres).

También se puede hacer que el texto introducido
no sea reconocible, es decir que todos los caracteres se
representen por asteriscos. Basta con cambiar en la etiqueta
INPUT TYPE="TEXT" por INPUT TYPE="PASSWORD". En el último
ejemplo, si cambiamos la etiqueta correspondiente por:

<INPUT TYPE="PASSWORD" NAME="Apellido"
SIZE="10" MAXLENGTH="12">

(Se puede comprobar cómo los
caracteres introducidos se representan por asteriscos)

Introducción por medio de texto
(múltiples líneas)

Cuando el texto a introducir puede alcanzar una gran
longitud, por ejemplo un comentario, es conveniente utilizar un
formulario de texto de múltiples líneas.

Esto se consigue con la etiqueta de inicio:

<TEXTAREA NAME="YYY"
ROWS="número" COLS="número">

(en donde no se utiliza INPUT TYPE y
donde ROWS representa el número de filas, y COLS el de
columnas).

y la de cierre: </TEXTAREA>

Ejemplo: un formulario solicitando los comentarios del
usuario:

<FORM ACTION="mailto:direccion_de_e-mail"
METHOD="POST" ENCTYPE="TEXT/PLAIN">

Introduce tus comentarios:

<BR><TEXTAREA NAME="Comentarios" ROWS="6"
COLS="40">

</TEXTAREA>

</FORM>

(El salto de línea del texto
introducido no se efectúa
automáticamente).

Una vez que el usuario haya escrito sus comentarios
dentro del formulario, y haya pulsado el botón de
envío, recibiremos un e-mail suyo con el siguiente
texto:

Comentarios = mensaje escrito por el usuario

Introducción por medio de
menús

Si queremos que el usuario, en vez de introducir un
texto, como hemos visto en los casos anteriores, escoja entre
varias opciones que le presentamos nosotros, haremos uso de un
formulario en forma de menú.

Se consigue con la etiqueta de inicio <SELECT NAME=
"YYY"> y la de cierre </SELECT>.

Las distintas opciones a escoger se consiguen con la
etiqueta <OPTION>.

Ejemplo: Pedimos al usuario que elija su color
preferido:

<FORM ACTION="mailto:dirección_de_e-mail"
METHOD= "POST" ENCTYPE="TEXT/PLAIN">

<BR>¿Cuál es tu color
preferido?

<BR><SELECT
NAME="ColorPreferido">

<OPTION SELECTED>

<OPTION>Rojo

<OPTION>Verde

<OPTION>Azul

<OPTION>Amarillo

</SELECT >

</FORM>

Si el usuario ha escogido, p. ej. Azul y ha pulsado el
botón de envío, recibiremos un e-mail suyo con el
texto: ColorPreferido=Azul.

En el ejemplo anterior, sólo es visible en el
formulario una opción. Si queremos que sean visibles
múltiples opciones a la vez, añadimos en la
etiqueta los atributos MULTIPLE SIZE="número", donde
especificamos el número de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta
correspondiente por:

<SELECT NAME="ColorPreferido" MULTIPLE
SIZE="2">

Introducción por medio de
botones

Caja de confirmación
(checkbox)

Si queremos que el usuario confirme una opción
determinada, podemos hacer uso de un formulario de
confirmación, o checkbox, que se consigue con la
etiqueta:

<INPUT TYPE="CHECKBOX"
NAME="YYY">

Ejemplo: Solicitamos al usuario que confirme su
inclusión en una lista de correo:

<FORM ACTION= "mailto:dirección_de_email"
METHOD="POST" ENCTYPE="TEXT/PLAIN">

<INPUT TYPE="checkbox" NAME="Lista">

Sí, deseo ser incluido en la lista de
correo.

</FORM>

Si el usuario marca este
formulario y pulsa el botón de envío, recibiremos
un e-mail suyo con el texto: Lista=On.

Si queremos que el formulario aparezca inicialmente como
marcado (el usuario no necesitará hacerlo), basta con
añadir el atributo CHECKED dentro de la etiqueta. En el
ejemplo anterior si sustituimos la etiqueta equivalente
por:

<INPUT TYPE="CHECKBOX" NAME="Lista"
CHECKED>

Botones de radio

Cuando queremos que el usuario elija una única
opción entre varias, podemos hace uso de los botones de
radio, que se
consiguen con la etiqueta:

<INPUT TYPE= "RADIO" NAME= "YYY"
VALUE= "ZZZ">

Donde YYY es el nombre que le ponemos a la variable que
se trata de elegir, y ZZZ es el nombre de cada una de las
opciones en concreto.

Ejemplo: solicitamos al usuario que defina cuál
es su sistema operativo
preferido:

<FORM ACTION="mailto:dirección_de_email"
METHOD="POST" ENCTYPE="TEXT/PLAIN">

¿Cuál es tu sistema operativo
preferido?

<BR>

<INPUT TYPE="radio" NAME="SistemaOperativo"
VALUE="PC" CHECKED> PC

<INPUT TYPE="radio" NAME="SistemaOperativo"
VALUE="Mac"> Mac

<INPUT TYPE="radio" NAME="SistemaOperativo"
VALUE="Unix">
Unix

</FORM>

Obsérvese el atributo opcional CHECKED que se ha
añadido en la primera etiqueta. Esa será la
opción que aparece marcada por defecto.

Obsérvese también que no es posible
escoger más de una opción.

Si el usuario ha escogido la opción PC y pulsa el
botón de envío, recibiremos un e-mail suyo con el
texto: SistemaOperativo=PC.

3.Botones de envío y de
borrado

Hasta ahora, en todos los ejemplos que hemos visto,
faltaba un elemento esencial en cualquier formulario, y es el
botón de envío de los datos, que se consigue con la
etiqueta:

<INPUT TYPE= "submit" VALUE=
"ZZZ">

En donde ZZZ es el texto que queremos que aparezca en el
botón.

Vamos a añadirlo al primer ejemplo, en el que se
solicitaba el apellido del usuario:

<FORM ACTION="mailto:dirección_de_email"
METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:

<BR><INPUT TYPE="text"
NAME="Apellido">

<P><INPUT TYPE="submit" VALUE="Enviar
datos">

</FORM>

Otro botón interesante es el de borrado de los
datos introducidos, muy conveniente en un formulario con muchos
elementos. Es muy similar al de envío, pues se consigue
con la etiqueta:

<INPUT TYPE= "RESET"
VALUE="ZZZ">

En donde ZZZ es el texto que queremos que aparezca en el
botón.

Si añadimos al ejemplo anterior la
etiqueta:

<P><INPUT TYPE="reset"
VALUE="Borrar datos">

Se puede comprobar su funcionamiento, escribiendo algo
en el formulario y pulsando luego el botón de
borrado.

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes
elementos que se pueden utilizar. Pero no hay ningún
inconveniente en usar, dentro del mismo formulario, distintos
tipos de introducción de datos. Al pulsar el usuario el
botón de envío recibiríamos en e-mail suyo
con las distintas parejas NAME=VALUE de cada elemento,
encadenadas con el símbolo &.

Ejemplo

Haremos como ejemplo práctico un libro de
visitas a nuestra página.

<HTML>

<HEAD>

<TITLE>Libro de
Visitas</TITLE>

</HEAD>

<BODY>

<P><CENTER>

<H2>Libro de visitas</H2>

<P><FORM ACTION="mailto:"
METHOD="POST"

ENCTYPE="TEXT/PLAIN">

Tu nombre:

<BR><INPUT TYPE="text"
NAME="Nombre">

<P>Escribe tus comentarios:

<BR><TEXTAREA NAME="Comentarios" ROWS="6"
COLS="40">

</TEXTAREA>

<P><INPUT TYPE="submit" VALUE="Enviar
datos">

<INPUT TYPE="reset" VALUE="Borrar
datos">

</FORM>

<P>

<HR>

</BODY>

</HTML>

10. Mapas

Hemos visto anteriormente dos maneras distintas de
enlazar una página con otra: por medio de un enlace de
texto o por medio de una imagen. Pero en
este último caso se hacía uso de una imagen para
enlazar a una única página.

Se puede utilizar una única imagen para enlazar
con varias páginas, yendo a una u otra según la
zona en donde se pulse el ratón. Este tipo de imágenes
se llaman mapas.

Veremos cómo se crea un mapa partiendo de una
imagen, y cómo se implementa dicho mapa con el lenguaje
HTML en nuestra página.

Hay dos tipos de mapas:

En nuestro caso, trataremos sobre los mapas gestionados
por el cliente, pero
cabe hacer mención de los mapas gestionados por el
servidor.

1.Mapas gestionados por el
servidor

En este tipo de mapas al desplazar el cursor sobre la
imagen que forma el mapa se van obteniendo las distintas
coordenadas. Cuando se pulsa el ratón en un punto
determinado, el navegador envía esas coordenadas al
servidor, y éste comprueba en un archivo MAP
(situado en su directorio cgi-bin) cuál es la
página que se corresponde con estas coordenadas,
envía esta información al navegador, y éste
solicita a su vez al servidor que le enlace con dicha
página.

Estos mapas, tienen una ventaja: que pueden ser
utilizados por todos los navegadores,
incluso por las versiones más antiguas.

Pero tienen varios inconvenientes: No todos los servidores tienen
implementado el programa CGI necesario para que pueda funcionar
un mapa de este tipo. Además hay que conocer el tipo de
servidor (NCSA, el más común, o CERN), pues el
código
a aplicar es distinto en un caso u otro. Por otra parte, al
requerir un trasiego de información entre el navegador y
el servidor, el tiempo de
respuesta es mayor que en el otro tipo, como veremos a
continuación.

2.Mapas gestionados por el
cliente

Estos mapas son gestionados por el cliente (es decir,
nuestro navegador) y no por el servidor, como en el caso
anterior.

En este tipo de mapas, al ir desplazando el cursor se
observa que en ciertas zonas se convierte en el símbolo
normal para enlazar con otras páginas (una mano,
habitualmente).

Si se pulsa en estas zonas activas (HOTSPOTS), el
navegador consulta con el documento HTML que ha recibido, y
decide a qué página o dirección corresponde
esa zona activa.

Es decir, no necesita enviar la información al
servidor y esperar la respuesta de éste, con lo que el
proceso es
más rápido que en el caso anterior,
reduciéndose además el tráfico de datos y la
sobrecarga al servidor. Otras ventajas son que al pasar por una
zona activa se muestra la
dirección a la que se corresponde (al contrario que en el
caso anterior, en la que sólo se ven unas coordenadas).
Además, estos mapas se pueden utilizar off-line, al
contrario también que en el otro tipo, ya que no requieren
la ayuda del servidor.

Pero tiene el inconveniente de que estos mapas no son
implementados por todos los navegadores, como en el caso
anterior, aunque sí por la mayoría de los
utilizados actualmente, desde las versiones siguientes: Netscape
2.0, Microsoft
Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este
inconveniente suministrando enlaces alternativos para los
navegadores que no implementen este tipo de mapas.

En lo que sigue, vamos a ver exclusivamente cómo
implementar este tipo de mapas, es decir, mapas gestionados por
el cliente (client-side image maps).

Confección de la imagen del
mapa

Antes que nada, es necesario confeccionar la imagen que
va a servir como mapa. Se hará con un programa
gráfico, y pueden utilizarse los formatos GIF o
JPG.

Para crear una mapa para utilizarlo en nuestra
página HTML, debemos seguir los siguientes
pasos:

Estas coordenadas las obtenemos con el programa
gráfico con el que hemos confeccionado la
imagen.

Al obtener los datos necesarios (las coordenadas)
podemos escribir el código HTML que convierta esta imagen
en un mapa.

Código HTML para definir un mapa gestionado
por el cliente

En este caso, el código que debemos escribir es
el siguiente:

<MAP NAME="nombre">

<AREA SHAPE="RECT" COORDS="X1,Y1,X2,Y2"
HREF="paginaXX.html">

<AREA SHAPE="RECT" COORDS="W1,W1,Z2,Z2"
HREF="paginaYY.html">

<AREA SHAPE="DEFAULT" NOHREF>

</MAP>

<IMG SRC="imagen.gif" USEMAP="#nombre">

Veamos ahora cada una de las etiquetas:

Con el atributo NOHREF, se define que el área
completa de la imagen es una zona no activa, excepto en las
áreas definidas anteriormente como activas.

Enlaces alternativos de texto

Como se ha dicho anteriormente, no todos los navegadores
implementan este tipo de mapas gestionados por el cliente. Por
ello, es necesario suministrar unos enlaces alternativos
convencionales de texto, para obviar este
inconveniente.

Por ejemplo, a continuación del mapa, se pueden
poner enlaces de texto, correspondientes a las dos zonas activas
(reduciendo la fuente, para hacerlo menos
antiestético):

<FONT SIZE=-1>

<A HREF="paginaXX.html">Mi página
XX</A> |

<A HREF="paginaYY.html">Mi página
YY</A>

</FONT>

Zonas activas en forma de círculos o
polígonos

Hasta ahora se han definido las zonas activas en forma
de rectángulos. Pero se pueden definir también
estas zonas activas como círculos o como
polígonos.

Para definir una zona activa circular es necesario
conocer las coordenadas de su centro (X,Y) y la longitud de su
radio (R). Una vez sabidos estos datos, la etiqueta es como
sigue:

<AREA SHAPE= "CIRCLE" COORDS="X,Y,R"
HREF="dirección_de_la_página">

Para definir una zona activa poligonal hay que conocer
las coordenadas de los distintos puntos (X1,Y1), (X2,Y2),
(X3,Y3), etc. Con estos datos, la etiqueta se escribe como
sigue:

<AREA SHAPE="POLYGON" COORDS=
"X1,Y1,X2,Y2,X3,Y3,…" HREF= "enlace">

11. Frames

Frames (en inglés,
marcos o cuadros) es un procedimiento del
lenguaje HTML
para dividir la pantalla en diferentes zonas, o ventanas, que
pueden actuar independientemente unas de otras, como si se
trataran de páginas diferentes, pues incluso cada una de
ellas pueden tener sus propias barras deslizadoras. Los
navegadores que lo implementan son el Netscape 2.0, y el Explorer
2.0 en adelante.

Una de sus características más importantes es
que pulsando un enlace situado en un frame, se puede cargar en
otro frame una página determinada. Esto se utiliza
frecuentemente para tener un frame estrecho en la parte lateral
(o superior) con un índice del contenido en forma de
diferentes enlaces, que, al ser pulsados cargan en la ventana
principal las distintas páginas. De esta manera se
facilita la navegación entre las páginas, pues
aunque se vaya pasando de unas a otras, siempre estará a
la vista el índice del conjunto.

Para comprender los distintos conceptos vamos a
desarrollar un ejemplo, creando una página con dos Frames.
El de la izquierda va a servir de índice de lo que veamos
en el de la derecha, y en éste veremos inicialmente una
página de presentación.

Documento de definición de los
frames

Lo primero que tenemos que hacer es crear un documento
HTML en el que definiremos cuántas zonas va a haber,
qué distribución y tamaño van a tener, y
cuál va ser el contenido de cada una de ellas.

En el ejemplo que vamos a desarrollar, la página
va a tener dos frames distribuidos en columnas (es decir, uno al
lado del otro, en vez de uno encima del otro, lo que sería
una distribución en filas).

Con respecto al tamaño, haremos que el primero
(el del izquierda) ocupe el 20% del ancho de la pantalla, y el
otro, el 80% restante.

Y con respecto al contenido, el frame de la izquierda va
a contener un documento HTML que va a servir de índice de
lo que veamos en el otro (y que vamos a llamar mi_indice.html), y
el de la derecha otro documento HTML que va a servir de
página de presentación (al que llamaremos
mi_presentacion.html).

Todo lo anterior se refleja en el siguiente documento
HTML:

<HTML>

<HEAD>

<TITLE>Mi primera pagina con
frames</TITLE>

</HEAD>

<FRAMESET COLS="20%, 80%">

<FRAME SRC= "mi_indice.html">

<FRAME SRC= "mi_presentacion.html"
NAME="principal">

</FRAMESET>

</HTML>

Obsérvese lo siguiente:

Es un documento parecido a los que conocíamos
hasta ahora. La diferencia está en que en vez de utilizar
la etiqueta BODY, que sirve normalmente para delimitar lo que se
va a ver en la pantalla, se hace uso de la etiqueta FRAMESET
(definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%,
80%"> se define que va a haber dos frames y que van a ir en
columnas. Si hubiéramos querido que fueran en filas,
habríamos puesto ROWS (filas, en inglés).
También se define el espacio en anchura que van a ocupar
cada uno de ellos en la pantalla. Se ha puesto como porcentajes
del total, pero se podría también haber puesto una
cifra absoluta, que representaría el número de
pixels a ocupar.

Ya se ha definido el número de frames, su
distribución y su tamaño, pero falta por definir el
contenido de cada frame. Esto se hace con las
etiquetas:

Con esto se define que el contenido del primer frame (el
de la izquierda) sea el documento HTML mi_indice.html y el del
segundo (el de la derecha) sea el documento HTML
mipresentacion.html.

Obsérvese que en la etiqueta del segundo se ha
incluido el atributo NAME="principal", pero no así en el
primero. El motivo es que se necesita dar un nombre al segundo
frame, pues, como veremos a continuación, en el documento
del primer frame va a haber unos enlaces que van a ir dirigidos
hacia él. En este caso sólo tenemos dos frames,
pero podría haber más, y es necesario distinguirlos
unos de otros. Y el primero no necesita nombre, pues no va a
haber enlaces en el segundo dirigidos hacia él.

A este documento le vamos a llamar mi_pagina.html, pero
todavía no lo vamos a guardar, pues falta por
añadir algo que veremos más adelante.

Documentos HTML de cada frame

Necesitamos ahora confeccionar el documento HTML de cada
uno de los frames. Recuérdese que son como páginas
independientes, que pueden tener cada una su propio fondo, etc.,
y todo lo que queramos añadir en ellos y que hemos
aprendido hasta ahora.

Documento del frame de la izquierda

Va a tener un fondo amarillo, y va a contener dos
enlaces dirigidos al frame de la derecha.

<HTML>

<HEAD>

<TITLE> Indice </TITLE>

</HEAD>

<BODY BGCOLOR="#FFBB00">

<P><A HREF="mi_presentacion.html"
TARGET="principal"> Presentación </A>

<P><A HREF="otra_pagina.html"
TARGET="principal"> Esta es otra página
</A>

<P><IMG SRC="imagen.gif">

</BODY>

</HTML>

Dentro de las etiquetas de los enlaces podemos observar
algo nuevo, y es el atributo TARGET (en inglés: objetivo,
blanco), que sirve para hacer que al ser activado el enlace no se
cargue en el propio frame, sino en otro, precisamente en el que
hayamos llamado con ese nombre en el documento de
definición de los frames.

En nuestro caso, le hemos dado el nombre de "principal"
al frame de la derecha, y es por tanto ahí donde se van a
cargar los documentos
HTML.

Guardamos este documento con el nombre de
mi_indice.html.

Documento del frame de la derecha

Va a tener un fondo negro, y va a contener
sólamente un texto.

<HTML>

<HEAD>

<TITLE> Presentacion </TITLE>

</HEAD>

<BODY BGCOLOR="#000000" TEXT="#0000FF">

<CENTER>

<FONT SIZE=+3><STRONG>

<P>ESTA ES LA VERSION

<BR><FONT COLOR="#FF0000">CON
FRAMES</FONT>

<BR>DE MI PAGINA

</STRONG>

</FONT>

</CENTER>

</BODY>

</HTML>

Guardamos este documento con el nombre de
mi_presentacion.html

Alternativa para los navegadores que no soportan
frames

Con lo visto anteriormente, ya tenemos las tres piezas
que necesitamos:

Hay que prever el caso en que los navegadores no
soportan o desconocen las etiquetas FRAMESET y FRAME.

Para estos casos está prevista la etiqueta
<NOFRAMES> y </NOFRAMES>. Se añaden al final
del documento de definición de los frames, y a se pone
entre ambas lo que queremos que vean los que acceden con un
navegador que no soporta frames. Puede incluso ser el
código HTML de una página completa (lo que
normalmente va entre las etiquetas <BODY> y
</BODY>)

En nuestro caso, pudiéramos poner un mensaje
advirtiendo de esta circunstancia, y dirigiendo al usuario, con
un enlace normal, hacia una página que hayamos definido
como principal o de presentacion para estos casos.
(También podríamos no decir nada sobre frames, y
colocar aquí el código de la página de
presentación)

<NOFRAMES>

Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="presentacion.html">
página</A>.

</NOFRAMES>

<HTML>

<HEAD>

<TITLE>Mi pagina con
frames</TITLE>

</HEAD>

<FRAMESET COLS="20%, 80%">

<FRAME SRC="mi_indice.html">

<FRAME SRC="mi_presentacion.html"
NAME="principal">

</FRAMESET>

<NOFRAMES>

Estas utilizando un navegador que no soporta
frames.

<P>Pulsa para visitar mi <A
HREF="presentacion.html"> página</A>.

</NOFRAMES>

</HTML>

Ahora sí podemos guardar este documento con el
nombre de mi_pagina.html.

Atributos de la etiqueta
<FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es
la que define la distribución, el número y
tamaño de los frames. Tiene dos atributos: COLS (columnas)
y ROWS (filas):

Define la distribución de los frames en columnas
o en filas, según se use uno u otro atributo.

Define el número de frames que habrá,
pues, por ejemplo:

Define el tamaño de los frames, según el
valor que
demos a XX, YY, ZZ…. Este valor se puede
expresar en:

Un porcentaje del ancho del pantalla (para las
columnas), o del alto de la pantalla (para las filas).
Así, por ejemplo:

<FRAMESET COLS="%20, %80"> (la columna de la
izquierda ocupará el 20% del ancho de la pantalla, y la de
la derecha el 80% restante)

<FRAMESET ROWS="%10, %70, %20"> (la fila superior
ocupará el 10% del alto de la pantalla, la del medio el
70%, y la inferior el 20%)

Un número absoluto que representa el
número de pixels que ocupará cada frame a lo ancho
o a lo alto (según sean filas o columnas). Así, por
ejemplo:

<FRAMESET COLS="40, 600"> (la columna de la
izquierda tendrá 40 pixels de ancho y la de la derecha
600). Pero es peligroso utilizar sólo valores
absolutos, pues el tamaño de la pantalla varía de
un usuario a otro. Si se va a usar algún valor absoluto
para un frame, es mejor mezclarlo con alguno relativo, como los
que vamos a ver acontinuación, para que se ajuste el total
a la pantalla del usuario

Un valor relativo que se consigue poniendo un asterisco
(*), en vez de un número. Esto se interpreta como que ese
frame debe tener el espacio restante. Por ejemplo:

<FRAMESET ROWS="100,*,100"> (Habrá tres
filas, la superior y la inferior de una altura fija de 100
pixels, y la del medio obtendrá el espacio
restante).

Si hay más de un frame con asterisco, ese espacio
restante se dividirá por igual entre ellos.

Si hay un número antes del asterisco, ese frame
obtiene esa cantidad más de espacio relativo. Así
"2*,*" daría dos tercios para el primer frame y un tercio
para el otro.

Frames sin bordes

Si se desea que no haya un borde de separación
entre los frames, se deben incluir el atributo FRAMEBORDER=0
dentro de la etiqueta FRAMESET. No todas las versiones de los
navegadores lo implementan.

Para que también desaparezcan los huecos de
separación entre frames hay que añadir otros dos
atributos (el primero es para el Explorer y el segundo para el
Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta
completa quedaría:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0
COLS="xx, yy">

Atributos de la etiqueta
<FRAME>

Esta etiqueta define las cararacterísticas de un
frame concreto, no
del conjunto de los frames, como era el caso con la etiqueta
<FRAMESET>. Puede tener los siguientes posibles atributos,
que van dentro de la etiqueta <FRAME>:

El atributo TARGET

En el ejemplo hemos visto que, como queríamos que
los enlaces situados en el frame de la izquierda surtieran efecto
no en él mismo, sino en otro frame, teníamos que
poner dentro de cada enlace el atributo TARGET="principal",
siendo "principal" el nombre que habíamos dado al segundo
frame, en el documento de definición de frames. Es decir,
hemos utilizado este atributo de esta manera:

TARGET="nombre_dado_a_otro_frame".

Estos nombres, que los escogemos nosotros, pueden ser
cualquiera, pero con la condición que el primer
carácter sea alfanumérico (letra o
número).

Pero hay unos nombres reservados (es decir, que no se
pueden usar para denominar a un frame), que hacen que este
atributo efectúe unas funciones
especiales. Para que cumplan su cometido, es imprescindible
escribir estas palabras reservadas (blank, self y top) en
minúsculas.

TARGET="_blank". Hace que se abra una nueva copia
del navegador, y el enlace activado se carga en ella, a pantalla
completa. Es decir, tendríamos dos copias del navegador
(Netscape, Explorer, etc.) funcionando a la vez.

TARGET="_self". Hace que el enlace se cargue en
el propio frame.

TARGET="_top". Hace que el enlace se cargue a
pantalla completa, suprimiendo todos los frames, pero sin que se
cargue una nueva copia del navegador. Este es particularmente
útil. Un error muy común es olvidarse de poner este
atributo en los enlaces que están en un frame, con lo que
resulta que al ser activados, la página llamada se carga
dentro del propio frame, lo cual es muy molesto si esa
página pertenece a otro sitio del WEB, y aún
más grave si esa página tiene a su vez frames. Este
inconveniente se evita poniendo este atributo dentro de las
etiquetas de los enlaces.

Frames anidados dentro de otros
frames

Hasta ahora hemos contemplado sólo la posibilidad
de tener una distribución de los frames bien en filas o
bien en columnas, (dependiendo que se utilice el atributo ROWS o
COLS en la etiqueta FRAMESET), pero no ambos a la vez.

Se pueden obtener distribuciones más complejas
anidando filas dentro de una columna, o a la inversa, columnas
dentro de una fila.

Supongamos que queremos la siguiente
distribución:

Un frame estrecho en horizontal en la parte superior,
de lado a lado de la pantalla (altura, el 15%)

Otro frame estrecho en vertical en la parte
izquierda, debajo del anterior (anchura, el 20%)

Un tercero ocupando el resto de la
pantalla.

Vemos que, en realidad, esto equivale a la siguiente
distribución:

Dos filas. La superior ocupa el 15% y la inferior el
resto.

La fila inferior está a su vez dividida en dos
columnas. La primera (la de la izquierda) ocupa el 20% y la otra,
el resto.

El documento de definición de las dos filas
(olvidémonos de momento que la de abajo está
subdividida), sería:

<HTML>

<HEAD>

<TITLE>Pagina con dos
filas</TITLE>

</HEAD>

<FRAMESET ROWS="15%, *">

<FRAME SRC="documento_fila_superior">

<FRAME SRC="documento_fila_inferior">

</FRAMESET>

</HTML>

Como la fila inferior, en realidad, son dos columnas
(con una distribución del 20% y resto), sustituimos
(anidando) la etiqueta <FRAME
SRC="documento_fila_inferior"> por:

<FRAMESET COLS="20%, *">

<FRAME SRC="documento_columna_izqda">

<FRAME SRC="documento_columna_dcha">

</FRAMESET>

Con lo que queda el documento definitvo
así:

<HTML>

<HEAD>

<TITLE>Pagina con fila superior y dos columnas
inferiores</TITLE>

</HEAD>

<FRAMESET ROWS="15%, *">

<FRAME SRC="documento_fila_superior">

<FRAMESET COLS="20%, *">

<FRAME SRC="documento_columna_izqda">

<FRAME SRC="documento_columna_dcha">

</FRAMESET>

</FRAMESET>

</HTML>

12. Sonidos

Una página del WEB puede tener sonidos
incorporados, bien sea como un fondo sonoro que se ejecuta
automáticamente al cargar la página, o como una
opción para que la active el propio usuario.

Capacidades sonoras de los
navegadores

Para poder escuchar
los sonidos es necesario disponer, como es lógico, de una
tarjeta de sonido con sus
correspondientes altavoces. Pero esto no es suficiente, pues no
todos los programas navegadores están capacitados en la
misma medida.

Explorer de Microsoft

Es el que está mejor adaptado para el sonido, pues a
partir de la versión 2.0 es capaz de reproducir fondos
sonoros sin necesidad de añadir nada, y no hay ninguna
complicación con los servidores, como
ocurre con el Netscape. Además, a partir de la
versión 3.0 del Explorer, es incluso compatible con los
plug-ins del Netscape.

Netscape

Las versiones anteriores a la 2.0 no son capaces de
reproducir fondos sonoros que se ejecuten automáticamente,
sino que requerirá que se activen los programas auxiliares
asociados a los formatos, .WAV o .MID.

La versión 2.0 sí es capaz de reproducir
un fondo sonoro, pero es necesario que tenga instalado un plug-in
llamado Crescendo.

La versión 3.0 lleva implícito el plug-in
Live Audio (pero sólo la versión completa, no la
reducida). En caso afirmativo, es capaz de reproducir un fondo
sonoro.

Pero a todas estas complicaciones de las distintas
versiones de los navegadores de los usuarios, hay otra más
y es que el servidor donde esté alojada la página
del WEB debe tener configurados como MIME los formatos,
.MID y .WAV. Si esto no es así, aunque depositemos en el
servidor nuestro documento HTLM acompañado por el
correspondiente archivo de sonido, éste no se
ejecutará. En dicho caso, es necesario ponerse en contacto
con los administradores del servidor para que configuren como
MIME los formatos, .MID y .WAV.

Este problema no existe, sin embargo para el Explorer,
con el que no nos tenemos que preocupar por este tema.

Fondo sonoro para el Microsoft
Internet
Explorer

Para las versiones 2.0 en adelante, se utiliza la
etiqueta:

<BGSOUND SRC="archivo_de_sonido"
LOOP=n>

El archivo de sonido puede estar en formato .MID o
.WAV.

El atributo LOOP (en inglés, lazo) sirve para
especificar el número (n) de veces que se debe ejecutar el
archivo de sonido. Si se escoge el número n=-1 o se pone
LOOP=INFINITE, el sonido se ejecutará indefinidamente. Se
puede omitir este atributo, y entonces el archivo se
ejecutará una sola vez.

La etiqueta para que se ejecute el archivo sonido.mid
dos veces en el Explorer es:

<BGSOUND SRC="sonido.mid"
LOOP=2>

(Para poder oirlo,
hay que estar utilizando el Explorer)

Fondo sonoro para el Netscape

La etiqueta básica para el Netscape
es:

<EMBED SRC="archivo_de_sonido"
WIDTH=XXX HEIGHT=YY>

donde WIDTH es la anchura y HEIGHT la altura de una
consola que aparece, y que tiene diferentes teclas (Play, Stop,
Pausa, etc.). Respecto a las dimensiones XXX e YY estas
dependerán del plug-ins que existe para
Netscape.

El archivo de sonido puede estar en formato, .MID o
.WAV, pero recuérdese la advertencia hecha anteriormente,
de que estos formatos deben estar configurados como MIME por
el servidor donde esté alojada la
página.

Dentro de la etiqueta se pueden añadir los
siguientes atributos opcionales:

Para conseguir que la consola sea invisible hay que
añadirle el atributo HIDDEN="TRUE".

<EMBED SRC="sonido.mid"
HIDDEN="TRUE">

Fondo sonoro combinado para el Explorer y el
Netscape

Se pueden combinar los dos tipos distintos de etiquetas
para conseguir que un fondo sonoro sea escuchado por usuarios que
utilicen tanto el Explorer como el Netscape (siempre que
éste último esté preparado para ello). En
este caso, el Explorer ignorará la etiqueta del Netscape,
y a la inversa.

Las dos etiquetas necesarias para que se reproduzca un
archivo de sonido ya sea en formato, .WAV o .MID, como sonido de
fondo, tanto por el Explorer como por el Netscape (lo hará
una sola vez):

Como vimos anteriormente para que un archivo de sonido,
.MID o .WAV se ejecute como sonido de fondo, tanto por el
Explorer como por el Netscape y que se ejecute indefinidamente, a
la etiqueta del Explorer basta con añadirle el atributo
LOOP=INFINITE, como se ha visto anteriormente. Y con respecto a
la etiqueta del Netscape, teóricamente debería
también bastar añadirle el atributo LOOP="TRUE",
pero curiosamente esto no es así, porque hay que poner las
dimensiones de la consola (que no se va a ver).

Las dos etiquetas quedarian de esta manera:

<BGSOUND SRC="sonido.mid"
LOOP=INFINITE>

<EMBED SRC="sonido.mid" WIDTH=200 HEIGHT=55
AUTOSTART="TRUE" LOOP="TRUE" HIDDEN="TRUE">

Activación del sonido por el propio
usuario

Hemos visto cómo poner un sonido de fondo en una
página. Hay otra opción, mucho más sencilla,
y es la de poner un enlace a un archivo de sonido, de tal manera,
que al pulsarlo se ejecute el archivo. (Ver la Capítulo 4,
en el que se explica cómo crear enlaces).

Por ejemplo, poner un enlace a un archivo
sonido.mid:

Escucha esta <A HREF=
"sonido.mid">musica</A>

Al pulsar el enlace se activa, en una ventana aparte, el
programa que ejecuta el sonido. Esto es válido para todos
los navegadores, incluso las versiones más antiguas, con
la única condición de que se haya configurado un
programa auxiliar capaz de ejecutar archivos .MID o
.WAV.

Se puede hacer el enlace con un icono (Ver el
Capítulo 5).

Por ejemplo al hacer un enlace con un icono llamado
snd.gif al archivo de sonido sondiowav el enlace quedaria
así:

<A HREF= "sonido.wav"><IMG SRC=
"snd.gif"></A>

En el capítulo anterior creamos una
versión con frames, en la que aparece inicialmente en el
frame de la derecha una página de
presentación.

Se puede colocar a esta página una música de fondo, para
que sea ejecutada por el Explorer y el Netscape. Para ello
debemos hacer lo siguiente:

En el documento de la derecha que llamamos como
presentacion.html debemos añadir entre las etiquetas
</SRONG> y </FONT> (situadas al final), lo
siguiente:

<BR><FONT COLOR="#FF0000">¡Escucha la
música de
fondo!</FONT>

<BGSOUND SRC="sonido.mid">

<EMBED SRC="sonido.mid" WIDTH=2 HEIGHT=0 AUTOSTART=
"TRUE">

Autor:

Richard A. Sequera A.