Los sitios web son diferentes a cualquier medio de comunicación que venía antes de ellos. Una de las cosas principales que diferencian a los sitios web de los formatos de medios anteriores como la impresión, la radio e incluso la televisión es el concepto del "hipervínculo".
Los hipervínculos, también conocidos comúnmente como "enlaces", son los que hacen que la web sea tan dinámica. A diferencia de una publicación impresa que puede hacer referencia a otro artículo u otro recurso, los sitios web pueden usar estos enlaces para enviar visitantes a esas otras páginas y recursos. Ningún otro medio de difusión puede hacer esto. Puede escuchar un anuncio en la radio o verlo en la televisión, pero no hay hipervínculos que puedan llevarlo a las compañías en esos anuncios de la forma en que lo hace el sitio web fácilmente. ¡Los enlaces realmente son una increíble herramienta de comunicación e interacción!
A menudo, los enlaces que se encuentran en un sitio web son contenido de texto que dirige a los visitantes a otras páginas de ese mismo sitio. La navegación de un sitio web es un ejemplo de enlaces de texto en la práctica, pero los enlaces no necesitan estar basados en texto. También puede vincular fácilmente las imágenes en su sitio web. Veamos cómo se hace esto, seguido de algunos casos en los que desearía usar hipervínculos basados en imágenes.
Cómo vincular una imagen
Lo primero que deberá hacer es colocar la imagen en su documento HTML. Un uso común de un enlace basado en imágenes es el gráfico del logotipo del sitio que luego se vincula de nuevo a la página de inicio del sitio. En nuestro código de ejemplo a continuación, el archivo que estamos utilizando es un SVG para nuestro logotipo. Esta es una buena opción ya que permitirá que nuestra imagen se amplíe para diferentes resoluciones, al mismo tiempo que mantiene la calidad de la imagen y un tamaño de archivo general pequeño.
Así es como colocarías tu imagen en el documento HTML:
Alrededor de la etiqueta de imagen, ahora agregaría el enlace de anclaje, abriendo el elemento de anclaje antes de la imagen y cerrando el ancla después de la imagen. Esto es similar a cómo se vincularía el texto, solo que en lugar de envolver las palabras que desea que sea un enlace con las etiquetas de anclaje, envuelva la imagen. En nuestro ejemplo a continuación, estamos enlazando de nuevo a la página de inicio de nuestro sitio, que es "index.html".
Cuando agregue este HTML a su página, no ponga espacios entre la etiqueta de anclaje y la etiqueta de imagen. Si lo hace, algunos navegadores agregarán pequeñas marcas al lado de la imagen, lo que se verá extraño.
La imagen del logotipo ahora también actuaría como un botón de página de inicio, que es prácticamente un estándar web en estos días. Tenga en cuenta que no incluimos ningún estilo visual, como el ancho y el alto de la imagen, en nuestro marcado HTML. Dejaremos estos estilos visuales a CSS y mantendremos una separación clara de la estructura HTML y los estilos CSS.
Una vez que llegue a CSS, los estilos que escriba para apuntar a este gráfico de logotipo podrían incluir el tamaño de la imagen, incluidos los estilos de respuesta para imágenes compatibles con múltiples dispositivos, así como cualquier imagen que desee agregar a la imagen / enlace, como bordes o CSS sombras paralelas También puede dar a su imagen o vincular un atributo de clase si necesita "ganchos" adicionales para usar con sus estilos CSS.
Casos de uso para enlaces de imágenes
Así que agregar un enlace de imagen es bastante fácil. Como acabamos de ver, todo lo que debe hacer es envolver la imagen con las etiquetas de anclaje adecuadas. Su próxima pregunta podría ser "¿cuándo haría esto en la práctica además del ejemplo de enlace del logotipo / página de inicio?"
Aquí hay algunos pensamientos:
- Imágenes en miniatura en una galería que enlazan a versiones más grandes de esas imágenes.
- Imágenes que se usan solas para representar contenido, como fotos de productos para un sitio web de comercio electrónico.
- Imágenes teaser que forman parte de otro contenido, como un artículo de blog o un comunicado de prensa, que incitan a las personas a notar que el contenido les da un área de destino para tocar o hacer clic para leer el artículo completo.
- Imágenes de iconos que se utilizan como botones para conectarse a una funcionalidad específica o páginas dentro del sitio.
- Enlaces de redes sociales que utilizan los logotipos reconocibles de los diversos sitios de redes sociales que son importantes para ese sitio o empresa.
- Imágenes utilizadas como botones para ciertas funciones, como envío de formularios (nota de mejores prácticas: desde una perspectiva de rendimiento del sitio web, los botones con el estilo puramente de CSS son una mejor opción que los botones de imagen).
Un recordatorio al usar imágenes
Las imágenes pueden jugar un papel importante en el éxito de un sitio web. Uno de los ejemplos mencionados anteriormente utiliza imágenes junto con otro contenido para llamar la atención sobre ese contenido y hacer que la gente lo lea.
Cuando utilice imágenes, debe tener en cuenta la selección de la imagen correcta para sus necesidades, esto incluye el tema y el formato correctos de la imagen, y también asegurarse de que las imágenes que utilice en su sitio web estén correctamente optimizadas para la entrega del sitio web. Esto puede parecer mucho trabajo solo para agregar imágenes, ¡pero la recompensa vale la pena! Las imágenes realmente pueden agregar mucho al éxito de un sitio.
No dude en usar imágenes apropiadas en su sitio, y vincule esas imágenes cuando sea necesario para agregar algunas interactivamente a su contenido, pero también tenga en cuenta estas mejores prácticas de imágenes y use estos gráficos / enlaces de manera correcta y responsable en su trabajo de diseño web.
