Tamaos y tipos de letra en HTML

Para definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>

y este sera 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 despus del cierre automticamente el visualizador inserta un salto de prrafo. 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 cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>

Texto en H3
Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus 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:

AAA

AAAAAA

Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao 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 tamaos tambin pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao base. Por ejemplo estos dos valores dan el mismo resultado:
<FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT>

ABcde ABcde
Con la versin 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 diseador de la pgina 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 dems ya conocidos, como color y tamao. 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 mquina 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 llegarn 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 prximo, 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.

as distintas definiciones de los bloques. Separadores.

Si se analiza una pgina cualquiera veremos que, en realidad, est compuesta de distintos bloques. Es algo as como un mosaico en el que cada parte de la composicin final tiene

sus propios contenidos, que pueden ser texto, grficos o las dos cosas. Dependiendo de la composicin que se quiera hacer, habr que elegir los elementos ms convenientes para que nuestros contenidos aparezcan finalmente con la alineacin debida, el tamao apropiado, etc. Comenzaremos con el elemento <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>

y este sera 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 suele emplearse para escribir encabezamientos, ya que despus del cierre, automticamente, el visualizador inserta un salto de prrafo. 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 cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>

Texto en H3
Para definir los prrafos se utiliza el elemento lleno <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuar normalmente hasta que encuentre otro prrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definicin del XHTML el cierre es obligatorio. Se escribir as:
<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> <P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

Y este sera el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Como puede verse, hay una lnea en blanco entre los dos bloques. Si no se quiere dejar esa lnea vaca entre los dos prrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque. Se escribir as:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

y este sera el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 El elemento <P> admite cuatro atributos de alineacin: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirn as:
<P ALIGN=LEFT> Texto 1 Texto 1 Texto Texto 1 Texto 1 Texto <P ALIGN=RIGHT> Texto 2 Texto 2 Texto Texto 2 Texto 2 Texto <P ALIGN=CENTER> Texto 3 Texto 3 Texto Texto 3 Texto 3 Texto <P ALIGN=JUSTIFY> Texto 4 Texto 4 Texto Texto 4 Texto 4 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P> 4 Texto 4 Texto 4 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </P>

y este sera el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER Se escribe as:
<DIV ALIGN=LEFT> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </DIV> <DIV ALIGN=RIGHT> texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 < /DIV> <DIV ALIGN=CENTER> texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 </DIV>

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2

texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3

texto3 texto3 texto3 texto3

Fjate en que aqu s se utiliza el cierre </DIV>. Este sera el resultado: texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2

texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 Como puedes ver, salvo por las alineaciones, que ya se hacen con <P>, no tiene ninguna utilidad prctica, y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes, tamao, situacin, alineacin, color, etc., etc.)

Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y no produce separacin de prrafo ni de lnea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado tambin para aplicar las hojas de estilo. Se escribe as:
<SPAN> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </SPAN>

Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para presentar prrafos adentrados (como si estuviesen tabulados). Se escribir as:
<BLOCKQUOTE> texto texto texto texto texto texto <BLOCKQUOTE> texto texto texto texto texto texto </BLOCKQUOTE> </BLOCKQUOTE> 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

Y este sera el resultado: 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 texto texto texto texto texto texto texto texto texto texto texto texto Fjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final Otro separador de bloques de texto es el elemento vaco <HR> (por Horizontal Rule). Este sera el resultado:

Al igual que al texto, se le puede incluir un parmetro de color, pero no funciona en todos los navegadores. Tambin se puede cambiar su apariencia aadindole el atributo <NOSHADE>. As:
<HR NOSHADE>

El resultado es: El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la longitud de la lnea y el segundo su anchura. No es obligado usar los dos a la vez Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>

El resultado ser: El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en nmero de puntos (pxels), o en tantos por ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>

El resultado ser: Adems se puede indicar su posicin respecto a los mrgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>

El resultado ser:

O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>

El resultado ser:

Hay otro elemento, aparecido en la versin 6 de Netscape, que permite rodear un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versin adecuada de navegador, en los siguientes ejemplos slo vers el texto, pero no los enmarcados. Si se escribe:
<FIELDSET> Esto es una prueba de enmarcado </FIELDSET>

Se obtiene: Esto es una prueba de enmarcado Este elemento tiene un parmetro que permite etiquetar el recuadro: <LEGEND> Si se escribe:
<FIELDSET>

<LEGEND>Esto es una etiqueta</LEGEND> Esto es una prueba de enmarcado </FIELDSET>

Se obtiene: Esto es una etiqueta Esto es una prueba de enmarcado El parmetro <LEGEND> tiene tres atributos que indican la posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo:
<FIELDSET> <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND> Esto es una prueba de enmarcado </FIELDSET>

Se obtiene: Esto es una etiqueta Esto es una prueba de enmarcado Si en estos ejemplos no ves el recuadro o la etiqueta no est donde debiera, es porque no tienes una versin de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imgenes, texto, etc.

