PROGRAMACION DE PAGINAS WEB CON HTML

1. Introducción al HTML
2. Descripción de componentes léxicos
   1. Caracteres
   2. Marcas
   3. Nombres
   4. Atributos
   5. Comentarios
   6. Estructura de los documentos
3. Elementos de cabecera
4. Elementos del cuerpo
   1. Encabezados o títulos
   2. Definición de bloques
   3. Listas
   4. Marcado logico de frases
   5. Marcado tipográfico de frases
5. Hiperenlaces (links o hiperlinks)
6. Formularios
   1. Introducción
   2. Elementos de un formulario
   3. Campos de entrada
   4. Campos de selección
   5. Areas de texto
   6. Envio de formularios
7. Colores
8. Imágenes
   1. Mapas
9. Tablas
10. Frames

1.- Introducción al HTML

El HTML (HyperText Markup Language) no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. Para crear documentos HTML o páginas WEB solo es necesario un editor de textos cualquiera (hay editores especialmente dedicados para la creación de estos documentos) y un visor o navegador (browser) que visualize dichos documentos.

La descripción del lenguaje se divide en varias partes :

• Descripción de los componetes léxicos del HTML, donde se indica el formato de los caracteres, marcas, nombres, atributos y comentarios.
• Estructura de los documentos, donde se explican las marcas utilizadas para definir las partes del documento.
• Caracteres, palabras y párrafos, son los juegos de caracteres aceptados en HTML, además de la descripción de como se tratan las palabras y los párrafos.
• Soporte de hipertexto, define marcas para definir relaciones entre distintos documentos, e incluso entre partes distintas de un mismo documento. Para ello, HTML define unas marcas denominadas hiperenlaces o links.
• Formularios, que permiten la comunicación entre el usuario y el servidor mediante datos que el usuario rellena y envia al servidor para que sean procesados.

2.- Descripción de los componentes léxicos

2.1.- Caracteres

Cada documento HTML puede emplear un juego de caracteres distinto. De todas formas, todas las marcas se pueden escribir usando el código ISO-646, que es el mismo código utilizado en los lectores de correo electrónico (e-mail).

Cualquier cadena de caracteres que no represente un marcado, se introduce en el documento como una sola línea, sin tener en cuenta los saltos de línea ni los tabuladores, a no ser que esta se encuentre dentro de una marca de texto preformateado.

En HTML se reducen los documentos a un código ASCII de 7 bits, por lo que habrá que utilizar algunos mecanismos para poder representar todos los caracteres, ya que los caracteres especiales, de control y las tildes no se pueden representar directamente, aunque la mayoria de los editores HTML permiten escribir tildes y las transforman al grabar el documento. Estos mecanismos pueden ser :

• Referencia por nombre : El caracter se representa con un signo & seguido del nombre del caracter y un punto y coma. Los nombres de los caracteres pueden verse más alante en la tabla de códigos.
• Referencia numérica : El caracter a representar se especifica de la forma &# seguido del número del caracter a representar en el código de caracteres seleccionado.

La tabla de caracteres utilizada por HTML es la siguiente:

2.2.- Marcas

Las marcas o directivas son las encargadas de delimitar los elementos de un documento, como cabeceras, párrafos, gráficos, ventanas, tablas, etc. (todos los elementos HTML). La mayoría de las marcas constan de una marca inicial y otra final, que da en nombre y los atributos del elemento a representar, seguida del contenido, y una marca de final.

Todas las marcas se escriben entre los símbolos < y > (menor y mayor). A continuación de esta marca de inicio se escribe el contenido que se desee, y después de esto hay que cerrar la marca con los símbolos </ nombre_marca>.

Algunas marcas no necesitan cerrarse, ya que solo constan de marca inicial. Todas las marcas se pueden anidar.

2.3.- Nombres

Los nombres indican el tipo de marca que se va a realizar. Un nombre consiste en una letra seguida de leras, dígitos, puntos o guiones. La longitud de un nombre está limitada a 72 caracteres en la definición HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades si.

En todas las marcas, el nombre debe comenzar inmediatamente después del símbolo <.

2.4.- Atributos

