演習：リンク集ページ

リンク集とは、自分がよく使うWebサイトのURIを集め、説明文を追加したWebページのことである。
ここで作ったリンク集ページは、課題レポート自己紹介サイトの作成で素材として利用するので、保存しておくこと。

作成手順

  1. ブラウザを用いて、自分がよく閲覧しているサイトの【URI】と【サイト名】を調べ、テキストエディタを用いてテキストファイルにコピペしておく。4～5カテゴリ毎に4～5サイト、すなわち合計20サイト程度を目安とする。
  2. テキストエディタ上で【カテゴリ名】をつけ、カテゴリ毎に文書を整理する。
  3. サイト毎に【紹介文】を書く。1行程度の短文で十分である。 記述するのである。
  4. できあがったテキストファイルを、つぎのようなHTMLファイルに書き換える。以下のサンプルをコピペして【】部分を差し替えるだけでもよいが、それぞれのタグについての学習が目的であるのを忘れずに……。
  5. 前の演習課題で自宅付近の紹介ページ(map.html)を保存したフォルダ(local_html)にlink.htmlの名前で保存する。
  6. ここに示すのはスタイル記述のない雛形である。完成版ではないのでこのまま提出しないこと。
  7. ヘッダ部の間に、各自の好みでCSSによるスタイル記述を行う。CSSからの参照が必要なら、HTMLのタグにクラスやIDなども記述する。
  8. ブラウザで保存したリンク集ページを開き、正常に表示されているか確認する。
  9. 必要に応じてHTMLとCSSを修正する。

リファレンス（参考資料）

これらの資料や、下記スタイル記述例を参考に、各自工夫してほしい。


link.html（スタイル記述前）の内容（テンプレート）の内容 

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>私のよく行くサイト</title>
  <style>
      <!-- ここにスタイルシート(CSS)を記述する -->
  </style>
</head>
<body>
  <h1>私のよく行くサイト</h1>
  <h3>【カテゴリ名】</h3>
  <dl>
    <dt><a href="【URI】">【サイト名】</a></dt>
      <dd>【紹介文】</dd>
    <dt><a href="【URI】">【サイト名】</a></dt>
      <dd>【紹介文】</dd>
    <dt><a href="【URI】">【サイト名】</a></dt>
      <dd>【紹介文】</dd>
    <dt><a href="【URI】">【サイト名】</a></dt>
      <dd>【紹介文】</dd>
    <dt><a href="【URI】">【サイト名】</a></dt>
      <dd>【紹介文】</dd>
  </dl>
  <h3>【カテゴリ名】</h3>
  <dl>
    <dt><a href="【URI】">【項目名】</a></dt>
      <dd>【紹介文】</dd>
      <!-- 4～5カテゴリー（20項目程度）分くり返す -->
  </dl>
</body>
-------------------------------------------------------------------------------
実例：（図1の「リンク集」冒頭）

<h3>新聞社</h3>
<dl>
    <dt><a href="http://www.asahi.com/">朝日新聞社</a></dt>
    <dd>リベラル派のあなたにお薦めの自称「クオリティ・ペーパー」</dd>
    <dt><a href="http://www.yomiuri.co.jp/">読売新聞社</a></dt>
    <dd>世界最大の発行部数を誇る大新聞。最もバランスが取れている</dd>
				：
</html>


図1に示すのは、ページの例（よくいくサイトたち）である。
注意：インラインフレームになっているので、リンクをたどって別サイトに移動した場合は、ブラウザの戻る（←）ボタンで戻る。

図1: リンク集ページの一例


このページ例では、<style>～</style>間に、以下のcssを記述した。html本体は変更していない。

このページ例におけるスタイル記述 


body{
  background-image:url("bg034_02.gif");
}
h1{
  color:#FFFFFF;
  background-color:#FF3333;
  border-radius:5px;
  border-left:solid 10px #000000;
  border-right:solid 10px #000000;
  padding:5px 7px;
}
h3{
  font-family:sans-serif;
  font-size:14pt;
  border:solid 1px #000000;
  border-radius:5px;
  padding:1px 10px;
  margin-top:20px;
  margin-bottom:10px;
}
/* <a>タグの「疑似クラス」 */
a:link{
  text-decoration:none;
  color:#00CC00;
}
a:visited{
  color:#990099;
}
a:hover{
  color:#FF0000;
  font-weight:bold;
}