TOP PAGE | ネット講座 | → | 第一回 |

ネット活用講座

第2回 「Webページって?」

文/イラスト:こうどう(テクニカルチーム)

はじめに

普段、みなさんが何気なく見ているインターネット上のWebページって、どのようなしくみで表示されているのでしょうか?また、Webページはどのように作られ、どのように皆さんが見られるように公開されているのでしょうか?

ということで、ネット活用講座 第2回は「Webページって?」ということで、Webページの表示のしくみや作り方についての説明をしていきたいと思います。

まずは、みなさんがこのページを読み始めて最初に疑問に思われていると思われる「ホームページ」という言葉と「Webページ」という言葉について説明します。日本では「ホームページ」という言葉でインターネット上の情報提供ページを表すのが一般的になっていますが、もともとは「ホームページ(Home Page)」とはブラウザ(後述)を立ち上げた時に最初に表示させるページを表します。ご使用されているブラウザがインターネットエクスプローラでも、ネットスケープナビゲーターでも、「ホーム」という言葉はブラウザ起動時に最初に最初に表示されるページを意味しています。

インターネット発祥の地の米国では、「ホーム」を指定すると普通は自分の作ったページ、もしくは自分が所属する団体等のページの玄関に相当するページを指定することから、そのページを「ホームページ」と呼ぶようになり、転じて個人や団体等のページを「○○のホームページ」と呼ぶようになりました。

ところがインターネット黎明期の日本のマスコミはWWWのことならなんでも「ホームページ」と呼べばよいと解釈し、誌面やTVで報道するようになってから和製英語化が始まったと言われています。

日本国内で定着している「ホームページ」という表記を否定するつもりはありませんが、「インターネット商店会」を名乗る以上は、ここは正統派で通していきたいと思います。

では、(国際的に)正しく表記するには何と呼んだらいいのでしょうか?
一般的には「Webページ」もしくは単に「ページ」と表現しているようですが、ここでは「インターネット上のWWWのページ」ということで、「Webページ」という表現で統一していきたいと思います。
また、「Webサイト」という言葉も時々耳にすることと思いますが、「Webサイト」という言葉は同一ドメイン下のWebページ全てを称する場合に使用されています。
「いいなぁ」の場合、今ご覧になっているページや、TOPページ単体を「Webページ」と呼び、「いいなぁ」のページの全てを称するときは、「Webサイト」と呼んでいきたいと思います。

Webってどうやって表示されるの?

このWebページをご覧になっている方は、当然、Webページを見られる環境をすでに持たれているわけです。では、あなたがこのWebページをご覧になっている環境はインターネットエクスプローラですか?それともネットスケープナビゲータですか?ひょっとしたらそれ以外の環境(TVゲーム、セットトップボックス、モバイルマシンetc.)かもしれませんね。

どんなアクセス環境であるにしろ、Webページを見るのに必要なのは「ブラウザ」というソフトウェアです。ブラウザはWebページをブラウズ(Browse:本を拾い読みする/図書館・書店であちこち本をのぞいてみる/商店で 品物をのぞく, ひやかす)するためのアプリケーションで、ブラウザ上で指定されたWebサーバー(Webページが保存されているコンピュータ)の情報を取得し、Webページの形に構成し表示するためのもので、インターネットエクスプローラを例にとってみると、そのしくみは下図の通りです。

(1) ブラウザで見たいWebページの所在地(URL)を指定します。

ドメイン名(第一回講座を参照)で指定されたURLは、どのIPアドレスのコンピュータかをDNS(ドメインネームシステム)サーバーに問い合わせが行われます。
DNSによる名前解決のしくみはこちらを参照してください。 DNSについて

(2) ユーザー側のコンピュータはWebサーバーに対し、見たいWebページのHTMLファイル等を要求し、Webサーバーは要求されたWebページのコンテンツ(HTMLファイル、イメージファイルなど)データを送信します。

