Prueba tus habilidades: Enlaces

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Creando hipervínculos.

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

Enlaces 1

En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:

  • El primer enlace debería estar vinculado a una página llamada whales.html, que está en el mismo directorio que la página actual.
  • También queremos agregarle un cuadro de información ("tooltip") cuando pase el puntero sobre el enlace, que le diga al usuario que la página incluye informacion sobre las Ballenas azules y las Ballenas blancas.
  • El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales@example.com".
  • Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".

Nota: El primer enlace en el ejemplo tiene el atributo target="_blank" , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

Nota: Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Enlaces 2

En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:

  • El primer enlace debería vincular a una imagen llamada blue-whale.jpg, que se encuentra en una carpeta llamada blue dentro de la carpeta actual.
  • El segundo enlace debería vincular a una imagen llamada narwhal.jpg, que se encuentra en una carpeta llamada narwhal, que se encuentra en un nivel de carpetas sobre la carpeta actual.
  • El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es https://www.google.co.uk, y la búsqueda de imágenes se ubica en un subdirectorio llamado imghp.
  • El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID bottom.

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

Nota: Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Enlaces 3

Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:

  • Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.
  • Agregues una advertencia a cualquier enlace que necesite una advertencia.

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

Nota: Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Evaluación o ayuda adicional

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir:
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.