Cómo publicar una imagen con un link en HTML

Saber un poco de HTML puede ser de mucha utilidad si gestionamos una página de WordPress. Por ejemplo para colocar una imagen con un texto en un widget y que pueda tener links apuntando a otra web.

Si queremos usar una foto o imagen en la web, la etiqueta para cargar el fichero es <img> más algunas instrucciones extra que se llaman atributos.

<img src=”DireccionFotoejemplo.jpg” alt=”Foto” height=”42″ width=”42″>

En el ejemplo anterior vemos que identificamos la fuente de la imagen con src=”xxxx” y que asignamos una altura height=”xxxx” y ancho a la imagen width=”xxxx”.

Ahora, si queremos que lleve un enlace, habrá que añadir las instrucciones propias de los links. Es decir <a href=”xxx”></a>. La foto debe quedar dentro de las instrucciones del link.

<a href=”DireccionWebDestino”><img src=”DireccionFotoejemplo.jpg” alt=”Foto”
height=”42″ width=”42″></a>

Todavía podemos mejorar un poco el código HTML para que al hacer click sobre la foto la página a la que se enlaza se abra en una nueva pestaña, dejando de ésta forma nuestra web abierta en el navegador. Para lograrlo usamos el atributo target=”xxx” con la variable _blank en la etiqueta del link, o sea, dentro de <a href=”xxx”>.

<a href=”DireccionWebDestino” target=”_blank”><img src=”DireccionFotoejemplo.jpg” alt=”Foto”
height=”42″ width=”42″></a>

Ahora tomando el código anterior, sólo nos falta sustituir los valores ficticios del ejemplo por los que nos interesan.

Cambiar DireccionWebDestino por una url apropiada, por ejemplo http://viajares.es, o http://www.barcelonaactiva.cat.

En DireccionFotoejemplo.jpg deberíamos cambiarlo por la ubicación exacta de la foto que usamos. Para ello podemos consultar en la biblioteca de medios los detalles de la imagen elegida. La ubicación va a tener el aspecto de una dirección web parecida a http://elnombredemiweb/direccionfotoejemplo.jpg

Veamos el código con un ejemplo más cercano a la realidad…

<a href="https://eltallerdewordpress.wordpress.com" target="_blank">
<img src="https://eltallerdewordpress.files.wordpress.com/2017/03/el-taller-wordpress-logo.png"
alt="El Taller de WordPress" height="150" width="150"></a>

Y ahora un ejemplo real de lo explicado aplicado a un widget de HTML personalizado, con texto e imagen, pero sin añadirle título.

Widget HTML personalizado

Widget HTML personalizado

En el apartado de contenido del widget escribimos un texto muy similar al que hemos presentado paso a paso aquí.

Ejemplo Widget aplicado

Ejemplo del widget aplicado en Viajares.es

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s