Los atributos son los parámetros que puede recibir la marca. Cuando una marca admite atributos, estos se describen a continuación del nombre del elemento. Generalmente, los atributos tienen la forma : Nombre = valor, aunque en algunos casos solo es necesario el nombre del atributo. Se pueden poner espacios antes y después del signo igual.

El valor de un atributo puede ser bién una cadena de caracteres entre comillas (simples o dobles), o bién un nombre de atributo (como en los descritos en al apartado 1.3).

2.5 Comentarios

Un comentario consiste en introducir en el documento descripciones explicativas que sirvan de ayuda al programador o a la persona que estudie el código. La forma de introducir un comentario en un documento HTML es muy sencilla. La marca utilizada para los comentarios es <! descripción_de_comentarios>. Toda la declaración del comentario se ignora a la hora de presentar el documento, ya que actua sólo como aclaración para el que estudia el código de la página.

2.6.- Estructura de los documentos

Un documento en HTML es un conjunto de elementos anidados. El primer elemento que debe haber en cualquier documento es <HTML>, y su marca final, </HTML> debe ser el último elemento del documento. Este elemento consta de dos partes : cabecera y cuerpo. Por tanto, toda página a realizar debe contener la siguiente estructura :

3.- Elementos de cabecera

La cabecera se utiliza para proporcionar o identificar información que sea util en todo el documento actual (la página WEB a la que se refiera). Esta cabecera va entre las marcas <HEAD > y </HEAD>. La cabecera puede contener los siguientes datos, sin importar el orden en el que aparezcan :

• Titulo (TITLE) : Indica el nombre del documento, que los visores (browsers o navegardores) emplean normalmento como título de la ventana. Es el único elemento obligatorio de la cabecera.

• Dirección de base (BASE) : Indica la dirección de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto (por ejemplo, si se lee de un disco duro local y su origen era un servidor Internet).

• El documento es un índice (ISINDEX) : Si se indica la palabra clave ISINDEX, se interpretará que la página es un índice y se permitirá al usuario introducir palabras clave para buscarlas.

• Enlaces relacionados (LINK) : Pueden incluirse en la cabecera enlaces relacionados con el documento.

• Metainformación (META) : Este campo sirve para proporcionar información sobre el documento que no pueda ser expresada en los campos anteriores. La información se describe usando pares nombre/valor, que pueden ser empleados para dos propósitos :
  1. Proporcionar datos al servidor para que genere campos de cabecera
  2. Para que el usuario incluya información adicional sobre el documento
  Para la primera, se emplean atributos del tipo HTTP-EQUIV y para la segunda del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT.

• Siguiente identificador (NEXTID) : Ya no se utiliza. Este campo lo utilizaban los editores de HTML para asignar nombres a los documentos de forma automática.

• STYLE HREF="url_estilo" : Este elemento hace referencia al URL de la hoja de estilos a emplear a la hora de visualizar el documento. Estas hojas suelen tener la extensión .CSS (Cascading Style Sheets), y son archivos que desarrollan ciertas empresas para la WWW.

4.- Elementos del cuerpo

El cuerpo contiene el texto o documento de la página que se va a presentar. Las marcas de comienzo y final de cuerpo son <BODY> y </BODY> respectivamente. Esta marca permite el atributo BACKGROUND="imagen" para activar una imagen contenida en un fichero como fondo del documento. Los elementos que pueden aparecer en el cuerpo se describen a continuación :

4.1.- Encabezados o títulos

Los encabezados o títulos son marcas que se emplean para dividir en texto en secciones, o para expresar títulos destacados. Las marcas empleados por los encabezados son <Hx> titulo </Hx>, siendo x un número entre 1 y 6. El título más grande es el 1, y el más pequeño el 6. Normalmente, se suelen representar con letra negrita y se alinean a la izquieda. Permiten el atributo ALIGN="modo" para alinearlo, con los valores posibles de LEFT, RIGHT y CENTER, para alinear a la izquierda, derecha y centro respectivamente. (Por defecto es LEFT).

4.2.- Definición de bloques

Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con un significado especial como direcciones o citas. También es posible utilizar marcas para saltos de línea y para insertas líneas horizontales. Las marcas de bloque son las siguientes :

