Manual html - Html avanzado

En los capítulos anteriores se han presentado los elementos básicos para la creación de páginas utilizando HTML. En este capítulo se introducen nuevas etiquetas con las que el desarrollador podrá ofrecer formularios de entrada de datos, la distribución de la información en toda la pantalla y la creación de páginas dinámicas.

Formularios

Los formularios permiten a los usuarios interaccionar con programas que se encuentran en los servidores remotos. En otras palabras los formularios proveen un medio por el cual se puede solicitar información, así como la manera de llevar a cabo el procesamiento de datos enviados por el usuario.

Existe una amplia variedad de etiquetas que facilitan la creación de los formularios. Por ejemplo se puede crear una sencilla caja de texto para solicitar el nombre, la dirección o cualquier otro dato del usuario que se requiera, o bien, se pueden proveer distintas opciones para que el usuario escoja sólo una de ellas

. A continuación se explican éstas y otras etiquetas para formularios.

La etiqueta <FORM>

La etiqueta <FORM> es utilizada para delimitar un formulario para la entrada de datos. Puede haber varias formas en un documento, pero la etiqueta <FORM> no puede delimitar otra etiqueta <FORM>, es decir, un formulario no puede contener otro formulario.

La sintaxis general de la etiqueta <FORM> es la siguiente:

<FORM ACTION="URL" METHOD="GET| POST">

* * *

</FORM>

El atributo ACTION es un URL que especifica la ubicación a la cual se le suministrarán los contenidos de los campos de datos para que los procese. Esto puede ser una dirección de correo, pero generalmente se indica alguna clase de aplicación Cliente/Servidor el atributo ACTION no se define, el URL que se toma por omisión es el del documento por sí mismo.

El atributo METHOD indica la forma en que se envían los datos del formulario hacia el servidor.

Los valores válidos son Get y Post. El método GET es ideal para formularios que suministran información que no requieren de procesamiento externo, como por ejemplo para consulta de bases de datos. Sin embargo, para información que sirve para la actualización de bases de datos se debe utilizar el método POST, y en este caso ACTION señala a un programa CGI para procesar y actualizar dicha base de datos.

Hasta este punto sólo se ha especificado que en cierta parte del documento se presentará un formulario. En la siguiente sección se presentan las etiquetas para campos de datos.

Elementos de una forma

Los elementos que pueden incorporarse a un formulario pueden dividirse en tres grandes campos:

· Campos de entrada <INPUT ... >

· Áreas de texto <TEXTAREA ... >

· Barras de opciones <SELECT ... >

Campos de entrada <INPUT ... >

Todos estos elementos utilizan la etiqueta <INPUT> y se utilizan para presentar cajas de texto y botones de selección múltiple entre otros.



Cajas de texto

Para presentar cajas de texto la sintaxis es la siguiente:

<INPUT TYPE="TEXT" [SIZE="NN"] NAME="variable">

El atributo TYPE indica que la entrada será una caja de texto

El atributo SIZE indica el tamaño de la caja de texto. Por omisión SIZE tiene el valor de 20. El atributo NAME indica el nombre de la variable que almacenará la información que se introdujo en esta caja de texto.

Estos programas se denominan CGI, los cuales se presentarán más adelante.

Para otros tipos de campos de entrada este atributo cambia, por omisión TYPE tiene el valor de TEXT.

algunos ejemplos usando la etiqueta <INPUT> para poner cajas de texto, el código se muestra a continuación:

<H1> Ejemplo de un formulario </H1>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Nombre: <INPUT TYPE="TEXT" NAME="nombre"><BR>

Edad: <INPUT TYPE="TEXT" NAME="edad" SIZE="3"><BR>

E-mail: <INPUT TYPE="TEXT" NAME="email" SIZE="30"><BR>

</FORM>

<HR>

Password

Una variante de este campo de texto es para el paso de claves secretas, la cual es conocida como Password. La sintaxis de esta variante es la siguiente:

<INPUT TYPE="PASSWORD" [SIZE="NN"] NAME="variable">

El efecto es que en lugar de aparecer la información tal cual la escribe el usuario aparecen varios asteriscos. El siguiente código muestra el uso de este tipo de elemento .

<H1> Ejemplo de un formulario </H1>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Nombre: <INPUT TYPE="TEXT" NAME="nombre"><BR>

Edad: <INPUT TYPE="TEXT" NAME="edad" SIZE="3"><BR>

