課題

第５回目課題

完成期限: 1月12日

以下のようなフォームを作成し、CGIプログラム (http://adlib.rsch.tuis.ac.jp/~akira/lect/webprog/cgi/formdisp.cgi)を使 用して、送信ボタンを押すと入力したデータが画面に表示されるようにせよ。作 成した HTMLファイルは、webprog/form.html という名前で公開せよ。その際、 下記の点に注意すること。

• formタグの method属性は、post, get いずれでもよい。
• ログイン名のコントロールの名前は、login とする。
• 演習の進度のコントロールの名前は、speed とし、選択肢が選択されたとき の値は、上から順番に 1,2,3,4,5 とすること。
• 演習への意見のコントロールの名前は、それぞれ
  • 「Webプログラミングには関心がない」には nohtml
  • 「もっとマルチメディアに関する内容を勉強したい」には multi
  • 「もっと音響に関する内容を勉強したい」には acoust
  とし、それぞれが選択された時の値は、全て 1 とする。
• 感想のコントロールの名前は、comment とする。
• 表あるいはCSSを活用して、下記のフォーム例よりもっと見やすく、使いや すく、入力ミスがすくなくなるようなコントロールのレイアウトとせよ。
• 回答ボタンを押して、入力データをCGIプログラムが処理していること(送信さ れたデータが画面に表示されること)を確認しておくこと。

第4回: 12月12日

今回の演習の要約であるWord文書ファイル の内容を、文書の論理的構造をHTMLタグによって整え、かつ「見た目」を CSSによって整えたHTMLファイルとして作成する。作成したHTML文書は、各自 のpublic_htmlフォルダにあるwebprog というフォルダの中に、css.html とい うファイル名で公開すること。

課題作成時に守るべき点

• スタイルは、mystyle.css というファイルに作成し、外部スタイルシート読 み込みによって、HTMLファイルにスタイルを適用すること。
• 以下の点を外部スタイルシートファイルで指定すること。
  1. 見出し1はセンタリング
  2. 右寄せのスタイルクラスを作成する
  3. 見出し2の文字色は緑とする。
  4. 段落の先頭は１字分インデント
  5. 表中の文字はセンタリング、かつサイズを本文より相対的に小さくする
  6. 表の見出しセルの背景色はピンク
• 自分の学籍番号、氏名を入力し、その行は右寄せスタイルクラスをdivタグの属性と して使用すること
  • このページに、右寄せスタイルクラスをdiv タグに指 定して右寄せを行っている部分があるので、参考にすること。
  • ただし、ドキュメントスタイル指定なので、外部スタイルシートに そのスタイルクラスを作成すること
  • div タグとは?
• 上記に指定した以外の「見え方」は任意(自由)とする。必ずしも、Word文書と 同じになる必要は、全く無い。

第3回

12月8日いっぱいまでに作成すること[回答例]

• webprog フォルダの中に、index.html という名前で作成する。
• フレームの左右の割合はそれぞれ、30%, 70% とすること
• 左側のフレームにある[情報教育システム]あるいは[入試情報]のリンクをクリックすると、そのコンテンツが下側のフレームに現れるようにすること。
• 最初に右側のフレームに表示されるページは、自分のトップページ(１年の リテラシーで作成したもの、なければ適当でよい)とする。
• [情報大のトップページ]というリンクを クリックすると、上下に分かれたフレームが解消されて、情報大のトップペー ジのフレーム画面が (http://www.tuis.ac.jp/)がブラウ ザ全体に表示されるようにせよ。
• リンクを３つ作成するページのファイル名については、何でも良い。

• 回答例
• よくない回答例

次のような表をHTMLで作成して公開せよ。場所は、webprog、ファイル名は、 table.html とする。Microsoft Word や Excel は使用しないこと。 使用すべきタグは、table, tbody, caption, tr, th, td, ul, li, br とし、必要な部分には、td タグの rowspan 属性を使用すること。 HTMLのヘッダ部には課題作成者の氏名と学籍番号を入力しておくこと。

正解例

今回の演習のまとめであるWord文書ファイル を自分のディスク領域に保存する。この文書の内容をエディタにコピー・アン ド・ペーストして、文書の論理的構造と見合った HTMLファイルを作成する。 作成したHTML文書は、各自のZドライブpublic_htmlフォルダ に webprog というフォルダ を作成して、webprog.html というファイル名で公開すること。

• ヘッダ部には、タイトルと作成者名(学籍番号)を必ず入力しておくこと。ボディ 部で使用するタグは、h1, h2, h3, ul, ol, li, br, p とする。ただし、段落中の改行位置をWord文書と一致させるために、 br タグを使う必要はない。brタグは改行すると「見やすい」位置に入れるこ と。
• HTMLファイルひながたを右クリック で保存し、利用しよう。
• 段落の最初を1文字分空けるやりかたは、まだ学習していないので、無理 に空けなくてよい。
• 基本的なタグの使い方の演習なので、
  • Word文書を直接HTMLファイルとして保存
  • HomePage Builder などのWYSIWYGのHTMLエディタを利用
  などは禁止する。
• 作成された課題のURLは、

  http://www.edu.tuis.ac.jp/~ログイン名/webprog/webprog.html
  

  となる。自分の課題にURLをブラウズして、正しく表示されることを確認し ておくこと。