HTML では他の HTML 文書や画像ファイルなどに対するリンクを作成する ことができます。
先週使った HTML 資料に対してリンクを張ってみます。 こうすることで断片的な資料を一つのものとして便利に利用することが できます。
リンクの起点(クリックするとリンク先に移動する文字列、上の例では
"sample09.html"など)をアンカーと呼びます。
アンカー部分には「ここにはリンクがあります」ということを示すために、
通常の文字とは違う表示がされます。
(一般的には文字色が青色で下線がついたりします。ただ FONT タグの設定次第で
変えられるので、そうなっていないアンカーもあり得ます。)
断片的な情報をリンクで組み合わせて、まとまった情報として提供する、
というのは資料的な Web を作るときの基本的な手法です。
見やすい、理解しやすい Web 資料を作るとき、ひとまとまりの情報をどう分割して
各ページに配置するか、というのも Web 制作の重要な技術です。
(HTML書法に詳しくなっただけでは良い Web サイトは作れない)
リンクの対象(リンク先などとも呼ばれます)には HTML ファイルだけでなく、
画像などでもかまいません。
サンプルに彼岸花 (28KByte, JPEG, 講師撮影)
などを置いてみました。
リンクの起点(アンカー)にはテキストだけでなく、画像も使えます。
この顔に見覚えがないと思った人はリンクをたどって調べてください。
アンカーの目印として枠がついているのが分かりますか?
アンカー付き画像(左)と、付いていない画像(右)とで比べてください。
但し、この枠を付けないようにさせることもできますので、 常にアンカーには枠があるとは言い切れません。(下例)
まるでボタンスイッチのように見える絵を作ることができると思います。 これを利用して「ここをクリックするとこのような情報にたどり着けますよ」 という表現をさせることがよく行われています。
この例では BORDER= 指定を使うことで枠を表示させないようにしています。
下線がついていたりついていなかったり、枠があったりなかったりでは、
どれがアンカーでどれがそうでないか分からないと思うかも知れません。
枠を付けたり外したり、というのはデザイン上の配慮ですから、そうする
ことで分かりにくくなるようでは本末転倒です。そんなデザイン変更ならしない
ほうがまし、というものです。
逆に、そうした標準的でないアピアランス(見た目)であったとしても、
見る人にわかりやすい表現を捜すことがデザインには重要だということです。
例えばこのページの左下端のボタンは枠がありませんが、なんとなくクリック
してみたくなりませんか?(クリックすると何か起きそうに見えませんか?)