ページにジャンプ
リンク
 <a href="index.html">目次</a>

ホームページと言えばリンクが命です。 これがなければ次のページに進めないし、元のページに戻ることもできません。
<a href="index.html">が開始タグで、index.htmlの部分にリンクするURLを書きます。</a>は終了タグです。その間にある目次の文字がブラウザに表示される部分です。ページを見ている人はこの文字で内容を判断して他のページに移動します。紛らわしくない分かりやすい名前をつけましょう。




絶対パスと相対パス
URLの指定方法は、絶対パスと相対パスの2種類あります。絶対パスとは、ファイルの位置をドメインからすべて表したもので、他サイトのページにリンクする時に使います。


サンプル

<html>
<head>
<title>パンダの家</title>
</head>
<body>

・パンダ工房のトップページにリンクする。<br>
<a href="http://www.panda-panda.com/index.html">パンダ工房 </a>


</body>
</html>


相対パスとは、そのファイルからみてリンク先のファイルがどこにあるかを表したもので、自分のサイト内のリンクに使います。


サンプル .

<html>
<head>
<title>パンダの家</title>
</head>
<body>

・同じフォルダにあるファイルをリンクする場合
<a href="himitu.htm">ひみつ</a>


</body>
</html>


フォルダ内のフォルダ(下層フォルダ)のファイルにリンクする場合はフォルダ名/ファイル名となります。/はフォルダとフォルダ(またはファイル)の区切りを意味します。


サンプル

<html>
<head>
<title>パンダの家</title>
</head>
<body>

・下層フォルダのSeptの0922.htmlにリンクする場合>
<a href="sept/0922.html">9月22日の日記</a>


</body>
</html>


フォルダを含んでいるフォルダ(上層フォルダ)にあるファイルにリンクする場合は../ファイル名と書きます。..は1つ上のフォルダの意味で、2つ上の場合は../..となります。

サンプル

<html>
<head>
<title>パンダの家</title>
</head>
<body>

・ 上層フォルダのindex.htmlにリンク場合
<a href="./index.htm">ホームに戻る</a>


</body>
</html>


隣にあるフォルダにあるファイルをリンクする場合は、../隣のフォルダ名/ファイル名と書きます。

サンプル .

<html>
<head>
<title>パンダの家</title>
</head>
<body>

・ 隣にあるフォルダdeheのdehe.htmlにリンク場合
<a href="./dehe/dehe.html">でへ</a>


</body>
</html>


相対パスのサンプルは、赤丸のファイルの中に書くリンクタグの例を説明しています。



 パンダ君の失敗談

パンダ
<a href="index.html">を <s href="index.html">と間違って書いてリンクされなかった。ブラウザは<と>で 囲まれた文字をすべてタグと解釈するけど、知らないタグは無視するんだって。間違ってもブラウザは教えてくれないので、気をつけて入力しないといけないね。

メニューへ
戻る 次へ