• <P> párrafo </P> : Se utiliza para separar párrafos, ya que en HTML todo el texto es contínuo y necesita saber como cortar las líneas. Esta marca acepta opcionalmente el atributo ALIGN="modo", pudiendo tomar modo los valores LEFT, RIGHT y CENTER para alinear a la izquierda, derecha y centro respectivamente. Si se omite, por defecto alinea a la izquierda (LEFT).

• <PRE> texto_preformateado </PRE> : Permite introducir en el documento texto preformateado, es decir, el texto que haya dentro de esta marca aparecerá tal y como se haya escrito, respetando los saltos de línea, retornos de carro, tabulaciones, etc. Esta marca acepta opcionalmente el atributo :

  WIDTH=numero para indicar el nº máximo de caracteres po línea para que el visor ajuste el tamaño y tabulación del texto.

• <ADDRESS> direccion_e-mail </ADDRESS> : Se utiliza para indicar un anclaje a una dirección electrónica o e-mail, y suele representarse en letra cursiva.

• <BLOCKQUOTE> texto </BLOCKQUOTE> : Indica que el texto es una cita. Actua como un sangrado, con tabulaciones a la izquierda y a la derecha.

• <BR> : Este elemento solo tiene marca inicial, y se utiliza para que el visor salte de línea en el punto del documento en el que encuentre este elemento. Opcionalmente permite el atributo :

  CLEAR="modo", con el objetivo de indicar donde debe comenzar la siguiente línea en el caso de distribuir el texto alrededor de una imagen, pudiendo tomar modo los valores LEFT, RIGHT y ALL. LEFT indica que la siguiente línea ha de comenzar tan pronto como el margen izquierdo esté libre. RIGHT hace los mismo pero con respecto al margen derecho. ALL no comienza una línea hasta que los dos márgenes están libres.

• <HR> : Este elemento solo tiene marca inicial, y se emplea para dibujar una línea horizontal dentro del documento, usando caracteres o gráfico, dependiendo del visor utilizado. Esta marca permite varios atributos, todos opcionales, que son los siguientes:

  SIZE=numero_pixeles para indicar el nº de pixeles de ancho o grosor que se desea que tenga la línea.

  WIDHT=numero_o_porcetaje para indicar la longitud de la línea, que por defecto es todo el área de visualización de la página. Si se indica en número, se especifica en pixeles, y si se indica en porcentaje, este porcentaje debe de ir seguido del símbolo %.

  ALIGN="modo" para indicar el modo de alineación de la línea, pudiendo tomar modo los valores LEFT, RIGHT y CENTER, para alinearse a la izquierda, derecha o centro respectivamente. Por defecto es a la izquierda (LEFT).

  NOSHADE para especificar que la barra debe ser sólida, es decir, sin efectos de sombra.

4.3.- Listas

Las listas son en realidad otras marcas que permiten definir bloques, pero con unas características especiales. Las listas se utilizan para presentar de forma ordenada una serie de líneas. Existe varios tipos de listas, que son los siguientes :

• Lista desordenada o Unordered List (<UL>)

• Lista ordenada u Ordered List (<OL>)

• Directorio o Directory (<DIR>)

• Menú o Menu (<MENU>)

• Lista de definición o Definition List (<DL>)

Las listas desordenadas ponen delante de cada elemento de la lista un punto o un cuadro, mientras que las listas ordenadas ponen un nº de orden.

Excepto en las listas de definición y en el menú, todos los casos son iguales. Escribiendo <LI> línea_o_descripción delante de cada nuevo elemento de la lista bastará para construir la lista. <LI> no tiene marca de fin.

Ejemplo de uso de lista ordenada :

Ejemplo de uso de lista desordenada :

Las listas de definición permiten hacer definiciones especiales de cada uno de los elementos que forman la lista, mostrando la definición con una tabulación más que el elmento de la lista. Para ello solo basta con utilizar <DT> (Definition Term) para definir el elemento, y <DD> (Definition Data) para especificar su descripción. Estas marcas no tienen marca de fin.

