HTML5+CSS3 entrada 3: imágenes


logo html5

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:

Captura de pantalla 2013-09-27 a la(s) 22.17.44

 

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:

Captura de pantalla 2013-09-27 a la(s) 23.09.05

 

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

 

Captura de pantalla 2013-09-27 a la(s) 23.59.29

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en General, Lenguajes de aplicaciones y etiquetada , , , , , . Guarda el enlace permanente.

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s