超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ リンク集

「34号のおへや」の最後のページはリンクページですね。

ネットで知り合った友達とかのホームページ、あるいはホームページ作成につかわせてもらった素材屋さんなどなどにリンクをはります。相互リンクをはってもらえば、ページを訪れてくれる人も増えるかもしれません。
リンクをはるときは、リンク先ホームページの管理人さんに一言ご挨拶しときましょうね。

このサイトのリンクページを見ればわかると思うけど、基本はリンク先&一言コメントです。
リンクをいっぱい作る人は、リンク先ホームページの内容によって分類した方がわかりやすいでしょう。

ここでも作表 <table> タグをつかいます。
もう解説は要りませんね。

<table border="5">
<tr><td>リンク先1</td><td>ページの紹介・コメント1</td></tr>
<tr><td>リンク先2</td><td>ページの紹介・コメント2</td></tr>
<tr><td>リンク先3</td><td>ページの紹介・コメント3</td></tr>
</table>

リンク先1 ページの紹介・コメント1
リンク先2 ページの紹介・コメント2
リンク先3 ページの紹介・コメント3

セルの幅は <td width=" "> を使って適当に調節しましょう。

いくつかに分類したい場合は、列を追加して連結すればいいよね。

<table border="5">
<tr>
<td rowspan="3">ちゃっ友</td>
<td>リンク先1</td><td>ページの紹介・コメント1</td>
</tr>
<tr>
<td>リンク先2</td><td>ページの紹介・コメント2</td>
</tr>
<tr>
<td>リンク先3</td><td>ページの紹介・コメント3</td>
</tr>
<tr>
<td rowspan="3">素材屋さん</td>
<td>リンク先4</td><td>ページの紹介・コメント4</td>
</tr>
<tr>
<td>リンク先5</td><td>ページの紹介・コメント5</td>
</tr>
<tr>
<td>リンク先6</td><td>ページの紹介・コメント6</td>
</tr>
<tr><td rowspan="2">HTML 講座</td>
<td>リンク先7</td><td>ページの紹介・コメント7</td>
</tr>
<tr>
<td>リンク先8</td><td>ページの紹介・コメント8</td>
</tr>
</table>

ちゃっ友 リンク先1 ページの紹介・コメント1
リンク先2 ページの紹介・コメント2
リンク先3 ページの紹介・コメント3
素材屋さん リンク先4 ページの紹介・コメント4
リンク先5 ページの紹介・コメント5
リンク先6 ページの紹介・コメント6
HTML 講座 リンク先7 ページの紹介・コメント7
リンク先8 ページの紹介・コメント8

分類する方法としてもう一つ、表にタイトルをつけることもできます。
<caption> タグです。

<table border="5">
<caption>ちゃっ友</caption>
<tr><td>リンク先1</td><td>ページの紹介・コメント1</td></tr>
<tr><td>リンク先2</td><td>ページの紹介・コメント2</td></tr>
<tr><td>リンク先3</td><td>ページの紹介・コメント3</td></tr>
</table>
<p>
<table border="5">
<caption>素材屋さん</caption>
<tr><td>リンク先4</td><td>ページの紹介・コメント4</td></tr>
<tr><td>リンク先5</td><td>ページの紹介・コメント5</td></tr>
<tr><td>リンク先6</td><td>ページの紹介・コメント6</td></tr>
</table>
<p>
<table border="5">
<caption>HTML 講座</caption>
<tr><td>リンク先7</td><td>ページの紹介・コメント7</td></tr>
<tr><td>リンク先8</td><td>ページの紹介・コメント8</td></tr>
</table>

ちゃっ友
リンク先1 ページの紹介・コメント1
リンク先2 ページの紹介・コメント2
リンク先3 ページの紹介・コメント3

素材屋さん
リンク先4 ページの紹介・コメント4
リンク先5 ページの紹介・コメント5
リンク先6 ページの紹介・コメント6

HTML 講座
リンク先7 ページの紹介・コメント7
リンク先8 ページの紹介・コメント8

リンク先のタイトルに <a href="リンク先 URL"> リンク先タイトル </a> でリンクをはることができます。

<table border="4">
<tr>
<td><a href="http://park16.wakwak.com/~html-css/">
超初心者のためのホームページ作成講座</a></td>
<td>
容姿端麗・眉目秀麗・頭脳明晰34号さんのホームページ。とにかく一度行ってみて。
</td>
</tr>
</table>

って記述すればOKです。「容姿端麗・眉目秀麗・頭脳明晰」って書かないとうまくリンクしないかも…。

超初心者のためのホームページ作成講座 容姿端麗・眉目秀麗・頭脳明晰34号さんのホームページ。とにかく一度行ってみて。

バナーをつけた方が、リンク先のホームページのイメージがちょっと出てくるかな。
バナーっていうのは、一般的には横に長い長方形の画像で、これをクリックするとそこのホームページにジャンプできるものです。
バナー作っている人が多いので、それをリンク先タイトルのところに貼り付けましょう。

このサイトのバナーはこれ バナー です。

バナーはだいたいトップページに置いてあるので、そこにマウスポインタを当てて「右クリック−名前をつけて画像を保存」で保存します。直接リンクはしないでね。

次に、リンク先ホームページ名を書いたところに、<img src="ファイル名"> タグをつかって画像を貼り付けてできあがり。

例えば、このサイトにリンクをはるときは、

<table border="4">
<tr>
<td><a href="http://park16.wakwak.com/~html-css/">
<img src="banner.png"></a></td>
<td>
容姿端麗・眉目秀麗・頭脳明晰34号さんのホームページ。とにかく一度行ってみて。
</td>
</tr>
</table>

となります。

バナー 容姿端麗・眉目秀麗・頭脳明晰34号さんのホームページ。とにかく一度行ってみて。

バナーの周りのリンク色が気に入らない場合は、<img src="ファイル名" border="0"> ってすれば消えるよ。

バナー 暗中模索・五里霧中・孤軍奮闘34号さんのホームページ。とにかく一度行ってみて。

■このページに出てきたタグ■

タグ名プロパティ説明
<caption>〜</caption>表にタイトルをつける。

眠い人もがんばって次のページへどうぞ〜♪