Ejemplo de uso de lista de definiciones :

Existen unos atributos para controlar el aspecto de cada línea de la lista y los números en las listas ordenadas. Estos atributos son los siguientes :

• TYPE=simbolo : En las listas desordenadas se utilizan círculos para marcar cada línea. Esta marca va cambiando a medida que la lista se va anidando. Este atributo permite especificar que tipo de símbolo se quiere utilizar en las líneas independientemente del nivel de anidamiento. Esto se hace introduciendo como simbolo los valores disc para disco, circle para círculo o square para cuadrado.

• TYPE=marca : En las listas ordenadas, la numeración es a partir de 1. Se puede especificar el tipo de marca que se desea con los valores a para letras en minúsculas, A para mayúsculas, i para números romanos en minúsculas, I para números romanos en mayúsculas, o 1 para números.

• START=numero : Permite especificar cual ha de ser el primer número de la lista cuando no se desea que empieze por 1.

• TYPE : Puede tomar los mismos valores que toma en la lista en la que se encuentra la línea. Cuando se especifica, cambia el tipo de lista para esa marca y las siguientes. Además, si la línea pertenece a una lista ordenada se puede utilizar el atributo VALUE, con el que se puede modificar el número para esa marca y las siguientes.

4.4.- Marcado lógico de frases

Existen varias marcas para indicar que una palabra o frase tiene un significado especial. Estas marcas son las siguientes :

• <CITE> texto </CITE> : Indica que el texto es una cita, y generalmente se representa en cursiva

• <CODE> texto </CODE> : Lo marcado representa un ejemplo de código dentro del texto. Suele usar el tipo de letra de caja fija.

• <EM> texto </EM> : Denota énfasis. Generalmente se representa con letra cursiva.

• <KBD> texto </KBD> : Indica que el texto se introduce desde teclado y se representa usando el tipo de letra de caja fija.

• <SAMP> texto </SAMP> : Significa ejemplo (SAMPle), representa los caracteres escritos de forma literal y utiliza el tipo de letra de caja fija.

• <STRONG> texto </STRONG> : Denota énfasis fuerte y generalmente va en negrita.

• <VAR> variable </VAR> : Lugar de una variable, por ejemplo la que se le pasa a un programa. Se representa usando el tipo de letra de caja fija.

4.5.- Marcado tipográfico de frases

Se utiliza para indicar el aspecto de una palabra o texto. Las marcas correspondientes son las siguientes :

• <B> texto </B> : Establece el texto en negrita.

• <I> texto </I> : Establece el texto en cursiva.

• <TT> texto </TT> : Establece el texto de caja fija o Texto de Teletipo.

• <STRIKE> texto </STRIKE> : Establece el texto tachado.

• <U> texto </U> : Establece el texto subrayado.

• <BIG> texto </BIG> : Establece un texto grande.

• <SMALL> texto </SMALL> : Establece un texto pequeño.

• <SUB> texto </SUB> : Establece texto subíndice.

• <SUP> texto </SUP> : Establece texto superíndice.

5.- Hiperenlaces (links o hyperlinks)

Un caso especial de marcado es el representado por el elemento <A HREF="url"> elemento_para_salto </A>, que se utiliza para indicar que un texto hace referencia a otro, es decir, está anclado mediante un hiperenlace. HREF se utiliza para especificar el valor del URL (Uniform Resource Locator) o URI (Uniform Resource Identifier), que es la dirección del nuevo documento. El URL se puede referir a otro documento distinto o incluso al mismo documento, tanto como a cualquier otro tipo de recurso (FTP, Gopher, etc.). Los atributos opcionales son :

• NAME="nombre" : Nombra un anclaje para poder ser usado como anclaje principal de un hiperenlace, y puede ser referenciado desde un mismo documento, utilizando el formato <A HREF="#nombre"> elemento_para_salto </A>. Suele denominarse identificador de fragmentos.

Ejemplo del uso de links en un mismo documento (se supone que el documento se llama doc.htm) :

Como ya se ha descrito antes, un punto cualquiera de un documento marcado con NAME puede ser referenciado desde otro documento utilizando el formato especial de HREF.

