Os sitios web son diferentes a todos os medios de comunicación que se lles presentaron. Unha das principais cousas que configuran os sitios web ademais dos formatos multimedia anteriores como a impresión, a radio e ata a televisión é o concepto da " hiperligazón ".
As hipervínculos, tamén comúnmente coñecidas como "ligazóns", son as que fan que a web sexa tan dinámica. A diferenza dunha publicación impresa que pode referirse a outro artigo ou outro recurso, os sitios web poden usar estes enlaces para enviar aos visitantes a esas outras páxinas e recursos. Ningún outro medio de transmisión pode facelo. Podes escoitar un anuncio por radio ou verlo na televisión, pero non hai hipervínculos que che poden levar ás empresas destes anuncios de maneira que o sitio web poida facer facilmente. Os enlaces son realmente unha sorprendente ferramenta de comunicación e interacción.
Moitas veces, as ligazóns que se atopan nun sitio web son contido de texto que dirixe os visitantes a outras páxinas do mesmo sitio. A navegación dun sitio web é un exemplo de enlaces de texto na práctica, pero as ligazóns non teñen que estar baseadas en texto. Tamén pode facilmente ligar imaxes no seu sitio web. Vexamos como isto está feito, seguido por algúns casos nos que desexa usar hipervínculos baseados na imaxe.
Como ligar unha imaxe
O primeiro que terás que facer é colocar a imaxe en si no teu documento HTML . Un uso común dunha ligazón baseada en imaxes é o gráfico do logotipo do sitio que logo está ligado á páxina de inicio do sitio. No noso código de exemplo a continuación, o ficheiro que estamos a usar é un SVG para o noso logotipo. Esta é unha boa opción xa que permitirá ampliar a nosa imaxe para diferentes resolucións, mantendo a calidade da imaxe e un pequeno tamaño de arquivo global.
Vexa como poñerías a túa imaxe no documento HTML:
Ao redor da etiqueta de imaxe, agora agregaría o enlace de ancoraxe, abrindo o elemento de ancoraxe antes da imaxe e pechando a referencia despois da imaxe. Isto é semellante á forma en que ligaría o texto, só en vez de envolver as palabras que quere ser unha ligazón coas etiquetas de referencia, envolve a imaxe. No noso exemplo a continuación, estamos ligando de volta á páxina de inicio do noso sitio, que é "index.html".
Ao engadir este HTML á túa páxina, non coloque ningún espazo entre a etiqueta de ancoraxe ea etiqueta de imaxe. Se o fai, algúns navegadores engadirán pequenas garrapatas á beira da imaxe, que parecerán estrañas.
A imaxe do logotipo agora tamén serviría como botón de páxina de inicio, que é case un estándar web estes días. Teña en conta que non incluimos ningún estilo visual, como o ancho e alto da imaxe, no noso marcado HTML. Deixaremos estes estilos visuais en CSS e manteremos unha separación limpa da estrutura HTML e estilos CSS.
Unha vez que chegues a CSS, os estilos que escribes para orientar este gráfico de logotipo poden incluír o tamaño da imaxe, incluídos os estilos de resposta para imaxes amigables con varios dispositivos, así como calquera visual que queiras engadir á imaxe / ligazón, como as fronteiras ou CSS sombras caídas. Tamén podes dar a túa imaxe ou ligar un atributo de clase se necesitas "ganchos" adicionais para usar cos teus estilos CSS.
Use casos para ligazóns de imaxes
Entón, engadir unha ligazón de imaxe é moi sinxelo. Como acabamos de ver, todo o que debes facer é envolver a imaxe coas etiquetas de ancoraxe axeitadas. A súa próxima pregunta pode ser "cando faría isto na práctica, ademais do exemplo anterior da ligazón do logotipo / páxina principal?"
Aquí tes algúns pensamentos:
- Imaxes en miniatura nunha galería que se vincula a versións máis grandes destas imaxes.
- Imaxes que se usan só para representar contido, como as fotos do produto dun sitio web de comercio electrónico.
- As imaxes teaser que forman parte doutro contido, como un artigo de blog ou un comunicado de prensa, que atraen á xente a notar que o contido dálles unha área obxecto de aprendizaxe para tocar ou facer clic para ler o artigo completo.
- Icona de imaxes que se usan como botóns para conectarse a funcionalidades específicas ou páxinas dentro do sitio.
- Ligazóns de redes sociais que utilizan os logotipos recoñecibles dos distintos sitios de redes sociais que son importantes para ese sitio ou empresa.
- As imaxes usadas como botóns para determinada funcionalidade, como os envíos de formularios (nota de prácticas recomendadas: desde unha perspectiva de rendemento do sitio web, os botóns etiquetados puramente con CSS son unha opción mellor que os botóns de imaxe).
Un recordatorio ao usar imaxes
As imaxes poden desempeñar un papel importante no éxito dun sitio web. Un dos exemplos mencionados anteriormente menciona a utilización de imaxes xunto con outros contidos para chamar a atención sobre ese contido e facer que a xente lea.
Ao usar imaxes, debes ter en conta que seleccionas a imaxe correcta para as túas necesidades , isto inclúe o tema da imaxe correcta, o formato e asegurarte de que as imaxes que utilices no teu sitio estean optimizadas axeitadamente para a entrega do sitio web . Isto pode parecer moito traballo só para engadir imaxes, pero o pagamento vale a pena! As imaxes realmente poden engadir tanto ao éxito dun sitio.
Non dubide en empregar as imaxes axeitadas no seu sitio e vinte as imaxes cando sexa necesario engadir de forma interactiva ao seu contido, senón que tamén teña en conta estas mellores prácticas e use estes gráficos / ligazóns de forma correcta e responsable no seu traballo de deseño web.