●リンクを作ろう
 ●リンクの決まりごと
 ●リンクの色を変えてみよう


 


ねえねえ、今度は「トップページ」の目次から、「日記」のページと「ペット紹介」のページを別々に作って、ジャンプするようにしてみたいんだけど。
 
ページごとにジャンプするようにつなげることを「リンクさせる」というんだ。ホームページは何ページかがまとまって出来ている事が多いから、それぞれのページにリンクさせているんだね。

ノリコちゃん、リンクさせるページは作った?
 
うん。今作ってるところ。基本のHTMLの<body>〜</body>タグの間にさっき作ったページの内容を別々に入れていけばいいんだよね? 
 
うん。もうバッチリだね。
 
 
へへへ。
 
 

<html>
<head>
<title>
ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
<center>
<br>
<br>
<b><font size="5" color="#FF6600">
★日記★</font></b><br>
○月○日(月曜日)<br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。
<br>
<br>
○月○日(火曜日)<br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。
<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。
<br>
<br>
○月○日(水曜日)
<br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ?
<br>
病院に行って注射した。痛かった〜!でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。
</font>
</center>
</body>
</html>


<html>
<head>
<title>
ノリコのペット紹介</title>
</head>
<body bgcolor="#FFCCCC">
<center>
<br>
<br>
<b><font size="5" color="#006600">
★ペットの紹介★</font></b><br>
<img src="gonta.gif" width="100" height="100"> <br>
これがうちのゴン太です。<br>
太りぎみだけど、かわいいやつです。
<br>
今年で6才。
<br>
彼女募集中。
<br>
兄弟は親戚のうちにいます。
<br>
これでも長男だぞ!
<br>
<br>
</center>
</body>
</html>

※よくわからない人は5.いよいよ作ってみようの時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

(上のタグを表示させると・・・↓クリックしてみよう)

 
 
上のHTMLファイルを「diary.html」、下のHTMLファイルを「pet.html」にして保存しよ。
 
保存する場所はいつも通り、同じ「homepage」のフォルダの中だよ。
 
 
はいはい、わかってるって。(笑)
 
 
まで作っていた「index.html」のファイルのコーナーの内容を、別々のファイルにして保存してみましょう。基本のHTMLの <body>〜</body> タグの間に、各コーナーの内容のHTMLをそれぞれそのまま入れてしまうだけでOKです。HTMLができたらそれぞれのファイルを保存しましょう。名前はなんでもOKですが、必ず半角小文字の名前にしましょう。そして「.htmlの拡張子をお忘れなく




 


じゃあ、「トップページ」のもくじから日記のページにつなげてみようかな。今度はどんなタグを使うの?
 
余裕だね。(笑)これを使うんだよ。
 
 

ンクさせるときは、
<a href="***.html(表示したいHTMLファイル名)">クリックする文</a>

という風に指定します。

<a href="diary.html">ノリコの日記</a>

 
(上のタグを表示させると・・・)
ノリコの日記
 
あ、この文字の部分をクリックすると、違うページにジャンプするんだね。
 
 

ンク部分は文字だけでなく、画像も指定することができます。その場合、画像に枠が自動的に付いてしまうので、先ほど説明した画像の枠指定で、<img src="ファイル名" >の中に「border=0と指定して下さい

<a href="10.html"><img src="diary.gif" border=0></a>


(上のタグを表示させると・・・)


う〜ん、こっちもいいなぁ。
 
 

●他のホームページにリンクさせたい場合
自分以外のホームページにリンクさせる場合は<a href="">の「""」の間にURL(ホームページアドレス)を全て書き込みましょう。

<a href="http://www.spinnet.jp/">SpinNetホームページ</a>


(上のタグを表示させると・・・)
SpinNetホームページ

★URLとは?
インターネット上のサーバの場所と、見たいファイル名を組み合わせたものが、URL(ホームページアドレス)になります。もしURLが「http://www.spinnet.jp/index.html」だとしたら、「http://www.spinnet.jp/」というサーバの中の、「index.html」と言うファイル、と言う意味になります。あなたのURLの場合は「http://***.***.ne.jp/SpinNetから指定されたパス名/ユーザパス名/」までがサーバの場所で、それ以降に「index.html」や「diary.html」などのファイル名を指定すれば、そのページへジャンプできます。





 


リンクさせると、文字の色が自動的に変わるんだね。
 
 
うん。ブラウザによって違う色に表示されるように指定されているんだ。
 
 
でも、もっと違う色にしたいな。リンクの色も変えられる?
 
  
もちろん。
 
 

ンクの色は、「訪れたことのないページへのリンク」、「訪問済みのページへのリンク」、「クリックしたとき」がわかるように、3色を指定します。それぞれ「訪れたことのないページへのリンク=link」、「訪問済みのページへのリンク=vlink」、「クリックしたとき=alink」と言う名前が付いていますので、それぞれの色を指定しましょう。<body> タグの中に書き込みます。

<body link="#RGB値" vlink="#RGB値" alink="#RGB値">

★「RGB値」は「9.色を変えてみよう」の中の色見本を参考にしてください。

 
えーと、「link」「vlink」「alink」・・・と。
 
 

<html>
<head>
<title>
ノリコのホームページ</title>
</head>
<body bgcolor="#FFCCCC" link="#663333" vlink="#FF6600" alink="#FF6600">
<center>
<br>
<br>
<b><font size="6" color="#FF0000">
ノリコのホームページへようこそ!!
</font></b><br>
<br>
<img src="noriko.gif" width=100 height=100><br>
<b><font color="#000099">
はじめまして!ノリコです。</font></b><br>
<br>
名前:ノリコ<br>
年齢:ヒ・ミ・ツ!
<br>
性別:女の子で〜す
<br>
住んでいる所:東京
<br>
趣味:音楽を聴くこと。ショッピング。寝ること。絵をかくこと。
<br>
<br>
みなさんはじめまして、ノリコです!遊びに来てくれてありがとう!
<br>
何もわからなかったけど、頑張って作りました。ごゆっくりどうぞ!
<br>
<br>
<br>
<font size="5" color="#FF00CC"><b>
★もくじ★</b></font><br>
<a href="diary.html">
ノリコの日記</a><br>
<a href="pet.html">
ペットの紹介</a><br>
<br>
<br>
メール待ってます
</center>
</body>
</html>

※よくわからない人は5.いよいよ作ってみようの時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

(上のタグを表示させると・・・↓クリックしてみよう)



これを「index.htmlとして保存して、目次にしよう・・・・。できた!
 
 

 


COPYRIGHT