El código HTML cada vez se hace más conocido por todos debido a que es usado en blogs, webs y hasta foros. En este breve y rápido tutorial te mostraremos cómo enlazar una imagen a un enlace en HTML.
Obtener la URL de la imagen
Si estamos trabajando en una web o blog, debemos subir la imagen a nuestro servidor. De caso contrario, puedes utilizar servicios como Imgur, Tinypic, etc. Ahora, deberemos tener claro la URL de nuestra imagen, que es el lugar donde está almacenada.
Nota: Si estás trabajando offline, puede tener la imagen en la carpeta donde está tu archivo .HTML. La url en este caso solo sería “NOMBREDELAIMAGEN.jpg”.
Código HTML para enlace e imagen
El código HTML para enlaces es el siguiente:
1 | <a href="URL DESTINO">Enlace</a> |
En este caso, se mostrará la palabra “Enlace” y al dar click nos llevará a la “URL DESTINO”. Lo que nosotros queremos lograr es que se muestre la imagen y esta nos lleve a una dirección.
Esto lo lograremos sabiendo el código HTML para mostrar una imagen:
1 | <img src="URL DE LA IMAGEN"> |
Código para enlazar una imagen a un enlace en HTML
Ahora debemos juntar estos códigos para lograr lo que deseamos. Esto sería así:
1 | <a href="URL DESTINO"><img src="URL DE LA IMAGEN"></a> |
De esta manera, se mostrará una imagen que al dar click nos llevará a la “URL DESTINO”.
Desde hoy adicta a tu blog.
Un tutorial simplemente fantastico.
Saludos y gracias
Hola, lo que yo quiero es poner una imagen de un teléfono y que al pinchar te lleve directamente a llamada telefónica. Se podía hacer esto?
Saludos y gracias.
¡Hola Javi!
Para poner una imagen con enlace a una llamada telefónica, lo harías de la misma manera pero la url de destino sería “tel:+5555555555”.
Es decir, todo el enlace sería de la siguiente manera:
Gracias, siempre se me olvida despues de todos los años que llevo dedicandome a esto, te guardo en marcadores para volver cada vez que me haga falta.
Hola, quisiera saber si es posible enlazar un gift con la dirección de una cuenta , ya sea facebook o twitter. Lo que quiero es que el material que publique en el facebook se enlace con el twitter a penas den clic al gift. ¿Se puede hacer algo parecido? ¿es posible?
Saludos… he intentado insertar este codigo en facebook… y me arroja solamente la imagen y al abrirla sale el sitio de alojamiento de la imagen…
Hola Jesús!
Recuerda que la URL de la imagen debe ser directa, por ejemplo: “http://alojamientodeimagen.com/fwej9.jpg”. Debe terminar en alguna extensión de imagen: .png, .jpg, etc.
Por otro lado, si estás publicando en Facebook, lamento decirte que Facebook no admite código HTML en sus publicaciones.
Saludos 🙂