リンク

前のページへ 次のページへ

Webページの<body>〜</body>で囲まれた部分に絞って説明しています。
<br>は改行したい場所に書きます。
次にリンクの付け方について説明します。

リンクとは

Webページの最大の特徴は、リンクです。
リンクは、Webページ同士を繋ぎます。
例えば、このWebサイトの左側にはたくさんのリンクがあり、それぞれのリンクをクリックすれば、それぞれのWebページを見ることが出来ます。
リンクを使うことで、WebサイトにあるWebページをクリックひとつで見ることが出来るのです。
もしもリンクが無ければ、それぞれのWebページのアドレスを知っている必要があり、それぞれを見るためにアドレスを入力しなければなりません。

リンクの付け方

リンクは、<a href="リンク先のアドレス">文字列</a>と書きます。

リンク先のアドレスには3種類の書き方があります。

1.リンク先のWebページのアドレスをそのまま書く

<a href="http://***.web.fc2.com/diary.html">私の日記</a>

2.Webサイトの入口のページに対して、リンクを先のWebページがどの位置にあるのか

<a href="/diary.html">私の日記</a>

3.リンクを書くWebページに対して、リンクを先のWebページがどの位置にあるのか

<a href="diary.html">私の日記</a>

1の方法は分かりやすいと思います。
しかし、アドレスが長いです。

2の方法は現時点では分からないと思います。
今は所、使わなくて結構です。

3の方法は現時点でのお勧めです。
今の所、<a href="ファイル名">文字列</a>と思っていてください。
短くて分かりやすいと思います。

練習

以下の手順に従って、ここまで書いてきたことを実際にやってみましょう。

以下の内容の「index.html」を作ってください。→プレビュー

<html>
<head>
<title>初めてのWebページ</title>
</head>
<body>

これが、私の始めて作ったWebページです。<br>
<br>
ここがホームページです。<br>
1ページ目は<a href="test1.html">こちら</a>です。<br>
2ページ目は<a href="test2.html">こちら</a>です。<br>
3ページ目は<a href="test3.html">こちら</a>です。<br>

</body>
</html>

以下の内容の「test1.html」を作ってください。→プレビュー

<html>
<head>
<title>テストページ1</title>
</head>
<body>

ここはテストページその1です。<br>
次のページは<a href="test2.html">こちら</a>です。
ホームページは<a href="index.html">こちら</a>です。

</body>
</html>

以下の内容の「test2.html」を作ってください。→プレビュー

<html>
<head>
<title>テストページ2</title>
</head>
<body>

ここはテストページその2です。<br>
前のページは<a href="test1.html">こちら</a>です。<br>
次のページは<a href="test3.html">こちら</a>です。<br>
ホームページは<a href="index.html">こちら</a>です。

</body>
</html>

以下の内容の「test3.html」を作ってください。→プレビュー

<html>
<head>
<title>テストページ3</title>
</head>
<body>

ここはテストページその3です。<br>
前のページは<a href="test2.html">こちら</a>です。<br>
ホームページは<a href="index.html">こちら</a>です。

</body>
</html>

それぞれのWebページがリンクによってつながったことが分かるでしょう。

前のページへ 次のページへ