Introducción al enlace de imagen en HTML
El enlace de imagen en HTML se encuentra en casi todas las páginas, ya que nos ayudan a navegar de una página a otra en un sitio web. Una combinación popular es usar la etiqueta de anclaje HTML con la etiqueta img de HTML . Con esta combinación, podemos permitir el movimiento de usuarios de una página a otra haciendo clic en una imagen. Antes de profundizar más en este tema, primero comprendamos el funcionamiento y la representación de los elementos de anclaje e imagen individualmente y luego los combinemos para lograr una imagen vinculada.
Etiqueta de anclaje HTML
La etiqueta de anclaje HTML se utiliza para crear hipervínculos HTML a otras páginas web o contenido multimedia alojado en la web. Consulte la sintaxis a continuación para comprender cómo funcionan las etiquetas de anclaje y sus atributos básicos
¡¡Haga clic aquí!!
En el ejemplo anterior, el atributo "href" especifica la URL de la página web a la que nos gustaría redirigir al usuario mientras hace clic en el texto "¡Haga clic aquí!".
Veamos el código completo a continuación:
Salida
->
Con el ejemplo anterior, podrá hacer las siguientes observaciones
- Un enlace no visitado aparecerá subrayado y en color azul. Por ej. Este es un enlace no visitado
- Un enlace visitado aparecerá subrayado y en color morado. Por ej. Este es un enlace ya visitado
- Un enlace activo aparece subrayado y en color rojo. Por ej. Este es un enlace activo
Etiqueta de imagen HTML
Mientras navega por Internet, estoy seguro de que debe haber encontrado varias páginas web que tienen varias formas de multimedia incluidas. Especialmente las imágenes son una forma popular de multimedia que se puede encontrar en casi todas las páginas web interactivas y sitios web actuales. Comprendamos la etiqueta de la imagen y su implementación en HTML con el siguiente ejemplo:
Sintaxis
Ahora comprendamos cómo funciona cada uno de los atributos en la etiqueta img:
- src: el atributo src define la ruta del archivo de imagen que estamos intentando cargar con esta etiqueta. Puede ser un enlace a una imagen alojada en la web con el formato como example.com/images/dummy.png.webp o puede ser un archivo de imagen alojado localmente en el mismo servidor que la página web.
- alt: El atributo alt define el texto y la descripción de la imagen que nos gustaría mostrar en caso de que las imágenes no se carguen debido a la conectividad de la red o cualquier otro problema.
- Ancho y alto: el ancho y alto de ambos atributos definen el ancho y alto de la imagen que nos gustaría mostrar en la página web. De lo contrario, la imagen funcionaría de forma predeterminada con un 100% de alto y ancho.
Ahora veamos el código HTML completo requerido para cargar una imagen en una página web. Guarde la siguiente imagen con el nombre "sunset.png.webp" en una carpeta llamada "image_test" en su unidad local.
Ahora en la misma carpeta creemos un archivo HTML llamado sunset.html con el siguiente código HTML:
Ahora vaya a un navegador en su máquina y escriba la ruta del archivo .html. Mis archivos se almacenan en la unidad D, por lo que la ruta para mí sería
D: /image_test/sunset.html
Y ahora podemos ver que la página HTML representada ha cargado la imagen del atardecer en nuestro navegador. Con la ayuda de CSS y
etiqueta, también podemos mostrar texto según nuestros requisitos alrededor de la imagen. Las etiquetas ancla e img son compatibles con todos los navegadores como Google Chrome, Safari, Microsoft Edge, Firefox e Internet Explorer.
Imágenes vinculadas en HTML
Ahora que hemos entendido con ejemplos, cómo la etiqueta de anclaje y la etiqueta de imagen funcionan individualmente, ahora entendemos cómo podemos combinar las dos funcionalidades para lograr un escenario en el que nos gustaría que los usuarios fueran redirigidos a una nueva página web con el clic de una imagen . Para hacer clic en una imagen y redirigir al usuario a otra página web, simplemente necesitamos anidar la imagen en una etiqueta de anclaje. En el siguiente ejemplo, intentaremos alistar los 3 principales motores de búsqueda web utilizados en todo el mundo. En nuestra lista, mostraremos los logotipos de los 3 motores de búsqueda y al hacer clic en cualquiera de los logotipos, el usuario será redirigido a la página del motor de búsqueda correspondiente. Creemos una carpeta llamada "prueba de redireccionamiento" y en la misma carpeta guardemos las siguientes imágenes
1. Google
2. Yahoo
3. Bing
Ahora crearemos un .html con el nombre imageredirection.html en el mismo archivo. Imageredirection.html contendrá el siguiente código
Ahora necesitamos acceder a la página HTML desde el navegador, para lo cual escribiré mi ruta local "D: / redirectiontest / imageredirection.html". el navegador entonces representará el archivo HTML para generar el siguiente resultado:
->
Los usuarios podrán navegar al motor de búsqueda respectivo haciendo clic en su logotipo. A partir del ejemplo anterior, podemos observar que HTML es un lenguaje simple y flexible que nos permite combinar varias etiquetas y lograr una funcionalidad compleja como esta. La combinación de usar img y etiqueta de anclaje es una combinación popular. Con la codificación HTML adicional también podemos agregar diferentes elementos HTML como mostrar imágenes vinculadas en una lista ordenada o no ordenada usando
- o
- Atributos HTML
- Etiquetas de formato HTML
- Ventajas de HTML
- Etiquetas de imagen HTML
- Marcos HTML
- Bloques HTML
- Establecer un color de fondo en HTML con ejemplo
- Lista ordenada HTML | Tipos de atributos con sintaxis
- . La extrema flexibilidad y simplicidad que proporciona HTML con cada versión lanzada, ayuda a los diseñadores de UI y UX a diseñar páginas web interactivas e intuitivas que vemos mientras navegamos en Internet para las actividades diarias.