Internet, que slo en los ltimos 10 aos se ha afirmado como medio de
comunicacin de masa, durante mucho tiempo fue un sistema de comunicacin utilizado exclusivamente por el mundo militar, primero, y por el universitario, despus. Es fcil imaginar la escasa inclinacin hacia el diseo y la esttica mostrada por estos primeros navegantes de la red. A finales de los aos 80, Internet sufri una transformacin radical que condujo hasta las "autopistas telemticas" a un pblico de masa, con exigencias diversas de las militares o acadmicas. Con la transformacin de la red, se ha impuesto la necesidad de poner a disposicin instrumentos de navegacin ms fciles de usar ("user friendly") y no slo para el estudio o la investigacin. As, en 1989 nace el WWW, que gracias al primer navegador de la historia, Mosaic, transforma el texto blanco sobre fondo negro en el actual web, hecho de color e interactividad.
La revolucin de la imagen (criticada por algunos puristas acadmicos que vieron en el Internet de masa el fin del sistema de comunicacin) fue tambin mrito de una marca hoy muy comn <IMG>, esto es, el elemento necesario para invocar imgenes dentro de la pgina. <IMG>
Antes de describir en detalle la marca principal de insercin de imgenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imgenes que les sirven de acompaamiento grfico, sino que se limitan a invocarlas desde un recorrido especfico in situ o en el web. Dicho de otro modo, existe una divisin muy clara entre archivo .htm e imgenes (y tambin sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imgenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corresponde al ingls Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos sealado, esta marca es nica en el sentido de que NO lleva como cierre el correspondiente </IMG>. Para un ejemplo prctico, haz clic aqu
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos grficos, aunque los ms utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los ltimos meses, asistimos a la difusin a nivel internacional de otro formato: PNG (Portable Network Graphics).
El elemento <IMG> va acompaado de diversos atributos que facilitan su uso. Veamos ahora juntos cules son. ALT
El uso de texto para comentar las imgenes es una regla fundamental que debemos observar en la creacin de sitios web por varias razones: algunos navegadores pordran estar impostados para no invocar las imgenes; los navegadores textuales para invidentes no conseguiran interpretar las imgenes si carecieran de comentario; es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la pgina web. La sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring"> Para un ejemplo prctico, haz clic aqu
Para comprobar sus efectos, pasa el ratn por encima de la imagen del ejemplo. WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensin horizontal (ancho) de la imagen expresada en pxel, y HEIGHT=180 la dimensin vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imgenes con su tamao efectivo sobre todo si estn en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad. BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numricos y van expresados en pxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningn borde, pero si la imagen es tambin un enlace automticamente se le asignar un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring"> Para un ejemplo prctico, haz clic aqu
HSPACE y VSPACE
Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma. HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms cercanos (texto, imgenes, apliques, etc.). La sintaxis correcta es
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms cercanos. ALIGN
El atributo ALIGN define la posicin de la imagen respecto al texto colocado inmediatamente antes o despus de la misma. Existen varias opciones para el atributo ALIGN: ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=middle: alinea la primera lnea del texto con el centro de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=bottom: alinea la primera lnea de texto con la parte inferior de la imagen. Para un ejemplo prctico, haz clic aqu. ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma. Para un ejemplo prctico, haz clic aqu. ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma. Para un ejemplo prctico, haz clic aqu.