TEXT13

　このページではリンクの勉強をしましょう。リンクスポットをクリックすると、次のページや他のページへ移動したり、他所のホームページへ移動します。

　それでは、移動先のページを作りましょう。練習ですから新しく作ることもないでしょう。これまでに作り上げたページの一部を変更して、２ページ目にしましょう。

　変更するのはＢＧＭファイルと背景画像ファイルにしましょう。 wallpaper2.gif とbgm2.mid を用意してください。

　次はリンクスポットに表示するボタン画像を用意します。このページで使っている画像ファイルを使うことにしましょう。「NEXT」ボタンの画像ファイルは next.gif「BACK」ボタンの画像ファイルは back.gif ですよ。

index.html をダブルクリックしてページを表示します。
「メニューバー」の「表示」→「ソース」とクリックをして、→「ソース」を表示します。
wallpaper.gif を wallpaper2.gif に、bgm.mid を bgm2.mid に変更します。
</BODY> の前に <A HREF="sample13.html"><IMG SRC="back.gif" BORDER="0" ALIGN="LEFT"></A> と記述します。

 は画像の回り込みを解除する記述です。

その後の の記述によって画像から２行空けて「BACK」ボタンが表示されます。

BORDER="0" はボタンに枠が付かないようにするための記述です。

リンクスポットにはボタン画像の代わりに文字を使うこともできます。文字の場合は下線が付きますから、これを付かないようにするには STYLE="TEXT-DECORATION:NONE" と記述します。

画面の右に表示する場合は <DIV STYLE="TEXT-ALIGN:right">次ページへ</DIV> と記述します。

<A HREF="sample13.html" STYLE="TEXT-DECORATION:NONE"><DIV STYLE="TEXT-ALIGN:right">次ページへ</DIV></A> と記述すると右下のように表示されます。

次ページへ

<HTML>
<HEAD>
<TITLE>初めてのホームページ</TITLE>
</HEAD>
<BODY BACKGROUND="wallpaper2.gif">
<BGSOUND SRC="bgm2.mid" LOOP="infinite">
<BLOCKQUOTE>
<CENTER>私のホームページ</CENTER> 
<MARQUEE>私のホームページへようこそ！　南の海の雰囲気を味わってください。</MARQUEE> 
<IMG SRC="gazou.jpg" ALIGN="RIGHT" HSPACE="10"> 
この写真はフィリピンのセブ島沖に浮かぶ小さな島です。 周りは穏やかな珊瑚礁の海に囲まれひっそりと佇んでいます。あなたをこの美しい南の海へご案内しましょう。
</BLOCKQUOTE>
 <A HREF="sample13.html"><IMG SRC="back.gif" BORDER="0" ALIGN="LEFT"></A>
</BODY>
</HTML>
変更が終わったら、→「ファイル」→「名前を付けて保存」とクリック、→「ファイルの種類」欄を「すべてのファイル」とし、→「ファイル名」欄に「second.html」と入力、→「ＯＫ」ボタンをクリック、→「メモ帳」を閉じます。

これで移動先のページができました。
index.html をダブルクリックしてページを表示します。
「メニューバー」の「表示」→「ソース」とクリックをして、→「ソース」を表示します。
</BODY> の前に <A HREF="second.html"><IMG SRC="next.gif" BORDER="0" ALIGN="RIGHT"></A> と記述します。

<HTML>
<HEAD>
<TITLE>初めてのホームページ</TITLE>
</HEAD>
<BODY BACKGROUND="wallpaper.gif">
<BGSOUND SRC="bgm.mid" LOOP="infinite">
<BLOCKQUOTE>
<CENTER>私のホームページ</CENTER> 
<MARQUEE>私のホームページへようこそ！　南の海の雰囲気を味わってください。</MARQUEE> 
<IMG SRC="gazou.jpg" ALIGN="RIGHT" HSPACE="10"> 
この写真はフィリピンのセブ島沖に浮かぶ小さな島です。 周りは穏やかな珊瑚礁の海に囲まれひっそりと佇んでいます。あなたをこの美しい南の海へご案内しましょう。
</BLOCKQUOTE>
 <A HREF="second.html"><IMG SRC="next.gif" BORDER="0" ALIGN="RIGHT"></A>
</BODY>
</HTML>
記述が終わったら、→「ファイル」→「上書き保存」とクリック、→「メモ帳」を閉じます。
ブラウザの「更新」アイコンをクリックします。「NEXT」ボタンが表示されましたか？

では、そのボタンをクリックしてみましょう。次のページに移動しましたか？

移動先ページ（xxx.html）との位置関係によるリンクの記述（相対パス）

<A HREF="xxx.html">同じフォルダ内の場合</A>

<A HREF="ccc/xxx.html">同じフォルダにあるcccフォルダ内の場合</A>

<A HREF="ccc/ddd/xxx.html">同じフォルダにあるcccフォルダにあるdddフォルダ内の場合</A>

<A HREF="../xxx.html">１階層上の場合</A>

<A HREF="../../xxx.html">２階層上の場合</A>

<A HREF="../aaa/J.html">１階層上のaaaフォルダ内の場合</A>

<A HREF="../aaa/bbb/N.html">１階層上のaaaのフォルダにあるbbbフォルダ内の場合</A>