Imagenes - Etiqueta IMG

Kamus: Para los que quieran modificar el tamaño de una imagen aqui les dejo los parametros de la etiqueta IMG.

Código:

<IMG SRC="imagen" WIDTH=178 HEIGHT=180 ALT="texto">

insertar imágenes

Internet, que sólo en los últimos 10 años se ha afirmado como medio de comunicación de masa, durante mucho tiempo fue un sistema de comunicación utilizado exclusivamente por el mundo militar, primero, y por el universitario, después. Es fácil imaginar la escasa inclinación hacia el diseño y la estética mostrada por estos primeros navegantes de la red. A finales de los años 80, Internet sufrió una transformación radical que condujo hasta las "autopistas telemáticas" a un público de masa, con exigencias diversas de las militares o académicas. Con la transformación de la red, se ha impuesto la necesidad de poner a disposición instrumentos de navegación más fáciles de usar ("user friendly") y no sólo para el estudio o la investigación. 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 revolución de la imagen (criticada por algunos puristas académicos que vieron en el Internet de masa el fin del sistema de comunicación) fue también mérito de una marca hoy muy común , esto es, el elemento necesario para invocar imágenes dentro de la página.

Código:

<IMG>

Antes de describir en detalle la marca principal de inserción de imágenes 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 imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.

La marca no necesita cierre y su sintaxis correcta es:

Código:

<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente .

Para un ejemplo práctico, haz clic aquí

Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato: PNG (Portable Network Graphics).

El elemento va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.

ALT

El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:

algunos navegadores pordrían estar impostados para no invocar las imágenes;
los navegadores textuales para invidentes no conseguirían interpretar las imágenes 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 página web. La sintaxis correcta de los comentarios es la siguiente:

Código:

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

Para un ejemplo práctico, haz clic aquí

Para comprobar sus efectos, pasa el ratón 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 automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:

Código:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están 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 numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:

Código:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">

Para un ejemplo práctico, haz clic aquí

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en píxel 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 más cercanos (texto, imágenes, apliques, etc.).

VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es



Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.

ALIGN

El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
Para un ejemplo práctico, 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 práctico, haz clic aquí.

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

Fuente: Web

Código:

<IMG SRC="imagen" WIDTH=100 HEIGHT=100 ALT="texto">

Código:

<IMG SRC="imagen" WIDTH=200 HEIGHT=200 ALT="texto">

Código:

<IMG SRC="imagen" WIDTH=400 HEIGHT=400 ALT="texto">

Código:

<IMG SRC="imagen" WIDTH=700 HEIGHT=444 ALT="texto">

Código:

[img(Ancho-px,Altura-px)]imagen[/img]

Código:

[img(100px,100px)]imagen[/img]

Código:

[img(200px,200px)]imagen[/img]

Código:

[img(400px,400px)]imagen[/img]

Código:

[img(600px,600px)]imagen[/img]

Imagen (25 Ancho ,25 Alto)


Imagen (50 Ancho ,50 Alto)


Imagen (100 Ancho ,100 Alto)


Imagen (200 Ancho ,200 Alto)


Imagen (300 Ancho ,300 Alto)


Imagen (400 Ancho ,400 Alto)


Imagen (500 Ancho ,500 Alto)


Imagen (600 Ancho ,600 Alto)


Imagen (640 Ancho ,400 Alto)

Tamaño de las Imagenes

Imagen (5 Ancho ,5 Alto)

Código:

[img(5px,5px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (10 Ancho ,10 Alto)

Código:

[img(10px,10px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (25 Ancho ,25 Alto)

Código:

[img(25px,25px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (50 Ancho ,50 Alto)

Código:

[img(50px,50px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (100 Ancho ,100 Alto)

Código:

[img(100px,100px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (200 Ancho ,200 Alto)

Código:

[img(200px,200px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (300 Ancho ,300 Alto)

Código:

[img(300px,300px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (400 Ancho ,400 Alto)

Código:

[img(400px,400px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (500 Ancho ,500 Alto)

Código:

[img(500px,500px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (600 Ancho ,600 Alto)

Código:

[img(600px,600px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]

Imagen (640 Ancho ,400 Alto)

Código:

[img(640px,640px)]http://r26.imgfast.net/users/3115/76/73/04/smiles/3371923627.gif[/img]