趣味友遊
リンク
ＴＯＰページやそれぞれの部屋が完成したところで、
リンクについて学ばなければなりません。
ようするに・・・・
このページの 自己紹介 という文字をクリックして、
このページに飛んだり戻ったりってやつですね。
そういうときに活躍するタグがこれです。
<a href=○○○>飛ばせたい文字or画像</a>
飛ばせたい文字や画像をこれではさんで、
○○○のところにリンク先のアドレスを入れればよいだけです。
<a href=http://www.google.co.jp/><font size=5>グーグル検索へ</font></a>
グーグル検索へ
さらに、リンクを別窓で開くように設定したい場合は、
<a href=http://www.google.co.jp/ target=_blank><font size=5>グーグル検索へ</font></a>
グーグル検索へ
ただし、リンクのたびに別窓を開くように設定していると、
ホームページを見ている人たちにとってはウザがられる傾向があるので、
あまり使わないほうがよいらしい・・・
さて・・・・
今出てきたリンクは、自分のホームページから他のホームページへリンクする場合で、
リンク先のアドレスだけ打ち込めばよかったのですが、
自分のホームページ内におけるリンクはちょっと頭を使います。
ＴＯＰページから日記の部屋にリンクしたり、
ＴＯＰページに戻ったりするときです。
たとえば現在のフォルダやファイルの構成がこのようになっていた場合・・・
hpフォルダ |
| ┗ | 
@index.html |
Ajikosyoukai.html |
Bnikkiフォルダ |
Csyashinフォルダ |
|
|
|
┗ |
Dnikki.html |
Enikki2.html |
┗ |
Fshashin.html |
G？？？.フォルダ |
|
┗ |
H？？？ファイル |
同一フォルダ内でのリンク
@⇔A、D⇔E
仮に@→Aなら、
<a href=jikosyoukai.html>jikosyoukai.htmlへ</a>
ファイル名を直接入力する。
同一フォルダのフォルダ先へのリンク
@→D、@→E、@→F
A→D、A→E、A→F
F→H
仮に@→Dなら、
<a href=nikki/nikki.html>nikki.htmlへ</a>
フォルダ名を指定し、/（スラッシュ）で区切り、ファイル名。
さらにその先のフォルダ先へのリンク
@→H、A→H
<a href=syahin/？？？/？？？.html>？？？.htmlへ</a>
フォルダ名指定、スラッシュ、フォルダ目指定、スラッシュ、ファイル名指定。
別のフォルダのファイルへのリンク
D⇔F、E⇔F
D→@、D→A、E→@、E→A、
H→@、H→D、H→F などなど
（ＴＯＰに戻る） とかの場合ですね。
こんな場合に活躍するのが、
../ これ。
../ タグは、いわゆる カーソルのクリックの行動を一つ前に戻す
みたいな役割をします。
例えば D→@
<a href=../index.html>index.htmlへ</a>
nikki.html から index.html に行くには、フォルダをひとつ戻らなければならないので、
../ をひとつつけて、index.html を指定します。
H→@
<a href=../../index.html>index.htmlへ</a>
???.html から index.html に行くには、フォルダを二つ戻らなければならないので、
../ をひふたつつけて、index.html を指定します。
D→F
<a href=../shashin/shashin.html>syashin.htmlへ</a>
nikki.html から shashin.html に行くには、フォルダをひとつ戻って、
さらに shashinフォルダ に降りて shiashin.html を指定しないといけません。
なので ../ をひとつつけて、shashinフォルダを指定 スラッシュで区切り、 shashin.html を指定します。
D→H
<a href=../shashin/???/???.html>???.htmlへ</a>
nikki.html から ???.html に行くには、フォルダをひとつ戻って、
さらに shashinフォルダ に降りてからまた ???フォルダに降りて ???.html を指定しないといけません。
なので ../ をひとつつけて、shashinフォルダを指定 スラッシュで区切り、
???フォルダを指定 スラッシュで区切り ???.html を指定します。
ちょっとむずかしーよねー このへんは。
まーなんつーか 慣れですわ奥様。
実際にやってみましょう。
ひみつのお部屋 から 自己紹介 にリンクするには、
ここでいうところの @⇔A になります。
そこで、ソース内の 自己紹介<br> となっているものに、
<a href=jikosyoukai.html>自己紹介</a><br>
となるように書き込みます。
ひみつのお部屋 から 日記のお部屋にリンクするには、 @→D なので、
<a href=nikki/nikki.html>日記のお部屋</a><br>
となるように書き込みます。
写真の部屋も同様ですね。
うまくリンクできましたか？
では・・・・
このように飛んだサイトからＴＯＰに戻るのも設定してみましょう。
自己紹介 から ＴＯＰ は、@⇔A と同様なので、
<a href=index.html>ＴＯＰに戻る</a><br>
そのままファイル名を指定すれば大丈夫。
日記の部屋、写真の部屋 から ＴＯＰ は、 D→@ F→@ なので、
フォルダを一個戻る必要がありますので、
<a href=../index.html>ＴＯＰに戻る</a><br>
となります。
なんとなくわかったかなぁ〜？
リンクっていうのは、ホームページを続けていると、
フォルダやファイルがどんどんどんどん増えていくので、
あるページからあるページに飛びたいとか思った時に、かなり考え込みます。
また気をつけなくてはいけないことは、
一度リンクを設定した後にファイルが増えたからといって、
整理のために新たにフォルダを作成してファイルを移動したりすると、
リンクが狂ってきてしまいます。
そうなると リンク切れ となり、
クリックしても ページが見つかりません とか表示されてしまいます。
趣味友遊でも未だにリンク切れとかいっぱいありますんで、
あまりえらい事は言えませんのでこのくらいにしておきますか・・・
ところでここまでうまくできたならば、いよいよ次はホームページを他の人が見れるように公開です。
私に作り方を訊いてきて、ここまでたどり着いた人は果たしてどのくらいいるかな？
次へ
趣味友遊的ホームページ講座
五目の部屋
TOP