E-mail: <INPUT TYPE="TEXT" NAME="email" SIZE="30"><BR>

Clave de entrada: <INPUT TYPE="PASSWORD" NAME="clave" SIZE="10"><BR>

</FORM>.

<HR>

Submit y Reset

Para enviar datos se requiere de un botón Submit en el formulario. La sintaxis de dicho botón es la siguiente:



<INPUT TYPE="SUBMIT" [VALUE="Texto sobre el botón"]>

El atributo VALUE fija el texto sobre el botón, por omisión el texto es "Submit".

Otro botón útil es Reset, el cual limpia el formulario por completo. La sintaxis de dicho botón es la siguiente:



<INPUT TYPE="RESET" [VALUE="Texto sobre el botón"]>

El atributo VALUE fija el texto sobre el botón, por omisión el texto es "Reset".

El siguiente código muestra el uso de los botones Submit y Reset.

<H1> Ejemplo de un formulario </H1>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Nombre: <INPUT TYPE="TEXT" NAME="nombre"><BR>

Edad: <INPUT TYPE="TEXT" NAME="edad" SIZE="3"><BR>

E-mail: <INPUT TYPE="TEXT" NAME="email" SIZE="30"><BR>

Clave de entrada: <INPUT TYPE="PASSWORD" NAME="clave" SIZE="10"><BR>

<INPUT TYPE="SUBMIT" VALUE="Enviar datos">

<INPUT TYPE="RESET" VALUE="Limpiar formulario">.

</FORM>

<HR>



Checkbox y Radio

Otro tipo de campo de entrada son los Checkbox y Radio. Los primeros son útiles cuando se ha definido una lista de opciones a escoger y el usuario puede seleccionar alguna de ellas. La sintaxis general es la siguiente:



<INPUT TYPE="CHECKBOX" NAME="nombre de la opción" [VALUE="valor de la opción"] [CHECKED] >

El atributo NAME es útil para los programadores de CGI, ya que con dicho nombre se podrá hacer referencia a los elementos seleccionados en dichos programas. El atributo VALUE indica el valor de la opción cuando el usuario active el Checkbox. El atributo CHECKED indica cuando los elementos están seleccionados por omisión.

Una forma especial de utilizar estos elementos es mediante los Radio. Los elementos Radio son muy parecidos a los Checkbox pero con la diferencia de que sólo se puede escoger uno a la vez.

Para lograr esto se tiene que dar el mismo valor al atributo NAME para formar grupos de Radio. En dichos grupos únicamente se puede seleccionar uno a la vez. El siguiente código muestra los elementos del código anterior pero en su versión de Radio.

<H3> Ejemplo de un formulario </H3>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Indique el tipo de cursos que le gustar&iacute;a inscribirse<BR>

(seleccione uno):<BR>

<INPUT TYPE="RADIO" NAME="curso" >Espa&ntilde;ol<BR>

<INPUT TYPE="RADIO" NAME="curso" >Ingles<BR>

<INPUT TYPE="RADIO" NAME="curso" >Pintura<BR>

<INPUT TYPE="RADIO" NAME="curso" CHECKED>Matem&aacute;ticas<BR>

<INPUT TYPE="RADIO" NAME="curso" >Musica<BR>

<INPUT TYPE="RADIO" NAME="curso" >Literatura<BR>

<INPUT TYPE="SUBMIT" VALUE="Enviar datos">

<INPUT TYPE="RESET" VALUE="Limpiar formulario">

</FORM>

<HR>.Páginas para Internet



Áreas de texto <TEXTAREA ... >

Las áreas permiten al usuario poner más de una línea de texto en un solo elemento. La sintaxis general de la etiqueta es la siguiente:

<TEXTAREA COLS="Número de columnas"

ROWS="Number de renglones"

NAME="Nombre del elemento">

TEXTO INICIAL

</TEXTAREA>

Los atributos COLS y ROWS indican el número de columnas y renglones del TEXTAREA respectivamente. EL atributo NAME es la referencia para los programadores de CGIs de este elemento. El texto entre las etiquetas <TEXTAREA> y </TEXTAREA> es el texto que contendrá el elemento al abrir la página por primera vez. A continuación se muestra el código fuente de un ejemplo de este elemento y su presentación final en un navegador.

<H3> Ejemplo de un formulario </H3>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Llene sus observaciones en el siguiente espacio: <BR>

