TITLE:第5回の課題(1) *課題: ネット上の記事へのコメントのWebページを作成する [#be0dc49c] 前回と同様に、HTMLファイルを作成していきます。 HTMLファイルの内容は、 ''「インターネット上のあらゆる記事へのコメント」'' とします。 **1. インターネット上の記事にコメントをする [#e29a13ad] ***(1) 情報を集める [#q6e65094] 自分が現在興味のあるテーマについて、 インターネットからニュース等を探して、 ''自分が興味を持った記事を1つ集めなさい''。 ***(2) 情報にコメントをつける [#a01eab99] 記事を探したら、次の順にコメントを作りなさい。 なお、文字数は、''「200文字以上」''としますが、 内容はささいなことでかまいません。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>../../3rd/exercise#a01eab99]]を見てください。 **2. HTMLファイルの作成 [#n5e1c11f] 第4回の課題で作成したファイルをもとに、 今回の課題を作成します。 ***(1) ファイルのコピー [#p8800b42] ''第4回の課題のファイルをコピーして、新しいファイルを作ってください''。 ファイルには、次のようなファイル名をつけてください。 -「''0518''」+「学籍番号」+「''.html''」(半角文字で!)~ (学籍番号がC2092000の場合、ファイル名は 0518c2092000.html」) ***(2) HTMLのレイアウト [#i6abd85d] 作成するページのレイアウトは、 下の図を参考にしてください。 また、作成するときには、 [[第4回の課題での注意点>../../4th/exercise1#i6abd85d]]を参考に、 今回分のコメントと目次へのリンクを作成します。 :ページのレイアウトの例| #pre(novervatim){{ ページのタイトル 目次 ・第5回のコメントへのリンク ・第4回のコメントへのリンク ・第3回のコメントへのリンク ・第2回のコメントへのリンク ・プロフィール --- 第5回の課題のコメント ... [トップへ戻る] 第4回の課題のコメント ... [トップへ戻る] 第3回の課題のコメント ... [トップへ戻る] 第2回の課題のコメント ... [トップへ戻る] プロフィール ... [トップへ戻る] --- 連絡先・著作権の情報 }} ***(3) プロフィールへの画像の追加 [#z30141bf] プロフィール(自己紹介)のところに、 自画像や自分の好きなものなどの、 ''プロフィール用の画像''を作成してもらいます。 Windows付属の「''ペイント''」を使って描きます。 +「スタート」ボタンをクリックして、「プログラム」→「アクセサリ」→「ペイント」の順に選択 +「ペイント」が起動したら、メニューから「変形」→「キャンバスの色とサイズ」を選択 +「幅(W)」を「100」、「高さ(H)」を「100」に設定 +「OK」ボタンをクリック ペイントの機能を活用して、自由に自分のプロフィール画像を描いてください。 描けたら、次のようにして保存してください。 +メニューから「ファイル」→「名前をつけて保存」を選択 +ファイルを保存する場所を「マイドキュメント」に選択 +「ファイルの種類」を「PNG (*.PNG)」に設定 +ファイル名に''「profile.png」''を設定(半角文字で!) +「保存」ボタンをクリック 最後に、次のように見出しを設定したり、 プロフィール用の画像を貼り付けてください。 -「プロフィール」の見出しの下に、h3要素で「イメージ」という見出しを書く -今回学習した [[image要素>../image]]を使って、作成したプロフィール用の画像を貼り付ける -最後の「10の質問」の前に、h3要素で「自己紹介」という見出しを書く :プロフィール部分の例| #pre(novervatim){{ プロフィール イメージ &ref(2008/5th/exercise1/profile.png,nolink,プロフィール); 自己紹介 | ○○への10の質問 | |質問 1 ...|回答 1 ...| |質問 2 ...|回答 2 ...| | ...| ...| |質問 9 ...|回答 9 ...| |質問 10 ...|回答 10 ...| }} ***(4) HTMLファイルの作成 [#l15d0e5b] 第3回から今回までに説明した、HTMLの技術を使って、 自分のコメントからHTMLファイルを作成してください。 注意点は、次のとおりです。 -情報源へのURLは、その情報源にアクセスできるようにリンクにすること -[[第3回の課題で説明した注意点>../../3rd/exercise#n5e1c11f]]を守る -COLOR(red):ページの中に書いた、''すべてのhr要素の属性(width,size)を削除する'' 例: <hr size="80%"> ―<訂正後>→ <hr> -ファイルの最後にある、連絡先の「更新日」の日付を更新する #pre(novervatim){{ <address> 作成日: 2010-04-20; 更新日: &color(red){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> }} ---- &color(red){まだ提出ではありません};。 &navi2(Lecture/JouhouC2010/5th,next);に進んで、課題を行ってください。 &br; ---- #navi2(Lecture/JouhouC2010/5th,prev,toc,next) |