外部ファイルの指定方法(絶対パスと相対パス)

HTML内の画像ファイルや、ハイパーリンクなどでは、そのファイルを指定する必要がります。
そのファイルが、指定しているHTMLファイルと同じディレクトリにある場合は、ファイル名を書くだけです。
（なおディレクトリとは、入れ物の位置を意味する用語です。フォルダは ファイルなどの入れ物です。）
例　<img src="画像ファイル名">や<a href="リンクファイル名">ここ</a>

しかし指定している画像やリンクファイルが、HTMLファイルの位置と違う場所にあるファイルは、 その位置を含めた表現が必要になります。以下でその表現方法として『絶対パス』と『相対パス』を説明しています。

HTMLファイルや素材のファイルを置くのは、あるディレクトリを基準にします。その基準となるディレクトリを ドキュメント・ルートと呼びます。
例えば次のようなディレクトリ構造で、ファイルやディレクトリがあるとします。

上のイメージで、一番外側のディレクトリを ドキュメント・ルート(root)とすると、構造を以下に示すような階層図で表現できます。

	root

下記は、左のディレクトリ構造を TreeView で見た状態です。
この TreeView で、のファイルに対応するアイコンをクリックし、
それから、 で確認してください。

上記TreeView内のイメージで、例えば
を クリックするとの開いたアイコンに変化し、
をクリックすると、もとの閉じたアイコンに戻ります。

なお、のイメージはシステムによって色々な形が使われます。
や であったり、 三角マークであったり、矢印であったりするようです。

rootからの使いたいファイルまでの道筋を示す表現を絶対パス（absolute path）と呼びます。
を絶対パスで表現すると次のようになります。 絶対パスは、/ の記号から始める次の表現です。

対して、ある基準のディレクトリより相対的に辿る道筋を 相対パス（relative path）と呼びます。
単に HTMLで同じウェブサイト（Website）にあるファイルを指定する場合、 上記絶対パスやルート相対パスより、次の相対パスの方がよく使われます。

という表現になります。

./の部分はカレントディレクトリと呼ばれる基準ディレクトリです。
相対パスの ./は、のファイルがあるの ディレクトリを意味します。この./の部分は省略でき、 一般に省略した表現を使います。つまり、

　と表現します。

また../という表現もあり、これは親ディレクトリと呼ばれます。
これはカレントディレクトリが存在するディレクトリを意味します。

という表現に使います。

なお、<img src="画像ファイル名">で、画像ファイル名の表現は 相対パスの表現です。
これが記述されるHTMLファイルの位置が、基準ディレクトリのカレントディレクトリです。
つまり、画像ファイル名は、 ./画像ファイル名の ./を省略した表現を意味します。
（このサイトの出題ページの相対パスの表現は、この./を省略した表記にしてください。）