• TITLE="titulo" : Sugiere un título para el enlace destino. Este atributo es solo informativo y puede ser usado para que se visualize al colocarnos sobre el enlace o para nombrar recursos que no incluyen título, como los gráficos.

• REL : Relaciones descritas por un hiperenlace. El valor es una lista de nombres de relaciones separados por un espacio en blanco.

• REV : Iguar que REL pero en dirección contraria.

• URN : (Uniform Resource Namer) Especifica un identificador para el primer anclaje del hiperenlace. La síntaxis de los URN aún no está especificada.

• METHODS : Especifica los métodos a usar para acceder al destino. Se escriben como una lista de palabras separadas por espacios y dependen del tio de URI. Como el atributo TITLE, solo es orientativo para el visor.

• TARGET="nombre ventana" : Solo en Netscape. Este atributo devuelve el nombre de la ventana del navegador a emplear, de modo que cuando se pulsa en un enlace, el documento aparece en una ventana que tiene el nombre de "nombre ventana". Si la ventana no existe, se abre una nueve y se le asigna el nombre dado por TARGET. Generalmente el nombre no se ve (se emplea el del recurso obtenido), pero otros anclajes pueden hacer referencia a esa ventana y, al seleccionarlos, el visor los muestra en ella.

• <BASE TARGET="ventana por defecto"> : Permite indicar un nombre por defecto para cada enlace de un documento que no tiene el atributo TARGET. Los nombres de las ventanas deben comenzar por un caracter alfanumérico, si no son ignorados. De todos modos, existen una serie de nombres especiales que empiezan con el caracter subrayado (_). Estos nombres especiales se describen a continuación :
  • TARGET="_blank" : Con este valor, el enlace siempre se cargará en una nueva ventana sin nombre.

  • TARGET="_self" : Con este valor, el enlace se cargará en la misma ventana en la que se encuentra. Esto es útil para anular el efecto de una asignación global con <BASE TARGET=" ">.

  • TARGET="_parent" : Este valor hace que el enlace se cargue en el FRAMESET inmediatamente superior al del documento actual. (Ver tema 10, Frames). Si el documento no tiene nada por encima el efecto es el mismo que con "_self".

  • TARGET="_top" : Este valor hace que el enlace se cargue en el cuerpo de la ventana. Se comporta como "_self" si el documento ocupa toda la página, pero resulta muy util para salir de un bloque de FRAMES anidados.

  La utilidad de este atributo está en que podemos hacer que el cliente abra distintas ventanas para cada enlace, sin dejar de tener nuestra página disponible; además de sus usos en el nuevo elemento FRAME, descrito en el tema 10.

6.- Formularios

6.1.- Introducción

Un formulario es una plantilla para representar un conjunto de datos, el método de eviarlos y el URI de la acción asociada, es decir, la referencia al programa que va a realizar el proceso con los datos..

El formulario consta de un conjunto de datos formado por los pares nombre/valor. Los nombres se especifican en el atributo NAME de los elementos de entrada del formulario, y los valores toman un valor inicial empleando distintos marcados, que podrán ser editados por el usuario.

Los formularios pueden mezclarse con otros elementos, por lo que podrá estar dentro de cualquiera o contener a cualquiera. Las marcas de comienzo y fin de formulario son <FORM> y </FORM> respectivamente.

El uso de formularios está limitado a su uso en las páginas montadas en los servidores o con acceso a la red, ya que los programas asociados sólo harán efecto en el servidor. Sin embargo han aparecido ya algunos navegadores capaces de llamar a programas locales.

6.2.- Elementos de un formulario

La declaración o el desarrollo del formulario se realiza entre las marcas <FORM> y </FORM>. La marca de inicio permite los siguientes atributos :

* ACTION="programa" : Especifica el URI de la acción o programa asociado al formulario. Si no se especifica, por defecto es el URI BASE del documento.

* METHOD=modo : Indica el método de acceso al URI de la acción. Estos métodos, es decir, el valor de modo, puede ser GET o POST. Estos modos están explicados en el apartado "Envio de formularios" en el punto 6.6.

