Los formularios nos permiten dentro de una página Web solicitar información al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hallan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este último paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programación como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las variables a nuestra dirección de correo electrónico.

La declaración del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaración se indican los elementos (variables) de entrada. La directiva <FORM> tiene los parámetros action y method.

action = "programa"

Indica el programa que va a "tratar" las variables que se envien con el formulario. Este programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. A este tipo de programas se les llama cgi-bin, y normalmente están escritos en PERL, C, TCL, shell de unix, ... En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: direccion_de_correo". También puede ser una URL usando el método GET (por ejemplo, un botón para ir a otra página).

method = POST / GET

Indica el método según el que se transferiran las variables. POST envía los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El método GET añade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables la "?"). El método de uso más normal es POST.

enctype =

Indica el tipo de documento en formato MIME. El más usado para que lleguen el contenido a través de un mail con el método post sería text/plain

Campos de Entrada

Para la introducción de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros.

type= text name = campo

Indica que el campo a introducir será un texto. Sus parámetros son :

maxlength = número

Número máximo de caracteres a introducir en el campo.

size = número

Tamaño en caracteres que se mostrará en pantalla.

value = "texto"

Valor inicial del campo. Normalmente sera " ", o sea, vacío.

type = password name = campo

Indica que el campo será una palabra clave. Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los mismos que para text.

type = checkbox name = campo

El campo se elegirá marcando una casilla de verificación. Se permite marcar varias casillas. Los valores de las casillas serán indicados por:

value = "valor"

checked

La casilla aparecerá marcada por defecto.

type = radio name = campo

El campo se elegirá marcando una casilla de opción. Sólo permite marcar una de las casillas. El name debe ser en todas el mismo. Los valores de las casillas serán indicados por:

value = "valor"

type = image name = campo

El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro:

src = "fichero de imagen".

type = hidden name = campo

El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parámetro :

value = "valor"

type = file value = "texto"

Muestra un botón para seleccionar el archivo a enviar.

type = submit

Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que aparecerá en el botón.

type = reset

Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.

Campos de Selección

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parámetros son :

name = campo

Nombre del campo

size = num

Número de opciones visibles. Si se indica 1 se presenta como una lista desplegable, se se indica más de uno se presenta como una lista con barra de desplazamiento.

multiple

Permite selecionar más de un valor para el campo.

Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parametro selected para indicar cual es la opción por defecto. En caso de que no se especifique, se tomará por defecto la primera opción de la lista.

Áreas de texto.

Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan en él comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parámetros:

name = campo

Nombre del campo.

cols = num.

Número de columnas de texto visibles.

rows = num.

Número de filas de texto visibles.

wrap = VIRTUAL / PHYSICAL

Justifica el texto automáticamente en el interior de la caja. La opción PHYSICAL envía las líneas de texto separadas en líneas físicas. La opción VIRTUAL envía todo el texto seguido.

Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de datos.

Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a mi dirección de correo. Si pulsas el botón Borrar se borrarán los datos que hayas introducido en el Formulario.
El texto que se recibiría por correo electrónico sería parecido a este:

Podemos observar que en el correo se separan las variables con el símbolo &, los espacios se sustituyen por el signo + y se representan los códigos de retorno de carro y avance de línea del campo de texto con los caracteres %0D y %0A respectivamente.

Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página Web.

Existen diferentes trucos para hacer nuestras páginas Web más atractivas. En la mayoría de los casos no se trata de directivas de HTML pero su uso permitirá conseguir mejores resultados estéticos en nuestras páginas Web.

Un Gif animado es un gráfico del tipo GIF 89a que da la impresión de animación. Para conseguir este efecto se deben crear por separado los gráficos GIF que componen la secuencia de la animación. Una vez hecho esto utilizaremos un programa para "fundir" todos estos gráficos en uno solo. Al mostrar este gráfico en nuestra página Web, el visor mostrará la secuencia de todos los gráficos individuales de forma continua, con lo que dará el aspecto de animación que buscamos.

Uno de los programas que permite crear Gifs animados es el GIF CONSTRUCTION SET desarrollado por Alchemy MindWorks. Asimismo existe una URL donde se pueden "enviar" la secuencia de gifs estáticos y nos devuelve el gif animado correspondiente. La URL es http://www.vrl.com/Imaging/index.html.

A continuación podemos ver un gif animado. Si tu visor no reconoce esta característica verás el gráfico estático.

