HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / リンクしてみる
リンクしてみる
「ページの内容をアレンジしてみる」で作成したページ（index.html）に、リンクボタンを入れてみます。

同じフォルダ内にあるページ（sample.html）と、外部サイトへのリンクを設定してみましょう。

今回使用するソフトは、メモ帳とブラウザ（インターネットエクスプローラ）だけです。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。
　同じフォルダ内のページへリンクする
index.html から sample.html にリンクさせてみましょう。

まず、「メモ帳」で index.html を開いてください。このファイルのソースを見ると、

<H1>私のホームページへようこそ！</H1>

上記のように書かれた1行がありますので、そのすぐ下あたりにリンクの指定を記述してみてください。

リンクの指定方法は、

<A HREF="sample.html">サンプルページへ</A>

上記のような感じになります。sample.html の部分に、リンク先のファイル名を指定してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ！</H1>

<A HREF="sample.html">サンプルページへ</A>

<P>
ここは私のホームページです。<BR>
ご訪問ありがとうございました！
</P>

<P>
まだコンテンツはそろってないですけど、<BR>
がんばって充実させていく予定です。<BR>
またお越しくださいね。
</P>

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「サンプルページへ」というリンクボタンが新たに追加されたと思います。試しにそれをクリックしてみてください。サンプルページ（sample.html）へジャンプできたら、このリンクの設定は成功しています。

確認を済ませたら、ブラウザの「戻る」ボタンで index.html に戻っておいてください。

※Aタグについての詳細は、「リンクボタンを作る」をご覧ください。

　外部のサイトへリンクする
次に、index.html から 外部のホームページにリンクさせてみましょう。とりあえずここでは、HTML indexにリンクするということで説明します。

「サンプルページへ」のリンクの下に、HTML indexへのリンクを記述してみてください。

リンクの指定方法は、

<A HREF="http://ryukyuocho2.web.fc2.com/">HTML indexへ</A>

上記のような感じになります。http://ryukyuocho2.web.fc2.com/ の部分に、リンク先サイトのURLを指定してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ！</H1>

<A HREF="sample.html">サンプルページへ</A>
<A HREF="http://ryukyuocho2.web.fc2.com/">HTML indexへ</A>

<P>
ここは私のホームページです。<BR>
ご訪問ありがとうございました！
</P>

<P>
まだコンテンツはそろってないですけど、<BR>
がんばって充実させていく予定です。<BR>
またお越しくださいね。
</P>

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「HTML indexへ」というリンクボタンが新たに追加されたと思います。試しにそれをクリックしてみてください。HTML indexのホームページにジャンプできたら、このリンクの設定は成功しています。（インターネットに接続されている必要があります）

※Aタグについての詳細は、「リンクボタンを作る」をご覧ください。


以上で練習用ホームページの作成は完了です。

　絶対パスと相対パス
最後に、絶対パスと相対パスについて少しだけ触れておきます。

リンクを設定するときは、リンク先のファイルをパスで指定することになります。

●絶対パス
http:// から始まる指定方法です。別のサイトにリンクする場合は、この方法で指定します。

<A HREF="http://ryukyuocho2.web.fc2.com/">リンク</A>

●相対パス
現在地を基準にした相対的な指定方法です。サイト内のページにリンクする場合は、この方法で指定します。（絶対パスでも指定できますが、通常は相対パスで指定します）

<A HREF="sample/index.html">リンク</A>

<A HREF="index.html"> 同じフォルダ内にリンクするときは、ファイル名のみを記述します。
<A HREF="sample/index.html"> 下位の階層にリンクするときは、フォルダ名に続けてスラッシュ（ / ）を入れ、ファイル名を記述します。
<A HREF="../index.html">
<A HREF="../../index.html">		 上位の階層にリンクするときは、 ../ に続けてファイル名を記述します。../ は、ひとつ上の階層を指定するものです。
<A HREF="../sample/index.html"> 同じ階層の別フォルダ内にリンクするときは、../ に続けてフォルダ名とスラッシュを入れ、ファイル名を記述します。

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system