Inserción de imágenes

www3Cuando navegamos por la red hemos visto que no hay página que no contenga algún gráfico, por pequeño que éste sea. Efectivamente hoy en día es imprescindible dar ese toque de color y vida a nuestras páginas por medio de alguna imagen, como son los botones de diseño, el logotipo de la empresa, etc,.

Inserción de imágenes

 Disponemos de varias formas de insertar una imágenes dentro de una página. Sin embargo, el método más utilizado por los diseñadores de páginas es por medio de la etiqueta ,  su sintaxis es la siguiente:

img_uri_uri

Donde url y uri hacen referencia a la dirección completa o bien a la trayectoria y nombre donde tenemos nuestro fichero gráfico a insertar en nuestra página. A partir de la versión HTML 4.1 se permite la inserción de imágenes de múltiples formatos. Sin embargo, se recomienda el uso de los formatos BMP, GIF, JPG/JPEG o PNG y escogiendo solamente aquel que tenga una mejor calidad/relación de la imagen/tamaño del fichero.

Veamos un primer ejemplo:

Visto desde nuestro navegador:

O sea que tenemos que:

  • url.- Representa la dirección completa (host, puerto, trayectoria y nombre). de un determinado recurso en Internet.
  • uri.- Representa únicamente la trayectoria completa y el nombre del mismo recurso, pero esta vez dentro de muestra máquina local.

En este ejemplo, henos escrito el código HTML dentro de un fichero con extensión HTM o HTML llamado imagenes.html que tenemos en un directorio determinado por nosotros. A su vez el directorio de la imagen debe de ser el mismo que el del archivo HTML, veamos las diferentes trayectorias para mostrar las imágenes..

<img src="narrador.png"><img src="imagenes/narrador.png"><img src="../narrador.png"><img src="../../narrador.png">
<img src="../imagenes/narrador.png">

Las direcciones uri define a éstas de forma sensible a las mayúsculas. Así, cuando cree sus páginas deberá tener en cuenta las mayúsculas y minúsculas en todas las referencias que realicemos a otros ficheros. En sistemas Windows puede resultar indiferente, pero en los demás sistemas operativos esto no ocurre.

A veces ocurre que el navegador utilizado funcione solo en modo texto porque se esté utilizando algún programa de lectura de páginas para personas discapacitadas, o simplemente tengamos desconectada la opción de visualización de imágenes de nuestro navegador.

Para estos casos resulta muy interesante disponer de una descripción de la imagen para hacernos una idea de su contenido.  Para ello existe el atributo <alt>. Este atributo nos permite introducir en las páginas descripciones de las imágenes, siempre que estas no puedan ser visualizadas. Un ejemplo:

Al cargar está nueva página, no notaremos ningún cambio con respecto a la página creada anteriormente. En el caso de que la imagen no pueda ser mostrada, por, por ejemplo no existir en el directorio, entonces apreciaremos la diferencia.

Como vimos anteriormente, podemos disponer de ToolTips en nuestras imágenes, para ello usaremos la etiqueta title.

Vemos el resultado:

Posicionando la imagen dentro de la línea de texto actual

En HTML todos los elementos visuales son tratados de la misma forma, como si fueran caracteres de texto convencionales. Así, para los visualizadores, no existe diferencia  entre un determinado carácter de texto y una determinada imagen en cuanto a su ubicación dentro de la página, siendo posible intercalar letras e imágenes en cualquier momento.

La forma más sencilla de desplazar una imagen dentro de una página es utilizar la etiqueta <p> ... </p> y los caracteres de espaciado &nbsp;. Veamos un ejemplo de como podemos desplazar una imagen para que no aparezca en la esquina superior derecha de la pantalla:

En nuestro navegador vemos que la imagen está desplazada 12 espacios hacia la derecha:

