20. ハイパーテキスト

ここでは、(X)HTMLの最大の特徴であるハイパーテキストについて勉強してみよう。 ハイパーテキストとは、複数のWebページを相互に関連付ける仕組みのことだ。 そして、Webページ同士を関連付けることをハイパーリンク、あるいは単にリンクとも呼ぶ。

例えば、このホームページ基礎の表紙(トップページ)には、目次(コンテンツ)があるが、 それをクリックするとそれぞれのページが表示される。この仕組みがハイパーテキストであり、 クリックする部分には、相手のページへのハイパーリンクが指定されているわけだ。

サンプルの作成

まあ、お話はこれぐらいにして、実際に作成してみよう。まずは、複数のHTMLファイルが必要なので、 ここではサンプルとして「test1.html」と「test2.html」という2種類のファイルを同じフォルダに作成します。

test1.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ハイパーテキスト(1)</title>
</head>
<body>
    <p>これはtest1.htmlのページです</p>
    <p><a href="test2.html">ここをクリック</a>すると、
    test2.htmlのページに移動します</p>
</body>
</html>
test2.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ハイパーテキスト(2)</title>
</head>
<body>
    <p>これはtest2.htmlのページです</p>
</body>
</html>

サンプルを動かしてみる

では、最初にtest1.htmlをブラウザで表示してみましょう。うまく表示ができたならば、 「ここをクリック」と下線付きで表示されている部分をクリックしてみます。

そうすると、test2.htmlのページが表示されます。これがハイパーテキストの動きです。

このときtest2.htmlには、test1.htmlへのリンクを指定していないので、 前のページ(test1.html)に戻るためには、ブラウザの戻るボタンを使用します。 そしてtest1.htmlに戻るとリンク部分の色が変わってますが、これは一度訪問したことがある、 という意味です。実際には、この色や下線なども制御可能なのですが、 今はその辺りのことについては割愛します。

リンクのための要素

別のページにリンクするためにはa要素を使用します。 そのDTDは以下のようになっています。

<!ELEMENT a %a.content;>
<!ATTLIST a
  %attrs;
  %focus;
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #IMPLIED
  name        NMTOKEN        #IMPLIED
  href        %URI;          #IMPLIED
  hreflang    %LanguageCode; #IMPLIED
  rel         %LinkTypes;    #IMPLIED
  rev         %LinkTypes;    #IMPLIED
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  >

a要素の内側要素は「%a.content;」となっていますが、基本的にはインライン要素のみを記述することができます。 例外としては、a要素の中にa要素を記述することができないことです。

また、属性も沢山のものがありますが、他のページへのリンクに使用する属性は、href属性を使用します。 このhref属性には、リンク先のURLを指定しますが、今回のように同じフォルダに配置されている場合には、 ファイル名だけの指定でもかまいません。

これらのことをまとめると一般的なリンクの方法は、以下のようになります。

<a href="リンク先のURL">リンクテキスト</a>

ページの先頭に戻る


Copyright © 2006 御隠居 (滄洲). All Rights Reserved.