[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]

Tutorial HTML
2. Imágenes

Las imágenes son un elemento esencial para diseñar páginas elegantes. No obstante, como después sugiero, un excesivo número de imágenes en una página pueden hacer que ésta pierda su estética, a la vez que supone enlentecer el proceso de visualización (las imágenes son las partes de las páginas que mas espacio (en bytes) ocupan, por lo que su transferencia requiere más tiempo que la del texto).

Las imágenes en el entorno HTML se pueden utilizar de diversas formas. Analizamos algunas de ellas.

2.1. Imágenes alineadas en el texto [T][I]

Código HTML

Las imágenes pueden incluirse dentro del texto. Por ejemplo, el icono <IMG SRC="home.jpg"> se utiliza para acceder directamente a la página establecida por defecto en NETSCAPE.

Visualización

Las imágenes pueden incluirse dentro del texto. Por ejemplo, el icono se utiliza para acceder directamente a la página establecida por defecto en NETSCAPE.

En el ejemplo anterior, la orden <IMG SRC="home.jpg"> indica que se visualizará una imagen, cuyo nombre es home.jpg. Los visualizadores pueden admitir distintos tipos de imágenes, los más extendidos son GIF y JPG. Cada uno de ellos tiene sus ventajas. Por ejemplo, las imágenes JPG ocupan menos espacio, con la consiguiente reducción de tiempo en la transferencia para la visualización. Las imágenes GIF permiten el manipulado de la imagen, como, por ejemplo, hacer una imagen transparente a un color (que el color blanco, no se visualice, dejando ver el fondo de la página). Esta imagen no es transparente: . En cambio, ésta sí es transparente: . Para hacer imágenes transparentes se utilizan programas de tratamiento gráfico, como Lviewpro ó Giftrans.

La posición vertical de la imagen puede determinarse en base a tres opciones, según deseemos situarla a nivel de la parte superior del texto (top), central (middle) o inferior (bottom), utilizando la orden <IMG SRC="home.jpg" ALIGN="top|middle|bottom">.

Código HTML

Una imagen puede situarse coincidiendo con la parte superior del texto <IMG SRC="home.jpg" ALIGN="top">, con la parte central <IMG SRC="home.jpg" ALIGN="middle">, o con la inferior <IMG SRC="home.jpg" ALIGN="bottom">.

Visualización

Una imagen puede situarse coincidiendo con la parte superior del texto , con la parte central , o con la inferior .

2.2. Imágenes no alineadas con el texto [T][I]

En los ejemplos anteriores, la orden <IMG SRC...> se insertaba entre las palabras de una frase. Son muchas las ocasiones en las que el gráfico, por su tamaño o por nuestro interés, no se sitúa en una línea, sino que ocupa una buena parte de la página.

La imágenes no alineadas se introducen utilizando la misma sintaxis expuesta anteriormente, la única diferencia es que podemos ubicarla a la izquierda (left) o derecha (right) de la página, utilizando la sintaxis general <IMG SRC="nombre_imagen" ALIGN="left|right">. Para visualizar imágenes centradas, la orden deberá estar incluida entre <CENTER> y </CENTER>. Que el resultado sea el esperado dependerá del visualizador.

<IMG SRC="jj.gif" ALIGN="left">Esta imagen está alineada a la
izquierda de la pantalla. Podemos escribir texto, el cual
quedará en la parte derecha.

Esta imagen está alineada a la izquierda de la pantalla.
Podemos escribir texto, el cual quedará en la parte derecha.

<IMG SRC="jj.gif" ALIGN="right">Esta imagen está alineada a
la derecha de la pantalla. El texto escrito a continuación de
la misma ocupará la parte izquierda.

Esta imagen está alineada a la derecha de la pantalla.
El texto escrito a continuación de la misma ocupará la parte izquierda.

2.3. Imágenes con texto alternativo [T][I]

Los visualizadores tienen la opción de no mostrar las imágenes, en un intento de acelerar el acceso a las páginas. Muchas veces, las imágenes incluidas en una página son fundamentales para comprender la información que se ofrece. Por ejemplo, una página destinada a alumnos universitarios de asignaturas de estadística o matemáticas puede contener imágenes de fórmulas matemáticas. Para estos casos se puede añadir a la imagen un texto ALTernativo, que dé una idea del contenido de la imagen (en ámbitos matemáticos suele mostrarse la sintaxis de la ecuación en el formato TeX). Para añadir un texto alternativo, se utiliza la orden <IMG SRC="nombre_imagen" ALT="Texto_alternativo">, como se muestra a continuación:

Código HTML

Visualización

Como seguramente habrás comprobado, el texto alternativo no aparece, como debe de ser, ya que el texto sólo aparecerá cuando no se visualice la imagen. Si la desactivas en este momento es posible que tampoco se muestre el texto alternativo; muchos programas almacenan las imágenes ya visualizadas y las muestran a lo largo de la sesión WWW. La próxima vez que visualices esta página, desactiva la opción de imágenes antes de acceder a ella.

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]