Bueno hola a todos ..    No se mucho sobre el lenguaje html pero es muy interesante ya que ni se imaginan las cosas que pueden hacer con el ...

A Continuacion Les enseñare como poner 1 texto en movimiento ..

Por ejemplo:

<marquee> Texo a escribir</marquee>

Introducción al HTML

Elementos en un documento HTML

En esta guía, a las instrucciones que forman el lenguaje HTML les llamaremos elementos. Otros autores también las denominan "TAGS", o "ETIQUETAS". La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción.

Los elementos pueden ser llenos o vacíos.

Elementos llenos

Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma.
Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se escribirá:

<H1> Texto de prueba </H1>.

y este sería el resultado:

Texto de prueba

Si olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande.

Elementos vacíos

Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto.

Por ejemplo, el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla, se escribirá:

<HR>

Y este sería el resultado:

Elementos con argumento

Algunos elementos se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento.

Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra página del actual, se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.

Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es

.

Los elementos pueden escribirse tanto en mayúsculas como en minúsculas. Puede ser preferible la primera opción ya que aporta claridad al documento fuente, y eso se agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas, eso es un nombre de máquina y sería interpretado como OTRA máquina.

Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itálica, se escribirá:

<H1><I>Texto de prueba </I></H1>.

y este sería el resultado:

Texto de prueba

Los elementos, en HTML, los puedes escribir tanto en mayúsculas como en minúsculas. Funciona igual <P> que <p>. A la hora de revisar el código escrito, resulta más claro si se escribieron en mayúsculas, pero si en el futuro hay que convertir la página a otro estándar, como el XHTML, no se admitirán las mayúsculas. Si no piensas migrar a otras tecnologías, hazlo como más cómodo te resulte.

Tamaños y tipos de letra en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirán así:

<H1> Texto de prueba (H1)</H1>. <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> y este sería el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.
Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre automáticamente el visualizador inserta un salto de párrafo.

Por ejemplo: si escribes

<H1> Texto en H1 </H1> <H3> Texto en H3 </H3> se verá:

Texto en H1

Texto en H3

Y no una cosa al lado de la otra, como cabría esperar. Este elemento admite un parámetro de alineación. Así, si escribes: <H3 align=center> Texto en H3 </H3>

Texto en H3

Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta: <FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT> Dará como resultado:

AAAAAAAAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo estos dos valores dan el mismo resultado:

<FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT> ABcde
ABcde

Con la versión 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

Si escribes

<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> <FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT> <FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT> <FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> <FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT> <FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT> Se verá:

Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si escribes

<FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT> Se verá:

Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:

<FONT FACE="raro, courier" SIZE=4 COLOR="red"> Texto de prueba 12345 con tipos alternativos</FONT> Se verá:

Texto de prueba 12345 con tipos alternativos

Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que sí es habitual.

Tablas

Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar.

El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.

Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

Veamos el significado de cada atributo:

• BORDER    Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto).
• BORDERCOLOR    Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores.
• CELLSPACING    Indica el número de píxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2.
• CELLPADDING  Indica los píxels de separación entre el borde de la celda y su contenido. Su valor por defecto es 1.
• WIDTH    Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla.
• ALIGN    Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
• VALIGN    Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
• ROWSPAN    Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas.
• COLSPAN    Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.
• NOWRAP    Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.
• EVENTS    Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores.
  Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>

Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qué bordes o líneas de la tabla se mostrarán:

Este atributo sirve para definir qué bordes del marco de la tabla serán visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:

• void - Ningún lado (por defecto).
• above - Sólo el borde superior
• below - Sólo el borde inferior.
• hsides - Sólo los bordes superior e inferior.
• vsides - Sólo los lados derecho e izquierdo.
• lhs - Sólo el lado izquierdo.
• rhs - Sólo el lado derecho.
• box - Los cuatro lados.
• border - Los cuatro lados (no es lo mismo que el ya conocido)

Y este otro sirve para definir qué bordes de la tabla serán visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser:

• none - Ninguna línea de división (por defecto).
• groups - Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.
• cols - Sólo aparecerán líneas de división entre filas.
• rows - Sólo aparece líneas de división entre columnas.

Estos últimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la última generación. Según el navegador de que se trate, puede que haya que combinar más de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse.

Insertar imágenes

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.

Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR.

Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresión. En efecto, el JPG tiene una compresión mucho mayor que el GIF, por lo que suele ser el formato más utilizado en el mundo web, donde siempre se debe perseguir que las páginas sean lo más ligeras posible. Por contra, cuanta mayor compresión tenga un gráfico menor calidad se consigue, pero para usos generales el JPG es perfectamente válido. Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no verás el texto junto con la imagen, y por tanto no podrás imprimir la página compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeños programas que permiten llamar a aplicaciones específicas ejecutándose como ventanas del navegador. Un ejemplo muy común son los ficheros .pdf.

