Elaboración de páginas web: Lenguaje HTML
Arquitectura cliente/servidor -Introducción al lenguaje HTML - Principales elementos del lenguaje html - Creación de documentos  HTML - Cabecera del documento - Creación de encabezados, estilos y párrafos - Creación de enlaces y vínculos - Creación de listas - Creación de tablas - Añadir imágenes

HTML AVANZADO:
Creación de páginas basadas en marcos o frames - Creación de formularios y scripts CGI - Envío y gestión de información
 

Arquitectura cliente/servidor

Antes de comenzar a explicar la estructura de las páginas web y el lenguaje html, es importante tener claro en que consiste la arquitectura cliente/servidor en la que se basan tanto las redes locales como la propia Internet

Pensar en una red clásica de pescadores es bastante gráfico para comprender la estructura de la Red. En ella, se pueden
diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de malla que unen los distintos nudos.
 
Al hablar de Internet estamos hablando también de una red y los elementos que componen esa red son los nodos y los enlaces. La estructura de Internet no es tan regular como una red de pescadores, si bien se pretende tener conectividad entre todos los nodos, es decir, lo ideal es tener la posibilidad de encontrar al menos dos rutas o caminos (path en inglés) entre dos nodos cualesquiera. Uno de ellos será el nodo origen  de los mensajes mientras que el otro será el nodo destino.

Los nodos no son más que ordenadores dedicados a encaminar los paquetes hacia su destino, eligiendo el enlace más
adecuado en cada momento. Estos nodos reciben el nombre de enrutadores (ROUTERS), y serían algunos de los nudos de
la parte interna/central de la red de pesca. Igualmente, nosotr@s al conectarnos utilizamos un ordenador, que si bien también
es un nodo de la red se le denomina HOST (tu ordenador).
 
Los enlaces son las conexiones físicas entre nodos y están formados por un conjunto de circuitos de datos en forma de hilos
telefónicos, fibras ópticas, microondas y demás soportes propios de Telecomunicaciones. La información, se divide en trozos
de un número determinado de caracteres. A cada trozo de estos, denominado paquete, se le asocia información de
enrutamiento, y se envía por un enlace. Es decir, cuando se establece una conexión internet, tu equipo queda conectado por un enlace a la red.

Existen una serie de ordenadores  que están conectados a la red con el objeto de ofrecer y proporcionar alguna clase de
servicio a todo aquel que se lo pida. Estos ordenadores son también nodos de la red y se denominan servidores
(SERVERS).

Para poder acceder a los recursos que ofrece un servidor se necesita un tipo de programa específico, denominado programa
cliente, que debes ejecutar en tu ordenador y que es el encargado de mantener el diálogo con el programa servidor. Se dice
que estamos en una arquitectura cliente / servidor, en la que el programa servidor corre en el ordenador que ofrece algúnrecurs o (server) y el programa cliente en el ordenador de aquél que lo reclama (host). Los programas navegadores (Netscape, Explorer) son clientes que piden páginas a diversos servidores que existen en la red.
 

Introducción al HTML
 
Cuando tu programa navegador (cliente) pide una página web al servidor, éste le envía un fichero de texto (con extensión htm o html) en lenguaje html que tu programa (netscape o explorer) se encarga de "traducir"  para que puedas visualizar correctamente en el navegador la página web solicitada incluyendo texto, fondos, gráficos, etc.

El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema  que se encarga de 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.

Como cualquier página web está soportada por un fichero de texto,  se pueden elaborar, editar o modificar directamente con el bloc de notas o el wordpad de Windows 95, aunque existen programas editores de páginas web  a la venta como HotDog ó Front Page y programas gratuitos de edición básica como Netscape Composer, que permiten editarlas con algunas funciones  automatizadas a través de botones y menús.
 
 
Elementos del lenguaje HTML
 

Caracteres :

• Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado.

• Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los marcadores constan de una marca inicial  < ...> , que da el nombre y atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca final</...>.

• Las marcas iniciales se escriben entre los símbolos "<" y ">" (menor y mayor) y las finales entre "</" y ">" (menor barra y mayor). Por ejemplo, <H1>Contenido</H1>, indica que "Contenido" es una cabecera de nivel uno.

