Cómo usar una imagen como enlace en HTML

HTML es un lenguaje que se utiliza en el diseño y el desarrollo web. Por el uso del único HTML, podemos hacer páginas web estáticas. La alineación y el diseño se realizan a través de CSS. Al igual que otros lenguajes de programación, también hay códigos/comandos conocidos como etiquetas. Estas etiquetas están escritas con soportes angulares.

Podemos encontrar algunos sitios web modulares incorporados interactivos que usan solo el enfoque de arrastrar y soltar, que están formados por HTML. Podemos agregar muchos elementos en el html, como texto, imágenes, videos, etc. Cada elemento tiene una etiqueta separada escrita dentro del cuerpo de la etiqueta HTML. HTML tiene muchas funciones para aplicar. Uno de los cuales es un enlace. El enlace es una característica que convierte la página actual en otra. Un enlace detrás de la imagen es el tema de hoy que se explicará aquí.

Lo esencial requerido

Hay dos herramientas básicas utilizadas para la implementación del código HTML.

• Un editor de texto
• Un navegador

Se utiliza una herramienta como herramienta de entrada, mientras que la otra actúa como software de salida. En el editor de texto, escribimos el código que se ejecutará en el otro software. Este editor actúa como una herramienta de entrada. Por otro lado, el navegador actúa como una herramienta de salida. Es una plataforma que ejecuta el código HTML escrito en el editor.

A medida que realizamos esta tarea en Windows, el editor de texto es el bloc de notas de forma predeterminada. Puedes usar sublime, notepad ++, etc. Mientras que el navegador es Internet Explorer. Pero en nuestra guía, usaremos Google Chrome y el bloc de notas, que es fácilmente accesible.

Manual HTML

Si queremos elaborar el concepto de enlace en la imagen, primero debemos comprender el funcionamiento de HTML. El cuerpo HTML se divide en dos partes. Uno es la cabeza y el segundo es el cuerpo. La parte de la cabeza está escrita primero. En esa parte, incluimos el título de la página web. Se sabe que la parte funcional es la parte del cuerpo del HTML. Porque todas las propiedades de HTML se definen aquí.

Todas las etiquetas, incluidas HTML, tienen etiquetas de apertura y cierre. El código HTML que está escrito en los blocs de notas se guarda en las extensiones de bloc de notas y del navegador. El .Extensión txt, se guarda como código, mientras que con HTML, se guarda para el navegador. El archivo del editor de texto debe guardar con la extensión HTML. Por ejemplo, enlace.html. Luego, verá que el archivo se guarda con el icono del navegador actual que está utilizando para este propósito.

…
… .

La imagen a continuación es un código de muestra de HTML. En la parte principal, hemos agregado el nombre del título de la página. Y en la parte del cuerpo, se agrega texto sin formato.

Creación de un simple hipervínculo

Es posible que haya observado los enlaces en los sitios web en forma de texto o la imagen. Estos se desarrollan utilizando los hipervínculos en el código HTML. Esta es la característica de las páginas web estáticas y dinámicas. Tiene etiquetas de apertura y cierre. se conoce como una etiqueta de anclaje. La sintaxis se da a continuación.

…

Href es para la referencia de la página. Aquí, escribimos la dirección de ese sitio web o página web específica donde queremos hacer clic en el enlace. Mientras que dentro del cuerpo de la etiqueta de anclaje, escribimos el texto al que queremos vincular. Por ejemplo, hemos usado algún texto a continuación.

https: // linuxhint.comunicarse">
Mi gran enlace

Mientras escribimos la dirección, puede ver que se subraya automáticamente y su color se cambia. Implica diferenciar entre el texto simple y el hipervínculo. Mientras que dentro del cuerpo, hemos usado una oración simple. Considere el ejemplo anterior en el estado de trabajo.

Como hemos escrito este código en el bloc de notas, ahora lo ejecutaremos para obtener la salida del navegador.

Desde la salida, puede observar que el texto que hemos agregado está subrayado, lo que muestra que es un enlace. Mientras pasamos el puntero del mouse al enlace, el puntero se convierte en el símbolo de la mano.

Etiqueta de imagen en html

La imagen es el contenido básico del HTML. Se usa una etiqueta específica. La etiqueta de la imagen es un poco diferente de otras etiquetas. Como no contiene etiquetas de apertura y cierre. La imagen se puede agregar directamente desde su sistema o en Internet también. Se menciona la fuente de la imagen. En la fuente, agrega la ubicación/dirección de la imagen, ya sea en cualquier carpeta o se coloca en cualquier sitio web.

< img src = “c:\users\USER\DESKTOP\13.png”>

Aquí, la etiqueta de imagen es . 'SRC' significa la fuente. Esta es la ruta de la imagen con la extensión del archivo.

Vea la salida a continuación.

Imagen y un enlace

Enlace un sitio web con la imagen

Debe haber encontrado sitios web, especialmente en las tiendas de sitios web o en los sitios web de compras en línea. Hay toneladas de imágenes que se abren a otra página al hacer clic. Agregamos un enlace para la imagen o vinculando dos páginas a través de un enlace. Esta página puede ser una página estática o dinámica. Necesitamos dos elementos etiqueta en ella. Uno es la etiqueta de imagen y la otra es la etiqueta de enlace.

El código de imagen se agrega dentro de la etiqueta de anclaje, ya que queremos que la imagen actúe como un enlace. A continuación se muestra el código HTML completo.

Ahora, ejecutaremos este código en Google Chrome.

A través de la imagen, no será posible explicar con precisión. Pero cuando practiques, verás que cuando pases el mouse, la imagen muestra la mano del puntero, mostrándolo como un enlace. Cuando hacemos clic en la imagen, se abrirá al sitio web, cuya dirección se menciona en la parte de referencia. Se abrirá el sitio web a continuación.

Enlace una página web estática con la imagen

Si está dispuesto a agregar la página web estática en el código, simplemente reemplace la dirección del sitio web con la página presente en su sistema.

< a href = “sample.html”>

En el navegador, verá que la página de muestra estática se abre cuya dirección se dio dentro de la etiqueta.

Atributo alt y el enlace de la imagen

Este atributo ayuda a describir algo sobre la imagen. Esto se muestra solo cuando debido a alguna razón, la imagen no se carga o su conexión a Internet podría ser lenta. Entonces, se muestra esta descripción que ayuda al lector a saber algo sobre la imagen o un sitio web.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

Esta es la etiqueta. El atributo alt se escribe dentro de la etiqueta IMG.

La salida se muestra a continuación que muestra la alternativa de texto a la imagen.

Conclusión

En este artículo, hemos utilizado las etiquetas simples de un enlace y una imagen. Además, usamos una imagen como un enlace con muchos ejemplos. Puede haber muchas formas de elaborar este concepto. Hemos mencionado algunos ejemplos fáciles en esta guía.