リンクを張る
ホームページではある文字あるいは画像をクリックすると別の画面に 表示が変わったりすることがよくあります。このようなしくみを作ることを リンクを張るといいます。
まず簡単な場合から行います。 他人のホームページに表示がかわることは 絶対ジャンプといいます。 このためにはつぎのようにします。

<A HREF="http://www.asahi.com">朝日新聞</A>
<A HREF="http://www.yomiuri.co.jp">読売新聞</A>

これをホームページで見るとつぎのように"朝日新聞""読売新聞" の文字が色が変わってみえます。あるいは下線が引かれます。 これをクリックするとそのホームページにジャンプします。 次のようになります。

朝日新聞
読売新聞

インターネット上の住所

<A HREF="http://www.asahi.com"> のなかのアドレスhttp://www.asahi.comのことをURLといいますが、 これが朝日新聞の実際のホームページのインターネット上のアドレスすなわち住所です。 このようなアドレスはあらかじめ調べておく必要があります。

アドレスの指定法にはこれ以外に直接数値で指定する方法があります。これは IPアドレスといいます。 たとえば、次の2つはおなじことです。

<A HREF="http://133.91.169.171">中央大学</A>
<A HREF="http://133.91.154.53">吉野ゼミ</A>

戻る


画像にリンクする
朝日新聞の文字の代わりに画像をクリックすると朝日新聞のホームページにジャンプするように することもできます。このときは画像データを準備した上で次のように書きます。 ただし、画像データの名前はkabe1.jpg とします。

<A HREF="http://www.asahi.com"><IMG SRC="kabe1.jpg"></A>

実際、ブラウザでは次のように見えます。

またあるサイトの中の特定のページをみたいことはよくあります。 その時は、上のアドレスのあとにそのファイル名を続けて書きます。 次のようにします。

<A HREF="http://133.91.154.53/~yoshino/yoshino.html"><IMG SRC="kabe1.jpg"></A>

<A HREF="http://www.nikkeibp.co.jp/biztech/index.html"><IMG SRC="kabe1.jpg"></A>

<A HREF="http://www.mainichi.co.jp/index.html"><IMG SRC="kabe1.jpg"></A>

のように書きます。

画像と文字の両方をリンクキーすなわちクリックする部分とするときは 次のようにします。原理的には画像のときと同じです。

<A HREF="http://www.asahi.com"><IMG SRC="kabe1.jpg">朝日新聞</A>

ブラウザでは次のようにみえます。

朝日新聞

このように説明をつけた方が親切です。

戻る


画像を表示できないブラウザへの対応するリンク
画像にリンクしたときにはその画像がもし届かないときには そのリンクはできないことになります。それでは困るので ALT="朝日新聞" と書いておくとよいでしょう。このときは画像が表示できなくてもそこに 朝日新聞の文字が表示されます。つまり次のようにします。

<A HREF="http://www.asahi.com"><IMG SRC="kabe1.jpg" ALT="朝日新聞"></A>

次のように最初の場合には画像がありませんがそれのリンク先がわかります。 それに対して、書かないとわかりません。

朝日新聞

朝日新聞

戻る


異なったページ間のリンク

今までは、異なった中央大学から朝日新聞へのように異なったサイトをリンクしていました。 しかし、同じホームページの中でもページ間をリンクすればページからページへ移動できます。 これの方法について解説しましょう。

大きなファイルは読み込みにみも時間がかかり、編集も大変です。 これをあらかじめいくつかの小さなHTMLファイルに分割しておき、あるページから他のページ へ表示を切り替えていくことを考えます。 これは全体の構成を見やすくできるという長所があります。

今、2つのファイル page1.html, page2.html を作成し、おなじディレクトリにそれらをおきます。 page1.html のなかからpage2.html を表示するにはpage1.htmlのなかに 次のように書きます。

<A HREF="page2.html">次のページ</A>

このとき、"次のページ"の文字をクリックするとpage2.htm を表示します。

次に、page2.html の本文中たとえば最後に

<A HREF="page1.html">前のページ</A>

としておけば前のページに戻ることができます。 矢印と<IMG SRC="larrow.gif"><IMG SRC="rarrow.gif"> と組み合わせればもっとわかりやすいでしょう。たとえば

戻る 進む

としておけばわかりやすい。

ファイルの中の特定の部分にリンクをはる

page2.html を表示するだけでなくそのなかの特定の部分にリンクを張るにはどうすればよいでしょうか。
page1.htmlからpage2.htmlの中のキーワードにジャンプするためにはpage1.htmlのなかに つぎのように記述しておきます。

<A HREF="page2.html#key">項目1</A>

page2.html には

<A NAME="key">項目1の解説</A>