•  Algunos elementos sólo tienen una marca inicial (por ejemplo la marca <HR> que representa una línea horizontal) y otros, aunque disponen de ambas, se suelen expresar sólo con la inicial.

• Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos H1 y HR anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.

• En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.

• Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.

• El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca ">" o un nombre como los definidos en el apartado anterior. Por ejemplo, en <img src="foto.gif">, img src es el nombre de la marca  que se refiere a insertar una imagen en la página web; y "foto.gif" es el atributo que hace referencia al fichero específico  de imagen que queremos incluir.

• Para incluir comentarios en HTML se emplea la declaración de comentarios. Una declaración de comentarios comienza con <!, le siguen uno o varios comentarios y termina con >. Cada comentario comienza con -- e incluye todo el texto hasta la siguiente aparición de -- . Dentro de una declaración de comentarios, se pueden poner espacios en blanco después de cada uno de ellos, pero no antes del primero. Toda la declaración del comentario se ignora.  En páginas web complejas, con abundante código html, se utilizan estos comentarios para señalar partes de la página web que  sirvan de orientación para ubicarse dentro del documento. Por ejemplo, en <!--Aquí empieza el texto--> está señalando una parte de la página web en la que empieza el  grueso del texto de la página.

•  Esta etiqueta se visualiza dentro del código html pero no tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador cliente y sólo se puede ver si utilizamos la opción Ver/Origen de la Página (en Netscape)

• Los documentos HTML son archivos de texto legibles ASCII con códigos de composición especiales embebidos  o incorporados en el texto. Esto significa que los archivos HTML contienen letras, números, signos de puntuación, etc., más los códigos de composición HTML.  Insistimos, se pueden leer o modificar directamente desde el bloc de notas.

• Aunque no es obligatorio, es muy útil utilizar la extensión .HTM al archivar el documento HTML desde el bloc de notas. Así podrás saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opción Guardar como texto ASCII.

• Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de códigos de composición, denominados marcadores HTML. Estos códigos se incluyen en el documento y sirve para controlar el formato y la presentación del documento final. Los códigos también sirven para crear hipervínculos con otros documentos.

• Los códigos de composición se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos símbolos son los corchetes angulares < y >. Estos códigos no distinguen entre mayúsculas y minúsculas aunque la mayoría de los autores utilizan mayúsculas para distinguirlos del resto del texto.

• Los distintos navegadores muestran sus documentos de formas distintas: varía el color, el tipo de fuente, el tamaño, etc. Por lo tanto debes pensar en tu documento como una entidad lógica y no física, reconociendo que el aspecto físico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si introduces tipos de letra especiales (que se salgan de los corrientes que tienen todos los PCs,  en Arial, Courier, Times o Helvetica) dentro de tu página web, cuando alguien la "vea" en Internet, visualizará esos tipos de letra si están instalados en su PC, si no los verá con el tipo de letra que tenga cargado por defecto en su navegador.

• Marcador <HTML>: todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/HTML).

• Marcadores <HEAD>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la información general sobre el documento. Este marcador tienen su marcador de terminación con la barra inclinada (/HEAD).

•  Marcadores <BODY>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene también su marcador de terminación con la barra inclinada </BODY>.

Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador <TITLE>, el resto de los marcadores son opcionales.
 

• Marcador <TITLE>: los navegadores muestran el título de cada uno de los documentos HTML que encuentran. El título que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su pareja con la barra inclinada </title> y dentro de la sección <HEAD>

• Marcador <META>: este campo de metainformación sirve para proporcionar información sobre el documento que no pueda ser expresada en el campo anterior. La información se escribe usando pares nombre/valor que pueden ser empleados para dos propósitos:

Creación de encabezados :
 

• Los encabezados se emplean para dividir los documentos en secciones, o más concretamente para marcar los títulos de esas secciones. Los marcadores son del tipo <H#>Título</H#>, donde # puede ser un numero cualquiera entre 1 (mayor tamaño) y 6 (menor tamaño).

• Es recomendable usar los niveles en orden, es decir, después de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro, por ejemplo.

