フリーソフトで作るHP講座「ハイパーリンク」

フリーソフトで作るホームページ講座「ハイパーリンク」

ホームページが紙に印刷された本と比較して便利だなと思う機能の一つがハイパーリンクでしょう。クリックすると別のページが表示される機能のことです。

これは以下のHTMLで実現できます。

<A HREF="sample.html">ここをクリックするとサンプルが見れます。</A>

HREF=で表示したい文書を指定し<A HREF="">と</A>の間にクリックする文字列を置きます。上の行は以下のような働きになります。
ここをクリックするとサンプルが見れます。

また表示する文書は自分のページと同じ場所にある必要はなくアドレスごと指定すればよそのページも表示できます（表示するというより飛んでいってしまう）。例えば以下のようにです。

<A HREF="http://www.forest.impress.co.jp">窓の杜</A>

窓の杜

またホームページがディレクトリを分けた構成になっている場合はパス指定も行えます。このページ自身は親ディレクトリのindex.htmlがひとつ上のページになっています。そこに戻れるようにする為には以下のようなHTMLを使います。

<A HREF="../">ひとつ上へ</A>

ひとつ上へ

../は親ディレクトリを表しています。普通は../の後ろにindex.htmlとしなければならないのですが多くのホームページのサーバ（WWWサーバ）は省略するとindex.htmlが指定されたものとみなしてくれます。WWWサーバが動作していないローカル環境で（=自分のパソコン）試したい場合は省略せずにindex.htmlも付けて下さい。ローカルでもWWWサーバソフトを動作させると省略できるようになります（自分の環境では動作させており問題が出ないので省略しています）。別の回でこのWWWサーバについても触れる予定です。子ディレクトリの場合、例えばtestという子ディレクトリのsample.htmlにリンクを張る場合はA HREF="test/sample.html"と指定します。

今度はクリックする部分を文字ではなく画像にします。

<A HREF="../"><IMG SRC="to1up.gif" BORDER=0></A>

IMG SRC=""の後ろのBORDER=0を指定するとハイパーリンクの画像の周りにつく境界線が表示されなくなります。省略するとBORDER=1と同じになります（境界線が表示される）。

ここまで来れば、このページのレベルは作ることができます。次回の表(TABLE)は実際の表に使うよりも画面のレイアウトを作るのに大活躍します。表までマスタすれば初級編は卒業です。