Clase 02 - Imágenes en HTML

<IMG> inserta imágenes

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributosrc que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre.

Sintaxis

<img src="/URL" >

Ejemplo:

<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 </IMG>.

Para un ejemplo práctico, haz clic aquí

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:

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180">

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:

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180" BORDER="2" >

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

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180" BORDER="2" VSPACE="3" HSPACE="3">

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.
Para un ejemplo práctico, haz clic aquí.