• La representación de los encabezados depende del visor, generalmente se representan en negrita y van cambiando de tamaño y espacios antes y después, de más a menos, en función del nivel. Introducen normalmente un salto de línea automático.

• El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Los navegadores leen estos marcadores lógicos de tipos de letra de los documentos HTML y los interpretan conforme a su capacidades.

• Existen multitud de marcadores para indicar que una palabra o frase tiene una connotación especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados

  Formateo de párrafos o bloques:
 

• Cada navegador decide en función de las posibilidades gráficas de cada ordenador las líneas de documento que va a presentar y es posible que ignore los caracteres fin de línea introducidos. De la misma manera aunque hayas introducido líneas en blanco en tu documento fuente intentando marcar el final de párrafos, los navegadores las ignorarán. Tienes que marcar explícitamente los párrafos.

• El marcador de párrafo es <P> y se coloca al principio de cada nuevo párrafo, excepto cuando ya hay algún otro salto de línea. El marcador final es opcional </p>.

• Aunque no son propiamente para definir bloques, hay marcadores para representar saltos de línea y para insertar una línea horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido aquí.

• Marcador <BR>: este elemento sólo tiene marca inicial y se usa para que el visor termine la línea en el punto en el que encuentre. Realiza por lo tanto un salto de línea sin que aparezca una línea en blanco como en el caso de los párrafos.

• Marcador <HR>: sólo consta de una marca inicial y se emplea para presentar una línea horizontal en el texto, ya sea usando caracteres o un gráfico, dependiendo del visor.

• En tus documentos puedes especificar el color del texto. Se utiliza una notación basada en los colores RGB empleados por todos lo monitores de vídeo en color. Cada color se especifica utilizando tres números en el rango 0 a 255. La ausencia total de color, el negro se expresa con 000 y la saturación de los tres colores, el blanco como 255255255. Entre ambos se definen los demás colores. Para establecer en HTML color del texto debes convertir a hexadecimal cada uno de estos números. NO ASUSTARSE!!!! En todos los programas de edición de páginas web (incluido Netscape) existe una herramienta para escoger el color del texto (y el del fondo de la página) sin necesidad de estos cálculos. Esta es una de las funciones que puede resultar engorrosa si se utiliza sólo el bloc de notas para realizar paginas web. En cualquier caso existen publicadas en internet tablas de colores y códigos en http://www.reednews.co.uk.colours.html

• Marcador <FONT>: establece con el atributo COLOR el color del texto que indiques.

• Atributo TEXT: en el marcador <BODY> establece el color por defecto del texto de todo el documento.

Creación de enlaces y vínculos
 

Hipervínculos:
 

• Se llaman hipervínculos a las frases o palabras en color que tienen los documentos HTML y que al pulsar sobre ellos se salta a otro documento del servidor Web o a un servicio o documento que se encuentre en cualquier otro punto de la red, en un servidor situado en tu misma localidad o en el extremo opuesto del planeta.

• Los hipervínculos están basados en este marcador cuya sintaxis general es:

• Si sustituyes la palabra ORDEN por HREF indicarás un hipervínculo (enlace externo)

• Si la sustituyes por NAME  apuntas hacia un lugar marcado dentro del  mismo documento (enlace interno). Dependiendo de la sustitución realizada el OBJETIVO será uno u otro.

• El texto subrayado o resaltado identifica la frase o palabra que aparecerá en el documento HTML y que estará ligada con el hipervínculo o lugar a localizar.

• El hipervínculo más sencillo es aquel que apunta a otro documento que se encuentra en el mismo equipo y en el mismo directorio

 

<A HREF="pagina2.htm"> Segunda página Web</A>

 

Si necesitas hacer referencia a un documento que se encuentra en un directorio distinto, sólo tienes que cambiar la parte del objetivo e incluir en ella la ruta completa. Utilizando la barra inclinada precedida de dos puntos (/) puedes establecer la ruta.
 

<A HREF="../pagina2.htm"> Segunda página Web</A>

En este ejemplo, el documento página2.htm se encuentra ubicado en el directorio inmediatamente inferior donde se encuentra el documento que estás editando.  Es lo que se donimina enlaces relativos

