HTML5+CSS3 entrada 3: imágenes

En esta ocasión veremos todo lo que tiene que ver con la inserción de imágenes en HTML y como configurar su aspecto a través de CSS,

Las imágenes se insertan en HTML con la etiqueta IMG, de la cual vamos a necesitar los siguientes atributos:

• SRC: para colocar la dirección y el nombre de la imagen, la cual no debe llevar espacios
• ID: para vincularlo con una regla de CSS en caso de que queramos se aplique de forma única a la imagen
• CLASS: para vincularlo con una regla de CSS que se aplique a un grupo de objetos o de imágenes.

Veamos el siguiente ejemplo:

 

Las imágenes pueden ser de los siguientes tipos:

• GIF. imágenes que soportan animación y transparencias, pero que actualmente no se usan debido a que tardan demasiado en cargar el movimiento.
• JPG o JPEG imágenes con compresión pero sin transparencias.
• PNG imágenes con compresión y con transparencias, son las mas usadas.

Existen otros formatos de imagen que son soportados por los navegadores, pero estos son los mas usuales.

 

Ahora bien en cuanto a los atributos CSS que podemos usar para las imágenes, tenemos:

• Width: controla el ancho de la imagen, se puede definir en pixeles (px) o en porcentajes (%)
• Heigth: controla la altura de la imagen y se puede definir igual que witdh.

y aunque no se acostumbra a hacer, se pueden usar atributos del modelo de cajas, como son:

• Border: define un borde para la imagen.
• Padding: es un espaciado entre el borde y la imagen.
• Margin: es un espacio que se deja entre el borde y el resto de los elementos de la pagina.

Veamos como aplicamos una regla CSS para la imagen que colocamos:

 

Note que en la regla CSS para el Id figura, se coloco el atributo height con el valor «auto», esto es para que al especificar el ancho de la imagen con el atributo witdh, el alto de la imagen se ajuste al ancho de la misma y la imagen no se descuadre.

El atributo border, necesita de 3 valores que son:

• ancho del borde
• color del borde
• estilo de la imagen, que puede ser dotted, dashed, solid, double, groove, ridge, inset, outset

El resultado de la regla CSS que tenemos queda como sigue