You are on page 1of 34

Manual de HTML Básico de LaRed

Prólogo
HTML es el acrónimo de HyperText Markup Languaje. Como lenguaje informático, se compone de un conjunto de instrucciones o mandatos, pero a diferencia de otros, éstos actúan sobre el contenido de un texto y modifican sus características visuales. El resultado se muestra cuando el archivo se abre mediante un programa denominado navegador, que es capaz de interpretar estos mandatos. Son muy conocidos el Explorer de Microsoft y el Navigator de Netscape. El manual es sencillamente un listado y explicación de estas instrucciones, junto con sus parámetros y atributos, y está estructurado comentando los mandatos imprescindibles con un ejemplo de cada uno, de forma que tras esta lectura, cualquiera pueda ser capaz de crear una página HTML sencilla pero profesional. Los ejemplos que planteamos se pueden cortar y pegar dentro de el diseño que estemos realizando de nuestra página web. Para trabajar con HTML es válido usar cualquier editor, pero existen editores especializados y de entre ellos, LaRed recomienda utilizar el programa Webscope, que actualmente es Shareware. No obstante el que lo desee, puede solicitar a LaRed una versión antigua del programa que es de libre uso. Webscope es un programa enteramente en castellano. También, dentro de la suite de Communicator de Netscape 4.5 se ofrece gratuitamente una herramienta sencilla denominada Composer. El Manual se ha preparado en formato HTML para ser abierto con cualquier navegador. Tiene algunas imágenes que se cargarán al igual que la revista, cuando tengamos conexión a internet.

Indice
1. Delimitadores. 2. Preidentificadores. 3. Encabezado. 4. Cuerpo. 5. Negrita. 6. Cursiva. 7. Subrayado. 8. Nueva línea. 9. Raya horizontal. 10. Listas. 11. Imágenes. 12. Vínculos. 13. Scripts. 14. Mapas. 15. Tablas. 16. Etiquetas. 17. Formularios. 18. Fin.

Delimitadores
<HTML> </HTML>

Son los mandatos que se sitúan al inicio y al final de la página web que estemos componiendo. Son imprescindibles. Este mandato, que no es visible ni produce efecto visual alguno, identifica el documento como página html. Puede tener un mandato inicial anterior indicando el tipo html que sigue (hay ya varias versiones) como en el ejemplo. Entre ambos debe contenerse todo lo publicable en la página, texto y demás mandatos. Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN//3.2"> <HTML>

Escriba aquí el contenido de su documento.
</HTML>

Va seguido de la los comandos que dividen la página en encabezado y cuerpo (<HEAD> y <BODY>).

Preidentificadores
El preidentificador (que no es obligatorio), si se utiliza, debe situarse en la posición anterior al mandato inicial que comentábamos la semana anterior. Es decir, debe ser la primera línea de nuestra página. Los siguientes son varios preidentificadores (prologue identifiers) que se utilizan en los documentos HTML. El identificador es un mandato compuesto que incluye la definición de tipo de documento (DTD). Por ejemplo, un documento HTML cuyo preidentificador sea
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN//">

utilizaría la versión HTML-1.DTD y por tanto no podría utilizar formularios (o campos de entrada). Actualmente nos encontramos en el desarrollo 4.0 del lenguaje, por lo que nos encontramos con identificadores como éstos:
<!DOCTYPE <!DOCTYPE <!DOCTYPE <!DOCTYPE <!DOCTYPE <!DOCTYPE HTML HTML HTML HTML HTML HTML PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC "-//IETF//DTD HTML//EN//4.0"> "-//W30//DTD W3 HTML 3.2//EN//"> "-//IETF//DTD HTML 3.2//EN"> "-//IETF//DTD HTML 3.2//EN//"> "-//IETF//DTD HTML Level 3.2//EN"> "-//IETF//DTD HTML 3.2 Level 3.2//EN">

Es un mandato de poca utilidad porque los navegadores más utilizados están preparados para la interpretación de todos los mandatos estándar y algunos más propietarios, aunque conviene saber lo que significa cuando nos lo encontremos. Además podría valer para verificar la "ortografía" de nuestra página con referencia a una versión, y así poder determinar, a priori, si será bien leída por nuestro navegador, que cumple unos requisitos específicos de lectura sobre el documento.

Encabezado
<HEAD> </HEAD>

.

El mando <HEAD> no es imprescindible en un documento HTML y tampoco afecta por sí mismo a su visualización, pero sí es conveniente para darle una estructura y por cuanto puede incorporar información acerca del mismo, información que se provee con otros mandatos que hoy sólo vamos a enumerar y que en otra ocasión comentaremos. Los otros mandatos en algunos navegadores ni siquiera necesitan estar contenidos entre <HEAD> y </HEAD>. Sin embargo, de cara a mantener una correcta sintaxis, lo mínimo a situar en una página web para su identificación es:
<HEAD> <TITLE> El título de mi página </TITLE> </HEAD>

Otros mandatos a icluir en el encabezado son:
<BASE>. Especifica la dirección donde está situado el documento. <ISINDEX>. Permite la clasificación del documento por el servidor. <LINK>. Indica la relación entre documentos. <NEXTID>. Crea identificadores únicos de documentos. <TITLE>. Especifica el título. <META>. Especifica información sobre el documento que se puede utilizar

por el

servidor o los clientes. <STYLE>. Especifica los elementos de estilo del documento.

Cuerpo
<BODY> </BODY>

Este mandato no es obligatorio, pero es muy importante porque permite definir, con sus atributos de control y de composición, el cuerpo del documento, es decir, el mensaje que se desea tranmitir y aquello que se va a ver. Su formato es:
<BODY> Pon aquí las imágenes, textos y enlaces de tu documento. </BODY>

(También es posible que las definiciones del navegador obliguen a la página a adoptar unos colores y formatos determinados que se superponen a los definidos.) Atributos.
BACKGROUND

Define una imagen en un directorio o en otro servidor, que se repite sobre el fondo del

documento, de manera que se de apariencia de mármol, papel verjurado, relieve, etc, según el efecto que se desee. Nosotros lo utilizamos para poner el logotipo de LaRed.
<BODY BACKGROUND="URL o camino/fichero"> Contenido de la página </BODY>

Además, el MS Explorer tiene la capacidad de fijar el fondo de la imagen, de forma que no se mueva al paginar, mediante el atributo BGPROPERTIES="FIXED", tal como se muestra en ejemplo siguiente:
<BODY BACKGROUND="lared.jpg" BGPROPERTIES="FIXED"> BGCOLOR

Permite definir un color de fondo (en hexadecimal). Se utiliza generalmente si no se define el atributo BACKGROUND. rrggbb representan los valores numéricos hexadecimales ( de 00 a FF) de los tres colores básicos de cada punto o pixel, en este orden: rojo, verde y azul.
<BODY BGCOLOR="#rrggbb"> Contenido de la página </BODY> TEXT

Se utiliza para definir el color del texto del documento. Se debe procurar que tenga el suficiente contraste con el color o imagen elegido para el fondo, a fin de facilitar su lectura.
<BODY TEXT="#rrggbb"> Contenido de la página </BODY> LINK, VLINK,

y ALINK Permiten controlar el color de los enlaces (LINK), enlaces visitados (VLINK) y enlaces activos (ALINK).
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Contenido de la página </BODY>

y TOPMARGIN Permite definir los márgenes izquierdo y superior del documento, medidos en número de puntos de la pantalla (pixels).
LEFTMARGIN <BODY LEFTMARGIN="50" TOPMARGIN="30">

Además, todos los atributos aquí explicados se pueden también definir utilizando el mandato STYLE, que trataremos en otra ocasión.

