Chemin du fichier en HTML

Un chemin de fichier est un concept utilisé en HTML pour définir le chemin du fichier dans la structure de dossiers du site Web concerné. Ceci est spécialement utilisé pour trouver l'emplacement exact du fichier dans le dossier souhaité, ce qui signifie qu'il fonctionne exactement comme une ligne directrice ou une adresse d'un fichier particulier que le navigateur Web va appeler. Ce concept en HTML est principalement utilisé pour détecter les chemins de fichiers d'images, de pages Web et de fichiers, de fichiers CSS, de fichiers de script, de fichiers multimédias comme la vidéo, etc. On peut trouver le chemin du fichier en utilisant deux attributs appelés src ou href. Ces attributs nous aident à joindre un fichier ou une source externe à notre document HTML.

Syntaxe

C'est une chose importante de connaître le chemin des fichiers qui vont être inclus dans les pages Web.

Voici donc la syntaxe pour inclure ces fichiers dans les pages Web comme suit :

Syntaxe :

<img src="/static/imghwm/default1.png" data-src="img_folder/img_name" class="lazy" alt="">

Ceci est utilisé pour insérer l'image dans notre page Web.

Voici une liste de quelques chemins avec sa description est la suivante :

• : Ceci est utilisé lorsque nous allons utiliser une image du même dossier traitant comme la page actuelle.
• : Il est utilisé pour indiquer que l'image donnée est stockée dans le dossier image du même dossier du site Web.
• : Ceci est utilisé pour définir respectif est stocké dans le dossier image de la racine où se trouve le dossier Web actuel.
•  : Ce type indique à l'utilisateur que l'image donnée est stockée exactement un niveau au-dessus du dossier actuel du site Web.

Ces chemins de fichiers sont utilisés dans le code chaque fois qu'il est nécessaire d'ajouter des fichiers externes tels que des pages Web, des images, des fichiers de style, des fichiers de script et bien plus encore.

Lors de la définition du chemin du fichier, il est toujours nécessaire d'inclure l'URL exacte, le nom de fichier approprié et le nom exact de l'image avec l'extension appropriée. Si tous ces éléments sont correctement inclus, le fichier ou l'image inclus s'affichera correctement sur la page Web.

La syntaxe ci-dessus est divisée en deux types. L’un concerne le chemin absolu du fichier, qui est basé sur l’adresse URL. Un autre concerne le chemin relatif du fichier, où nous pouvons définir l'adresse des fichiers et des images en donnant simplement son nom ou le chemin du dossier pour accéder à son contenu.

Nous verrons les deux types de chemin de fichier en détail dans la section suivante, où il démontrera comment cela va réellement fonctionner.

Comment fonctionne le chemin du fichier en HTML ?

Il existe deux types de chemins de fichiers : le chemin de fichier absolu et un autre est le chemin de fichier relatif.

Le chemin absolu du fichier est utilisé chaque fois que nous utilisons une adresse URL complète pour définir le chemin du fichier.

Syntaxe : src=”url”;

Exemple : Voici le code réel permettant de définir comment le code du chemin de fichier absolu va fonctionner dans la structure du site Web :

<title>Absolute file path</title>


<img src="/static/imghwm/default1.png" data-src="img_folder/img_name" class="lazy" alt="My Image"   style="max-width:90%">

Alors que le chemin relatif du fichier est utilisé pour définir un chemin spécifique vers le fichier où se trouvent réellement toutes les images par rapport au dossier actuel.

Syntaxe :

 or or../img_folder/img_name or

Ici, nous allons inclure un exemple qui présente toutes les manières possibles d'afficher le chemin du fichier à l'aide du chemin de fichier relatif, comme indiqué ci-dessous :

<title>Relative file path Demo Example</title>


<h4 id="Example-showing-file-in-same-folder">Example showing file in same folder </h4>
<img src="/static/imghwm/default1.png" data-src="images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">
<h4>Example showing file present in a folder above its
current   folder </h4>
<img src="/static/imghwm/default1.png" data-src="../images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">
<h4>Example showing file available in a folder, which is exactly located at  root   position of its current sub folder
</h4>
<img src="/static/imghwm/default1.png" data-src="https://cdn.educba.com/images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">

Il est toujours considéré comme une bonne pratique d'utiliser un chemin de fichier relatif plutôt qu'un concept de chemin de fichier absolu.

Exemples de chemin de fichier en HTML

Voici les exemples suivants mentionnés ci-dessous

Exemple n°1

C'est l'exemple qui va montrer comment Absolute File Path va fonctionner. Codez-le comme suit :

Code :

<title>Absolute file path</title>

<h2 id="Absolute-File-Path">Absolute File Path</h2>
<p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p>

<img src="/static/imghwm/default1.png" data-src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" class="lazy" alt="Mountain">

Sortie :

Exemple n°2

Code :

<title>Relative file path Demo Example</title>


<h2 id="Relative-File-Path">Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p>
<h4 id="Relative-File-path-with-image-in-same-folder">Relative File path with image in same folder </h4>
<img  src="/static/imghwm/default1.png" data-src="images/flag.png" class="lazy"   style="max-width:90%" alt="Chemin du fichier en HTML" >
<h4 id="Relative-File-path-with-image-present-in-a-folder-above-its-current-folder">Relative File path with image present in a folder above its current folder </h4>
<img src="/static/imghwm/default1.png" data-src="../images/flag.png" class="lazy" alt="Image demo "   style="max-width:90%">
<h4 id="Relative-File-path-with-image-available-in-a-folder-which-is-exactly-located-at-root-position-of-its-current-sub-folder">Relative File path with image available in a folder, which is exactly located at  root   position of its current sub folder</h4>
<img src="/static/imghwm/default1.png" data-src="https://cdn.educba.com/images/flag.png" class="lazy" alt="Image demo "   style="max-width:90%">

Sortie :

Exemple #3

Code :

<title>Relative file path Demo Example</title>


<h2 id="Relative-File-Path">Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p>
<h4 id="Relative-File-path-with-image-in-same-folder">Relative File path with image in same folder </h4>
<img  src="/static/imghwm/default1.png" data-src="images/EDUCBA.png" class="lazy"   style="max-width:90%" alt="Chemin du fichier en HTML" >
<h4 id="Relative-File-path-with-HTML-file-present-in-the-folder">Relative File path with HTML file present in the folder </h4>
<a href="index.html"> HTML file </a>
<h4 id="One-can-give-Style-path-through-Absolute-or-Relative-position-Here-we-are-using-relative-file-path">One can give Style path through Absolute or Relative position. Here we are using relative file path</h4>
<a href="main.css"> CSS file </a>

Sortie :

Conclusion

À partir de toutes les informations ci-dessus, nous avons réalisé que le fichier HTML est utilisé pour définir l'adresse ou le chemin des fichiers ou des images où ils sont réellement stockés dans la structure du site Web.

Ce chemin de fichier est affiché de deux manières possibles : Chemin de fichier absolu, où un autre est pour Chemin de fichier relatif, comme nous l'avons vu dans les informations ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!