★Lesson5★
〜ハイパーリンク実践編〜


○5:ハイパーリンク実践編

では、まずは、コチラ(zip形式)からファイルをダウンロードして解凍して下さい。で、その中に「profile.html/diary.html/Read Me.txt」の3つのファイルがあると思いますので、そのうちのHTML形式のprofileファイルとdiaryファイルを、Lesson1で作成したHP製作場所にコピーして下さい。後はもう要りませんので、ダウンロードしたファイルと解凍したフォルダを削除して下さい。※Read Meには必ず目を通しておくこと!!

ハイパーリンクは自分のサイトと、子ページをくっつけるのにも必要ですし、リンク集を作るときや相互リンクの申し出を受けたときにも必要となります。そもそもただ単に文字だけ画像だけがダーっと並んであるだけの1ページでしか無いサイトなんて面白みも無いですからね(面白く作ろうと思えば当然不可能なことではありませんが…。)。やっぱりそういうこともあるし、TOPページだけにズラーっと書くと、スクロールしないと下の方が見れない、ということにもなります。と、いうことで、これはあくまでも管理人の考えに基づいての説明でしたが、ハイパーリンクの知識は必要不可欠となると思われます。では、そういうことなので、早速ハイパーリンクの解説を行いたいと思います。

上記の文で方法を説明しましたが、「profile.html/diary.html」の2つのファイルはHP製作場所フォルダ内に入れましたか?入れたら準備は完了です。で、リンクの方法の解説ということですが、まず「profile.html」は「♠プロフ♠」にリンクします。「diary.html」は「♣日記♣」にリンクするということを覚えておいて下さい。

まずは、Lesson2〜4までで頑張って製作していたindex.htmlのソースを開いて下さい。で、Lesson4で勉強したリンクタグの記述の仕方を思い出してみて下さい。で、あの通りに「profile.html」は「♠プロフ♠」に、「diary.html」は「♣日記♣」にリンクさせてみて下さい。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>☆スカイエリアのサイト☆</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00">

<CENTER><SMALL>〜趣味のページ〜</SMALL>
<H1><I><FONT COLOR="#0000FF">☆スカイエリアのサイト☆</FONT></I></H1></CENTER> <BR>
<BR>
<BR>

<CENTER> <P> <B><BIG><I>Welcome to SKY-AREA home page!!</I></BIG></B><BR>
ここは私が作成したホームページです。 </P>

<P> まだまだコンテンツ数は少なく、内容も浅く、発展途上なサイトですが、<BR>
これから頑張って充実したコンテンツを用意していきますので、<BR>
よろしくお願いしますm(_ _)m </P> </CENTER>

<CENTER><B><U>〜INFORMATION〜</U></B><BR>
2006年01月01日:日記更新しました<BR>
<BR>
2005年12月31日:日記更新しました<BR>
<BR>
2005年12月30日:日記更新しました<BR>
<BR>
2005年12月25日:日記更新しました<BR>
<BR>
2005年12月24日:日記更新しました<BR>
<BR>
2005年11月30日:日記更新しました<BR>
<BR>
2005年11月25日:サイト・オープン<BR>
<BR>
</CENTER><BR>
<BR>
<!--サイトコンテンツ:ここから--> <CENTER><BR>
<A HREF="profile.html">♠プロフ♠</A><BR>
<BR>
<A HREF="diary.html">♣日記♣</A><BR>
<BR>
♠掲示板♠<BR>
<BR>
♣メール♣<BR>
<BR>
</CENTER> <!--サイトコンテンツ:ここまで--><BR>
<BR>
<CENTER><FONT SIZE="2" COLOR="GREEN">© 2005-2006 SKY AREA NETWORK CORPORATION, All rights reserved.</FONT></CENTER><BR>
<BR>
</BODY>
</HTML>

どうです?出来ました?こんな感じになったと思います。これは相対パスという方式のリンクの方法で、現在地を基準とした相対的な指定方法なのです。同じフォルダ内にあるファイルにリンクさせる場合や、同一サーバー内にあるファイルにリンクさせる際に使用する一般的な方法です。

で、もう一つ、絶対パスという方式のリンクの方法があります。これは、外部ファイルや外部サイトへのリンク、要するにリンク集とか作る際に用いる方法です。で、そのやり方については相対パスの方式と何も変わりません。同じくリンクタグを使用します。相対パスではプロフィールのページにリンクする場合には<A HREF="profile.html">♠プロフ♠</A>としましたよね?この「profile.html」の部分を、「http://」で始まるURLに書き換えるだけです。では、実際にこのサイトへ飛ぶリンクの貼り付けを行ってみましょう。♠プロフ♠と書かれた上に「☆★HTML教室★☆」という文字リンクの貼り付けが出来るかどうかの実践です。尚、URLは「http://www.geocities.jp/skyarea_hp/」となります。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>☆スカイエリアのサイト☆</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00">

<CENTER><SMALL>〜趣味のページ〜</SMALL>
<H1><I><FONT COLOR="#0000FF">☆スカイエリアのサイト☆</FONT></I></H1></CENTER> <BR>
<BR>
<BR>

<CENTER> <P> <B><BIG><I>Welcome to SKY-AREA home page!!</I></BIG></B><BR>
ここは私が作成したホームページです。 </P>

<P> まだまだコンテンツ数は少なく、内容も浅く、発展途上なサイトですが、<BR>
これから頑張って充実したコンテンツを用意していきますので、<BR>
よろしくお願いしますm(_ _)m </P> </CENTER>

<CENTER><B><U>〜INFORMATION〜</U></B><BR>
2006年01月01日:日記更新しました<BR>
<BR>
2005年12月31日:日記更新しました<BR>
<BR>
2005年12月30日:日記更新しました<BR>
<BR>
2005年12月25日:日記更新しました<BR>
<BR>
2005年12月24日:日記更新しました<BR>
<BR>
2005年11月30日:日記更新しました<BR>
<BR>
2005年11月25日:サイト・オープン<BR>
<BR>
</CENTER><BR>
<BR>
<!--サイトコンテンツ:ここから--> <CENTER><BR>
<A HREF="http://www.geocities.jp/skyarea_hp/">☆★HTML教室★☆</A><BR>
<BR>
<A HREF="profile.html">♠プロフ♠</A><BR>
<BR>
<A HREF="diary.html">♣日記♣</A><BR>
<BR>
♠掲示板♠<BR>
<BR>
♣メール♣<BR>
<BR>
</CENTER> <!--サイトコンテンツ:ここまで--><BR>
<BR>
<CENTER><FONT SIZE="2" COLOR="GREEN">© 2005-2006 SKY AREA NETWORK CORPORATION, All rights reserved.</FONT></CENTER><BR>
<BR>
</BODY>
</HTML>

どうですか?「☆★HTML教室★☆」のボタンは出来ましたか?当サイトの入り口のページは表示されましたか?完成品はこちらです。これと全く同じようになっていればHPの作成部分は全て完了です!!後もうひと踏ん張りです。頑張って下さい!!次回は「〜ファイルアップロード編〜」です。自分で作ったサイトのファイルを、HTTPサーバーにアップロードして、サイトを公開する方法です。尚、ここから先はHTTPサーバーを自分で用意して・・・という風になりますので、アップロードの解説のみで、実践は行いません。

≪≪前のレッスンへ戻るレッスンページTOP次のレッスンへ進む≫≫