Negrita
<B> </B>

Este mandato especifica que el texto contenido entre ambos límites se muestra en negrita, es decir, resaltado. Ejemplo:
A partir de aquí <B>se escribe en negrita</B> y no más.

cuyo resultado será: A partir de aquí se escribe en negrita y no más.

Cursiva
<I> </I>

Este mandato convierte a cursiva el tipo de letra que se encuentra entre sus límites. Ejemplo:
<I>Esto se lee en cursiva</I> y vuelve a verse como letra normal.

Que produce como resultado: Esto se lee en cursiva y vuelve a verse como letra normal.

Subrayado
<U> </U>

La U proviene de la palabra inglesa para subrayado: "underlined". Este mandato subraya las palabras que se sitúan entre sus límites. Ejemplo:
<U>Este texto está subrayado</U> y vuelve a verse como letra normal.

Que produce como resultado: Esto texto está subrayado y vuelve a verse como letra normal.

Nueva línea
Nos vemos obligados a utilizar cada vez que forcemos un cambio de linea el mandato
<BR>

(del inglés break = ruptura). Este mandato no tiene, como es lógico, un mandato de finalización. Del mismo modo, el punto y aparte o salto de párrafo se indica con el mandato
<P>

(del inglés paragraph = párrafo). La diferencia entre un mandato y otro varía en el interlineado. Un mandato <BR> no varía el interlineado del texto que lo fija por defecto el navegador. Sin embargo el mandato <P> añade una distancia algo superior al interlineado respecto al párrafo siguiente. Ejemplo:
Línea de un párrafo<BR>Segunda línea de párrafo<BR> Tercera línea de párrafo<BR> <P> Párrafo siguiente, primera línea<BR>Segunda línea de párrafo<BR>Tercera línea de párrafo<BR> <P> <P> Doble separación de párrafo <BR> <BR> <BR> <BR> Cuatro separaciones de línea

que produce como resultado: Línea de un párrafo Segunda línea de párrafo Tercera línea de párrafo Párrafo siguiente, primera línea Segunda línea de párrafo Tercera línea de párrafo Doble separación de párrafo

Cuatro separaciones de línea En el ejemplo podemos observar otra diferencia. La acumulación de mandatos <P> no suma efectos. Sin embargo, sí se suman en el caso del mandato <BR>.

Raya horizontal (Horizontal rule)
Con frecuencia un salto de párrafo, una separación entre dos secciones simplemente por un aumento de espacio, no consiguen los resultados deseados. Por ello se han popularizado dentro del HTML las rayas horizontales de separación entre dos partes de una misma hoja. Una separación de este tipo se obtiene con el mandato:

<HR>
que no necesita cierre. El mandato <HR> soporta los siguientes atributos: 1. SIZE. Con el atributo SIZE se especifica la anchura de la línea en número de puntos (pixels). Ejemplo:

<HR SIZE=5>

2. WIDTH. Este atributo permite definir la longitud de la línea, bien en puntos o bien en porcentaje de anchura de página. Si no se indica nada, la línea es tan ancha como la página en la que figura. Ejemplo:
<HR WIDTH=800> <HR WIDTH=80%>

(anchura medida en puntos) (anchura medida en porcentaje)

3. ALIGN. Las líneas que no se extienden todo lo ancho de la página tienen tres posibilidades de ajuste: a la derecha (right), izquierda (left), o en el centro (center). Ejemplo:
<HR ALIGN=right> <HR ALIGN=left> <HR ALIGN=center>

4. NOSHADE. Para que la línea de separación no dé sensación de volumen o relieve, se utiliza este atributo, que proporciona una simple raya. Ejemplo:
<HR NOSHADE>

5. COLOR. Atributo propietario del Internet Explorer de Microsoft. Permite especificar el color de la línea, bien por el nombre en inglés (si está entre los 16 definidos) o bien por el juego de intensidades RGB #rrggbb (cada pareja de caracteres es la intensidad del color básico asociado (rojo, verde y azul), cuyos valores se sitúan en el rango 00 a FF). Ejemplo:
<HR COLOR=yellow> <HR COLOR=#00A3FF>

En las páginas de un diseño especial, las líneas de este tipo se han sustituido por imágenes alargadas en formato gif o jpg con un diseño más o menos logrado, pero que aumentan el tiempo de carga de la página.

Listas
Vamos a tratar ahora el modo de hacer listas. Hay 5 tipos preestablecidos de listas, aunque los tres primeros son muy similares: 1. 2. 3. 4. 5. lista directorio lista menú lista desordenada lista ordenada lista de definiciones

Comencemos por el mandato lista directorio:
<DIR> </DIR>

(Del inglés "directory", que significa guía o directorio). La lista directorio debe comenzar con <DIR> seguido de <LI>; éste último, que no tiene cierre, se debe anteponer a cada uno de los elementos de la lista. Una lista directorio se utiliza teóricamente para representar una serie de títulos de hasta 20 caracteres cada uno. Los títulos se pueden situar en columnas de 24 caracteres. La lista menú presenta una sola línea por elemento y una visión más compacta. Se define mediante el mandato:
<MENU> </MENU>

Y la lista desordenada utiliza el mandato:
<UL> </UL>

cuyo nombre proviene del inglés "unordered list". Los tres anteriores utilizan <LI> para definir una entrada en la lista. Sin embargo, en los navegadores probados (Netscape Navigator 3.0 y Explorer 3.02) no existe limitación alguna sobre el número de caracteres o su disposición, por lo que no hemos apreciado diferencia entre los mandatos <DIR>, <MENU> y el comúnmente usado <UL>. Ejemplo:
<DIR> <LI>elemento primero<LI>elemento segundo <LI>elemento tercero<LI>elemento cuarto </DIR> <MENU> <LI>elemento primero<LI>elemento segundo <LI>elemento tercero<LI>elemento cuarto </MENU> <UL> <LI>elemento primero<LI>elemento segundo <LI>elemento tercero<LI>elemento cuarto </UL>

que produce como resultado:        
• •

elemento primero elemento segundo elemento tercero elemento cuarto elemento primero elemento segundo elemento tercero elemento cuarto

elemento primero elemento segundo

• •

elemento tercero elemento cuarto

Lista ordenada. Utiliza el mandato:
<OL> </OL>

que proviene del inglés "ordered list". La lista ordenada sustituye el punto por el número ordinal correspondiente del elemento, seguido de un punto. Veamos un ejemplo:
<OL> <LI>elemento primero<LI>elemento segundo <LI>elemento tercero<LI>elemento cuarto </OL>

se obtiene: 1. 2. 3. 4. elemento primero elemento segundo elemento tercero elemento cuarto

Lista de definiciones. La lista de definiciones
<DL> </DL>

es un concepto diferente a lo anteriormente expuesto. Los elementos listados no llevan antepuesto un punto o un número, sino que se limitan a disponer la palabra definida <DT> en la línea anterior a cada definición listada <DD>. El resultado se muestra en el siguiente ejemplo:
<DL> <DT>Palabra definida 1 <DD>Esta es la definición del primer elemento <DT>Palabra definida 2 <DD>Esta es la definición del segundo elemento </DL>

que produce como resultado: Palabra definida 1 Esta es la definición del primer elemento Palabra definida 2 Esta es la definición del segundo elemento Por último, las listas se pueden anidar unas dentro de otras sin importar la clase. El resultado es el previsible, como se puede comprobar en el ejemplo siguiente:
<UL>

