Las imágenes en XHTML

Imprimir

Es dificil encontrar una página web que no tenga alguna imágen, ya sea como adorno o como complemento al texto que aparece. Las imágenes es uno de los elementos más utilizados en la web.

En una página web, por tanto, se pueden distinguir 2 tipos de imágenes:

  • De aspecto: son las que utilizamos para diseñar nuestra página web (fondos, adornos de listas, etc...). Estas imágenes van enlazadas en la hoja de estilos .CSS normalmente.
  • De contenido: son las que ponemos para aclarar, complementar o simplemente mostrar contenido que de otro modo resulta difícil hacerlo. Estas imágenes van en la página XHTML siempre.

La etiqueta XHTML que se utiliza para poner imágenes es <img /> y es una de las pocas etiquetas que no tiene etiqueta de cierre.

Los atributos que se utilizan con esta etiqueta son:

virus
  • src = "url de la imagen"   proporciona la ruta de la imagen
  • width = "número"   ancho de la imagen
  • height = "número"   alto de la imagen
  • alt = "texto"   descripción corta de la imagen

Un ejemplo:
   El código utilizado para la imagen que aparece a la derecha es:

<img src="_data/contenidos/t8/virus.png" height="96" width="96" />

Una imagen también puede ser un enlace o hipervínculo. Los navegadores, por defecto, tienen una forma particular de representar los links, y en el caso de las imágenes tienen la "manía" de mostrar un borde azul grueso cosa que, estéticamente, no resulta muy agradable, por eso es conveniente definir la siguiente regla en el archivo .css para evitar este comportamiento:

a img { border: none; }

virus_sombraLa mayoría de los programas de diseño gráfico permiten añadir una sombra (llamada drop shadow en inglés) a las imágenes. CSS 2.1 no incluye propiedades para ello, pero sí las nuevas especificaciones para CSS 3.0, evidentemente siempre estamos hablando de imágenes cuadradas o rectangulares, no como la mostrada más arriba, si queremos que ésta tenga sombra se consigue con algún programa gráfico que lo permita y se guarda en formato .png que adminte canal alfa de transparencia (imagen de la izquierda).

Y así enlazo con los formatos gráficos más utilizados en las páginas web: .gif, .jpg y .png. No quiero dejar de mencionar que siempre que trabajamos para la web el "peso" ( en KB) de las páginas que construimos depende mucho de que nuestras imágenes estén optimizadas, con algo de cuidado podemos conseguir diseños estupendos y una "carga" de la página rápida.

En este artículo tienes una breve explicación de ¿cuándo utilizar un formato u otro?.

Esta imagen rectangular tiene sombra utilizando reglas CSS 3.0, concretamente estas:

img {
    float: left;
    margin: 10px 20px;
    -webkit-box-shadow: 4px 4px 8px ;    /* para navegadores Chrome y Safari */
    -moz-box-shadow: 4px 4px 38x ;       /* para navegador Firefox */
    box-shadow: 4px 4px 8px ;            /* para navegador IE8 y 9 y nuevos */   
}

 Sólo podrás verlo correctamente si utilizas las últimas versiones de los navegadores.

aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL190390