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

見ているページから他のページに進むための記述、これを「リンク」と言います。
ページ以外もリンクできるので、「ハイパーリンク」と言うのが正しいかも知れません。
ホームページが１ページで完了することって、ほとんどありません。
だから、リンクは必ず必要になります。

まず、今回の勉強会ページはどんな風に並んでいるか例に挙げます。

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

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

今、「index.html」を作成中のとき、

リンクするページが自分のページで、同じ階層にある場合: <a href="tag01.html">～</a>
「tag01.html」という名前のページにリンク
リンクするページは自分のページだが階層が異なり、「folder」フォルダーにある場合: <a href="folder/link1.html">～</a>
「folder」というフォルダーの中にある「link1.html」という名前のページにリンク

ここは非常に重要ですから、頑張って理解しましょう。

どうしても判らない場合は、「絶対URL(URI)」で書きます。
ホームページのトップページのアドレス（URL）が「http://www.******.net/」の場合、
「index.html」というのは、そのトップページを指します。
「index（見出し）」という名前は省略可能です。
だから、
・ http://www.******.net/index.html
・ http://www.******.net/
は同じページを指し、「index.html」はフォルダー単位で作れます。

同様に、今「index.html」を作成中のとき、絶対URLでリンクを書くと、

リンクするページが自分のページで、同じ階層にある場合: <a href="http://www.******.net/tag01.html">～</a>
「tag01.html」という名前のページにリンク
リンクするページは自分のページだが階層が異なり、「folder」フォルダーにある場合: <a href="http://www.******.net/folder/link1.html">～</a>
「folder」というフォルダーの中にある「link1.html」という名前のページにリンク

話がそれますが、アドレスについての豆知識

http: HyperText Transfer Protocolの略で、WebサーバーとWebブラウザなどがデータを送受信するのに使われるプロトコル（約束ごと）のこと。
www: World Wide Webの略で、インターネットで標準的に用いられる記述システムのこと。htmlという言語で文書の論理構造を決めている。
******.net: この部分をドメイン（あるいは独自ドメイン）と呼び、世界にひとつしかない住所や番地のようなものです。
日本の場合、******.co.jp、******.ne.jpのような企業や団体を示すドメインや、******.net、******.comなど誰でも取得できるドメインもあります。

一般にレンタルサーバーで借りる場合は、ドメインの前の「www」の代わりに借りた人専用の名前を付けます。これを「サブドメイン」と呼び、独自ドメインと区別されます。
また、プロバイダーの無料ＨＰのようにドメインの後に名前をつけることもあり、これは例えば上の図の中の「folder」という名前のフォルダーを借りているのと同じことです。

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

下から３行目のすぐ上に１行スペースを空け、そこに次のソースをコピペします。

<p align=center>
<a href="folder/link1.html">
ここをクリックするとリンク先のページに行きます。</a>
</p>

完成したら上書き保存してください。
「練習６.html」を開いて実際にリンクしているかどうか確かめてください。
うまくいけば、「index.html」やネット接続できているパソコンでは「http://www.******.net/」にもリンクしてみてください。

うまくできたら、元の「練習６.html」に戻し、上書き保存してください。
ダウンロードしたフォルダーには「link1.html」が入っています。
（こんなイメージです。　link1.html　）

また、「ここをクリックすると・・・・」という文章の代わりに「<img src="****.jpg">」のような画像や写真もリンクできます。
画像の場合は、周囲に青い境界線ができますので、イヤな方は「border="0"」と書きましょう。

≪完成したイメージ≫

◆フレーム構成のページ専用（と考えてください）

フレームで分割したページでは、リンク方法に注意が必要です。
一般的には「name属性」を付けて表示するフレームを指定しますが、ここでは説明を省略します。
（最後のフレーム分割に使い方を書いています。）

リンク先の表示の仕方は３通りあります。

今見ているページ（フレーム枠内）にリンク先のページを表示する
フレーム枠をすべて消してリンク先に書き換える
今見ているページとは別にブラウザを新しく起動させてリンク先を表示する

フレームを使っていないページ（普通のページ）ではほとんど記載不要で、使うとしても「３．」くらいです。
書き方は、「target」属性を使って、

<a href="folder/link1.html" target="_self">～</a>
<a href="folder/link1.html" target="_top">～</a>
<a href="folder/link1.html" target="_blank">～</a>

　　　　※「_ 」は、アンダーバーと読み、「Shift」キーを押しながらひらがなの「ろ」を押します。

１．の「target="_self"」は普通のページでは省略します。

フレームを使っているページの場合はよく考えてリンクしないと、
自分のページの一部に他人のページを表示させてしまうこともあります。
これは著作権の問題に発展するかも知れませんので、注意しましょう。

また、すべてのブラウザに適用できる訳ではありません。
Windows XP SP2 でも、ポップアップブロックのフィルタレベルを「高」に設定すると「target="_blank"」と書いても、新しいページを開かないようです。