ETIQUETAS Y ATRIBUTOS
LA IMAGEN DENTRO DE HTML SE INSERTA CON LA SIGUIENTE ETIQUETA.
< IMG SRC="LUGAR_DE_LA_IMAGEN.jpg" > PERO TA,BIEN SE PUEDE MODIFICAR CON SUS SIGUIENTES ATRIBUTOS:
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:
< IMG SRC="immagine.gif" ALT="Obra de K. Haring" >
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:
< 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:
< IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring" >
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 ALT="Obra de K. Haring" >
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.
ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.