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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/8th/exercise1 へ行く。
  • 1 (2005-11-29 (火) 04:56:11)
  • 2 (2005-11-29 (火) 04:59:12)
  • 3 (2007-02-24 (土) 07:05:44)
  • 4 (2007-02-24 (土) 07:10:26)

課題: ネット上の記事へのコメントをHTMLファイルにする

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

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

1.情報を集める

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

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

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

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

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

HTMLファイルの作成

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

コメントの追加・目次の更新

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

pre> ページのタイトル

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

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

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

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

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

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

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

• 連絡先・著作権の情報

  /pre>

作成するときの注意点は、次のとおりです。

• コメントを作る
  • それぞれのコメントの最後には、ページのトップ（一番上）にジャンプする「トップへ戻る」というリンクを作る
• 目次を更新する
  • 4つのコメント（第2〜4、6〜7回）へジャンプできるリンクをつくる
• 第3回の課題で説明した注意点を守る
• ファイルの最後にある、連絡先の「更新日」の日付を更新する

  pre>

  address>

  作成日: 2005-10-14; 更新日: &color(red){2005-11-25};<br>
  Copyright (C) 2005 兵庫太郎, All rights reserved.<br>
  このページに関する問合せ先:<br>
  E-Mail. <a href="mailto:e2041000＠ed.hyogo-dai.ac.jp">
  e2041000＠ed.hyogo-dai.ac.jp</a>

  /address>

  /pre>

その他の注意点は、第4回の課題の説明を見てください。

CSSファイルの作成

コメントが書かれたHTMLファイルに、スタイルを設定します。

今回は、HTMLファイルとは別に、 スタイルシートの設定が書かれたCSSファイルを作成します。 ファイル名は、次のとおりとします。

• ファイル名: style.css

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

• 今回分:「クラス」を使った設定をする
  • マージンや周りの空間の設定（margin, padding）
  • リンク部分の設定
  • フォントの設定
  • 位置そろえ
• 前回分
  • ページ全体の文字色と背景色（body要素）
  • 見出しの文字色と背景色（h1〜h6要素）
  • 見出しの枠線の設定（色・太さ・種類）（h1〜h6要素）
  • 段落内の文章の行間（p要素）

ただし、 もし次のな設定をしている場合は、 必ず、該当する属性の設定を消してください！

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

サンプルのイメージがありますので、下のリンクを参考にしてください。

• &ref(): File not found: "css00.png" at page "Lecture/InfoDesignB2005/8th/exercise1";
• &ref(): File not found: "css01.png" at page "Lecture/InfoDesignB2005/8th/exercise1";
• &ref(): File not found: "css02.png" at page "Lecture/InfoDesignB2005/8th/exercise1";

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