ねえねえ、今度は「トップページ」の目次から、「日記」のページと「ペット紹介」のページを別々に作って、ジャンプするようにしてみたいんだけど。 |
|
ページごとにジャンプするようにつなげることを「リンクさせる」というんだ。ホームページは何ページかがまとまって出来ている事が多いから、それぞれのページにリンクさせているんだね。 ノリコちゃん、リンクさせるページは作った? |
|
うん。今作ってるところ。基本のHTMLの<body>〜</body>タグの間にさっき作ったページの内容を別々に入れていけばいいんだよね?
|
|
うん。もうバッチリだね。 |
|
へへへ。 |
<html> |
<html> |
※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。 |
上のHTMLファイルを「diary.html」、下のHTMLファイルを「pet.html」にして保存しよ。 |
|
保存する場所はいつも通り、同じ「homepage」のフォルダの中だよ。 |
|
はいはい、わかってるって。(笑) |
今まで作っていた「index.html」のファイルのコーナーの内容を、別々のファイルにして保存してみましょう。基本のHTMLの <body>〜</body> タグの間に、各コーナーの内容のHTMLをそれぞれそのまま入れてしまうだけでOKです。HTMLができたらそれぞれのファイルを保存しましょう。名前はなんでもOKですが、必ず半角小文字の名前にしましょう。そして「.html」の拡張子をお忘れなく! |
じゃあ、「トップページ」のもくじから日記のページにつなげてみようかな。今度はどんなタグを使うの? |
|
余裕だね。(笑)これを使うんだよ。 |
リンクさせるときは、
|
<a href="diary.html">ノリコの日記</a> |
あ、この文字の部分をクリックすると、違うページにジャンプするんだね。 |
リンク部分は文字だけでなく、画像も指定することができます。その場合、画像に枠が自動的に付いてしまうので、先ほど説明した画像の枠指定で、<img src="ファイル名" >の中に「border=0」と指定して下さい。 |
<a href="10.html"><img src="diary.gif" border=0></a> |
う〜ん、こっちもいいなぁ。 |
●他のホームページにリンクさせたい場合 |
<a href="http://www.spinnet.jp/">SpinNetホームページ</a> |
★URLとは? |
リンクさせると、文字の色が自動的に変わるんだね。 |
|
うん。ブラウザによって違う色に表示されるように指定されているんだ。 |
|
でも、もっと違う色にしたいな。リンクの色も変えられる? |
|
もちろん。 |
リンクの色は、「訪れたことのないページへのリンク」、「訪問済みのページへのリンク」、「クリックしたとき」がわかるように、3色を指定します。それぞれ「訪れたことのないページへのリンク=link」、「訪問済みのページへのリンク=vlink」、「クリックしたとき=alink」と言う名前が付いていますので、それぞれの色を指定しましょう。<body> タグの中に書き込みます。 |
<body link="#RGB値" vlink="#RGB値" alink="#RGB値"> |
★「RGB値」は「9.色を変えてみよう」の中の色見本を参考にしてください。 |
えーと、「link」「vlink」「alink」・・・と。 |
<html> |
※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。 |
これを「index.html」として保存して、目次にしよう・・・・。できた! |