NICS-NET HTML講座　第11話

第１１話 『リンクする』の巻

ベース文字色指定のタグ

リンクする

ベース文字色指定のタグ

この講座では、リンクを勉強しますね。リンクというのは、画面上の文字または絵をクリックすると現在開いているページから別のページへ行くという機能のことです。
が、その前に大切な『テキスト、リンクに色を指定するタグ』の勉強をしておきます。ここで勉強するタグは、あらかじめ『基本色、リンクする部分の色、リンクした後の色、リンクする瞬間色』を指定出来るというものです。これを利用することで、ページを見にきた人が『ここをクリックすると別のページに行ける』とか『ここはもうクリックして済んだ』と判断することができるのです。

テキスト、リンクの色を指定するタグ
<body text=#rgbカラー link=#rgbカラー vlink=#rgbカラー alink=#rgbカラー>～</body>

　　　text=#rgbカラー････テキストの文字の色
　　　link=#rgbカラー････リンクする部分の色
　　　vlink=#rgbカラー････リンクした後の色
　　　alink=#rgbカラー････リンクする瞬間の色
　　　　の色を指定するところです。

<body>～</body>は『本文を指定するタグ』で、第２話の『html』構造にしてみようで勉強しました。 <body>～</body>のタグの<bodyの後に半角のスペースをあけて、 text=#rgbカラー link=#rgbカラー vlink=#rgbカラー alink=#rgbカラーを入れるとＯＫです。
このやり方以前にも勉強しています。背景に色を付ける時も <body>～ </body>のタグの <body>のほうにbgcolor=#rgbカラーを入れたんですけど、覚えていますか？
『テキスト、リンクの色を指定するタグ』と背景色指定タグは併用できます。どちらが先でも良いので半角のスペースをあけてそのまま入力して下さいね。

リンクするためのタグ

いよいよリンクの
勉強ですよぉ！

リンクするためのタグ
【文字をリンクさせる場合】
<a href="ファイル名またはアドレス（URL）">文字列</a>

【画像をボタンとして使う場合】
<a href="ファイル名またはアドレス（URL）"><img src="画像ファイル"></a>
<a href="ファイル名またはアドレス（URL）"><img src="画像ファイル" border="数値" ></a>

上記がリンクのタグです。<a href="ファイル名またはアドレス（URL）">～</a>のタグで囲まれた部分は、ホームページ上では、link=#rgbカラーで指定された色で表示され、その部分をクリックすると別のページが開けるのです。
基本的に、自分のホームページ内でリンクをする場合はa href="の後に、ファイル名またはアドレス（URL）を入力してください。

　◇　注意　◇

ファイル名を入力する場合、リンクするファイルはリンク元のファイルと同じディレクトリの中に保存されていなければならない。別のフォルダ（場所）にある時に、記述が少し変わります。詳しくは、<a href="htmlc5.htm">中級　第５話『中級的ファイル保存とリンク』の巻</a>をご参考下さい。
絵、写真をリンクボタンに使用する場合、<a href="呼び出すファイル名"><img src="画像ファイル名"></a>と記述します。（利用される画像のファイルとしては、gif,jpg,jpeg,pngが一般的です。）
画像ファイルは文字と同様にlink=#rgbカラー vlink=#rgbカラー alink=#rgbカラーで指定した色の線で囲まれてしまいます。それがいやな場合は、<img src="画像ファイル名" の後に半角のスペースをあけて、border=0>を入力すれば、線は出なくなります。
逆に、線の太さを変えたい場合はborder=の後の数字を指定すると太さが変えられます。
アドレスを入力する場合はhttp://から入力する。入力例としてNICS-NETにリンクする場合は
<a href="http://www.tamano.or.jp">NICS-NETへ</a>と記述。

htmlの画面

<html>
　<head>
　 <title>A子の紹介</title>
　</head>
　<body bgcolor=#f7d7fe text=#000000 link=#ff0000 alink=#00ff00 vlink=#0000ff>
　 <center>
<hr width=70%>
　　<h1>Ａ子のホームページ</h1>
<hr width=70%>
<img src="../takaragif/ako1.gif"><img src="../takaragif/ako2.gif"> 
　名前は、A子。 
　年齢はヒミツ。 
　職業は<ont color=#ffoocc>OL。 
　特価で買ったワープロを持っているが使い方が良く分からない。 
　流行ものが好きで、今はインターネットに興味大！ 
<a href="http://www.tamano.or.jp/">●　NICS-NETへ</a>
　 </center>
　</body>
</html>
※色のついた部分が今回追加した部分です。

Ａ子のホームページにリンク
ここをクリックすると今までで出来上がっているＡ子さんのホームページが見られます。

　目次へ　

前のページへ

次のページへ