ホームページのつくりかた・７．リンク

★　７．リンクしてみよう　★

………………………………………………………………………………………………
リンクって？
ぶんや　えのページのなかに、ほかのページや　ぶんのばしょを　かいておくと、
そこからすぐに　かいてあるばしょに　いくことができるしくみのことです。
………………………………………………………………………………………………

　　　　　　　　　　リンクをつけてみよう　　　　　　　　　　

まず、リンクするページと、リンクされるページの２つをじゅんびします。

＜リンクするほうのファイル＞

１．「さいしょのさいしょ」でつくった「file1.html」に、
したの　ふともじでかいてある　きごう（タグ）をかいてみてね。
（はいいろのところは「file1.html」でつくったものなので、かかなくていいです）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<A HREF="rink1.html">ほかのページにジャンプ！</A>
　　　　　　　　↑
（ここには、リンクされるファイルの　なまえをかいてね）　　
</BODY>
</HTML>

このファイルの名まえを、「rink.html」にして、ほぞんしよう。

＜リンクされるほうのファイル＞
１．「さいしょのさいしょ」でつくった「file1.html」に、
したの　ふともじでかいて　きごう（タグ）をかいてみてね。
（はいいろのところは「file1.html」でつくったものなので、かかなくていいです）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
こんにちは。
ジャンプしてきました。 　　　　　　　　　　
</BODY>
</HTML>

このファイルの名まえを、「rink1.html」にして、ほぞんしよう。

　ブラウザで＜リンクするほうのファイル＞をみてみると…？（「みてみよう」ボタンをおしてね）

みてみよう！

「ほかのページにジャンプ！」というもじを、クリックしてみてね。
がめんが、きいろの＜リンクされるほうのファイル＞になったかな？

●・　せつめい　・●

<A HREF="～"></A>
～というファイルにジャンプしなさい、というめいれいです。
（このことを、「リンクをはる」ともいいます）
<A HREF="～">と</A>でかこんだもじや　えが　ボタンになって、
がめんでクリックすると、ほかのページへジャンプします。

　　リンクのボタンに　えをつかってみよう　　

こんなふうに、えを　クリックすると、ほかのページに　ジャンプさせることもできます。
（「見てみよう」ボタンをおしてね）

みてみよう！

えを　クリックしたら、きいろのがめんに　かわったでしょ。

＜リンクするほうのファイル＞

さっきの＜リンクするほうのファイル＞を、したのように　ちょっとかえてみてね。

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<A HREF="rink1.html"><IMG SRC="yui1.jpg"></A>
</BODY>
</HTML>

●・　せつめい　・●

<A HREF="～">と</A>でかこめば、もじでも　えでも　ボタンになります。
ただし、えをリンクボタンにすると、わくがついてしまいます。
わくを　けしたいときは、「６．えを　はりつける」で　でてきた、
BORDERをつかいます。（<IMG SRC="～" BORDER=0>というふうに書きます）

　　　　ページの　すきなばしょに　リンクしてみよう　　　　

………………………………………………………………………………………………
ページの　いちばんうえ　だけじゃなく、
すきなばしょにも　ジャンプすることが　できます。
………………………………………………………………………………………………

＜リンクするほうのファイル＞
さっきの＜リンクするほうのファイル＞を、したのように　かえてみてね。
（はいいろのところは　さっきつくったものなので、かかなくていいよ）

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY>
こんにちは。
<A HREF="rink2.html#1"><IMG SRC="yui1.jpg"></A>
</BODY>
</HTML>

＜リンクされるほうのファイル＞

＜リンクされるほうのファイル＞を、したのように　ちょっとかえてみてね。

<HTML>
<HEAD>
<TITLE>　はじめてのホームページ　</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
<A NAME="1"></A>ジャンプしてきました。
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
こんにちは。 
</BODY>
</HTML>

このファイルの名まえを、「rink2.html」にして、ほぞんしよう。

　ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）

みてみよう！

　えを　クリックしたら、きいろのがめんのなかの「ジャンプしてきました」というもじが　いちばんうえに　なりました。

●・　せつめい　・●

<A HREF="○○○.html#～"></A>
つぎの、<A NAME="～"></A>で　つけた　なまえのばしょ（～）に
ジャンプしなさい、というめいれいです。
<A NAME="～"></A>
リンクさせたいばしょに、～というなまえをつけなさい、というめいれいです。

もうすこし　おにいさん、おねえさんのためのまとめです。
　タグのいろいろ(7)
　　リンクタグ

<A HREF="～"></A> 　　（～はURL(*1)）	→リンク先の指定
<A HREF="～#xxx"></A> 　　（～はURL、xxxはアンカー名）	→リンク先の指定　（指定したアンカーの場所を表示）
<A NAME="xxx"></A> 　　（xxxはアンカー名）	→アンカーの設定
<A HREF="mailto:～"></A> 　　（～はメールアドレス）	→指定アドレスあての　メーラーが立ち上がる

(*1)URL：ファイルのある場所のこと（同じディレクトリ内では、ファイル名）。

まえへ一つもどるつぎをよむつぎへ