Un Gif transparente es un gráfico del tipo GIF 89a en el cual se define su color de fondo como transparente. Con esto conseguimos el efecto de que el gráfico se encuentre como "flotando" en nuestra página. Para crear Gifs con el fondo transparente podemos utilizar un programa freeware tal como Paint Shop Pro o LviewPro. De cualquier forma, los programas gráficos recientes, como CorelDraw 6, Adobe Photoshop, ... permiten crear Gifs con colores transparentes.

Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una página Web "tal cual". Para incluir estos programas en una página Web se utiliza la directiva <SCRIPT> </SCRIPT>. Esta directiva tiene el parámetro language para indicar el lenguaje de programación utilizado para el Script. El código del programa debe "ocultarse" con las directivas de comentario de HTML <!--   //--> con el objeto de que no sean mostradas por los visores que no reconocen la directiva <SCRIPT>. Los scripts más usados suelen estar escritos en lenguaje Javascript. Asimismo se podrán incluir con esta directiva programas escritos en C++, Perl o Visual Basic.

La inclusión de un Script en una página Web se haría de la siguiente forma:

Para saber más a cerca de JavaScript, puedes ir a la seccción de Javascript o a cualquiera de los scripts que encontrarás en el índice bajo ese título.

La directiva principal para manejar los estilos es <STYLE> y algunos de sus parámetros son los siguientes:

font-size: número unidad_de_medida

Tamaño de la letra. La unidad_de_medida puede ser puntos (pt), pulgadas (in), centímetros (cm), milímetros (mm), picas (pc) o pixels (px).

font-family: "nombre"

Indica el nombre de la fuente. Como con el atributo FACE de la directiva FONT, se pueden poner varias separadas por comas, cada una entre comillas si su nombre esta compuesto por varias palabras. También se admiten nombres genéricos: serif, sans-serif, monospace, ...

font-weight: valor

Indica el "peso" del texto. Podemos dar valor en texto o en números, por ejemplo: bold, 100, 600, 800, ....

font-style: valor

Indica la apariencia del texto. Los valores posibles son: normal o italic.

line-height: número

Sirve para cambiar el interlineado, pudiendose especificar en las unidades de medida mencionadas anteriormente o como porcentaje de la altura del texto.

color: nombre

El color del texto. Se puede indicar el nombre del color o el valor RGB.

text-decoration: valor

Atributos especiales del texto. Los valores posibles son: none (ninguno), underline (subrayado), overline (subrayado superior), line-through (tachadura) y blink (parpada sólo en Netscape).

text-transformation: valor

Convertir el texto. Los valores posibles son: uppercase (convierte todo a mayúsculas), lowercase (convierte todo a minúsculas) y capitalize (la primera letra de cada palabra en mayúsculas y las demás en minúsculas).

margin-left: número

Margen izquierdo. Se puede indicar en las unidades de medida reconocidas.

margin-right: número

Margen derecho. Se puede indicar en las unidades de medida reconocidas.

margin-top: número

Margen superior. Se puede indicar en las unidades de medida reconocidas.

text-align: valor

Alineación del texto. Los valores posibles son: left, right, center y justify.

text-indent: número

Indentación del texto desde la izquierda. Se puede indicar en las unidades de medida reconocidas.

letter-spacing: número

Controla el espacio entre letras (kerning). Se utilizan valores decimales (usando como separador el punto) y en la unidad de medida em. Por ejemplo, 0.4em

background: nombre

