imagen de enlace en HTML: cómo crear enlaces a partir de imágenes

vamos a echar un vistazo para principiantes a cómo crear enlaces de imagen en su sitio web.

veremos qué etiquetas HTML necesita usar en el código.

si nunca has hecho esto antes, ¡no te preocupes! Te guiaré a través de todo el proceso.

al final de este artículo, estará creando enlaces de imágenes en toda su página web e Internet.,

también vamos a ver algunas técnicas más avanzadas hacia el final del artículo si te sientes valiente.

toma un café, vamos a sumergirnos!

¿Cómo Crear un Hipervínculo?

para obtener enlaces en tu página de inicio necesitas crear un hipervínculo. Para hacer esto en HTML necesitas usar una etiqueta <a>. Cada etiqueta <a> tiene dos partes: la etiqueta de apertura y la de cierre.,

he Aquí un ejemplo:

<a href="..."> ...</a>

En el ejemplo anterior, se puede ver que el abrir de la etiqueta:

<a href="...">

Crea el inicio de la hipervínculo. Luego cerramos la etiqueta con:

</a>

cualquier texto que escribamos entre la etiqueta abrir y cerrar es su texto de enlace. Por Ejemplo:

<a href="..."> My Great Link</a>

Para convertir esto en un vínculo que es necesario agregar una dirección URL. Para ello añadimos la URL al atributo href., La URL puede apuntar a cualquier lugar en internet. Para este ejemplo vamos a usar la página principal de PageDart:

<a href="https://pagedart.com"> My Great Link</a>

asegúrese de incluir la URL completa con HTTPS en la parte delantera.

eso es todo lo que hay para crear un enlace de solo texto en HTML. A continuación, veamos cómo podemos agregar una imagen a una página web usando HTML.

¿cómo crear una imagen en HTML?

para agregar una imagen a su página web use una etiqueta img.,

esta etiqueta es un poco diferente de una etiqueta a en que no tiene una etiqueta de apertura y cierre.

para crear una etiqueta img debe darle a la etiqueta un archivo de origen. El uso de la etiqueta src atributo para hacer esto:

<img src="https://pagedart.com/favicon-32x32.png">

Esto le permitirá agregar una imagen a la pantalla como esta:

Ahora tenemos una imagen tenemos que convertirlo en un enlace., Para ello necesitamos añadir una etiqueta <img> dentro de las etiquetas <a> creando una imagen de enlace en HTML.

veamos un ejemplo a continuación.

imagen como enlace

para convertir una imagen en un enlace, debe agregar la etiqueta <img> dentro de la etiqueta <a>., Así que tomando nuestro ejemplo anterior, el código fuente se vería así:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

que produciría este HTML:

etiqueta dentro de una etiqueta<a>el navegador puede ver que la imagen debe ser clickable. Ha girado la imagen en un enlace!

si está utilizando WordPress, puede agregar este código HTML a su página utilizando la vista de texto en el editor de páginas.

También puede agregar texto e imágenes dentro del enlace, veamos esto.,

Imagen y Texto como un Enlace

El ejemplo anterior se mostró cómo agregar una imagen como enlace.

y si quisiéramos añadir tanto una imagen como un texto a un enlace.

Bueno, en este caso, debemos asegurarnos de que tenemos que añadir el texto antes de cerrar la etiqueta <a> marca:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

En el ejemplo anterior, hemos añadido «PageDart Casa» dentro de la etiqueta <a> etiqueta junto con el <img> etiqueta., Cuando se muestra en un navegador web en la página se parece a este:

Hay un atributo en la etiqueta <img> etiqueta que no hemos discutido y que se debe utilizar.

es el atributo alt.

los enlaces de imagen y el atributo Alt

Las imágenes en internet deben tener un atributoalt. Esta es una descripción de texto de la imagen.

los lectores de pantalla utilizan el texto alternativo para ayudar a los usuarios con discapacidad visual. Los lectores de pantalla leerán la descripción del texto cuando encuentre una imagen.,

para hacer esto agregamos un atributo alt a la etiqueta img como esta:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

ahora cuando el lector de pantalla lea esta imagen dirá «PageDart.com» en voz alta.

Es importante seguir las mejores prácticas al escribir texto alternativo de imagen.

asegúrese de pensar en la persona que está usando el lector de pantalla. Escriba su descripción de texto alternativo para ellos y describa la imagen lo mejor que pueda.

esto es todo lo que necesita para crear imágenes de enlace en HTML., Sin embargo, hay algunas técnicas más avanzadas que puede utilizar. Si te sientes valiente veremos esto a continuación.

técnica avanzada: imagen como enlace usando CSS

una técnica más avanzada es usar CSS. CSS significa hoja de estilo en cascada y le permite cambiar el aspecto de una página HTML.

con CSS puede establecer una imagen de fondo en un elemento como nuestra etiqueta <a>.,

aquí tendríamos HTML que se parece a esto:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

así que esta vez no hay nada dentro de la etiqueta <a> pero la imagen se establece usando el estilo CSS. Esto mostraría la siguiente en el navegador:

se puede usar una técnica similar con un <button> etiqueta.

técnica avanzada: usando un botón

en este ejemplo, vamos a usar la etiqueta <button> en lugar de la etiqueta <a>.,

Podemos crear la misma salida que el ejemplo anterior usando este HTML:

que crea esta salida:

Aquí estamos usando JavaScript para abrir una nueva pestaña del navegador. Enviar al usuario a la página de inicio de PageDart.

¡no tengo idea de por qué harías esto! Pero, quería mostrarte lo que es posible y cuán flexibles pueden ser HTML, CSS y JavaScript.

El último ejemplo que voy a mostrar es usando un mapa de imagen.

técnica avanzada: Mapa de imágenes

Los mapas de imágenes son imágenes individuales con áreas en las que se puede hacer clic., Han perdido popularidad a lo largo de los años, pero siguen siendo parte de la especificación HTML5. Esto significa que los navegadores como Internet Explorer, Chrome y Safari los admitirán.

los Gráficos son buenos ejemplos de Mapas de Imagen, tales como organigramas, como este:

a Continuación, para hacer de cada zona rosa un enlace que nos gustaría crear un map como esta:

Hemos añadido el atributo usemap para el img etiqueta.,

luego dentro de la etiquetamap tenemos una etiqueta area. Cada una de estas áreas crea un área en la que se puede hacer clic que actúa como un botón.

usando una imagen de enlace en HTML

hemos visto cinco formas diferentes de agregar una imagen como un enlace en su página web:

1. Una imagen como un enlace
2. Imagen y texto como un enlace
3. usando CSS para establecer una imagen como un enlace
4. usando un botón como un enlace
5. usando mapas de imágenes

todas estas pueden convertir imágenes en enlaces. Ahora debe tener la confianza para probar esto usted mismo.,

también hemos analizado la accesibilidad y cómo configurar el texto alternativo para ayudar a las personas con discapacidad visual.