Ume Jam HTML help - How to: URLs and Hyper-text links

URLとハイパーテキスト・リンクの作り方

URLについて
アンカーの作り方
基本的なリンクの作り方
インターナル・リンクの作り方

URLについて

URL (Uniform Resource Locator)はリソース (resource)のあるロケーション、例えばホームペイジのある住所を表わすものです。

　Example:
　http://www.abacuss.com/public_html/index.html

ブラウザー画面のロケーション（Location）に表示される上のようなものがURLです。
http://www.abacuss.com/の後、public_html/index.htmlのローカル部分はリラティブURLと呼ばれ、URLにはコンプリートURLとローカル部分だけを記述するリラティブURLと呼ばれる二つの記述の仕方があります。

コンプリートURL (Complete or Absolute URL)
例えばインターネット上にパブリッシュするドキュメントを作る時に必要です。つまり全てのウェブ・サイト（ホームページ）にこのURLがあります。
リラティブ URL(Relative URL or Partial URL)
例えば、ウェブサイトのデザインでリンクを作る時、もしリンク先のドキュメントが同じフォルダー内にある別のファイルにリンクする時にこのリラティブURLを使います。同じフォルダー内にあるということは同じデレクトリーにあるということで、コンプリートURLを付ける必要はありません。こうした時はリラティブURLを使います。

URLの構造

URLは、プロトコル・インディケイター、ホスト名、パス名、そしてファイル名で構成されています。
例えば、http://www.abacuss.com/html_guide/index.htmlの場合は、

http://: プロトコル (protocol indicator)です。
これは情報の送り方（どの種類のプロトコル (protocol)を使っているのかを）サーバーに伝えます。WWWではhttpというプロトコルを使います。httpはHyper Text Transfer Protocolの略です。
プロトコル名は他にも沢山あります。例えば、FTP(File Transfer Protocol)は ftp://です。あるいは、 e-mailの場合は mailto:です。
www.abacuss.com: サーバーのホスト名です。
ドキュメントがあるコンピューターの住所のようなものです。
html_guide: パス名です。
ホストコンピューター上にあるドキュメントが入っているフォルダー名です。
index.html: ファイル名です。
ディレクトリー（フォルダー）に入っているファイル名です。（プロバイダーから“フリー・ホームペイジ”と言われるようなサービスを受けている場合は、このファイル名はサーバーのディレクトリー内にすでに作られている場合があります。ファイル名は、index.html, default.html, homepage.html, のいづれかの場合が多いようです。)

URLの書き方

コンプリートURL (Complete URL)
これは、プロトコル・インディケイター、ホスト名、パス名／ファイル名を全て持つURLです。
リラティブURL (Relative URL)
これはコンプリートURLの最後の部分、パス名／ファイル名です。リンクを作る場合に使われますが、リラティブURLは、コンプリートURLと同じプロトコル名、同じホスト名の省略でなければなりません。

ウェブページ作成でリンクを作る場合は必ずこのリラティブURLを使うようになります。
例えば、今いるドキュメント（ファイル）のURLが次のようだとして、

http://www.abacuss.com/html_guide/index.html
この "index.html"というドキュメントから、"html_guide"という同じフォルダーにある別のドキュメント、例えば "a.html" というファイルにリンクさせる場合のリラティブURLは、"a.html" となります。

リラティブURL：a.html
のコンプリートURLはhttp://www.abacuss.com/html_guide/a.html です。

リラティブURL：img.html
が意味するコンプリートURLは：http://www.abacuss.com/html_guide/img.htmlです。

ページ作成の側から言うと、"a.html" と"img.html"というファイル（ドキュメント）は "html_guide"というフォルダーの中に"index.html"というファイル（ドキュメント）と一緒に入っていなければなりません。

リラティブURL：images/background.gif
のコンプリートURLは：http://www.abacuss.com/html_guide/images/background.gifです。

この場合はディレクトリーが一つ深くなっています。"background.gif"というファイルは"html_guide"というフォルダーの中にある"images"というフォルダーの中に入っていなければなりません。
ディレクトリーが深くなって行く場合はフォルダー名を書き足していけばいいわけですが、逆に戻したい場合、ディレクトリーを一つupさせたい場合はファイル名の前に"../"を付けます。

リラティブURL：../wilbur/br.html
のコンプリートURLはhttp://www.abacuss.com/wilbur/br.htmlです。

この場合は、"html_guide"というフォルダー（ディレクトリー）から出て"wilbur"というフォルダー（ディレクトリー）の中にある"br.html"というファイルを指しています。

ここまでのリラティブURLの例は全てhttp://www.abacuss.com/html_guide/index.htmlというURLをもつドキュメント（ファイル）"index.html"に対してのリラティブ (relative)URLです。
リラティブURLを使ってリンクを作る場合は、今いるドキュメント（ファイル）に対してリンク先のドキュメント（ファイル）のフォルダー（ディレクトリー）／ファイルの位置関係を間違えず記述しなければなりません。

