コンピュータIIE（HTML入門）第1回

1.1 教員の紹介

名前

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

所属

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

連絡先

konishi@twcu.ac.jp

1.2 シラバスの説明

1.2.1 授業の目標・概要

本講義ではHTMLとその関連技術を学ぶ。 高度なホームページを作成することが目標となる。 授業は演習中心とする。

1.2.2 授業のスケジュール

1. ガイダンス
2. 基本的なタグ
3. イメージとリンク
4. 色々なタグ
5. 表
6. フレーム
7. スタイルシート（1）
8. スタイルシート（2）
9. URL
10. フォーム
11. XML
12. より高度な話題

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 履修者の抽選

コンピュータの台数の関係により、履修希望者が80名を越えた場合は抽選を行います。 抽選用紙には、時間割番号J205Aを記入してください。

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

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

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

1.4.2 システム更新について

2003年9月から、情報処理センターのシステムはSolarisからMacOS Xに変更されました。 新システムを利用するには、はじめに初期設定が必要です。 まだ設定していない人は、手元のプリント「クイックガイド」の通りに操作してください。 「クイックガイド」には、MacOS Xの基本操作の説明もありますので、これも覚えてください。

この授業に関係するアプリケーションは次のようなものです。

1.4.3 授業用ディレクトリ

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

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

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

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

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

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

/Users/b00a001/WWW-local/comp2e

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

/Users/b00a001/WWW-local

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

/Users/b00a001/WWW-local/comp2e/ex1.html

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

                       |
                 +-----+-----+---..
                 |           |
               Users        tmp
                 |           :
           +-----+-----+---..
           |           |
        b00a001     b00a002
           |           :
     +-----+-----+-----------+-----------+
     |           |           |           |
   Mail       Maildir      WABI      WWW-local
     :           :           :           |
           +-----------+-----------+-----+-----+
           |           |           |           |
      index.html  index.html~    comp2e  kabegami.jpg
                                   |
                             +-----+-----+
                             |           |
                         ex1.html    ex2.html

1.4.4 ディレクトリの作り方

コンピュータI（情報処理I）では、ファイル・マネージャを使ってディレクトリを作成したと思います。 この授業では、Finderを用います。 以下の通りに作業してください。

1. DockのFinderアイコンをクリック。
2. 左側のユーザ名をクリック。
3. スクロールしてフォルダを確認し、すでにWWW-localフォルダがある場合は6へ。
4. メニューバーで、「ファイル」→「新規フォルダ」とクリック。
5. 「名称未設定フォルダ」というフォルダ名をクリックし、WWW-localに変更。
6. WWW-localフォルダをダブルクリック。
7. スクロールしてフォルダを確認し、comp2eフォルダがないことを確認。
8. メニューバーで、「ファイル」→「新規フォルダ」とクリック。
9. 「名称未設定フォルダ」というフォルダ名をクリックし、comp2eに変更。

1.4.5 Jeditの使い方

今日は練習として、Jeditを用いて"Good afternoon!"と表示するホームページを作成します。 Jeditの使い方は以下の通りです。

1. DockのFinderアイコンをクリック。
2. アプリケーション・ボタンをクリック。
3. Jedit4.0フォルダ・アイコンをダブル・クリック。
4. Jedit4アイコンをダブル・クリック。
5. メニュー・バーで、「ファイル」→「新規」とクリック。

Jeditを終了するには次のようにします。

1. タイトル・バーの赤ボタンをクリック。
2. メニュー・バーで、「Jedit4」→「Jedit4を終了」とクリック。

なお、Jeditの字が小さくて読みにくい場合は、次のようにしてください。

1. ウィンドウをクリック。
2. メニュー・バーで、「書式」→「文字サイズ」とクリック。

ここで、再びJeditを起動します。 そして、次のHTML文書を入力します。

Good afternoon!

次に、このHTML文書をファイルに保存します。 HTMLファイルを保存するときには、ファイル名の拡張子を 〜.html にする必要があります。 今日は、ファイル名を ex1.html とします。

新規に作成したHTML文書をファイルに保存するには次のようにします。

1. ウィンドウをクリック。
2. メニュー・バーで、「ファイル」→「別名で保存...」とクリック。
3. 「場所:」メニューの右端にある下三角ボタンをクリックし、授業用ディレクトリの名前（WWW-local → comp2e）をクリック。
4. 「別名で保存」欄に、ファイル名（今日は ex1.html）を入力。
5. 「ファイル形式」メニューで「Jeditテキストのみ」を選択。
6. 「漢字コード」メニューで「UTF8」を選択。
7. 「改行コード」メニューで「CR（Mac）」を選択。
8. 「保存」ボタンをクリック。

練習のため、タイトル・バーの赤ボタンをクリックしてウィンドウを閉じます。 そして、再びこのファイルを開くことにします。

以前作成したファイルを開くには次のようにします。

1. もしDockにJeditアイコンがなければ、上記の要領でJeditを起動します。
2. DockのJeditアイコンをクリック。
3. メニュー・バーで、「ファイル」→「開く...」とクリック。
4. 「場所:」メニューの下で、授業用ディレクトリの名前（WWW-local → comp2e）をクリックし、ファイル名をクリック。
5. 「開く」ボタンをクリック。

なお、更新したプログラムをファイルに保存するには次のようにします。

1. ウィンドウをクリック。
2. メニュー・バーで、「ファイル」→「保存」とクリック。

1.4.6 Safariの使い方

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

1. DockのSafariアイコンをクリック。
2. 場所入力欄に、URL

   http://www-local.twcu.ac.jp/~b00a001/comp2e/ex1.html

   を入力。

1.5 アンケート1

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

なお、メールを書くには次のようにします。

1. Dockの切手アイコンをクリック。
2. 「新規作成」ボタンをクリック。
3. 宛先、件名、および本文を入力。
4. 「送信」ボタンをクリック。