ハイパーリンクを設定するタグをアンカータグと呼びます。anchorは「錨、頼みの綱、力となるもの」という意味があります。
アンカータグはHTMLの名前にもある通り、クリックするとリンク先の文書を開くというハイパーテキストの機能を実現します。
単純に画面にあるテキストを読むだけではなく、そこから他の文書への参照をたどって開くことがHTMLたるゆえんなのです。
ですから、リンクの機能はHTMLになくてはならない機能と言えます。
まずは、クリックする位置にアンカータグを準備し、オプションで呼出先を記述します。
| href … | クリックして呼び出すファイル名。 同じサーバーの同じディレクトリにある場合はファイル名だけで呼び出せる。 同じサーバーの別ディレクトリの場合は、絶対指定または相対指定を使ってファイルを指示する。 異なるサーバーの場合、絶対指定でファイルを呼び出す。 |
| ソース | 表示 |
|---|---|
| <a href="index.html">ここをクリック</a> | ここをクリック |
| <a href="http://www.shurey.com/html/index.html">ここをクリック</a> | ここをクリック |
| <a href="mailto:user@dammy.com">メールを出す</a> | メールを出す |
上記例では、1段目が相対指定、2段目が絶対指定です。相対指定の詳細は後述します。
3段目はクリックするとメールのソフトが開きます。詳細はこちらを参照してください。
| name … | 文書の途中へのリンクを設定。 呼び出す位置に<a name="任意の名前"></a>を用意しておき、<a href="#任意の名前">と「#」を使って任意の名前で設定した行が画面の先頭に来るように表示する。 同じ文書内の場合、「#任意の名前」だが、他の文書の場合はファイル名を前に付ければよい。 |
| ソース | 表示 |
|---|---|
| <a name="hr">ここにリンク</a> | ここにクリック |
| <a href="#hr">ここをクリック</a> | ここをクリック （同じ文書内へのリンク） |
| <a href="table.html#hr">ここをクリック</a> | ここをクリック （別の文書内へのリンク） |
| target … | リンク先をどの画面に表示するか指定する。 基本は「_blank」「_parent」「_self」「_top」でこれらは役割が決まっている。その他に任意でウインドウやフレームに名前を付けておき、その部分にリンク先のファイルを表示させる方法もある。 フレームの中でアンカータグを使った場合、targetを指定しないと同じフレーム内にリンク先を表示する。 |
_blank： |
新しいウインドウ（空のウインドウ）を開いて表示 |
_parent： |
フレーム用。１つ上のフレームに表示 |
_self： |
フレーム用。アンカーのあるフレームに表示 |
_top： |
フレーム用。もっとも上のフレームに表示（画面を完全に切り替える） |
| ソース | 表示 |
|---|---|
| <a href="index.html" target="_blank">ここをクリック</a> | ここをクリック |
| title … | マウスをリンクに乗せたときに表示する文字列。 一部のブラウザのみ対応するので使用には注意が必要だが、最近のブラウザであればほぼ対応しているだろう。 |
| ソース | 表示 |
|---|---|
| <a href="index.html" title="クリックしないで">ここをクリック</a> | ここをクリック |
ファイルの呼出方法には、相対指定と絶対指定の２つの方法があります。
コンピュータはファイルを複数のディレクトリに分けて管理していますが、それらは単に横に並んでいるだけでなく、ディレクトリの中にもディレクトリを作って細分化されているのが普通です。
例えば、Windowsでは「マイドキュメント」フォルダで文書を管理しています。Macintoshならば「書類」フォルダや「Document」フォルダです。
これらはフォルダと称していますが、元々の呼び名であるディレクトリという言葉をサーバでは使います。
もしあなたが、マイドキュメントの中にホームページ用のファイルを作るとします。その時、そのままファイルを保存してしまうと、他のファイルと混ざってしまいますし、今後ホームページ用のファイルが増えていくと更に問題が発生するのは明白です。
そこで、「新規フォルダを作成」して「ホームページ」などと名前を付けて、その中にファイルを保存します。
そして、更にホームページで使用する画像は「image」というフォルダに、日記のページは「diary」フォルダにまとめます。
「ホームページ」フォルダがサーバに送られて、ホームページとして一般に公開されるサイト（一群のWeb用ページ）となります。
| サイト内のファイルツリー表示（例示） | ||||
|---|---|---|---|---|
| [ホームページ] （ルートディレクトリ） |
┳index.html | |||
| ┣myroom.html | ||||
| ┣mycar.html | ||||
| ┣myfavorite.html | ||||
| ┣[image] | ┳ds001.jpg | |||
| ┃ | ┣ds002.jpg | |||
| ┃ | ┣ds003.jpg | |||
| ┃ | ┣ds004.jpg | |||
| ┃ | ┣ds005.jpg | |||
| ┃ | ┗[2006] | ┳[09] | ━ds011.jpg | |
| ┃ | ┗[10] | ━ds021.jpg | ||
| ┗[diary] | ┳index.html | |||
| ┣page02.html | ||||
| ┣page03.html | ||||
| ┣title.gif | ||||
| ┗myphoto.jpg | ||||
ホームページフォルダ内には４つのファイルと２つのフォルダがあります。[image]フォルダには５つの画像ファイルがあり、diaryには３つのHTMLファイルと２つの画像ファイルがあります。
これらをサーバに送るとホームページフォルダが、ルートディレクトリ（根幹のディレクトリ）となります。
ファイルとディレクトリには上下関係ができあがります。それを「親」「子」と言います。
ルートディレクトリから見て、子には[image]と[diary]があります。逆に[image]ディレクトリの親はルートディレクトリとなります。
１つのサイトに属するファイル同士で呼び出すには相対指定を使います。絶対指定も可能ですが、単に記述が長くなるだけです。
異なるサイトのファイルを呼び出す場合には、必ず絶対指定が必要になります。そうでないと、相対指定とみなしてエラーを表示するか、偶然存在するファイルを表示することになります。
同じディレクトリにある場合、ファイル名だけで呼び出します。
例えば、index.htmlにmyroom.htmlへのリンクを貼る場合、<a href="myroom.html">とタグを書きます。
index.htmlはルートと[diary]と両方にありますが、これらは別のファイルです。同じ<a href="index.html">でも、どっちのディレクトリ内から呼び出すかで、異なるファイルが呼び出されることになります。
特殊な事例として、同じディレクトリを示すために「.」を使うことがあります。表記は「./index.html」となります。
親ディレクトリにあるファイルから子ディレクトリ内のファイルを呼び出す場合、子ディレクトリの名前を付けてファイルを指定します。
例えば、
myroom.htmlに画像を貼り付ける場合、<img src="image/ds001.jpg">などとします。これで[image]内のds001.jpgを呼び出しています。
「/」がディレクトリの区切り記号になります。「image/2006/09/ds011.jpg」などとした場合は、[image]ディレクトリ内の[2006]ディレクトリ内の[09]ディレクトリ内のds0001.jpgファイルを指していることになります。
myroom.htmlから同じディレクトリ内のindex.htmlを呼び出す場合は「index.html」、[diary]フォルダに入っているindex.htmlを呼び出すときは、「diary/index.html」とします。
子から親を指し示す場合は、特殊な記号を使用します。「..」が親ディレクトリを示します。
[diary]内のindex.htmlからルートのindex.htmlを指す場合、「../index.html」となります。親の親の親の場合「../../../index.html」となります。
子から別の子ディレクトリのファイルを示す場合、一端、親ディレクトリを指してから、子ディレクトリをたどります。
[diary]内のindex.htmlから[image]内のds001.jpgを呼び出す場合、「../image/ds001.jpg」です。
親や子どもが複数の段階になることもあり、「../../../2006/09/ds011.jpg」などとなることもあります。
ファイル同士の相対関係を考えずに、URLの表記を頭のプロトコル名から記述します。
異なるサイトへのリンクは必ず絶対指定となります。相対指定ができる場合でも、絶対指定でファイルを指定することができます。
例えば「http://www.shurey.com/index.html」「http://www.shurey.com/diary/index.html」「http://www.shurey.com/image/2006/09/ds011.jpg」などです。
先頭の「http」が通信のルールであるプロトコルを示しています。ここではWEBブラウザを使ってファイルを呼び出すことを示しています。他にファイルを転送するためのftpというプロトコルがありますが、通常はプロトコル毎に専用のソフトを使います。ちなみにブラウザでは「https」というプロトコルも使用できますが、これは暗号通信で、サーバが対応していないと通信できません。
アンカーを使ってメールを開くことができます。ホームページにメールアドレスの入ったリンクを作ることで、クリック１つでメールを手軽に出してもらうことを促します。
基本は「<a href="mailto:user@dammy.com">メール</a>」のように mailto: と書いてから送ってほしいメールアドレスを書きます。
他にメールのタイトルや本文なども指定することができますので、こちらを参照してください。
<a>タグを使えば、自分の作ったファイルだけでなく、無数にある全てのインターネット上のファイルにリンクをすることができます。これがインターネットの無限の可能性を予感させる要因でもあります。
しかし、リンクとは言え、先方にあるのは他人が作ったコンテンツです。
いくつかの注意点を覚えて置きましょう。
<a>を使ったリンクのことで、相手の了解を取っていないものを無断リンク、相手が了解がいらないことを明記しているのがリンクフリーです。
ただし、WEBの基本はリンクによる発展ですから、そもそもリンクをするのにためらいはありませんでした。しかし、自分のコンテンツを公開しながらも、リンク元を見極めるために「無断リンクを許可しない」と明記するサイトがあります。本を出版しておいて、作者が立ち読みするなと言っているようなものでしょうか。拘束力はありませんが、大抵は事後承諾になっているので掲示板やメールなどで一言リンクをしたことを伝えれば良いでしょう。
リンクフリーの記述がある場合でも、一言感想をもらえるのは嬉しいものです。リンクをしたら、積極的に連絡をした方が良いと思います。通常、自分のサイトに関連する記事がある場合にリンクをすることが多いので、逆にその内容を見てもらう機会にもなるからです。
<a>や<img>タグを使って、相手のサイト内の特定ページや特定のアイコンに直接リンクを貼ることで、大変なマナー違反となります。
通常はサイトの入り口（最初に表示されるページ）にリンクを貼ります。また、作者が指示している場合はそれに従います。サイトによっては特に明記もなく、入り口以外のページにリンクを貼っても良い作りになっていることもありますので、個別のページへの直リンクがたちまちマナー違反となる訳ではありません。
問題は、コンテンツ内に埋め込まれたファイルへの直リンクです。ページ内に置かれた画像やアイコンを自分のページで使うために<img>タグでリンクをするのは、２つの点で問題があります。１つは、他人が作ったものを自分の物のようにしてしまうことで、著作権法違反にもなります。例え、コピーして自分のサイトに置いたものであっても、違法行為となります。もう１つは、不正なアクセスの発生を与えて、先方のサイトに負荷を掛ける行為です。正常なアクセスとは閲覧をするための行為です。しかし、直リンクにより発生するアクセスは先方にとっては閲覧者によるものではありません。ひどい場合はサーバ攻撃と同じ効果があります。
例え先方が素材を配布するサイトであっても、不正なアクセスを歓迎する訳ではありません。ほとんどの素材サイトは個人運営で、素材のコピーは許可しても直リンクは許可していません。
若干著作権法に触れておきます。
直リンクは厳密に言うと、著作権法上は問題ないかもしれません。ただ、他人の作った物を自分の作った物と混同させたり、詐ったりすれば言い逃れのできない違法行為となるでしょう。
他人の作った文章も無断でコピーすると違法行為です。もし、抜粋して記述したならば、参照元を明記してリンクをするのがマナーとなります。