ホームページの基礎 - HITP 広島工業大学専門学校

1.20 ハイパーテキスト

ここでは，XHTML(HTML)の最大の特徴であるハイパーテキストについて学習します。ハイパーテキストとは，複数のWebページを相互に関連付ける仕組みのことです。そして，Webページ同士を関連付けることをハイパーリンク，あるいは単にリンクとも呼びます。

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

1.20.1 サンプルの作成

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

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>ハイパーテキスト（１）</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>ハイパーテキスト（２）</title>
</head>
<body>
    <p>これはtest2.htmlのページです</p>
</body>
</html>

1.20.2 サンプルを動かしてみる

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

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

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

1.20.3 リンクのための要素

別のページにリンクするためには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>

ホームページの基礎（1. XHTML 編）

1.20 ハイパーテキスト

1.20.1 サンプルの作成

1.20.2 サンプルを動かしてみる

1.20.3 リンクのための要素