Maîtriser les Liens Ancrés en HTML

Créer des liens "ancres"
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Apprendre à créer des liens ancrés en HTML
  • Améliorer la navigation interne d'une page web
  • Comprendre l'utilisation des attributs ID pour cibler des éléments spécifiques

Cette leçon vous montrera comment créer des liens ancrés en HTML pour une navigation fluide au sein de la même page.

Dans cette leçon, nous explorerons les liens ancrés, aussi appelés liens avec des ancres, qui permettent de naviguer au sein de la même page HTML. Nous commencerons par illustrer la structure de la page avec cinq paragraphes distincts, chacun identifié par un attribut ID unique. Nous créerons ensuite un menu simple utilisant des balises HTML telles que <ul> et <li> pour lister des liens vers ces paragraphes.

En cliquant sur ces liens, vous serez automatiquement dirigé vers la section correspondante de la page, améliorant ainsi l'expérience utilisateur. Nous couvrirons également la création de liens permettant de remonter en haut de la page en utilisant le même principe.

Cette technique est particulièrement utile pour les pages longues ou les documents bien structurés où une navigation rapide entre les sections est nécessaire. À la fin de cette leçon, vous serez capable de créer des liens ancrés pour améliorer la navigation interne de vos pages HTML.

Voir plus
Questions réponses
Quels sont les avantages des liens ancrés ?
Les liens ancrés permettent une navigation rapide au sein d'une même page, améliorant l'expérience utilisateur et facilitant l'accès à différentes sections sans recharger la page.
Quel attribut HTML est utilisé pour identifier une section cible ?
L'attribut ID est utilisé pour identifier une section cible, permettant de cibler des éléments uniques dans une page HTML.
Que fait le signe dièse (#) dans un lien ancré ?
Le signe dièse (#) indique au navigateur que le lien est destiné à une section de la même page et doit être suivi par l'ID de la section cible.
Nous allons à présent voir un autre type de lien qui s'appelle les liens avec des ancles ou les liens ancrés. Alors pour éviter d'alourdir trop la longueur de notre tuto, j'ai déjà commencé à préparer notre page. Donc la page qui est visuellement ci-dessous est constituée de 5 parties, 5 paragraphes. Donc nous avons un premier paragraphe avec une image, je vais vous la montrer dans quelques instants sur le navigateur, donc une image du texte latin. Un autre paragraphe avec de nouveau une image du texte latin, troisième paragraphe, quatrième et cinquième. Donc toute la structure vous est parfaitement connue. Donc j'enregistre et nous allons la regarder déjà dans un premier temps. Voici notre page dans un navigateur. Donc l'intérêt de cette page est qu'elle est relativement longue, relativement haute. Si vous essayez avec d'autres exemples que celui que je vous propose, essayez d'avoir une page qui a un ascenseur. Autrement, d'abord l'encre n'a pas d'intérêt et ensuite ça ne fonctionnerait pas. L'encre a un intérêt, c'est qu'on va pouvoir cliquer sur un lien qu'on va placer en haut et automatiquement la page ira se situer à l'endroit qui a été ciblé. Bien, nous allons maintenant créer notre petit menu, finalement tout simple. Alors comme d'habitude, nous allons l'écrire dans notre fameuse balise ul, mais encore une fois, ce n'est pas obligatoire. Et puis dli, je vais commencer par le premier, puis après je vais faire des copier-coller parce que ce sera pratiquement toujours la même chose. Donc li, un a avec notre fameux href. Donc nous allons créer un lien vers la première image, ce lien ne va peut-être pas fonctionner très bien du fait que tout simplement cette première image, ce premier paragraphe est situé tout en haut et donc il n'y aura pas forcément besoin d'y accéder puisqu'il sera normalement visible depuis n'importe quelle fenêtre de navigateur quelle que soit sa hauteur. Alors, peu importe, on va écrire notre petit lien, lien vers paragraphe 1. A l'intérieur de ce lien, je vais aller cibler ce paragraphe. Pour cibler ce paragraphe, il doit porter un nom, autrement il est très difficile, en tout cas dans l'état actuel de nos connaissances, d'aller le chercher. P, et je vais ajouter un attribut que nous n'avons pas encore abordé, mais que nous avons vu dans toute première leçon, c'est l'attribut id qui veut dire identifiant. Alors je vais lui donner un nom, tout simplement on va lui donner P1, ça, ce paragraphe, porte le nom P1. Pour aller cibler avec le href ce P1, on pourrait tout simplement écrire P1, mais ça ne suffit pas. Il faut dire également, attention, il faut rester sur la page et va chercher l'élément qui s'appelle P1. Rester sur la page, nous l'avons vu dans une leçon précédente, il faut incorporer le signe dièse. Ainsi, on lui dit, reste sur la page et va chercher quelque chose qui s'appelle P1. Et ainsi de suite. Nous allons pouvoir de cette manière, travailler la chose avec des images ou bien avec des textes comme je viens de le faire. Pour le deuxième exemple, je vais travailler avec une image, tout bêtement, je vais aller chercher cette image-là. Donc on aura l'image située en haut et l'image située en dessous. Voilà, donc ça c'est l'image qui va apparaître. A ce moment-là, ce paragraphe-là, il ne s'appellera plus P1 mais id égale P2. Et là-haut, dièse P2. J'enregistre et nous allons tout de suite voir ce qui se passe. Voilà, tout en haut, nous avons notre petit menu qui est symbolisé avec ces deux petits points finalement. Paragraphe P1, hop, voilà. Le paragraphe P1 qui est bien celui-là, qui commence par pélantesque, c'est bien celui-ci. Je remonte là-haut et puis là, hop, le paragraphe P2 arrive tout en haut. Alors ça, c'est un comportement assez intéressant. Lorsqu'on clique sur un élément quelconque, l'élément ciblé apparaît tout en haut de la page. Alors vous allez voir dans quelques instants que ce comportement n'est pas toujours le même. Pour la suite, je vais simplement faire des textes. Voilà, tout simplement copier-coller. Donc ça, c'est le paragraphe 3, le 4, le 5 et puis là, je prévois d'écrire P3, P4 et P5. Donc là, nous avons notre menu. Je n'oublie pas de leur donner un identifiant, id égale P3, id égale P4 et P5. Enregistrons et regardons parce que là, finalement, ça fonctionne même si on est allé très vite. Tout fonctionne. Voici, donc nous avons bien notre petit menu. Alors effectivement, pour l'instant, la mise en forme n'est pas extraordinaire. Nous verrons ça avec les CSS. Paragraphe 2, on l'a vu, ça marche. Le 3, ça fonctionne à peu près. Le 4, il a déjà un petit problème. Quant au 5, également. Alors, si on a un problème sur le 4 et le 5, c'est parce qu'en fait, dans la partie inférieure de notre page, il n'y a plus rien. Donc, il est impossible au niveau de la page HTML de remonter cet élément jusqu'en haut puisqu'il n'y a plus de surface, on va dire, qui lui permet d'aller suffisamment haut. Donc, faites bien attention à ça. Ce n'est pas très grave, mais c'est un comportement qui peut paraître parfois un peu bizarre. Alors maintenant, on va terminer cet exercice en faisant un tout petit lien et puis à la limite, on va le recopier simplement, qui nous permettra de remonter. Voilà, on est là, sur le paragraphe 3. Et maintenant, on aimerait bien cliquer sur un petit lien qui va se situer là pour remonter tout en haut de la page. Je vais le mettre directement sur le paragraphe 3, donc à l'intérieur ou à l'extérieur. C'est un petit peu comme on veut, je vais le mettre à l'extérieur par exemple. Je pourrais faire de nouveau un paragraphe ou simplement un petit lien tout bête à href. Et à ce moment-là, je ne veux pas cibler un paragraphe, mais je vais cibler une autre zone que l'on va appeler haut. Par exemple, dièse, haut, je vais lui dire, reste sur la page et trouve-moi quelque chose qui s'appelle haut. On va le mettre retour. Et cette partie haute, eh bien, on va la mettre ici. Alors là, on peut mettre une balise, soit un A, on peut mettre un P, on peut mettre différentes balises. Moi, à la limite, je me dis, qu'est-ce qui est le plus haut dans la page ? C'est la balise body. Donc, donnons-lui également un nom qui s'appelle haut, tout simplement. Voilà. Donc, on est là, dièse, haut, il va remonter là-haut, directement, dans la partie qui s'appelle haut. Si vous ne souhaitez pas mettre de balise à l'intérieur de body, vous pouvez également mettre un paragraphe, mais dans notre cas présent, le paragraphe incorporerait une marge maladroite qui va nous embêter, sachant que nous n'avons pas encore travaillé les CSS. J'enregistre. Et pendant que j'y suis, je vais copier et coller partout, puisqu'en fait, il s'agit toujours du même lien. A chaque fois, on veut remonter là-haut. Essayons. Je fais directement le paragraphe 3, retour, je remonte bien là-haut. Essayons avec le paragraphe 1, retour, on retourne bien là-haut. Donc, nous avons ici vu le principe du lien ancré. Il n'y a rien de choses supplémentaires. Vous allez pouvoir naviguer à l'intérieur d'une même page, sur d'autres tutos, dans d'autres formations. Vous pourrez voir comment on fait ces mêmes liens ancrés, mais avec un passage non pas sec, comme ce que nous avons le plaisir de voir là, mais un passage en douceur, en transition, ce qui est nettement plus intéressant et nettement plus Web 2.0, par exemple.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5