articulo

Ejercicios para básicos con imágenes en html

El manejo de imágenes en un sitio web, proporciona un atributo visual que en la mayoría de las veces permite ayudar al lector lo que se quiere expresar. A continuación se muestra una serie de ejercicios donde se hace uso del tratamiento de imágenes.

  1. La empresa Delux S.A de C.V. requiere insertar una imagen en un fichero con extensión html donde lleva como nombre index. Crea un archivo donde se realice la inserción de una imagen y lo nombras “index.html”. Se recomienda: utilizar la etiqueta img. El atributo src especifica la ruta de la imagen en el servidor y el atributo alt proporciona un texto alternativo que se muestra si la imagen no se puede cargar.
  2. La empresa airthink S.A de C.V. quiere un mapa de imagen dentro de un archivo con nombre map_image.html. Se recomienda: utilizar las etiquetas img y map. La etiqueta img tiene un atributo usemap que hace referencia al mapa de imágenes, definido por la etiqueta map. Las áreas de la imagen se definen utilizando la etiqueta area, que tiene atributos shape (forma de la zona), coords (coordenadas de la zona) y href (URL de la página vinculada). Se puede agregar un atributo alt a cada área para proporcionar texto alternativo.
  3. La empresa imageDesing S.A. de C.V. quiere ajustar el tamaño a una imagen, la empresa lo requiere en un fichero con nombre recor_image.html. Se recomienda: para ajustar el tamaño de una imagen se puede utilizar los atributos width y height de la etiqueta img.
  4. La empresa legacy S.A. de C.V. quiere colocar una leyenda a una imagen, la leyenda debe de decir: “Imagen 1. Titulo. Fuente: Creación propia” en un fichero con que lleve el nombre de: legacy.html. Se recomienda: utilizar las etiquetas figure y figcaption.
  5. La empresa efectart S.A de C.V busca a un maquetador de html, que pueda colocarle un efecto a una imagen cuando se pase el ratón sobre está. Efectart quiere que el código se encuentre en un archivo con nombre efec_mouse.html. Se recomienda: utilizar la propiedad CSS :hover y cambiar la imagen o aplicar algún efecto cuando el cursor pase sobre ella.

Se espera que con estos cinco ejercicios se familiarice un poco más con las propiedades y atributos de las imágenes en el lenguaje de marcado html.

Leave a Reply

Your email address will not be published. Required fields are marked *