* ENCTYPE=tipo : Especifica el tipo de codificación para el transporte de los pares de datos nombre/valor, excepto en los casos en los que el protocolo no imponga uno. También se utiliza dentro de la declaración de los formularios para enviar ficheros a los servidores de HTTP, de modo que se pueden escribir formularios que soliciten al usuario el envio de un fichero. Un ejemplo de esto se encuentra a continuación :

* WRAP=valor : Va dentro del elemento TEXTAREA y permite controlar la manera de gestionar el flujo del texto dentro de las áreas de entrada de texto en formularios. WRAP puede tomar los siguientes valores :

Los elementos especiales para formularios son los siguientes :

- Campos de entrada de datos.

- Campos de selección.

- Areas de texto.

6.3.- Campos de entrada (INPUT)

El elemento INPUT representa un campo de entrada de datos por teclado. Esta marca debe contener siempre el atributo NAME="nombre_variable", donde "nombre_variable" será el nombre que tome la variable que contenga un determinado valor fuera del documento HTML, es decir, en el programa que tratará dichos datos. Los demás atributos posibles que puede tomar vienen datos por el valor del atributo TYPE, que determina el tipo de entrada de datos y que puede ser :

Este es el valor por defecto del atributo TYPE. El atributo NAME es obligatorio en este tipo de elementos para indicar el nombre del campo. Los atributos opcionales que puede tomar son :

* MAXLENGTH=longitud : Limita el número máximo de caracteres que se pueden introducir en el campo. Si el valor es mayor que el del atributo SIZE, el visor realizará un desplazamiento de la línea. El número máximo de caracteres es por defecto ilimitado.

* SIZE=anchura : Especifica la cantidad de espacio reservada para este campo dentro del documento

* VALUE=valor : Indica el valor inicial del campo

Ejemplo :

Este elemento actúa exactamente igual que el anterior, es decir, que INPUT TYPE=TEXT, con la única diferencia de que no se vé el texto al escribirlo, sino que solo se visualizan asteriscos.

Este elemento devuelve un valor lógico o booleano, es decir, Verdadero o Falso, Si o No. Si a un conjunto de elementos de este tipo se le asigna el mismo nombre, se obtendrá un área de selección múltiple. Estos elementos requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del valor del campo aportada por el elemento respectivamente. Permite seleccionar varios elementos.

Posee el atributo opcional CHECKED, que indica que el valor inicial del elemento es seleccionado.

Ejemplo :

Este elemento devuelve un valor lógico o booleano, es decir, Verdadero o Falso, Si o No. Un conjunto de elementos de este tipo con el mismo nombre representan un campo de selección múltiple, en el que sólo un elemento se puede marcar. Estos elementos requieren los atributos NAME y VALUE. Opcionalmente permite el atributo CHECKED para indicar que el estado inicial es seleccionado. En cualquier momento, sólo uno de los botones del mismo grupo puede estar seleccionado. Si a ninguno de los elementos se le da el atributo CHECKED, el browser debe marcar el primero de ellos inicialmente.

Ejemplo :

Este elemento especifica na imagen para que el browser o visor la muestre y permita la entrada de dos campos, las coordenadas x e y de un pixel seleccionado de dicha imagen. Los nombres de los coampos son iguales al del campo, añadiendo al final x e y respectivamente. Este tipo implica también INPUT TYPE=SUBMIT, es decir, cuando se selecciona un pixel, se envía todo el formulario.

Los atributos NAME y SRC son necesarios, y los campos ALIGN e IMG son opcionales.

Ejemplo :

Este elemento representa un campo oculto. El usuario no interactúa con él, es el atributo VALUE el que especifica el valor del campo. Tanto el atributo NAME como el atributo VALUE son obligatorios.

Ejemplo :

Representa una opción, normalmente mediante un botón, que lindica que pulsando sobre el se debe enviar el formulario. Cuando se selecciona dicho botón, se pasa a ejecutar el programa de envio que se haya especificado al inicio del documento con la orden FORM METHOD=metodo ACTION="programa.ext" (esto se explicará más adelante, en el apartado de 6.6, Envio de formularios). Como atributos opcionales acepta los siguientes:

