La etiqueta que nos sirve para incluir imágenes en nuestras páginas del Web es muy similar a la de enlaces a otras páginas, que hemos visto en el punto anterior. La única diferencia es que, en lugar de indicar al programa navegador el nombre y la localización de una documento HTML para que lo cargue, se le indica el nombre y la localización de el fichero que contiene la imagen.
La estructura de la etiqueta es:
<img src="ruta/imagen.ext">
Con el comando img src (Image Source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre y extensión que tenga).
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT
<img src="ruta/imagen.ext" alt="Descripción">
Con el comando ALT se introduce una descripción (una palabra o frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en forma de texto sólo. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es sólo esto. Hay casos, como veremos más adelante, en los que se utiliza una imagen como enlace a otra página. si se imitiera este comando, los que utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas.
Con respecto a la localización del fichero de la imagen, si no se indica nada especial, quiere decir que el fichero imagen.gif está en el mismo directorio que el documento HTML que estamos escribiendo.
Al igual que una página con la que queremos enlazar puede estar fuera de nuestro sistema, (en cuyo caso habría que indicar su URL o dirección completa), podemos cargar una imagen que no esté en nuestro sistema siguiendo el mismo método, es decir, indicar en la etiqueta el URL completa de la imagen, Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página.
Los formatos que es recomendable utilizar en una pagina web son:
- GIF - Graphics Interchange Format
- JPG - Joint Photographic Experts Group
- PNG - Portable Network graphics
El formato GIF es el formato de archivo que se utiliza habitualmente para mostrar gráficos e imágenes de color indexado en documentos HTML en Internet y otros servicios en línea. GIF es un formato comprimido para minimizar el tamaño del archivo y el tiempo de transferencia electrónica. El formato GIF preserva la transparencia en imágenes de color indexado.
El formato JPEG se utiliza habitualmente para mostrar fotografías y otras imágenes de tono continuo en documentos HTML en Internet y otros servicios en línea. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no admite canales alfa (No preserva la transparencia). A diferencia del formato GIF, JPEG retiene toda la información de color de una imagen RGB pero comprime el tamaño del archivo descartando datos selectivamente.
El formato PNG es uno de los formatos más interesantes. Aunque su uso no está tan extendido en este momento, cada vez más rápidamente está siendo bien acogido por los desarrolladores de páginas web. Desarrollado como una alternativa sin patente al formato GIF, el formato de gráficos de red portátiles (PNG) se utiliza para una compresión sin pérdidas y para la visualización de imágenes en Internet. A diferencia del formato GIF, PNG admite imágenes de 24 bits y produce transparencia de fondo sin bordes irregulares. Esto es algo que consigue por medio del "canal alpha", que permite definir el grado de transparencia u opacidad de un color. Sin embargo, algunos navegadores Web no admiten imágenes PNG, o no las soportan del todo bien, es el caso de Internet Explorer 6, que tiene diversos problemas sobre todo con los archivos semitransparentes. El formato PNG admite también imágenes RGB, en 8 bit, de color indexado, opcionalmente en escala de grises y de mapa de bits sin canales alfa. PNG conserva la transparencia en imágenes en escala de grises y RGB, lo que resulta extremadamente útil para utilizarse en Flash, donde PNG es totalmente compatible.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Para estos casos se utiliza generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imágen.
En el post anterior vimos la estructura general de un enlace es:
<a href="XXX"> YYY </a>
Donde XXX era el destino del enlace e YYY el texto del enlace. En este caso sustituimos XXX por el nombre del fichero de la página a la queremos acceder. Y en lugar de YYY ponemos la etiqueta completa de la imagen (que queda así englobada dentro del enlace).
<a href="practica02.html"><img src="collage.jpg" alt="Ir a la Practica 2></a>
<a href="practica02.html"><img src="collage.jpg" alt="Ir a la Practica 2" border=0></a>
Posicionando el cursor sobre esta última imagen, comprobamos que actúa también como enlace aunque carezca del rectangulo de color. Esto puede resultar más estético, pero se corre el riesgo de que el usuario no se dé cuenta de que la imagen sirve de enlace.
No hay comentarios:
Publicar un comentario