知っておきたいきほんの「おまじない」 - 他のページにリンクをはろう |
|
他のページにリンクをはろう : <a href ="URL"> |
さて。ここではホームページの醍醐味と言ってもいい
リンクの貼り方について解説していこう。
リンクをはるおまじないの基本の形は、
<a href="URL">リンクを貼る文字</a>
URLのところには、
自分のホームページの中ならファイル名を指定。
<a href="profile.html">プロフィール</a>
他のホームページに貼る場合は
リンクを貼りたいホームページのURLを当てはめるんだ。
これも、 " " でURLを囲むのを忘れずに。
例えば……
<a href="http://www.buttobi.net">ぶっとびねっと</a>
こんな感じ。
|
|
|
でもこれ、
このウインドウにリンク先のホームページが表示されちゃうね。
リンクは別にウインドウを開くことってできないの?
|
|
|
だんだん難しいことをいうようになってきたねぶっとびくんも。
別にウインドウを開きたいときは
この<a href="">タグの中にちょちょいと「ウインドウを別に出して!」
っておまじないをいれてあげればいいだけなんだ。
<a href="http://www.buttobi.net" target="_blank" >ぶっとびねっと</a>
今度はちゃんと別にウインドウが出たね?
|
|
|
うんうん!こういうふうにしたかったんだ!! |
|
|
ちょっと番外編:リンクが貼ってある文字の色を変えてみよう |
「ページ全体の文字の色」、それと
ページにある「リンクが貼ってある文字の色」を
指定することができるんだ。
ここでいじるのは基本タグのひとつ、<body>タグ。
<body>タグに次の記述を付け足してみよう。
<body text="#000000" link="#FF0000" vlink="#FF8080" alink="#993300">
それぞれにはカラーコードを指定。
※カラーコードについては「色のいろいろ」参照
text="カラーコード" : ページ全体の文字の色を一括指定。
link="カラーコード" : リンクが貼ってある文字の色を指定。
vlink="カラーコード" : アクセスしたことがあるリンク先の色。
alink="カラーコード" : リンクをクリックしたときの色。
|
|
|
背景も指定できるし、<body>タグっていろいろ指定できるんだね。 |
|
|
あと、リンクは文字だけじゃなくて画像にも貼る事ができるんだ。
上の例ではリンクを貼りたい文字を
<a href="URL"></a>のおまじないで囲んでるけど、
この文字の部分を前のページでやった
<img src="画像ファイル名">にすればいいんだ。
<a href="http://www.buttobi.net/" target="_blank"><img src="buttobi.gif"></a>
|
|
|
あれ?でもこれ、リンクは貼れたけど
画像に変な枠がついちゃったよ。
ブラウザで見ると… |
|
|
|
|
あぁ、それはborder(ボーダー)って言って、
リンクを貼ると線がついてしまうんだ。
画像にリンクが貼ってあるよ、って事がわかりやすくなるんだけど
あまりお気に召さない場合は
<img>タグの中に
border="0"
という記述を書き足せば線が表示されなくなるよ。
<a href="http://www.buttobi.net/" target="_blank"><img src="buttobi.gif" border="0"></a>
ブラウザで見ると… |
|
|
|
|
自分で用意した絵から他のホームページに飛べるようになるなんて
なんだか感動だなぁー。 |
|
|