* NAME="cCampo" : Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE. En caso de que no se incluya el atributo, este elemento no es un campo.

* VALUE="cNombre" : Indica la etiqueta de entrada para el botón.

Ejemplo :

Este elemento representa normalmente un botón que indica que pulsado sobre él se deben reiniciar todos los valores de todos los campos del formulario a los que hace referencia este botón, es decir, vuelven a su valor inicial. El atributo opcional VALUE se utiliza para indicar la etiqueta del botón.

Ejemplo :

6.4.- Campos de selección (<SELECT>)

Este elemento se utiliza para seleccionar un valor de entre una lista de ellos, todos entre las marcas <SELECT> y </SELECT>. Para definir estos valores se utiliza el elemento <OPTION>valor, con los siguientes atributos opcionales :

* MULTIPLE : Indica que el valor puede incluir más de una opción.

* NAME="cNombre" : Especifica el nombre del campo.

* SIZE=tamaño : Determina el número de opciones (items) visibles. Si se indica un tamaño de 1, se suelen repreentar como menús desplegables, y si el tamaño es mayor, se suele representar una lista con barra de desplazamiento.

El elemento <OPTION> sólo puede aparecer dentro de un elemento <SELECT>, y representa una de las posibles opciones. Acepta los siguientes atributos :

* SELECTED : Indica que la opción a la que hace referencia está seleccionada inicialmente. Si ninguna opción lleva este atributo, el visor suele presentar la primera.

* VALUE="cNombre" : Indica el valor a devolver si se selecciona la opción. Si no se incluye este atributo, se devuelve el contenido del elemento.

Ejemplo :

6.5.- Areas de texto (<TEXTAREA>)

Este elemento representa un campo de texto de múltiples líneas. Los atributos que admite son los siguientes :

* COLS=columnas : Indica el número de columnas visibles del área de texto (en caracteres). Si la longitud del texto excede de este nº de columnas, aparece una barra de desplazamiento horizontal.

* NAME="cNombre" : Indica el nombre del campo.

* ROWS=filas : Indica el número de filas visibles del área de texto (en caracteres). Si la longitud del texto excede de este nº de filas, aparece una barra de desplazamiento vertical.

El valor inicial del texto es lo que se encuentre entre <TEXTAREA> y </TEXTAREA>.

Ejemplo :

6.6.- Envio de formularios

Un browser o visor de HTML comienza un formulario presentando el documento con los valores de los campos en su estado inicial. Según el tipo de campo, el usuario modificará sus valores de una forma u otra (rellenando con texto, seleccionando una o varias opciones, etc.). Cuando el usuario termina de rellenar el formulario, puede enviarlo utilizando un botón de envio o una selección en el pixel de una imagen. En ese momento, el browser analiza las entradas, y en función del método, acción y tipo de codificación, lo envía.

En caso de que el formulario solo tuviera un campo de entrada de texto de una línea, el browser debe aceptar un intro como una petición de envio del formulario.

La codificación por defecto de todos los formularios es, según el esquema MIME, application/x-www-form-urlencoded. Un conjunto de datos de un formulario se representa en este caso del siguiente modo :

1. Los nombres de campos y los valores son preprocesados : los espacios son reemplazados por el símbolo +, y los caracteres son sustituidos como en los URL, es decir, los caracteres no alfanuméricos se representan con un signo de tanto por cien y dos dígitos hexadecimales, que indican el código ASCII del caracter (%HH). Los saltos de línea (utilizados en los campos de múltiples líneas), se representan con pares CRLF (sustituidos por %0D%0A).

2. Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el símbolo = y los pares separados entre sí por el símbolo &. Los campos con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE sí.

El método de consulta depende de los efectos que el formulario tenga en el estado del resto del mundo, es decir, si el envío va a producir cambios en cualquier documento o programa que no sea nuestro propio browser.

Si el proceso del formulario no produce cambios, el mégodo usado debe ser GET. Un ejemplo de este tipo de formularios son las consultas a bases de datos, que no tienen efectos laterales visibles.