<LI> primer elemento <UL> <LI>primer elemento del primer anidamiento <UL> <LI> primer elemento del segundo anidamiento <LI> segundo elemento del segundo anidamiento <LI> tercer elemento del segundo anidamiento <LI> cuarto elemento del segundo anidamiento </UL> <LI> segundo elemento del primer anidamiento <LI> tercer elemento del primer anidamiento <LI> cuarto elemento del primer anidamiento </UL> <LI> segundo elemento </UL>

que produce como resultado:

primer elemento o primer elemento del primer anidamiento  primer elemento del segundo anidamiento  segundo elemento del segundo anidamiento  tercer elemento del segundo anidamiento  cuarto elemento del segundo anidamiento o segundo elemento del primer anidamiento o tercer elemento del primer anidamiento o cuarto elemento del primer anidamiento segundo elemento

Imágenes
<IMG>

Este mandato permite insertar imágenes en nuestra página web, para mejorar su aspecto. Las imágenes o fotografías insertadas con el mandato <IMG> deben tener un formato binario reconocible por nuestro navegador. Lo más recomendable es utilizar los formatos jpg o gif que son interpretados por todos los navegadores, dado su intenso uso. El primero obtiene una relación de compresión muy elevada, lo que facilita la carga de la página web sin tener que perder la paciencia esperando. El segundo tiene un relación de compresión inferior, si bien presenta algunas ventajas que lo diferencian del jpg:
• •

Permite insertar una secuencia de imágenes que producen animación (gif animado). Se puede definir uno de los colores presentes en la imagen como transparente (atributo de transparencia), lo que mejora su integración con el fondo elegido para la página.

Las imágenes no se pueden situar con precisión en los puntos de la página que uno desee. Por ello, y con la finalidad de controlar su ubicación, se utilizan tablas y así se incluyen dentro de celdas. La sintaxis del mandato es la siguiente:

<IMG SRC ="grafico.gif">

Tiene además los siguientes atributos: 1. SRC. El atributo SRC es obligatorio, y contiene el nombre del fichero (entre comillas aunque funciona también sin ellas) y (opcionalmente) la referencia al directorio o hiperenlace donde reside la imagen, por ejemplo:
<IMG SRC="http://www.geocities.com/SouthBeach/4118/YO3.JPG" HEIGHT=120 ALT="Foto de Sonia">

que produce como resultado:

2. ALT. Permite introducir un texto alternativo a la imagen a fin de proporcionar una pista a los navegadores que sólo visualizan texto. 3. VSPACE y HSPACE. Controlan respectivamente el espacio vertical y horizontal de separación con el texto. 4. LOWSRC (específico de Netscape). Con este parámetro se puede ofrecer una imagen de resolución inferior mientras dura el proceso de carga de la imagen definitiva. Al finalizar la carga de toda la página, las imágenes nuevas reemplazan a las de baja resolución ajustando sus dimensiones a las primeras si existiera discrepancia. 5. ISMAP. Identifica la imagen como un mapa con diferentes regiones gráficas. De esta manera un mismo gráfico puede apuntar a diferentes lugares. Los mapas pueden ser de dos tipos:
o o

Server-Side Image Map (Mapa desde el servidor). Client-Side Image Map (Mapa desde el cliente).

El atributo ISMAP define la imagen como un mapa del primer tipo, que se caracteriza porque requiere que nuestro servidor interprete la pulsación de el ratón sobre el mapa. Por ello es poco utilizado. 6. USEMAP. Se utiliza con los mapas del segundo tipo, donde todo el control está en nuestro navegador. Al igual que ISMAP, asocia el mapa previamente definido con la imagen. Otros atributos del mandato <IMG> son:

1. ALIGN Controla la alineación del gráfico
o ALING=left

Ajusta la imagen a la izquierda de la página y el texto fluirá por la derecha del gráfico.
o AlING=right

o

Ajusta la imagen a la derecha de la página y el texto fluirá por la izquierda del gráfico.
ALIGN=top

Ajusta la imagen con el elemento de texto u otro gráfico superior de la línea en la que se incluye. No permite que el texto fluya alrededor de la imagen.
o ALIGN=texttop

o

Lo mismo que top pero sólo para texto, excluyendo otras imágenes. No permite que el texto fluya alrededor de la imagen.
ALIGN=middle

Ajusta el centro vertical de la imagen con la base de la línea de texto que le sucede.
o o ALIGN=absmiddle

Es lo mismo que middle pero refiriéndose al centro de la línea de texto.
ALIGN=baseline

Ajusta inferiormente la imagen con la línea de base del texto donde se incluye. No permite que el texto fluya alrededor de la imagen.
o ALIGN=bottom

o

Ajusta inferiormente la imagen con el punto más bajo de la línea de texto en la que se incluye. (Por ejemplo, el punto inferior de una "j" que está por debajo de la línea base). No permite que el texto fluya alrededor de la imagen.
ALIGN=absbottom

Tiene el mismo efecto que bottom. El atributo align no se puede emplear más de una vez dentro de un mandato
<IMG>

2. WIDTH Anchura de la imagen en puntos. Se utiliza para componer la página antes de haber cargado las imágenes. 3. HEIGHT Altura de la imagen en puntos. Igualmente se utiliza en combinación con WIDTH para componer la página antes de haber cargado las imágenes. Además, en los navegadores habituales se puede utilizar para dar escala a los dibujos. En este último caso debe utilizarse con cuidado porque se puede perder calidad de imagen o simplemente la proporción. 4. BORDER Establece la anchura en puntos del marco del dibujo. BORDER=0 no pone marco a la imagen.

Vínculos
<A>....</A>

que proviene de la palabra inglesa Anchor y significa Ancla. Este mandato se utiliza para crear hiperenlaces con otros lugares de la red y para activar algunas funciones de internet, como el programa de correo. Es por tanto un mandato muy útil porque es el que le da potencia al HTML. Tiene varios atributos, y al menos uno de los dos siguientes es obligatorio: 1. HREF 2. NAME Esta semana vamos a ver su utilización como generador de hipertexto referido a otros documentos de internet:
• HREF

Si se incluye este atributo el texto o imagen que se encuentre entre la apertura del mandato y su cierre se convierte en un hiperenlace asociado al propio atributo. Ejemplo de texto con hiperenlace:
<A HREF="http://www.geocities.com/ResearchTriangle/5067"> Página de la revista La Red </A>

Que produce el siguiente resultado: Página de la revista La Red Así hemos creado desde esta página una referencia a la página principal de nuestra revista. Continuando con el mandato <A>...</A>, vamos a ver esta semana la manera de poner una referencia a una imagen o gráfico que tengamos en nuestra página. Seguimos por tanto practicando el atributo HREF. Decíamos que si el atributo estaba presente, cualquier elemento situado entre la apertura <A> y el cierre </A>, ya fuera un texto o un gráfico, se convertía en un hiperenlace. Esta semana vamos a situar un gráfico como hiperenlace. La sintaxis se muestra en el ejemplo siguiente:
<A HREF="http://www.civila.com/civila.htm"> <IMG SRC="http://www.geocities.com/ResearchTriangle/5067/lr01605.gif" ALIGN="right" HSPACE="10" ALT="Civila"> </A>

Que produce el siguiente resultado (si pulsas sobre esta foto te trasladarás a la página enlazada):

Así hemos creado, desde este gráfico, un enlace a un documento html. Vamos a fijarnos en la forma de establecer referencias a textos dentro del propio documento, es decir, enlaces internos. Esta opción se suele aplicar para trasladarnos desde un punto del índice en el inicio de la página hasta el lugar de la página en el que dicho punto se desarrolla. Para ello utilizamos el atributo

HREF

y el nombre de un identificador como vemos en el siguiente ejemplo:
<A HREF="lr17.htm#MarsPathfinder">Misión MarsPathfinder</A>

