Welcome to www.paezypaezrepresentaciones.com   Click to listen highlighted text! Welcome to www.paezypaezrepresentaciones.com Powered By GSpeech

Distintos formas de Hipervinculos

  • Hipervínculo mediante una imagen <a> y <img>

Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.

La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>)

Confeccionemos una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página.

Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio:

<html>
<head>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>
<a href="/pagina2.html"><img src="/imagenes/foto1.jpg"
alt="Pintura Geométrica"></a>
<br>
<a href="/pagina2.html"><img src="/imagenes/foto2.jpg"
alt="Pintura Geométrica"></a>
</body>
</html>

Como podemos observar insertamos la marca HTML img en el lugar donde disponíamos el texto del hipervínculo. Eso es todo.

Lo que debe quedar bien en claro es que las imágenes se encuentran en un directorio llamado imagenes en la raiz del sitio (luego para indicar la referencia al archivo lo hacemos antecediendo la barra invertida / con lo que hacemos referencia a que partimos desde la raiz del sitio) en una carpeta llamada imagenes (/imagenes/foto1.jpg)

Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas.

Siguiente

Don't have an account yet? Register Now!

Sign in to your account

Click to listen highlighted text! Powered By GSpeech