リンクリンク♪

リンクの仕方

さて、文字の装飾と配置の仕方が分かると、今度は色々なものを
ページにくっ付けてみたくなると思います。背景であったり、
画像であったり、そして他のページだったり。この、他の物に飛び
繋がることをリンクといい、ここではその遣り方を一緒に覚えて
いってみましょう。
今のところ貴方はindexという名前のページを作っていると思いますが、
早速別のページを作ってこれに繋げてみましょう。
まずこれまでの復習として、今までに覚えたタグを総動員してページを作り、
タイトル名をlink.htmlとして保存して下さい。しかしここで注意して欲しいのは、
「ページを保存する場所は繋げるページのある場所と同じにしなくてはならない」
ということです。例えばindex.htmlをデスクトップに保存したら、
繋げるページもデスクトップに保存するという感じです。何故そんなことをするかというと、
作ったページは同じ土俵に置かないとリンク出来ないからです。
これは画像に関しても同じなので、ページに画像を貼り付けたい場合は
同じ所に保存するようにしましょう。それとデスクトップに置くにしても、
沢山のページ乱雑に置くのは管理が面倒くさいので、フォルダを作ってそこに入れるようにするとスッキリします。さて、ここで私はお茶を煎れつつ一服して、ページが出来あがるのを待ちましょう・・・・・・出来ましたか？私の作ったサンプルはこんな具合になり、ここに繋げるページはこのようになりました。ページの繋げ方は、以下のようにすればＯＫです

<HEAD>
<TITLE>リンクリンク♪</TITLE>
</HEAD>
<BODY>
<A HREF="(繋げたいページのタイトル。ただし名前の後に「.html」をつける事)">

</BODY>
</HTML>


この遣り方に従い、先ほどのサンプル二つを繋げてみます。
そうすると、このようになります。
さて、ここで一つ注意です。まずは黙って次のサンプルを開いてみてください。
一見すると全く同じに見えますが、しかしこれは前のと明らかに違います。
分かりますか？私も初めてこの失敗をやった時、「そうくるかお前は」
と悔しがったものです。前に作ったやつは、文字の部分のみでリンク出来るように
なっていたと思います。しかしこっちのは、文字でない空白の部分までリンク出来る
ようになっているわけですね。では何故これが起きたかというと、タグの組み合わせで
起きたわけです。二つのソースを見てもらえば分かると思うのですが、前者はリンク先
を指定する前にSENTERタグをいれており、後者はリンク先を指定した後にSENTERタグを
入れています。動作の違いを簡単に説明すると、前者は文字を定義してからそこに
アドレスを載せているのに対し、後者は先にアドレスを指定してから文字を中央に
寄せている為にこういう現象が起こったわけです。タグの効果範囲と優先順位は
結構見落としがちなので、構える必要はありませんが何かあったら
「もしかしたら・・・」とでも思うようにすると、
案外簡単にミスが見つかるかもしれません。

画像の載せ方

　　リンクの仕方を覚えたところで、次はいよいよ画像の載せ方です。これは指定するタグが違うだけで遣り方は基本的に同じなのですが、一つだけ注意しなくてはいけない事があります。それは画像の名前の後に、その画像の保存形式名前を付け加えるということです。例えばＪＰＥＧ形式の「sky」という名前の画像を載せたいと思ったら、

<HEAD>
<TITLE>リンクリンク♪</TITLE>
</HEAD>
<BODY>
<IMG SRC="sky.jpg">
</BODY>
</HTML>

　　という具合に使い使います。ちなみにＧＩＦ形式で保存した物を載せたい場合、「（タイトル名）.gif」で指定してください。画像ばかりは自分の物を指定してもらうとして、サンプルはこんなんです。もし上手くいかなかったら、画像の保存形式を再度確認してみてください。それと画像が貴方が作ったページと同じ場所にあるかを。私はこれに気付かずしばらく悩みました＼（－－；

メールへのリンクの仕方

　　よくサイトを閲覧していると、クリックするとメールソフトが起動したりしますよね。実はあれもこのリンク機能を使って定義することができます。これをやるとページから直接メールを送ることが出来き、見てくれた人にアドレスを自動入力してくれて、お手軽簡単な上に返信率３割増し（当社比）間違い無しという優れものです。しかしメールを送られると逆に困るという人もいると思うので、そんな時はこのタグは無縁と思って無視してもらって構いません。では定義の仕方です。

<A　HREF＝"mailto:(ここにメールアドレスを)">
</A>

サンプルです。クリックしてメールソフトは起動しましたか？起動してメール送り先に設定したアドレスが入っていたら成功です。

背景いろいろ

　　さて、今度は背景の設定のしかたですが、まずは背景の色の指定をやってみましょう。説明抜きでドカドカいきますよ。

<HEAD>
<TITLE>リンクリンク♪</TITLE>
</HEAD>
<BODY　ＢＧＣＯＬＯＲ＝"(色の指定)">
</BODY>
</HTML>

うっしサンプルです。さて、背景の色を指定したところでお待ちかね、
背景画像の付け方です。そろそろ慣れてきたころだと思うので、
もう余計な説明抜きで使い方教えてしまいます。

<HEAD>
<TITLE>リンクリンク♪</TITLE>
</HEAD>
<BODY　BACKGROUND＝"画像タイトル＋保存形式名">
</BODY>
</HTML>

ああそれと、このサンプルは開く前にウィンドウを最大にしてから開いてみてください。ではサンプルです。
密かにどこで出そうかと狙っていたりもします（笑