今回と次回は、学内の情報系Ｗｅｂサーバーに、皆さんのＷｅｂサイト(Webページ）を作ります。インターネットでの情報発信です。そして、1年後期の「数値解析・数値計算実習」では、レポートをWebページで発信してもらう予定です。
既にインターネットのページを使って、授業の中でも、この授業のページや、ソフトのベンダーのページを参照したり、Photoshopでは写真を見たりしています。今度は、皆さんからの情報発信の実習です。これら、学校でのWebページの利用・作成では、「インターネット利用のガイドライン」(平成10年度兵庫県インターネット利用推進協力者会議 )などを参照して、著作権やプライバシーの保護などに注意することが、必要です。
今回は、WebとHTML、Webページデザインの概要の説明と、テキストエディタAZUKIでのＨＴＭＬファイルの作成とＷｅｂサーバーへのファイル転送ソフトffftpを紹介します。次回は、２コマ目にWISWIGで編集できるWebページ作成･サイト管理ソフトDreamweaverを紹介します。３コマ目に筆記試験を行います。
インターットでのWebページは、Webサーバー側でのWWWサーバー(情報技術科のWebサーバーは、現在OSがRedhatLinuxでのApache）と、ネットワーク接続のクライアントＰＣ側でのWebブラウザ（教室ではMicrosoft Internet Explorer）との通信により、見ることができています(「オフライン作業」は、ブラウザのみの処理）。なお、学内では、途中に、プロキシサーバーがあり、外のサイトとは、これを経由して接続しています。
情報発信のためには、Webサーバー側のユーザごとの所定フォルダ(たとえばpublic_html)に、それぞれのWebページ(Webサイト）のファイルやフォルダを送受信(ftp、アップロード・ダウンロード)する必要があります。そのために、ftpソフトが、サーバー側(FTPサーバー)とクライアントＰＣ側に必要です。
Ｗｅｂサイトの構成は、トップページのindex.htmlファイルとそこからのハイパーリンクによります。各ページは、HTML、XHTML、XMLとXSLTなどの言語とJavaScriptなどの言語でテキストで書かれています。画像や音声などは、圧縮したファイル形式で作り、htmlファイルからリンクされます。
好ましいHTML文書の書き方などＨＴＭＬの書き方についてのページリンクを参照のこと。そこにあるが、「ごく簡単なHTMLの説明 (神崎正英さん)」が分かりやすい。小生は、スタイルシートを使って、書式などを別に先頭部分で定義するようにしている。
HTML仕様については、参考書やWebでのレファレンスがあるので、それらを利用できます。仕様とそのタグの使用例などがあります。なお、今後の動向は、xmlとの関連から、XHTMLに移行していくと思います。
addressタグを各ページの先頭か最後に付けること。ここには、作者と更新日付、戻るページのリンク、メールアドレスなどを表示します。この例は、小生のこのページなどを参考にして下さい。
HTMLファイルのテキスト(HTML実例）は、実際のＷｅｂページを開いて、ブラウザのメニューで「表示」→「ソース」をクリックすれば、メモ帳が起動して、開いているhtmlファイルのソース（HTML内容）を見ることが出来ます。そのファイルの保存は、ブラウザで「ファイル」→「名前を付けて保存」で、そのページの一式のファイル類が、ローカルのファイル(及びフォルダ）として保存できます。（ただし、リンク先フィアル類は、そこでまた別途、保存することが必要。）
Ｗｅｂページの構成で、トップページの名前は固定です。(情報系Ｗｅｂサーバーでも、一般の約束事にならっています。）
(トップ ページ）index.html(固定）
これが、一番最初に開かれるページです。ここから、内容毎に分けたページへのハイパーリンクをつくります。
(トップからリンクするページ）トップページ（などリンク元で）リンクを指定したファイル名(フォルダを作ってよい。）
なお、Webページのファイル名は、半角で小文字の英数字など。空白は使えない。そして、リンク指定のパスは、リンク元ページからの相対パスとすること。
(これらの理由は、ローカルでのファイル構成と同じ物を、UNIXなどで動くＷｅｂサーバーに転送するため。）
(注１）リンクするHTMLファイルは、表現する内容ごとに別のファイル・フォルダとするが良い。
(注２）HTMLファイル名は、半角の小文字の英数字と下線などが良い。(日本語や空白、大文字と小文字不一致は、Webサーバでは、リンクエラーとなる。）
Ｗｅｂサイトの構成とそのページレイアウトは、さまざまです。普通は、たどりやすい構成（サイトマップの追加）、読みやすく、軽いページ、顧客重視度（意見を送ることができる電子メールアドレスの記載）などが求められます。
Webページの評価ポイント(Kazuo Kawai)を紹介します。このページには、次のパラグラフに紹介するページなど「WWW上にあるWebページデザイン関連のサイト」のリンクがあります。(2001.9.29)
アクセシビリティもあります。アクセシビリティとは、運動、視覚、および聴覚の障害を含む、障害のある方がそのソフトウェア プロダクトを使用できるかどうかということを指します。
企業の場合、そのＷｅｂページから、何らかの効果が得られることが求められます。（たとえば、それから、見込み客が見つかるとか、求人に対して応募者が見つかるとか）｡インターネット通販では、どんなＷｅｂページが良いのかについて、「年間３万円で成功したスーパーインターネット通販」（フォレスト出版）があります。この本の著者 岩上 誠のDee･Bee･total planのページは、顧客管理に役立ちます。
ローカル(と言っても、Webサーバでない：皆さんのホームドライブだが）に、上述のＷｅｂページ類をエディタAZUKIなどを使って作成する。作ったら、AZUKI内ブラウザで見え方やリンクを確認する。左下のアイコンをクリックしてエディタで修正し、AZUKI内ブラウザで確認することを繰り返す。完成したら、名前を付けて保存する。
AZUKIについて：フリーのHTMLエディタでいいものを見つけました(2000.4.13 古屋先生から）。HTMLのタグチェックまで行ってくれるスグレモノです。ブラウザ表示とテキスト表示の切り替え具合も素晴らしい。高橋先生も、使っておられました。
今日は,皆さんのトップページと自己紹介ページ、これまでのこの授業のまとめのページを、AZUKIを使って作ってください。
AZUKIの使い方は、そのソフトを起動して、ヘルプを参照のこと。
AZUKIで新規にWebぺージを作る場合は、以下のようになる。なお、フォントや色などの見栄えの指定は、スタイルシートを利用するのが望ましい。（１．２で紹介した「ごく簡単なHTMLの説明 (神崎正英さん)などを参照。）
１）ファイル−新規作成:テキスト編集窓が開く。 ２）HTMLタグ−ドキュメント-新規ページ：「新規ページ」ダイアログボックスが開く。 ３）メールアドレス欄に、アドレスを入力して、ＯＫ。：ページの骨格タブが出る。 ４）それぞれのタグの間に、文字を入力していく。 タグの追加は、「HTMLタグ」からのポイント後のクリックか タブ付きツールバーのアイコンからも指定できる。 <title>には、ブラウザのタイトルバーに出る文字。 <body>には、ページの本文を編集する。構成例を示す。 <address>２００１．９．１５ 作成</address> <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <p> 段落１</p> <a href="相対パス">リンク先の名前</a> <p> 段落２</p> <h2>中見出し２</h2> <p> 段落３</p> <p> 段落４</p> ・・・ ５）リンクなどでは、ダイアログボックスが出る。 それぞれに必要な項目を入力・指定してＯＫとする。 ６）ブラウザで確認する（ファイル−ブラウザで確認−内部ブラウザあるいは、I.E.） ７）名前を付けて保存する。
ローカルで完成したら、Ｗｅｂサーバへの送受信を行い、公開することになります。教室では、コマンドプロンプトでのftpのほかに、GUIで使える送受信ソフトffftpをインストール済みです。今回の実習では、後者のffftpを（ホスト設定して）使います。このソフト使い方の詳細は、起動後にヘルプを参照のこと。
ffftpでの操作の概要を以下に示す。 １）ffftpソフトを起動します。 ２）最初に、ホスト一覧の「新規ホスト」で、Webページの作成と更新の2.4《ホスト設定》を行います。 (以降の変更は、「設定変更」となる。） ３）設定したホストを選択して「接続」します。 ４）Webサーバの各自のホームディレクトリに接続したら、 初回だけ、Webサーバーの各自のホーム直下にディレクトリpublic_htmlを作ります。 （Webページの作成と更新の「2.5 ホストでのフォルダ作成」を参照。） ５）右側のホスト（各自のホームのpublic_html）に、左側のローカルのhtmlファイルやフォルダをアップロードします。 （Webページの作成と更新の「3.1 ftp（アップロード）」を参照。）
Ｗｅｂサーバへの転送が済んだら、情報系トップページからのリンクを確認します。意図したとおりに表示されるまで、htmlファイルの修正とアップロードを繰り返します。
WebサーバーのWebサイトの確認：情報系トップページで、各自の氏名をクリックします。すると、皆さんのアップロードしたトップページが表示されるはずです。そこから、さらにハイパーリンクで、作成・変更したページが意図したとおりに表示されましたか？
ローカルでのファイル類の修正とアップロード(上書きなど）：Webサーバーでの各自のサイト（トップページから目的のページまで）が正常に表示できるまで、ハイパーリンクやパス（フォルダ名やファイル名）のチェックを行い、ローカルのファイル類に必要な修正を行うこと。ファイル名では、空白、大文字と小文字の不一致、全角の文字(漢字）などがエラーになります。なお、ローカルファイルでの修正・（上書き）保存して、Webサーバーにアップロード後、ブラウザで確認する際には、ブラウザの「更新ボタン」をクリックする（あるいはF5を押す)こと。