熊本大学大学院教授システム学専攻
目次:
【第6回】HTMLの基本文法、エディタ、メタ情報
第1章
第3章
第4章
第5章
第6章

Webページ作成の概略

【本節の目的】
Webページを作成する方法の概略とその手順を理解する。

Webページ作成の概略

前章のWWWの仕組みで説明しましたように、我々が見ている「Webページ」は、 「Webサーバ上にある各種ファイル(リソース)を、 ネットワークを介して我々の利用しているPC(クライアント)に取り込み、 WebブラウザでHTMLで指示された書式に従ってレイアウトされたもの」 ということになります。

WWWの仕組みがわかったところで、「Webページの作成」とは、何を行うことなのかを考えてみましょう。
大まかには、以下のことを行うことになります。

  1. Webページに必要なHTMLファイルや、 画像などのデータファイルをPC上で作成する
  2. 完成した各種ファイルをWebサーバの決められたフォルダに格納する

つまり、ほとんどの作業は自分のPCで行うことになります。

ところで、 上記ではあまりにも大まかすぎて具体的に何をすれば良いのか分りませんね。 そこで、もう少し具体的な作業内容を以下に示します。

  1. PC上での各種作業
  1. Webページにする文書をHTMLファイルとして作成する。 その際には、文章の中味だけでなく、以下のことに「指示」を行う必要があります。 「指示」は、HTML言語で決められた「タグ」を用いて行うことになります。
    • 見出しをつけたりパラグラフ(文節)に分けるなど、文の構成を明確にする指示を行う
    • 必要があれば、箇条書きや表組みをする指示を行う
    • 必要な静止画や動画など文字以外のデータを取りこむ(表示する)指示を行う
    • 必要があれば、他のWebページやインターネット上の各種データへのハイパーリンクを張る指示を行う
  2. 上記 HTMLファイルに取りこむ(そのページ内に表示する)静止画や動画等のデータを作成する
  3. 文字の大きさや色、背景色、また余白や画像の大きさなど、 Webページの見栄えの設定・改善をおこなう
  4. 必要があれば、作成したWebページを閲覧して下さる方のマウス操作等で、 Webページが変化するようなプログラムをHTMLファイルに付加する
  1. 完成したHTMLファイルや各種データファイルを、 Webサーバの決められたフォルダに格納する(ネットワーク経由で送る)
(註) 検索エンジンのように、 ユーザの入力したキーワードにより必要な情報(ページ)を表示したり、 SOSEKIのように、 ユーザが入力した情報をデータベースに登録したりするWebページは、 Webページの作成方法が、上で説明したものとは異なります。 このような「Webページを作成する」ためには、 Webサーバ上で必要な処理 (例えば、Webページを検索するというような処理)を行うプログラムや、 HTMLファイルを自動作成するプログラムを作成する必要があります。 そして、これらのプログラムがWebサーバ上で動いて、 そのプログラムが HTML文書を自動作成します。 以下の動画で、動作を確認して下さい。 (公開科目では、動画は非表示にしています。)
このようなWebページの作成については、 本科目では取り扱いません。

Webページ作成時に、具体的に作るファイル及びそれらを作るアプリケーション

Webページ作成時に作るファイルと、それらを作るためのアプリケーションを、 前節の作成過程に対応付けたものを以下に示します。 (「ファイルの種類」の列には、見馴れない言葉が並んでいますが、 現時点では読みとばして下さい。本科目を修了するときには、 すべて把握できるようになっているはずです。)

作業内容 ファイルの種類 利用するアプリケーション
1.a Webページの基本構成 HTMLファイル (テキストファイル) テキストエディタ
1.b 画像など各種データ作成 画像ファイル等 (バイナリファイル) 作図アプリケーション等
1.c 見栄えの設定・改善 cssファイル (テキストファイル) テキストエディタ
1.d ブラウザ用プログラム作成 javascriptファイル (テキストファイル) テキストエディタ
2. Webサーバへ転送 (上記で作成したすべてのファイル) ファイル転送ソフトウェア

注意して欲しいのは、一番右の列の「利用するアプリケーション」で、 必要なアプリケーションが少ないことです。
たくさん現われる「テキストエディタ」については、 ワードプロセッサの時間に説明しましたように、 文字情報の入力・編集(コピー、ペースト、検索、置換等)を行うものです。 ワードプロセッサが使える皆さんにとっては、利用法は説明するまでもないでしょう。 「作図アプリケーション」は、 ペイント系やドロー系の画像、 及びそれらを作成するアプリケーションの使い方を練習しましたのでそれで充分です。 ということは、 Webページを作成するアプリケーションソフトとしては、 「ファイル転送ソフトウェア」だけを勉強すれば良いということになります。 (安心しましたか?)

従って、「Webページを作成し情報発信すること」を大きな柱とした本科目では、 「アプリケーションプログラムの利用方法の習得」が、 主な目的ではないことに注意して下さい。 それ以外に、たくさん習得すべき内容があるということです。


Webページ関連ファイルの作成とWebページとしての確認

これまでに、 Webページを作成するにはどのようなことを行う必要があるかを説明してきましたが、 ここでは、実際に作成を行う場面のイメージをつかみましょう。

Webページ作成過程は、今まで学習した作業過程と少し異なっています。 それは、これまで皆さんが利用してきた各種アプリケーションが、 「見たままが、(最終的に)手に入るもの (What You See Is What You Get; WYSIWYG(ウィジウィグ))」 であったのに対し、Webページ作成は、 「現在見ているもの(作成しているファイル)と、 最終的に手に入る(表示される)ものが異る」 ということによります。 これは、一つのアプリケーションソフトだけでは、 Webページを作成できないということになります。

例えば、ワープロソフトを考えてみると、 ワープロソフトの最終的な形(手に入るもの)は、 印刷結果、もしくはワープロのファイルそのものでしょう。 もし、(最終的に)箇条書きにするのであれば、 作成時も箇条書きになって表示されています。 (皆さんにとっては、あたりまえですね。)

ところが、Webページ(HTMLファイル等)作成時はこうはなりません。下図を見て下さい。 左側がWebページ(HTMLファイル)作成時で、 右側が作成されたWebページをWebブラウザで閲覧しているところです。 随分様子が違うでしょう?

つまり、作成するアプリケーション(一般にテキストエディタ)と、 作成物を見るアプリケーション(Webブラウザ)が異るわけです。

これでは大変!と思われるかもしれませんが、心配することはありません。 Webページ作成時には、常にWebブラウザを起動しておき、 Webページの作成が少し進んだら、Webブラウザで確認すれば良いのです。 単に保存したファイルを、Webブラウザで読みこむだけです。

つまり、Webページ作成過程では、「HTML等のファイル作成」と 「作成したファイルをWebブラウザで確認」 を交互に行う必要があるということになります。

まずは、これを認識してください。 更に、 最終的には作成した各種ファイルをWebサーバへ送る(格納する)必要がありますので、 これも忘れないようにしてください。Webサーバへ送った後も、 うまく表示されるか、再度Webブラウザで確認することも忘れないように。

Copyright Kenichi Sugitani 2005, All Rights Reserved