2002/10/07 情報処理演習B「マルチメディアウェブページ作成」 第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 情報処理演習B「マルチメディアウェブページ作成」 ヒント: HTML の文法エラーがあった場合に,文法チェッカーが出す警告にぴんとこない人は, わざと間違った HTML を書き,文法チェッカーにかけてみて,文法チェッカーの様子を 観察してみよう。(人間と違い,文法チェッカーはたいへん辛抱強い!こちらが納得する まで,いつまでも付き合ってくれます。) 実習 3. 1. 2. [No2] フ ォ ル ダ に あ る index.html を 開 き , 練 習 問 題 を お こ な う 。 練 習 問 題 そ の 1 (mondai1a.html),その2(mondai1b.html),その3(mondai1c.html)の 3 つのファイルの HTML 文書の文法エラーをみつけ修正する。TeraPad で開いた HTML のソースをよく検証すると ともに,文法チェッカーの採点結果も利用しよう。エラーを修正したら,再度文法チェッカ ーにかけ,エラーが直ったかどうかを確かめよう。 グループの中で3つの練習問題を最初に終えた人は,教師かTAのチェックを受けること。 チェックがすんだ人は,グループの他のメンバーのサポートをしてほしい。全員が練習問題 全てを終えたらそのグループは解散してかまわない。 実習 4. (自習課題) • • さらに HTML の文法チェックに習熟したい人は,[No2] フォルダのなかにある問題1,2, 3もやってみよう (それぞれファイル名は mondai1.html, mondai2.html, mondai3.html)。それ ぞれの HTML 文書には,重大な HTML のエラーが複数含まれる。 ど こ を 直 せ ば よ い か を 検 証 し た 結 果 を 10 月 9 日 ( 水 ) 中 に 電 子 メ ー ル で 千 葉 (schiba@reitaku-u.ac.jp) あてに送った人には,折り返し正解を送る。(あくまでも腕試しと 考えているので,評価の対象とはしない予定である。) HTML の理解力は,HTML を自分でどんどん作成するとともに,このような文法のチェックの訓練を つむことで格段に高まる。特に,HTML を書くのに慣れていない人は,配布資料や教科書,参考書を 参照しながら集中的に勉強してほしい。 実習 5. (自習課題) • • • • • [No2] フォルダには,skeleton.html という,§5.2.で示した HTML 文書の雛形ファイルが 含まれている。この雛形を利用して,自分で Web ページを作ってみよう。最初の提出課題の 自己紹介の Web ページ作成にも役立つので,まずお気に入りのページへのリンクを集めたリ ンク集を作ってみよう。 リンク集は,そのファイルを開けばいつでも目的の Web ページを開けるので,上手に作ると 後でたいへん重宝する。 以下のような,リストを作成するタグを利用してみよう:ul, ol, li, dl, dt, dd 実際のタグの利 用方法は参考書等を参照のこと。 雛形ファイルを TeraPad で開き,名前をつけて新たに HTML 文書を保存すると,雛形はそ のまま残る。 作成したページを HTML の文法チェッカーにかけ,文法をチェックしよう。 (以上) 2
© Copyright 2024 Paperzz