Make your own free website on Tripod.com

TELECOMUNICACIONES

5.4 Formulario, Mapas, Tablas y Marcos
Home | Unidad I | Unidad II | Unidad III | Unidad IV | Unidad V

FORMULARIOS:

Los elementos básicos para la realización de un formulario:

Abrir y cerrar un formulario

<FORM ACTION="
mailto:alguien@servidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain">
...
</FORM>

Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y también todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc)

El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario. Así pues debes sustituir
alguien@servidor.pntic.mec.es por tu dirección de correo.

Los atributos METHOD y ENCTYPE indican cómo se transferirán los datos (post, correo) y la codificación del texto

El atributo HIDDEN no mostrará el campo en la página web, aunque sí enviará su contenido.

Entrada de texto de una línea

<INPUT TYPE="text" SIZE="25" NAME="Nombre">

Esta etiqueta produce un campo similar al que se muestra debajo, para introducir texto (en este caso el nombre), de una longitud de 25 caracteres.

Cuando nos llegue al buzón de correo el texto de este campo aparecerá asociado a la palabra que pongamos en NAME (en este caso a Nombre)

Puede incluirse otro atributo opcional VALUE="Pon aquí tu nombre", en este caso aparecería Pon aquí tu nombre dentro del campo

Entrada de texto de varias líneas

<TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aquí sus comentarios
</TEXTAREA>

Este código produciría el siguiente resultado:
 

Lista de opciones o menú desplegable

<SELECT NAME="estudios">
<OPTION SELECTED> ESO
<OPTION> Bachillerato
<OPTION> Ciclos Formativos
<OPTION> Garantía Social
</SELECT>

Que produciría un campo similar al siguiente:
 

Una variante de las listas de opciones son los menús con barras de desplazamiento

<SELECT NAME="americanos" SIZE=6> <OPTION>España
<OPTION>México
<OPTION>Argentina
<OPTION>Costa Rica
<OPTION>Panamá
<OPTION>Belice
<OPTION>Honduras
<OPTION>Bolivia
<OPTION>Chile
<OPTION>Paraguay
</SELECT>

que da como resultado una entrada del tipo
 
 
Si en la etiqueta <SELECT ...> introducimos el atributo MULTIPLE: nos está permitido efectuar selecciones múltiples.

<SELECT NAME="menu" SIZE=6 MULTIPLE>
Casillas de verificación o Checkboxes
< INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR>

MAPA DE BITS

Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas.

Procedimiento

Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio

<IMG SRC="gifs/mapa.gif USEMAP="#directorio">

Abrimos el mapa recién creado

<MAP NAME="directorio">

Definimos las zonas del mapa y los enlaces que le asignamos a cada una.

<AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignada" ALT="comentario">
Cerramos el mapa
</MAP>

Valores de SHAPE y COORDS

Los valores que pueden tomar la forma y las coordenadas son:

RECT. Rectángulo o cuadrado
COORDS="x,y,u,v" donde x,y son las coordenadas del vértice superior izquierdo del rectángulo y u,v es el vértice inferior derecho. El origen de coordenadas 0,0 es el vértice superior izquierdo
CIRCLE. Círculo
COORDS="x,y,z", donde x,y es el cetro de la circunferencia y z el radio
POLY. Línea poligonal cerrada
COORDS="X,x, Y,y, Z,z...,X,x", donde los pares X,x, Y,y, etc representan los vértices del polígono. El primero coincidirá con el último.

DEFAULT. La zona no referenciada anteriormente

Para hallar la coordenada necesitarás un editor de imágenes, como los señalados en la página de imágenes. Si te empeñas también puedes hacerlo a ojo, siempre que la imagen no sea muy complicada, ya que cuando pulsas la zona en el navegador aparece definida un instante

TABLAS

Una tabla básica

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio.
 
Para definir una tabla se usan las etiquetas:

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla

<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.

La tabla (2x2) más sencilla que podemos hacer es la siguiente

Escribimos: Visualizamos

<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE> 1 2
3 4
 
1 2
3 4
1 2 3 4
 
El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.

MACROS

Una tabla básica

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla

<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)

<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.

La tabla (2x2) más sencilla que podemos hacer es la siguiente

Escribimos: Visualizamos

<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE> 1 2
3 4

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.

 
1 2
3 4
1 2 3 4

button_regresar.gif

Perla Karina Valenzuela Moreno * Telecomunicaciones * 601 Mat.