<TEXTAREA COLS="40" ROWS="6">

Texto inical para el elemento

TEXTAREA.

</TEXTAREA><BR>

<INPUT TYPE="SUBMIT" VALUE="Enviar datos">

<INPUT TYPE="RESET" VALUE="Limpiar formulario">

</FORM>

<HR>



Barras de opciones <SELECT ... >

La etiqueta <SELECT> permite al usuario seleccionar una opción de un conjunto de alternativas descritas por etiquetas. Cada alternativa es representada por la etiqueta <OPTION>. La sintaxis general de esta etiqueta es la siguiente:

<SELECT NAME="Nombre del elemento"

SIZE="NN"

[MULTIPLE]>

<OPTION [SELECTED] [VALUE="valor1"]> Etiqueta1

<OPTION [SELECTED] [VALUE="valor1"]> Etiqueta2

<OPTION [SELECTED] [VALUE="valor1"]> Etiqueta3

...

<OPTION [SELECTED] [VALUE="valor1"]> EtiquetaN

</SELECT>

Para la etiqueta <SELECT> el atributo NAME indica el nombre del elemento SELECT, el valor que tiene este elemento es la etiqueta que al final se seleccionó. El atributo SIZE especifica el número de opciones visibles a la vez. El atributo MULTIPLE indica que pueden seleccionarse más de una opción a la vez.

Para la etiqueta <OPTION> el atributo SELECTED, si se indica, marca como elegida la etiqueta correspondiente. VALUE indica un valor especial para el programa CGI, si no se especifica algún valor se asigna a la etiqueta como tal valor. Las etiquetas vienen a ser las opciones que el usuario podrá escoger.

<H3> Ejemplo de un formulario </H3>

<HR>

<FORM ACTION="http://132.248.225.206/cgi-bin/procesa.pl" METHOD="GET">

Indique su pais de origen:

<SELECTNAME="pais"

SIZE="1">

<OPTION VALUE="pais01"> Argentina

<OPTION VALUE="pais02"> Honduras

<OPTION SELECTED VALUE="pais03"> M&eacute;xico

<OPTION VALUE="pais04"> Venezuela

</SELECT>

<BR>

<INPUT TYPE="SUBMIT" VALUE="Enviar datos">

<INPUT TYPE="RESET" VALUE="Limpiar formulario">

</FORM>

<HR>



CGIs

El CGI es un conjunto de reglas para la conexión de aplicaciones externas con la información que tienen los servidores, tal como los servidores HTTP o Web. Un documento HTML proporcionado por un servidor Web es estático, lo cual significa que es un archivo de texto que no cambia. Un programa CGI, por otra parte, se ejecuta en tiempo real, por lo que puede proporcionar información dinámica.

Por ejemplo, si se desea "conectar" una base de datos de una plataforma UNIX al World Wide Web, para permitir su consulta a usuarios de todo el mundo, se necesita crear un programa CGI que el servidor Web ejecutará para transmitir información al controlador de la base de datos, recibir los resultados de la consulta y desplegarlos al navegador.

El ejemplo de la base de datos es una idea sencilla, pero se requiere de mucho tiempo para implementarla. Pero esto no es realmente una limitante para que se pueda realizar la conexión al Web, únicamente se necesita tener en mente que cualquier cosa que un programa CGI haga, no debe ser un proceso demasiado largo. De otra forma, el usuario que ha solicitado una consulta estará en su Navegador esperando a que algo ocurra.

Como un programa CGI es ejecutable, esto equivale básicamente a permitir que cualquiera corra el programa en el sistema que lo almacena, por lo cual existen medidas de seguridad que deben ser implementadas al usar programas CGI. El único efecto que el usuario probablemente notará, será el hecho de que los programas CGI necesitan residir en un directorio especial, para que el servidor Web lo reconozca antes de desplegarlo al Navegador. Este directorio está usualmente bajo el control del administrador del servidor Web, restringiendo al usuario común la creación de programas CGI. Hay otras formas para permitir el acceso a los scripts de CGI, pero esto depende de las políticas de administración establecidas.

Si se tiene la versión del servidor NCSA HTTPd, existe un directorio denominado "/cgi-bin". Este es el directorio donde todos los programas CGI residen actualmente. Un programa CGI puede ser escrito en cualquier lenguaje que le permita ser ejecutado en el sistema, tal como:

· C/C++