•   Como veíamos antes, en el caso de los enlaces internos de un documento, primero hay que definir el punto objetivo de la vinculación y a continuación se hace referencia en las partes que queramos a dicho punto. Por ejemplo

Vinculación de localizadores universales de recursos (enlaces externos):
 

• Son vínculos hacia documentos o servicios situados en sistemas remotos. Tendremos que utilizar el Localizador universal de recursos URL para hacer referencia al documento remoto.

• Los localizadores son la clave para localizar e interpretar información en Internet. Los URL son una forma estándar de describir tanto la localización de un recurso en la Red, como su contenido. El lenguaje HTML utiliza una sintaxis estándar para designar los URL:

• Nombre del servicio: servicio que se quiere realizar (http, mail, news, ftp).
• Nombre del host de Internet: lugar donde se encuentra el servicio.
• Número de puerto: opcional.
• Recurso: archivo, documento, marca, etc.

• URL http: acceso a páginas Web de un servidor en la World Wide Web.

• URL ftp: acceso a directorios o archivos de un servidor de ftp

• URL news: acceso a un grupo de noticias .

• URL mailto: envío de mensajes de correo

• URL file: acceso a archivos locales en el PC.

Creación de listas
 
Listas desordenadas o con topos :

  Se indica cada elemento de la lista destacándolo con un punto u otro símbolo tipográfico.
 

• Marcador <UL>: define comienzo y final de lista desordenada.

• Atributo TYPE: tipo de topo para cada elemento.

• Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador final.

• Se indica cada elemento de la lista con un número de orden.

• Marcador <OL>: define comienzo y final de lista ordenada.

• Atributo TYPE: tipo de numeración empleado.

• Atributo START: número con el cual comienza la lista.

• Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador final.

• Permiten incluir junto a cada elemento una descripción del mismo.

• Marcador <DL>: define comienzo y final de lista de glosario.
• Marcado <DT> : define cada término.
• Marcado <DD> : define cada dato.

• Se pueden crear listas anidadas de cada una de las listas vistas anteriormente.

Una tabla esta compuesta por filas y columnas de información. No solo permiten tabular la información sino mantener un mayor control sobre lo que se visualizará en la pantalla. La intersección de una fila y una columna genera una celda.
 

<TABLE BORDER=10 WIDTH="90%" ALIGN="justify">    <CAPTION> Título de la tabla</CAPTION>    <TH ALIGN="right">Cabecera columna 1</TH>    <TH ALIGN="right">Cabecera columna 2</TH>    <tr>   <TD ALIGN="center">Fila 1, columna 1</TD>    <TD ALIGN="center">Fila 1, columna 2</TD>    <TR>    <TD ALIGN="left">Fila 2, columna 1</TD>    <TD ALIGN="left">Fila 2, columna 2</TD>    </TR>   </TABLE>

 

• Marcador <TABLE>: indica que vamos a crear una tabla.

• Atributo BORDER: presenta líneas de separación de celdas así como su ancho en pixels
• Atributo CAPTION: título de la tabla.
• Atributo WIDTH: anchura de la tabla.

• Atributo ALIGN en <TABLE>: tipo de alineación

• Marcador <TH>: cabecera de la tabla. Aparecen en negrita.

• Marcador <TR>: indica el final de una fila.

• Marcador <TD>: indica un dato de la tabla, es decir una celda.

• Atributo ALIGN en <TH>, <TR> y <TD>: tipo de alineación

 
Añadir imágenes 
 

Adición de imágenes internas:
 
Son las imágenes que aparecen cuando se visualiza el documento HTML. Los navegadores sólo pueden visualizar dos tipos de imágenes:
 

• Imágenes en formato GIF o formato de intercambio de gráficos.
• Imágenes en formato JPG o Joint Photographic Expert Group.

El resto de imágenes (tif, bmp, etc.) se tratan como imágenes externas y sólo se pueden visualizar con las aplicaciones auxiliares o los plug-ins de los navegadores
 

• Marcador <IMG>: permite incluir una imagen en el documento. No necesita terminador.

• Atributo SRC: permite especificar el archivo que contiene la imagen.
• Atributo ALT: texto alternativo para cuando no se pueda visualizar la imagen.
• Atributo ALIGN: alineación física de la imagen.

