© Jordi González Boada
Incluir imágenes
Sintaxis básica
Para introducir el tema de la inserción de imágenes en documentos HTML vamos a empezar con la sintaxis más básica para hacer esto:
<img src="...">
"..." es el nombre de la imagen -con su extensión-. Esto es en el caso de que la imagen se encuentre en la misma carpeta que el archivo donde aparecerá; sino, puede ser una dirección relativa compleja o puede ser una dirección absoluta. Ver el tema 5 para recordar más sobre los tipos de direcciones.
Como se puede observar la etiqueta img no incluye parte final (</img> es incorrecto).
Los tipos de imágenes habitualmente utilizados en las páginas web son los jpg, los png y los gif, estos últimos pueden ser animados y suelen tener poco peso debido a que sólo pueden tener 256 colores -peso hace referencia al tamaño de ocupación en disco, no al tamaño largo x ancho- y han caído algo en desuso debido a la aparición de las imágenes flash.
Atributos de la etiqueta img
La etiqueta img puede incluir varios atributos (además del imprescindible src, source), algunos de ellos son:
- alt: muestra un texto alternativo (muy útil por si falla una imagen utilizada como enlace en un menú).
- width: anchura de la imagen, en píxeles.
- height: altura de la imagen, en píxeles.
Los dos últimos atributos son interesantes para que el navegador reserve el espacio correspondiente a la imagen. Si no se facilitan estos valores la página en algunos navegadores se cargará normalmente la página pero no reservará el espacio correspondiente a cada imagen y cuando esta se cargue de repente aparecerá entre el texto haciendo saltar el contenido que se sitúa por debajo de ella, otros navegadores si no saben el tamaño de la imagen simplemente no continúan la carga del resto de la página hasta que han terminado de cargar la imagen.
El ancho y largo de la imagen lo facilita cualquier visor de imágenes; pero mejor aún, esto también lo hacen los programas de diseño de páginas web.
Si se especifica un ancho y/o alto distinto del que tiene la imagen realmente esta se acomodará al tamaño especificado en la etiqueta img.
Otros atributos desaprobados en favor de las hojas de estilo en cascada (CSS) son:
- align: especifica la alineación de la imagen o el texto:
- top: texto alineado en la parte superior de la imagen.
- middle: texto alineado en la parte media de la imagen.
- bottom: texto alineado en la parte inferior de la imagen.
- left: imagen alineada a la izquierda (situación por defecto.
- right: imagen alineada a la derecha.
- border: permite especificar el grosor que tendrá un reborde alrededor de la imagen.
- hspace: especifica el espacio que se dejará entre la imagen y el resto de contenidos por la izquierda y la derecha.
- vspace: especifica el espacio que se dejará entre la imagen y el resto de contenidos por arriba y abajo.
Ribera de Huelva
Código utilizado:
<img src="fig06_01.jpg" width="320" height="240" alt="Ribera de Huelva" border="5" align="middle" hspace="5" vspace="5">Texto
Ejemplos de todo esto se pueden ver en la: Primera figura del tema 6.
Como se puede haber observado, después de un salto de línea o de párrafo el texto se sitúa debajo de la imagen. Más aún, si el texto es suficientemente extenso cuando llegue al final de la línea este saltará directamente bajo la imagen y continua por ahí.
Para conseguir que el texto rodee la imagen se puede usar en la etiqueta img el atributo align -con los valores left o right- en combinación con la etiqueta br con el atributo clear, cuyos valores pueden ser: left, right o all. Es un método desaprobado en favor del uso de CSS:
Esta fotografía fue tomada en la Sierra de Aracena, es de la Ribera de Huelva a su paso por Cortelazor la Real.
Como se puede observar aunque se inserte un salto de línea -como el la línea anterior- o de párrafo -como se va a hacer después de este párrafo- el texto no se sitúa debajo de la imagen hasta que se le indica mediante:
<br clear="all">.
Aquí hubo un salto de párrafo.
Código utilizado:
<img src="fig06_01.jpg" width="320" height="240" align="right">
Texto alrededor de la imagen.
<br clear="all">
Texto bajo la imagen.
Se pueden ver más ejemplo en la: Segunda figura del tema 6.
Utilizar imágenes con enlaces
Como se dijo en el tema 5 la sintaxis más básica de la etiqueta de enlace es:
<a href="">...</a>
En el lugar de "..." se pone el texto de enlace que se verá en la página, pero en su lugar también se puede insertar una imagen mediante su etiqueta correspondiente:
<a href=""><img src="..."></a>
Lo que produce una imagen que funciona como un enlace, cuando es pinchada lleva a una página o abre el programa de correo electrónico del usuario si el enlace es una dirección de correo electrónico.
Un ejemplo, el código:
<a href="fig06_02.html" target="_blank"><img src="fig06_01.jpg" width="320" height="240"></a>
Muestra en nuestra página una imagen -en nuestro caso la imagen fig06_01.jpg- que al ser pinchada abrirá en una nueva ventana el archivo fig06_02.html:
Como se puede observar la imagen presenta un borde a su alrededor que la identifica como un enlace. Si no se quiere que aparezca dicho borde se deberá incluir el atributo border con el valor cero en la etiqueta img:
<a href="fig06_02.html" target="_blank"><img src="fig06_01.jpg" width="320" height="240" border="0"></a>
Los mapas de imagen
Un mapa de imagen permite definir varios enlaces en una misma imagen; cada enlace es accesible pinchando en una zona concreta de la imagen. Un ejemplo:
<html>
<head>
<title>
fig06_03
</title>
</head>
<body>
<img src="fig06_03.jpg" width="375" height="500"
border=0 usemap="#portada">
<map name="portada">
<area shape="rect" coords="40,460,170,500"
href="../fotografia/index.php"
alt="Castellano">
<area shape="rect" coords="210,460,333,500"
href="../fotografia/index-en.php"
alt="English">
<area shape="circle" coords="60,56,47"
href="../fotografia/index.php" alt="Castellano">
<area shape="poly" coords="290,39,277,111,264,277,
261,380,283,398,322,390,324,279,315,105,297,40"
href="../fotografia/index-en.php" alt="English">
<area shape="default" nohref>
</map>
</body>
</html>
fig06_03 Un mapa de imagen
Los mapas de imagen se definen entre las etiquetas <map>...</map>.
Como se puede observar en el ejemplo la imagen sobre la que se basa el mapa incluye la etiqueta usemap que tiene como valor un nombre -en el caso del ejemplo, portada- que sirve para relacionar la imagen con el mapa de imagen mediante la inclusión en la primera parte de la etiqueta map del atributo name, que debe tener el mismo nombre que el utilizado en el atributo usemap de la imagen.
Entre el inicio y el final de la etiqueta map se incluyen las etiquetas area con las que se definirán las áreas correspondientes a cada uno de los enlaces. Las etiquetas area tienen cinco atributos esenciales:
- shape: este atributo especifica la forma del área. Sus valores pueden ser:
- rect: especifica un rectángulo.
- circle: especifica un círculo.
- poly: especifica un polígono.
- poly: especifica la totalidad de la imagen.
- coords: este atributo especifica las coordenadas del área, que serán:
- rect: las coordenadas (x,y) de la esquina superior izquierda y la esquina inferior derecha: (x1,y1,x2,y2).
- circle: las coordenadas (x,y) del centro del circulo y el valor del radio (r): (x,y,r).
- poly: las coordenadas (x,y) de todos los vértices del área: (x1,y1,x2,y2,...,xn,yn).
- href: este atributo especifica la dirección a enlazar (véase el capítulo 5, un enlace básico).
- nohref: este atributo especifica la una zona no activa.
- alt: muestra un texto alternativo (véase el inicio de este capítulo, atributos de la etiqueta img).
En el ejemplo fig06_03 la primera etiqueta area corresponde a un rectángulo alrededor de la palabra "Fotografía" y lleva a mi página de fotografía en su versión en castellano.
La segunda etiqueta area corresponde a un rectángulo alrededor de la palabra "Photography" y lleva a mi página de fotografía en su versión en ingles.
La tercera etiqueta area corresponde a un círculo alrededor de la roca redondeada de la parte inferior izquierda de la imagen; lleva, también, a mi página de fotografía en su versión en castellano.
La cuarta etiqueta area corresponde a un polígono alrededor del monolito de la parte derecha de la imagen; lleva, también, a mi página de fotografía en su versión en ingles.
La línea <area shape="default" nohref> determina que, excepto las zonas que se declaren como activas, lo demás es zona no activa. Esta línea no es totalmente necesaria.
Las coordenadas de los puntos de una imagen las podéis obtener mediante el uso de un visor de imagen (podéis encontrar la dirección de alguno en mi página de fotografía, en el apartado enlaces).
Imágenes como fondos de página
De manera similar a como se podía cambiar el color del fondo de una página -y el color del texto general y los enlaces de una página- se puede especificar una imagen de fondo para la misma, esto se puede hacer mediante el uso del atributo background en la etiqueta body. Este método está desaprobado, al igual que pasa con el color del fondo, del texto y de los enlaces, en favor del uso de hojas de estilo en cascada.
<body background="fondo_21.jpg"> carga como fondo de página una imagen jpg llamada fondo_21.
- fig06_04: en esta página podéis ver, y descargaros si os interesan, 30 fondos.
- fig06_05: en esta página podéis ver un ejemplo de fondo de página.
Es importante que además de especificar un fondo de página especifiquéis un color de fondo similar debido a que si fallase la carga de la imagen de fondo podría no distinguirse el texto del color de fondo de la página.
