Etiquetas HTML: Inclusión de imágenes.

Imágenes, Sonido y Multimedios

Formatos de Imágenes

Las imágenes se almacenan en archivos con formatos especiales.
Entre los formatos más usuales están GIF, JPG y BMP.
Cualquier navegador está en condiciones de manejar imágenes en estos formatos, o por lo menos en los dos primeros.
GIF es el más popular, pero tiene una baja tasa de compresión, por lo que está siendo reemplazado por JPG, de mejor compresión y capacidad de 24 bits, aunque más lento.BMP no tiene compresión, y su única popularidad se debe al Windows.
Si se manejan otros formatos gráficos, entonces es necesario convertir las imágenes antes de incluírlas en una presentación HTML.

Inclusión de Imágenes

Dentro de un archivo HTML, para incluír específicamente una imagen, se utiliza la etiqueta <IMG>.

Salida	Etiquetas requeridas
Imagen gif.	<IMG SRC="imagen9a.gif" ALT="Un bonito dibujo" ALIGN=ABSCENTER> Imagen gif.
Imagen gif con fondo transparente.	Imagen gif <IMG SRC="imagen10.gif" ALIGN=TOP>con fondo transparente.
El texto puede alinearse a la izquierda.	<IMG SRC="imagen11.jpg" ALT="otra bonita imagen"ALIGN=RIGHT> El texto puede alinearse a la izquierda.

Salida

Etiquetas requeridas

Imagen gif.

<IMG SRC="imagen9a.gif"
 ALT="Un bonito dibujo"
 ALIGN=ABSCENTER> Imagen gif.

Imagen gif

con fondo transparente.

Imagen gif <IMG SRC="imagen10.gif"
 ALIGN=TOP>con fondo transparente.

El texto puede alinearse a la izquierda.

<IMG SRC="imagen11.jpg" ALT="otra
 bonita imagen"ALIGN=RIGHT> El texto
 puede alinearse a la izquierda.

La localización de las imágenes sigue la misma forma que la localización de archivos en la plataforma utilizada. Por ejemplo
```
<IMG SRC="../dot.gif">
```
localizará la imagen un directorio más arriba que el del documento corriente.
Una imagen también puede utilizarse dentro del ancla de un enlace.
```
<A HREF = "..."><IMG SRC="dot.gif"></A>
```
En este caso el navegador resaltará la imagen de un modo similar al resaltado de los demás vínculos de hipertexto.

Etiquetas de Imágenes

Algunos de los atributos de la etiqueta <IMG> son

ALT="texto"	En los navegadores en los que no se pueden importar imágenes, o en los que no está habilitada la opción de abrir las imágenes, entonces se mostrará un recuadro del tamaño que ocuparía la imagen, y en su interior el `texto`elegido. Algunos navegadores también muestran este cartel junto al ícono del mouse cuando éste apunta hacia la figura.
ALIGN=TOP	Todo el texto siguiente se alineará con el tope de la figura.
ALIGN=BOTTOM	Idem pero con el fondo.
ALIGN=MIDDLE	La figura estará centrada en el renglón.
ALIGN=LEFT	El texto se encolumnará a la derecha de la imagen.
ALIGN=RIGHT	Idem pero hacia la izquierda.

Para incluir una imagen transparente de fondo, se utiliza el atributo BACKGROUND de la etiqueta BODY. En este caso, el navegador ``embaldosará" el fondo de la pantalla con la imagen elegida.

<BODY BACKGROUND = "fire.jpg"> ... </BODY>

LA APARIENCIA FINAL DE TODOS ESTOS ATRIBUTOS DEPENDE DE LAS CAPACIDADES GRÁFICAS DE LA APLICACIÓN CLIENTE.

La inclusión de logos animados se puede realizar con una extensión del formato GIF.
Se realizan individualmente cada uno de los cuadros de la animación con algún utilitario o programa especialmente diseñado.
Todos los cuadros se guardan en un único archivo GIF de formato especial.

Inclusión de Imágenes - Algunos consejos.

No dependa de las imágenes si desea que su página sea utilizable desde navegadores de solo texto. Siempre utilice el atributo ALT.
No todos tienen el mismo monitor y tarjeta. Revise su página diferentes resoluciones y cantidades de colores para observar la apariencia resultante en las imágenes de fondo y transparentes.
Las imágenes e íconos pueden ser ambiguos. Utilice íconos adecuados para enlaces de navegación.
Utilice imágenes de gran tamaño solamente cuando sea indispensable. En estos casos utilice un ícono miniatura (thumbnail) como vínculo a la imagen.
Manténgase dentro de los formatos gráficos más populares.
La sobriedad siempre causa buena impresión.

Inclusión de Multimedios

Es posible vincular un archivo HTML con un utilitario que permite la reproducción de un archivo multimedios (música, video, etc.).
Se utiliza la misma etiqueta de ancla <A>, y es necesario establecer las preferencias entre la extensión del archivo mulitmedia y el utilitario reproductor.
Algunos navegadores reconocen atributos BGSOUND en la etiqueta <BODY>, donde se puede indicar que se ejecute un archivo de música a través del reproductor MIDI del sistema.
Siempre hay nuevos atributos. Si Ud. encuentra una página con alguna idea novedosa en mulitmedios, entonces guarde el archivo HTML y luego obsérvelo para descubrir cómo está implementada.

Etiquetas HTML