• Atributos HEIGHT Y WIDTH: tamaño de las imágenes en el documento (normalemene en pixeles).
• Atributo BORDER: permite señalar si se quiere enmarcar la imagen o no, así como el grosor de dicho marco
 

Convertir una imagen interna en un hipervínculo:
 
Basta incluir el marcador de imagen con todos sus atributos entre los marcadores de ancla (<a href=....></a> .  El resultado obtenido es poder pulsar directamente sobre la imagen para acceder al hipervínculo.
 

Hasta aquí, lo que podríamos denominar como un curso básico para elaborar páginas web, sin embargo, el lenguaje HTML está provisto de más códigos y funciones que complican un poco más su elaboración pero también la hacen más completa.  Como ampliación a esta primera parte de creación de html, hemos elaborado una segunda parte más avanzada que recomendamos seguir una vez se haya asimilado esta primera parte
 
 

AVANZADO
 

Creación de pagínas basadas en marcos o "frames

Los marcos son como los trucos de vídeo de pantalla partida que  se utilizan ocasionalmente en programas de televisión para mantener la atención de l@s espectador@s. En los marcos la ventana del visor se divide en varias secciones independientes entre ellas y por supuesto interactivas.
 
En el caso de las páginas web, cada uno de estos marcos suelen contener una página web con los habituales códigos HTML. Todos estos marcos que componen una web están referenciados en la página web que los engloba.
 

• Marcador <FRAMESET>: define el marco al que llama un documento HTML. Tiene marcador de terminación.

• Atributo COLS y ROWS: especifica el tamaño de los divisores verticales y horizontales de los marcos. Podemos especificar en pixels o en porcentajes suprimiendo las barras inclinadas y especificando tantos números como divisiones de la ventana.

• Marcador <FRAME>: define cada uno de los marcos establecidos en referencia a una página web cada uno de ellos

• Atributo SRC: especificación del URL que define el marco.  

Atributo NAME: establece el nombre del marco para posteriores referencias como la presentación de un vínculo de un marco en otro marco con un nombre determinado: es un nombre que se da a un frame o marco y no tiene porque ser el mismo nombre del fichero a que hace referencia dicho marco. Al establecer el vínculo se incluirá el atributo TARGET, indicando el nombre de marco que debe presentar el URL seleccionado.
 
 

Creación de formularios y scripts CGI
 

• Además de la inclusión de hipervínculos e imágenes, una de las características más importantes de HTML es la de pode usar formularios para que el usuario o la usuaria pueda introducir su información. Un formulario se compone de una plantilla para recoger un conjuto de datos, la especificación del método de enviar los datos recogidos y el URL de la acción asociada.

• Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas junto con servidores, ya que las acciones asociadas son programas, generalmente scripts de CGI , que deben funcionar en un servidor al cual se le envían los datos para ser procesados

 MARCADOR <FORM>: establece la definición del formulario. En su interior aparecen una secuencia de elementos de entrada (INPUT), junto con elementos de marcado de estructura del documento.
 

<FORM ACTION="URL" METHOD="método de acceso" ENCTYPE="tipo de codificación">  <INPUT TYPE=TEXT NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">  <INPUT TYPE=PASSWORD NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">    <INPUT TYPE=CHECKBOX NAME="nom" VALUE="val1" CHECKED> texto 1  <INPUT TYPE=CHECKBOX NAME="nom" VALUE="val2"> texto 2  <INPUT TYPE=RADIO NAME="nom""VALUE="val1" CHECKED> texto 1  <INPUT TYPE=RADIO NAME="nom" VALUE="val2"> texto 2   <INPUT TYPE=IMAGE NAME="nom" SRC="mapa.gif">  <INPUT TYPE=HIDDEN NAME="clave" VALUE="val">  <INPUT TYPE=SUBMIT NAME="clave" VALUE="caption">  <INPUT TYPE=RESET NAME="clave" VALUE="caption">   <SELECT NAME="nom">  <OPTION SELECTED>texto 1  <OPTION>texto 2  </SELECT>  <TEXTAREA NAME="nom" ROWS=n COLS=c> texto de varias líneas </TEXTAREA>  </FORM>

 

• Atributo ACTION: especifica el URL de la acción asociada al formulario. Si no se especifica, por defecto se asume que el URL es el BASE del documento.

• Atributo METHOD: indica el método de acceso al URL de la acción. El conjunto de métodos aplicables es función del esquema del URL. Se pueden emplear los métodos GET y POST, que se describirán más adelante.

• Atributo ENCTYPE: especifica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno. Trataremos este tema en el punto referido a la codificación de los formularios.

•  Atributo TYPE: establece el tipo de entrada y por tanto el formato de recogida de los datos que serán enviados para que el sistema los procese.

• Atributo NAME: especifica el nombre de la variable que recogerá el valor del datos y que permitirá su posterior gestión.

• Atributo SIZE: especifica la cantidad de espacio reservada para este campo. El valor por defecto depende del visor.

• Atributo MAXLENGTH: limita el máximo número de caracteres que pueden ser introducidos en el campo. Si el valor es mayor que el del atributo SIZE, el visor debe permitir el desplazamiento de la línea. El número de caracteres por defecto es ilimitado.

• Atributo VALUE: indica el valor inicial del campo.

• Atributo CHECKED: indica que el estado inicial es seleccionado.

• Atributo SRC: indica el archivo que contienen el mapa imagen.
• Atributo ALIGN: tipo de alineación.

• Atributo NAME: especifica el nombre del campo.

• Atributo SIZE: determina el número de ítems visibles. Si se indica tamaño uno, se suelen presentar como menús desplegables, mientras que si el tamaño es mayor se suelen presentar como lista con barra de desplazamiento.

• Atributo MULTIPLE: indica que se trata de una lista desplegable.

• Atributo SELECTED: indica que esta opción está seleccionada inicialmente. Si ninguna opción tiene este atributo, el visor presenta la primera seleccionada.

• Atributo VALUE: indica el valor a retornar si se selecciona la opción. Si no se incluye el atributo, se emplea el contenido del elemento.

• Atributo COLS: número de columnas visibles del área de texto, en caracteres.

• Atributo NAME: nombre del campo.

• Atributo ROWS: número de líneas visibles del área de texto, en caracteres.

Proceso de gestión de un formulario:
 

• Un visor presenta el documento con los campos en su estado inicial. Según el tipo de campo, el usuario puede modificar sus valores (seleccionando un campo, rellenando con texto, etc.). Cuando ha terminado, puede enviarlo empleando un botón de envío o una selección de pixel en una imagen. En caso de que el formulario sólo tenga un campo de entrada de texto de una línea, el visor debe aceptar una pulsación de la tecla de ENTER en ese campo como petición de envío del formulario.

• En ese momento el visor analiza las entradas en función del método, acción y tipo de codificación que se especifican como atributos en el marcador de formulario. Tras este análisis lo envía al servidor Web donde se procesarán los datos.

• Este servidor procesa la información y devuelve el resultado en forma de documento HTML que el usuario puede ver. Normalmente el proceso repite la información que ha introducido el usuario para su verificación antes de ser enviada realmente.

• Para hacer esto su script CGI no solo debe pasar la información al usuario para procesarla sino que debe también formatear la salida en HTML, incluso colocar los marcadores necesarios. El navegador recibe la información formateada y la visualiza de forma dinámica. .

 Atributo ENCTYPE: 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 formulario se representa del siguiente modo:
 

• 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 porcentaje y dos dígitos hexadecimales que indican el código ASCII del carácter (%HH). Los saltos de línea (empleados en campos de múltiples líneas), se representan con pares CRLF (sustituidos por %0D%0A).

• 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í.

• Formularios de Consulta, atributo METHOD=GET :

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 URL que comienza con el de la acción al que se le añade 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 URL 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 URL 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.
 

• Formularios con efectos Laterales, atributo METHOD=POST :

Para procesar un formulario cuyo URL de acción es de tipo HTTP y el método es POST, el visor gestiona una transacción de tipo POST del protocolo HTTP, usando el URL 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.
 

• Ejemplo de URL al enviar un formulario :

nombre "Alicia Perez"
genero "F"
numero "4"
idioma "I"
otros "catalan\neuskera"