ETIQUETA IMG

ETIQUETA IMG

ATRIBUTOS DE LA ETIQUETA <IMG>

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una imagen. Estos atributos son los siguientes:

	width= Permite al navegador predeterminar el ancho, en pixeles, que tendrá tu imagen.
	height=Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre.
	border= Para añadir o eliminar un borde, donde la x será un valor numérico.
	align=Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
	alt="descripción de la imagen" El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página.
	hspace=horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen.
	vspace= vertical space, controla el espacio de la imagen en las coordenadas verticales. Imágenes en los documentos HTML  Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML. En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos gráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadores gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento de gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo, utiliza algoritmos de compresión que hacen que sus ficheros sean de corto tamaño y apropiados para su transmisión por la red.      El formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil para imágenes reales como paisajes, personas, ...      Para poder utilizar otro formato gráfico, necesitará usar un enlace cuyo destino sea el fichero del gráfico. Al seguir el enlace se le pedirá que indique un programa externo que se encargue de mostrar los ficheros de ese formato gráfico, por lo tanto no pueden insertarse dentro de documentos HTML..      Existe unos casos especiales en las imágenes GIF, que son las imágenes transparentes y las imágenes animadas. <IMG SRC=...> Inclusión de Imágenes       La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato: <IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">      En el punto del fichero HTML en el que queramos que se muestre la imagen incluimos esta etiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas, tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no su produce sobre un texto o algún elemento HTML.      El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará el camino hasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión apropiada a su formato, por ejemplo si es GIF la extensión será .gif, si es JPEG la extensión será .jpg o .jpeg, si no se cumple esto la imagen no se mostrará de forma correcta.      Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentos actual, como se vio en el apartado anterior.      Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imágenes en servidores externos puede ser más lento. Por tanto conviene copiar las imágenes e iconos que se usen al servidor local.      A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG. <IMG ... ALT=...> Texto alternativo      El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, para mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta forma se consigue que todos los usuarios puedan consultar sus páginas. <IMG .. ALIGN=...> Alineación de la imágen      Indica como se alinea el texto que sigue a la imágen con respecto a esta. Indicará si la primera frase del texto se colocará en la parte alta de la imágen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la imágen, BOTTOM.      También se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo al comienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la alineación, aunque solo son validos para los navegadores más avanzados. <IMG .. BORDER=...> Borde de la imágen Indicará el tamaño del borde de la imagen, si la imagen se encuentra dentro de un hiperenlace el borde de esta será del color apropiado para indicarlo, en caso contrario el borde será invisible. Si se desea que no se muestre el borde cuando la imagen sea un enlace se usará BORDER=0. <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen  Es posible cambiar el tamaño de la imágen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este.      El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o menor se escalará a este tamaño.      El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También se expresará en pixeles o en tanto por ciento.      No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones, ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos parámetros para que la imágen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imágen guarde siempre una misma proporción con respecto al texto. Si se desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningún caso el alto (HEIGHT), de esta forma independientemente como sea el tamaño de la ventana del navegador e independientemente del monitor del cliente, siempre se podrán mostrar ambas imágenes en la misma línea. <IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen  El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante. Se especificará en puntos. Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y además es posible indicar separadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical.