HTMLのファイルパス

ファイル パスは、それぞれの Web サイトのフォルダー構造へのファイルのパスを定義するために HTML で使用される概念です。これは、目的のフォルダーからファイルの正確な場所を見つけるために特別に使用されます。つまり、Web ブラウザーが呼び出す特定のファイルのガイドラインまたはアドレスとして正確に機能します。 HTML におけるこの概念は、主に画像、Web ページ、ファイル、CSS ファイル、スクリプト ファイル、ビデオなどのメディア ファイルなどのファイル パスを検出するために使用されます。ファイルのパスは、src または href と呼ばれる 2 つの属性を使用して見つけることができます。これらの属性は、HTML ドキュメントに外部ファイルまたはソースを添付するのに役立ちます。

構文

Web ページに含めるファイルのパスを知っておくことは重要です。

これらのファイルを Web ページに含める構文は次のとおりです。

構文:

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

これは、Web ページに画像を挿入するために使用されます。

ここにいくつかのパスのリストとその説明は次のとおりです:

• : これは、現在のページと同じフォルダーの画像を使用する場合に使用されます。
• : 指定された画像が同じ Web サイトフォルダー内の画像フォルダーに保存されていることを示すために使用されます。
• : これは、現在の Web フォルダーが配置されているルートの画像フォルダーにそれぞれが保存されることを定義するために使用されます。
• : このタイプは、指定された画像が Web サイトの現在のフォルダーのちょうど 1 レベル上に保存されることをユーザーに伝えます。

これらのファイル パスは、Web ページ、画像、スタイル ファイル、スクリプト ファイルなどの外部ファイルを追加する必要がある場合に常にコード内で使用されます。

ファイル パスを定義するときは、常に正確な URL、適切なファイル名、適切な拡張子を付けた正確な画像名を含める必要があります。これらがすべて正しく含まれていれば、含まれているファイルまたは画像は Web ページに正しく表示されます。

上記の構文は 2 つのタイプに分類されます。 1 つは、URL アドレスに基づく絶対ファイル パス用です。もう 1 つは相対ファイル パス用です。ここでは、単純に名前またはフォルダー パスを指定することでファイルと画像のアドレスを定義し、そこからコンテンツにアクセスできます。

次のセクションでファイル パスの両方のタイプを詳しく説明し、実際にどのように機能するかを示します。

HTML ではファイル パスはどのように機能しますか?

ファイル パスには、絶対ファイル パスと相対ファイル パスの 2 種類があります。

ファイル パスの定義に完全な URL アドレスを使用する場合は常に、絶対ファイル パスが使用されます。

構文: src=”url”;

例: これは、絶対ファイル パス コードが 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%">

相対ファイル パスは、現在のフォルダーを基準にして実際にすべての画像が配置されているファイルへの特定のパスを定義するために使用されます。

構文:

 or or../img_folder/img_name or

ここでは、以下に示すように、相対ファイル パスを使用してファイル パスを表示するすべての可能な方法を備えた例を含めます。

<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; ">

絶対ファイル パスの概念ではなく、相対ファイル パスを使用することが常に良い習慣であると考えられています。

HTML のファイル パスの例

以下に挙げる例は次のとおりです

例 #1

これは、絶対ファイル パスがどのように機能するかを示す例です。次のようにコード化します:

コード:

<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">

出力:

例 #2

コード:

<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="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%">

出力:

例 #3

コード:

<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="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>

出力:

結論

上記のすべての情報から、HTML ファイルは、Web サイト構造内で実際に保存されるファイルまたは画像のアドレスまたはパスを定義するために使用されることがわかりました。

そのファイル パスは 2 つの可能な方法で表示されます。上記の情報で見たように、絶対ファイル パス、もう 1 つは相対ファイル パスです。

以上がHTMLのファイルパスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。