IMAGENES

 

Las imágenes en nuestras paginas WEB, las harán mas atractivas.
Tenga presente que a mayor cantidad de imágenes, mas lenta será la página, así que es recomendable poner la cantidad justa de imágenes para que las páginas queden atractivas sin perder eficiencia en la misma.
Para insertar imágenes, deberemos de usar la etiqueta IMG, que le indica al explorador que es una imagen, seguido de la etiqueta SRC, que le dará el nombre a la imagen.

Por ejemplo: <IMG SRC="URUGUAY.GIF">

Tenga presente que las imágenes no llevan etiquetas de cierre.
Al igual que hemos visto en otras oportunidades, las imágenes pueden ser dimensionadas para darle el tamaño que uno quiera o que sea mas conveniente, para ello se utilizan las etiquetas WIDTH="tamaño", ancho de la imagen; HEIGHT="tamaño", alto de la imagen.
Supongamos que a la imagen que teníamos antes, le queremos dar un tamaño de 50 pixel x 50 pixel, lo aremos así:

<IMG SRC="URUGUAY.GIF" WIDTH="50" HEIGHT="50">

También es posible insertar la imagen en porcentaje, en este caso es mejor debido a que si una página es abierta en otro tipo de resolución diferente a la que nosotros creamos la página, las imágenes quedaran proporcionales a la resolución de pantalla. Para ello deberemos de modificar el ejemplo anterior por:

<IMG SRC="URUGUAY.GIF" WIDTH="50%" HEIGHT="50%">

En este caso el 50% de nuestra página, va a ser ocupado por la imagen.
Cuando nosotros pasamos por el puntero del mouse por encima de una imagen, aparecen por lo general un dialogo con información de la imagen, este dialogo se introduce con la etiqueta ALT, por ejemplo:

<IMG SRC="URUGUAY.GIF" WIDTH="50%" HEIGHT="50%" ALT="Bandera de Uruguay">

Pase el puntero del ratón por esta imagen , ¿ve el texto que aparece?

Las imágenes animadas o las imágenes de vídeo quedan mas atractivas en las páginas que una imagen fija. Para insertar este tipo de imágenes, deberemos de modificar la etiqueta "SRC" por "DYNSRC" (dinámico src), seguido de la etiqueta START="fileopen", por ejemplo:

<IMG DYNSRC ="URUGUAY.GIF" WIDTH="50 " HEIGHT="50" START="fileopen">

Con esta nueva etiqueta, podremos indicarle que la imagen tenga un movimiento infinito. Para ello se usara la etiqueta LOOP=INFINITE, en este caso la nueva líneas quedara así:

<IMG DYNSRC ="URUGUAY.GIF" WIDTH="50 " HEIGHT="50" START="fileopen" LOOP="INFINITE">

Por supuesto que con esta etiqueta se podrá poner en vez de un GIF animado un AVI o cualquier otro tipo de imagen animada.

<IMG DYNSRC ="ESPANA.AVI" WIDTH="50 " HEIGHT="50" START="fileopen" LOOP="INFINITE">

Otros parámetros para imágenes son los bordes, podremos ponerle desde un borde "0" a "25", por supuesto que en cero el borde no aparecerá y en veinticinco será bien grueso.
Veamos como se ven unas imágenes con borde:

Borde cero ----> Borde cinco ----> Borde quince

<IMG SRC="URUGUAY.GIF" BORDER="NUMERO DE 0 a 25">
Ejemplo: <IMG SRC="URUGUAY.GIF" BORDER="5">

Otra etiquetas importantes, nos sirve para colocar la imagen en el lugar que quieramos dejando márgenes en las páginas. Estas etiquetas son VSPACE="numero", para el margen vertical, HSPACE="numero" para el margen horizontal.
Tenga presente que estos márgenes son creados desde la parte izquierda al centro o de arriba hacia abajo, por ejemplo:

<IMG SRC="URUGUAY.GIF" BORDER="5" VSPACE="50" HSPACE="80">

Nos creara 50 pixel de margen en la vertical y 80 en la horizontal.
La etiqueta ALIGN, también es aplicable a las imágenes. Se podrán aliñar a la derecha, centro o a la izquierda.
Para ello pondremos:

<DIV ALIGN="RIGHT"><IMG SRC="URUGUAY.GIF" BORDER="5"></DIV> Aliñado derecho
<DIV ALIGN="CENTER"><IMG SRC="URUGUAY.GIF" BORDER="5"> Centrada
<DIV ALIGN="LEFT"><IMG SRC="URUGUAY.GIF" BORDER="5"> Aliñado izquierdo

También podremos aliñarlas en forma vertical, para que el texto quede al lado de la imagen en el lugar que quieramos, las etiquetas son:

<IMG SRC="URUGUAY.GIF" BORDER="5" ALIGN="TOP">

---