リンクとは、"そこをクリックすると他のページに飛んで行く"ことで、ホームページで最も重要な機能です。これにより、次々と新しいページを表示することができます。
ホームページ上でマウスカーソルを動かすと、マウスカーソルが手のマークになる部分があります。これがリンク部分で、ここをクリックすると別のページが表示されます。リンクするには次のように記述します。
<A HREF="パス/ファイル名">リンク先へ</A>
（パス/ファイル名の説明は
ここをクリックして下さい。）
それではindex.htmlから、「私の紹介」と「今日の日記」へのリンクを作ってみましょう。index.htmlの中の「私の紹介」と「今日の日記」の部分に、次のようなタグを追加します。
<A HREF="html/watasi.html">私の紹介</A>
<A HREF="html/nikki.html">今日の日記</A>
これをブラウザで見てみましょう。
ここをクリックして下さい。そして、「私の紹介」や「今日の日記」の部分をクリックしてみましょう。（「私の紹介」や「今日の日記」のページからindex.htmlに戻るには、ブラウザの戻るボタンを使って下さい。）
リンク部分の文字の色は、見る人のブラウザの設定によって変わります。これを、指定どおりの色で表示させるには、<A HREF=……>〜</A>の内部で文字色を指定します。また、スタイルシートでまとめて指定すると、クリックする前の色と後の色を別々に指定できます。
A:link{color:色１}
A:visited{color:色２}
A:hover{color:色３}
| 色１ | | クリックする前の色
|
| 色２ | | クリックする後の色
|
| 色３ | | マウスをのせた時の色
|
これまでに作成した３枚のページを互いにリンクして、ページ間を自由に行き来できるようにしましょう。
style02.cssに次の記述を追加します。
.cnt{text-align:center}
.link{background:white;padding:10px}
watasi.htmlとnikki.htmlの下部に、次のようなリンクを追加します。
<DIV CLASS="
cnt">
<SPAN CLASS="
link">
[<A HREF="../index.html">index</A>]
[<A HREF="watasi.html">私の紹介</A>]
[<A HREF="nikki.html">今日の日記</A>]
</SPAN>
</DIV>
これをブラウザで見てみましょう。
ここをクリックして下さい。そして、「私の紹介」や「今日の日記」のページに行き、下にある各ページへのリンクをクリックしてみましょう。
[参考]各ページの最終のＨＴＭＬファイルとスタイルシート
