Cette vidéo, de formation HTML CSS gratuite pour débutants, va vous expliquer comment créer des liens hypertextes dans vos pages HTML. Nous verrons comment mettre en place des liens internes, des liens externes. Nous verrons également comment faire des ancres pour accéder à différentes sections d’une page.
>> Les tableaux
Bonjour et bienvenue dans la suite de cette formation HTML CSS et aujourd’hui, comme cours, nous allons nous attarder sur les liens hypertextes. Alors, comme d’habitude, on va créer un nouveau fichier HTML en cliquant sur l’icône ici et je vais le nommer 03-lien.html voilà. Ensuite, je vais créer une structure de base.
Donc, comme on l’a vu, on peut faire le raccourci !entrer et puis ici, je vais mettre un titre à mon document. Donc, il s’agit des liens hypertextes. Voilà.
Ici, pareil, je vais mettre en langue française. Bon, pour l’instant, je le fais encore pour que vous preniez l’habitude, mais je ne le ferai peut-être pas à chaque vidéo. Alors, pour faire des liens, on va commencer à mettre un titre aussi.
On va mettre un titre pour présenter la page. Donc, je vous laisse deviner. Qu’est-ce qu’on met comme balise ? Eh bien, la balise H1.
C’est tout à fait ça. Les liens hypertextes. Une balise, un paragraphe.
Et donc, les liens hypertextes, on va d’abord parler de liens internes. Donc, ça va être des liens qu’on va faire qui vont accéder aux pages du site. Donc là, comme on a commencé à créer des pages 01 structure, 02 balise de base, on va justement, sur cette page 03 lien, on va faire un lien qui va pointer vers la page 02 balise de base.
Donc, consulter. On va mettre du texte. Consulter la page balise de base.
Alors, pour mettre un lien, on va mettre la balise A. A, entrée. Et là, on ouvre et on ferme notre balise. On nous précise un attribut href et c’est ici, entre guillemets, qu’on va indiquer le nom de la page.
Donc là, on va taper 02-balise-de-base.html. Donc là, je clique dessus. Il a trouvé la page. Et ici, à l’intérieur de la balise, je vais mettre mon texte.
Donc là, on a consulté la page balise de base. Je vais faire un petit affichage retour à la ligne pour que vous puissiez bien voir. Et on a créé donc notre premier lien qui va pointer vers le fichier balise de base.
Donc on va inspecter ça dans le navigateur. Je vais cliquer avec le bouton droit et je vais l’ouvrir avec Windows Live Server. Et on a bien ici notre titre, les liens hypertextes, suivi du petit paragraphe, consulter la page balise de base.
Quand je clique dessus, j’atterris bien sur ma page balise de base. Donc voilà comment créer un lien hypertexte. Rien de bien compliqué, c’est la balise A avec un attribut href et on met à l’intérieur le nom de la page.
Donc si le fichier se trouve au même niveau que la page lien, pas de problème. Si des fois on voulait faire appel à des pages qui seraient dans des dossiers, sous-dossiers, il faudrait penser à mettre ici le nom du dossier slash le nom du fichier HTML. Donc ça c’est pour les liens internes.
On peut aussi faire des liens externes, c’est-à-dire que là on va plutôt faire des liens qui vont pointer vers un site qui n’est pas le vôtre, que ce soit un partenaire ou n’importe quoi. Donc là par exemple on va faire un nouveau paragraphe. Faire une recherche.
Et ici je vais mettre ma balise A et dans Google. Là je voudrais accéder au site de Google et ici à ce niveau-là je vais mettre le lien, l’adresse complète en HTTPS https://www.google.fr donc maintenant j’enregistre et je regarde ce que ça donne au niveau de mon navigateur. Donc faire une recherche dans Google et quand je clique, j’accède bien au site de Google.
Donc ça, c’est une chose. Néanmoins pour les liens externes, je vous encourage vivement à venir ouvrir le site dans un nouvel onglet, comme ça l’internaute va rester sur votre site. Donc pour ça on va rajouter un attribut target.
Attention que je ne mette pas ça à ce niveau-là, pardon. Ici target, voilà, et ici je vais mettre blank. Voilà.
En mettant cette option target égale underscore blank, ça va m’ouvrir ma page dans un nouvel onglet. Donc là on va tester. J’ai bien ouvert le site de Google sur un nouvel onglet, et comme ça je reste quand même sur mon site.
Donc je vous encourage à faire ce genre de pratique, plutôt que de faire des liens externes et qu’après l’internaute va quitter votre site. Donc voilà, ça c’était une petite parenthèse. Par défaut dans le premier lien qu’on a fait, on a un target self.
Ici si je remplace le target self, ça va ouvrir la page dans l’onglet actuel. Donc si maintenant je remets ici le target self, et que je refais la démonstration, je vais fermer celui-là, je reste bien sur le même onglet. Donc ça c’est une propriété qui est par défaut, donc c’est pour ça qu’à ce niveau-là, dans le premier lien qu’on a fait, je ne l’ai pas précisé.
Puisque par défaut on a un target self. Par contre dès qu’on fait un lien extérieur, je vous encourage à mettre un target blanc. Voilà, comme ceci, on est sûr de rester sur le site et puis d’ouvrir le site extérieur vers un nouvel onglet.
Alors maintenant on va parler de liens qui permettent de se déplacer au sein de la même page. Alors pour ça je vais rajouter beaucoup de contenu. Donc avec une balise P, je vous rappelle qu’on peut faire l’ORM en raccourci.
Je vais rajouter encore une balise P, LOREM500, avec 500 mots, donc là j’ai des gros paragraphes. Encore une balise P, LOREM300, voilà, j’enregistre, je regarde un petit peu ce que ça donne, au niveau de Live Server, voilà. Donc l’idée c’est justement, alors derrière mes paragraphes, je vais venir ici, rajouter un titre, titre de niveau 2, et puis je vais encore rajouter les paragraphes derrière, LOREM500, voilà. Donc l’idée c’est de vouloir faire un lien, là en haut de la page, qui va venir m’amener directement au niveau de titre de niveau 2, d’accord ? Parce que là j’ai pas mal de textes, et puis là je suis obligé de scroller, et quand on a des pages qui sont assez longues, qui ont beaucoup de contenu, ça peut être intéressant des fois de mettre des petits liens en haut de la page pour accéder directement à une section à laquelle on souhaiterait faire la lecture. Vous avez déjà remarqué sur ce genre de site, où des fois on a aussi des petites icônes qui permettent de faire un retour en haut de la page, etc. Donc là c’est ce qu’on va faire.
Donc on va ici revenir au niveau de mon titre 2, et je vais lui ajouter un attribut qui s’appelle ID, égal, et je vais nommer cet attribut, on va dire raccourci par exemple. Raccourci, et maintenant que je l’ai nommé, je vais venir créer un nouveau lien, plus haut, par exemple ici, aller sur le titre 2, et puis là je vais créer un lien, je vais mettre ici le contenu de mon lien, voilà, et maintenant je souhaite accéder à ma section titre 2, et pour cela je vais simplement mettre un dièse ici, et le nom que j’ai indiqué au niveau de l’ID du titre 2. Je l’avais appelé raccourci, donc si on vérifie, j’ai bien ici un ID égal à raccourci, et je vais cliquer sur ce lien, en mettant un dièse et le nom de l’ID que j’ai mis dans mon titre. Donc j’enregistre, et on regarde si ça fonctionne bien au niveau du navigateur, donc je reviens ici, aller sur le titre 2, et quand je clique, je me mets directement au niveau de titre 2. Voilà un petit peu pour les liens, on a quand même fait un petit peu le tour de tout ça, donc des liens internes, des liens externes, et puis des liens qui permettent de nous déplacer au sein de la page, ça peut être intéressant des fois pour faire des petits sommaires, pour accéder directement aux différentes sections d’une page si elle comporte beaucoup de contenu.
Donc, écoutez, je vais vous laisser là pour ce cours, et puis on se retrouve bientôt pour une prochaine vidéo pour continuer la formation HTML CSS. À bientôt !
