サイト内リンクの張り方： STEP5 【リンクを張ろう：サイト内リンク編】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

画像を張る

サイト内リンク

リンクについて

ページの作成

サイト内リンク

ページ内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　サイト内リンクの張り方

リンクを張ってみよう！

それではリンクを張ってみましょう。まず始めに、トップページからトップページへリンクを張ってみましょう。これからは、タグの上に「HTMLファイル名」を指定しますので、そのファイルを記入、修正してください。それでは下記をご覧ください。

～（上略）～
<img src="image/title.gif">
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
<br>
<br>
<hr width="300">
<br>
<a href="index.html">トップページ</a>
<br>
<br>
<hr width="300">
<br>
<img src="image/banner.gif">
～（下略）～

HTMLタグ【サイト内リンク】

上の赤い部分がリンクするためのタグになります。「<a href="*"> ～ </a>」部分がリンクさせるというタグになり、「*」部分にリンク先を指定します。
そして、「トップページ」と書かれた部分がホームページ上に表示され、その表示させた部分をクリックすることで指定したリンク先に飛ばすことができます。
また、リンク先が自分のホームページ内の場合には「相対リンク」で指定することができます。（詳しくは、タグ欄下の詳細をご覧ください）

それではリンクタグを入力してみましょう。リンクも画像と同様に、拡張子「.html」を入力しないと認識されませんので注意して下さい。
上の赤い部分と同じように、リンクタグを入力してみてください。

拡大表示

上のように「トップページ」という文字が青、又は紫色で表示されたら完了です。
それではリンクの指定が合っているか、その「トップページ」をクリックしてみてください。「おいおい、何も変わらねえぞ！」って思った方はリンクの指定は成功です。
トップページからトップページへのリンクですのでクリックしてもページは変わりません。もし別のページ、又は「ページがありません。」といったページに飛んで閉まった場合にはリンク先の指定が合っていないのでもう一度見直してください。

他ページへのリンク

リンクの方法がわかった所で、次に先ほど作成した「profile.html」へのリンクをしてみましょう。それでは下記をご覧ください。

～（上略）～
<hr width="300">
<br>
<a href="index.html">トップページ</a>
<br>
<br>
<a href="profile.html">プロフィール</a>
<br>
<br>
<hr width="300">
～（下略）～

上の赤い部分が、先ほど作成した「profile.html」に飛ばすためのタグになります。
入力・指定方法は先ほどと一緒で、指定するHTMLファイル名が「profile.html」に変わっているだけですので、早速上の赤い部分を入力してみましょう。

ページ表示

上のように「プロフィール」という文字が青、又は紫色で表示されたら完了です。
（上の画像をクリックすればサンプルページをご覧頂けます。）
それでは、「プロフィール」部分をクリックしてみてください。「profile.html」にページが飛べばリンクの指定は成功です。
サイト内のリンクができた所で、次の「ページ内リンクの張り方」へ進みましょう。

ページの上へ

前のページ

トップページ

ページ内リンクの張り方

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.