Les sites Web ne ressemblent à aucun moyen de communication qui les a précédés. Le concept de "lien hypertexte" est l’un des principaux éléments qui distinguent les sites Web des formats médiatiques précédents tels que la presse écrite, la radio et même la télévision.
Les liens hypertexte, également appelés «liens», sont ce qui rend le Web si dynamique. Contrairement à une publication imprimée pouvant faire référence à un autre article ou à une autre ressource, les sites Web peuvent utiliser ces liens pour envoyer les visiteurs à ces autres pages et ressources. Aucun autre média de diffusion ne peut le faire. Vous pouvez écouter une publicité à la radio ou la regarder à la télévision, mais il n’existe aucun hyperlien qui puisse vous diriger facilement vers les entreprises figurant dans ces publicités. Les liens sont vraiment un formidable outil de communication et d’interaction!
Souvent, les liens qui se trouvent sur un site Web sont du contenu textuel qui dirige les visiteurs vers d'autres pages de ce même site. La navigation d'un site Web est un exemple de liens de texte dans la pratique, mais il n'est pas nécessaire que les liens soient basés sur du texte. Vous pouvez également facilement lier des images sur votre site Web. Voyons comment cela se fait, suivis de quelques cas où vous voudriez utiliser des liens hypertexte basés sur des images.
Comment lier une image
La première chose à faire est de placer l’image elle-même dans votre document HTML. Une utilisation courante d'un lien basé sur une image est le logo du site, qui est ensuite lié à la page d'accueil du site. Dans notre exemple de code ci-dessous, le fichier que nous utilisons est un fichier SVG pour notre logo. C'est un bon choix car cela permettra à notre image de s'adapter à différentes résolutions, tout en maintenant la qualité de l'image et une petite taille de fichier.
Voici comment placer votre image dans le document HTML:
Autour de la balise d'image, vous ajouteriez maintenant le lien d'ancrage, ouvrant l'élément d'ancrage avant l'image et fermant l'ancre après l'image. Ceci est similaire à la façon dont vous lieriez du texte, mais au lieu d’envelopper les mots que vous voulez lier avec les balises d’ancre, vous enroulez l’image. Dans notre exemple ci-dessous, nous renvoyons à la page d'accueil de notre site, qui est "index.html".
Lorsque vous ajoutez ce code HTML à votre page, ne placez aucun espace entre la balise d'ancrage et la balise d'image. Si vous le faites, certains navigateurs ajouteront de petites graduations à côté de l'image, ce qui semblera étrange.
L’image du logo agirait désormais également comme un bouton de page d’accueil, qui est à peu près une norme Web de nos jours. Notez que nous n'incluons aucun style visuel, tel que la largeur et la hauteur de l'image, dans notre balise HTML. Nous allons laisser ces styles visuels aux CSS et maintenir une séparation nette de la structure HTML et des styles CSS.
Une fois que vous avez accédé au CSS, les styles que vous écrivez pour cibler ce logo peuvent inclure le dimensionnement de l’image, y compris des styles réactifs pour des images conviviales pour plusieurs appareils, ainsi que tous les visuels que vous souhaitez ajouter à l’image / lien, tels que des bordures ou CSS. déposer des ombres. Vous pouvez également attribuer à votre image ou à un lien un attribut de classe si vous avez besoin de "points d'ancrage" supplémentaires à utiliser avec vos styles CSS.
Cas d'utilisation pour les liens d'image
Il est donc très facile d’ajouter un lien d’image. Comme nous venons de le voir, tout ce que vous devez faire est d’envelopper l’image avec les balises d’ancrage appropriées. Votre question suivante pourrait être "quand le ferez-vous réellement en dehors de l'exemple de lien logo / page d'accueil susmentionné?"
Voici quelques réflexions:
- Images miniatures dans une galerie qui renvoient à de plus grandes versions de ces images.
- Images utilisées seules pour représenter du contenu, telles que des photos de produits pour un site Web de commerce électronique.
- Les images de présentation faisant partie d'un autre contenu, comme un article de blog ou un communiqué de presse, incitent les internautes à remarquer que le contenu leur donne une zone cible sur laquelle appuyer ou cliquer pour lire l'article complet.
- Les images d'icônes utilisées comme boutons permettent de se connecter à des fonctionnalités ou à des pages spécifiques du site.
- Liens de médias sociaux qui utilisent les logos reconnaissables des différents sites de médias sociaux importants pour ce site ou cette entreprise.
- Les images utilisées en tant que boutons pour certaines fonctionnalités, telles que la soumission de formulaires (remarque sur les pratiques recommandées - du point de vue des performances d'un site Web, les boutons portant uniquement le code CSS constituent un meilleur choix que les boutons d'image).
Un rappel lors de l'utilisation d'images
Les images peuvent jouer un rôle important dans le succès d'un site Web. L'un des exemples donnés ci-dessus mentionnait l'utilisation d'images à côté d'un autre contenu pour attirer l'attention sur ce contenu et amener les gens à le lire.
Lorsque vous utilisez des images, vous devez être attentif au choix de la bonne image selon vos besoins. Cela inclut le sujet, le format et le format correct de l'image, et vous devez également vous assurer que les images que vous utilisez sur votre site web sont correctement optimisées pour la diffusion de votre site. Cela peut sembler beaucoup de travail juste pour ajouter des images, mais le gain en vaut la peine! Les images peuvent vraiment contribuer énormément au succès d'un site.
N'hésitez pas à utiliser les images appropriées sur votre site et reliez-les lorsque nécessaire pour en ajouter de manière interactive à votre contenu, mais tenez également compte de ces meilleures pratiques en matière d'image et utilisez ces graphiques / liens de manière correcte et responsable dans votre travail de conception Web.