nsertar imgenes
Insertar imgenes en un documento permite crear pginas mucho ms atractivas. Segn el tipo de grficos utilizado se pueden conseguir efectos realmente sorprendentes. Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompaado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT 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 imgenes 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 compresin. En efecto, el JPG tiene una compresin mucho mayor que el GIF, por lo que suele ser el formato ms utilizado en el mundo web, donde siempre se debe perseguir que las pginas sean lo ms ligeras posible. Por contra, cuanta mayor compresin tenga un grfico menor calidad se consigue, pero para usos generales el JPG es perfectamente vlido. Se puede usar cualquier otro formato como el MPG o el AVI (ambos

de vdeo), pero entonces el visualizador llamar a un programa auxiliar, que previamente le habrs definido, para que sea ste el que visualice el fichero. La desventaja de las imgenes en formatos no tratados por el propio visualizador es que no vers el texto junto con la imagen, y por tanto no podrs imprimir la pgina compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeos programas que permiten llamar a aplicaciones especficas ejecutndose como ventanas del navegador. Un ejemplo muy comn son los ficheros .pdf. Algunos navegadores no son capaces de tratar imgenes, o aunque el navegador s pueda, tal vez el cliente est navegando en modo solo texto, es decir, sin ver las imgenes, lo que permite moverse ms rpido. 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, adems 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. Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opcin de cargar imgenes de tu visualizador (slo 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 ms.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGHT=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 tamao 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 HEIGHT=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 tamao original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23

Consideraciones sobre WIDTH y HEIGHT

Estos dos atributos, adems de para variar el tamao de un grfico, tambin pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del grfico. Y te preguntars que finalidad tiene esto. La razn estriba en cmo funcionan los navegadores. Cuando el navegador solicita una pgina y comienza a recibirla, lo primero que hace es leer la cabecera, a continuacin lee el cdigo del BODY y por ltimo carga las imgenes que contenga la pgina haciendo nuevas conexiones al servidor para cada una de ellas. Esta forma de trabajar tiene como consecuencia, que si en el cdigo 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 pgina, el texto ya estar compuesto, pero al no saber el tamao de las imgenes, no se habr reservado el espacio adecuado para insertarlas, por lo que todo el texto ser desplazado hacia abajo, con la consiguiente prdida del formato original de la pgina, 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 vacos 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 cmo manejar las imgenes, veamos algunos efectos especiales algo ms complicados. Mapeado de una imagen para usarla como direccionador
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>

Si mueves el ratn por encima de la imagen, vers que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos nmeros que cambian segn muevas el ratn. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Vers las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el grfico. Como ya habrs supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un men direccionador, lo que necesitamos es que algn elemento convierta esas coordenadas en una direccin del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme nmero de direcciones, tericamente tantas como pares de coordenadas tiene la imagen. En la prctica sern 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 podra ser el aspecto del fichero del ejemplo, el llamado mimapa. El parmetro rect significa rectngulo, y nos indica que la imagen ha sido troceada en rectngulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. Tambin podra ser en crculos (circ) o polgonos (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. Despus viene un directorio: cgibin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente slo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (segn el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que seale el puntero del ratn y servir la direccin 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. Slo 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 mquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrs 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 encontrars informacin sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una accin.

Pero, una vez ms, Netscape ha propuesto una solucin mucho ms 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 mquina en red y de que haya un servidor http que te atienda. Adems, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP que acompaar a IMG. Por ejemplo, en la siguiente imagen, la mitad izquierda nos enva a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratn horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, vers 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, analicmoslo: En primer lugar tenemos el elemento MAP, que lo que est haciendo es definir un mapa de coordenadas. Va acompaado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podra haber ms de uno en la misma pgina, y evidentemente, sus nombres no debern repetirse. A continuacin tenemos el atributo AREA que define las reas de la imagen. El parmetro SHAPE="rect" indica la figura geomtrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly. El parmetro COORDS fcilmente se adivina que indica las coordenadas del rea, en este caso vrtice superior izquierdo e inferior derecho, respectivamente. HREF ya sabemos lo que hace: indica un link con una pgina, pero esta vez no va acompaando 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 tambin 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. Fjate en que nombre1, (el nombre del mapa) va precedido del smbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia est en la misma pgina que la instruccin IMG. Podra estar en otra, y en ese caso el smbolo tendra que estar despus del nombre de la pgina. Por ejemplo: otrapagina.htm#nombre1 Como ya se ha dicho ms arriba, hay tres figuras geomtricas definibles para las reas: rect, circle y poly. El rectngulo ya lo conocemos; consiste en parejas de coordenadas que indican los vrtices superior izquierdo e inferior derecho respectivamente del rea. Para el cculo (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 cculo, y r es el radio del crculo medido en puntos. Para los polgonos (poly) se necesitan tantas parejas de coordenadas como vrtices tenga el polgono, 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 grfico como rea de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.