Pon a prueba tus habilidades: imágenes HTML

El objetivo de esta prueba de habilidad es evaluar tu entendimiento sobre las imágenes y como incrustarlas en HTML.

Nota: Puedes experimentar tus soluciones en los editores interactivos de abajo. No obstante, sería de gran ayuda que descargues el código y que usaras una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las actividades.

Si te quedas atorado, puedes pedirnos ayuda — visita la sección de Evaluación o ayuda adicional al final de esta página.

Actividad 1

En esta tarea, te pedimos que incrustes una imagen simple de unos arándanos en la página. Para esto necesitas:

  • Agregar la dirección de la imagen en el atributo más indicado para incrustar la imagen en la página. La imagen se llama blueberries.jpg, y se encuentra en una carpeta que está dentro de la carpeta images.
  • Agregar texto alternativo en el atributo más indicado para describir la imagen, para las personas que no pueden verla.
  • Dale al elemento <img> el width (ancho) y height (alto) apropiado para que se muestre en la relación de aspecto correcta, y se reserve el suficiente espacio en la página para mostrarla. El tamaño intrínseco de la imagen es 615 x 419 pixeles.

Prueba a actualizar este ejemplo vivo de código para recrear el ejemplo finalizado.

Descarga el punto inicial para esta actividad para trabajar desde tu propio editor o en un editor en línea.

Actividad 2

En esta tarea, actualmente ya tienes una imagen con todas sus características, pero nos gustaría que agregaras una etiqueta flotante que aparece cuando pasas el ratón por encima. Deberías colocar la información más apropiada en dicha etiqueta.

Intenta actualizar el siguiente código vivo para recrear el ejemplo finalizado:

Descarga el punto inicial para esta actividad para trabajar desde tu propio editor o en un editor en línea.

Actividad 3

En esta actividad, se te proporciona una imagen con todas sus características así como un texto descriptivo. Lo que debes hacer es agregar elementos que asocien a la imagen con la descripción.

Intenta actualizar el siguiente código vivo para recrear el ejemplo finalizado:

Descarga el punto inicial para esta actividad para trabajar desde tu propio editor o en un editor en línea.

Evaluación o ayuda adicional

Puedes practicar estos ejemplos en los editores interactivos mencionados anteriormente.

Si deseas que tu trabajo sea asesorado o estás atorado y necesitas ayuda:

  1. Pon tu trabajo en un editor en línea que se pueda compartir, como CodePen, jsFiddle, o Glitch. Puedes escribir el código por tu cuenta o usar los archivos iniciales que se proporcionan en las secciones de arriba.
  2. Escribe una publicación en la que pides asesoría y/o ayuda en el foro de Discourse de MDN en la categoría de aprendizaje. Tu publicación debe incluir:
    • Un texto descriptivo, como "Necesito asesoría para la prueba de habilidad de imágenes en HTML, actividad 1"
    • Detalles de lo que ya has intentado y lo que quieres que nosotros hagamos; por ejemplo, dinos si estás atorado y necesitas ayuda o quieres una evaluación.
    • Un enlace al ejemplo en el cual necesitas ayuda o requieres evaluación, en un editor en línea (como se mencionó en el paso 1 arriba). Esta es una buena práctica a adoptar, puesto que es muy difícil ayudar a alguien con un problema de código si no puedes ver su código.
    • Un enlace a la página de la actividad o evaluación en cuestión, de esta manera podemos encontrar la pregunta en la que necesitas ayuda.