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.
Cierre
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.
