Esta página utiliza 'XHTML 1.0 Transitional' válido Esta página utiliza CSS válido
Búsqueda personalizada

Curso de HTML (VII). Elementos del cuerpo del documento (parte 3). Imágenes

Podemos incluir imágenes en un documento HTML utilizando el elemento 'img' y su atributo 'src' para indicar la ruta del fichero de imagen.

Observad que el elemento 'img' es un elemento vacío, por lo que se utilizará siempre sin etiqueta de cierre.

El atributo src

Con el atributo 'src' (de source, fuente) se puede indicar la ruta de la imagen de forma relativa (indicando una ruta relativa al documento HTML en cuestión) o de forma absoluta (indicando la ruta completa, incluido el famoso http://). El atributo 'src' es un atributo obligatorio del elemento 'img'.

<img src="rutaRelativa/imagen.jpg" />
<img src="http://www.rutaAbsoluta.com/imagen.gif" />

El atributo alt

Otro atributo requerido del elemento 'img' es el atributo 'alt' (de alternate text). La función de este atributo es la de especificar una breve descripción en texto de la imagen que se muestra.

Esta descripción es realmente útil cuando el navegador del cliente se ha configurado para no mostrar imágenes o simplemente no las soporta, ya que ese texto será el que se muestre en su lugar. Incluso si el navegador muestra las imágenes, el atributo 'alt' suele ser mostrado, por ejemplo, cuando se pasa el puntero del ratón por encima de la imagen.

<img src="imagen.jpg" alt="Descripción breve de la imagen" />

Ancho y alto

Con los atributos 'width' y 'height' (ancho y alto) se indica el espacio que el navegador debe reservar en la página para mostrar la imagen. Aunque no son necesarios, conviene incluir dichos atributos ya que, de no existir, el navegador esperará a descargar completamente la imagen antes de seguir presentando el resto del documento.

La anchura y/o altura indicados por medio de estos atributos no tienen por qué coincidir con las de la imagen original ya que el navegador se encargará de redimensionar la imagen escalándola.

Supongamos que, como en el ejemplo que vemos a continuación, nuestra imagen mide 369x69 píxeles (ancho x alto). La imagen que utilizaremos será la del logo de la web.

  • Si incluimos el atributo 'width' con valor 200 y el atributo 'height' con valor 100, el navegador escalará la imagen (tanto el alto como el ancho) para conseguir una imagen con esas medidas. Como estas medidas no siguen una escala proporcional a la de la imagen, esta se verá deformada por pantalla.

    Imágenes en HTML. Ejemplo 1

    <img src="miImagen.gif" 
      alt="Ejemplo 1"
      width="200" 
      height="100" />

  • En cambio, si incluimos únicamente el atributo 'width' (o el atributo 'height') con valor 200, el navegador escalará proporcionalmente la imagen para que se ajuste a ese ancho y no se deforme.

    Imágenes en HTML. Ejemplo 1

    <img src="miImagen.gif" 
      alt="Ejemplo 2"
      width="200" />

Alineación

Podemos indicar la alineación de una imagen con respecto al texto con el atributo 'align' que puede tomar los siguientes valores: left, right y center (izquierda, derecha y centro). Aunque coloquemos la imagen en medio de un párrafo, si le añadimos un atributo 'align' con valor right (por ejemplo) la imagen flotará a la derecha del texto.

<img src="imagen.jpg" alt="Mi imagen" align="right" />

Espaciado

Con el atributo 'hspace' del elemento 'img' podemos indicar la cantidad de espacio en blanco (o margen) que se introducirá a izquierda y derecha de la imagen. Con el atributo 'vspace' podemos conseguir el mismo efecto pero para las partes superior e inferior de la imagen.

<img src="imagen.jpg" alt="Mi imagen" hspace="10" vspace="5" />

Imágenes como enlaces

Podemos convertir imágenes en hiperenlaces combinando las etiquetas 'img' con etiquetas 'a', es decir, incluyendo un elemento 'img' dentro de otro elemento 'a'.

<a href="miPagina.htm">
  <img src="imagen.jpg" alt="Mi imagen" border="0" />
</a>

Al hacer esto, la mayoría de los navegadores rodearán la imagen con un borde del mismo color que el resto de los enlaces de la página HTML. Para evitar esto último, introduciremos el atributo 'border' con valor '0', tal y como se ve en el ejemplo anterior.

Fecha de publicación: 14/11/2007
Etiquetas: html , curso
Prohibida la reproducción total o parcial de los textos o imágenes aquí expuestos salvo autorización expresa y por escrito del autor de los mismos. © 2007-2017 Locualo v1.0. Política de privacidad [www.locualo.net]