........ Aquí escribimos un párrafo o varios, y a continuación escribimos aquella frase donde queremos ir desde la llamada, utilizando el atributo
NAME ........ <A NAME="MarsPathfinder">Misión MarsPathfinder. (Destino del enlace anterior)</A>

Este ejemplo nos proporciona el siguiente resultado: Misión MarsPathfinder ........ Aquí escribimos un párrafo o varios, y a continuación escribimos aquella frase donde queremos ir desde la llamada, utilizando el atributo NAME. ........ Misión MarsPathfinder. (Destino del enlace anterior) Obsérvese cómo el punto señalado se sitúa al comienzo de la página. En este caso el enlace reside en la propia página, pero si en el atributo HREF incluimos una dirección URL en vez del nombre de la página (lr17.htm), nos dirigiremos a un punto cualquiera del documento señalado en el URL. Si el salto se realiza a un punto dentro de la propia página, el nombre de la página se puede omitir. Vamos a comentar otra funcionalidad del mandato
<A>...</A>

de uso muy corriente. Consiste en establecer un enlace desde un texto o gráfico a una dirección de correo. Así, pulsando sobre ella se abre nuestro gestor de correo, con la dirección destino del enlace. Es una opción muy utilizada para retroalimentar al autor con comentarios sobre la página. Para ello utilizamos el atributo:
<A HREF="mailto:...">

y a continuación la dirección de correo del enlace. Vamos a ver un ejemplo con enlace sobre texto:
<A HREF="mailto:lared@geocities.com"> Escríbenos a LaRed </A>

Para enlazar mediante un gráfico basta utilizar el mandato <IMG> que vimos anteriormente:

<A HREF="mailto:lared@geocities.com"> <IMG SRC="http://www.geocities.com/ResearchTriangle/5067/mail.gif" ALIGN="right" HSPACE="10" ALT="Logo"></A>

El resultado de ambos ejemplos es respectivamente: Escríbenos a LaRed

En navegadores como MOSAIC se permite utilizar junto a <A HREF="mailto:...">, el atributo TITLE="tema_correo" con la finalidad de indicar el "asunto" del correo desde el propio enlace. El navegador de Netscape permite el uso de una variante con la misma finalidad. Se utiliza la siguiente sintaxis:
<A HREF="mailto:lared@geocities.com?subject=Deseo subscribirme">Me suscribo</A>

Sin embargo, lo hemos probado con otros gestores de correo distintos al suministrado por Netscape y el funcionamiento no es satisfactorio. El atributo
TITLE="tema_correo"

es informativo excepto cuando se utiliza con
<A HREF="mailto:...">

Sirve para proporcionar información del título del correo resultante cuando pinchemos el enlace. Se supone que al pasar el puntero sobre el enlace sin pinchar en él, podremos ver la información que genera este mandato. No funciona con el Explorer. Como punto final resumimos y vemos las últimas opciones que nos quedan, de uso muy limitado y por ello no vamos a detenernos en detalles:
• • • • <A> HREF="http://..."</A>

Como ya hemos comentado, enlaza con otra página web.
<A> HREF="ftp://..."</A>

Enlaza con un recurso ftp de forma anónima.
<A> HREF="gopher://..."</A>

Enlaza con un servidor gopher.
<A> HREF="mailto://..."</A>

La pulsación sobre esta referencia abre nuestro gestor de correo con la dirección del destinatario que le hemos indicado.
• <A> HREF="news://..."</A>

Enlaza con un grupo de noticias (newsgroup). Se debe usar con sumo cuidado porque el autor no puede saber a priori los grupos que van a existir en un servidor dado.

<A> HREF="nntp://..."</A>

Se utiliza para especificar un nuevo servidor de noticias diferente al usado de forma habitual.
• • <A> HREF="telnet://..."</A>

Este enlace inicia una sesión de telnet mediante una aplicación predefinida.
<A> HREF=":wais//..."</A>

Conecta con un servidor wais.

Scripts
<SCRIPT>...</SCRIPT>

Es una instrucción que permite insertar programación en una página web, usualmente en Java pero también en Visual Basic. El programa queda incrustado entre el inicio y el cierre del mandato y se ejecuta de forma automática al cargar la página. Los navegadores más avanzados, léase Navigator (versión 3 y superior) y Explorer (versión 3 o superior) soportan la inserción de estos programitas denominados SCRIPTS. Los atributos del mandato <SCRIPT> son:
• LANGUAGE

Se utiliza para indicar el lenguaje de programación. Es obligatorio y debe aparecer siempre excepto en el caso de que el SCRIPT esté situado en otra dirección URL. Para este caso se utiliza el atributo SRC.
• SRC

Es un atributo opcional. Si aparece, especifica la direccioón URL desde donde se carga el texto del programa SCRIPT. Comentamos que este mandato permite insertar programación usualmente en Javascript (que es diferente al lenguaje de programación Java) pero también en Visual Basic. Este código, tanto en un lenguaje como en el otro, debe situarse a modo de comentario después del mandato de apertura, tal y como se muestra en el ejemplo. En nuestro caso, al tratarse de programación en Visual Basic, funciona únicamente en el Explorer de Microsoft. El Navigator de Netscape simplemente ignora dicho programa. Para comprender su funcionamiento, vamos a dar un ejemplo sencillo de un SCRIPT en Visual Basic que sirve para situar en nuestra página, la fecha del día:
<SCRIPT LANGUAGE="VBScript"> <!-d=weekday(date) if d = 1 then dia="Domingo" elseif d = 2 then dia="Lunes" elseif d = 3 then dia="Martes" elseif d = 4 then dia="Miércoles" elseif d = 5 then dia="Jueves" elseif d = 6 then

dia="Viernes" elseif d = 7 then dia="Sábado" end if m=month(date) if m=1 then mes="enero" elseif m=2 then mes="febrero" elseif m=3 then mes="marzo" elseif m=4 then mes="abril" elseif m=5 then mes="mayo" elseif m=6 then mes="junio" elseif m=7 then mes="julio" elseif m=8 then mes="agosto" elseif m=9 then mes="septiembre" elseif m=10 then mes="octubre" elseif m=11 then mes="noviembre" elseif m=12 then mes="diciembre" end if Document.Write dia & ", " & " " & day(now) & " de " & mes & " de " & year(now) --> </SCRIPT>

El resultado, sólo válido para los que utilicen el navegador Explorer de Microsft, es: Viernes, 18 de abril de 2008 Un ejemplo de programación en Javascript. Si se desea, se puede cortar y pegar sobre una página web. También se puede modificar el texto. El primer SCRIPT define la función FADE y en el segundo SCRIPT aplica esta función al texto situado entre los símbolos < y >. En este caso funciona tanto para Navigator como para Explorer. Este ejemplo desarrolla una fución que permite escribir un texto con una gradación de colores:
<SCRIPT LANGUAGE="JavaScript"> <!-function MakeArray(n){ this.length=n; for(var i=1; i<=n; i++) this[i]=i-1; return this } hex=new MakeArray(16);

hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D"; hex[15]="E"; hex[16]="F"; function ToHex(x){ var high=x/16; var s=high+""; s=s.substring(0,2); high=parseInt(s,10); var left=hex[high+1]; var low=x-high*16; s=low+""; s=s.substring(0,2); low=parseInt(s,10); var right=hex[low+1]; var string=left+""+right; return string; } function Fade(text){ text=text.substring(3,text.length-4); color_d1=255; mul=color_d1/text.length; for(i=0;i"+text.substring(i,i+1)+''); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-Fade("-->ESTE TEXTO REPRESENTA UNA GRADACION DE COLORES<!--"); //--> </SCRIPT>

