KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/6th/exercise1 のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/JouhouC2007/6th/exercise1 へ行く。
  • 1 (2007-05-12 (土) 07:32:46)

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

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

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

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

(1) 情報を集める

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

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

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

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

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

2. HTMLファイルの作成

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

(1) ファイルの作成

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

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

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

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

ページのタイトル

目次
　・第6回のコメントへのリンク
　・第5回のコメントへのリンク
　・第4回のコメントへのリンク
　・第3回のコメントへのリンク
　・第2回のコメントへのリンク
　・プロフィール

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

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

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

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

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

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

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

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

• コメントを作る
  • それぞれのコメントの最後には、ページのトップ（一番上）にジャンプする「トップへ戻る」というリンクを作る
• 目次を更新する
  • 5つのコメント（第2〜6回）へジャンプできるリンクをつくる
• 第3回の課題で説明した注意点を守る
• ファイルの最後にある、連絡先の「更新日」の日付を更新する

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

その他の注意点は、第4回の課題の説明を見てください。

3. CSSファイルの作成

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

今回は、HTMLファイルとは別に、 スタイルシートの設定が書かれたCSSファイルを作成します。 ファイル名は、次のとおりとします。

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

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

• 【今回分】
  • 行間の設定（p要素）
  • マージン（margin）やまわりの空間（padding）の設定（h1〜h6、p要素）
  • 背景画像の設定（body, h1〜h6要素）
• 【前回分】
  • ページ全体の文字色と背景色（body要素）
  • 見出しの文字色と背景色（h1〜h6要素）
  • 見出しの枠線の設定（色・太さ・種類）（h1〜h6要素）

ただし、 第4回に説明した 色の設定はすべて削除してください！

• ページ全体（body要素）での文字色と背景色
• 見出し（h1〜h6）の文字色と背景色
• font要素を使った色の設定

まだ提出ではありません。 に進んで、課題を行ってください。