10．リンクを張る
【 表紙を作る 】
まずごく簡単な表紙を作り、その表紙のある ”キーワード”あるいは ”ボタン”を クリックして他のページ、たとえば先に作成した『わが趣味・太極拳』のぺ−ジヘリンクする ことを行いましょう。
(注)リンクとは
ここで云うリンクとは、ホームページの内容の一部が別のホームページに、あるいは同一ページの 他の部分に関連つけられているこという。
ホームページの｢ホットテキスト｣と呼ばれている部分にマウスを移動すると、カーソルが手の マークに変わります。そこをクリックすると指定されたページに移動することが出来ます。
まず、この下のようなホームページの表紙を作ります。
私の趣味の部屋ようこそ！いらっしゃい！ 下のボタンをクリックすると それぞれのコーナに行くことが出来ます
|
太極拳のコーナー上の表紙のソースは、次のようになっています。このソースをもとにリンクを張ることを検討して いきましょう。
なお、各コーナの標題の左にはクリック用のボタンを素材集から収集し <IMG src="image/botan.gif">のタグで張りつけています
<HTML> <HEAD> <TITLE>HPの表紙</TITLE> </HEAD> <BODY bgcolor="#e0dcad"> <BR> <H1 align="center"><FONT color="#000099" size="7" face="ＤＦＰ勘亭流"> 私の趣味の部屋</FONT></H1> <HR width="70%"><HR width="50%"><HR width="30%"> <P align="center"><FONT size="3" face="ＭＳ Ｐ明朝"> ようこそ！いらっしゃい！下のボタンをクリックするとそれぞれのコーナに行くことが 出来ます</FONT></P> <CENTER><TABLE cellpadding="10"> <tr><td><IMG src="image/botan.gif"><FONT color="#800040" size="6" face="ＤＦＧ勘亭流">太極拳のコーナー</FONT></td></tr> <tr><td><FONT size="4" color="#000099" face="ＤＦＰ太楷書体"> 太極拳の簡単な解説と私が所属するサークルの活動模様を紹介しています</font> </td></tr><tr><td> <IMG src="image/botan.gif"><FONT color="#800040" size="6" face="ＤＦＧ勘亭流"> 俳句のコーナー</FONT></td></tr> <tr><td><FONT size="4" color="#000099" face="ＤＦＰ太楷書体">私が所属する 俳句教室の仲間の句、および名句鑑賞を載せております</td></tr> </TABLE></CENTER> <BR> </BODY> </HTML> |
リンクには、大別すると次の３種類があるます
@同じサーバー上の別のファイルへリンクする
A同じファイルの別の位置にリンクする
B他のサーバー上のファイルへリンクする
【同じサーバー上の別のファイルへリンクする】
ホットテキストを作るには、即ちキーワードやボタンをクリックし、file1と
いうファイルにリンクさせるようにするには<A>タグのhrefというアトリビュー
ト(属性)を用いて次のように記述します。
<A href="file1.html">ホットテキスト(Keyword/ボタン)</A>
(注)上の例はファイルが同じ階層にある場合です。
次は一つ下の階層、例えば同じ階層のimageと云うフォルダの中にある
(そのフォルダの下にある)file2へリンクさせる場合は、次のように記述します
<A href="image/file2.html">
逆に一つ上の階層のファイルfile3へリンクさせるときは、次のようになります
<A href="../file3.html">
【同じファイルの別の位置へリンクさせる】
同じファイル内のA点からB点へ飛ばしたい場合、例えば細長いページが出来て
しまい、そのページの途中からページのトップへ移動させたいときは次のように
記述します
<A href="#top">トップへ</A> (注)#は必須
そして画面のトップの位置あたりに、次のようなアンカーを記述します
<A name="top"></A> (注)#は不要
※ファイル内リンクの見本です。クリックしてください
トップへ
【他のサーバー上のファイルへリンクさせる】
他のサーバーにあるファイルにリンクするには、つぎのようにhrefにリンク先の
ＵＲＬを指定します。
<A href="http://member.nifty.ne.jp/mamoruokada/">メロウの青春手帳</A>
【メールを送信してもらうためのリンクの設定】
リンクの基本は以上の３種ですが、この際ホームページに訪問された方から意見や
感想など、メールで送って貰えるようにしましょう。
メールソフトを立ち上げるためのリンクです。 リンク先の指定はmailto:メール
アドレスとします
E-mail:<A href="mailto:okada@japan.interq.or.jp"> okada@japan.interq.or.jp</A>
以上で各種リンクの張り方について学んできましたが、上のソースプログラムにリンクを 張る仕組みを付け加えていきましょう。
@まず<BODY>タグに、つぎの３つの属性を追加します
<BODY bgcolor="#ddeeff"text="#0000cd" link="☆" vlink="★" alink="※" > link="☆" は、リンクがかかっている部分のテキスト色 vlink="★"は、既に訪れたリンクの色 alink="※"は、アクセス中のリンクの色を それぞれ指定します A太極拳コーナー、俳句コーナーの標題に付けられているボタンに、それぞれの コーナーに往くようリンクを張る
<A href="taikyoku.html"><IMG src="image/botan.gif"></A> <FONT color="#800040" size="6" face="ＤＦＧ勘亭流"> 太極拳のコーナー</FONT> <A href="haiku.html"><IMG src="image/botan.gif"></A> <FONT color="#800040" size="6" face="ＤＦＧ勘亭流"> 俳句のコーナー</FONT> B最後に、表紙の最下段にメールを送信してもらうためのリンクを設定します。なお、 これに先だって素材集からメール用のボタンを取り出し、mail.gifと名を付けイメージ フォルダに格納しておきます。メール用のボタンに簡単なコメントを付けます。この コメントとメール用のボタンをかっこ良く配置するために、１行２セルのテーブルを 使用します。
<center><table ><tr><td> <A href="mailto:okada@japan.interq.or.jp"> <img src="image/mail.gif" alt="mail" ></A></td> <td>ご意見･感想等ございましたら、<br>どうか お寄せ下さい。</td></tr> </table></center> このようにリンク関連のタグ及び属性を追加すると、ホームページの表紙は 次ページのようになります
