KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/7th/exercise1

課題1: HTMLファイルとCSSファイルを作成する

課題の内容

HTMLの技術を使って、 前回までに作ったHTMLファイルを更新してください。

• プロフィールのページ
• 記事へのコメントのページ

CSSファイルの指定

前回までに作った、2つのファイル（プロフィールとコメントのページ）に、 統一したスタイルを設定します。

作成するスタイルファイル（CSSファイル）は1つです。 CSSファイルは、次のとおりとします。

• ファイル名: style.css

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

• ページ全体の文字色と背景色（body属性）
• 見出しの文字色と背景色（h1〜h6属性）
• 属性見出しの枠線の設定（色・太さ・種類）（h1〜h6属性）
• 段落内の文章の行間（p属性）

なお、 もし次のような設定をしている場合は、 必ず、すでに設定されているタグの属性の設定を消しておいてください。

• ページ全体の文字色と背景色
• 見出しの文字色と背景色
• 見出しの枠線の設定（色・太さ・種類）

プロフィールのページ

• 作成したCSSファイルを指定するように、設定してください。
• 「連絡先」にある「更新日」を更新した日付にする

記事へのコメントのページ

内容は、次のとおりです。

• 前回の課題(1)で作成したHTMLファイルに、前回の課題(2)の記事へのコメントを追加
• 今回までに紹介した、HTMLの技術を使って、ファイルを編集
• HTMLファイルの文法をチェックするサイトの、チェックを合格する

ファイルの内容は、次のようにしてください。

ページのタイトル

  プロフィール

目次
  各記事へのリンク
  ...
---
第6回の課題：記事へのコメント
...
第5回の課題：記事へのコメント
...
第4回の課題：記事へのコメント
...
第3回の課題：記事へのコメント
...
---
連絡先の情報

ファイル作成の注意点は、次のとおりです。

• 作成したCSSファイルを指定するように、設定してください。
• 「連絡先」にある「更新日」を更新した日付にする
• 画像データを使ってもかわまない（著作権を違反しないこと！）
• これまでの注意点・ポイント
  • 第4回の注意点
  • 第5回のポイント
  • 第6回の注意点

HTMLの文法をチェックする

作成したファイルの、HTMLの文法が正しいかを、 次のサイトにアクセスして、チェックしてください。

• Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html )

チェックは、次のような方法で行ってください。

1. http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html へアクセス
2. 「FILE」のチェックボックスをクリック
3. 「参照」ボタンをクリック
4. ファイルの選択画面になるので、作成したファイルを選択し、「開く」ボタンをクリック
5. 「チェック」ボタンをクリック
6. チェック結果が表示

チェック結果が、「よくできました」となるまで、 文法の間違いを修正して、チェックを繰り返してください。

「よくできました」となったら、 課題のファイルを提出してください。

提出方法

提出方法は、「ファイルのWebサーバへの転送」です。 ファイルの転送方法は、 第6回の説明「ファイルを転送する」を よく読んで、 操作してください。 転送するファイルは、3つです。

• プロフィールのページ
• コメントのページ
• スタイルシート

転送したファイルは、次のURLで確認できます。

• http://arena.hyogo-dai.ac.jp/student/2004/idb/

転送が完了したら、次のメールを送ってください。

• 宛先: kawano@ed.hyogo-dai.ac.jp
• 件名: 第7回の課題(1)
• 本文: 今回までの感想を簡単に書いてください。

提出期限

• 原則として、平成16年11月26日午後2時までとします。
• 期限以後は、特別な理由がない限り、提出を受け付けません。

次へ進んでください。

}}