HTMLにおけるファイル等の指定

HTMLの指定に関する一般的な情報

HTMLファイルはご存知のようにテキストのみでできています。にもかかわらず多くのWebサイトは画像、背景の画像、マルチメディアの要素、Javaアプレット、フラッシュ・アニメーションなどを含んでいます。HTMLではそのような要素は(画像などの)ファイル等を名前を挙げて指定し、呼び出します。

自分のサイト内、あるいはよそのサイトへのリンクという形で他のファイル等を利用するには、リンク先を挙げます。HTMLではそのために「指定」という作業をしなければなりません。

カスケード・スタイルシート(CSS)JavaScriptのような補足言語にも他の情報源を指定しなければならない場合があります。

指定の規則はその場合も同じです。

そういうことができるのは、Web上のアドレスの書き方の要綱が統一されているからです。個々のOSのシンタックス(文法構造、書き方の規則)が違ってもこの規則は同じように有効で、Web上のどの情報源にでもきちんと指定ができるようになっています。

上へ下へ

完全なURIで指定する

希望のファイルが最新のWebサービスにない場合は完全なURIで指定しなければなりません。

URI( Universal Resource Identifier、インターネット全体でファイルの所在地をみつけるシステム)は例えばhttp://www.teamone.de/http://selfhtml.teamone.de/html/allgemein/referenzieren.htm のようなものです。

両方のアドレスの例は同時にURL ( Uniform Resource Locators、インターネット内の情報所在地発見のための情報記述方法、あるいは情報 )でもあります。

ただでさえ分かりにくい話ですが、混乱をさらに大きくするためについでにURN( Uniform Resource Names、統一された情報名) にも触れておきましょう。

これは単に情報ファイルの名前を意味しています。

URNは実際に存在はするもののネットで知られているインターネット・プロトコルで呼び出すことができない情報源やリソースを間違いなく指定するためにあります。

URIというのはURLとURNの上位に立つ用語です。

URIとURLは普通のアドレスの場合事実上は同じようなもので、アドレスの背後に具体的なファイルや情報源があります。

HTML規格ではURIという言葉を使って話を進めます。

URIの例

http://www.yose-no-fan.co.jp/
http://www.yose-no-fan.co.jp/index.htm
http://www.yose-no-fan.co.jp/index.htm#okuzuke
http://www.yose-no-fan.co.jp/haikei.gif
http://www.yose-no-fan.co.jp/praesentation.pdf
http://www.yose-no-fan.co.jp/cgi-bin/search.cgi?keyword=mouse-hunt http://www.google.com/search?hl=de&safe=off&q=Stefan+M%FCnz&lr= ftp://www.yose-no-fan.co.jp/praesentation.pdf
http://192.168.78.10/
http://www.yose-no-fan.co.jp:8082/secret.tm

説明

