ファイルの階層構造とリンク

リンク

絶対パスによるリンク

《index.html》から群馬県立女子大学にリンクを張ってみましょう。リンクは<a>~~</a>を使います。開始タグの a のあとに半角スペースを空けてhref="○○"と記述し、○○の部分にリンク先のファイルのアドレスを書きます。

<p><a href="http://www.gpwu.ac.jp/">群馬県立女子大学へ</a></p>

このように、リンク先がhttp://ではじまるものを絶対パスと呼びます。逆に相対パスというものもあります。同じサイト内でのリンクは相対パスを使うことが多いです。この『パス』とは、リンクや画像で使うsrc(ソース:img src="IMG1.GIF")への、そのファイルからの道筋のことを言います。

相対パスによるリンク

 

今《test》フォルダは上図の左ような状態です。この《index.html》から右の図のように《A-page1.html》へリンクをはってみます。

<p><a href="A-page1.html">写真のページへ</a></p>

相対パスは同じ階層内(フォルダをまたがない)であればファイル名だけでリンクできます。

新規ウインドウで表示

リンクは、何もしないと今表示されているページがリンク先ページにかわります。今表示しているページをそのままにして新規にリンク先を開かせたいときは target というのを設定します。

<p><a href="http://www.gpwu.ac.jp/" target="_blank">写真のページへ(別ウインドウで表示する)</a></p>

target="_blank"と設定することで今表示しているページをかえることなくリンク先を表示できます。

階層構造

現在、図1サイトフォルダの直下にある「p2-1.html」を編集していたとします。このページからトップページ《index.html》や《p2-2.html》にリンクしたいときは(オレンジ色の線)、リンクのタグの中にそのファイル名だけを記述します。

《p2-1.html》に画像《img2.gif》を表示させたい場合、この画像は「p2-1.html」と同じ階層にはなく、「img」フォルダの中に入っているため、[1階層下がる]ことを示す必要があります(ピンク色の線)。「img」フォルダは同じ階層にあるのでまずそのフォルダ名を記述し、その下層にあるという意味で / (スラッシュ)で区切ります。

<img src="img/img2.gif" alt="任意のテキスト">

ページ数が増えてきたので図2のような階層構造を作ったとします。
現在カテゴリCの「C-1.html」を編集中だとします。このページから1階層上の「index.html」にリンクをはるには、記述は以下のようになります。

<a href="../index.html">トップページへ</a>

このページから「A-1.html」にリンクする場合

<a href="../kategorieA/A-1.html">Aページへ</a>

このページにimgフォルダの「img1.jpg」を表示させる場合

<img src="../img/img1.jpg" alt="任意のテキスト">

階層が上に上がる場合は、スラッシュの前に2つドットをおきます(『 ../ 』)。下に下がる場合はただのスラッシュ『 / 』。フォルダの中にあるものを表示させたりリンクさせたりする場合は、スラッシュをつかって、目的のファイルまでの道筋を明確に書かなければなりません。

このページから「C-2.html」にリンクする場合、すぐ隣同士なので(階層をまたがないので)そのままファイル名を書きます。

<a href="C-2.html">C-2ページへ</a>

このページから「C-3」フォルダ内の「C3-1.html」にリンクする場合、同じ階層にある「C-3」フォルダを書いて、その下層であることを示す”/ ”を入れてファイル名を書きます。

<a href="C-3/C3-1.html">C3-1ページへ</a>

▲ページの先頭へ