Color del fondo. Admite 2 nombres: el del color (con nombre o valor RGB) y/o el nombre de un fichero de imagen. En el último caso se utiliza la expresión "url(dirección_del _fichero)". Por ejemplo: background: white url(http://www.htmlhelp.com/foo.gif)

Las hojas de estilo pueden actuar a 3 niveles: sobre una directiva individual (por ejemplo: <P>) o una zona de texto, sobre todo un documento, o sobre un conjunto de documentos. En el caso de utilizar los 3 en un mismo documento, el orden de prevalencia será directiva individual, documento, hoja de estilo en fichero.

Sobre una directiva individual

Introduciendo la directiva <STYLE> como un parámetro cuyo valor sean todos sus parámetros entre comillas y separados por ";". Por ejemplo: <P style="text-align:justify; text-indent:5cm">. Esto modificará este párrafo haciendo que esté indentado 5 cms. y alineado por ambas partes.

Sobre una zona de texto

Otra forma de modificar el texto, no de una directiva, sino de una zona de texto, es utilizar la directiva <SPAN> y utilizar como parámetro la directiva <STYLE> como en el ejemplo anterior. También se puede usar la directiva <DIV>, de la misma forma. La diferencia entre las dos, s que la segunda cree una línea vacía por arriba y por abajo.

Sobre todo un documento

En este caso se definen los estilos en la cabecera del documento. Ya que esta directiva no es reconocida por todos los navegadores, es bueno (como hacemos con los scripts de Javascript) meter todo el texto de la directiva dentro de un comentario. Dentro de la directiva <STYLE> se pueden redefinir tantas directivas como se quiera. Por ejemplo:
<STYLE type=text/css>
<!--
H1 {text-align:center; color: blue}
P {text-align:justify; text-indent:5cm}
-->
</STYLE>

Sobre un conjunto de documentos

Vendría a ser como una plantilla de estilos, de manera que puede ser usada por varios documentos y que al modificarla permite cambiar la apariencia de todos ellos. Se trata de grabar los estilos en un archivo con extensión .css, en el que sólo estará la directiva <STYLE>, sin necesidad de ninguna otra directiva. Para luego poder activar y usar esa hoja de estilos en una página habrá que utilizar la directiva <LINK> dentro de la sección <HEAD>. Los parámetros de la directiva <LINK> son:

rel: STYLESHEET

href: dirección (URL del archivo donde está grabada la hoja de estilo)

Variantes

Se pueden definir variantes de un estilo, es lo que conocemos por clases. Para ello a la hora de definir los estilos se crearán otros con el mismo nombre de la directiva que estamos redefiniendo, seguido de un punto y un "nombre". Por ejemplo:
P {text-align:justify; text-indent:5cm}
P.normal {text-align:justify; text-indent:0cm}

Para hacer una variante para todos los estilos usaremos all.nombre_variante.

Para utilizarla deberíamos usar el parámetro class="nombre_variante". Por ejemplo:
<P class=normal>.

Pseudoclases y pseudoelementos

Se trata de clases y de elementos ya predifinidos por el navegador. Las pseudoclases actuales son:

• :link: representa cómo se verán los enlaces
• :active: representa cómo se verán los enlaces activos
• :visited: representa cómo se verán los enlaces ya visitados

Actualmente, sólo la etiqueta <A> puedo hacer uso de estas pseudoclases (a:link{definicion_de_estilo}. Si queremos definir variantes para las pseudoclases, la sintáxis será: A.clase:pseudoclase{definicion_de_estilo}. Por ejemplo: A.bonito:link{text-decoration:none}, para hacer vínculos sin subrayado.

Los pseudoelementos actuales son (no se visualizan en navegadores 4, ni en Explorer 5):

• :first-line: la primera línea de un bloque de texto (un párrafo, un div, ...)
• :first-letter: la primera letra de un elemento texto. Por ejemplo, para hacer capitulares.

La sintáxis será: elemento:pseudoelemento{definicion_de_estilo}. Por ejemplo: P:first-letter{font-size:200%}, para hacer que la primera letra de cada párrafo sea de tamaño doble.

Agrupar

Por último, se pueden agrupar distintos parámetros. Podríamos hablar de tres casos: cuando son los mismos, los de texto y los de márgenes.

Si se quiere aplicar los mismos atributos a varias directivas.

H1, H2, H3 {font size: 15pt; color: blue}

Agrupar parámetros de texto:

P {font-weight: bold; font-size: 13pt; line-height: 16pt; font-family: Arial, Helvetica;}

P {font: bold 13pt/16pt Arial, Helvetica;}. El orden es importante: font-weight y font-style antes que los demás.

Agrupar parámetros de márgenes:

BODY {margin-top: 20 px; margin-right: 10px; margin-left: 10px}

BODY {margin: 20px 10px 0px 10px} El orden es importante: superior, derecho, inferior e izquierdo.

Selección contextual

Se pueden definir estilos para directivas sólo en determinadas circunstancias. Por ejemplo:

	P B {text-align:justify;  text-indent:5cm}
	OL LI {text-align:justify;  text-indent:0cm}

Directivas nuevas e identificadores

También se pueden crear nuevas directivas individuales. La forma será:

	#nombre {font-familiy:Arial}

	<P ID=nombre>

Este sistema lo usaremos para definir capas en DHTML.