TITLE:第10回の課題 *課題: ネット上の記事へのコメントでHTMLファイルを書く [#be0dc49c] 前回までと同様に、''「インターネット上のあらゆる記事へのコメント」'' を作成します。 今回も、''2つのファイルを作ります''。 -HTMLファイル: コメントをHTMLで書く -CSSファイル: HTMLファイルのスタイルを書く **1. インターネット上の記事にコメントをする [#e29a13ad] ***(1) 情報を集める [#q6e65094] 自分が現在興味のあるテーマについて、 インターネットからニュース等を探して、 ''自分が興味を持った記事を1つ集めなさい''。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>../../3rd/exercise#q6e65094]]を見てください。 ***(2) 情報にコメントをつける [#a01eab99] 記事を探したら、次の順にコメントを作りなさい。 なお、文字数は、''「200文字以上」''としますが、 内容はささいなことでかまいません。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>../../3rd/exercise#a01eab99]]を見てください。 **2. HTMLファイルの作成 [#n5e1c11f] 第9回の課題で作成したファイルをもとに、 今回の課題を作成します。 ***(1) ファイルの作成 [#x281debe] ''第9回の課題のHTMLファイルを開いたあと''に、 次のようにして、名前をつけて別のファイルを作ります。 -メニューから「ファイル」→「名前をつけて保存」 -ファイルを次のようにつけて保存 --「0622」+「学籍番号」+「.html」(半角文字で!)~ (学籍番号がC2092000の場合、ファイル名は「''0622c2092000.html''」) ***(2) コメントの追加・目次の更新 [#i6abd85d] 次のようなレイアウトになるように、 今回作ったコメントを追加して、目次の部分を更新します。 第2回〜第4回までの、HTMLの技術を使って、作成してください。 作成するときには、 [[第4回の課題での注意点>../../4th/exercise1#i6abd85d]]を参考に、 今回分のコメントと目次へのリンクを作成します。 :ページのレイアウトの例| #pre(novervatim){{ ページのタイトル 目次 &color(Red){ ・第10回のコメントへのリンク}; ・第9回のコメントへのリンク …(途中省略)… ・第3回のコメントへのリンク ・第2回のコメントへのリンク ・プロフィール --- &color(Red){第10回の課題のコメント}; &color(Red){...}; &color(Red){[トップへ戻る]}; 第9回の課題のコメント ... [トップへ戻る] ...(途中省略)... 第3回の課題のコメント ... [トップへ戻る] 第2回の課題のコメント ... [トップへ戻る] プロフィール ... [トップへ戻る] --- 連絡先・著作権の情報 }} 作成するときの注意点は、次のとおりです。 -目次を更新する --9つのコメント(第2〜10回)へジャンプできるリンクをつくる -情報源へのURLは、その情報源にアクセスできるようにリンクにすること -コメントを作る --それぞれのコメントの最後には、ページのトップ(一番上)にジャンプする「トップへ戻る」というリンクを作る -[[第3回の課題で説明した注意点>../../3rd/exercise#n5e1c11f]]を守る -ファイルの最後にある、連絡先の「更新日」の日付を更新する #pre(novervatim){{ <address> 作成日: 2010-04-20; 更新日: &color(red){2010-06-22};<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を使用するための設定 [#jbf1ff1f] 課題のHTMLファイルに、 今回作成するCSSファイルを使用するための設定をします。 [[第6回の課題で追加したCSSに関する設定部分>../../6th/exercise1#jbf1ff1f]]を、 下のように変更します。 ただし、「CSSファイルのファイル名」の部分は、 次の説明を読んで、自分のCSSファイルの名前を設定してください。 #pre(novervatim){{ <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○の日記</title> COLOR(red):<link rel="stylesheet" href="COLOR(blue):CSSファイルのファイル名COLOR(red):" type="text/css"> </head> ... ... ... }} **4. CSSファイルの作成 [#ya26744d] コメントが書かれたHTMLファイルに、スタイルを設定します。 ''第9回の課題で作成したファイルをもとに作成します''。 第9回の課題で作成したファイルを開いたあとに、 次のようにして、名前をつけて別のファイルを作ります。 -「0622」+「学籍番号」+「.css」(半角文字で!)~ (学籍番号がC2092000の場合、ファイル名は 「''0622c2092000.css''」) CSSを使って、HTMLファイルの各要素に次のような設定をしてください。 -【今回分】 --背景に画像を入れる(ページ全体に1つ、h1〜h4、p、blockquote要素のうち2つ以上) ---ただし、すべての要素に背景画像を入れなくても良い --リストのマークに画像を設定(可能であれば) -【前回までの分】 --リスト(関連情報の部分)の番号や記号を設定する(ulまたはol要素) --''「トップへ戻る」用に「.jump_top」というクラスを設定し''、右揃えの設定をする ---HTMLファイルで、現在設定している''p要素をdiv要素に書き換える'' --''目次用に「.toc」というクラスを設定''して、適当なスタイルを設定する ---HTMLファイルで、''目次のh2要素にクラスを設定する'' --フォントの設定(すべての要素で設定) ---スタイル、太さ、サイズなど --行揃えの設定(h1〜h6要素) --リンク部分の色の設定(a要素) --行間の設定(p要素) --マージン(margin)の設定(h1〜h4、p、blockquote、address要素) --まわりの空間(padding)の設定(h1〜h4、p、blockquote、address要素) --ページ全体の文字色と背景色(body要素) --文字色と背景色(h1〜h4、p、blockquote、address要素) --枠線の設定(色・太さ・種類)(h1〜h4、p、blockquote、address要素) ---- &color(red){まだ提出ではありません};。 &navi2(Lecture/JouhouC2010/10th,next);に進んで、課題を行ってください。 &br; ---- #navi2(Lecture/JouhouC2010/10th,prev,toc,next) |