· Fortran

· PERL

· TCL

· SHELL (para cualquier versión de UNIX)

· Visual Basic

· Delphi

· AppletScript

Si se cuenta con un lenguaje de programación como C o Fortran, se necesitan compilar los programas antes de ser ejecutados. En el caso del servidor de NCSA HTTPd el directorio "/cgi-src" contiene los códigos fuente de algunos programas CGI que están en el directorio "/cgi-bin". Sin embargo, si se tiene en el sistema un lenguaje script, tal como PERL, TCL o Shell de UNIX, el script en sí mismo debe residir únicamente en el directorio "/cgi-bin", ya que no existe un código fuente asociado. Muchos programadores prefieren escribir CGI por lotes en vez de programas, ya que son más sencillos de depurar, modificar y mantener que los típicos programas compilados.

Para hacer llegar información a un programa CGI, es necesario que el usuario utilice una estructura de formulario definida por el lenguaje HTML que acabamos de ver. Los elementos de un formulario pueden variar dependiendo de la información que se desea obtener del usuario. A continuación se presenta el funcionamiento de un programa CGI con un servidor Web.

Luego que el usuario ha llenado un formulario de información en un Navegador, el usuario activa un botón (que es un vínculo hacia la aplicación CGI en el servidor).

1. El Navegador utiliza los parámetros de la definición del formulario (los atributos NAME de los elementos definidos), para enviar los datos al servidor.

2. Los datos viajan a través de Internet y llegan al servidor, pasando entonces hacia el programa CGI.

3. Se analizan los datos de la forma, según la petición del cliente, se procesan y el programa CGI "escribe" la respuesta en formato HTML que se enviará de regreso al cliente. La especificación del CGI establece que el servidor Web deberá "leer" el dispositivo definido como salida de datos del programa CGI.

4. El servidor agrega la información necesaria del encabezado HTTP y envía la salida del programa CGI a través de la Internet como un archivo HTML que el Navegador recibe.

5. El Navegador interpreta el código HTML y despliega los resultados en pantalla para el usuario. Este archivo generalmente deberá contener al menos, alguna notificación de que los datos fueron procesados por el servidor.

Como se puede apreciar, los CGI utilizan recursos del servidor que los proporciona. Es decir, el servidor debe contar con los compiladores adecuados, los controladores de bases de datos (si se utilizan bases de datos), etcétera.

Una de las principales características de los formularios es que permiten al usuario interaccionar con los CGI, dando lugar a sitios "dinámicos". Los formularios permiten al visitante proporcionar datos, que serán luego procesados por los CGI. Con estos formularios se puede solicitar información para la consulta en una base de datos, solicitar inscripciones, anexar información, entre otros.

Frames

Los frames nos permiten dividir una página en secciones. Una sección puede ser fija mientras que las demás se utilizan para desplegar información; esto hace que el sitio sea más fácil de navegar.

Supongamos que deseamos dividir en dos partes la ventana del navegador, la parte derecha y la parte izquierda. En este caso necesitamos de tres archivos html, el primero para la parte derecha, el segundo para la parte izquierda y el tercero que describe cómo se distribuyen los primeros frames.

Al tercer frame lo nombraremos Frameset. El efecto que se puede observar es que existe una página "padre" que hace referencia a otras denominadas "hijas" a las cuales se accede desde las primeras.

El archivo Frameset

Este archivo describe la distribución de los frames y es un documento HTML independiente que puede ser nombrado con cualquier nombre válido para el sistema donde se alojará. Existen algunas etiquetas que deben incluirse para este archivo:

<FRAMESET> y <FRAME>.

<FRAMESET [COLS={valor, porcentaje}] | [ROWS={valor, porcentaje}]> ... </FRAMESET>

Esta es la etiqueta principal de los frames. Todo frame será declarado entre dichas etiquetas. Es válido declarar nuevos <FRAMESET> dentro de otros. Algunas de las propiedades de esta etiqueta son las siguientes: Rows y Cols. Rows indica los frames que se desplegarán por renglones, por su parte Cols indican los frames que se desplegarán en forma de columnas. Estas propiedades son mutuamente excluyentes, es decir, para un <FRAMESET> sólo se puede utilizar Rows o Cols.

<FRAME [NAME="nombre_del_frame"] [SRC={URL}][SCROLLING="yes|no|auto"] [NORESIZE]>

