今日の練習ではリンク集を作ってもらいます。
リンク集とは自分のお気に入りのハイパーリンクをまとめたものです。 WEB 全体があまり発達してなかった初期の頃（'90年代中頃）は自分の趣向と似た人のサイトのリンク集をたどって目的の情報を探していました。 その後 WEB 全体が発展してリンク集を強化したようなポータルサイトや検索サイトが次々と現れていったわけです。
最近ではお気に入り(ブックマーク)の共有サイトや自分のお気に入りを WEB スペースに保管してくれるサービスなども増えてきましたのであえて作る必要も少なくなってきましたが、それでも自分のリンク集を FD や USBメモリに入れて持ち歩けば様々なところで便利に使えます。 せっかくなのでこの機会に作っておきましょう。
リンクを集めて表示するだけなのでアンカーと改行だけでもいいのですが、リストやテーブルを使ってもう少し分かりやすく表示するのが一般的です。 例えば (統計局/各府省及び独立行政法人等) のリンク集ではソースをみれば分かりますがテーブルを使っていますし、 また (厚生労働省：リンク集) では順序なしリスト <ul> を使っています。 他にもやり方は色々あるのですが、ここでの練習では定義リストを使ってまとめてみましょう。
まずはメモ帳を開いて次のように HTML の基本構造を打ち込んでください。 また、大見出しと名前も書いておきます。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
</body>
</html>
次にメモ帳のメニューから ([ファイル(F)] → [名前をつけて保存(A)...]) を選んで自分の挿した FD や USBメモリの適当なフォルダに link.html という名前で保存します。
保存したファイルを今度はダブルクリックして IE で開きます。
後は先週の手順4,5 と同じようにメモ帳で編集してIEで再読み込みを納得するまで繰り返します。
テーマタイトルの見出しを <h2> タグに挟んで書いて <a> タグで大学のトップページへのリンクを書きます。ついでに最後に横線 <hr> も入れておきます。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
<h2>大学関係</h2>
<a href="http://www.kanazawa-gu.ac.jp/">金沢学院大学</a>
<hr>
</body>
</html>
アンカータグ全体を定義リストタグ <dl> とリスト項目のタグ <dt> で囲みましょう。 次に説明コメントを <dd> タグに挟んで書いてください。 また、適当にインデント(字下げ)をつけるとソースが見やすくなります。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
<h2>大学関係</h2>
<dl>
<dt><a href="http://www.kanazawa-gu.ac.jp/">金沢学院大学</a></dt>
<dd>我が母校金沢学院大学のトップページです。</dd>
</dl>
<hr>
</body>
</html>
リスト項目を増やします。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
<h2>大学関係</h2>
<dl>
<dt><a href="http://www.kanazawa-gu.ac.jp/">金沢学院大学</a></dt>
<dd>我が母校金沢学院大学のトップページです。</dd>
<dt><a href=""></a></dt>
<dd></dd>
</dl>
<hr>
</body>
</html>
増やした項目に新たなリンクを設定します。href 属性の "" の間に URL を、アンカータグ <a …>～</a> の間の「～」の部分にリンク先のタイトルを入れます。 また、<dd>～</dd> の間に説明やコメントを入れます。 さらに必要があれば <dd> タグを増やして説明を追加します。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
<h2>大学関係</h2>
<dl>
<dt><a href="http://www.kanazawa-gu.ac.jp/">金沢学院大学</a></dt>
<dd>我が母校金沢学院大学のトップページです。</dd>
<dt><a href="http://kj01.kgu.mydns.jp/2014/wp/TA01/">インターネット情報活用演習</a></dt>
<dd>イン活のトップページ</dd>
<dd>単位を落とさないように要チェック！</dd>
</dl>
<hr>
</body>
</html>
さらにテーマを増やします。
<html>
<head>
<title>リンク集</title>
</head>
<body>
<hr>
<h1>リンク集</h1>
<div align="right">経営情報学科1年A組 99番 金沢太郎</div>
<hr>
<h2>大学関係</h2>
<dl>
<dt><a href="http://www.kanazawa-gu.ac.jp/">金沢学院大学</a></dt>
<dd>我が母校金沢学院大学のトップページです。</dd>
<dt><a href="http://kj01.kgu.mydns.jp/2014/wp/TA01/">インターネット情報活用演習</a></dt>
<dd>イン活のトップページ</dd>
<dd>単位を落とさないように要チェック！</dd>
</dl>
<hr>
<h2>金沢情報</h2>
<dl>
<dt><a href="http://kimassi.net/">金沢観光情報 【 きまっし金沢 】</a></dt>
<dd>金沢・石川県の観光名所・宿や金沢観光に役立つ交通の情報を多くの地図と画像を使って紹介している観光情報サイトです。</dd>
<dt><a href="http://www.pref.ishikawa.jp/shink/hokuriku-shinkansen/">カウントダウン 北陸新幹線 金沢開業</a></dt>
<dd>来年開業！</dd>
</dl>
<hr>
<h2>WEB サイト作成</h2>
<dl>
<dt><a href="http://www.tohoho-web.com/www.htm">とほほのＷＷＷ入門</a></dt>
<dd>古くからある老舗のWEB サイト作成入門サイト</dd>
<dt><a href="http://www.shoshinsha.com/hp/">1時間で作るホームページ [ WEBデザインの素 ]</a></dt>
<dd>さすがに1時間には無理があるけど初めての人には分かりやすそう</dd>
</dl>
<hr>
</body>
</html>
ここまでやったことを復習して自分なりのリンク集を作って mylink.html というファイルに保存してください。 テーマは2つ以上、リンク数は10以上が最低条件です。 見た人がリンク先に行ってみようと思うようなコメントを必ず入れてください。 最低条件をクリアした人は、リンクの数を増やすなり、背景に画像を入れるなり色をつけるなり好きなようにしてください。 例題と違った自分なりのもっと凝ったレイアウトなど作れる人はその方法でもかまいません。