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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/JouhouC2010/5th/exercise1 へ行く。
  • 1 (2010-05-14 (金) 02:00:01)

課題: ネット上の記事へのコメントのWebページを作成する

前回と同様に、HTMLファイルを作成していきます。 HTMLファイルの内容は、 「インターネット上のあらゆる記事へのコメント」 とします。

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

(1) 情報を集める

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

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

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

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

2. HTMLファイルの作成

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

(1) ファイルのコピー

第4回の課題のファイルをコピーして、新しいファイルを作ってください。 ファイルには、次のようなファイル名をつけてください。

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

(2) HTMLのレイアウト

作成するページのレイアウトは、 下の図を参考にしてください。

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

ページのレイアウトの例

ページのタイトル

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

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

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

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

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

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

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

(3) プロフィールへの画像の追加

プロフィール（自己紹介）のところに、 自画像や自分の好きなものなどの、 プロフィール用の画像を作成してもらいます。

Windows付属の「ペイント」を使って描きます。

1. 「スタート」ボタンをクリックして、「プログラム」→「アクセサリ」→「ペイント」の順に選択
2. 「ペイント」が起動したら、メニューから「変形」→「キャンバスの色とサイズ」を選択
3. 「幅(W)」を「100」、「高さ(H)」を「100」に設定
4. 「OK」ボタンをクリック

ペイントの機能を活用して、自由に自分のプロフィール画像を描いてください。 描けたら、次のようにして保存してください。

1. メニューから「ファイル」→「名前をつけて保存」を選択
2. ファイルを保存する場所を「マイドキュメント」に選択
3. 「ファイルの種類」を「PNG (*.PNG)」に設定
4. ファイル名に「profile.png」を設定（半角文字で！）
5. 「保存」ボタンをクリック

最後に、次のように見出しを設定したり、 プロフィール用の画像を貼り付けてください。

• 「プロフィール」の見出しの下に、h3要素で「イメージ」という見出しを書く
• 今回学習した image要素を使って、作成したプロフィール用の画像を貼り付ける
• 最後の「10の質問」の前に、h3要素で「自己紹介」という見出しを書く

プロフィール部分の例

プロフィール
　イメージ
　&ref(): File not found: "profile.png" at page "2008/5th/exercise1";

　自己紹介
　|   ○○への10の質問    |
　|質問  1 ...|回答  1 ...|
　|質問  2 ...|回答  2 ...|
　|        ...|        ...|
　|質問  9 ...|回答  9 ...|
　|質問 10 ...|回答 10 ...|

(4) HTMLファイルの作成

第3回から今回までに説明した、HTMLの技術を使って、 自分のコメントからHTMLファイルを作成してください。

注意点は、次のとおりです。

• 情報源へのURLは、その情報源にアクセスできるようにリンクにすること
• 第3回の課題で説明した注意点を守る
• ページの中に書いた、すべてのhr要素の属性（width,size）を削除する

  例： <hr size="80%"> ―＜訂正後＞→ <hr>

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

  <address>
   作成日: 2010-04-20; 更新日: 2010-05-18<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>
  

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