の様にかいておきます。こうするとpage1.htmlから、page2.htmlのkeyにジャンプします。 すなわち、リンクが張れます。 ここで項目1の解説は項目1に対応する説明、keyはどのような言葉でもよいのですが、 "mifile2.htm#key"の中のkeyと対応していなければなりません。 すなわち, page1.htmlでkeyを別の言葉たとえばmykeyに変えたのなら、page2.htmlの 対応する部分もkeyを mykeyに変えなければなりません。

戻る


同じページ内でのジャンプ

同じページ内でのリンクの例を与えます。 想定しているのは、最初に項目の一覧があり、その後に項目の長い説明が あるような場合です。 たとえば、最初にコマンド一覧があり、その詳しい使い方を後ろに説明する場合が その例でヘルプファイルで単語をひくような場合です。 この場合、各項目にはその説明をリンクします。さらに、その説明のあとに最初の項目一覧への リンクを張っておきます。このようにすると、説明を読みおわってからすぐに項目一覧に戻ることができます。 具体的に次のような例を考えましょう。

<A NAME="return1"> 観光地名 </A>
<UL>
<LI><A HREF="#J1"> 日光 </A>
<LI><A HREF="#J2"> 北海道 </A>
<LI><A HREF="#J3"> 湯河原 </A>
</UL>

<A NAME="J1"> < FONT COLOR="red">日光とは</FONT> </A>
日光は東京から日帰りが可能であるがそこには湖や名所が多くあり...
<A HREF="#return1"> return </A>
<HR>
<A NAME="J2"> <FONT COLOR="red"> 北海道のみどころ</FONT> </A>
北海道はその雄大な自然とみどころの多さで是非一度は行きたいところである。
......
<A HREF="#return1"> return </A>
<P>
<A NAME="J3"> <FONT COLOR="red">湯河原のよさ</FONT> </A>
東京に住んでいるのに湯河原のよさはあまり知られていない。
....

この例では2つのジャンプを組み合わせています。すなわち、 <A HREF="#J1">日光</A>で日光をクリックすると <A NAME="J1"><FONT COLOR="red">日光とは</FONT></A> にジャンプします。また、returnの文字をクリックすると もとの観光地名にもどります。それは <A HREF="#return1">return</A>の部分で実現されます。 うえの例はつぎのように見えます。

観光地名

日光 日光は東京から日帰りが可能であるがそこには湖や名所が多くあり... return

北海道のみどころ 北海道はその雄大な自然とみどころの多さで是非一度は行きたいところである。 ...... return

湯河原のよさ 東京に住んでいるのに湯河原のよさはあまり知られていない。 .... return

戻る


リンク内容を別のウィンドウに表示する

あるページを表示させている時、ちょっと別の内容を表示させたいが今のページはそのままにしておきたい ということはよくあります。たとえば、ヘルプなどを表示させる時です。 この場合には、リンク先の内容を現在の文書を表示しているウィンドウとは別のウィンドウに表示させることができます。 このためには、次のようにします。

<A HREF="page2.html" TARGET="window3" >次のページ</A>

このとき、"次のページ"の文字をクリックすると 新しくwindow3という名前のウィンドウが開き、そこにpage2.htm を表示します。 window3は自由に名前をつけることができます。ただし、すでに同じ名前のウィンドウが 開かれている時はそこに文書が表示されます。たとえば、window3以外の名前ではそうなることもあります。 次のようになります。

次のページ

別のウィンドウに表示する内容はたとえば、別のホームページでもかまいません。 つぎのようにかきます。

<A HREF="http://www.asahi.com"TARGET="window3">朝日新聞</A>
<A HREF="http://www.yomiuri.co.jp"TARGET="window4">読売新聞</A>

朝日新聞
読売新聞

戻る


メールを送信する。電話をかける

メールを受け取りたい時に記述します。次のように記述します。

メールは<A HREF="mailto:yoshino@chuo-u.ac.jp">こちら</A>まで

つぎのようになります。

メールはこちらまで

電話をかける(iモード専用)

電話をかけたい時には次のように記述します。 ハイフンはつけなくてもかまいませんが、市外局番は記述しないと電話はかかりません。

<A HREF="tel:117">117に電話</A>

戻る


ダウンロードファイルを提供する

ダウンロードするファイルの場所を指定します。クリックするとダウンロードが始まります。 次のように記述します。

<A HREF="index00.txt">ファイルのダウンロード(index00.txt)</A>

戻る


リンクの説明をする

マウスがリンク文字の上にあるときに表示する説明を指定します。 長い説明は適当に折り返されて表示します。 次のように書きます。

<A HREF="mypage1.html TITLE="前のページ""><IMG SRC="larrow.gif" BORDER=0> <A HREF="mypage2.html"TITLE="次のページ"><IMG SRC="rarrow.gif" BORDER=0>

次のようになります。

戻る