Webページ作成の概略

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

Webページ作成の概略

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

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

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

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

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

atten検索エンジンのように、ユーザの入力したキーワードにより必要な情報(ページ)を表示したり、SOSEKIのように、ユーザが入力した情報をデータベースに登録したりするWebページは、Webページの作成方法が、上で説明したものとは異ります。このような「Webページを作成する」ためには、Webサーバ上で必要な処理(例えば、Webページを検索するというような処理)を行うプログラムや、HTMLファイルを自動作成するプログラムを作成する必要があります。そして、これらのプログラムがWebサーバ上で動いて、そのプログラムがHTML文書を自動作成します。

webappmech.swf

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

Copyright Hideki Matsuda 2005, All Rights Reserved
-->

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

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

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


注意して欲しいのは、一番右の列の「利用するアプリケーション」で、必要なアプリケーションが少ないことです。


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

atten今回の最後近くで「ファイル転送ソフトウェア」の使い方を実際に演習します。

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 2011, All Rights Reserved.