###その参・・・・生地の加工とリンク###

用意する物
・道具・・・・・・ ＰＣ
ＰＣ内メモ帳（windows）
Symple　Text（マック）
適当な画像
その弐の最後に作ったhtmlファイル
ブラウザ(オフラインモードで使用)
※ブラウザは、インターネットエクスプローラー（ＩＥ）か
　ネットスケープ（ネスケ）がいいです。
　私が他のものをもってないので、確認できない為です。
　決して回し者ではありません。/^-^；

　

●まず、メモ帳（windows）あるいは、Symple　Text（マック）を開け、
その壱やその弐を参考にして、
新しいhtmlファイルを作りましょう。

今回は、生地に手を加えてみます。（<body>タグの中に書き込む）
そして新しい名前を付けて同じフォルダ内に新規保存します。

(ここでは、前のファイル名が『test1.html』新しいファイルが『test2.html』とします。)
ソース（１） 画面表示（１）
<html>
<head>
<title>
練習のページ
</title>
</head>
<body bgcolor="green" text="white">
<center>
<br><br>
新しいページだよ。<br><br>
リンクさせよう。
</center>
</body>
</html>

新しいページだよ。

リンクさせよう。
bgcolor="green"→背景の色を緑に指定
text="white"→テキストの色を白に指定
※勿論、色名でなくシーケンス番号でもＯＫ　参：「色コード」
注意：背景色が指定されてない場合、インターネットエクスプローラー４以降では、「白」で表示されますが、３以前では灰色で表示されてしまうので、きちんと白を指定した方がいいようです。
ソース（２） 画面表示（２）
<html>
<head>
<title>
練習のページ
</title>
</head>
<body bgcolor="green" background="guruguru-s.jpg" text="navy">
<center>
<br><br>
新しいページだよ。<br><br>
リンクさせよう。
</center>
</body>
</html>

新しいページだよ。

リンクさせよう。
background="guruguru-s.jpg"→背景にguruguru-s.jpgを読み込ませている
※画像が読み込まれないときは、指定された背景色になる（この場合は緑色）
※この場合はイラストですが、きちんとした背景画像にするといいですね♪

　

●では、その弐のページとリンクさせましょう
test1.html　ソース（２） test1.html　画面表示（２）
<html>
<head>
<title>
練習のページ
</title>
</head>
<body bgcolor="white" text="black" link="blue" alink="red" vlink="purple">
<center>
<br><br>
<font color="purple">わたしの</font><font size="5">ホームページ</font>へ<br>ようこそ♪
<br><br>
<img src="guruguru-s.jpg">
<br><br>
よろしく〜♪
<br><br>
<hr>
<a href="test2.html">次ページへ</a>
</center>
</body>
</html>

わたしのホームページへ
ようこそ♪



よろしく〜♪

次ページへ
<a href="test1.html>〜</a>→〜のところをクリックするとその指定されたページへ
　　　　　　　　　　　　　　　　　　　　　ジャンプします。
link="blue"→その文字にリンクがしてあるとこの色で表示されます。
alink="red"→リンク先のページにジャンプ中は、この色で表示されます。
vlink="purple"→リンクしてあるページにすでにアクセス済みの場合、この色で表示されませす。
※何も指定しない場合は、基本色（link=blue vlink=purple）になります。
<hr>→水平線、これだけだと表示画面一杯に引かれます。
test2.html　ソース（３） test2.html　画面表示（３）
<html>
<head>
<title>
練習のページ
</title>
</head>
<body bgcolor="green" text="white" link="yellow" alink="lime" vlink="black">
<center>
<br><br>
新しいページだよ。<br><br>
リンクさせよう。
<br><br>
<hr width="200" height="5">
 <br><br>
<a href="test1.html"><img src="guruguru-s.jpg" border="0" width="50" height="50"></a>
</center>
</body>
</html>

新しいページだよ。

リンクさせよう。
<hr width="200" height="5">
　→水平線の長さを２００ピクセル、高さを５ピクセルに指定しています。
※水平線でなく、細い画像を表示させるとまた雰囲気が違ってきます。
<a href="test1.html"><img src="画像ファイル名" border="0"></a>
→文字の変わりに画像をクリックでのリンクもできます。
※ border="数字"→画像の回りの枠線の太さを指定してます。
　　　　　　　　　　　この場合、「０」なので、線はなしという意味です。

　

※２ページとも保存できたらクリックしてきちんとジャンプするかどうか確認してみましょう。

※くれぐれも同じフォルダ内（同ディレクトリ上）に保存することを忘れないようにしてください！

この２つのページを発展させれば、ホームページができます。あとはデザインと素材ですね。

※他のディレクトリやインターネット上のページへジャンプさせたい場合は、ファイル名の前にそのＵＲＬ（ファイルの保存場所）を書きます。

※例：ここのＴＯＰページにリンクさせたい場合：
<a href="http://www.geocities.co.jp/Playtown-Domino/7271/">Feather　Dreamへ</a>

※例：１つ上のディレクトリのページにリンクさせたい場合：
<a href="../ファイル名">○○へ</a>

※例：すぐ下のフォルダ内（ディレクトリ）のページにリンクさせたい場合：
<a href="フォルダ名（ディレクトリ名）/ファイル名">○○へ</a>



きちんとジャンプできたでしょうか？
ページ内容を充実させて、ページ数も増やして本格的に作ってみて下さい。

次は、『htmlハンバーガー』です。

<<Back　　 ３分間クッキング・Index　　Next>>