Para procesar un formulario cuyo URL de acción es un URL de tipo HTTP y el método es GET, el visor genera un URI que comienza con el de la acción al que se le aáde un interrogante (?) y el conjunto de datos codificado con el formato application/x-www-form-urlencoded visto en el punto anterior. Para acceder a la consulta el visor accede al URI de la misma manera que lo hace con los que aparecen en los anclajes.

De todos modos, en algunos casos, la codificación de los datos puede generar un URI extremadamente largo, lo que puede provocar un funcionamiento erróneo con algunos servidores de HTTP antiguos. Por esta razón, algunos formularios que no tienen efectos laterales, se escriben usando el método POST.

Para formularios con efectos laterales (como uno que modifique una base de datos) se emplea el método POST.

Para procesar un formulario cuyo URL de acción es de tipo HTTP y el método es POST, el browser gestiona una transacción de tipo POST del protocolo HTTP, usando el URI de la acción y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded como antes. El visor debe presentar la respuesta del HTTP POST de la misma forma que la respuesta obtenida con el método GET.

El estado inicial de los datos es el siguiente :

Hay que señalar que la entrada de tipo RADIO tiene valor inicial, mientras que la del tipo CHECKBOX no.

Cuando el usuario rellena los campos y solicita el envio, suponiendo que los valores de los campos sean los siguientes :

entonces el browser gestiona unatransacción HTTP POST usando el URI /cgi-bin/post-query. El cuerpodel mensaje que se enviará será el siguiente :

Esto es muy importante de saber a la hora de realizar programas externos que traten los datos del formulario.

7.- Colores

El aspecto del documento es también muy importante. Para este fin se han creado unos atributos que permiten cambiar los colores. En el elemento <BODY> se pueden introducir los siguientes atributos :

• BGCOLOR="#rrggbb" : Permite cambiar el color de fondo del documento. Si además de este color se incluye una imagen de fondo, el color especificado por este atributo es el que se encuentra debajo, es decir, si la imagen es transparente, se ve el color de fondo.

• TEXT="#rrggbb" : Indica el color del texto

• LINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces

• VLINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces que se han visitado recientemente.

Nota : Los valores "rrggbb" indican la mezcla de colores, siendo rr = rojo, gg = verde y bb = azul (red, green, blue = RGB). Estas iniciales deben ser sustituidas por números entre 0 y 255 (00 y FF en hexadecimal). El color "#000000" es negro, y el "#FFFFFF" es blanco.

A continuación se muestra una tabla con algunos colores :

8.- Imágenes

Para incluir imágenes en los documentos HTML se utiliza la marca <IMG SRC="fichero_imagen"> texto_auxiliar </IMG>. El texto auxiliar es opcional y sirve para que este se coloque alrededor de la imagen. El atributo SRC lo que en realidad hace es un enlace con el fichero que contiene la imagen. Están permitidos varios formatos de imagen, como GIF, JPEG o BMP. Si se combina con <A HREF="url">, una imagen puede ser el enlace con otros lugares u otros documentos. Los atributos opcionales que permite son los siguientes :

• ALT="titulo" : Indica un nombre para la imagen, para que en caso de que el documento se carge en un ordenador que no tenga modo gráfico, aparezca este nombre en lugar de la imagen.

• ALIGN="modo" : Alinea la imagen respecto al texto. Este modo puede tomar los siguientes valores (por defecto, se usa BOTTOM) :
  • TOP : Alinea la imagen con el elemento más alto de la línea.

  • TEXTTOP : Alinea la imagen con el elemento más alto de la línea, pero sólo contemplando el texto más alto, sin considerar cualquier otro elemento. Generalmente este marca tiene el mismo efecto que TOP, pero no siempre es así.

  • MIDDLE : Alinea la línea base del texto con la mitad de la imagen.

  • ABSMIDDLE : Alinea el punto medio vertical de la línea de texto con la mitad de la imagen.

  • BOTTOM : Alinea el inferior de la imagen con la línea base del texto.

  • BASELINE : Es exactamente igual que el anterior, y existe debido a que Netscape lo quiere implementar como un estandard.

  • ABSBOTTOM : Alinea el inferior de la imagen con el inferior de la línea.