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

1.1 教員の紹介

名前

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

所属

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

連絡先

konishi@twcu.ac.jp

1.2 シラバスの説明

1.2.1 授業目標・概要

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

HTML

高度なホームページを作成するには、まず色々なタグを覚える必要があります。 演習を通じて、基本的なものから順にタグの使い方を学びます。 また、ホームページの体裁を整えるには、スタイル関連タグを使うよりも、スタイルシートを利用するべきだとされています。 この規格の移り変わりについても説明します。 スタイルシートによって、タグは文書に構造を与えるものという考え方が明確になりました。 マークアップ言語としてのHTMLについても理解を深めます。

ファイルシステム

高度なホームページを作成するには、たくさんのファイルをディレクトリを用いて管理することも必要になります。 端末エミュレータを利用して、ファイルとディレクトリについて理解を深めます。 またユーザやアクセス権といった概念にも触れます。

ネットワークの仕組み

掲示板のようなホームページを作成するためには、ネットワークの中でどのようにデータが交換されているかを理解する必要があります。 なぜ世界中のサイトのホームページが見られるのかもあわせて、ネットワークの仕組みについて理解を深めます。

1.2.2 授業スケジュール

1. ガイダンス

シラバスの説明、ホームページ・ガイドライン、ホームページ作成の準備。

2. テキスト

文と段落、特殊記号、テキストの強調、見出し、引用、アドレス、整形済みテキスト、強制改行。

3. リストとスタイル

リスト、コメントとインデント、HTML構造、字揃え、フォントの変更、水平線。

4. スタイルシート

div要素とspan要素、style属性、style要素。

5. 表

表。

6. 画像とリンク

画像の埋め込み、背景画像、リンクとアンカー。

7. フレーム

フレーム。

8. 端末エミュレータ

コマンド、オンラインマニュアル、コマンドによるファイル管理。

9. ファイルとディレクトリ

パス名、HTMLにおけるパス名、ユーザとグループ、アクセス権。

10. IPアドレスとDNS

IPアドレスの仕組み、プライベートアドレスとグローバルアドレス、ドメイン名の仕組み、DNSによるドメイン名の解決。

11. URL/URI

絶対URL/URI、相対URL/URIの解決、HTMLにおけるURL/URI。

12. HTTPとCGI

HTTP、CGI。

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

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

1.2.4 教科書

授業はホームページ

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

にそって進めます。

1.2.5 参考書等

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

1.2.6 成績評価の方法

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

1.3 履修者の抽選

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

他科目履修

この科目を履修するためには、「情報処理IIB」も履修する必要があります。

優先条件

まず、文理学部の学生を優先します。 次に、3年生以上で、今年度「情報処理IIIA（Javaプログラミング入門）」を履修する学生を優先します。 （後期水曜1限の「情報処理IIA」には若干の余裕があります。 「情報処理IIIA」履修希望の2年生につきましては、この抽選に外れましたらそちらを登録することも可能です。）

抽選方法

履修希望者には履修者制限カードを渡します。 授業コード（BJ21A）、学生番号、氏名を記入して提出してください。 提出されたカードの中から44枚を無作為に選びます。

履修登録

履修を許可された学生は、抽選結果の掲示を確認の上、履修登録をしてください。

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

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

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

1.5.1 授業用ディレクトリの作成（1）

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

はじめに、端末エミュレータを起動します。 フロントパネルの中央左下にある端末のアイコンをダブルクリックしてください。 端末エミュレータで、 ls WWW とタイプして、Enterキーを押します。

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

このように表示された場合は、「授業用ディレクトリの作成（2）」に進んでください。

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

このように表示された場合は、次のように入力してください。

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

1.5.2 授業用ディレクトリの作成（2）

続いて、次のように入力してください。

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

ls ip2a と入力して

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

と表示されることを確認したあと

b00a001@Ampere:~/WWW% mkdir ip2a
b00a001@Ampere:~/WWW% cd ip2a
b00a001@Ampere:~/WWW/ip2a%

と入力してください。 これで授業用ディレクトリができました。

端末エミュレータを終了するには、

b00a001@Ampere:~/WWW/ip2a% exit

と入力してください。

1.5.3 HTMLファイルの作り方

授業中、ホームページの作成手順は、各自の慣れている方法で行って構いません。 ここでは例として、"Good morning!"と表示するホームページの作り方を説明します。

はじめに、端末エミュレータを起動します。

b00a001@Ampere:~% cd WWW
b00a001@Ampere:~/WWW% cd ip2a
b00a001@Ampere:~/WWW/ip2a%

と入力して、授業用ディレクトリに移動します。

b00a001@Ampere:~/WWW/ip2a% xemacs &
[1] 3643
b00a001@Ampere:~/WWW/ip2a%

と入力しますと、テキスト・エディタXEmacsのウィンドウが開きます。

ウィンドウ上部のメニューで、「ファイル」「開く...」とクリックしてください。 ファイル一覧のウィンドウが開きます。 このウィンドウの下部に、

Fild file: ~/WWW/ip2a/

と表示されています。 ここで編集したいファイルの名前（例えばex1.html）を入力し、Enterキーを押してください。 すでにあるファイルならばその内容が表示され、新しいファイルならばHTML文書の雛型が表示されます。 ex1.htmlは新しいファイルなので雛型が表示されていますが、この例では必要ありませんので削除します。 カーソルを移動し、DELキーを何度か押して、すべて消してください。 そして、 Good morning! とタイプします。 すべてタイプしましたら、ファイルを保存します。 保存は、メニューで「ファイル」「保存」とクリックしてください。

XEmacsを終了するには、メニューで、「ファイル」「XEmacs終了」とクリックします。

1.5.4 WWWブラウザによる表示の仕方

続いて、作成したHTMLファイルをWWWブラウザで表示します。 端末エミュレータで、

b00a001@Ampere:~/WWW/ip2a% netscape &
[1] 4024
b00a001@Ampere:~/WWW/ip2a% 

と入力してください。 WWWブラウザNetscapeのウィンドウが開きます。

ウィンドウ上部のメニューで、「ファイル」「ページを開く（O）...」とクリックしてください。 「ページを開く」ウィンドウが開きます。 このウィンドウの右側にある、「ファイルを選択...」ボタンをクリックしてください。 ファイル一覧のウィンドウが開きます。 「選択」入力欄に

/home/b00a/b00a001/WWW/ip2a/

と表示されています。 ここで表示したいHTMLファイルの名前（ここではex1.html）を入力し、OKボタンをクリックしてください。 「ページを開く」ウィンドウに戻りますので、「Navigatorで開く」ボタンをクリックしてください。 作成したホームページが表示されます。

Netscapeを終了するには、メニューで「ファイル」「終了（X）」とクリックしてください。

1.6 アンケート1

履修者名簿の作成と予備知識の確認のため、アンケートを行います。 学生番号、氏名、科目名、授業の日付けを明記して、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. 授業内容に関して、何か希望がありましたら答えてください。