(3) ブラウザは受信したHTMLファイルの内容をもとに画像ファイル等をWebページの形として構成して表示します。

このようなしくみでWebページは表示されています。(ちょっとわかりにくい?!)
Webページってどうやって作るの?
Webページは「HTML」(Hyper Text Markup Language)という、あるルール(最新ではHTML4.0)に従ったスクリプト(文字列)で記載され、スクリプト内で他のHTMLスクリプトや、イメージ、サウンド、ファイル等へのリンクを容易に行うことができます。
インターネットのWebページで、リンクをたどって次から次のページへと渡り歩くことができるのは、このHTMLのおかげです。

では、Webページを構成するHTMLスクリプトってどのように書かれているでしょうか?ちょっとした実習をしてみたいと思います。


まず、メモ帳やワープロソフトで、下の枠内の内容を入力して、『test.html』というファイル名で保存してみましょう。
といったアイコンで表示されるはずです。

<HTML>
<HEAD>
<TITLE>HTMLテスト</TITLE> </HEAD>
<BODY>
<H1>こんにちは</H1>
<HR>
これはHTMLテストです
</BODY>
</HTML>


次に、保存した『test.html』をダブルクリックしてみてください。インターネットエクスプローラやネットスケープナビゲータといったブラウザアプリケーションが立ち上がり、下のような表示を行うはずです。

枠内の文字列は、Webページのソース(源)です。<×××>・・・・</×××>という形で記載された記号はHTMLタグと呼ばれるもので、このタグにいろいろな機能があり、これらを組み合わせることでWebページはできています。
例外的ないくつかのタグ(上記例では<HR>)を除いて、タグは開くタグ(< >)と閉じるタグ(</ >)で1セットとなります。例えばタイトルを表すタグでは、
<TITLE>HTMLテスト</TITLE>と記載します。


今度は『test.html』に文字修飾、イメージ、表、ハイパーリンクを追加してみましょう。


主な文字修飾タグとして、以下のようなタグがあります。
<B>・・・</B> 太字(ボールド)
<I>・・・</I> 斜字(イタリック)
<U>・・・</U> 下線(アンダーライン)
<FONT>・・・</FONT> フォントサイズなどを指定
指定は<FONT SIZE=5 COLOR="#FF0000">
という形で行う。


また、イメージの貼り付けには<IMG>タグを用います。
ここでは、『 http://www.e-nakanoku.com/img/mark.jpg 』というアドレスに置かれている「ハート商品券」マークを貼り付けてみましょう。
この場合、タグは <IMG SRC="http://www.e-nakanoku.com/img/mark.jpg">と記載します。


次に作表ですが、作表で主に使われるタグには以下のようなものがあります。
<TABLE>・・・</TABLE> 一つの表(テーブル)を定義
<TR>・・・</TR> テーブルの行の開始/終了を定義
<TD>・・・</TD> テーブルのデータセルを定義
ということでテーブル部分についてだけのHTMLスクリプトのサンプルを書いてみたいと思います。

<TABLE BORDER=5>
<TR>
<TD>あいうえお</TD><TD>かきくけこ</TD><TD>さしすせそ</TD>
</TR>
<TR>
<TD>たちつてと</TD><TD>なにぬねの</TD><TD>はひふへほ</TD>
</TR>
<TR>
<TD>まみむめも</TD><TD>やいゆえよ</TD><TD>らりるれろ</TD>
</TR>
</TABLE>

このHTMLスクリプトを実行すると、ブラウザ上では下のように表示されます。

あいうえおかきくけこさしすせそ
たちつてとなにぬねのはひふへほ
まみむめもやいゆえよらりるれろ


ということで、これらのタグを組み合わせて、以下のようなHTMLソースを書いてみました。Webページとしてはどのような形で表示されるでしょうか?

