Quels sont les différentes syntaxes des chemins vers une ressource ?

Bonjour à vous tous,

Je bute sur une recherche dans MDN parce que je ne sais pas comment formuler ma requête. Je vous explique : l'utilisation de l'attribut src dans la balise <img> autorise l'utilisation de plusieurs formes de syntaxe pour spécifier le chemin vers une image. Par exemple :

Chemin relatif :

<img src="images/photo.jpg" alt="Ma photo">

Chemin absolu :

<img src="https://www.example.com/images/photo.jpg" alt="Ma photo">

Chemin de fichier local :

<img src="file:///C:/Users/Utilisateur/Images/photo.jpg" alt="Ma photo">

Données URI :

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBARXhpZgAATU0AKgAAAAgAA1AAEQ...

Chemin racine relative :

<img src="/images/photo.jpg" alt="Ma photo">

Là où je voudrais de l'aide c'est sur le chemin de racine relative. Je sais qu'on peut utiliser ../ pour sortir d'un dossier et remonter en arrière dans la hiérarchie des fichiers et dossiers, on peut utiliser nom_du_dossier/ pour entrer dans un dossier et nom_du_fichier.jpg pour sélectionner le fichier souhaité. Mais ce que je n'arrive pas à trouver c'est la syntaxe pour remonter directement à la racine et s'il y a d'autres syntaxes intéressantes à connaître.

Merci de m'expliquer les différentes syntaxes et si possible de me donner le lien MDN qui présente toutes ces syntaxe.
Modifié par ObiJuanKenobi (05 Mar 2024 - 10:59)

Bonjour,

Sur MDN, la page à lire est (en français) https://developer.mozilla.org/fr/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL

La version anglaise est un peu plus complète et est à https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL

Les spécifications complètes sont à https://url.spec.whatwg.org/

Note que MDN ne s'amuse pas à reproduire toutes les specs et qu'ils renvoient vers le site de whatwg.org. À noter également que whatwg et w3c sont deux organisations différentes mais qu'elles travaillent "main dans la main".

