ホームページを見ていると、おわかりのように、あるページから他のページへと切り替えることが出来ますね。
ページのどこかをクリックすると、ページが切り替わる！おなじみのあれのことです。
今回はそれの作り方です。
まず、こちらを見てください。
このようなファイルを、保存しておきます。ファイル名はpage1.html
そして、もう一つ！
同じフォルダにこのファイルを保存しておきます。ファイル名はpage2.html
まず、ｐｅｇｅ１を表示。して、アンダーラインのついているところをクリックしてください。
すると、ｐａｇｅ２に切り替わります。
つまり、<a href="page2.html">ぺーじ２に移動</a> や
<a href="page1.html">ぺーじ１に移動</a> が、リンクなのです。
つまり、
◆
では、アドレスはどう書けばいいのでしょうか。
この絵は「ＰＣ−Ｐａｒｋ」のフォルダの様子です。
pcparkというフォルダの中にhpmakeというフォルダがあります。
page1.htmlとpage2.htmlファイルは、両方ともこのhpmakeというフォルダの中に保存されています。
そして、アドレスはそれぞれこのように表示されました。
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page1.html
または、http://psycol5.sugoihp.com/pcpark/hpmake/page1.html
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page2.html
または、http://psycol5.sugoihp.com/pcpark/hpmake/page2.html
右上の絵と見比べてほしいのです。
http://park6.wakwak.com/~psychol/psycol3/までは、気にせず、
pcpark/hpmake/page1.htmlのところを見てください。
これは、pcparkというフォルダの中のhpmakeというフォルダの中のpage1.htmlということを表しています。
同じフォルダの中にあるファイルにリンクするときのアドレスの書き方は、ファイル名だけでＯＫです。
この２つのファイルは同じフォルダの中に保存してありますので、上のＨＴＭＬのソースでは、ファイル名だけを書いています。
そして、この場合、ファイル名だけを指定しても良いですし、
実は、アドレスを書くところに、
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page1.htmlと書いても同じなのです。
◆
さて、もう少しアドレスの指定のしかたを詳しく説明しましょう。
http://から始まるような書き方を「絶対アドレス指定」といいます。
http://サーバー名/フォルダ/フォルダ/フォルダ/ファイル名
という構造になっています。
まず、頭にhttp://がつきます。 そして、次の「サーバー名」は、ＨＰをアップロードするサーバーによって決まります。
そして、自分のパソコンに保存したＨＰファイルをサーバーにアップロードすると、パソコンの中に保存していた時のフォルダ名やファイル名がそのままサーバーに送られていきます。
ですから、サーバー名の後ろに、自分が作ったフォルダ名が続きます。
そして、最後はファイル名です。
別のサーバーにあるＨＰファイルにリンクする場合は、この絶対アドレス指定を必ず使います。
それに対して、ここで使った、ファイル名だけを書くやり方は「相対アドレス指定」といいます。
同じフォルダの中なら、ファイル名だけでＯＫです。
相対アドレスというのは、現在表示されているファイルの場所から見て、リンク先のファイルがどこにあるのかを指定するのです。
現在のファイルがhpmakeというフォルダの中にあるとして、
では、hpmakeというフォルダの上のフォルダ（pcpark）の中にあるファイルにリンクするときはどうするのでしょう。
ファイル名の前に ../ をつけます。
これは、「今のファイルがある場所より、１つ上のフォルダ」ということを表します。
例えば、pcparkというフォルダの中に、page3.htmlがあるとすると、相対アドレス指定の場合、
../page3.html と書きます。
もし、２つ上のフォルダの場合は ../../と２つ続けて書きます。
さらに、右上の絵の、pasoというフォルダの中に、page4.htmlというファイルがある場合は、まず、../で１つ上に指定してpaso/とフォルダ名を指定してからファイル名です。
../paso/page4.htmlとなるのです。
これを日本語に翻訳すると、「hpmakeというフォルダ（つまり現在のファイルがあるフォルダ）より、１つ上のpcparkというフォルダに行って、その中にあるpasoというフォルダの中のpage4.htmlというファイル」ということになります。
もし、pcparkというフォルダの中に現在のファイルがあって、その中にあるhpmakeというフォルダにあるpage1.htmlを指定したい場合は、
hpmake/page1.htmlというふうになります。
ちょっと整理してみましょう！
パソコンに、このような構造でＨＰファイルを作ったとしましょう。
ハードディスクにpublic_htmlというフォルダを作って、その中に左の絵のようにいろいろなＨＴＭＬファイルをいろいろなフォルダの中に入れています。
トップページの名前はindex.htmlという名前にしています。
a.htmlやb.htmlなどいろいろな名前のファイルがあります。
ＰＣ−ＰＡＲＫトップに戻る
心の話サイコロＴｏｗｎ！へ
ページのどこかをクリックすると、ページが切り替わる！おなじみのあれのことです。
今回はそれの作り方です。
まず、こちらを見てください。
|
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=X-SJIS"> <title>ページ１</title> </head> <body> <div align="center"> このページは１番<br> タイトルは「ページ１」になっていますね。<br> アドレスは<br> http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page1.htmlです。<br> または、 http://psycol5.sugoihp.com/pcpark/hpmake/page1.htmlです。<br> <a href="page2.html">ぺーじ２に移動</a> </div> </body> </html> |
そして、もう一つ！
|
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=X-SJIS"> <title>ページ２</title> </head> <body> <div align="center"> このページは２番<br> タイトルは「ページ２」になっていますね。<br> アドレスは<br> http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page2.htmlです。<br> または、http://psycol5.sugoihp.com/pcpark/hpmake/page2.htmlです。<br> <a href="page1.html">ぺーじ１に移動</a> </div> </body> </html> |
まず、ｐｅｇｅ１を表示。して、アンダーラインのついているところをクリックしてください。
すると、ｐａｇｅ２に切り替わります。
つまり、<a href="page2.html">ぺーじ２に移動</a> や
<a href="page1.html">ぺーじ１に移動</a> が、リンクなのです。
つまり、
<a href="リンク先のアドレス">表示される文字（画像）</a>
というふうに指定します。
この絵は「ＰＣ−Ｐａｒｋ」のフォルダの様子です。pcparkというフォルダの中にhpmakeというフォルダがあります。
page1.htmlとpage2.htmlファイルは、両方ともこのhpmakeというフォルダの中に保存されています。
そして、アドレスはそれぞれこのように表示されました。
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page1.html
または、http://psycol5.sugoihp.com/pcpark/hpmake/page1.html
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page2.html
または、http://psycol5.sugoihp.com/pcpark/hpmake/page2.html
右上の絵と見比べてほしいのです。
http://park6.wakwak.com/~psychol/psycol3/までは、気にせず、
pcpark/hpmake/page1.htmlのところを見てください。
これは、pcparkというフォルダの中のhpmakeというフォルダの中のpage1.htmlということを表しています。
同じフォルダの中にあるファイルにリンクするときのアドレスの書き方は、ファイル名だけでＯＫです。
この２つのファイルは同じフォルダの中に保存してありますので、上のＨＴＭＬのソースでは、ファイル名だけを書いています。
そして、この場合、ファイル名だけを指定しても良いですし、
実は、アドレスを書くところに、
http://park6.wakwak.com/~psychol/psycol3/pcpark/hpmake/page1.htmlと書いても同じなのです。
http://から始まるような書き方を「絶対アドレス指定」といいます。
http://サーバー名/フォルダ/フォルダ/フォルダ/ファイル名
という構造になっています。
まず、頭にhttp://がつきます。 そして、次の「サーバー名」は、ＨＰをアップロードするサーバーによって決まります。
そして、自分のパソコンに保存したＨＰファイルをサーバーにアップロードすると、パソコンの中に保存していた時のフォルダ名やファイル名がそのままサーバーに送られていきます。
ですから、サーバー名の後ろに、自分が作ったフォルダ名が続きます。
そして、最後はファイル名です。
別のサーバーにあるＨＰファイルにリンクする場合は、この絶対アドレス指定を必ず使います。
それに対して、ここで使った、ファイル名だけを書くやり方は「相対アドレス指定」といいます。同じフォルダの中なら、ファイル名だけでＯＫです。
相対アドレスというのは、現在表示されているファイルの場所から見て、リンク先のファイルがどこにあるのかを指定するのです。
現在のファイルがhpmakeというフォルダの中にあるとして、
では、hpmakeというフォルダの上のフォルダ（pcpark）の中にあるファイルにリンクするときはどうするのでしょう。
ファイル名の前に ../ をつけます。
これは、「今のファイルがある場所より、１つ上のフォルダ」ということを表します。
例えば、pcparkというフォルダの中に、page3.htmlがあるとすると、相対アドレス指定の場合、
../page3.html と書きます。
もし、２つ上のフォルダの場合は ../../と２つ続けて書きます。
さらに、右上の絵の、pasoというフォルダの中に、page4.htmlというファイルがある場合は、まず、../で１つ上に指定してpaso/とフォルダ名を指定してからファイル名です。
../paso/page4.htmlとなるのです。
これを日本語に翻訳すると、「hpmakeというフォルダ（つまり現在のファイルがあるフォルダ）より、１つ上のpcparkというフォルダに行って、その中にあるpasoというフォルダの中のpage4.htmlというファイル」ということになります。
もし、pcparkというフォルダの中に現在のファイルがあって、その中にあるhpmakeというフォルダにあるpage1.htmlを指定したい場合は、
hpmake/page1.htmlというふうになります。
ちょっと整理してみましょう！
パソコンに、このような構造でＨＰファイルを作ったとしましょう。
ハードディスクにpublic_htmlというフォルダを作って、その中に左の絵のようにいろいろなＨＴＭＬファイルをいろいろなフォルダの中に入れています。トップページの名前はindex.htmlという名前にしています。
a.htmlやb.htmlなどいろいろな名前のファイルがあります。
- さて、a.htmlからb.htmlへのリンクは、a.htmlにこのように書きます。
<a href="b.html">bページへ</a>
- a.htmlからc.htmlへのリンクは、a.htmlにこのように書きます。
<a href="../f2/c.html">cページへ</a>
- d.htmlからh.htmlへのリンクは、d.htmlにこのように書きます。
<a href="../../f3/f5/h.html">hページへ</a>
- e.htmlからj.htmlへのリンクは、e.htmlにこのように書きます。
<a href="f5/f6/j.html">jページへ</a>
ＰＣ−ＰＡＲＫトップに戻る
心の話サイコロＴｏｗｎ！へ