御隠居のホームページ基礎
20. ハイパーテキスト
ここでは、(X)HTMLの最大の特徴であるハイパーテキストについて勉強してみよう。 ハイパーテキストとは、複数のWebページを相互に関連付ける仕組みのことだ。 そして、Webページ同士を関連付けることをハイパーリンク、あるいは単にリンクとも呼ぶ。
例えば、このホームページ基礎の表紙（トップページ）には、目次（コンテンツ）があるが、 それをクリックするとそれぞれのページが表示される。この仕組みがハイパーテキストであり、 クリックする部分には、相手のページへのハイパーリンクが指定されているわけだ。
サンプルの作成
まあ、お話はこれぐらいにして、実際に作成してみよう。まずは、複数の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>
サンプルを動かしてみる
では、最初に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>