L’une des fonctionnalités les plus courantes que de nombreux concepteurs Web aiment ajouter à leurs pages Web est un bouton ou lien « Aller à la précédente », également appelé bouton de retour HTML, qui renvoie l’utilisateur à la dernière page Web visitée.
L’un des aspects les plus importants de toute page Web est de créer une navigation transparente et intuitive pour vos visiteurs. Lorsque vous avez des pages « internes » qui sont liées à partir de plusieurs autres pages, il peut être quelque peu difficile de deviner d’où vient le visiteur. Dans le cas où les visiteurs sont arrivés sur la page à partir d’un moteur de recherche ou d’un autre lien, il est impossible de le savoir. Cependant, en utilisant un bouton de retour HTML, vous pouvez offrir à vos visiteurs la commodité d’un lien qui les renvoie vers la page d’où ils viennent. Alors que les utilisateurs ont normalement la possibilité d’utiliser le bouton « Retour » du navigateur, ce qui ferait la même chose, fournir un lien sur votre page ajoute de la commodité et de l’intuitivité à votre site Web.
Programmation d’un bouton Retour avec HTML
Il existe différentes méthodes pour créer un bouton ou un lien qui enverra votre visiteur à la page précédente où il se trouvait. L’option que vous choisissez dépend de la façon dont vous souhaitez que le lien apparaisse, et si vous souhaitez prévoir le fait que certains utilisateurs peuvent ne pas avoir de navigateurs compatibles avec JavaScript.
Utilisation de Javascript
L’utilisation de la méthode javascript est l’une des techniques les plus populaires utilisées par de nombreux nouveaux concepteurs Web, car elle est très simple. Cependant, si vous utilisez cette approche, il est judicieux d’inclure une page liée réelle pour le navigateur au cas où le navigateur ne pourrait pas exécuter javascript. Dans un tel cas, le navigateur ignorera le code javascript, mais il retournera au lien que vous avez défini vers la variable href. Lorsque vous choisissez la page vers laquelle créer un lien, essayez de deviner d’où proviendrait l’utilisateur sur votre site avant d’arriver sur cette page. Si vous n’êtes pas sûr, vous pouvez toujours les envoyer sur la page principale de votre site Web.
Javascript: un lien texte
Cette première technique javascript fournit à l’utilisateur un lien texte qui le renverra d’une page.
Vous pouvez utiliser « history.back () » au lieu de « window.back () » – les deux fonctions fonctionnent de la même manière. Une autre technique utilisant javascript consiste à renvoyer à l’utilisateur un certain nombre de pages. La plupart des programmeurs Web renvoient au visiteur des pages « -1 », mais vous pouvez définir le nombre de pages comme vous le souhaitez.
Javascript: un bouton de formulaire
Une autre méthode utilisant javascript est de créer un « bouton formulaire » gris qui, lorsqu’on clique dessus, se comporte de la même manière que la méthode de lien décrite dans la dernière section. Il n’y a aucun avantage réel à utiliser cette technique par rapport à l’approche du lien texte. Le facteur décisif est vraiment l’esthétique – quelle option souhaitez-vous offrir à vos visiteurs pour la navigation et à quoi voulez-vous qu’elle ressemble?
Utilisation de scripts côté serveur
La technique utilisée par la plupart des concepteurs Web professionnels consiste à utiliser Server Side Includes (SSI), où ils peuvent écrire du code CGI qui est traité sur le serveur Web lui-même, ce qui évite au navigateur client d’exécuter tout code javascript. La manière dont ce code est écrit dépend de la configuration du serveur Web et du langage de script que vous utilisez. Dans tous les cas, le script côté serveur utilise une variable appelée « HTTP_REFERER ».
Exemple de script utilisant CGI:
« > Aller à la page précédente
La variable HTTP_REFERER est l’URL qui a référé le visiteur à la page Web actuelle. Si votre langage de script de choix est PHP, alors pour accéder à la variable référente et créer un lien vers la page précédente, vous devez créer un lien texte en utilisant le code suivant.
Aller à la page précédente ‘;?>
Ou un bouton de formulaire utilisant ce code:
‘;?>
Mots finaux
L’ajout de la fonctionnalité permettant de « revenir » aux pages précédentes semble être un concept très simple, mais lorsque vous essayez d’incorporer la navigation la plus simple et la plus intuitive dans votre site Web, ces méthodes d’ajout d’une telle fonctionnalité deviennent un élément indispensable de tout site Web. boîte à outils du programmeur.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
