sábado, 24 de abril de 2010

Trabajar en HTML

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 email, con lo que recibiríamos un email convencional.

Pero puede ser que lo que necesitemos sea sólamente 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.

Estructura de un formulario

La estructura general de un formulario es:
1. Etiqueta de inicio:
-


2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.

3. Botones de envío y de borrado.

4. Etiqueta de cierre


Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos
sean enviados por email 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 abitualmente 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 email, nada más pulsar el usuario el botón de envío.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

Elementos para introducir los datos

a) Introducción por medio de texto
b) Introducción por medio de menús
c) Introducción por medio de botones

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

En donde:

xxx es la palabra que indica el tipo de introducción.
yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.

Tablas

Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era
utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los
espacios en blanco para que quede todo alineado formando filas y columnas, con un
resultado muy poco estético.
Estructura de una tabla
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para
confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es
y
. Es
decir:

-

-[resto de las etiquetas]
-


Para que los datos vayan dentro de cajas formadas por un borde tenemos que añadir el
atributo BORDER a la etiqueta, es decir:

-

-[resto de las etiquetas]
-


En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row)de la tabla, que son y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

-
-[etiquetas de las distintas celdas de la primera fila]
-
-
-[etiquetas de las distintas celdas de la segunda fila]
-

En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son
y , que engloban el contenido de cada celda concreta (texto, imágenes, etc.).

Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas.
Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

-

-


-



-
-

-



-
-
fila1-celda1 fila1-celda2 fila1-celda3
fila2-celda1 fila2-celda2 fila2-celda3


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.

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.

Todo lo anterior se refleja en el siguiente ejemplo HTML:
-
-
-
-
-
-
-
-
-

No hay comentarios:

Publicar un comentario