EDIT: note aussi qu'il peut y avoir des réécritures d'URL mises en place sur le site (par exemple via un fichier htaccess s'ils utilisent Apache). Auquel cas l'url se trouvant dans un attribut src peut être un peu n'importe quoi.

Amicalement,
Modifié par parsimonhi (05 Mar 2024 - 09:22)

Bonjour,
je ne réponds pas directement à ta question, je suis sous Linux, mais pour un site et ses images personnelles, je te conseille, quel que soit le système, de les mettre dans un dossier, par exemple "Images" à la racine de ce site.
Ensuite, on les appelle avec <img src="Images/mon_image.jpg". C'est le plus simple et évite beaucoup de problèmes de chemin qui sont la première cause d'erreurs sur les images absentes. Plus tu vas mettre un chemin compliqué, plus la source d'erreurs va augmenter. Bien penser à ne pas mettre / devant le dossier si ce dossier est à la racine du site. Et éviter de le mettre les images en vrac sur la racine, ça devient vite la panique.
Si tes images sont ailleurs sur un site, bien sûr il faut mettre l'url du site, comme tu l'indiques.
Et en css

background-image:url("Images/Orage-1024-C.jpg");

On a remplacé src par url et des (), mais le reste du chemin est le même qu'en html

Salut,

Note bien que sur internet tu passes forcément par un serveur. Donc, le chemin de fichier local, tu peux oublier lorsqu'il s'agit du frontend.

Personnellement je ne me sers que des chemins relatifs à la racine (ton dernier exemple). Je le fais non seulement pour les images, mais aussi pour toutes les autres ressources (fonts, scripts, styles...).

Avec ça t'as jamais de problèmes, et si un jour tu migres ton site, t'es pas obligé de te faire une séance de copier/remplacer parce que tu aurais mis tes URL en dur dans tes fichiers... ou même plus pénible, dans ta base de données, même si pour ce dernier cas il suffit de faire un REPLACE() SQL, mais bon.

Entre nos commentaires et les ressources données en liens il n'y a plus grand chose à dire.

Maintenant il va falloir s'y mettre !

Bonjour,

ObiJuanKenobi a écrit :
Merci parsimoni mais ton lien ne fait référence qu'à la structure des URLs alors que je veux savoir s'il y a d'autres syntaxes pour atteindre une ressource.

J'ai posé la question à ChatGPT et il m'a répondu, selon lui, qu'il n'existe pas de syntaxe pour remonter directement à la racine du dossier d'un site web. Il n'y a que ../ et ./.

ChatGPT est un crétin. Si tu commences ton lien par "/", tu pars de la racine. C'est donc comme si tu remontais à la racine.

ObiJuanKenobi a écrit :
Cependant, j'aimerai trouver un lien MDN, ou un autre lien, qui présentent toutes les syntaxes pour être définitivement fixé mais je ne sais pas comment formuler ma requête dans le moteur de recherche intégré au site ou sur Google.

D'après mes recherches, MDN n'a pas mieux que le premier lien (ou le deuxième lien en anglais) que j'ai donné dans ma réponse précédente. Il y liste les cas les plus fréquents.

Dans la page en anglais, c'est dans les chapitres "Examples of absolute URLs" et "Examples of relative URLs".

Et pour avoir toutes les possibilités, c'est le troisième lien de ma réponse précédente (celui vers le site whatwg.org). C'est compliqué parce que la réalité est compliquée en ce qui concerne les urls.

Amicalement,
Modifié par parsimonhi (05 Mar 2024 - 14:22)

parsimonhi a écrit :
Il nous dépassera tous. Mais pour l'instant, il faut se méfier de ses réponses.

Il faut le voir comme un outil de travail. Il ne fait pas (encore) le boulot à notre place mais j'arrive à gagner du temps avec lui à condition de savoir exactement ce que je veux.

Gemini (de Google), lui, semble aller beaucoup plus loin dans les réponses ***, mais alors qu'est-ce qu'il hallucine !

J'avais utilisé Github Copilot dans sa version gratuite, c'est lui qui m'avait introduit aux IA. Pas mal, il m'avait permis de sortir d'un mauvais pas.

Après cela j'avais laissé tombé durant un an, mais maintenant j'ai pris le plis. Évidemment, il faut trier les réponses, mais concrètement j'avance beaucoup plus vite, et on se retrouve de "pisseur de code" à quelque chose qui se rapproche plutôt de l'architecture logiciel (à condition bien sûr d'avoir les bases).

Exemple typique du moment :

"Olivier C à ChatGPT" a écrit :
Voici la structure SQL de mes tables PostgreSQL :
- suggestion d'optimisation (réponse pas terrible, mais l'IA peut percevoir un oubli, comme une colonne à passer en UNIQUE)
- remplir les tables avec quelques exemples fictifs (IA au top)

___
*** Je parle ici uniquement de codage.
Modifié par Olivier C (05 Mar 2024 - 19:40)

parsimonhi a écrit :
Bonjour,
ChatGPT est un crétin. Si tu commences ton lien par "/", tu pars de la racine. C'est donc comme si tu remontais à la racine.

J'ai testé en plaçant un "/" devant le lien menant à la ressource CSS mais ça ne marche pas.
Exemple, j'avais initialement ce lien :

<link rel="stylesheet" href="../../css/styles.css">

Je l'ai remplacé par :

<link rel="stylesheet" href="/css/styles.css">

ça ne marche pas.

Je m'y prends mal ?
Modifié par ObiJuanKenobi (07 Mar 2024 - 08:17)

Complément

Bonjour,
encore un problème de chemin. Serait-il possible de voir l'arborescence générale de ton site.
Si j'ai compris, tu veux aller chercher le fichier css de ton site. Il devrait être logiquement à la racine DE TON SITE et pas de TON DISQUE DUR. On retrouve le même problème qu'avec les images.
Si ton fichier css est bien à la racine de TON site, il ne faut pas mettre de / devant "style.css"

<link rel="stylesheet" href="style.css" type='text/css'>

Par contre, comme dans ton second exemple, si tu as mis ton fichier style.css dans un dossier nommé css (ce qui ne sert à rien sinon ajouter des confusions), il faut de nouveau ne pas mettre devant / si ce dossier css est à la RACINE DE TON SITE. Si tu as créé un dossier pour ton site entier (j'espère), il se nomme par exemple "Mon_Site_Web", c'est la racine où tu devrais mettre tous tes fichiers html, css, JavaScript, plus les images éventuellement dans un sous-dossier comme je l'ai dit l'autre jour.

L'important est de savoir où sont tes dossiers et fichiers. On a tous des problèmes de rangements sur nos disques durs, mais il faut au moins savoir comment les atteindre. Je ne connais pas Win mais je crois que si tu tapes // dans ton navigateur plus "Entrée", tu vas avoir la racine de ton disque dur. En tous cas sous Linux c'est ça. Après, avec la souris tu cliques sur tout ce qui est en bleu et tu vas descendre l'arborescence.
Oublie un peu ChatGPT et va voir par exemple :
https://www.coursinfo.fr/decouverte/windows/quest-ce-quun-dossier-un-fichier-et-une-arborescence-de-dossiers/
ou
https://www.startpage.com/do/dsearch?query=compmrendre+l%27aborescence+des+fichier+windows&language=english&cat=web&pl=ext-ff&extVersion=1.1.7

Bonjour,

ObiJuanKenobi a écrit :
Je ne travaille pas avec un serveur, tout mon projet se trouve dans un dossier placé sur le bureau Windows.

What ???

Ne me dis pas que tu affiches tes pages avec le protocol file:// ? Y a quoi dans la barre d'adresse du navigateur quand tu affiches la page ?

Amicalement,
Modifié par parsimonhi (07 Mar 2024 - 15:06)

parsimonhi a écrit :
Bonjour,
Ne me dis pas que tu affiches tes pages avec le protocol file:// ? Y a quoi dans la barre d'adresse du navigateur quand tu affiches la page ?
Amicalement,

La barre d'adresse URL affiche ceci :

file:///C:/Users/Utilisateur/Desktop/htmlcssjsbox.com/css.html

Modifié par ObiJuanKenobi (07 Mar 2024 - 16:29)

Bonjour,

Rhalala ! Utiliser le protocole file:// pour tester tes pages, c'est comme boire du vin dans une bolée à cidre. Que dis-je, c'est même pire que ça ! C'est comme boire du cidre dans un verre à vin !

Plus sérieusement, il y a plein de différences quand tu testes en http:// (ou https://) et quand tu testes en file://. Dans de nombreux cas, ton code ne peut pas fonctionner à l'identique. Et il y a plein de trucs qui ne marchent tout simplement pas avec le protocole file:// (et ça dépend des navigateurs en plus car ils n'ont pas tous le même comportement avec file://).

Bon alors la racine, bah, c'est "C:" dans ton cas (et non pas "/" qui fonctionne sous unix/linux ou quand tu utilises un serveur web même si ce serveur est installé sur ton windows). Le navigateur ne peut pas savoir que le dossier racine que tu souhaites toi, c'est htmlcssjsbox.com (qui est ici un sous-dossier de sous-dossier ... de sous-dossier). Parce que le navigateur, il ne lit pas dans tes pensées (enfin, pas encore).

Par contre, tu peux éventuellement utiliser une balise qui s'appelle <base> dans le code de chaque page (à mettre dans la partie <head> de ta page).

Je n'ai pas de quoi tester sous windows que je n'ai pas sous la main, mais ceci devrait fonctionner avec un peu de bol (à noter qu'on met dans l'url "C|" et non pas "C:")  :

<base href="file:///C|/Users/Utilisateur/Desktop/htmlcssjsbox.com/">

Ensuite, un lien vers css.html (quelles que soient les pages du ton site y compris celles dans des sous-dossiers) sera tout simplement :

<a href="css.html">Xxx</a>

Et pour la feuille de style, ce sera dans toutes les pages :

<link href="css/style.css" rel="stylesheet" type="text/css">

Ce seront quand même des urls relatives, mais elles seront simplifiées puisque "partant" de l'url spécifiée dans la balise <base>.

Tu peux aussi mettre une balise <base> dans une page avec un href différent (par exemple une url vers le dossier contenant la page elle-même). Les urls relatives dans cette page seront par rapport à la valeur du href de sa balise <base>.

Amicalement,
Modifié par parsimonhi (07 Mar 2024 - 18:08)