Apprenez à créer des liens HTML

Créer des liens simples
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 de :

  • Créer des liens vers des pages externes et internes.
  • Utiliser l'attribut target pour ouvrir des liens dans de nouveaux onglets.
  • Comprendre l'importance de la structure des listes pour organiser des liens.
  • Intégrer des liens dans divers éléments HTML tels que des paragraphes et des images.

Cette leçon vous montre comment créer des liens simples en HTML, y compris des liens vers des pages internes et externes, et l'utilisation de l'attribut target pour ouvrir des liens dans de nouveaux onglets.

Dans cette leçon sur les liens HTML, nous vous guiderons à travers la création de liens simples en utilisant la balise <a>. Nous couvrirons:

  • Les liens vers des pages externes avec des protocoles comme HTTP et HTTPS.
  • Les liens internes pour naviguer entre différentes pages de votre propre site.
  • Comment utiliser l'attribut target pour ouvrir des liens dans de nouveaux onglets.
  • La création de liens à l'intérieur d'une liste UL avec des éléments LI.
  • La réalisation de liens sur des images.

Cette leçon est essentielle pour comprendre les bases de la navigation web et comment guider efficacement vos visiteurs à travers votre contenu en ligne.

Voir plus
Questions réponses
Pourquoi est-il important d'inclure le protocole HTTP ou HTTPS dans un lien externe?
Inclure le protocole HTTP ou HTTPS garantit que le navigateur peut localiser et accéder correctement à la ressource cible.
Comment ouvrir un lien HTML dans un nouvel onglet?
Pour ouvrir un lien dans un nouvel onglet, il faut utiliser l'attribut target avec la valeur _blank dans la balise <a>.
Quel est le rôle des éléments <strong>UL</strong> et <strong>LI</strong> dans la création de menus de navigation?
Les éléments UL (liste non ordonnée) et LI (liste d'éléments) sont utilisés pour structurer et organiser les liens dans un menu de navigation, facilitant ainsi la navigation pour les utilisateurs.
Dans cette leçon, nous allons aborder la réalisation de liens simples. Alors, comme pour les images, nous allons tout d'abord regarder notre environnement de travail. Donc j'ai ouvert le dossier dans lequel je vais travailler, j'ai un fichier liens que j'ai également ouvert ici dans notre logiciel chez Blimtext, j'ai une page qui s'appelle page 2 que je vais appeler tout à l'heure depuis cette page liens, et puis nous verrons également la création d'autres liens tels que les liens qui permettent d'aller chercher une page sur Internet, des liens qui permettent de rester en local sur notre même page par exemple. Je reviens ici et je vais créer nos liens. Il est d'usage, mais ce n'est pas obligatoire, de créer des liens à l'intérieur d'une liste UL. Ce n'est pas obligatoire, mais souvent les liens font partie de menus, et en fait un menu c'est une liste de choix. Et à partir du moment où on dit voilà c'est une liste de choix, et bien il est tout à fait légitime de les incorporer à l'intérieur d'une liste UL, c'est-à-dire que le choix au niveau de l'ordre n'a pas particulièrement d'importance, mais c'est une liste. Vous pourriez également parfaitement créer vos liens à l'intérieur d'un paragraphe ou à l'intérieur de n'importe quelle valise, puisqu'a priori un lien peut s'écrire au sein de toute valise. A l'intérieur de notre valise UL, nous allons donc incorporer des valises LI pour y placer par la suite notre lien. Donc LI, et puis fin de LI. Je vais copier-coller une fois ou deux ces différentes valises LI. A l'intérieur de cette valise LI, nous allons enfin aborder nos liens. Alors un lien s'écrit avec la valise A, de cette manière A, et puis l'attribut href. Nous écrivons le A, l'attribut href, et la fin de A. A l'intérieur de la valise, donc entre le début de A et la fin du A, et bien il y aura ce que l'internaute va voir. Par exemple, nous allons commencer par faire un lien vers le site et les formes. Je vais écrire simplement « site et les formes ». Ça, c'est ce que l'internaute va voir, et c'est le mot sur lequel il va cliquer. Maintenant, pour qu'il puisse accéder à ce site, je vais être obligé de renseigner à l'intérieur de l'attribut href, qui veut dire « hyperlink référence », et bien l'adresse réelle du site et les formes. L'adresse réelle, cela signifie que vous devez impérativement y mettre le protocole, donc « http://www.etlesformes.com ». Il est impératif d'écrire le protocole, parce qu'on pourrait avoir d'autres protocoles. Par exemple, si vous avez déjà fait de l'achat en ligne, c'est un protocole HTTPS, il existe d'autres protocoles qui permettent d'accéder à différents éléments de vos documents web. On enregistre, et puis on va tout de suite regarder ce qui se passe. J'ouvre mon dossier et je double-clic sur ma page « liens ». Alors voici, pour l'instant, des petites choses supplémentaires que je vais supprimer. J'actualise, voilà. Les petits points qui sont situés là sont dus à la liste. Pour l'instant, ça n'a pas d'importance. Le lien que je viens de créer, et donc celui-là, « site et les formes », c'est le mot qui est là. Lorsque le pointeur de la souris passe au-dessus et se transforme en petit doigt, si je clique, j'accède au site et les formes.com. Voilà. Avec mon navigateur, il est possible de faire un retour en arrière, ce qui me permet de revenir sur ma page. Alors le lien est toujours un lien qui est sous cette forme. Généralement, un lien est bleu. Pour l'instant, il est violet, mais il est violet parce que je suis déjà allé sur le site. Lorsqu'un lien a déjà été visité, il devient violet par défaut, alors qu'au début, il est bleu. Il est bleu et souligné. Ces différentes mises en forme seront modifiées grâce au style CSS dans un tuto suivant. Je vais créer d'autres liens. A, toujours notre petit href, égale guillemets guillemets pour l'instant, et puis fin de A. Voilà, ça, c'est le lien complet. Je vais, à présent, écrire ce même lien, mais qui va être ouvert dans une nouvelle fenêtre du navigateur. Je vais simplement recopier ça. Et pour cela, je vais ajouter un attribut qui s'appelle target. Target, guillemets guillemets parce que c'est un attribut, underscore, blanc. Et cela permettra d'ouvrir le site Elephone.com dans une nouvelle fenêtre. Pour ceux qui ont déjà étudié partiellement le HTML ou qui ont déjà regardé sur Internet, vous allez pouvoir voir, parfois, que l'attribut target est interdit. Il est effectivement interdit dans la spécification XHTML. Ici, nous sommes en HTML5. Nous avons choisi un doctype HTML5. Donc, l'attribut target est de nouveau autorisé. Donc, j'enregistre et je vais regarder le comportement. Ah, je n'ai pas écrit Eleform ici, donc c'est normal que je n'ai rien. Eleform dans une fenêtre. Voilà, je clique et regardez bien ce qui va se passer ici au niveau de l'onglet. Un nouvel onglet apparaît, donc on est dans une nouvelle fenêtre, ce qui permet d'avoir également notre site ici. C'est tellement important parce que, imaginez que vous soyez sur votre site Internet, vous choisissez un accès vers le site Eleform, par exemple. Dans le premier cas, le site Eleform remplace votre site. Et du coup, l'internaute, s'il n'utilise pas ce bouton-là, n'a plus accès à votre site. Alors que là, il peut naviguer entre les deux onglets. Donc, c'est un dispositif assez intéressant. Troisième lien que nous allons étudier, il s'agit du lien qui va permettre d'ouvrir notre fameuse page 2. Donc A, Href, et puis entre le début de A et la fin de A, j'écris lien vers la page 2. Alors ici, ça va être très simple, puisque, je vous remonte la configuration, la page 2 est située à côté de la page lien. Il suffit simplement d'écrire page 2, sans oublier l'extension, parce que, comme pour les images, cela est très important. Nous n'allons pas le regarder, nous regarderons l'ensemble tout à l'heure. Je vais créer un nouvel élit pour faire un lien qui, pour l'instant, ne va pas vous sembler extraordinaire, mais qui va permettre de rester sur la page. Donc A, Href. Ce lien est assez intéressant lorsque nous allons écrire, par la suite, dans d'autres leçons, bien plus tard, du script en JavaScript ou en jQuery. Donc pour rester sur la page, on écrit un dièse. Mais nous le verrons également dans un futur assez proche, puisque quand nous allons créer des liens qu'on appelle encres, nous allons utiliser également ce petit signe dièse. Donc là, il ne se passera rien, mais nous allons quand même créer un lien. Enfin, pour terminer, nous allons créer un lien sur une image. Eli, et puis là, toujours notre balise A. Mais cette fois-ci, à l'intérieur de A, au lieu d'écrire un texte, nous allons mettre une image. Alors, notre image est située dans le dossier images. Je mets un slash, et elle est nommée carré.jpg. Voilà, j'enregistre, et puis là, il faudrait mettre, effectivement, un attribut de description que je ne connais pas. Bien, nous allons regarder l'ensemble. J'actualise. Nous avons donc nos petits liens qui sont en bleu, parce que pour l'instant, ceux-là n'ont pas été visités. Je clique, page 2, je suis bien sur la page 2. Alors, nous pourrions rouvrir notre page 2 pour pouvoir de nouveau reculer. C'est ce que nous ferons dans un dernier temps. Lien pour rester sur la page. Voilà, il ne s'est rien passé, nous sommes bien restés sur la page. Et enfin, lien sur l'image. Vous voyez, l'aspect du curseur change, et nous pourrions cliquer. Alors, ce lien fonctionnerait à condition de lui ajouter ici un véritable lien. Un véritable lien qui pourrait être, par exemple, Google, ou par exemple, le site sur les transports de Paris, ou tout simplement un lien comme nous l'avons écrit sur LFORM. Voilà, nous avons ici un véritable lien. Pour terminer, nous allons ouvrir notre page 2. Et à l'intérieur de notre page 2, nous allons créer un lien qui est dans un li, href, et qui pointe vers notre page lien HTML. On actualise, lien vers la page 2, et nous avons un lien. On actualise, lien vers la page 2, je reclique, et je reviens bien sur le lien vers la page 2. Voilà, nous avons donc vu ici les principes de base de la construction de site. Avec ce simple principe, vous allez pouvoir réaliser déjà de nombreuses pages, puisqu'à présent, vous savez faire des liens internes entre pages d'un même dossier. C'est la majorité des utilisations, mais également des pages extérieures, comme pour le site et les formes. On peut créer des liens sur des textes et sur des images, ce qui représente 99% des liens que l'on réalise sur le net.
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