El resultado se presenta de la siguiente manera: ESTE TEXTO REPRESENTA UNA GRADACION DE COLORES

Mapas
<MAP>...</MAP>.

Existen dos formas básicas de enlazar desde una página a otra: los enlaces de texto y los enlaces desde una imagen. La manera mas normal de hacerlo en ambos es mediante el mandato HTML:
<A HREF>...</A>

Utilizando este mandato con una imagen sólo se puede establecerse un enlace. Sin embargo, es posible enlazar a varias páginas desde una sola imagen dividiéndola en varias regiones y haciendo que cada una de ellas constituya un enlace distinto. Esto se consigue mediante el uso de mapas.

Existen dos tipos de mapas: los gestionados por el servidor, utilizando un fichero de tipo MAP previamente construido con alguna herramienta de creación de ficheros de mapas (e.g. MAP THIS), y los gestionados por el cliente, definiendo el mapa en el código HTML de la página WEB. El mandato HTML para definir un mapa en una página es el siguiente:
<MAP NAME = "#nombre_mapa">...</MAP>

y la forma de utilizar un mapa en una imagen es:
<IMG SRC = "imagen.gif" USEMAP = "#nombre_mapa">

donde #nombre_mapa es el nombre que hemos dado a un mapa definido previamente. Definición de áreas rectangulares sobre un mapa. La definicion de regiones en la imagen y las páginas a las que se debe enlazar desde cada una de ellas se realiza de la siguiente forma. Primero debemos elegir la imagen que queremos utilizar (puede ser GIF o JPG). Hay que tener en cuenta que cualquier imagen tiene forma rectangular y que cualquier punto de la imagen se determina con sus coordenadas en los ejes X,Y segun su desplazamiento en puntos (pixels) respecto al vertice superior izquierdo, que por convención es el punto (0,0). Se pueden definir tres tipos de regiones: rectangulares, circulares y poligonales. Rectángulos:
<AREA SHAPE="RECT" COORDS="ax,ay,bx,by" HREF="www.rectangulo.com" ALT="rectangulo">.

Aquí hemos definido una región rectangular con vértice superior izquierdo (ax,ay) y vértice inferior derecho (bx,by). Cuando el cursor se posicione sobre esa región aparecerá el nombre alternativo "rectangulo" y si se pincha sobre ella, se accederá al sitio "www.rectangulo.com". Otros tipos de área sobre un mapa: Círculos:
<AREA SHAPE="CIRCLE" COORDS="ax,ay,r" HREF="www.circulo.com" ALT="circulo">.

Aquí hemos definido una región circular con centro (ax,ay) y radio de longitud r. Polígonos:
<AREA SHAPE="POLY" COORDS="ax,ay,bx,by,cx,cy,...mx,my,ax,ay" HREF="www.poligono.com" ALT="poligono">.

Como vemos la forma de definir una región poligonal es enumerar sus vértices de forma secuencial, siendo necesario "cerrar" el polígono. El polígono puede ser regular o

irregular y como un caso particular de polígono puede definirse un rectángulo (en este caso debemos enumerar los cuatro vértices). Por último, la parte de la imagen que no pertenece a ninguna de las regiones definidas, tambien puede referenciar a una página:
<AREA SHAPE="DEFAULT" HREF="www.resto.com" ALT="resto">

o bien no enlazar a sitio alguno
<AREA SHAPE="DEFAULT" NOHREF>

Estas regiones se definen entre las etiquetas <MAP> y </MAP>. Para que comprobéis el funcionamiento de este mandato, se incluye como ejemplo el mapa que Vicente ha situado en su propia página, diseñado mediante regiones rectangulares:
<MAP NAME="#mapa"> <AREA SHAPE="RECT" COORDS="135,13,309,68" HREF="http://www.geocities.com/TheTropics/Shores/6536/ viajes.html" ALT="album de fotos"> <AREA SHAPE="RECT" COORDS="2,122,209,168" HREF="http://www.geocities.com/TheTropics/Shores/6536/musica.html" ALT="musica"> <AREA SHAPE="RECT" COORDS="293,115,409,157" HREF="http://www.geocities.com/TheTropics/Shores/6536/sanjuan.html" TARGET=_top ALT="San Juan"> <AREA SHAPE="RECT" COORDS="122,221,330,268" HREF="http://www.geocities.com/TheTropics/Shores/6536/colegas.html" ALT="colegas"> <AREA SHAPE="default" NOHREF> </MAP> <IMG SRC="mapa.gif" BORDER="0" USEMAP="#mapa">

Ejemplo que produce el siguiente resultado:

Tablas
<TABLE>...</TABLE>

Comenzamos otro mandato extenso. Vamos a hablar de tablas, cómo construirlas y cómo se utilizan para dar formato a las páginas. El mandato <TABLE>...</TABLE> es la forma más utilizada para controlar las posiciones de los textos y objetos presentados en las páginas HTML. Las tablas son cuadrículas creadas a partir de su definición en filas y columnas. En principio no hay límite en cuento a su número máximo, pero debe ser tal que la lectura de la página se realice con comodidad y no obligue a continuos desplazamientos de las barras. En cada una de las celdas definidas se puede incluir texto o imágenes y puede tener un formato independiente. Cada navegador cuenta con algoritmos diseñados para dar a cada tabla la mejor presentación posible, pero por desgracia también existen diferencias apreciables entre los resultados obtenidos desde Explorer o desde Navigator. Este mandato tiene una gran potencia y los pequeños errores que podamos cometer en su uso se transforman en grandes cambios inesperados y negativos que se manifiestan al visualizar una tabla mal construida. Se necesita por tanto un bosquejo inicial de lo que se quiere hacer. Por último y sin haberlo pedido, el mandato TABLE incorpora un salto de línea automático antes y después de su ubicación. Seguimos profundizando en este mandato. Para situar nuestra tabla, primero hay que incluir <TABLE> en la posición de la hoja donde queremos que aparezca. Seguidamente deben definirse las filas, que a su vez están compuestas de un número indeterminado de celdas. Las filas se definen con el mandato
<TR>... </TR>

expresión que proviene del inglés Table Row y significa Fila de la Tabla. El número de filas de la tabla queda exactamente definido por el número de instrucciones <TR>... </TR> que se sitúan entre el inicio de la tabla y su cierre. A su vez, dentro de <TR>... </TR> incluimos tantas instruciones <TD>... </TD> como celdas vayan a aparecer. <TD> proviene del inglés Table Data que significa Datos de la Tabla. Debemos tener cuidado para que las tablas se definan de una manera coherente y en principio todas las líneas tengan el mismo número de celdas, salvo que se den instrucciones en contra. Este mandato sólo puede aparecer dentro de la expresión para la definición de fila. En el caso de que se presenten en alguna de las filas un número inferior de definiciones de celda que en la fila anterior, el navegador interpretará que las celdas faltantes se sitúan a la derecha y en blanco. Cada celda puede contener cualquier tipo de instrucción HTML, y por tanto puede resultar con un formato distinto.

Próximamente veremos que las tablas pueden contener atributos globales, para una sola fila y específicos de la celda.
<TABLE>...</TABLE>

Para cada tabla es posible definir un título con el mandato <CAPTION> ...</CAPTION>. Este mandato debe aparecer dento de la definición de tabla y no se interpretará dentro de la instrucción de fila o celda. El título aparece siempre horizontalmente centrado sobre la tabla o bajo de ella, aunque no forma parte de la misma y tampoco tiene un formato especial. Sin embargo, puede aceptar los atributos ALIGN=top que es su valor por defecto y ALIGN=bottom que situará el título bajo de la tabla. También es posible definir celdas enfatizadas con <TH> ...</TH>, mandato que es totalmente equivalente a <TD> ...</TD> con la diferencia que el texto se muestra en negrita y tiene por defecto la alineación centrada. Veamos este ejemplo:
<TABLE BORDER=1> <CAPTION>Prueba de título</CAPTION> <TR> <TD> celda 1. Ponga aquí el texto que desee</TD> <TD>celda 2 </TD></TR> <TR> <TH>celda enfatizada 1</TH><TH> celda enfatizada 2</TH></TR> </TABLE>>

