ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLのファイルパス

HTMLのファイルパス

WBOYオリジナル: 2024-09-04 16:50:591093ブラウズ

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

構文

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

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

構文:

<img src="" alt="">

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

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

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

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

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

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

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

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

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

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

構文: src=”url”;

例: これは、絶対ファイルパスコードが Web サイト構造でどのように機能するかを定義する実際のコードです:

<!DOCTYPE html>
<html>
<head>
<title>Absolute file path</title>
</head>
<body>
<img src="https://www.BeautyofNatur /image.png"
alt="My Image" style="width:400px">
</body>
</html>

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

構文:

src="img_folder/img_name" or
src="/img_folder/img_name" or
src=""../img_folder/img_name or

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

<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h4>Example showing file in same folder </h4>
<img src="images/Candle.jpg" alt="Image demo
"style="width:80px; height:80px; ">
<h4>Example showing file present in a folder above its
current   folder </h4>
<img src="../images/Candle.jpg" 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="https://cdn.educba.com/images/Candle.jpg" alt="Image demo
"style="width:80px; height:80px; ">
</body>
</html>

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