1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTML 相対パス・絶対パス徹底理解講座

2022-01-16 19:59:42
javaのWeb開発も1年以上、どうしてもhtmlやjspページなどを書かなければならず、Webアプリケーションは、そのハイパーリンク(ハイパーリンク)、例えば、ページ内のページb(つまり、URI)にリンクアドレスを保存するには強力ですが、問題はまさにここで、どのように正しくファイルを参照することである。例えば、HTMLページ内でハイパーリンクとして他のHTMLページを参照するにはどうすればよいのでしょうか。ウェブページに画像を挿入するには? ...................。
ハイパーリンクの追加や画像の挿入など、ファイルを参照する際に誤ったファイルパスを使用すると、参照に失敗します(リンク先のファイルを表示したり、挿入した画像を表示したりすることができなくなります)。
これらの誤りを防ぎ、正しくファイルを参照するために、両者の違いや使い方を書いておき、今後参考にできるようにしました。
HTMLには相対パスと絶対パスの2種類のパスの書き方がある
HTML相対パス(相対的なパス)
同じディレクトリ内のファイルへの参照
ソースファイルと被参照ファイルが同じディレクトリにある場合は、被参照ファイル名を直接書けばよい。
次に、ソースファイル info.HTML を作成し、info.HTML 内で index.HTML ファイルをハイパーリンクとして参照するようにしたいと思います。
仮にinfo.HTMLのパスがd:↵tomcatwebappshello↵info.HTML
index.HTML のパスが d:\tomcatwebappshelloblabla³³index.HTML であったとします。
index.HTMLのハイパーリンクをinfo.HTMLに追加するコードは、次のようになります。
コピーコード
コードは以下の通りです。

<a href = "index.HTML">index.HTML</a>

親ディレクトリの表現方法
... /... はソースファイルがあるディレクトリの上のディレクトリを、 ... はソースファイルがあるディレクトリの下のディレクトリを、 ... はソースファイルがあるディレクトリの下のディレクトリを表します。/... /... はソースファイルがあるディレクトリの上のディレクトリ、.../...はソースファイルがあるディレクトリの上のディレクトリ、.../...はソースファイルがあるディレクトリの上のディレクトリを示します。
仮にinfo.HTMLのパスがd:↵tomcatwebappshello↵info.HTML
index.HTML のパスが d:\tomcatwebappshello³³index.HTML だとすると
info.HTMLにindex.HTMLのハイパーリンクを追加するコードは、以下のようになります。
コピーコード
コードは以下の通りです。

<a href = ". /index.HTML">index.HTML</a>

仮にinfo.HTMLのパスがd:INDEX:TomcatwebappsHELLO BLABLA:WOWSTORY:info.HTMLであったとすると、以下のようになります。
index.HTML のパスが d:\tomcatwebappshello³³index.HTML であったとします。
index.HTMLのハイパーリンクをinfo.HTMLに追加するコードは、次のようになります。
コピーコード
コードは以下の通りです。

<a href = ". /... /index.HTML">index.HTML</a>

info.HTMLのパスがd:INDEX:Tomcat³³³³³であると仮定すると、以下のようになります。
index.HTML のパスが d:\tomcatwebappshello³³index.HTML であったとすると、index.HTML のパスは以下のようになります。
index.HTMLのハイパーリンクをinfo.HTMLに追加するコードは、次のようになります。
コピーコード
コードは以下の通りです。

<a href = ". /wowstory/index.HTML">index.HTML</a>

下位ディレクトリの表現方法
サブディレクトリ内のファイルを参照するには、サブディレクトリのファイルへのパスを直接書けばよい。
info.HTMLのパスがd:୧⃛(๑⃙⃘◡̈๑⃙⃘)୨⃛とします。
HTMLのパスは d:\tomcatwebappshelloblabla³³HTML³³index.HTML とする。
info.HTMLにindex.HTMLのハイパーリンクを追加するコードは、次のようになります。
コピーコード
コードは以下の通りです。

<a href = "HTML/index.HTML">index.HTML</a>

info.HTMLのパスがd:INDEX:Tomcat³³³³³であると仮定すると、以下のようになります。
index.HTML のパスが d:\tomcatwebappshelloblabla³³HTML³³index.HTML であったとします。
index.HTMLのハイパーリンクをinfo.HTMLに追加するコードは、次のようになります。
コピーコード
コードは以下の通りです。

<a href = "HTML/tutorials/index.HTML">index.HTML</a>

HTMLの絶対パス(アブソリュートパス)
HTMLの絶対パスとは、ドメイン名を持つファイルのフルパスを指します。
ドメイン名www.jb51.net が登録され、ウェブホスティングが適用されたと仮定すると、提案されたホスティングプロバイダは www などのディレクトリを与え、この www はウェブサイトのルートディレクトリになります。
仮にwwwルートディレクトリの下にindex.HTMLというファイルがあり、このファイルの絶対パスがhttps://www.jb51.net/index.html。
wwwルートディレクトリの下にHTML_tutorialsというディレクトリを作成し、そのディレクトリの下にindex.HTMLというファイルを置いたとすると、このファイルの絶対パスはhttps://www.jb51.net/article/32759.htm。