Imágenes y Atributos

Imágenes

Un elemento muy importante en una pagina Web o documento html son las imágenes y los gráficos.

Inserción

Existen varias formas de insertar una imagen en una pagina Web, pero la mas utilizada es mediante la etiqueta:

<IMG SRC=URL>

Donde url es la dirección completa o bien la trayectoria y el nombre del archivo que contiene la imagen que deseamos insertar dentro de nuestra pagina Web.

Los tipos de imágenes ideonas para ser integradas en las paginas Web son aquellas que tienen el formato GIF y JPEG, ya que estos tipos de imágenes los soportan la mayoría de los navegadores de Internet.

Si en la misma carpeta llamada "Pagina Web", se encuentra el archivo de nuestra pagina cuyo nombre es "Primera Pagina con imagen.html" y el archivo de imagen llamado "imagen.jpg", entonces colocamos la siguiente trayectoria.

<IMG SRC=imagen.jpg>

Ahora supongamos que dentro de la carpeta "Pagina Web" existe otra, llamada "imágenes".

Por lo tanto, si dentro de la carpeta "Pagina Web" se encuentra el archivo de nuestra pagina cuyo nombre es "Primera pagina con imagen.html", y dentro de la carpeta "imágenes" esta almacenado el archivo de imagen llamado "imagen.jpg", entonces colocamos la siguiente trayectoria.

<IMG SRC=imágenes/imagen.jpg>

Ahora, supongamos que dentro de la carpeta  "imágenes" se encuentra la carpeta "Pagina Web".

Y dentro de la carpeta "Pagina Web" se encuentra el archivo de nuestra pagina cuyo nombre es "Primera pagina con imagen.html", y dentro de la carpeta "imágenes" esta almacenado el archivo de imagen llamado "imagen.jpg", entonces debemos acceder a una carpeta superior y para lograr esto escribiremos la siguiente trayectoria.

<IMG SRC=../imagen.jpg>

Referencias de texto ALT

En algunas ocaciones el navegador de Internet no puede acceder correctamente a las imágenes, ya sea porque el navegador trabaja solamente en modo de texto o porque se esta utilizando algún programa de lectura de paginas para discapacitados, o simplemente porque se tenga des habilitada la opción de visualización de imágenes.

En estos casos es importante tener una descripción de la imagen para hacernos una idea de su contenido, y para ello existe el atributo ALT.

El atributo ALT nos permite introducir en nuestras paginas una descripción de las imágenes, esta descripción se mostrara en la pantalla del navegador de Internet, siempre y cuando las imágenes no puedan ser visualizadas.

El formato para el uso del atributo ALT es el siguiente:

<IMG SRC=URL ALT="descripción de la imagen">

Donde la descripción de la imagen la debemos escribir entre "comillas".

Tamaño WIDTH y HEIGHT

El lenguaje html nos permite escalar los gráficos, es decir modificar su tamaño mediante los atributos:

WIDTH que determina el ancho de la imagen y su valor por defecto es 100 puntos de imagen.

HEIGHT que determina la altura de la imagen.

<IMG SRC="imagen.jpg" width=50 height=50>

<IMG SRC="imagen.jpg" width=100 height=100>

O

<IMG SRC="imagen.jpg" width=50% height=50%>

<IMG SRC="imagen.jpg" width=100% height=100%>

Alineación ALIGN="posición"

Posición en medio:

<IMG SRC="imagen.jpg" ALIGN=MIDDLE>

Posición arriba:

<IMG SRC="imagen.jpg" ALIGN=TOP> 

Posición abajo:

<IMG SRC="imagen.jpg" ALIGN=BOTTOM>

Posición derecha:

<IMG SRC="imagen.jpg" ALIGN=RIGHT>

Posición izquierda:

<IMG SRC="imagen.jpg" ALIGN=LEFT>

Distancia entre el texto y la imagen

Las imágenes que insertamos junto a un texto, con el atributo ALIGN=LEFT o RIGHT, hacen que el navegador de Internet muestre el texto alrededor de la imagen.

Sin embargo, en ocasiones necesitamos espacio entre el texto y la imagen, y para ello el lenguaje html tiene dos atributos que nos ayuda a establecer esta distancia.

HSPACE= pixeles y VSPACE=pixeles

<IMG SRC="imagen.jpg" ALIGN=LEFT VSPACE=30 HSPACE=30>

Bordes BORDER="tamaño"

Ademas de los atributos que acabamos de ver, para la alineación de la imagen con respecto al texto en la pagina Web, existen otros que nos permiten colocar un borde alrededor de la imagen, así como definir sus características.

De forma predeterminada, los navegadores de Internet no muestran un borde en las imágenes, pero es posible dibujarles uno, mediante sus características.

BORDER="tamaño"

Donde "tamaño", es el ancho del borde en numero de pixeles a puntos de pantalla.

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=0>

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=4>

<IMG SRC="imagen.jpg" ALIGN=MIDDLE BORDER=8>