Esta etiqueta sirve para la declaración de un simple frame. <FRAME> se coloca entre las etiquetas <FRAMESET> ... </FRAMESET>. Se debe utilizar un <FRAME> por cada frame en el que quiera dividir el área de despliegue del navegador. Algunas propiedades de la etiqueta son: NAME, SRC, SCROLLING y NORESIZE. NAME es utilizado para darle un nombre al frame para que pueda ser referido correctamente con base en las ligas de hipertexto. En nuestro ejemplo es importante que las ligas presenten información en el frame derecho y no en el izquierdo. SRC es parecido al de la etiqueta <IMG>, indica la ubicación del documento HTML que se desplegará en dicho frame. SCROLLING señala si se permite el despliegue de las barras de navegación en el frame. NORESIZE indica si el tamaño del frame puede cambiar automáticamente.

Uso de las etiquetas <FRAMESET> y <FRAME>

Los frames pueden colocarse de arriba hacia abajo (atributo COLS) o de izquierda a derecha (atributo ROWS). Cuando se definen los frames, se comienza con la esquina superior izquierda. El siguiente listado muestra un ejemplo del uso de las etiquetas <FRAMESET> y <FRAME>:

<FRAMESET COLS="150,*">

<FRAME NAME="izquierda" URL="ligas.html">

<FRAME NAME="derecha" URL="pagina_inicio.html">

</FRAMESET>

En primer lugar tenemos que los frames se distribuirán en columnas (de arriba hacia abajo), además la primera columna tendrá un tamaño de 150 pixeles y el otro lo que reste del despliegue.

(representado por el ‘*’), se puede utilizar en lugar de valores absolutos los porcentajes relativos al despliegue. El primer frame tendrá el nombre de "izquierda" y el segundo de "derecha". Por otra parte cada frame hace referencia a un documento inicial: ligas.html y pagina_inicio.html respectivamente. Es importante recalcar que este documento no emplea la etiqueta <BODY>, ya que el primer <FRAMESET> toma su lugar. La Figura 11 muestra un ejemplo con los siguientes listados:

index.html:

<FRAMESET COLS="150,*">

<FRAME NAME="izquierda" SRC="ligas.html">

<FRAME NAME="derecha" SRC="pagina_inicio.html">

</FRAMESET>

ligas.html:

<H1>P&aacute;gina de ligas</H1>

<A HREF="p1.html">P&aacute;gina 1</A>

página_inicio.html:

<H1>P&aacute;gina de incio</H1>

Esta p&aacute;gina esta la del lado derecho.

p1.html:

<H1>P&aacute;gina No 1</H1>

Figura 11. Pagina Web con frames.

Pero existe aquí un problema: cuando se utiliza la liga del frame de la izquierda la página a la que se hace referencia aparece también a la izquierda.

Para lograr que el despliegue se efectúe en el frame de la derecha todas la ligas que se tengan en documento ligas.html deben utilizar el atributo TARGET y darle el valor del nombre del frame correspondiente.

<H1>P&aacute;gina de ligas</H1>

<A HREF="p1.html" TARGET="derecha">P&aacute;gina 1</A>.

como por ejemplo otro codigo html son los de las tablas:
que se reindica asi:

<table> =significa inicio de una tabla

lo que sigue va adentro de la etiqueta de "table"

border="??" =significa el bordo o el tamaño de el marco que le vas a poner.
width="??%" =significa el tamaño del a tabla.
cellspacing="??" =significa el espacio de las celdas.
ceelpadding="??" = sin informacion.

al terminar de poner esta etiqueta se pone lo siguiente:

<tr>
<th aling="valor"> =en donde dice valor va algun valor segun sean los siguientes: left-center-right-top-middle- botom.

esto se repite sucesivamente segun las celdas que deseen obtener y siempre se deven de cerrar con la etiqueta de </th>.

al finalizar solo lo cierran con la etiqueta de </table>

un ejemplo de una tabla es la siguiente.........




<table border="4" cellspacing="4" cellpadding="4" width="80%">

<tr>
<th aling="center">titulo del a tabla numero uno</th>
<th aling="center" colspan="2">titulo numero dos de la tabla</th>
</tr>
<tr>
<td aling="left">dialogo numero uno</td>
<td aling="left">dialogo numero dos de la tabla</td>
<td aling="left">tercer dialogo de la tabla</td>

</table>

esto es lo basico sobre una tabla.