L'essentiel du HTML5

Définir les attributs de liens

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
L'attribut href permet à une balise ancre de pointer vers un autre document. Découvrez que cette balise possède également d'autres attributs importants.
07:18

Transcription

Nous avons vu sur les liens qu'il suffisait de placer une balise a avec l'attribut href pointant vers la partie du réseau sur laquelle on veut se rendre et d'avoir une partie émergée qui se trouve à l'intérieur de la balise a. On va explorer maintenant une grande partie des attributs qui peuvent être donnés à ces balises ancres pour pouvoir affiner notre précision quant aux liens que l'on va atteindre. Alors, regardez, si je bascule dans la partie du navigateur, où on voit donc la partie émergée qui sont ces moteurs de recherche exalead, dazoo, le moteur et premsgo. Il suffit que je clique sur élément pour me rendre sur ce moteur de recherche. Mais seulement, vous avez vu que j'ai perdu, j'ai quitté ma page d'origine. Alors ça peut être un choix, mais ça peut être aussi une possibilité de perdre le visiteur, ou d'égarer le visiteur s'il a navigué dans notre site pour arriver jusqu'à ce lien et qu'il clique, il s'en va, c'est perdu. La seule possiblité, c'est de revenir en arrière. Donc s'il veut ouvrir plusieurs liens, ça devient un peu compliqué. Alors pour cela, on va pouvoir avoir ici, la première chose, c'est de pouvoir indiquer un attribut qui va être la target et on va pouvoir lui donner plusieurs natures. Alors, ici, je vais volontairement donner le mot blank et je vais pouvoir venir redonner ici, le mot blank, le mot blank, le mot blank. Alors, c'est parfait, on peut donner cette terminaison là. Il n'y a pas de soucis. Mais regarder ce qui va se passer maintenant si j'enregistre et que j'ouvre une nouvelle fois la page dans ce navigateur, je l'actualise. Si je clique sur exalead, vous voyez, je viens de passer sur exalead, y a pas de soucis. Et ici, je clique sur dazoo, je viens d'ouvrir une nouvelle fenêtre. Et blank va faire que je vais pouvoir ouvrir comme cela à chaque fois, une nouvelle fenêtre. Alors c'est très bien, mais ça peut rapidement submerger le navigateur de fenêtres et d'onglets. Alors, ona va pouvoir venir modifier cet attribut target ici et au lieu d'utiliser le mot blank, on va utiliser le mot new. Alors, pour ça, je vais venir taper directement new. New, c'est une comention, j'aurais pu marque Maurice, à l'intérieur, Gaston, j'aurais pu marquer ce que je veux. L'essentiel, c'est de mettre quelque chose qui n'est pas blank et qui a un nom déterminé. Ce qui fait que maintenant, la target qui va être recherchée, c'est une target qui s'appelle new. Et donc, si j'enregistre ici, regardez la grosse différence qu'on va avoir par rapport au navigateur, quand j'actualise ma page ici, si je clique sur le moteur, il ouvre bien dans une fenêtre. Et cette fenêtre, pour lui, elle s'appelle new. Ce qui fait que maintenant quand je reviens ici et que je reclique dessus, il dit je l'ouvre dans new, ça tombe bien, j'en ai une qui s'appelle new. Je le rouvre dans celui-là. Donc la différence de blank, c'est que si j'utilise le mot clé new, je vais pouvoir ouvrir dans une nouvelle fenêtre, qui sera toujours commune. Alors, new c'est devenu une convention, c'est pas du tout une recommandation du w3c, c'est simplement une convention qui fait qu'après vous pouvez l'appeler par le nom que vous voulez. Alors, il existe d'autres attributs, qui serait self, qui serait top, qui serait une autre manière pouvoir cibler mais je ne vous conseille pas de les utiliser les autres parce qu'ils sont surtout destinés si vous travaillez sur des sites web en frameset et comme c'est quelque chose qui n'est plus recommandé depuis plusieurs années, on va pas aborder self, top, etc... On va rester sur blank et new, qui sont les deux cibles que vous aller pouvoir utiliser. Ce qui par contre maintenant est important de travailler, c'est que si je me rends sur cette page encore une fois, donc j'actualise, je vais rendre sur exalead. Si vous regardez sur exalead ici, il y a marqué recherche web exalead. C'est le titre de la page. Je pourrais venir dans le code source de la page et chercher la fameuse balise title. Et vous voyez que la balise title, ici, contient recherche, web, exalead. Et bien, cette balise title, vous allez la reporter dans votre code ici, en plaçant tout simplement un attribut title et vous mettrez exactement le texte qu'il contient. Donc, je vais le faire pour toutes ces pages. J'enregistre, je rebascule dans le navigateur. J'actualise ma page, il ne se passe strictement d'une partie visible mais quand je survole, vous voyez, ici dans la partie de la task bar, ici en bas, vous avez directement le nom du lien et en survol, ici, vous avez la balise title qui s'affiche. Alors, c'est intéressant parce que ça donne d'une part, une indication à l'utilisateur sur le type de site qu'il va atteindre au travers de ce lien. Et puis, Google, pour le référencement apprécie bien ce genre de démarche. Il existe une autre approche, ici, on peut voir, sur le site lycos, par exemple, qui plusieurs versions, française, américaine, canadienne, et c'est rai qu'on va pas toujours utiliser les mêmes mots de recherche en fonction su serveurs sur lequel on va se situer. Alors si je viens ici, j'actualise ma page et bien, entendu j'ai mes 3 liens. Mais il n'y a aucune information sur le fait qu'il s'agit de français, américain ou canadien si ce n'est simplement le mot émergé. Mais le mot émergé parle à nos yeux, à nous êtres humains, mais pas forcément aux robots et aux moteurs. Pour cela, on va pouvoir venir renseigner le hreflang et vous allez dire l'attribut hreflang dans l'encodage iso qui va bien pour définir les pays. Vous pouvez le faire sur 4 lettres s'il était nécessaire. Mais ici, de dire, je vais sur du fr, sur le d'anglais ou du canadien par rapport au type de liens. Et là, vous donnez une information très précise sur la langue du lien sur lequel vous allez pointer. Une autre possiblité va être sur ce troisièeme lien. On va aller sur une page blanche, une page 8 ici. Donc on va l'ouvrir. Et sur cette page, on a vu qu'on avait plusieurs types de possibilités de liens. Imaginons qu'on fasse un document à télécharger. Alors ici, j'ai l'attribut href, j'ai pointé simplement sur un #, qui veut dire que comme il n'y a pas d'attribut d'Id ça va recharger tout simplement la page en cours. C'est une astuce qui permet de faire un lien qui reste sur place. Donc ici, je vais faire un document à télécharger et ce document à télécharger va être peut-être la copie imprimée de la page web. Je vais pouvoir le définir par l'attribut rel, ici, qui va pouvoir venir dire, ce rel, c'est un alternate. C'est une version alternative à ce que vous êtes en train de consulter sur le web. On pourrait avoir un document à télécharger également. Et là, je me dis mais attention, j'ai pas envie que les moteurs de recherche indexent ce document à télécharger. Là, je vais pouvoir un attribut rel=nofollow pour dire, ne suis pas ce lien, ces moteurs de recherche, s'il te plait. J'aurais pu rajouter noindex éventuellement, pour dire ne vas pas indéxer ou ne vas pas suivre ce lien c'est quelque chose que je donne à la disposition de mon utilisateur mais pas forcément de mon référencement. On pourrait avoir aussi des informations contextuelles à la page sur laquelle on est. Là, l'attribut rel, on va pouvoir lui dire que c'est de l'help. Et donc, ce sont des mots clés, donc je ne peux pas les aimanter, je pouvais pas écrire le mot aide là-dedans c'est le mot help pour dire attention, moteurs, quelques vous soyez ou si vous êtes un lecteur d'écran, ici, vous vous retrouverez avec de l'aide concernant le contenu qu'on est en train de visualiser. On pourrait avoir, par exemple, le site de l'auteur et sa présentation. La présentation de l'auteur qui a écrit le contenu. Là, on pourra écrire l'attribut rel=auteur, pour dire que c'est l'auteur de la page sur le pointage qu'on va aller. Et puis enfin, on aurait pu avoir deux pages. Page 7 et page 9. On se trouve sur la page 8 ici. Donc, en fait, on s'aperçoit qu'ici, c'est la page précédente et ça, c'est la page suivante dans une série d'article. On va pouvoir utiliser l'attribut rel ici, pour dire prev et next, pour indiquer au moteur ou au navigateur que là, on va aller sur la page précédente ou la page suivante dans l'arborescence du contenu qu'on est en train de visualiser. Voilà donc des attributs très riches autour de la balise link qu'il faut prendre le temps des fois, de venir renseigner parce que c'est au moment où on a un peu ce temps-là. Si on se laisse submerger, après, reprendre tout un site et venir renseigner ces attributs là, ça peut être très chronophage.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !