Webページでのリンク方法

参照ページ：Webページのリンク
ここでは、これらHTMLファイルを相互にリンクする方法を解説する。インターネット上のWebページをハイパーリンクすることも同様な手続きである。

Webページを書く場合には、既におこなったようにディレクトリ~/public_html内にある必須ファイルindex.htmlに自分の書いたWebページの総目次を（箇条書きが分かりやすい）書いて、それぞれの項目から別に用意してあるWebページにリンクを張るようすることを原則とする。

Webページのファイル群をどのような構成とするかは、効果的なWebページを書くための根本問題にかかわる。最初から、ページ構成については常に留意すること。詳細は『インターネット時代のコンピュータリテラシー』7章5節を参照のこと。

リンクされるHTMLファイルの準備
index.htmlを目次ページにす
説明：リンクの方法
リンクされるHTMLファイル
解説：ローカルリンク
解説：ハイパーリンク
リンク時の注意
課題

リンクされるHTMLファイルの準備

いままでの演習にしたがって作業していれば、既にディレクトリ~/public_html内に次のHTMLファイルがあるはずである。

index.html
town.html
hobby.html
dream.html

index.htmlを目次ページにする

Webページの作成では、HTMLファイル~/public_html/index.htmlを作成したHTMLファイル群への目次として利用し、それらのWebページへのリンクを張っておくのを原則とする。

演習では、ファイル~/public_html/index.htmlから、他の3(または4）つのファイル~/public_html/{town.html | hobby.html | dream.html}が参照できるように、次のようにしてリンクを張ってきた。

content="text/html..."の部分には、このファイルが書かれている文字コードが
日本語EUCのときにはEUC-JP
日本語シフトJISのときにはSHIFT_JIS
日本語JISのときにはISO-2022-JP
と書く。 SHIFT_JISではアンダーバー _ であり、ハイフン-ではないことに注意。

参照ページ：Webページのリンク

┏━━━━━━━━━ ~/public_html/index.html ━━━━━━━━━━━━━━━
<html lang="ja">
<head> 
<title>情報太郎のページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta name="author" content="Joho Taro">
</head> 
<body>
<a href="http://www.edu.tuis.ac.jp/">東京情報大学教育サーバ</A>

<h1>情報太郎のホームページ</h1>
<img src="image/myphoto.jpg" alt="My Photo"> 

<ul> 
<li><a href="town.html">私の住んでいる町</a></li>
<li><a href="hobby.html"> 熱中している趣味</a></li>
<li><a href="dteam.html">私の将来の夢</a></li>
<li><a href="recommend.html">お勧め情報のページ</a></li>
</ul> 

<hr>
<address>
情報太郎　s02987jt@edu.tuis.ac.jp<br>
東京情報大学 情報システム学科1年
</address>
</body>
</html>

演習：これをWebブラウザでみるとどうなるかを再度詳しく観察せよ。とくに、

『私の住んでいる町』『熱中している趣味』『私の将来の夢』などの文字列が青色で下線付きで表示されていること
この下線付き文字列部分をマウスでクリックするとWebブラウザはどんな挙動をするか

説明：リンクの方法

ここで使われているHTMLの構文は、単純箇条書とその箇条項目の部分に、ディレクトリ~/public_html 内に別のファイル群town.html, hobby.html, dream.htmlなどへのリンク指定を記述する次の構文からなっている。

[リンクの基本構文]　参照ページ：Webページのリンク

<a href="URL">文字列</a>

タグ<a href ....> で始まりタグ</a>で閉じていることに注意せよ。

URLは2重引用符記号 " で囲まれており、リンク先である目的ファイルがリンクを記述しているファイルと同じディレクトリ~/public_htmlにあるときには、そこまでのディレクトリパスを指定する。

[単純箇条書きの構文]　参照ページ：単純箇条書き

<ul>
<li>項目1</li>
...
...
<li>項目N</li>
</ul>

項目1から項目Nを順序をつけない場合（項目の順番を入れ替えても意味が失われない場合）の箇条書きである『単純箇条書き』として表示するためのHTML書式である。 Webページを書く場合、できるだけ簡素に読者にその内容を使えることのできる箇条書きをうまく利用するのがコツである。

リンクされるHTMLファイル

一方、上のようにindex.htmlからリンクされたファイル--たとえば town.htmlでは、原則として次のようにしてリンクしてきたファイルへのリンクを書いておく。

┏━━━━━━━━━━━ ~/public_html/town.html ━━━━━━━━━━━━━
<html lang="ja">
<head> 
<title>私の住んでいる町</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta name="author" content="Joho Taro">
</head> 
<body>
<a href="http://www.edu.tuis.ac.jp/">東京情報大学教育サーバ</a><br>
<a href="../index.html">情報太郎のホーム</a>
<P> 

<h1>私の住んでいる町</h1>
...............
..............

<hr>
<address>
情報太郎　s01987jt@edu.tuis.ac.jp<br>
東京情報大学 情報システム学科1年
</address>
</body>
</html>

ここで重要なことは次の3点である。

『<title>表題</title>』部分には、そのページの内容を表わすにふさわしいタイトルをつける
リンクしたページに戻れるようにもとのファイルにリンクを張っておく（上のピンク部分）。アンカー文字列には「元に戻る」など無意味な文字列ではなく、リンク先のページ内容にふさわしい文字列を考案すること。
全てのページには、そのページの作者の実名と連絡先の電子メールアドレスを署名として書く

解説：ローカルリンク

ディレクトリ~/public_html内にある自分で作成したWebページ同士をリンクするには、上の例にあるように、次のように書けばよい：HREFはHyper REFerenceと覚えるとよい。

<a href="リンク先ファイルへの相対ディレクトリパス">アンカー文字列</a>

Webページ群が左のディレクトリ構成をなしているとする。このとき、リンク先のファイルへの相対ディレクトリパスとは次のようになる。

ファイル~/public_html/index.htmlからファイル~/public_html/profile.htmlへリンクするには


<a href="profile.html">自己紹介</a>

のように書く。また、ファイル~/public_html/profile.htmlからファイル~/public_html/movie/action.htmlにリンクするには


<a href="movie/action.html">アクション映画</a>

のように書く。逆に、ファイル~/public_html/movie/action.htmlからファイル~/public_html/index.htmlへリンクを張るには


<a href="../index.html">ホームページ</a>へ戻る

というように、親ディレクトリに戻ることで目的のファイルを指定することに注意する。

解説：ハイパーリンク

自分で作成したWebページではなく、自分以外のWebページへネットワークを経由してリンクを張ることをハイパーリンクという。ハイパーリンクするときもURLに注意するだけでローカルリンクと同様である：

<a href="相手先ページのURL">アンカー文字列</a>

http://は情報を取り寄せるプロトコルがHTTP（hyper text transfer protocol）であることを示し、www.hanasaka.ac.jpがWebサーバー（マシン）の位置を表している。

たとえば次のようになる。

<a href="http://www.hanasaka.ac.jp/">花咲大学のホームページ</a>

学内の友人のページリンクを張る場合のように、同じWebサーバーの管理のもとにおかれているユーザーe02897utの作成したトップページにハイパーリンクするには、次のようにURLの指定においてサーバー場所を省略することができる。

<a href="/~e02897ut/restaurant.html">千葉近郊のレストラン案内</a>は便利

チルダ記号 ~ の位置に注意

リンク時の注意

参照ページ：HTMLファイルの管理方法

ページ構成を考える

ファイル群をただ漫然とリンクするだけでなく、HTMLファイルの管理方法やWebページの構成について十分に理解した上でHTMLファイルを作成・配置してリンクするようにすること。

読者指向

Webページの文面の作成は原則不特定の読者の立場にたって書くこと。楽屋落ちは好まれない

他人のページにリンクするときの注意

リンクしようとする前に（あるいは事後承諾になったとしても）ページの著者にリンクについての了解を取るべきだと考えられている。このような時にはメールでのやり取りとなるが、

リンクをする自分のページのURL
リンク先の相手ページのURL

を含んだ情報を丁寧にに記載して、一人よがりの失礼なメールにならないように相手の都合を考え文面にはくれぐれも注意する。

1つの話題は1つのWebページに書くのが原則

いくつかの話題について書き進んだときにページが長くなるようであれば、ページを分割してそれらをリンクすることを考えるべきである。

演習課題

トップページ以外に、次の要件を満たす6ページ以上のWebページ（6つ以上のHTMLファイルを作成して互いにリンク）を作成する。

[Webページの条件]

各Webページは600字以上とする。あまりに字数の少ないWebページがあれば評価対象外となる。
1つのWebページに少なくとも2つ以上の学外へのリンクを張る
1つのWebページには少なくとも1つ以上の適切な大きさの画像を張り込む
ファイル名は内容を反映するように
Webページの構成は読者にとって読みやすいことを最優先しリンク構成を考えること。

[Webページの内容]

趣味・興味や特技（さらに細かく個別にテーマに別けてもよい）
生まれた場所（ふるさと）に関すること
大学生活やサークル活動など
これから（あるいは今）勉強したいことや将来の夢
お勧めの情報リンクに関すること

ただし、次の注意事項を厳守すること

全てのページには所属、実名および電子メールアドレスを明記した署名をつける
トップページはWebページ群への目次の役目を果たすようにリンク項目は原則として箇条書きとすること
『工事中』と称し作成していないページにリンクを張ってはいけない。
リンクされたページからは、少なくともホームページへのリンクを張っておく。 Webページ間のリンク方法を工夫すること
著作権に違反するページは載せないこと
他人のページにリンクする場合には、原則としてリンク依頼のメール等を参考に、事後承諾となってもよいからリンクの承諾を得る努力をする。ただし、公的機関（場合によっては団体や企業などを含むこともある）へのリンクは承諾を得る必要はないとされている。リンク依頼のメールには必要な情報を丁寧に記載し、その表現にはくれぐれも注意すること（「承諾の返事をください」などと要求しないこと）
自分の書いたページを他人が勝手にリンクしても構わないかどうか、あるいは許可を求める際の連絡先を明記し、リンク依頼する側の手間を軽減しておく。 (リンクしても構わないと明記されていれば、リンクしようとする者がリンク依頼のメールを送る必要がなくなる）

コンピュータリテラシー目次
 オンラインテキスト目次

mizutani@rsch.tuis.ac.jp