[小西ホームページ]   [目次・索引]   [次の授業]

情報処理IIA(HTML入門)第1回

目次 索引
1.1 教員の紹介
1.2 シラバスの説明
1.2.1 授業の目標・概要
1.2.2 授業のスケジュール
1.2.3 教材 (テキスト)
1.2.4 教材(参考書など)
1.2.5 成績評価の方法と基準
1.2.6 教室外の学習方法
1.2.7 履修者への要望・履修のポイント・留意事項他
1.3 ホームページ作成の準備
1.3.1 ホームページ・ガイドライン
1.3.2 システム更新について
1.3.3 授業用ディレクトリ
1.3.4 ディレクトリの作り方
1.3.5 XEmacsの使い方
1.3.6 Netscapeの使い方
1.4 アンケート1

1.1 教員の紹介

名前
小西 善二郎(こにし ぜんじろう)
所属
早稲田大学ソフトウェア生産技術研究所
連絡先
konishi@twcu.ac.jp

1.2 シラバスの説明

1.2.1 授業の目標・概要

情報処理 I のホームページ作成の続編である。 HTMLのより高度な機能を学ぶ。 また、ファイルシステムなどHTMLに関係するテーマで演習を行い、コンピュータとネットワークの仕組みについて理解を深める。

1.2.2 授業のスケジュール

  1. ガイダンス
  2. 基本的なタグ
  3. イメージとリンク
  4. 色々なタグ
  5. フレーム
  6. スタイルシート
  7. ファイルとディレクトリ
  8. シェルとコマンド
  9. IPアドレスとドメイン名
  10. WWWとプロトコル
  11. より高度な話題

1.2.3 教材 (テキスト)

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

1.2.4 教材(参考書など)

授業内容に応じて参考資料を紹介する。

1.2.5 成績評価の方法と基準

原則として毎回レポート課題を出す。 レポートの採点結果を総合して成績を決定する。

※シラバス提出の後で、大学側の方針により試験を実施することになった。

1.2.6 教室外の学習方法

レポート課題に取り組むこと。

1.2.7 履修者への要望・履修のポイント・留意事項他

レポートはすべて提出すること。


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

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

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

1.3.2 システム更新について

2003年9月から、学内のコンピュータシステムが大幅に変更されます。 ほとんどのソフトウェアが入れ替わりますので、新しいシステムでホームページを作成するには、ソフトの使い方を覚え直す必要があります。 ただし、勉強したことが無駄になるわけではありません。 HTMLの知識はそのまま通用します。 ファイルシステムについても、本質的な差はありません。 ネットワークの仕組みについても、特に違いはありません。 変わるのは、ソフトの使い方という表面的な部分だけです。

1.3.3 授業用ディレクトリ

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

もし、「ディレクトリ」という言葉を聞いたことがなければ、これを「フォルダ」と読み替えてください。 この授業では、ディレクトリとフォルダは同義語です。

今日の演習は次の通りです。

  1. 端末エミュレータを用いて、授業用ディレクトリを作成する。
  2. テキストエディタXEmacsを用いて、練習としてのホームページを作成する。
  3. WWWブラウザNetscapeを用いて、作成したホームページを表示する。

ファイルとディレクトリについては、いずれ詳しく説明しますが、もし興味があるのでしたら、以下の説明を読んでみてください。

授業用ディレクトリは、ユーザ名がb00a001ならば

/home/b00a/b00a001/WWW-local/ip2a

とします。 すでにディレクトリ

/home/b00a/b00a001/WWW-local

がある場合、今日はこのディレクトリの中にディレクトリip2aを作成することになります。 今日作成するホームページのファイル名をex1.htmlとしますと、このファイルの絶対パス名は

/home/b00a/b00a001/WWW-local/ip2a/ex1.html

となります。 以上のファイルとディレクトリの関係を図で表しますと、次のようになります。

                             |
                       +-----+-----+---..
                       |           |
                     home         tmp
                       |           :
                 +-----+-----+---..
                 |           |
               b00a        b00c
                 |           :
           +-----+-----+---..
           |           |
        b00a001     b00a002
           |           :
     +-----+-----+-----------+-----------+
     |           |           |           |
   Mail       Maildir      WABI      WWW-local
     :           :           :           |
           +-----------+-----------+-----+-----+
           |           |           |           |
      index.html  index.html~    ip2a    kabegami.jpg
                                   |
                             +-----+-----+
                             |           |
                         ex1.html    ex1.html~

1.3.4 ディレクトリの作り方

情報処理Iでは、ファイル・マネージャを使ってディレクトリを作成したと思います。 この授業では、端末エミュレータを用います。 端末エミュレータについては、いずれ詳しく説明しますが、もし興味があるのでしたら、括弧内の説明を読んでみてください。

  1. 端末エミュレータを開きます。 フロントパネルの中央左下にある端末のアイコンをダブルクリックしてください。
  2. ls WWW-local と入力します。 端末エミュレータで、 ls WWW-local とタイプして、Enterキーを押してください。 (lsは、LiStのことで、ディレクトリの内容をリストアップするという意味です。)
    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 と入力します。 (cdは、Change Directoryのことで、カレントディレクトリを変更するという意味です。)
    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 と入力します。 (mkdirは、MaKe DIRectoryのことで、ディレクトリを作成するという意味です。)
    b00a001@Ampere:~/WWW-local% mkdir ip2a
    b00a001@Ampere:~/WWW-local%
    これで授業用ディレクトリができます。
  5. 端末エミュレータを閉じます。 exit と入力してください。

1.3.5 XEmacsの使い方

今日は練習として、XEmacsを用いて"Good afternoon!"と表示するホームページを作成します。 次回以降、ホームページの作成手順は、各自の慣れている方法で行って構いません。

  1. XEmacsを起動します。 フロントパネルの牛(ヌー)アイコンをダブルクリックしてください。
  2. メニューを「ファイル」→「開く...」とクリックします。
  3. shellウィンドウが開きますので、左欄の"WWW-local"を中央クリックします。 (ダブルクリックではありません。)
  4. 左欄の"ip2a"を中央クリックします。
  5. 下欄に
    Find file: ~/WWW-local/ip2a/
    と表示されますので、(その右側をクリックし、)ファイル名(例えばex1.html)をタイプしてOKボタンをクリックします。
  6. 新しいHTMLファイルの場合には、雛形のドキュメントが用意されます。 この授業では雛形は使いませんので、メニューを「編集」→「元に戻す」とクリックします。
  7. 次のドキュメントをタイプします。
    Good afternoon!
  8. メニューを「ファイル」→「保存」とクリックして、ファイルを保存します。
  9. XEmacsを終了するときは、メニューを「ファイル」→「XEmacs終了」とクリックします。

1.3.6 Netscapeの使い方

次に、今作成したドキュメントをNetscapeで表示します。 次回以降、ホームページの表示手順は、各自の慣れている方法で行って構いません。

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

1.4 アンケート1

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

[小西ホームページ]   [目次・索引]   [次の授業]

2003年4月10日更新
konishi@twcu.ac.jp
Copyright (C) 2003 Zenjiro Konishi. All rights reserved.