HTMLのファイルパス-htmlチュートリアル-php.cn

HTMLのファイルパス

WBOY

リリース： 2024-09-04 16:50:59

オリジナル

1100 人が閲覧しました

ファイルパスは、それぞれの 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>

ログイン後にコピー

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

HTML のファイルパスの例

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

例 #1

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

コード:

<!DOCTYPE html>
<html>
<head>
<title>Absolute file path</title>
</head>
<h2>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>
<body>
<img src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain">
</body>
</html>

ログイン後にコピー

出力:

HTMLのファイルパス

例 #2

コード:

<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h2>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>Relative File path with image in same folder </h4>
<img src="images/flag.png" style="width:100px; height:100px; ">
<h4>Relative File path with image present in a folder above its current folder </h4>
<img src="../images/flag.png" alt="Image demo "style="width:100px; height:100px; ">
<h4>Relative File path with image available in a folder, which is exactly located at  root   position of its current sub folder</h4>
<img src="https://cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; ">
</body>
</html>

ログイン後にコピー

出力:

HTMLのファイルパス

例 #3

コード:

<!DOCTYPE html>
<html>
<head>
<title>Relative file path Demo Example</title>
</head>
<body>
<h2>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>Relative File path with image in same folder </h4>
<img src="images/EDUCBA.png" style="width:250px; height:150px; ">
<h4>Relative File path with HTML file present in the folder </h4>
<a href="index.html"> HTML file </a>
<h4>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>
</body>
</html>

ログイン後にコピー

出力:

HTMLのファイルパス