Como
norma general sólo se suelen utilizar los formatos gráficos
GIF y JPEG, debido a que el formato PNG, a pesar de tener muchas ventajas,
no es implementado por buena parte del parque de navegadores (sólo
en las últimas versiones), por lo que es poco práctico.
Sobre
los formatos GIF y JPEG : Tenemos que tener claro que GIF se utiliza
para imágenes "pequeñas" y de poca resolución,
como iconos, botones, etc., y JPEG se utiliza para imágenes de
mayor tamaño, generalmente fotos.
La
forma de insertar una imagen en una página web es mediante el
uso de la etiqueta:
<img
src="imagen.gif">
Esta
etiqueta tiene varias opciones, que desarrollamos en su forma completa
(*) :
<img
src="[path]fichero" [alt="descripción"] [border="n"]
[height="alto" width="ancho"] [align="top/middle/bottom"]>
(*)
Los parámetros entre corchetes son opcionales, los demás
obligatorios.
[path]fichero
: Indica la ubicación física en donde se encuentra el
fichero gráfico (si se encuentra en el mismo directorio que la
página HTML, omitiremos el path completo).
[alt="descripción"]
: Permite establecer un texto decriptivo para la imagen. Este texto
se mostrará antes de cargar el gráfico (en su lugar),
y también después (al colocar el puntero del ratón
sobre la imagen). En el caso de que la imagen no se carge, se mostrará
este texto en el lugar de la imagen. Siempre es muy recomendable el
definir este parámetro, ya que muchos spiders (buscadores de
URLs) se basan en estas decripciones a la hora de indexar páginas
en sus bases de datos.
[border="n"]
: Muestra un borde alrededor de la imagen de n píxeles
de ancho.
[height="alto"
width="ancho"]
: Mediante estos parámetros podemos dimensionar la imagen, alto
y ancho en píxeles. Los datos que introduzcamos en estos parámetros
serán tomados a "pies juntillas", en el sentido que
la imagen se mostrará con esas dimensiones, y en el caso de no
ser las mismas que las de la imagen original, se redimensionará
a las que nosotros le hallamos indicado. Es muy conveniente el definir
estos parámetros, ya que, en el caso de que la imagen no llege
a cargarse, evitaremos estropear el diseño general de la página.
[align="top/middle/bottom"]
: Con este parámetro podemos definir la alineación vertical
de la imagen respecto del resto de contenido del párrafo en el
que se encuentre. Es decir, la alineación vertical de los elementos
que estén junto a la imagen en el párrafo (como texto,
etc.). Sus posibles valores son: top (arriba), middle
(medio) y bottom (abajo).
Veamos
toda esta teoría con un ejemplo práctico:
<img
src="imagen1.gif" alt="Foto de un perro lindo" height="113"
width="150" align="top"> Esta foto es un perro
muy lindo.
El
ejemplo produciría el siguiente resultado:
Esta foto es un perro muy lindo.