第9回の課題 - KAWANO's PukiWiki Plus!

課題: ネット上の記事へのコメントでHTMLファイルを書く

前回までと同様に、「インターネット上のあらゆる記事へのコメント」 を作成します。今回も、2つのファイルを作ります。

HTMLファイル: コメントをHTMLで書く
CSSファイル: HTMLファイルのスタイルを書く

▲ ▼

1. インターネット上の記事にコメントをする

▲ ▼

(1) 情報を集める

自分が現在興味のあるテーマについて、インターネットからニュース等を探して、 自分が興味を持った記事を1つ集めなさい。

やり方は、第3回の課題と同じです。第3回の課題の説明を見てください。

▲ ▼

(2) 情報にコメントをつける

記事を探したら、次の順にコメントを作りなさい。なお、文字数は、「200文字以上」としますが、内容はささいなことでかまいません。

やり方は、第3回の課題と同じです。第3回の課題の説明を見てください。

▲ ▼

2. HTMLファイルの作成

第8回の課題で作成したファイルをもとに、今回の課題を作成します。

▲ ▼

(1) ファイルの作成

第8回の課題のHTMLファイルを開いたあとに、次のようにして、名前をつけて別のファイルを作ります。

メニューから「ファイル」→「名前をつけて保存」
ファイルを次のようにつけて保存
- 「0615」＋「学籍番号」＋「.html」（半角文字で！）
  （学籍番号がC2092000の場合、ファイル名は「0615c2092000.html」）

▲ ▼

(2) コメントの追加・目次の更新

次のようなレイアウトになるように、今回作ったコメントを追加して、目次の部分を更新します。第2回〜第4回までの、HTMLの技術を使って、作成してください。

作成するときには、第4回の課題での注意点を参考に、今回分のコメントと目次へのリンクを作成します。

ページのレイアウトの例

ページのタイトル

目次
　・第9回のコメントへのリンク
　・第8回のコメントへのリンク
…（途中省略）…
　・第3回のコメントへのリンク
　・第2回のコメントへのリンク
　・プロフィール

---
第9回の課題のコメント
...
[トップへ戻る]

第8回の課題のコメント
...
[トップへ戻る]

...（途中省略）...

第3回の課題のコメント
...
[トップへ戻る]

第2回の課題のコメント
...
[トップへ戻る]

プロフィール
...
[トップへ戻る]

---
連絡先・著作権の情報

作成するときの注意点は、次のとおりです。

「トップへ戻る」用に「.jump_top」というクラスを設定し、右揃えの設定をする
- HTMLファイルで、現在設定しているp要素をdiv要素に書き換える
```
（変更例）
変更前：<p><a href="#top">［トップへ戻る］</a></p>
　↓
変更後：<div class="jump_top"><a href="#top">［トップへ戻る］</a></div>
```
目次用に「.toc」というクラスを設定して、適当なスタイルを設定する
- HTMLファイルで、目次のh2要素にクラスを設定する
```
変更前：<h2>目次</h2>
　↓
変更後：<h2 class="toc">目次</h2>
```
目次を更新する
- 8つのコメント（第2〜9回）へジャンプできるリンクをつくる
情報源へのURLは、その情報源にアクセスできるようにリンクにすること
コメントを作る
- それぞれのコメントの最後には、ページのトップ（一番上）にジャンプする「トップへ戻る」というリンクを作る
第3回の課題で説明した注意点を守る

ファイルの最後にある、連絡先の「更新日」の日付を更新する

<address>
 作成日: 2010-04-20; 更新日: 2010-06-15<br>
 Copyright (C) 2010 兵庫太郎, All rights reserved.<br>
 このページに関する問合せ先:<br>
 E-Mail. <a href="mailto：c2092000＠ed.hyogo-dai.ac.jp">c2092000＠ed.hyogo-dai.ac.jp</a>
</address>

▲ ▼

3. CSSを使用するための設定

課題のHTMLファイルに、今回作成するCSSファイルを使用するための設定をします。第6回の課題で追加したCSSに関する設定部分を、下のように変更します。

ただし、「CSSファイルのファイル名」の部分は、次の説明を読んで、自分のCSSファイルの名前を設定してください。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
 charset=Shift_JIS">
<title>○○の日記</title>
<link rel="stylesheet" href="CSSファイルのファイル名" type="text/css">
</head>
...
...
...

▲ ▼

4. CSSファイルの作成

コメントが書かれたHTMLファイルに、スタイルを設定します。

第8回の課題で作成したファイルをもとに作成します。

第8回の課題で作成したファイルを開いたあとに、次のようにして、名前をつけて別のファイルを作ります。

「0615」+「学籍番号」+「.css」（半角文字で！）
（学籍番号がC2092000の場合、ファイル名は「0615c2092000.css」）

CSSを使って、HTMLファイルの各要素に次のような設定をしてください。

【今回分】
- リスト（関連情報の部分）の番号や記号を設定する（ulまたはol要素）
- 「トップへ戻る」用に「.jump_top」というクラスを設定し、右揃えの設定をする
  - HTMLファイルで、現在設定しているp要素をdiv要素に書き換える
- 目次用に「.toc」というクラスを設定して、適当なスタイルを設定する
  - HTMLファイルで、目次のh2要素にクラスを設定する
【前回までの分】
- フォントの設定（すべての要素で設定）
  - スタイル、太さ、サイズなど
- 行揃えの設定（h1〜h6要素）
- リンク部分の色の設定（a要素）
- 行間の設定（p要素）
- マージン（margin）の設定（h1〜h6、p、blockquote、address要素）
- まわりの空間（padding）の設定（h1〜h6、p、blockquote、address要素）
- ページ全体の文字色と背景色（body要素）
- 文字色と背景色（h1〜h6、p、blockquote、address要素）
- 枠線の設定（色・太さ・種類）（h1〜h6、p、blockquote、address要素）