完全なURIというのはインターネット・プロトコルの指定からできています。http や ftp の後にコロン( : )が続きます。ローカルのネットの名前を入力する場合もあります。これはプロトコルによって違います。この部分の入力はスラッシュが2回( // )来て終わります。たいていのアドレスの場合この2つのスラッシュの間には何も書きません。この入力の後にネットのホスト・コンピューターのアドレスが来ます。

そこに情報源があります。

ドメイン名の場合もありますし、数字のIPアドレスの場合もあります。ドメイン名は上の例で言うと ihr-guter-name.de です。その前のwww はWebで典型的な、そしてWebサーバーで設定可能なサブドメイン初期設定です。

ホスト・コンピューターの宛名書きの後にコロンで区切られたポート番号が続きます。

上の例では :8082 です。

これは情報源に http のような指定されたプロトコルのスタンダード・ポートでは行き着けず、他のポートでなければならない場合は、常に必要です。

実際にはポートの入力が必要なことはまれですが知っておいて損はありません。

その後、最後に希望の情報源へ通じるローカルのパス名を入力します。ディレクトリーのパスはいつでもスラッシュ1本( / )で区切ります。どのOSを使うかは関係ありません。

記述されたパス名を正しく解読するのはサーバー・ソフトエウアの仕事です。このようなわけでユーザーは相手方がどんなコンピューターを使っているかあれこれ考える必要がありません。コンピューター上ではどのファイル、どの情報源でもアクセスすることができます。

http のように指定したプロトコルを通じて宛先に届く状態になっているということが前提です。この時必ずしもファイルでなくてもかまいません。

# と名前を使ってHTMLファイル内の特定のアンカーで記された部分に来ることもできます。そのようなアンカーをどうやって定義するかはアンカーを定義し、アンカーへリンクを張るという章を参照してください。

上の例 search.cgi?keyword=mouse-hunt のようにパラメーターを使ってCGIスクリプトを呼び出す時もURIです。

ASCIIの文字セットに含まれていない文字・記号、あるいはURIで特別な意味を持つ文字・記号(例えばスラッシュ、コロン、パーセント記号)はURI内で書き換えなければなりません。

これは % 記号の入力を16進法の数値で入れるという形で行います。

上の例ではM%FCnzとなっておりFC というのが16進法の数値 252 を意味し、これはドイツ語のウムラウト ü を意味しています。

注意

ここに書いた内容は実践向きで、内容をもれなく把握しているものではありません。URIの構想はここに書かれたよりずっと内容が細かく区別されています。関心のある方はRFC 1630 を参照してください。自分の提供するWebサービスの情報源はもちろん完全なURIでも指定できます。

ただしそれをすると自分で自分に制限をすることになります(これについては下にある下へ相対的なパスの記述で基本URIに対する関係を示すという章のコメントを参照してください)。

上へ下へ

絶対的なパスの記述で基本URIに対する関係を示す

希望の情報源が同じホスト・コンピューターにあり、現在のプロトコルが使え、スタンダード・ポートがみつかる場合、この指定の方法を選ぶことができます。条件がいろいろあって複雑に聞こえます。

完全なURI

http://selfhtml.teamone.de/html/allgemein/referenzieren.htm の中の/html/allgemein/referenzieren.htmという部分は絶対的なパス名で、基本URIであるhttp://selfhtml.teamone.de に対する関係を示しています。

自分の提供するWebサービスの中、自分のドメインあるいはサブ・ドメインの中ではこのようなパス名が使えます。

/index.htm
/index.htm#okuzuke
/haikei.gif
/praesentation.pdf
/cgi-bin/search.cgi?keyword=mouse-hunt
/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=

説明

基本URIの後の最初のスラッシュ( / )は各インターネット・サービスの中心部分のディレクトリーのためにあります。たいていはユーザーがアクセスする本当のコンピューターやハードディスクの中心的ディレクトリーをさしているわけではありません。Webサーバーでは例えばどのディレクトリーを実質的に中心的ディレクトリーにするかを設定することができます。基本URIの後には上へ完全なURIで指定する の章に出てきたものすべてが続きます。

上へ下へ

相対的なパスの記述で基本URIに対する関係を示す

これは現在のURIを相対URIとして選べる場合に使えます。それが可能な場合はここから相対的に指定することができます。

URI

http://selfhtml.teamone.de/html/allgemein/referenzieren.htmとあるHTMLファイルは例えば画像を指定する時../../src/logo.gif と入力します。

これは「ディレクトリで2段階上に上がれ、そこから下位ディレクトリのsrcに入れ、そこでlogo.gifというファイルを見つけろ」という意味です。絶対パスに置き換えるとhttp://selfhtml.teamone.de/src/logo.gifとなります。Webプロジェクト内の場合、相対的な指定の方法をお勧めします。

何かの理由でWebプロジェクトを他のアドレスに移した場合でも、この方法ですとプロジェクト内のすべてのリンクと画像指定が問題なく機能します。プロジェクトをCD-ROMや他のメディアを使って発表するような場合は相対的な指定でなければなりません。

./ kara.htm
./kara.htm
e/gazo.gif
./e/gazo.gif
../ ../../../../yoso-no/fairu.htm

相対リンクのイメージ

説明

現在のディレクトリーと同じディレクトリーにあるファイルはファイル名だけで指定できます。上の例ではkara.htm . です。現在のディレクトリーは./ と書くだけで指定できます。ドット(ピリオド)を書きその後にスラッシュ( / )が続きます。上の例にあるkara.htm と./kara.htm では同じ結果になります。e/gazo.gif と入力すると現在のディレクトリーの1段下のeというディレクトリーにある./e/gazo.gif という名前のファイルを指定したことになります。

e/gazo.gif と ./e/gazo.gifでは同じ結果になります。../ で現在のディレクトリーから1つ上のディレクトリーに移ります。その際名前は何でもかまいません。

../../ で上の上のディレクトリーに移ります。../ を書いた数だけ上に行きます。例に示したように、このようにして指定されたどのディレクトリーのどこからでもまた下位のディレクトリーにアクセスすることができます。



目的別要素

広告