HPってなんでできてるの

今回のテーマは「HP(ホームページ)ってなんでできてるの」です。そもそもなんでできているのかが分からないことには作りようがないですよね。そういう意味でも、作成の第一歩を踏み出すにあたっては今回のテーマが一番大切なことかもしれません。では順番に話をすすめていきましょう。

インターネットを始めて、最初に開いたのがこのページだ、って方は多分いないでしょうから、少し思い出してみてください。WEBページにもいろいろなページがありますよね。文書(文字)だけで構成されているページ、写真が掲載されているページ、開くと音楽が流れるページ、開くと動画が再生されるページ。本当に百ページ百様といった感じですが、これがHPってなんでできてるの、っていう質問の大きなヒントなのです。文字を書くのと同じ感覚で絵をかけるはずがありません。どうせでしたら、文書は文書でワープロソフトのようなもので作成して、絵は絵でお絵かきソフトのように、絵を描く専門のソフトをして作成した方が効率的ですよね。そうです。WEBページに貼り付けられている写真も音楽も動画も、全部別のファイルとして用意するのです。そして、これらたくさんの種類のファイルを同時に表示しているのがWEBページなのです。

ここで気になるのが、「じゃぁ、絵や音楽などのほかのファイルを何に貼り付けるの?」ということではないでしょうか。答えはもうすでに言っていますよね。

もう一度はっきりと言います。WEBページに貼り付けるのです。

ちょっと待ってください。「×ボタン」でこのページを閉じようとしたでしょう。もう少しだけお付き合いください。WEBページの元になるファイルは「HTMLファイル」と呼ばれています。このHTMLファイルに絵や音楽などのファイルを貼り付けていってWEBページを作るので、WEBページの正体はHTMLファイルだ、と言い切ってもいいでしょう。

今、(もう少しだけという期限付きで)見てもらっていますこのページも当然HTMLファイルでできています。ただ、HTMLファイルだけでは絵を表示することができませんので、HTMLファイルに絵を貼り付けてひとつのWEBページにしているのです。

もちろん、音楽をWEBページに貼り付けますと、開くと音がなるWEBページができあがりますし、特別なプログラムを貼り付けることによって、複雑な動きを見せるWEBページを作ることもできます。では実際にHTMLファイルがどのようなものか例を見てみましょう。

このページの題名は「○○」です。
ここには「○○」という絵を表示します。
ここからは文章です。
ようこそ私のほーむぺーじへ…
ここで文章は終わりです。
ここに横線を表示します。
以下の文字をクリックしたときに別のページへジャンプします。
Enter
ジャンプさせる文字はここまでです。

もちろん、こんな日本語だけで書かれているわけではありません。HTML専用の特別な記述方法があるのですが、それはおいおい説明していきます。今は、WEBページの正体は文字だけだということを覚えておいてください。

更に、HTMLファイルの中身は文字だけなのですが、大きく分けて2種類の文字から成り立っていることを覚えてもらいます。1つは実際に表示される文字で、今読んでもらっている文字がこれにあたります。もう1つは、先ほどの文字(文章)の意味を表すための文字です。ここは強く表現するべき文字、この文字は題名です、この文字は削除されました、などなどこちらの文字によって文章の中の文字の意味を表すことになります。そしてそれらの文字を読み込んで表示する(再生する)道具のことをWEBブラウザと呼んでいます。WEBブラウザはHTMLファイルの文字を、実際に表示させるための文字とその文字の意味を表すための文字とに切り分けて、文章の意味にしたがって文書を表示する機能を持っています。それだけではなく、HTMLファイルの中には「強く表現する部分は赤色に表示させる」などと言った見た目に関する情報も加えることができますので、WEBブラウザはこれらの情報をもとに文章の見た目を指定どおりに表示するのです。

HTMLファイル説明

少し難しいはなしではありますが、「WEBページの正体は文字だけだ」ということを理解してもらうのが今回のはなしの目的です。意味や見た目のことはもう少し後で詳しく説明をしますので、それまでは頭の片すみに置いておく程度で良いと思います。

貼り付けられている
実際には、「貼り付けられている」という表現は正しくないのですが、 一番しっくりとくる表現ですよね。 正確な語句を最初から覚える必要などありません。 最初は感覚を理解することから始めましょう。
HTMLファイル
HTMLは「HyperText Markup Language」の略で、「エイチティーエムエル」と発音します。HTML文書と呼ばれることもあります。
絵を表示することができません
HTMLだけで・・・というよりは文字だけで絵を描く芸術が AA【アスキーアート】と呼ばれるものです。 ちなみに下のようなものです。
        ∧ ∧___
     /(*゚ー゚)  /\
   /| ̄∪∪ ̄|\/
     |        |/
       ̄ ̄ ̄ ̄
特別な記述方法
このことを専門用語でHTMLタグと呼びます。 元々は「荷札」という意味ですが、インターネットの世界ではもちろん違います。 タグには「開始タグ」と「終了タグ」と呼ばれるものがあり、 この二つのタグで囲んだ部分にしるし(荷札)をつけることによって、 HTML文書内のさまざまな意味を決定しています。