Lecture/JouhouC2010/9th/exercise1 の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/JouhouC2010/9th/exercise1 へ行く。
TITLE:第9回の課題
*課題: ネット上の記事へのコメントで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]

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

***(1) ファイルの作成 [#x281debe]
''第8回の課題のHTMLファイルを開いたあと''に、
次のようにして、名前をつけて別のファイルを作ります。
-メニューから「ファイル」→「名前をつけて保存」
-ファイルを次のようにつけて保存
--「0615」＋「学籍番号」＋「.html」（半角文字で！）~
（学籍番号がC2092000の場合、ファイル名は「''0615c2092000.html''」）


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

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

:ページのレイアウトの例|
#pre(novervatim){{
ページのタイトル

目次
&color(Red){　・第9回のコメントへのリンク};
　・第8回のコメントへのリンク
…（途中省略）…
　・第3回のコメントへのリンク
　・第2回のコメントへのリンク
　・プロフィール

---
&color(Red){第9回の課題のコメント};
&color(Red){...};
&color(Red){[トップへ戻る]};

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

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

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

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

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

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

作成するときの注意点は、次のとおりです。
-&color(Red){''「トップへ戻る」用に「.jump_top」というクラスを設定''し、右揃えの設定をする};
--HTMLファイルで、現在設定している''p要素をdiv要素に書き換える''
 （変更例）
 変更前：<p><a href="#top">［トップへ戻る］</a></p>
 　↓
 変更後：<div class="jump_top"><a href="#top">［トップへ戻る］</a></div>
-&color(Red){''目次用に「.toc」というクラスを設定''して、適当なスタイルを設定する};
--HTMLファイルで、''目次のh2要素にクラスを設定する''
 変更前：<h2>目次</h2>
 　↓
 変更後：<h2 class="toc">目次</h2>
-目次を更新する
--8つのコメント（第2〜9回）へジャンプできるリンクをつくる
-情報源へのURLは、その情報源にアクセスできるようにリンクにすること
-コメントを作る
--それぞれのコメントの最後には、ページのトップ（一番上）にジャンプする「トップへ戻る」というリンクを作る
-[[第3回の課題で説明した注意点>../../3rd/exercise#n5e1c11f]]を守る
-ファイルの最後にある、連絡先の「更新日」の日付を更新する
#pre(novervatim){{
<address>
 作成日: 2010-04-20; 更新日: &color(red){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を使用するための設定 [#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ファイルに、スタイルを設定します。

''第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要素）

***提出方法 [#pd69905b]
作成したファイルを、次の場所にコピーして提出してください。
-「マイコンピュータ」→「Fsの資料・課題」→「kawano」→「提出」


***提出期限 [#h518caec]
-原則として、''平成22年6月22日9時''までとします。
-期限以後は、特別な理由がない限り、提出を受け付けません。
-課題のやりなおしは、提出期限まで受け付けます。

&br;
----
#navi2(Lecture/JouhouC2010/9th,prev,toc)
KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/9th/exercise1 の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