Ejemplo que produce el siguiente resultado: Prueba de título celda 1. Ponga aquí el texto que desee celda 2 celda enfatizada 1 celda enfatizada 2
<TABLE>...</TABLE>

Continuamos con los atributos del mandato <TABLE>.
BORDER

Este atributo debe aparecer junto a la propia definición TABLE para indicar el grosor del recuadro de la tabla, medido en pixels. Si no aparece, la tabla se muestra sin recuadro. Aunque éste no se visualice, siempre se reserva un espacio mínimo por defecto. Nuestra recomendación es que siempre aparezca dicho atributo porque es útil a la hora de comprobar la definición de la tabla, y en el caso en que expresamente se desee ocultar se escriba BORDER = 0.
ALIGN

Si se sitúa junto a CAPTION controla, como dijimos, si el título aparece encima o debajo de la tabla. Puede tomar los valores de top o bottom. El valor por defecto es top.

Si se sitúa junto a TR, TH, or TD controla si el texto introducido en cada una de las celdas se alinea a la derecha, a la izquierda o queda centrado. Los valores que toma son right, left, y center Continuamos con los atributos del mandato <TABLE>.
VALIGN

Este atributo controla la alineación vertical. Si aparece dentro de un mandato TR, TH o TD controla si el texto dentro de la celda se sitúa en la línea superior, en la línea inferior, o está verticalmente centrado entre el borde superior o inferior de la celda. También se usa para especificar que todas las celdas de una misma fila deben estar verticalmente alineadas a una misma línea base. Los valores que toma son: top, middle, bottom y baseline. Sin embargo, si aparece dentro del mandato TABLE sólo se permiten los tres primeros valores, tomandose por defecto la alineación vertical centrada.
NOWRAP

Este atributo, usado dentro de una celda (<TH> o <TD>), impide que el texto pueda partirse en dos o más líneas para ajustarse a su anchura. Hay que usarlo con precaución porque tiende a crear celdas excesivamente anchas. <TABLE>...</TABLE> Continuamos con los atributos del mandato <TABLE>. Como ya hemos visto, una tabla no es más que una cuadrícula de celdas que se definen por filas. Los atributos que vamos a ver hoy permiten definir celdas que equivalen a la adición de dos o más celdas individuales en dirección tanto horizontal como vertical. Para la dirección horizontal se utiliza el atributo COLSPAN que extiende una celda sobre la superficie que ocupan dos o más. Análogamente el atributo ROWSPAN se utiliza en dirección vertical.
COLSPAN

Este atributo puede aparecer junto a TH o TD y especifica el número de columnas de la tabla sobre el que se va a extender la celda. Por defecto una celda ocupa una sola columna. La definición debe ser coherente y no extender la celda en más columnas de las que tiene la tabla.
ROWSPAN

Este atributo puede aparecer junto a TH o TD y especifica el número de filas de la tabla sobre el que se va a extender la celda. Del mismo modo, la definición debe ser coherente y no sobrepasar el número de filas. Por defecto, una celda cabe en una fila. Volvamos sobre el ejemplo:
<TABLE BORDER=2> <CAPTION>Título de la tabla</CAPTION>

<TR> <TD COLSPAN=2 BGCOLOR=beige>Fila1.Columna1 + Fila1.Columna2</TD> <TD>Fila1.Columna3</TD> </TR> <TR> <TD>Fila2.Columna1</TD> <TD>Fila2.Columna2</TD> <TD ROWSPAN=2 BGCOLOR=beige>Fila2.Columna3 + Fila3.Columna3</TD> </TR> <TR> <TD>Fila3.Columna1</TD> <TD>Fila3.Columna2</TD> </TR> </TABLE>

Ejemplo que produce el siguiente resultado: Título de la tabla Fila1.Columna1 + Fila1.Columna2 Fila1.Columna3 Fila2.Columna1 Fila2.Columna2 Fila2.Columna3 +Fila3.Columna3 Fila3.Columna1 Fila3.Columna2 Continuamos con los atributos del mandato <TABLE>. Hablamos de otros atributos que permiten un mayor control sobre la forma y el contenido de la tabla, textos y demás objetos.
CELLSPACING

Este atributo controla la distancia entre celdas en una tabla. La separación se mide en pixels, por ejemplo, CELLSPACING=2 separa en 2 pixels dos celdas contiguas. Se suele confundir con el atributo BORDER pero se diferencia en que éste controla únicamente la existencia de un marco y su anchura, en la mayoría de los casos produciendo un efecto de relieve y por contra, CELLSPACING sólo controla la distancia sin producir tal manifestación visual. Lógicamente la anchura del marco también actúa sobre la separación de las celdas, pero a base de hacer el relieve más grande.
CELLPADDING

Este atributo controla el espacio que se inserta entre el borde de la celda y el comienzo de los datos en una tabla. La separación se mide en pixels, por ejemplo, CELLPADDING=<2> separa en 2 pixels el texto de la celda de su borde. El ejemplo siguiente genera la tabla más compacta posible:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

Continuamos con los atributos del mandato <TABLE>. Hablamos ahora de los que permiten actuar sobre la anchura y altura de la tabla.

WIDTH

Este atributo se utiliza dentro de <TABLE> para definir la anchura de la tabla, bien como un número entero de puntos en pantalla (pixels) o una proporción de la anchura del documento. Al establecer la anchura de la tabla, se impide que el navegador la defina automáticamente. Como ejemplos de uso: WIDTH=640 determina que la tabla ocupará 640 pixels, es decir una anchura VGA. Por otro lado WIDTH=90% nos mostrará la tabla casi a pantalla completa en todas las resoluciones que se utilicen.
HEIGHT

De igual manera este atributo controla la altura de la tabla, tanto en pixels como en porcentaje. Al igual que el anterior, inhibe las decisiones del navegador sobre el cálculo de la altura de la tabla y nos cede el control. El uso es idéntico a WIDTH.

Etiquetas
<META>.

Etiquetas <META> Las etiquetas <META> sirven para adjuntar información detallada sobre el contenido de una página. De esta manera se facilita la labor de los motores de búsqueda y se asegura su catalogación correcta. Las etiquetas <META> son muy recomendables y útiles, especialmente en los siguientes tipos de páginas:
• •

Las páginas que usan marcos (frames). La primera página es la que contiene la definición de los marcos. Las que utilizan javascript en el comienzo de sus páginas, ya que el código javascript utilizado puede tener cientos de palabras y los robots empleados por los buscadores están programados para dar mayor énfasis a las palabras que se encuentran al comienzo de la página.

Los tipos de etiqueta más importante son: descripción, palabras clave, autor y generador. Esta última contiene el nombre del programa utilizado para confeccionar la página. Consejos prácticos: 1. En descripción se recomienda no pasar de 25 palabras. Aquí se coloca el propósito de la página. 2. En palabras clave se pueden incluir todas las que se quiera, sus plurales e incluso su equivalente en inglés. No es necesario separarlas por comas. Si se quiere que dos o más palabras se traten unitariamente, se unen mediante el

