La etiqueta <IMG>

Portada | Diseñando con HTML | Trabajando con imágenes | La etiqueta IMG

[ Trabajando con imágenes ] [ Coloreando el fondo y el texto ]

La etiqueta <IMG>

La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

<IMG>

La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.

En el capítulo "Cómo administrar la página WEB localmente", comentamos la administración de los archivos. Normalmente, las imágenes se suelen colocar en un subdirectorio creado específicamente para ellas bajo el directorio raíz de la página WEB. Este directorio se puede llamar images, imagenes, graficos... (sin tildes), dependiendo de los gustos. Si tu imagen está en un subdirectorio y tu página HTML en el directorio raíz, necesitarás la dirección exacta para hacer el enlace relativo (ver capítulo "Enlazando las páginas"):

CUIDADO

Algunas personas colocan enlaces absolutos a imágenes situadas en otras WEBs ajenas (por ejemplo, http://www.empresa.com/grafico.gif). Es una práctica no recomendada por varias razones. Una consideración es que tienes riesgo de que los propietarios de aquella página borren o mueva la imagen, provocando una ruptura del enlace que tenemos en nuestra página. Y otro es la propiedad: si el gráfico no es tuyo y piensas enlazarlo sin la expresa autorización del propietario, quizás estés haciendo una violación de copyright.

Una imagen siempre irá dentro de la sección <body> de un documento HTML. Aquí tienes un pequeño ejemplo:

<HTML>

<HEAD>
<TITLE>Añadiendo imágenes</TITLE>
</HEAD>

<body>

<IMG SRC="images/bander.gif">

</body>

</HTML>

La imagen aparecerá en la parte superior izquierda de la página. Es la posición predeterminada del navegador.

La etiqueta <IMG> permite añadir atributos que controlará el comportamiento y la apariencia de una imagen en una página.

Para comentarios, usar las direcciones e-mail de contacto