もくじ

リンク

リンクの必要性

前回、hoge さんの index.html を見るには、

http://www.st.seiai.ed.jp/~hoge/index.html

とすればよいことがわかりました。

では joho.html を見るにはどうすればよいでしょうか。

http://www.st.seiai.ed.jp/~hoge/joho.html

とすればOKです。

しかし、実際には hoge さんの所に joho.html という名前のファイル(ページ)があると知っている人でないとアクセスできないという事になってしまいます。

そこで、最初のページは index.html と決めておき、その他のページはそこから「リンク」によりいけるようにします。

リンクの書き方

リンクを実現するのもタグです。ボタンにしたい文字列や画像を<a></a>で挟みます。<a>はなぜかアンカー(錨)と呼ばれます。

リンク先は<a>の中に次のように属性として書き込みます。

<a href="アドレス(目的地)">ボタンになる文字列</a>

こんな感じになります。

<a href="http://www.st.seiai.ed.jp/~hoge/joho.html">情報で学んだこと</a>

リンク先が同じフォルダ内のファイルの時には最後のファイル名だけでもOKです。

<a href="joho.html">情報で学んだこと</a>

とすれば、情報で学んだこと というボタンができ、これをクリックすると joho.html が表示されるということになります。

課題

index.html と joho.html をリンクで相互に行き来できるようにします。

index.html に書く

index.html の中に joho.html へのリンクを書きます。

上記のままでなく実際には p タグの中に入れて、

<p><a href="joho.html">情報で学んだこと</a></p>

としてください。

ページ内に表示しますから、当然 body部に書かなくてはなりません。h1や他のpタグに書かれている内容も変えて整えてください。

joho.html に書く

今度は逆に joho.html の中に index.html へのリンクを書きます。index.html に戻ってくるためです。

これも当然 body部に書かなくてはなりません。joho.html の中では h1 の前に入れてください。

<body>
<p><a href="index.html">もくじ</a></p>
<h1>情報処理で学んだこと</h1>
・・・・・・・・

できあがりは…

index.html です

joho.htmlへのリンク

joho.html です

index.htmlへのリンク

補遺

最初のページは普通 index.html ですが、そうでない場合もあります。index.htm home.html index.php などいろいろあり得ます。そこでこのような仕組みになっています。

まず、アクセスする人は最後のファイル名を省略してアクセスします。

http://www.st.seiai.ed.jp/~hoge/

これはそこにあるファイルの一覧を求めるものですが、きちんと設定されたサーバーはそのサイトの方針に従って最初に見てほしいファイルの名前を補い、そのページを送信します。

閲覧者は

http://www.st.seiai.ed.jp/~hoge/index.html

を見る事になります。

どこからもリンクしていないページを作って、ファイル名を知っている人しか見られないような秘密のページをつくる場合がありますが、これはある程度危険です。本当に見られてだめな物は、きちんとパスワードなどでアクセス制限すべきです。

その危険を知りつつ、簡易に行いたい場合は、せめてファイル名を予想されないものにしましょう。たとえば、

dJei4ok3ipHbVLpe0qIsZa910jIQ.html

ウェブページ(Mar.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2005 改訂