carácter de subrayado. Por ejemplo: Revista_Electrónica. También se deben colocar individualmente. 3. En autor se colocan los créditos y datos identificativos del autor, e incluso podemos incluir nuestra dirección de correo. Para entenderlo mejor y conocer la sintaxis, valga el siguiente ejemplo de la página de LaRed, cuyo encabezado podría ser:
<HTML> <HEAD> <TITLE>LaRed - Revista sobre Internet</TITLE> <META NAME="Description" CONTENT="Revista electrónica que busca facilitar la información en Internet a todos los hispanohablantes y fomentar la comunicación entre sus lectores, mediante su participación activa en la confección de la misma."> <META NAME="Keywords" CONTENT="revista publicación Internet información computación ordenador ordenadores web net participación hispano hispanohablante lector comunicación buzón buzón_electrónico divulgación_de_Internet"> <META NAME="Autor" CONTENT="LaRed - lared@geocities.com"> </HEAD>

Formularios
<FORM>...</FORM>

Nos adentramos en nuevas funcionalidades del lenguaje HTML que permiten definir algunos elementos para interactuar con el usuario. El mandato FORM se utiliza para indicar que la página diseñada se destina a la entrada de datos. Se pueden colocar secuencialmente varios mandatos FORM en una misma página, lo que crea varias zonas de entrada. Los mandatos FORM no se pueden anidar. Para que exista comunicación entre los datos introducidos en el formulario y la página, debe haber en el servidor algún programa o script que sea capaz de procesar la información introducida en el formulario y, en su caso, guardarla o emitir una respuesta. Para ello se utilizará el atributo ACTION, que comentaremos próximamente. También se dan varios protocolos bajo los que debe efectuarse la transmisión. En cualquiera de los casos siempre existirán pares de elementos del tipo (nombre de la variable;valor). Sabemos que mediante el mandato FORM los navegadores pueden aceptar información del usuario y transmitirla por la red en un determinado formato. La información se envía a una dirección HTTP (HyperText Transfer Protocol) que se especifica dentro del mandato y que no es más que la identificación del servidor que va a recoger los datos. A tal efecto, el servidor debe ejecutar un programa cuyo nombre también se especifica en el mandato. En función de los datos leídos el programa genera una salida, que es transmitida en el mismo formato al cliente. Para ello se pueden utilizar varios métodos o protocolos de envío que caracterizan la forma de empaquetar los datos.

El programa que recoge la información en el servidor se denomina CGI script (Common Gateway Interface script). Este programa se escribe en un lenguaje característico (Perl, TCL) o en otro más convencional, como C, Pascal, o Basic. Los atributos del mandato FORM que definen los parámetros anteriormente descritos son ACTION, METHOD y ENCTYPE . Veamos un ejemplo de su uso:
<FORM METHOD=GET ACTION="http://www.geocities.com/cgi-bin/lared"> ACTION

El atributo ACTION especifica la dirección a la que viajará la información que se va a transmitir. Si este atributo no aparece, la información se envía por defecto a la dirección URL (Uniform Resource Locator) de la página que muestra el formulario. cgi-bin es el nombre que suele tener el directorio donde se residen los cgi scripts.
METHOD

El atributo METHOD indica el protocolo. Habitualmente se utilizan dos tipos: GET y POST. GET se toma por defecto y POST debe especificarse. Ambos métodos son muy similares. La diferencia estriba en que GET incluye los valores del formulario como parte de la dirección URL. Eso le da una gran potencia porque permite definir hiperenlaces que sean capaces de enviar datos cuando son activados. En general se recomienda utilizar POST cuando el objetivo de la transmisión es modificar una base de datos y GET en los demás casos.
ENCTYPE

El atributo ENCTYPE especifica el formato MIME (Multipurpose Internet Mail Extension) de los datos que se van a enviar en el caso de que el protocolo no lo defina. No se suele utilizar porque esta información viene incluida en el método. Delimitados por el mandato FORM tenemos una serie de instrucciones que permiten el dibujo en la página de los campos y otros objetos para introducir datos y crear un formulario. Estas instrucciones son:
<INPUT>

Este mandato se utiliza para definir un campo de entrada o un tipo de botón.
<SELECT>

Define una lista desplegable.
<TEXTAREA>

Define un campo de texto multilínea.

Cada uno dispone de una serie de atributos para dotar de control sobre determinados parámetros. <INPUT> es el más complejo y por tanto tiene un número mayor de atributos. El submandato <INPUT> Vamos a profundizar en la etiqueta <INPUT> que queda inscrita entre los límites del mandato <FORM>. Decíamos que este submandato se utiliza para definir un campo de entrada o un tipo de botón. Pertenece al grupo de los que no tienen cierre y se utiliza de la misma manera que el conocido <IMG>. Los atributos de <INPUT> son los siguientes:
TYPE

Especifica el tipo de entrada, entre los diferentes controles disponibles. Puede tomar los siguientes valores:
• • text.

• • • •

Se utiliza para definir un campo de entrada de tipo texto. Es el valor por defecto. password. Se utiliza para definir un campo de entrada de texto cuyo contenido sea una contraseña. El texto introducido se oculta al ser substituido por asteriscos. checkbox. Define un recuadro de validación que tiene dos estados: marcado o no marcado. radio. Define un radio botón que también tiene dos estados y se utiliza junto con otros para definir diferentes opciones excluyentes. submit. Define un botón que al pulsarlo envía el formulario a la dirección (URL) predefinida. reset. Define un botón que al pulsarlo deja todos los campos del formulario con sus valores por defecto.

NAME

Es el nombre genérico del control que se da al campo de entrada. Debe nombrarse todos los controles excepto los botones submit y reset; de esta manera se unifican los elementos que componen un solo dato.
VALUE

Para un campo de entrada de tipo texto especifica su valor por defecto. Para un control de tipo check o radio botón, VALUE especifica el valor del botón cuando se pulsa. El valor por defecto es marcado. En los botones submit y reset, se utiliza para especificar la etiqueta que se sitúa sobre el botón.
CHECKED

Este atributo sólo se aplica a check y radio botones. Si aparece, especifica que el control se marca por defecto.
SIZE

Determina la anchura de la caja que configura el campo de entrada, medida en número de caracteres y por tanto sólo es apropiado para campos de entrada de texto. Si no se indica expresamente, el valor por defecto es 20. Los campos de entrada multilínea se pueden definir mediante dos parámetros: SIZE=anchura,altura, por ejemplo SIZE=60,12. No obstante, es más corriente utilizar el control TEXTAREA para este cometido.
MAXLENGTH

Es la longitud máxima en caracteres del dato que se introduce. Sólo es aplicable en campos tipo texto y de una sola línea. Si el atributo no está presente, se asume que la longitud es ilimitada. Si el recuadro es más corto que la longitud del campo, el texto se irá desplazando para dar cabida a todos los caracteres. Veamos un ejemplo:
<FORM> <INPUT TYPE="TEXT" NAME="Nombre" VALUE="LaRed" SIZE=30,1 MAXLENGTH=30> </FORM>

que produce el siguiente efecto:
þÿ

El submandato <SELECT>...</SELECT> se utiliza para crear controles del tipo lista desplegable. Podemos tener varias listas inscritas entre los límites del mandato <FORM>. Al contrario que <INPUT>, <SELECT> tiene apertura y cierre. Dentro del submandato sólo se permite una lista de etiquetas <OPTION> seguidas del texto que compone cada uno de los elementos del desplegable.
<SELECT>

Los atributos de <SELECT> son los siguientes:
NAME

Es el nombre que recibe el control creado. Es obligatorio dar nombre a la lista porque éste se utiliza para asociar el contenido en el envío, una vez cumplimentado el formulario.
SIZE

