ホームページを作ると各ページごとにHTMLファイルを、また画像1枚ごとに画像ファイルを作ることになりますので、ページ数の多いサイトを作る時は項目毎にフォルダで仕分ないと、制作時、更新時に目的ファイルを見つけにくくなり不便です。
右の図1は例として「index.html」と「profile」フォルダ、「travel」フォルダ、「img」フォルダを同じ階層に（一つのフォルダ内に）入れ、さらに「travel」フォルダの中に「CANADA」フォルダ、「GUAM」フォルダを入れた状態をです。それぞれのフォルダの中にファイルが入れてあります。これを具体的に図にしたのが下の状態です（図2）。
トップページは「index.html」というファイル名にしました。「プロフィール」というコーナーと、「トラベル」というコーナーを作ろうと思っていますので、それぞれのコーナーのHTMLファイルは「profile」「travel」というフォルダに分けました。

また、画像は全て「img」というフォルダに入れることにします。また、「トラベル」のコーナーの中はさらに「カナダ」と「グアム」という2コーナーに分けたいので、「travel」フォルダの中に「CANADA」「GUAM」というフォルダを作りました。

このそれぞれのHTMLファイル同士にリンクを張ったり、imgフォルダ内にある画像をHTMLファイルに貼り込むためには、リンク先や、画像の在処を前ページで書いた「相対パス」を使って指定します。では、相対パスの書き方を練習してみましょう。
まず、トップページ「index.html」からプロフィールの「a.html」へリンクを張ります。自分の現在いる場所「index.html」から見ると「a.html」は「profile」というフォルダの中にあります。この場合のパスはprofile/a.htmlとなります。「/」は「○○フォルダ内の」という意味だと思ってもらえれば、解りやすいかも知れません。同じように、index.htmlからe.htmlへリンクを張りたければtravel/e.htmlとなります。index.htmlから直接f.thmlへリンクするとしたら、travel/CANADA/f.htmlになります。index.htmlから見て「travelフォルダ内のCANADAフォルダ内のf.html」ということです。ここで「CANADA」というフォルダ名を大文字で作っているので、パスにもCANADAと大文字を使っていることに注意してください。
index.htmlにtitle.gifという画像を貼る場合title.gifの在処を指定するにも、img/title.gifと指定します。
a.htmlからb.htmlへリンクを張る場合は、同じ階層内でのリンクですので、単純にb.htmlだけでOKです。

ではa.htmlからindex.htmlへ戻るリンクはどうすればいいでしょう。a.htmlから見るとindex.htmlは階層を一つ上がらなければなりません（自分のいるフォルダを出るということです）。この「階層を上がる」という指定は、「../」を使います。なのでパスは../index.htmlとなります。
次に、c.htmlからd.htmlへのリンクはどうなるでしょう。「profile」フォルダを出て「travel」フォルダの中に入るわけですから、../travel/d.htmlとなります。
同様にa.htmlにface.jpg画像を貼りたければ、../img/face.jpgでOKです。
g.htmlにfalls.jpg画像を貼るには../../img/falls.jpgですね。解りますでしょうか？