授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　リンク（URL）ページ内リンク

リンクの特殊な形ですが、ページの特定箇所にリンクする方法を勉強します。
「ページ内リンク」とか、「内部リンク」と呼びます。
１ページが非常に長いとき、何度もスクロールしなければ目的の箇所に到達できないことがあります。
あるいは、他のページの途中にリンクさせたいときもあります。

こういったときに利用できる方法が「ページ内リンク」で、指定した箇所に素早く移動できます。
このページにもページ内リンクがあります。
最下段までスクロールすると、「先頭へ」というリンクがありますのでクリックしてみてください。
これが「ページ内リンク」です。

何度も繰り返しになりますが、今回の勉強会ページはどんな風に並べているかを見てください。

index.html tag01.html tag02.html ･･････ a01.jpg a02.jpg a03.jpg ･･････ link1.html ･･････

「｛　」の中を「同じ階層」と言います。

リンク方法は、「#」を付けて指定する独特な方法です。

◆リンクして見てほしい箇所に: <a name="koko"></a> と書きます。「koko」は任意です。
<a>～</a> に文章や画像が入っても構いません。
◆クリックしてもらう箇所に: 同じページ内なら <a href="#koko">○○○○</a> と書きます。
異なるページなら <a href="****.html#koko">○○○○</a> と書きます。
階層が異なれば <a href="folder/****.html#koko">○○○○</a> などと書きます。

○○○○部分はクリックして欲しい言葉や画像が入ります。

≪練習≫
保存した「練習６.html」にリンクを加えます。
「練習６.html」を右クリックし、「プログラムから開く」→「Notepad」をクリック。
「ファイル」→「名前をつけて保存」を選び、「練習７.html」で保存します。

ボディ開始タグ（<body ････>）のすぐ下に１行スペースを空け、そこに次のソースをコピペします。

<a name="top"></a>

下から２行目ボディ終了タグ（</body>）のすぐ上に１行スペースを空け、そこに次のソースをコピペします。

<a href="#top">先頭に戻ります。</a>

完成したら上書き保存してください。
「練習７.html」を開いて実際にページ内リンクしているかどうか確かめてください。

≪完成したイメージ≫

クリックすると　↓

インターネットの「アドレス」欄を見ると、「file:///D:/tag/練習７.html#top」となっています。
「#top」がページ内リンクした証拠です。

ちょっと難しいので「完成したイメージ」のソースを書いておきます。

<html>
<head>
<title>自己紹介</title>
</head>
<body style="background:#ffffff
 url(gazou/bcg1.gif) right bottom no-repeat fixed;">
<a name="top"></a>
<p align="center">
<font size="6" color="olive" face="HGｺﾞｼｯｸE">
ホームページを自作する<br>自己紹介
</font>
</p>
<p align="center"><img src="gazou/a02.jpg"></p>
<p align=center>
<a href="folder/link1.html">
ここをクリックするとリンク先のページに行きます。</a>
</p>
<img src="gazou/space.gif" width="5" height="1200">
<a href="#top">先頭に戻ります。</a>
</body>
</html>