HTML講座第15回
☆リンクさせてみよう - クイックガイド
1. リンクって何?
 
たまには真面目に - donguri browser 
ここをクリックするとHTML講座トップページに戻るよ。







 
2. リンクさせてみよう
<a>,href
 
3. 他の人のHPにリンクするには
 
←前回『画像の表示位置と代替テキスト』へ 次回『いろいろなリンク』へ→
リンクって何?

ここでいうリンクとは正しくはハイパーリンクと言って クリックすると他のページなどに移動する仕組みのこと。 このページに辿りつくまでにもいくつかリンクをクリックしてきてるはずだよね。 これを使えば複数のページをクリック1つで簡単に行き来することができるようになる。 ちなみに、リンクとは鎖の輪と言ったような意味で 繋がる(繋げる)っていうようなニュアンスで使われるかな。

リンクさせてみよう

リンクさせる(一般にリンクを張ると言う)には、 まずリンクを作るHTMLファイルとリンクをクリックした時に ジャンプするHTMLファイルが必要だね。 どちらのファイルも画像の時と同様、 同じフォルダ内にいれておくことを忘れずに。

リンクに関連するタグは<a>
リンクのジャンプ先を指定する属性名はhrefだよ。

<a>は必ず属性と組み合わせて使う。 hrefの属性値はジャンプ先のファイルのパスなど。 同じフォルダ内のファイルにジャンプするなら ファイル名を指定してやればOKだよ。 例えば同じフォルダの『nisshi.html』と言うファイルに ジャンプするリンクを張る場合は次のようになるよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="nisshi.html">日誌を見る</a>
</body>
</html>

これで<a>〜</a>の間の『日誌を見る』という文字にリンクが張られて クリックするとジャンプできるようになるよ。

腹減り日誌♪ - 


試しにクリックしてみてね。
ブラウザでの表示はこちら(別ウィンドウ)

他の人のHPにリンクするには

例えば友達のHPへジャンプするリンクを張りたいとか、 素材を使わせてもらってる素材屋さんへのリンクを張りたいとかっていう場合も リンクの張り方はこれまで紹介したのと同じ。 ただhrefの属性値にそのHPのURL(一般にhttp://から始まる)を指定すればいいんだ。 例えばウェブ木箱のトップページ(http://www5c.biglobe.ne.jp/~horoau/index.html)にリンクを張るとすると

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<a href="http://www5c.biglobe.ne.jp/~horoau/index.html">ウェブ木箱へ</a>
</body>
</html>

これで<a>〜</a>の間の『日誌を見る』という文字にリンクが張られて クリックするとジャンプできるようになるよ。

腹減り日誌♪ - 



クリックするとウェブ木箱トップにジャンプするよ。
ブラウザでの表示はこちら(別ウィンドウ)

他人のHPにリンクする時は 『自由にリンクしてください』などの意思表示が明記されている場合を除いて 確認を取るのがマナーだろうね。 また、トップページ以外へのリンクは許可がない場合は避けた方がいい。 この辺の許可などについては注意書きなどに明記されている場合が多いので 問い合わせる前にちゃんと目を通してからにすることも忘れずに。

次は別ウィンドウでリンクを開く方法やページ内でジャンプする方法だよ。
前回は画像の表示位置と代替テキストのことだったね。

ウェブ木箱HTML講座
Copyright(C) 2002 あう