情報処理IIA（HTML入門）第1回

1.1 教員の紹介

名前

小西 善二郎（こにし ぜんじろう）

所属

早稲田大学ソフトウェア生産技術研究所

連絡先

konishi@twcu.ac.jp

1.2 シラバスの説明

1.2.1 授業目標・概要

この授業では、高度なホームページの作成を通じて、コンピュータとネットワークに対する理解を深めることを目標とします。 具体的には、

• HTML（タグ、スタイルシート、マークアップ言語。）
• ファイルシステム（パス名、ファイル管理コマンド、マルチユーザシステム。）
• ネットワークの仕組み（IPアドレス、ドメイン名、プロトコル。）

がポイントになります。

1.2.2 授業スケジュール

1. ガイダンス（シラバスの説明、ホームページ作成の準備。）
2. 基本的なタグ（段落、特殊文字、見出し、引用、アドレス、リスト、整形済みテキスト、強制改行、水平線。）
3. スタイル関連タグ（コメントとインデント、HTML構造、テキストの強調、style属性、テキストの位置揃え、フォントの変更。）
4. スタイルシート（スタイルシート、class属性、div要素とspan要素。）
5. 表（表。）
6. 画像とリンク（画像の埋め込み、背景画像、リンクとアンカー。）
7. フレーム（フレーム。）
8. 端末エミュレータ（パス名、コマンド、オンラインマニュアル、ファイル管理コマンド。）
9. ファイルとディレクトリ（ユーザとグループ、アクセス権、HTMLにおけるパス名。）
10. IPアドレスとDNS（IPアドレスの仕組み、プライベートアドレスとグローバルアドレス、ドメイン名の仕組み、DNSによるドメイン名の解決。）
11. URL/URI（絶対URL/URI、相対URL/URIの解決、HTMLにおけるURL/URI。）
12. より高度な話題（HTTP、CGI、SGML、DTD。）

1.2.3 受講生への要望、履修のポイント、留意事項など

レポートとアンケートの締め切りを、次の授業の開始時刻とします。 この締め切りは整理の都合によるものであり、遅れて提出してもなるべく採点します。

1.2.4 教科書

授業はホームページ

http://www.twcu.ac.jp/~konishi/index-j.html

にそって進めます。

1.2.5 参考書など

授業内容に応じて参考資料を紹介します。 学内の計算機システムについては、「東京女子大学計算機利用の手引き」を参考にしてください。

1.2.6 成績評価の方法

原則として毎回レポート課題を出します。 課題のない日は出席を確認するアンケートを行います。 レポートの採点結果とアンケートの提出回数を総合して成績を決定します。

1.3 履修者の抽選

端末の台数の関係で、履修希望者が44名を超えましたら抽選を行います。

• この科目は現代文化学部の学生も履修できます。 科目名は「コンピュータ演習a」と読み替えてください。
• この科目を履修するためには、「情報処理I」（現代文化学部では「コンピュータ初級」）の単位を取得している必要があります。
• 履修希望者には履修者制限カードを渡します。 授業コード（BJ21A）、学生番号、氏名を記入して提出してください。 提出されたカードの中から44枚を無作為に選びます。 ただし、4年生以上で、昨年度の「情報処理IIA」の抽選に外れた学生を優先します。
• 履修を許可された学生は、抽選結果の掲示を確認の上、必ず履修登録をしてください。

1.4 ホームページ作成の準備

1.4.1 ホームページ・ガイドライン

東京女子大学では、ホームページ開設に関してガイドラインを設けています。 これは、著作権やプライバシーなどの問題を起さないことを目的としています。 「東京女子大学計算機利用の手引き」に記載されていますので、必ず読んでおいてください。

1.4.2 授業で使うWWWブラウザ

情報処理Iでは、テキスト・エディタXEmacsでHTMLファイルを作成し、WWWブラウザNetscapeでホームページを表示したと思います。 この授業では、試験的にWWWブラウザMozillaおよびw3mを使います。 （システムに問題が発生した場合は、今まで通りNetscapeを使います。）

Mozilla とは、Netacape 4.xの後継版を目的にして開発されたWWWブラウザです。 Netscape 4.xには、スタイルシートが規格通りに解釈されなかったり、規格外のタグが使えてしまうなどの問題がありました。 Mozillaは、これらの不具合を改善しています。 また、Mozillaは新しいWWW技術を積極的に取り入れていますので、進んで勉強する人にとっては役に立つはずです。 Mozillaの開発情報は公開されていて、幅広い個人、組織が開発に協力しています。 開発グループは現在のバージョンをテスト版と位置づけていますが、すでに完成度は十分高くなっています。

w3m とは、テキストベースのWWWブラウザです。 字を大きくしたり絵を貼り付けるといったことは、すべて無視されます。 その分、表示は高速ですので、マニュアルのようなドキュメントを手速く閲覧するのに向いています。 また、携帯電話や携帯情報端末のWWWブラウザが、テキストベースにプラスアルファした程度であることを思い出してください。 w3mで表示しても内容の伝わるホームページを作成すれば、携帯電話や携帯情報端末でも読んでもらえるわけです。

これらのWWWブラウザの特徴をまとめますと、以下のようになります。

1.4.3 授業用ディレクトリの作成

この授業では、演習で色々なホームページを作成します。 すでに自分でホームページを開設している学生も多いと思いますので、授業用のディレクトリを作り、そこに演習で作ったファイルを置くことにします。 なお、レポート採点の都合上、授業用ディレクトリの中を調べることがあります。 授業用ディレクトリに授業と関係のないファイルを置かないでください。

