Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Créer les liens et les ancres

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une des premières fonctionnalités du web qui a contribué à son essor est la balise ancre. Cette balise permet de relier une page à une autre, quel que soit son emplacement sur le réseau, et avec une grande précision sur l'emplacement à atteindre.
06:00

Transcription

Une des première révolution qui a fait que le web est devenu le web, c'est ce qu'on appelle les hyperliens. C'est à dire la relation qu'on peut mettre avec un clic entre deux pages. Avant on était dans un autre principe qui était le gofer, qui nétait pas le http, et qui donc permettait d'être dans des piles. Il fallait monter, descendre des piles, changer de pile, etc... Pour pouvoir lier des contenus entre eux. Ici, aujourd'hui, c'est très simple. Je vais pouvoir depuis cette page 1, ici, créer un lien qui s'appellerait page 2 et je souhaiterais par exemple, en cliquant sur ce mot page 2, passer sur cette page, qui serait le contenu de la page 2. Alors, on va le voir, c'est très simple, il suffit de venir placer une balise a, avec l'attribut href qui pointe vers la page où on décide d'aller. Pour l'instant on va faire très simple, on va dire que les deux pages sont au même niveau dans l'arborescence du site. Donc, il suffit de créer une balise a avant, une balise fermante a après le mot que l'on souhaite faire devenir un lien. Et puis on place un attribut href ici, tout simplement, pour hyperlink référence. Et on pointe vers le nom de fichier de la page en question. Si j'enregistre cette page là, je bascule dans un navigateur pour venir tester. J'actualise ma page, bien-sûr, et on voit qu'automatiquement le mot page 2 est devenu un lien. Et si je clique sur ce lien, je me rends sur la page 2 tout simplement. Ici, c'est très bien, on va pouvoir créer, on s'aperçoit, entourer l'élément que l'on souhaite faire devenir un lien par la balise a href. Ça pourrait être une image, ça pourrait être tout type de contenu, et depuis html 5, ça peut être même du contenu en bloc. C'est à dire, ici, je vais avoir une balise div, qui contient un h3 et un p, tout simplement. Je vais mettre autour de ces 2 balises h3 et p, une balise a. Ça aurait très bien pu être autour de la balise div, ça aurait pu être autour de tout le contenu de la balise body. Donc, ici, on va pouvoir faire exactement le même lien. Et si j'enregistre et que j'actualise ma page dans le navigateur, si je reviens en arrière sur la page 1, j'actualise. Vous voyez bien qu'ici, j'ai toute une partie qui est également alors ici en mauve maintenant, puisque j'ai déjà visité la page, ici. Il me faudrait vider le cache de ce navigateur, réactualiser ma page, pour être sûr, cache cleared, je visualise. Et là, quand je recharge ma page, tous les liens devraient être bleus. Alors là, ils ne sont pas passé en bleu parce que je ne vois pas l'interaction avec mais voilà, le lien a déjà été visité. et apparemment, quand je clique, on voit bien qu'on peut se rendre également sur la page 2. Bien entendu, n'importe où je cliquerai, puisque c'est tout englobé ici, et donc, c'est nimporte où je vais cliquer. Je vais pouvoir naviguer sur la page 2. Alors maintenant, focalisons nous sur cette page 2, et gérons plusieurs liens maintenant, pour voir plusieurs approches qu'on peut avoir sur le terme de lien. Alors ce que je vous propose de faire, c'est de faire un élément de liste. Vous avez vu, tout à l'heure on avait vu les listes Ici, je vais une unordoned list. Et je vais mettre comme premier élément de liste, page 1 pour renvoyer le retour. Et je vais mettre tout simplement un a href autour de ce mot page 1. Et puis, je vais pointer vers la page, cette fois-ci, 01-1, qui était la page de départ au départ. Alors, on pourrait faire ça. Et je peux rajouter autant d'éléments de liste que j'aimerais à cette barre d'éléments de menu, d'éléments de liens. Et ici, je pourrais dire, je voudrais aller sur puce et média. Et puce et média ne se trouve pas du tout sur ce serveur. Ils se trouvent sur un autre serveur. Et donc, je vais pouvoir taper ici, http://www.puce-et-media.com pour pouvoir aller sur ce serveur et faire un lien vers puce et media. Ce que je vais faire, c'est enregistrer cette page-là. Je vais basculer dans le navigateur. Je vais actualiser ma page. Vous voyez que les deux liens sont apparus. Alors, bien entendu, si je navigue sur la page 1, je retourne. Page 2, je reviens. Et ici maintenant, sur puce et media, je vais pouvoir ouvrir cette nouvelle page. Ici, puce et média. Et vous avez vu que j'ai quitté la page du site sur lequel j'étais pour aller sur puce et média. Alors on reviendra plus tard, dans une autre étape, sur toutes les alternatives d'attributs que je peux avoir pour pouvoir mieux diriger mes liens. Continuons à explorer les liens. On a vu que donc, on avait des liens qui pouvaient pointer à l'interne sur le site, sur les pages nouvelles. On avait des liens qui pouvaient pointer sur les sites extérieurs. Et ici, regardez, dans ce contenu, j'ai beaucoup d'informations sous forme de paragraphes. Et chaque fois, j'ai un identifiant, à chacun de ces paragraphes, qui contient, alors là, c'est sur une balise strong. Ça aurait pu être sur la balise p également. Donc peu importe, j'ai des identifiants qui sont en fait, le début de ces éléments écrits en gras. Donc si je regarde ici, sur la partie du navigateur, voilà, j'ai identifié ça : Nam sequi, cupiditate et etc, etc... Je vais pouvoir venir dans ma page, ici, et créer autant de lien que je veux mais cette fois-ci, dans le href, je vais mettre un #, je ne mettrais ni http, ni un autre caractère. Je mettrais # et je mettrais le nom de l'identifiant. Alors là, c'est vrai que ce sont des identifiants un peu particuliers mais vous avez compris le principe. Et je vais le faire autant de fois que je vais avoir de contenu à pouvoir pointer sous forme d'identifiants. Une fois que c'est terminé, j'enregistre. Je bascule dans le navigateur de test. J'actualise la page. Bien entendu, on a tous ces liens nouveaux qui sont apparus. Et regardez, si je clique sur ipsam, je vais faire apparaître ipsam. C'est vrai que je ne peux pas aller jusqu'en haut, puisqu'il n'y a pas de contenu sur la partie basse de ma page et ma page ne peut pas se dérouler. Mais regarder si je clique sur simplement Nam sequi cupiditate, je vais venir la faire afficher ici, au départ. Donc on appelle ça des ancres ciblées. Je vais pouvoir par simplement l'url, ajouter à la fin de l'url, un # et l'identifiant de la balise que je souhaite cibler. Et automatiquement, cette page sera chargée. Plus, le navigateur va venir afficher dans la partie haut gauche, directement l'identifiant souhaité. Donc, trois formes de liens possibles. Soit des liens en interne, sur le propre site, soit des liens externes, soit des liens sur des parties particulières d'un contenu de la page qui a été ciblée.

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 !