Kefi_Pallhkari WebPage作り講座　タグ（サイト内リンクをはる）画像からリンクをはる

ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）

サイト内リンクを貼ってみよう（⑥画像からリンクをはります）

用意するモノ

文字を入力してみよう最低用意するモノ

・・・・・と、二つのページを用意しましたか？（「おっと、まだ用意してない」→）

・・・・・に加えて、更に

・「mypage」のフォルダーの中の「img」フォルダーにいくつかリンクに使いたい画像を保存しておきましょう。
私はとりあえず「kosaku8831.gif」と「bunchin8831.gif」の二つの画像をおきました。

用意がととのいました。いよいよリンクをはってみましょう。

１５，二つのページをリンクする。（画像からリンク）

index-101.htmlを少し書き換えます。

index-102.htmlはとりあえず、このままにしておきましょう。

index-101.html

<html>

<head>
<title>メニューのページ</title>
</head>

<body>

<a href="index-102.html"><img src="img/kosaku8831.gif"
border="0" width="88" height="31"></a>

<img src="img/bunchin8831.gif" width="88" height="31">
</body>
</html>

index-102.html

<html>

<head>
<title>バックル</title>
</head>

<body>

<img src="img/b-kabuto_s.jpg" width="80" height="60"> 
バックルです。

メニューに戻る

</body>
</html>

書き換えたら上書き保存をしましょう。

これをブラウザでみるとこうなると思います。そしてリンクを確認してみましょう。

実物で試してみて下さい。

少し解説

<a href="index-102.html"><img src="img/kosaku8831.gif"
border="0" width="88" height="31"></a>

<a href="index-102.html"><img src="img/kosaku8831.gif" border="0" width="88" height="31"></a>

<img src="img/kosaku8831.gif" border="0" width="88" height="31">	・・・・・リンクしたい画像を張り付けるタグです。（「え？忘れたかな）
index-102.html	・・・・・そこをクリックしたときに行きたいページです。

しかし・・・・・実物で試すとわかると思いますが・・・・・index-102.htmlの「メニューに戻る」の所をクリックしてもまだindex-101.htmlには戻れません。

“お客さん”は検索エンジンからいきなりindex-102.htmlに入ってきてくれるときがあります。その時に行き場所があるように「ｂａｃｋ」の画像にもリンクをはりつけて置いておくことを、ぜひお勧めします。

↓このように・・・・・。

index-102_1.html

<html>

<head>
<title>バックル</title>
</head>

<body>

<img src="img/b-kabuto_s.jpg" width="80" height="60"> 
バックルです。

<a href="index-101_1.html"><img src="img/kefi8831back.jpg"
border="5" width="88" height="31"></a>

</body>
</html>

実物で試してみて下さい。

ところで・・・・・気がつかれたでしょうか？

１，タグの中のborder="5"というのは「画像の縁取り」の幅です。「これはリンクのはってある画像ですよ。」と強調したいとき使ってもいいでしょう。

２，解説では「index-101.htmlを上書き保存をしましょう。」と言っておいて、私は「名前をつけて保存」をしています。これは古いモノも見本としてとっておきたいからです。これを読んでいる皆さんは・・・・・・・・・・index.htmlにありとあらゆる技をほどこし上書き保存をしていって下さい。

本文にもどる

Last update Jun.15,2002