4.1.ハイパーリンク

4.1.1.ハイパーリンクしてみる

HTMLのHTMLたる所以はハイパーリンクにある訳です。というわけで、前回作ったXHTMLファイルから他のページをリンクしてみましょう。とりあえず今回はYahoo! Japanにでもリンクしてみましょうか。まず、新しくp要素(段落)を作ります。

<?xml version="1.0" encoding="EUC-JP"?>
<!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>
<title>HTMLとは何か</title>
</head>
<body>
<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>
<p>Yahoo! Japan</p>
</body>
</html>

次にYahoo! Japanという文字を<a></a>でアークアップします。

<?xml version="1.0" encoding="EUC-JP"?>
<!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>
<title>HTMLとは何か</title>
</head>
<body>
<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>
<p><a>Yahoo! Japan</a></p>
</body>
</html>

さらにa要素にhref属性を指定します。hrefの引用府(")内にはリンク先のURIを書きます。具体的なURIの書き方については4.1.2で説明します。

<?xml version="1.0" encoding="EUC-JP"?>
<!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>
<title>HTMLとは何か</title>
</head>
<body>
<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>
<p><a href="http://www.yahoo.co.jp/" >Yahoo! Japan</a></p>
</body>
</html>

これでYahooへのリンクは完了です。保存してブラウザを使って見てみましょう。下にサンプルを示します。

サンプル4.1.1：sample4_1_1.html

4.1.2.URIの指定

URIとはUniform Resource Identifierの略で，インターネット上のリソース（情報資源）を指し示すものです。 指し示し方はいくつもありますが、WWW上では"http://"で始まる形が多いです。"http://"で始まるURIの指定には、「絶対指定」と「相対指定」があります。絶対指定は"http://www.yahoo.co.jp/index.html"のように全体を指定する方式です。それに対して「相対指定」は現在のURIを基準にして指定します。

例えば現在のURIが"http://www.example.com/contents/index.html"だったとします。この場合、絶対指定で"http://www.example.com/contents/index2.html"となる指定は、相対指定では"index2.html"と表されます。"http://www.example.com/contents/contents2/index3.html"は、相対指定では"contents2/index.html"となります。また、"http://www.example.com/index.html"を指定する場合は、一つ上の階層なので"../index.html"となります。このようにインターネット上のディレクトリはコンピュータのファイルシステムと同様に階層構造になっています。

下記のサンプルでは階層構造を利用してリンクしています。ディレクトリごとZIP圧縮してあるので解凍して見てください。ソースを確認して、a要素のhref属性がどうなっているのか参考にしてください。

サンプル4.1.2：sample4_1_2.zip

コラム -URIとURL-

4.1.2でURIと聞いて「あれ？　URLじゃないの？」と思った人もいると思います。ここでちょっとURIとURLの関係について説明しようと思います。ちょっとややこしいと思うので、例の如くスルー可です。

URIがUniform Resourse Identifierの略だというのは前述しました。ではURLの方はというと、Uniform Resource Locatorの略です。で、本題。URIとURLの関係はというと、URIの中の主たるスキーム(Scheme)のいくつかの集合がURLです。

これだけだと何が何やらさっぱりだと思うので、さらに説明します。

まずはスキーム。これが分かればURLが何なのか分かりそうですね。スキームとはリソースを得るための方法のことです。httpやftpなどがあります。ftpはファイル転送に使います。他にもメールに使うmailtoもスキームです。皆さんが作成したWebページをブラウザで確認すると、アドレスバーに「file:〜」って出ますよね。このfileもスキームです。

スキームについて分かったところでもう一度URLの定義について考えてみましょう。URLとはURIの中の主たるスキーム(Scheme)のいくつかの集合でした。すなわちURIの中で主要なリソースの取得方法がURLということです。