1. 端末エミュレータを開きます。 フロントパネルの中央左下にある端末のアイコンをダブルクリックしてください。
2. ls WWW-local と入力します。 端末エミュレータで、 ls WWW-local とタイプして、Enterキーを押してください。

   b00a001@Ampere:~% ls WWW-local
   index.html    index.html~   kabegami.jpg
   b00a001@Ampere:~%

   このように表示された場合は、3に進みます。

   b00a001@Ampere:~% ls WWW-local
   WWW-local: ファイルもディレクトリもありません。
   b00a001@Ampere:~%

   このように表示された場合は、 mkdir WWW-local と入力します。

   b00a001@Ampere:~% mkdir WWW-local
   b00a001@Ampere:~%

3. cd WWW-local と入力します。

   b00a001@Ampere:~% cd WWW-local
   b00a001@Ampere:~/WWW-local%

4. ls ip2a と入力して

   b00a001@Ampere:~/WWW-local% ls ip2a
   ip2a: ファイルもディレクトリもありません。
   b00a001@Ampere:~/WWW-local%

   と表示されることを確認したあと、 mkdir ip2a と入力します。

   b00a001@Ampere:~/WWW-local% mkdir ip2a
   b00a001@Ampere:~/WWW-local%

   これで授業用ディレクトリができます。
5. 端末エミュレータを閉じます。 exit と入力してください。

1.4.4 XEmacsの使い方

授業中、ホームページの作成手順は、各自の慣れている方法で行って構いません。 ここでは例として、テキストエディタXEmacsを用い、"Good morning!"と表示するホームページを作成します。

1. XEmacsを起動します。 フロントパネルの牛（ヌー）アイコンをダブルクリックしてください。
2. メニューを「ファイル」→「開く...」とクリックします。
3. shellウィンドウが開きますので、左欄の"WWW-local"を中央クリックします。 （ダブルクリックではありません。）
4. 左欄の"ip2a"を中央クリックします。
5. 下欄に

   Find file: ~/WWW-local/ip2a/

   と表示されますので、（その右側をクリックし、）ファイル名（例えばex1.html）をタイプしてOKボタンをクリックします。
6. 新しいHTMLファイルの場合には、雛形のドキュメントが用意されます。 この授業では雛形は使いませんので、メニューを「編集」→「元に戻す」とクリックします。
7. 次のHTMLドキュメントをタイプします。

   <h1 style="border: dotted">Good morning!</h1>

8. メニューを「ファイル」→「保存」とクリックして、ファイルを保存します。
9. XEmacsを終了するときは、メニューを「ファイル」→「XEmacs終了」とクリックします。

1.4.5 Netscapeの使い方

次に、今作成したHTMLドキュメントをNetscapeで表示します。

1. Netscapeを起動します。 フロントパネルの"N"アイコンをダブルクリックしてください。
2. メニューを「ファイル」→「ページを開く...」とクリックします。
3. 「ページを開く」ウィンドウが開きますので、「ファイルを選択...」ボタンをクリックします。
4. 「ファイルブラウザ」ウィンドウが開きますので、左欄の"WWW-local"をダブルクリックします。
5. 左欄の"ip2a"をダブルクリックします。
6. 右欄の"ex1.html"をダブルクリックします。
7. 「Navigatorで開く」ボタンをクリックしますと、ホームページが表示されます。
8. Netscapeを終了するときは、メニューを「ファイル」→「終了」とクリックします。

1.4.6 Mozillaの使い方

続いて、同じホームページをMozillaで表示します。 見栄えが少し変わるのを確認してください。

1. Mozillaを起動します。 フロントパネルの"N"アイコンの上にある三角ボタンをクリックしてください。
2. "Mozilla"アイコンをダブルクリックします。
3. ダイアログ・ウィンドウが開きますので、「起動する」ボタンをクリックします。
4. メニューを"File"→ "Open File..."とクリックします。
5. "Open File"ウィンドウが開きますので、"WWW-local"をダブルクリックします。
6. "ip2a"をダブルクリックします。
7. "ex1.html"をダブルクリックしますと、ホームページが表示されます。
8. Mozillaを終了するときは、メニューを"File"→"Quit"とクリックします。

1.4.7 w3mの使い方

最後に、同じホームページをw3mで表示します。 単純な表示であることを確かめてください。

1. 端末エミュレータを開きます。
2. cd WWW-local と入力します。
3. cd ip2a と入力します。
4. w3m ex1.html と入力しますと、ホームページが表示されます。
5. w3mを終了するときは、 Q をタイプします。
6. 端末エミュレータを閉じるには、 exit と入力します。

NetscapeやMozillaと違い、w3mはキータイプによって操作します。 端末エミュレータで、例えば

w3m http://www.yahoo.co.jp/

と入力しますと、ヤフー・ジャパンのホームページが表示されます。 テキストだけでも十分意味が通じることを確かめながら、次の表にしたがって練習してみてください。

1.5 アンケート1

履修者名簿の作成と予備知識の確認のため、アンケートを行います。 学生番号、氏名、科目名、授業の日付け（4/18）を明記して、konishi@twcu.ac.jpあてにメールで回答してください。

1. 次にあげるHTMLのタグのうち、知っているものを答えてください。

   <a> , <address> , <base> , <blockquote> , <body> , <br> , <cite> , <code> , <dd> , <dfn> , <dl> , <dt> , <em> , <h1> , <h2> , <h3> , <head> , <hr> , <html> , <img> , <kbd> , <li> , <ol> , <p> , <pre> , <samp> , <strong> , <title> , <ul> , <var> .

2. 授業内容に関して、何か希望がありましたら答えてください。