From 479878b2ec5d55c7708d41d133b1fdc6d0f4eea7 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 13 Oct 2024 22:06:23 +0200 Subject: [PATCH] Update and translate images --- .../web_mechanics/what_is_a_url/index.md | 178 ++++++++---------- .../what_is_a_url/mdn-url-all.png | Bin 0 -> 65832 bytes .../what_is_a_url/mdn-url-anchor@x2.png | Bin 0 -> 52671 bytes .../what_is_a_url/mdn-url-authority.png | Bin 0 -> 69957 bytes .../what_is_a_url/mdn-url-parameters@x2.png | Bin 0 -> 61513 bytes .../what_is_a_url/mdn-url-path@x2.png | Bin 0 -> 62924 bytes .../mdn-url-protocol@x2_update.png | Bin 0 -> 52761 bytes 7 files changed, 77 insertions(+), 101 deletions(-) create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-all.png create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-anchor@x2.png create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-authority.png create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-parameters@x2.png create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-path@x2.png create mode 100644 files/fr/learn/common_questions/web_mechanics/what_is_a_url/mdn-url-protocol@x2_update.png diff --git a/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md index c339eaf01760fb..420c2852383ee0 100644 --- a/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md +++ b/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md @@ -1,172 +1,148 @@ --- -title: Comprendre les URL et leur structure +title: Qu'est-ce qu'une URL ? slug: Learn/Common_questions/Web_mechanics/What_is_a_URL +l10n: + sourceCommit: 803a7a460338dab4900fd44cf7ab569e3bf5799a --- {{QuicklinksWithSubPages("Learn/Common_questions")}} -Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôle et leur structure. +Cet article aborde les Uniform Resource Locators (URL) (qu'on peut traduire en français par « localisateurs uniformes de ressources »), et explique leur rôle et leur structure. - +
- +
Prérequis : - Vous devez au préalable savoir - comment fonctionne Internet, - ce qu'est une serveur web - et - les concepts sous-jacents aux liens sur le Web. + Comprendre le fonctionnement général d'Internet, ce qu'est un serveur web, et les concepts derrière les liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.Apprendre ce qu'est une URL et comprendre son fonctionnement sur le Web.
-Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web. +## Résumé -**URL** signifie _Uniform Resource Locator_ (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée. +Une **URL** (Uniform Resource Locator) correspond à l'adresse d'une ressource unique sur Internet. Il s'agit d'un des mécanismes principaux utilisés par [les navigateurs](/fr/docs/Glossary/Browser) pour récupérer des informations publiées, telles que des pages HTML, des documents CSS, des images, etc. -## Pédagogie active +En théorie, chaque URL valide pointe vers une ressource unique. En pratique, il existe certaines exceptions, notamment quand une URL pointe vers une ressource qui n'existe plus ou qui a été déplacée. Comme une ressource représentée par une URL et l'URL même sont gérées par le serveur web, c'est au gestionnaire du serveur web de gérer correctement la ressource et l'URL correspondante. -_Il n'y a pour le moment pas d'élément de pédagogie active. [N'hésitez pas à contribuer](/fr/docs/MDN/Débuter_sur_MDN)._ +## Fondamentaux : anatomie d'une URL -## Aller plus loin +Voici quelques exemples d'URL : -### Les bases : l'anatomie d'une URL - -Voici quelques exemples d'URL : - -``` +```plain https://developer.mozilla.org -https://developer.mozilla.org/fr/docs/Apprendre/ +https://developer.mozilla.org/fr/docs/Learn/ https://developer.mozilla.org/fr/search?q=URL ``` -Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML). +Chacune de ces URL peut être saisie dans la barre d'adresse d'un navigateur pour lui indiquer de charger la ressource associée. Dans ces trois exemples, il s'agit d'une page web. -Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL : - -``` -http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument -``` +Une URL se compose de différentes parties, certaines sont obligatoires tandis que d'autres sont optionnelles. Les parties les plus importantes sont mise en évidence dans l'illustration suivante et les sections ci-après décrivent en détails ces composantes : -- ![Protocol](protocole_1.png) - - : `http://` correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme `mailto:` (qui permet d'ouvrir un client de messagerie électronique) ou `ftp:` qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles. -- ![Domaine Name](nom_de_domaine2.png) - - : `www.exemple.com` correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web). -- ![Port](port_3.png) - - : `:80` correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer. -- ![Path to the file](chemin_4.png) - - : `/chemin/vers/monfichier.html` est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ». -- ![Parameters](parametres_5.png) - - : `?clé1=valeur1&clé2=valeur2` sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur. -- ![Anchor](ancre_6.png) - - : `#QuelquePartDansLeDocument` correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête. +![Une URL complète](mdn-url-all.png) > [!NOTE] -> Il existe [d'autres fragments et d'autres règles](http://en.wikipedia.org/wiki/Uniform_Resource_Locator) pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles. - -On peut comparer les URL avec les adresses postales : le _protocole_ représente le service postal qu'on souhaite utiliser, le _nom de domaine_ correspond à la ville et le _port_ au code postal, le _chemin_ indique le bâtiment où la lettre doit être acheminée et les _paramètres_ pourraient indique le numéro de l'appartement, enfin l'_ancre_ désigne la personne à laquelle la lettre est adressée. +> On peut voir une analogie entre une URL et une adresse postale classique : _le schéma_ s'apparente le type de service postal à utiliser, _le nom de domaine_ s'apparente la ville, _le port_ s'apparente le code postal, et _le chemin_ le bâtiment où on souhaite envoyer le courrier. _Les paramètres_ représentent des informations complémentaires, comme le numéro d'appartement dans le bâtiment. Enfin, _l'ancre_ s'apparente à la personne à laquelle le courrier s'adresse. -### Comment utiliser les URL +> [!NOTE] +> Il existe [d'autres règles et composantes](https://fr.wikipedia.org/wiki/Uniform_Resource_Locator) pour les URL, mais qui ne concernent pas le Web. Ne vous en souciez pas pour le moment, vous n'en aurez pas besoin pour savoir comment construire et utiliser des URL fonctionnelles. -N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout ! +## Schéma -Le langage {{Glossary("HTML")}} — [que nous verrons par la suite](/fr/docs/Learn/HTML/HTML_tags) — permet de tirer parti des URL : +![Le schéma](mdn-url-protocol@x2_update.png) -- en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ; -- en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ; -- en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ; -- en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}. +_Le schéma_ est la première partie d'une URL et indique le protocole que le navigateur doit utiliser afin de requêter la ressource (un [protocole](/fr/docs/Glossary/Protocol) est un ensemble de méthodes pour échanger ou transférrer des données au sein d'un réseau d'ordinateurs. Pour les sites web, on utilise généralement le protocole HTTPS ou HTTP (une version non sécurisée). Pour accéder à une page web, il faut utiliser l'un de ces protocoles. Toutefois, les navigateurs gèrent également d'autres schéma comme `mailto:` (pour ouvrir un client de courrier électronique), ne soyez donc pas surpris de croiser d'autres protocoles. -D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive. +## Autorité -### Les URL absolues et les URL relatives +![L'autorité](mdn-url-authority.png) -L'URL que nous avons disséquée avant est une URL _absolue_ et il existe également des URL _relatives_. Expliquons ici cette différence. +Ensuite, on trouve _l'autorité_, séparée du schéma par les caractères `://`. Si elle est présente, l'autorité inclut _le domaine_ (par exemple `www.example.com`) et _le port_ (`80`), séparés par un double-point : -Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires. +- Le domaine indique le serveur web auquel s'adresse la requête. Il s'agit généralement [d'un nom de domaine](/fr/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name), mais on peut aussi trouver [une adresse IP](/fr/docs/Glossary/IP_Address) (ce qui est plus rare, car moins pratique). +- Le port indique la « porte » technique utilisée pour accéder aux ressources sur le serveur web. Cette information est généralement omise si le serveur web utilise les ports standard du protocole HTTP (80 pour HTTP, et 443 pour HTTPS) pour permettre l'accès aux ressources. Si le port utilisé n'est pas standard, il doit nécessairement être précisé. -Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole `"/`", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant. +> [!NOTE] +> Le séparateur entre le schéma et l'autorité est `://`. Le double-point sépare le schéma de la partie suivante de l'URL, tandis que `//` indique que ce qui suit est l'autorité. +> +> Voici un exemple d'URL qui n'utilise pas d'autorité : `mailto:tototruc@example.com` pour le courrier électronique. Elle contient un schéma, mais pas d'autorité. Aussi, les deux-points ne sont pas suivis de deux barres obliques et servent uniquement de délimiteur entre le schéma et l'adresse électronique. -Prenons quelques exemples concrets pour illustrer le concept. +## Le chemin vers la ressource -#### Exemples d'URL absolues +![Le chemin vers le fichier](mdn-url-path@x2.png) -- URL complète +`/chemin/vers/le/fichier.html` est le chemin de la ressource vers le serveur web. Aux débuts du Web, un tel chemin correspondait généralement à l'emplacement physique du fichier sur le serveur web. De nos jours, il s'agit plutôt d'une abstraction gérée par les serveurs web et qui ne correspond pas nécessairement à un emplacement physique sur le système de fichiers du serveur. - - : Exemple : +## Les paramètres - ``` - https://developer.mozilla.org/fr/docs/Apprendre - ``` +![Les paramètres](mdn-url-parameters@x2.png) -- Protocole implicite +`?clef1=valeur1&clef2=valeur2` sont des paramètres supplémentaires fournis au serveur web. Ces paramètres prennent la forme d'une liste de paires de clef/valeur, chacune séparée par une esperluette (`&`). Le serveur web peut utiliser ces paramètres pour effectuer des traitements supplémentaires avant de renvoyer la ressource. Chaque serveur web applique ses propres règles pour la gestion des paramètres, et la seule façon fiable de déterminer si un serveur web donné gère des paramètres consiste à demander au propriétaire du serveur. - - : Exemple : +## L'ancre - ``` - //developer.mozilla.org/fr/docs/Apprendre - ``` +![L'ancre](mdn-url-anchor@x2.png) - Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL. +`#QuelquePartDansLeDocument` est une ancre vers un emplacement au sein de la ressource. Une ancre représente en quelque sorte un marque-page au sein de la ressource, et qui indique au navigateur d'afficher le contenu de la ressource situé au niveau de ce marque-page. Pour un document HTML, par exemple, le navigateur fera défiler le document jusqu'à l'ancre. Pour un document vidéo ou audio, le navigateur tentera d'aller au moment précisé par l'ancre. Il faut noter que la partie située après le croisillon **#**, également appelée **identificateur de fragment**, n'est jamais envoyée au serveur avec la requête. -- Nom de domaine implicite +## Comment utiliser les URL - - : Exemple : +N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur pour récupérer la ressource correspondante, mais ce n'est que la partie visible de l'iceberg ! - ``` - /fr/docs/Apprendre - ``` +Le langage [HTML](/fr/docs/Glossary/HTML) [que nous aborderons plus tard](/fr/docs/Learn/HTML/Introduction_to_HTML) utilise énormément les URL : - Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL. +- Pour créer des liens vers d'autres documents grâce aux éléments [``](/fr/docs/Web/HTML/Element/a) ; +- Pour rattacher un document aux ressources qui lui sont liées, par exemple grâce aux éléments [``](/fr/docs/Web/HTML/Element/link) ou [`