.
リンクのはり方
リンクのはり方

リンクさせたい文字をアンカータグで囲む

<a href="ジャンプ先アドレス"> リンクさせたい文字 </a>

わたしのホームページは goo
の簡単ホームページを利用して作ってます

わたしのホームページは <a href="http://www.goo.ne.jp/"> goo </a>
の簡単ホームページを利用して作ってます

goo の文字をクリックして goo のHPにジャンプ
<a href="ジャンプ先アドレス" target="_blank"> goo</a>

target="_blank"をつければ別窓が開きます

targetについてはこちらを参照
リンク上にマウスを持ってきた時にリンク文字の形状

stylesheetについて詳しくはこちら

<head></head>間に下記を埋め込む 
<style type=text/css><!--
a         {
	text-decoration:none;
	/*リンク文字は飾り無し*/
	font-size:12pt;
	}/*文字の大きさ:12pt;*/
	 /*リンク部分の修飾はここに記述*/

a:link    {
	color:black;
	}/*<a></a>に囲まれた未訪問リンク部分の修飾*/

a:active  {
	color:gray;
	}/*<a></a>に囲まれてアクティブになったリンク部分の修飾*/

a:visited {
	color:#b0b0b0;
	}/*<a></a>に囲まれた既訪問リンク部分の修飾*/

a:hover   {
	color:red;
	background:blue;
	}/*<a></a>に囲まれてマウスが乗ったリンク部分の修飾*/
	 /*文字色赤背景色blue*/
--></style>
サンプル
画像をクリックしてジャンプしたい時
リンクさせたい画像をアンカータグ
で囲む
<a href="ジャンプ先アドレス"> 画像 </a>
この画像を

クリックするとフレッドハッチンソンにジャンプします
この画像を
<a href="http://www.fhcrc.org/" target="_blank">
	<img src="画像の置いてあるアドレス"  style="border:none;">
</a>
クリックするとフレッドハッチンソンにジャンプします
style="border:none;" ⇒ 枠なし
枠についてはこちら
ページの中でジャンプしたい時
リンク元
リンク先
  • <a name="button_moji">ボタン文字のリンク</a>
  • <a name="page">ページの中でジャンプしたい時<a>
リンク元
<a href="#button_moji">リンク元の名前<a>
リンク元に #を付ける
リンク先
<a name="button_moji">リンク先の名前<a>
青文字部分が同じであれば button_moji の名前は何でもよい

他のページの中にジャンプしたい時
例えば画像、背景画像の貼り方のページ内 背景画像の貼り方にジャンプする時
other.html というページの <a name=" bottom">にリンクする時は
リンク元
<a href="other.html#bottom">other というページの bottom</a>
other.html はジャンプしたい先のファイル名
後は ページの中でジャンプしたい時と同じ
ボタン文字のリンク
私のホムペ
ボタン文字 
<font 
style="font-size:14pt;color:green;font-family:HG創英角ﾎﾟｯﾌﾟ体;
border:lightgreen outset 3px;text-decoration:none;
background:url(背景画像url);">私のホムペ</font>
上記のソ−スです
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を +[A]で全選択して、コピーできます
リンクさせたいボタン文字の stylesheet をアンカータグに埋め込む
私のホムペ
↑リンク付きボタン文字 
<a href="ジャンプ先url" target="_blank" 
style="font-size:14pt;color:green;font-family:HG創英角ﾎﾟｯﾌﾟ体;
border:lightgreen outset 3px;text-decoration:none;
background:url(背景画像url);">私のホムペ</a>
上記のソ−スです
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を +[A]で全選択して、コピーできます
stylesheetについてはこちら
targetについてはこちらを参照

ボタン文字のリンクの作り方
リンクを貼る
私のホムペ 
<a href="ジャンプ先url">私のホムペ</a>
文字の大きさを決める font-size:14pt;
私のホムペ 
<a href="ジャンプ先url" style="font-size:14pt;">私のホムペ</a>
文字の色を決める color:gray;
私のホムペ 
<a href="ジャンプ先url" style="font-size:14pt;color:gray;">私のホムペ</a>
文字を太くする font-weight:bold;
私のホムペ 
<a href="ジャンプ先url" 
style="font-size:14pt;color:gray;font-weight:bold;">私のホムペ</a>
リンク文字の下線を消す text-decoration:none;
私のホムペ 
<a href="ジャンプ先url" 
style="font-size:14pt;color:gray;
font-weight:bold;text-decoration:none;">私のホムペ</a>
文字に枠をつける (border:枠の色 枠の種類 枠の太さ;)
border:lightgreen outset 3px;
私のホムペ 
<a href="ジャンプ先url" 
style="font-size:14pt;color:gray;font-weight:bold;
text-decoration:none;border:lightgreen outset 3px;">私のホムペ</a>
枠の背景に画像を貼る background:url('背景画像url');
私のホムペ 
<a href="ジャンプ先url" 
style="font-size:14pt;color:gray;font-weight:bold;text-decoration:none;
border:lightgreen outset 3px;background:url('背景画像url');">私のホムペ</a>
他でも使えるようにスタイルシート部分を抜き出す
私のホムペ 
<style type="text/css"><!--
#menu {
	font-size:14pt;
	color:gray;
	font-weight:bold;
	text-decoration:none;
	border:lightgreen outset 3px;
	background:url('背景画像url');}
--></style>
<a href="ジャンプ先url" id="menu">私のホムペ</a>
マウスが乗った時の設定をする
私のホムペ 
<style type="text/css"><!--
#menu {
	font-size:14pt;
	color:gray;
	font-weight:bold;
	text-decoration:none;
	border:lightgreen outset 3px;
	background:url('背景画像url');
	}/* ................... 通常時の設定 */

#menu:hover {
	color:lightgreen;
	border:lightgreen inset 3px;
	background:lightgreen;
	}/* ......... マウスが乗った時の設定 */
--></style>
<a href="ジャンプ先url" id="menu">私のホムペ</a>