HTML4.0の基本

ハイパーリンク

2009年8月5日

ハイパーリンク

HTMLを勉強していたと気に、一番興奮したのがハイパーリンクでした。初心者には少し難しいかもしれませんが、このタグが使えるようになるときっと自信が持てると思いますよ。

アンカーリンク:<A href=""></A>

HTMLの最大の利点は、テキストのある部分や画像から、 他のドキュメントの特定の場所や画像へリンクを張れることです。 リンクを持つ場所は、ブラウザ側で明示的に他のテキストとは違うスタイルで表示されます(標準的なブラウザでは、リンクが張ってあるテキストは色と下線が付けられます)。

<a href="index.html">Maine</a> 

この例では、Maineという単語をクリックすることでindex.html というドキュメントへ移動することになります。

 また、リンクを張る際、このようなテキストだけでなく、後述するドキュメント内画像(インライン・イメージ)をアンカーとして使用する事もできます。 例えば、

<a href="index.html"><img src="anchor.gif"></a>

とした場合、ドキュメント内画像として表示されている"anchor.gif"という画像が、index.htmlというファイルに対するアンカーとして機能します。

注意:アンカータグの中で改行を行うと、余計なスペースが入ってしまう場合があります。


リンクの張り方

URIは、他のファイルを指すときに使用されるフォーマットです。別のサーバーにあるファイルにアクセスする時などに使用されます。

別のサーバにあるHTMLファイルを指定するには、前に説明したURIを使用し ます。URIでは、アクセス先のリソースの種類とファイルまでのパスを記述します。書式は、

プロトコル://サーバー.ドメイン/パス/ファイル名

となります。

<a href="http://www.rfs.jp/">Rhythmのホームページ</a>

プロトコルの種類

file
ローカルシステムや、anonymous FTPサーバーにあるファイルを指定するとき
http
WWWをブラウズ
news
ネットニュースへの読み書き
mailto
電子メールの送付
telnet
他のサイトに対する遠隔操作
wais
情報の検索と入手

相対パスと絶対パス

HTMLファイルはサーバーコンピュータの中の自分のディレクトリに格納されます。このディレクトリ内のファイル間をリンクさせることをローカルリンクといいます。これに対して自分のディレクトリの外につなげるリンクをグローバルリンクといいます。

 HTML文書の指定方法は、相対パス指定と絶対パス指定の2通りがあります。グローバルリンクでは,当然 http から始まるURLを書き込むことになります。このULIで指定する方法が絶対パス指定で,前述にある

<a href="http://www.ntt.jp/">NTT Home Page</a> 

がそうです。

 ローカルリンクは相対パスで指定します。相対パス指定は現在いるディレクトリを元にパスの指定を行います。

同じディレクトリのファイルへリンクする場合
href="index.html"

下のディレクトリ(files)のファイルへリンクする場合
href="files/file.html"

上のディレクトリのファイルへリンクする場合
href="../file.html"

相対パス指定と絶対パス指定のどちらがよいかは難しいですが、絶対パスの場合、そのファイルやディレクトリを動かすとHTMLファイルの中身をいじらない とハイパーリンクの設定がおかしくなります。そのため、ディレクトリ内で一 つにまとめられるものは、できる限り相対パス指定を行なう方がよいでしょう。

他の文書の特定の場所へリンクする

アンカーは文書の特定の場所に移動する時にも利用されます。同じ文書でも別 の文書(ローカル、リモート区別なく)でも利用できます。(便宜的に文書の特定場所にアクセスするポイントをアンカーと区別してラベルといいます)

 文書Aから文書Bの特定部分にリンクを張りたい場合、文書Bにあらかじめ名前の付いたラベルを設定しておかなければなりません。 ラベルは<a name="ラベル名 ">テキスト</a>のように指定します。例えば、文書BにLabel1という名前の付いたアンカーを加えたい場合、

<a name="Label1">他の文書の特定位置に移動します</a>.

という具合に記述します。この部分は、ハイパーリンクのように色が変わったりせず、通常の本文と同じです。

 文書Aに今までのようにラベルを記述します。ファイル名のあとに先ほど文書Bに書いた名前付きのラベルを #(シャープ) を付けて記述します。

This is my <a href="documentB.html#Label1">link</a>.

これで、文書Aの link という単語をクリックすることで文書Bの some text という箇所へ移動できます。

 同じ文書内の特定部分へのリンクもまったく同じように設定すればいいです。ただし、ファイル名は必要なくなります。つまり、

<a href="#Label1">同一文書内で移動します</a>. 

というようになります。

また、リモートホストでの指定は、

href="http://ホスト名/パス名/文書名#リンク名"

となります。これらは、インデックスファイルを作る場合に便利です。

画像を使ってリンクする

リンクタグは、画像をクリックして他のページに飛ぶようにすることもできます。

<a href="文書ファイル名.html"><IMG src="画像ファイル名.gif"></a>

ボーダーの調節

※ここで説明するborder属性は廃止される予定です。

リンク画像にはデフォルトで2ピクセルのボーダーがつきます。これにborder属性を使って太さを変えたり、またボーダーを取り除くことができます。

<a href="文書ファイル名.html"><IMG src="画像ファイル名.gif" border=0 ></a>

<a href="文書ファイル名.html"><IMG src="画像ファイル名.gif" border=5 ></a>



border=0


border=5

サウンドとムービーにリンクする

サウンドやムービーのファイルをダウンロードできるようにするには、<a href="">タグでそれらのファイルにリンクします。

<a href="サウンドファイル名.au">テキスト</a>

<a href="ムービーファイル名.mov">テキスト</a>

サウンドやムービーファイルはファイルサイズが大きくなりがちなので、できればファイルサイズを書き加えておきましょう。

<a href="サウンドファイル名.au">テキスト 140K</a>

<a href="ムービーファイル名.mov">テキスト 1,510k</a>

文書ベースタグ:<BASE>

文書ベースタグはその書類に含まれるファイルのパス名を相対パスで指定する 際に基準となるパス名を記述するタグで<HEAD>~ </HEAD>(ヘッダ部)内に置かれます。例えば、http://www.foo.co.jp/docs/index.htmlを基準とした場合、

<base href="http://www.foo.co.jp/docs/index.html">

となります。パス名を../foo/index.htmlと指定すると、 http://www.foo.co.jp/foo/index.htmlを指定したことになります。

関連記事

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。