El valor de este parámetro determina el número de líneas de la lista que son visibles sin necesidad de utilizar la barra de desplazamiento (scroll). Una sola línea es el valor por defecto. Si se asigna un valor 2 o superior, la lista desplegable se representará como un control de lista desplazable.

MULTIPLE

Por defecto sólo se permite seleccionar un elemento de la lista, pero añadiendo este atributo la lista podrá tener una selección múltiple. Lógicamente, la presencia de este atributo invalidará el efecto de un SIZE=1, convirtiendo el control en una lista con barra de desplazamiento. El submandato OPTION, que complementa a SELECT sólo tiene un atributo:
SELECTED

Indica la opción de la lista que está seleccionada por defecto. En caso de que la lista permita selección múltiple (usado el atributo MULTIPLE), se podrán especificar varios elementos seleccionados por defecto. Veamos un ejemplo sencillo de lista desplegable:
<FORM> Seleccione aquí: <SELECT NAME="desplegable"> <OPTION> Primera opción <OPTION SELECTED> Segunda opción <OPTION> Tercera opción </SELECT> </FORM>

Que produce el siguiente efecto: Seleccione aquí:
þÿ

El submandato <TEXTAREA>...</TEXTAREA> Se utiliza para situar en el formulario un campo de entrada de texto multilínea, que puede tener un contenido opcional por defecto. Es una instrucción con apertura y cierre. El texto por defecto debe escribirse tras la definición del control en formato ASCII, respetándose el preformato dado. Los atributos de <TEXTAREA> son los siguientes:
NAME

Al igual que en la lista desplegable, es el nombre que recibe el control creado. Es obligatorio dar nombre al propio campo porque éste se utiliza para asociar el contenido en el envío, una vez cumplimentado el formulario.
ROWS

Indica el número máximo de líneas que tendrá el texto en el campo de entrada al componerse en el navegador.
COLS

Del mismo modo, se indica el tamaño máximo de la línea, medido en caracteres, que tendrá el texto en el campo de entrada. El campo multilínea permite la introducción de tanto texto como se desee. Si se supera el espacio definido en el formulario, aparecen de forma automática barras de desplazamiento para acceder al texto no visible. Veamos un ejemplo de campo multilínea:
<FORM> Introduzca aquí sus comentarios: <TEXTAREA NAME="multilinea" ROWS=3 COLS=40> Aquí se puede situar un valor por defecto. </TEXTAREA> </FORM>

Ejemplo que produce el siguiente efecto: Introduzca aquí sus comentarios:
Aquí se puede situar un valor por defecto.

De vuelta con el submandato <INPUT> Esta semana vamos a tratar un caso particular de <INPUT> al que ya nos referimos en el nº 41 de LaRed, pero sin profundizar en ello. Decíamos y vimos con un ejemplo, que este submandato se utiliza para definir un campo de entrada, pero también otros tipos de elementos como:
• • •

Botones. Radio botones. Recuadros de confirmación (checkboxes)

En función del atributo TYPE podemos especificar el elemento de entrada en el formulario. Para TYPE="checkbox" definimos un recuadro de validación que tiene dos estados: marcado o no marcado. Si queremos que el formulario aparezca inicialmente marcado, añadiremos el atributo CHECKED dentro de la etiqueta. Veamos un ejemplo:
<FORM ACTION="mailto:lared@geocities.com" METHOD="POST" ENCTYPE="TEXT/PLAIN"> <INPUT TYPE="checkbox" NAME="MI_CHECKBOX" CHECKED> Texto de confirmación. </FORM>

Ejemplo que produce el siguiente resultado: Texto de confirmación.

Al pulsar el botón de envío del formulario, recibiremos un mensaje de correo con el texto:
MI_CHECKBOX=On

Decíamos que en función del atributo TYPE podemos especificar el elemento de entrada en el formulario. Mediante TYPE="radio" definimos un radio botón que se debe utilizar cuando se seleccionan opciones excluyentes y que también tiene dos estados: marcado o no marcado. Si queremos que el formulario aparezca inicialmente marcado, añadiremos el atributo CHECKED dentro de la etiqueta. Veamos un ejemplo:
<FORM ACTION="mailto:lared@geocities.com" METHOD="POST" ENCTYPE="TEXT/PLAIN"> <INPUT TYPE="radio" NAME="OPCION" >Opción 1 <INPUT TYPE="radio" NAME="OPCION" CHECKED>Opción 2 <INPUT TYPE="radio" NAME="OPCION" >Opción 3 </FORM>

Ejemplo que produce el siguiente resultado: Opción 1 Opción 2 Opción 3

Al pulsar el botón de envío del formulario, recibiremos un mensaje de correo con el texto:
OPCION=Opción 2

Para terminar, veamos un ejemplo de cómo se utiliza el atributo TYPE para mostrar los botones que se encargarán de transmitir el formulario o de reiniciarlo de nuevo.
<FORM ACTION="mailto:lared@geocities.com" METHOD="POST" ENCTYPE="TEXT/PLAIN"> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM>

Ejemplo que muestra los siguientes botones con la funcionalidad descrita:
Enviar Borrar

De esta forma, combinando todas las opciones explicadas aquí y en anteriores números, podemos crear un formulario a la medida de nuestras necesidades. Terminamos con el mandato FORM y para cerrar nos parece oportuno incidir de nuevo en los atributos del propio mandato, que como explicamos, tienen que ver con el protocolo de transmisión de la información. Los atributos a repasar son:

ACTION

El atributo ACTION especifica la dirección hacia donde viajará la información que se va a transmitir, junto con el ejecutable que en dicha dirección procesará el formulario. Si este atributo no aparece, la información se envía por defecto a la dirección URL (Uniform Resource Locator) de la página que muestra el formulario y es de suponer que allí existe un programa CGI capaz de recoger dicha información. El nombre estándar que suele tener el directorio donde se ejecutan los programas CGI es cgi-bin. También se puede enviar la información del formulario a una dirección de correo dada. El navegador de Netscape permite indicar como acción el valor
ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-formurlencoded"

que genera el envío inmediato de la información, una vez pulsado el botón, a la dirección de correo reseñada. Sin embargo, el navegador de Microsoft no reconoce esta opción, y responde abriendo un mensaje del programa de correo sin contenido, y no produce el envío automático.
METHOD

El atributo METHOD indica el protocolo. Hay dos tipos, GET y POST. GET se toma por defecto y POST debe especificarse. Ambos son muy similares. La diferencia estriba en que GET incluye los valores del formulario como parte de la dirección URL. Eso le da una gran potencia porque permite definir hiperenlaces que sean capaces de enviar datos cuando se activan. En general, se recomienda utilizar POST cuando el objetivo de la transmisión es modificar una base de datos y GET en los demás casos. También es obligatorio METHOD=POST para la opción ACTION="mailto:xxx@xxx.xxx", aplicable al navegador de Netscape, tal como hemos visto anteriormente.
ENCTYPE

El atributo ENCTYPE especifica el formato MIME (Multipurpose Internet Mail Extension) de los datos que se van a enviar y es sólo válido para METHOD=POST. El valor por defecto es
ENCTYPE="application/x-www-form-urlencoded"

Con el otro valor habitual, ENCTYPE="TEXT/PLAIN", se consigue que las respuestas se reciban como un fichero de texto, sin codificar. Veamos un ejemplo de su uso:
<FORM METHOD=POST ACTION="mailto:lared@geocities.com" ENCTYPE="TEXT/PLAIN">

Fin

Damos por finalizado en este punto esta pequeña introdución al HTML. Esperamos vuestras contribuciones, experiencias y ejemplos para añadir al manual del que deseamos publicar futuras versiones. Esperamos que os haya gustado y sobre todo, que nuestro esfuerzo os haya sido de utilidad.