目次に戻る

アンカーの作り方

アンカーにはAタグを使います。＜A＞...＜/A＞はアンカータグで、必ずペアーで使います。このタグに挟まれたテキストやグラフィックがリンクの為のクリック・ボタンになります。
このアンカータグには必ず次の二つのアトリビュート (attribute)のうちのいづれか一つが入ります。アトリビュートは通常オプションですが、このアンカータグではAタグがそれだけで使われることはありません。

HREF="url"　はリンクのジャンプ先をURLで指定するアトリビュートです。
NAME="テキスト"　はインターナル・リンクで使われ、リンクの受けつけ先を指定するアトリビュートです。

基本的なリンクの作り方

<A HREF="URL"> テキスト</A>

注意：
URLはケイスセンシティブ(case-sensitive)です。どういうことかと言うと、
例えば、Cats.htmlとcats.html を比べた場合、case-sensitiveの場合は違うファイルだと認識します。URLはcase-sensitiveですから、リンクやアンカーを作るときは終始同じにしなければなりません。

例えば、"cats.html"と"bubu.html"という二つのドキュメントを使ってリンクを作る場合、

<HTML>
  <HEAD> <TITLE>CATS</TITLE> </HEAD>
   <BODY>
     <P>
     ウチの猫はデブです。
   </BODY>
</HTML>

上の"cats.html"というドキュメントの「猫」をアンカーにして、もう一つの"bubu.html"というドキュメントにリンクを作ります。

Aタグで「猫」を挟みます。
　ウチの<A>猫</A>はデブです。
AタグにHREF="URL"を入れますが、この場合に"bubu.html"というドキュメントが "cats.html"と同じフォルダーに入っている場合のURLは "bubu.html"です。
　ウチの<A HREF="bubu.html">猫</A>はデブです。
もし "bubu.html"が違うフォルダーにあり、そのフォルダーが"cats.html"の入っているフォルダーの中にある場合は、
　ウチの<A HREF="フォルダー名/bubu.html">猫</A>はデブです。

となります。
もし "bubu.html"が違うフォルダーにあり、"cats.html"の入っているフォルダーから出なければならない場合は、
　ウチの<A HREF="../フォルダー名/bubu.html">猫</A>はデブです。

となります。"../"で一つUPになりますが、二つUPさせる場合は"../../"と書いて下さい。

フォルダー名あるいはディレクトリー名と言いますが、正確にはパス（path)名のことです。ファイル名を間違えることはないと思いますが、このパス名を書く時はそれぞれのファイルがどのディレクトリーにあり、どういう関係になっているのかを間違えずに書かないとリンクは働きません。

インターネットでの他のドキュメントへのリンク

やり方は同じですが、必ずコンプリートURL が入ります。
例えば、ドキュメント"bubu.html"をABACUSSのサイトにリンクさせる場合は、

Example:
ウチの<A HREF="http://www.abacuss.com">猫</A>はデブです。

HTTP以外のプロトコルインディケイターをもつサイト、例えば、FTP (ftp://), Gopher (gopher://)　といった違うプロトコルを使うURLへのリンクも同じです。

目次に戻る

インターナル・リンク

インターナル・リンクは、同じドキュメント内で作るリンクの事です。例えば、このドキュメントの中で使ってる、目次からそれぞれの項目にジャンプするのがそうです。ドキュメントが長くなる場合には非常に便利です。

インターナル・リンクを作る場合は、リンク用のアンカー：
　　　<A HREF="#ターゲット名">
とリンク先（ターゲット）になるテキストにネイム・アンカー：
　　　<A NAME="ターゲット名">
の二つのアンカーを使います。

例えば、このページの最初にある目次には四つの項目がありますが、それぞれにターゲット名が付けてあります。ターゲット名は何でも構いません。目次の「インターナル・リンクの作り方」というテキストには、

　　　<A HREF="#c4">インターナル・リンクの作り方</a>

というアンカーが付けてあり、同じターゲット名をネイム・アンカーとして実際のセクションのヘッディイングに付けてあります。
　　　　　　<H2><A NAME="c4">インターナル・リンク</a></h2>

NOTE
ネイム・アンカーは、二つのドキュメント間でも同じように使う事ができます。その場合はリンク用のアンカーに書かれるURLの後に"＃ターゲット名"を付けます。これは "URL fragment indetifier" と呼ばれます。

URLに関するもっと詳しい情報が欲しい場合は：
http://www.w3.org/pub/WWW/Addressing/Addressing.html

URL specifications
ftp://ftp.funet.fi/pub/doc/rfc/rfc1738.txt (コンプリート URL)
ftp://ftp.funet.fi/pub/doc/rfc/rfc1808.txt (リラティブ URL)

[HTML help] [Basics] [HTML 3.2] [Beginner's] [How]

ABACUSS LTD.
www.abacuss.com