◇完成予想図
基本的には１、２とあまり変わりません。
| ─────────────────── リンク ─────────────────── ┌───────┐ │バナー｜コメント｜ ｜バナー｜コメント｜ ｜バナー｜コメント｜ └───────┘ ─────────────────── |
↑こんな感じの物。実物はこちら
◇実際に作ってみる
ソースを書きますので、まずはこれらを全部メモ帳で打ち込んで下さい。（保存名link.html）
途中改行されちゃってる行（<img src="〜〜">の所）がありますが、そこは１行で書いて下さい。
| <html> <head> <title>リンク</title> </head> <body bgcolor="#FFFFCC" text="#000000"> |
前回 とあまり変わりませんね。<table>等は前回やったので解説は省略します。
◇解説
今回新しく現われたタグは、<a href="">と<img src="">です。それぞれについて解説していきます。
<a href="***">
これはリンク開始のタグです。リンクって言うのは、ネットしている時に、クリックしたら違うサイトや、同じサイト内の違うページに飛んだりしますよね？それがリンクです。xxxの部分にジャンプ先のURLを入れます。上の所では、適当に管理人の別のサイトのURLなどを入れてありますが、***の部分には、リンクをするサイトのURLを入れます。例えばyahooだとしたら、
<a href="http://www.yahoo.co.jp/">
になります。
</a>
リンクの終わりです。付け忘れると大変ですよ。
では、ヤフーにリンクしてみましょう。
<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>
こうすれば、ヤフーにリンクができるわけです。こんな風に→Yahoo! Japan
画像リンクにする場合は、
<a href="http://www.yahoo.co.jp/"><img src="http://img.yahoo.co.jp/images/yahoojp_sm.gif" border="0"></a>
とすれば、ヤフーに画像でリンク出来ます。こんな風に→
<img src="***" border="0">
これは画像を貼り付けるためのタグです。xxxの部分に張る画像の絶対パスか相対パスを入れます。絶対パスはURLの事です。
http://***.***.***/やhttp://***.***.***/***.html等です。今回は画像ですので、
http://***.***.***/○○○.△△△ になります。
○○○はファイル名、△△△は拡張子で、gifやjpg、jpeg、png、bmp等になります。
相対パスに付いては難しいので、下で説明しますね。（相対パスができるようになれば、TOPから各ページにリンクする事ができるようになります。）
border="0"が付いている理由は、border="0"がない状態でリンクを張ると、画像の周りに変な枠が出来てしまうからです。
さて、バナー（BとCの画像の事。）はどうするの？って話なんですが、基本的には、リンクを張るサイトに置いてある画像を使用します。直接URLを指定されるのを嫌う方もいますので（直リンクって言います。）、自分のパソコンに保存して使います。なので、相対パスを覚える必要があるんです。直リンクOKって書いてあるサイトなら直接URLで指定しちゃってもOKです。バナーを張るリンクページは作らない！と言うなら、画像は張らなくても問題ありません。
◇相対パスって？
相対パスって何か分かりませんよね？
相対パスは、そのファイルのいるディレクトリ（フォルダ）を基準として、指定するファイルがどこにあるのかと言うのを示すものです。
言葉で言っていてもよく分からないと思うので、実際にやってみましょう。
と、その前に。ディレクトリ（フォルダ）の階層構造を考えないと行けません。普段パソコンを使っているときは何にも気にしていないと思うんですが、フォルダは階層構造になっています。ちょっと下の図を見てみてください。
Homepage(フォルダ）
├index.htmｌ（ファイル）
├dir1（フォルダ）
│ ├file1.html（ファイル）
│ └file2.html（ファイル）
│
├dir2（フォルダ）
│├dir3（フォルダ）
││└file3.html
│├file4.html
分かりにくい図ですが、ホームページのファイルを全部入れているディレクトリ（フォルダ）の中だと思ってください。
Homepageと言うフォルダの中に、index.htmlと言うファイルと、dir1,dir2と言うフォルダがると言う意味です。dir1にはfile1.htmlとfile2.htmlがあり、dir2にはdir3とfile4.htmlがあると言う事です。
すごく難しいけど、がんばってください。
これが理解出来ちゃえば、相対パスは余裕です。
◇相対パスの使い方
上の図を参考に解説していきます。
1.index.htmlからfile3.htmlへのリンク
index.htmlからfile3.htmlへリンクを張る場合は、『./dir2/dir3/file3.html』と書きます。
./(ドット、スラッシュ）は、今いるフォルダを意味します。つまり今の場合はHomepageです。
あとは、フォルダごとに/で区切ります。
これで分かると思いますが、Homepageの中のdir2の中のdir3の中のfile3.htmlへリンクを張っていることになります。
2.file1.htmlからindex.htmlへのリンク
file1.htmlからindex.htmlへリンクを張る場合は『../index.html』と書きます。
../(ドット、ドット、スラッシュ）は、今いるフォルダのひとつ上を示します。つまりHomepageです。
なので、file1.htmlのあるdir1のひとつ上のHomepageの中のindex.htmlへリンクを張っていることになります。
3.file2.htmlからfile4.htmlへのリンク
１と２の組み合わせです。『../dir2/file4.html』と書きます。
file1.htmlのあるdir1のひとつ上のHomepageの中のdir2の中のfile4.htmlへリンクを張っている事になります。
4.file3.htmlからindex.htmlへのリンク
2の時はひとつ上でしたが、二つ上ですので、『../../index.html』と書きます。
file3.htmlのあるdir3のひとつ上のdir2のひとつ上のHomepageの中のindex.htmlへリンクを張っている事になります。
５.file1.htmlからfile2.htmlへのリンク
一番簡単。『./file2.html』と書きます。
今いるフォルダdir1の中のfile2.htmlへリンクを張っている事になります。
◇リンクの応用
さぁこれらを応用すれば、トップページからプロフィールと今作ったリンクのサイトにジャンプできるように出来ますよ。
index.htmlを書き換えましょう。
<a href="./profile.html">プロフィール</a><br>
日記<br>
掲示板<br>
<a href="./link.html">リンク</a><br>
↑の部分だけです。どうですか？ホームページらしくなってきましたか？