Logo N
Création d'un site
ordinateur sur une table
Prêt à coder 😃
Nadège BONIN
HTML5 et CSS3

1-5 : Créez un lien hypertexte en HTML ici

Lien externe au site : appeler lieu absolu.

"‹a href="lien"›" texte ‹/a›.

on utilise la balise "‹a" suivis de l'atribut "href" qui indique le lien de la page et s'ecrit "‹a href="lien"›". Le texte qui suis est celui que vera l'utilisateur et il devra cliquer dessus pour acceder au lien, ne pas oublier à la fin "‹/a›". Exemple :pour le lien vers Visual Studio Code, ecrire : ‹a href="https://code.visualstudio.com/download› ici‹/a›, voir : ici.

Lien vers des pages internes au site :

Dans un même dossier : appeler lien relatif.

‹a href = "lien"› texte‹/a›.

la procedure est la même, sauf qu'on mets le nom du fichier qui doit être dans le même dossier, ex : "Site_viège.html" et non le lien "file:///F:/01%20Site/Mon_site/Site_vi%C3%A8rge.html", même si cela fonctionne aussi. cela donne : ‹a href="Site_vièrge.html"› Site vièrge‹/a›, comme ceci : Site vièrge.

Dans un dossier different :

Si les fichiers ne sont pas dans le même dossier, ils doivent être dans des dossiers qui sont eux même dans le même dossier parent ou enfant. Exemple pour Mon site 1-4 qui est dans un dossier (parent) "Pages_Web_Historique"qui est lui même dans le dossier (parent) "Mon site". Pour aller chercher un fichier dans un dossier enfant, il faut que le fichier soit dans un sous-dossier (enfant). Cela donne ce qui suit :

Fichier visé dans dossier parent.

Mettre deux point/ "../" pour aller chercher un fichier qui se trouve dans un dossier parent du fichier de cette page. Cela donne : ‹a href = "../page_parant_1"› page parent 1‹/a› : fichier parent1.

Mettre deux point / deux point / "../../" pour aller chercher un fichier qui se trouve dans un dossier parent de niveau encore au dessus. Mettre "../" autant de fois qu'il est necessaire pour remonter au dossier parent qui est lié le fichier visé. Exemple : ‹a href = "../../page_parant_2"› page parent 2‹/a› : fichier parent2.

Fichier visé dans dossiers enfants.

Mettre un point avant le / "./" pour aller chercher un fichier dans un sous dossier à partir du fichier de cette page (Dossier_enfant). Mettre des "/" jusqu'au dossier qui contient le fichier visé. Cela donne : ‹a href ="./Dossier_enfant/Page_enfant.html"› Page enfant‹/a› : Page enfant.

Ancre : Lien vers des endroits précis du site :

Ce type de lien s'appelle une Ancre. Voici un exemple de site où tous se situe sur la même page :

Voici differents types d'ancre :

Dans un même dossier :

Mettre "id="nom de l'ancre" à l'endroit voulu dans ce fichier. Exemple "id="titre1-5"", toujour mettre à l'interieur de la d'une balise. Ici dans le titre du cours comme ceci ‹h2 id="#titre1-5" href="" ›-----‹/h2›.

Puis créer le lien à l'endroit voulu comme ceci : ‹a href="#ancre1"› Lien vers l'ancre' :‹/a› : Lien vers l'ancre.

Dans un dossier différent.

Mettre "id="nom de l'ancre" à l'endroit voulu dans un fichier parent ou enfant. Exemple "id="ancre2"" dans le fichier "../../ficher parent2", toujour mettre à l'interieur de la d'une balise. Ecrire l'ancre comme ceci ‹li id="ancre"› Dans un dossier différent‹/li›.

Puis créer le lien à l'endroit voulu comme ici : ‹a href="../../fichier parent 2#ancre2"› Lien vers l'ancre :‹/a› : Lien vers L'ancre.

Supplement au cours : Mettre une ancre dans une autre page web.

Aller sur la page web voulu, exemple : wiki Mathieu Nebra ici. Faire un clic droit sur la page. Cliquer sur "afficher le code source de la page". Chercher une ancre déjà existante, pour cet exemple "id="toc-Enfance_et_formation"".

Puis, l'ecrire comme ceci : le lien + #l'ancre : ‹a href="https://fr.wikipedia.org/wiki/Mathieu_Nebra#toc-Enfance_et_formation"› ici‹/a›.

Lien vers Mathieu Nebra : Enfance et toc-Enfance et formation : ici.

Information complémentaire du cours.

Lien hypertexte qui ouvre un nouvel onglet : target="_blank".

Bonjour. souhaitez-vous apprendre sur OpenClassrooms? le lien s'écrit : ‹a href="https://openclassrooms.com/"target="_blank"› OpenClassrooms‹/a›.

Lien hypertexte qui ouvre une boite mail avec un nouveau message vide s'ecris :

‹a href="mailto:nomdumail@mail.com"› Nouveau mail‹/a›.

Pour que cela fonctionne il faut s'assurer d'avoir soit un logiciel qui gère le protocole "mailto", soit que sont navigateur (chrome) soit configurer pour ce protocole. Nouveau mail.

Lien hypertexte qui permet de télécharger un fichier dans le dossier de cette page web :

href="nomdufichier.extension", exemple : ‹ a href="../Images_OC/Page_d-acceuil_OC.jpg"› Image d'acceuil OC›/a›, voir lien : Image d'acceuil OC.

Page précédenteHaut de pagePage suivante