Tenemos una solución válida, pero existen otros métodos más eficientes que pueden utilizarse de forma aislada, o bien como complemento a la técnica anterior. Para ello tenemos el atributo align. Este atributo nos permitirá posicionar la imagen de forma relativa al texto actual, en la parte superior de la misma, en la parte inferior, en el medio, a la derecha o a la izquierda (estas dos fueron implementadas a partir de la versión 4.0 de HTML). Veamos a continuación de forma detallada como conseguir estos efectos:

  • align=top.- Permite posicionar la imagen de forma que su parte superior quede alineada con la parte superior de la línea de texto.
  • align=middle.- Permite situar la imagen y el texto de tal forma que el centro de ambas permanezca a la misma altura dentro de la línea.
  • align=bottom.- Hace que la base de la imagen y del texto se sitúe en la misma altura. De esta forma, las imágenes más grandes quedarán por encima de los caracteres a los que acompaña. En caso de no seleccionar ningún valor para align, este se tomará por defecto.
  • align=left.- Sitúa la imagen tratada a la izquierda de la página, desplazando el resto del texto a la derecha o bajando una línea si fuese necesario, si existe el texto más a la izquierda.
  • align=right.- Coloca la imagen justo en el margen derecho de la página, con independencia del texto que rodee a la misma. Si existe el texto a la derecha de la imagen, este se desplazará a la izquierda de la imagen.

Apariencia de la imagen: bordes y tamaño

Existen una serie de atributos asociados a la etiqueta <img> que nos permitirán definir el tamaño y grosor del borde, la existencia de éste o la separación existente entre varias imágenes contiguas. Veamos los atributos:

  • height=.- Indica la altura de la imagen en píxeles o puntos de pantalla. Generalmente, éste deberá ser un valor  igual o superior al alto real de la imagen. Podemos poner también un valor en porcentaje con respecto al alto de la página mostrada. En este caso el valor numérico debe ir seguido del carácter %.
  • width=.- Indica el ancho de la imagen en píxeles o puntos de pantalla. Por lo general, deberá ser de un valor igual o superior al ancho real de la imagen. Podemos indicárselo también con un valor porcentual (añadiendo el carácter %) con respecto al ancho de la página mostrada.
  • border=.- Indica el ancho del borde a aplicar en la imagen en número de píxeles o puntos de pantalla border=0 elimina el borde de la imagen.
  • hspace=.- Indica la separación horizontal en píxeles a la izquierda y a la derecha de la imagen con respecto a los elementos que la rodean.
  • vspace=.- Indica la separación vertical en píxeles, por encima y por debajo de la imagen con respecto a los elementos que la rodean.

Creación de fondos con imágenes

Anteriormente vimos cómo asignar un color de fondo a una página con bgcolor de la etiqueta <body>. Aún más interesante resultará asignar un fondo con una imagen a nuestra página. Para ello haremos uso del atributo background en lugar o conjuntamente con bgcolor asociándole al mismo una uri o url que haga referencia a un fichero gráfico (bmp, jpg/jpeg, gif o png). Por ejemplo:

El resultado del listado en nuestro navegador sería:

Hemos añadido el atributo background a la etiqueta <body>, asociándose al mismo la dirección URI fondo_mar.jpg. Esta imagen se transforma en una especie de pieza de mosaico que compondrá el fondo de la página creada. Hay la posibilidad de que quien acceda a nuestra página tenga deshabilitada la carga automática de imágenes. En este caso la imagen del fondo no se cargarían, así como, las demás imagenes que compongan la página viendo solamente un fondo de color gris.

Para las líneas se ha utilizado una imagen llamada punto.gif de 1 píxel de tamaño y con el atributo height y width de la etiqueta <img> le hemos dado la anchura y el largo para hacer las distintas líneas.

  • Con lo aprendido en esta sección intenta modificar una imagen.
  • Cambia el tamaño de la imagen que hayas escogido.
  • Coloca una imagen a la izquierda de la página.
  • Coloca una imagen a la derecha de la página.
  • Busca un fondo y colócalo en tu página.