２：背景の色を決めリンクを貼ろう！

　前回は取りあえず画面に表示できる形にしてみました。しかし，なんかエラーメッセージみたいで味気ないですよね。デザインする上で大切なのは色です。このサイトは主に背景色は黒に統一されています。そして文字の色も白に統一され，リンクの色は緑，押したあとなら赤と決めています。こういった統一感のある色使いをしていれば，「このページの中だよ」ということを明示することができて閲覧者に安心感を与えます。（駅などで鉄道会社ごとに看板のデザインが統一されているのと同じことです）これのやり方を見てみましょう。

　前回BODYタグを説明した時に「細かい設定をつける事ができます」と書きました。前回省略した「<BODY」のあとの部分に秘密が隠されています。

<BODY BGCOLOR="black" TEXT="white" LINK="lightgreen" VLINK="red" ALINK="purple">

タグの名前（ここではBODY）のあとスペースをあけ，「(設定項目)="値"」というように書きます。例えば最初の「BGCOLOR="black"」というのは，「BGCOLOR設定をblackにする」という意味です。設定項目は「属性」といい，属性ごとにどのようなタイプの値が入るかは決まっていて，ここではどれも色が入ります。
　では，まずは属性の方から説明します。

属性	入る値のタイプ	説明
BGCOLOR	色名	背景の色を決めます。
TEXT	色名	本文の基本色を決めます。（タグで変える事もできますが，それは別の時に解説します。）
LINK	色名	リンクのテキストの色を決めます。
VLINK	色名	過去にいった事のあるリンクのテキストの色を決めます。
ALINK	色名	リンクを押している最中の色を決めます。

　以後このような表で属性を解説する事が多いので，慣れておいて下さい。また，BODYタグには属性はもっと沢山あります。それは必要な時に解説します。

　使える色の名前はこんなものがあります。多分もっとあります。
　さて，色の書き方にはもう一つ"#000000"などというものがあります。見た事がある人も多いでしょうし，実際このサイトもほとんどのページではそれで設定していますが，難しくなってしまうのでここでは解説しません。まあ，これだけ沢山の色が英語で設定できれば使わなくても済むかも知れませんね。

　さて，今までもずっとHTMLを書いてきましたが，そもそもHTMLとは何の略でしょう。「HTML=HyperText Markup Language」ハイパーテキストを記述するための言語というわけです。ハイパーテキストというのはテキストをクリックすることで何かが起きるようなテキストのことをいい，ホームページの中ではこんなやつで，いわゆるリンクのことです。インターネットというのはリンクによってページからページへと飛んでいくという昔のパソコン通信にはない特徴を持っている為，リンクがなくては話になりません。（余談ですが，URLの頭にある「http」というのは HyperText Transfer Protocolの略で，ハイパーテキストを送信する為の決まり事と言う意味です。ここでもいかにハイパーテキストが大切かがよく分かります）せっかくBODYタグでリンク文の色も決めましたし，HTMLの名前にそってリンクをはってみましょう。
　リンクを貼る時に使うのは<A>タグです。

<A HREF="http://xxx.com/xxx.htm">～</A>

　このタグで囲まれた場所がリンクになります。つまり画像をこれで挟めば「画像をクリック」もできるのですが，まだ画像の設置の仕方を解説していないので意味はないですね（何）。

属性	入る値のタイプ	説明
HREF	ページURL	飛ぶ先のページのアドレスを設定。
TARGET	(下記参照)	リンク先をどう表示するかを設定。

　もちろん他にもいろんな使い方があり，いろいろな設定項目があります。TARGETの意味がよく分からないかも知れませんが，これはリンク先ページをこのウィンドウに表示させたくないときなどに使います。例えば，TARGET="_blank"と打つと新しいウィンドウが開いてリンク先が表示されます。前のウィンドウがそのまま残るので，例えば補足説明のページを開いたりするときなどに役に立ちます。また，他の人のページにリンクを貼るときなどは，別ウィンドウで開くことで「私のページ内ではないです」という意味を持たせることもできます。他にもフレーム(ウィンドウ内を区切っていくつかのHTMLを表示させるもの) を使っている場合はフレームをなくすなどのコマンドもありますが，フレームを勉強していないので省略。とりあえず「TARGET="_blank"」は知っておくと便利です。

　では，今回もサンプルを作ってみましょう。リンクを押すと前回作ったsample.htmが開くようにします。もしsample.htmを消しちゃったor作っていない人は，前回に戻り保存しておいて下さいね。

<HTML>
<HEAD>
	<TITLE>サンプル２号</TITLE>
</HEAD>
<BODY BGCOLOR="black" TEXT="white" LINK="lightgreen" ALINK="red" VLINK="purple">
	リンクを押すとページが変わります<BR>
	<A HREF="sample.htm">リンク</A><BR><BR>
	
	リンクを押すとページが別ウィンドウで開きます<BR>
	<A HREF="sample.htm" TARGET="_blank">リンク</A><BR>
</BODY>
</HTML>

　ここまで打てたら保存しますが，ファイル名は「sample2.htm」にして，sample.htmと同じフォルダに保存して下さい！！違うフォルダだとリンクが動作しません。
　あれ？なんでhttp://とか入っていないの？？と思った人もいるでしょう。これは上記の注意の理由でもあるのですが，同じフォルダの中の物をさすときにはファイル名だけを入れればOKです。MS-DOSやUNIXを使ったことのある人なら理解できると思いますが・・・ファイルの場所の設定の仕方についてはまたの機会にして，取りあえずここでは「同じフォルダ内の物はファイル名だけでアクセスできる」と覚えて下さい。
　ブラウザで「sample2.htm」を見てみましょう。こんな感じになるはずです。だんだん本格的になってきましたね！！

　次回は文字の大きさや太さを変えたり，画像をページに張り付けたりします。お楽しみに！！
＞戻る