Aplica diseños personalizados a enlaces de tu página web, mediante la implementación de hipervínculos a través de una imagen en un documento HTML, según las reglas de este lenguaje.

Por desconocer del procedimiento exacto para utilizar una imagen para ser presionada por el usuario y lo dirija a una información específica, existen errores en la ejecución de la página web. Por lo tanto, identificaremos los pasos y cuáles son las diferencias entre una imagen normal y una marcada con la etiqueta a.

Con los hipervínculos, creamos enlaces entre documentos con extensión HTML, a fin de otorgarle al usuario una sensación amigable de la página web. Tal tipo de uniones las hacemos mediante una imagen. En la siguiente ilustración, se encuentra un ejemplo en el cual, al presionar la imagen o las palabras resaltadas en color azul, se muestra una página web diferente; es decir, ambas permiten hacer un enlace hacia otro documento.

061-01_1104_ilu01. Ejemplo de hipervínculo con imagen

La forma de crear este procedimiento es la siguiente:

• Agregar la etiqueta de hipervínculo a.
• Definir el atributo href, con la ruta exacta del documento HTML a enlazar.
• Agregar la instrucción de imagen y, dentro de las comillas, el nombre de la misma.
• Cerrar la etiqueta de enlace.

En la siguiente vista del usuario tenemos el enlace a ser realizado. Cuando la imagen sea presionada, el navegador web abrirá la página del documento HTML llamada principal.

061-01_1104_ilu02. Creación de hipervínculo mediante una imagen

Para observar unas diferencias, crearemos dos enlaces:

• La primera imagen, sin especificación de enlace.
• La segunda imagen, con especificación de enlace.
• El segundo enlace se muestra solo con letras.

Por lo tanto, al realizar la prueba mediante el navegador:

• Diferenciamos la forma del puntero, cuando está posicionado en la imagen con la etiqueta de enlace.
• Apreciamos ambos enlaces, tanto en la segunda imagen como en las letras, hacia el mismo documento HTML.
• Observamos los enlaces uno al lado del otro, debido a la clasificación lineal de la etiqueta a.

En la siguiente imagen se muestra el resultado:

061-01_1104_ilu03. Diferencias y similitudes entre enlaces

Ahora bien, este tipo de enlaces es frecuentemente utilizado para mostrar en otra ventana una imagen, en lugar de un documento HTML. Con tal propósito:

• Agregamos solo el nombre de la imagen, en el atributo href, por estar ubicada en la misma carpeta del documento HTML.
• Agregamos el atributo target en la etiqueta a. De esta forma, la imagen se muestra en otra pestaña.

Mediante la siguiente vista del usuario, al hacer clic en la imagen, se abrirá una pestaña adicional, con la imagen previamente definida, lo cual sirve de ayuda para mostrar imágenes en miniatura, y queda a selección del usuario verla en otra página y con el tamaño original.

061-01_1104_ilu04. Enlace hacia una imagen

Los hipervínculos de imágenes, normalmente, son relativos, debido a su ubicación en la misma carpeta del proyecto. Sin embargo, es posible crear hipervínculos absolutos, para lo cual agregamos una imagen disponible en internet.

Keynotes

• Con los hipervínculos, creamos enlaces entre documentos con extensión HTML, a fin de otorgarle al usuario una sensación amigable de la página web. Tal tipo de uniones lo hacemos mediante una imagen.
• La forma de crear este procedimiento es la siguiente: Agregar la etiqueta de hipervínculo a. Definir el atributo href, con la ruta exacta del documento HTML a enlazar. Agregar la instrucción de imagen y, dentro de las comillas, el nombre de la misma. Cerrar la etiqueta de enlace.
• Los hipervínculos de imágenes, normalmente, son relativos, debido a su ubicación en la misma carpeta del proyecto. Sin embargo, es posible crear hipervínculos absolutos, para lo cual agregamos una imagen disponible en internet

Misión

A fin de aplicar profesionalmente diseños personalizados a enlaces de una página web, implementa hipervínculos a través de una imagen, en un documento HTML, según las reglas de este lenguaje.

Pasos a seguir:

• Ubica el estándar oficial de HTML y lee las especificaciones de enlaces e imágenes.
• Crea dos documentos básicos de HTML, e ingresa una imagen en cada uno para enlazarlos.
• Ubica un experto en la creación de páginas web mediante vKonnect y, luego de una revisión juntos del código, toma nota de sus sugerencias.

Sabrás que has tenido éxito cuando visualices, sin problemas, el código en el navegador web de tu preferencia.

Modifica tu código según las notas de sugerencias, y compártelo, junto al código HTML, en tu vPages. Pide a tus compañeros un comentario de sugerencia para la optimización de tu lista. Ubica una publicación de un compañero y agrégale alguna sugerencia acerca de su proyecto.

Tiempo disponible: 3 horas.

Gracias a la implementación de hipervínculos a través de una imagen, en un documento HTML, según las reglas de este lenguaje, ejecutamos correctamente el proyecto completo, cuando el usuario presione un gráfico para ubicar una información específica. También, aplicamos diseños personalizados a enlaces de cualquier página web. La creatividad y la organización son determinantes para originar vistosos hipervínculos.