Insertar imágenes en HTML

1. Noveno Grado 25/07/2015
INSERTAR IMÁGENES EN HTML
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 <IMG>, esto es, el
elemento necesario para invocar imágenes dentro de la página.
<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 <IMG> no necesita cierre y su sintaxis correcta es:
<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>.
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 <IMG> 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.

2. Noveno Grado 25/07/2015
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.).

3. Noveno Grado 25/07/2015
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.
Link de refuerzo: http://www.htmlpoint.com/guida/html_09.htm