Algunos navegadores no son capaces de tratar imágenes, o aunque el navegador sí pueda, tal vez el cliente esté navegando en modo solo texto, es decir, sin ver las imágenes, lo que permite moverse más rápido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por la W3.

Veamos ejemplos del uso de <IMG>:

Imagen alineada a la izquierda (por defecto) <IMG SRC="sugeren.gif">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen con un texto alternativo
Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape). <IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

Imagen alineada a la izquierda.Texto alineado arriba <IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado abajo <IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado al centro <IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto envolviendo la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto

Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen

<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:

<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen redimensionada a más.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble: 272x92.

Imagen redimensionada a menos.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23

Consideraciones sobre WIDTH y HEIGTH

Estos dos atributos, además de para variar el tamaño de un gráfico, también pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del gráfico. Y te preguntarás que finalidad tiene esto. La razón estriba en cómo funcionan los navegadores. Cuando el navegador solicita una página y comienza a recibirla, lo primero que hace es leer la cabecera, a continuación lee el código del BODY y por último carga las imágenes que contenga la página haciendo nuevas conexiones al servidor para cada una de ellas.

Esta forma de trabajar tiene como consecuencia, que si en el código del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando éstas lleguen en el último paso de la carga de la página, el texto ya estará compuesto, pero al no saber el tamaño de las imágenes, no se habrá reservado el espacio adecuado para insertarlas, por lo que todo el texto será desplazado hacia abajo, con la consiguiente pérdida del formato original de la página, ya que el navegador no va a recomponer el texto que ya estaba escrito.

Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacíos forzados. texto texto texto texto texto texto texzto texto texto texto texto texto <IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Usar una imagen como punto de montaje de un link texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.

Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:

.... IMG SRC="sugeren.gif" BORDER=0 >

Ahora que ya sabes cómo manejar las imágenes, veamos algunos efectos especiales algo más complicados.

Mapeado de una imagen para usarla como direccionador

<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>

Si mueves el ratón por encima de la imagen, verás que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos números que cambian según muevas el ratón. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Verás las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el gráfico. Como ya habrás supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un menú direccionador, lo que necesitamos es que algún elemento convierta esas coordenadas en una dirección del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme número de direcciones, teóricamente tantas como pares de coordenadas tiene la imagen. En la práctica serán menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso.

Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo así:

rect http://miservidor.es/mifichero1.htm 12,35 rect http://miservidor.es/mifichero2.htm 90,42 rect http://miservidor.es/mifichero3.htm 112,46 Este podría ser el aspecto del fichero del ejemplo, el llamado mimapa. El parámetro rect significa rectángulo, y nos indica que la imagen ha sido troceada en rectángulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. También podría ser en círculos (circ) o polígonos (poly). Ahora veamos el resto de instrucciones del ejemplo: <A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A> La primera parte A HREF ya la conocemos, es un link. Después viene un directorio: cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente sólo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (según el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que señale el puntero del ratón y servir la dirección que tiene asociada, con lo que acabamos obteniendo un link normal. Ya por último, aparece ISMAP que es el que convierte una simple imagen en una potente herramienta.

Sólo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema.

Todo esto es suponiendo que el servidor está en una máquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrás que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma.

Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el índice encontrarás información sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una acción.

Pero, una vez más, Netscape ha propuesto una solución mucho más simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener tu máquina en red y de que haya un servidor http que te atienda. Además, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP que acompañará a IMG.

Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, verás como cambia el nombre del link.

Se escribe así:

<MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm"> <AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm"> </MAP> <IMG SRC="sugeren.gif" USEMAP="#nombre1"> Aunque se comprende a simple vista, analicémoslo:

En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podría haber más de uno en la misma página, y evidentemente, sus nombres no deberán repetirse.

A continuación tenemos el atributo AREA que define las áreas de la imagen. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly.

El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en este caso vértice superior izquierdo e inferior derecho, respectivamente.

HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va acompañando al elemento <A>, digamos que es un atributo prestado. Hay un área por cada link definido. Si un área no queremos que tenga link se definirá con NOHREF.

IMG SRC también son conocidos: hacen que se visualice la imagen.

Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG. Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la página. Por ejemplo: otrapagina.htm#nombre1

Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas: rect, circle y poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. Para el cículo (circ) son necesarios tres valores: x,y   r donde x,y es el par de coordenas que indican el punto donde está el centro del cículo, y r es el radio del círculo medido en puntos. Para los polígonos (poly) se necesitan tantas parejas de coordenadas como vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.