<HTML>
<HEAD>
<TITLE>HTMLテスト2</TITLE>
</HEAD>
<BODY>
<H1>こんにちは</H1>
<HR>
<FONT SIZE="5" COLOR="#FF0000">これはHTMLテストです</FONT><BR>
太字の表示は<B>このようになります。</B><BR>
斜字の表示は<I>このようになります。</I><BR>
下線の表示は<U>このようになります。</U><BR>
<IMG SRC="http://www.e-nakanoku.com/img/mark.jpg">イメージ表示です。<BR>
<TABLE BORDER=5>
<TR>
<TD>咲いた</TD><TD>咲いた</TD><TD>チューリップの花が</TD>
</TR>
<TR>
<TD>並んだ</TD><TD>並んだ</TD><TD>あか・しろ・きいろ</TD>
</TR>
<TR>
<TD>どの花見ても</TD><TD>きれいだな</TD><TD>(おしまい)</TD>
</TR>
</TABLE>
</BODY>
</HTML>

このHTMLソースをブラウザで表示させるとこんな感じで表示されます。(↓)

ここでは、インターネットエクスプローラを例に説明しましたが、ネットスケープナビゲータでもこのレベルのソースであればほぼ同じように表示されるはずです。
ただし、もっと複雑なページになってくると、二つのブラウザのタグの解釈の違いにより、異なったイメージとなってしまうこともあります。

HTMLについて、ここで説明したことはほんのさわりの部分です。ご自分のWebページを作ってみようと思われる方は、やはりマニュアル本やWebページ作成アプリケーションなどを入手して、いろいろと試してみることが大事だと思います。
インターネット上のお助けWebページとしては、「とほほのWWW入門」をお勧めします。(私も愛用させてもらっています。)このページは、マニュアル本よりも内容が充実しており、こまめに更新されていること、そしてなによりもうれしいのは、コンテンツを丸ごとダウンロードさせてくれるしくみが作ってあることです。
丸ごとダウンロードして、いつでも参照できるようデスクトップにショートカットを置いておけば、マニュアル本なんかよりよっぽど便利かも知れません!!

Webページってどうやって公開するの?
Webページを公開するためには、まず公開するためのスペースを確保する必要があります。容量の違いはありますが、大抵5MB〜10MB程度のサーバー容量をWebページ用スペースとして、加入しているプロバイダから割り当てられているものと思います。(詳しくは加入されているプロバイダにお問い合わせください。)

このサーバー上の割り当てられたスペースに『FTP』( File Transfer Protocol )というファイル転送手順を用いてPC上で作成したHTMLソースやイメージファイルなどを送り込んでいきます。

と書くとすごく難しそうなことをやらなければならないように聞こえますが、FTPによるファイル転送用アプリケーションとして、使い勝手の良いフリーウェア、シェアウェアがいろいろありますので、こういったツールを使えば、PC上のフォルダ間でファイルの移動を行うのと同じような感覚で、PC−サーバー間でファイルの転送を行うことが可能です。

私が使用しているのは、『 FTP Explorer 』というシェアウェア(個人利用はフリー!)ですが、Windows のエクスプローラのようにサーバー上のフォルダが階層状に表示されるので、フォルダ構成が判りやすく、またファイルの転送も簡単です



FTP Explorer | ダウンロードは窓の杜から

こうしてFTPでプロバイダが指定したサーバー上のフォルダにTOPページを「 index.htm 」または「 index.html 」というファイル名として転送することで、Webページの公開は完了です。あとは、知り合いに宣伝したり、サーチエンジンに登録したりすることで、アクセス数を増やしていきます。


今回は『Webページって?』というタイトルで書いてみましたが、またも、かなり堅苦しい内容となってしまいましたが、いかがでしょうか?
でも、こういった『しくみ』の部分が解っていると、実用面の解説でも理解、応用が容易になると思います。ということで、次回の第3回までは堅苦しい話が続いてしまうことと思いますが、おつき合いいただければうれしいです。

第3回は「E−Mailのしくみと使い方」です。

このページについてのご意見、ご要望はinfo@e-nakanoku.comまで。

bottom