課題 - 麗澤大学

2002/10/07
情報処理演習Ｂ「マルチメディアウェブページ作成」
第2回
課題 (HTML の基本構造)
実習 0. 準備
•
file_server の Kadai にある [schiba] → [web02] にある [No2] フォルダを ZIP ディスクに
コピーしなさい。
実習 1. myfirstpage.html の編集
1. コピーした [No2] フォルダの myfirstpage.html を TeraPad の HTML 編集モードで開く。
2. 「麗澤大学」のところに大学の公式ホームページへのリンクを，「TeraPad」のところに開発
者寺尾さんのホームページへのリンクを作成する。
<a
<a
href="http://www.reitaku-u.ac.jp">麗澤大学</a>
href="http://www2s.biglobe.ne.jp/~t-susumu/toclip/">TeraPad</a>
3. 「こんにちは。
」で始まる p 要素の内容冒頭に，以下のように img タグを入力する。
<p><img
src="mypicture.gif"
alt="自画像">こんにちは。….
4. 「こんにちは。
」の部分を strong タグで強調する。<strong>こんにちは。</strong>
5. 作成したら上書き保存し，Internet Explorer と Netscape Navigator の両方で表示させ，画
像およびリンクが正しく動作することを確認する。
上記 HTML 文書をブラウザで表示させたところ (Internet Explorer の場合)：
実習 2.
1.
2.
3.
4.
実習 1.で作成した myfirstpage.html を，文法チェッカー Another HTML-Lint でチェック
する。(§7.2.を参照。授業ホームページおよび [No2] フォルダにある index.html に文法チ
ェッカーへのリンクがある。)
結果を見る。(実習 1 で加えたタグにエラーはないか？)
§5. を参考に，myfirstpage.html に欠けている DOCTYPE 宣言，エンコード方式(Shift JIS)
を記述する meta タグを加える。(ついでに html タグに lang 属性を追加するとよい。§3.1.
参照。)
文法チェックをかけ直し，結果を検証する。
1
2002/10/07
情報処理演習Ｂ「マルチメディアウェブページ作成」
ヒント： HTML の文法エラーがあった場合に，文法チェッカーが出す警告にぴんとこない人は，
わざと間違った HTML を書き，文法チェッカーにかけてみて，文法チェッカーの様子を
観察してみよう。(人間と違い，文法チェッカーはたいへん辛抱強い！こちらが納得する
まで，いつまでも付き合ってくれます。)
実習 3.
1.
2.
[No2] フ ォ ル ダ に あ る index.html を 開 き ， 練 習 問 題 を お こ な う 。 練 習 問 題 そ の １
(mondai1a.html)，その２(mondai1b.html)，その３(mondai1c.html)の 3 つのファイルの HTML
文書の文法エラーをみつけ修正する。TeraPad で開いた HTML のソースをよく検証すると
ともに，文法チェッカーの採点結果も利用しよう。エラーを修正したら，再度文法チェッカ
ーにかけ，エラーが直ったかどうかを確かめよう。
グループの中で３つの練習問題を最初に終えた人は，教師かＴＡのチェックを受けること。
チェックがすんだ人は，グループの他のメンバーのサポートをしてほしい。全員が練習問題
全てを終えたらそのグループは解散してかまわない。
実習 4. (自習課題)
•
•
さらに HTML の文法チェックに習熟したい人は，[No2] フォルダのなかにある問題１，２，
３もやってみよう (それぞれファイル名は mondai1.html, mondai2.html, mondai3.html)。それ
ぞれの HTML 文書には，重大な HTML のエラーが複数含まれる。
ど こ を 直 せ ば よ い か を 検 証 し た 結 果 を 10 月 9 日 ( 水 ) 中 に 電 子 メ ー ル で 千 葉
([email protected]) あてに送った人には，折り返し正解を送る。(あくまでも腕試しと
考えているので，評価の対象とはしない予定である。)
HTML の理解力は，HTML を自分でどんどん作成するとともに，このような文法のチェックの訓練を
つむことで格段に高まる。特に，HTML を書くのに慣れていない人は，配布資料や教科書，参考書を
参照しながら集中的に勉強してほしい。
実習 5. (自習課題)
•
•
•
•
•
[No2] フォルダには，skeleton.html という，§5.2.で示した HTML 文書の雛形ファイルが
含まれている。この雛形を利用して，自分で Web ページを作ってみよう。最初の提出課題の
自己紹介の Web ページ作成にも役立つので，まずお気に入りのページへのリンクを集めたリ
ンク集を作ってみよう。
リンク集は，そのファイルを開けばいつでも目的の Web ページを開けるので，上手に作ると
後でたいへん重宝する。
以下のような，リストを作成するタグを利用してみよう：ul, ol, li, dl, dt, dd 実際のタグの利
用方法は参考書等を参照のこと。
雛形ファイルを TeraPad で開き，名前をつけて新たに HTML 文書を保存すると，雛形はそ
のまま残る。
作成したページを HTML の文法チェッカーにかけ，文法をチェックしよう。
(以上)
2