遊方流「我家頁（ホームページ）」のつくりかた[暫定版]
■ホームページの実体
ホームページの実体は、インターネット・プロバイダが所有するサーバー・コンピュータのディスク内に保存されたデータ（ファイル）の一種に過ぎません。
このファイルは、HTMLという形式で書かれ、Netscapeやインターネット・エクスプローラーなどのWebブラウザでこのファイルを見ると、本のページと同じように文字や図や写真が含まれた、ホームページとして見ることができるのです。
■すぐに作れます
インターネット上でなく、あなたのパソコン内であればすぐに作れます。
ホームページといってもそんなに難しいものではありません。ここで紹介する程度の内容であれば、すぐにできてしまいます。
エディタまたはワープロ（Windows95のアクセサリに含まれるワードパッドも可）さえあればいいのです。
■ホームページの作り方
ページの内容はHTMLの書式にしたがって記述します．
HTMLというのは，HyperText Markup Languageの略で，ハイーパーテキスト（普通のテキストを超えるテキスト）のマークアップ（書式指定）のための言語といった意味になります．普通のテキストにない代表的な働きとしては，情報の参照のためのリンク機能があります．
ただし言語といっても，そんなに難しいものではなく，機能の目印になる「タグ」と呼ばれる命令の意味さえ分かれば簡単に作れます．
なお，HTMLの内容自体は，単なる文字情報のみのテキストファイルとして作成します．
ページの構成としては，手紙でも「前文」「主文」「末文」と分けられるように，大まかには次のようにすればよいと思いますが，これにこだわる必要はありません．
@見出し（タイトル）
A本体（内容）
B補足的な情報
■HTMLの約束事
HTMLファイルを作る上での代表的な約束事は次のとおりです。
これ以外については、HTMLあるいはホームページ作成に関する書籍や雑誌を参考にしてください。
■例題１（シンプル・ホームページ）
それでは，非常に簡単なページを作ってみましょう．まず、 例題１のホームページを確認しましょう。
エディタを使って，たとえば「simple.html」という名前のファイルを作り，次のように入力します．ワードパッドなどのワープロで作る場合には，保存時の「ファイルの種類」に「テキスト文書」と指定してください．
| <HTML> <HEAD> <TITLE> Simple Home Page </TITLE> </HEAD> <BODY> シンプル・ホームページ </BODY> </HTML> |
上の内容をコピーして、エディタなどで貼り付ける方法でも、簡単に作成できますので試してみてください。
各行の内容を説明します。ただし、これには説明が入っているのでHTMLファイルとしては使えません。
| <HTML> …HTMLファイルの始まりを示す。 <HEAD> …ページ文頭の始まりを示す。 <TITLE> …タイトルの始まりを示す。 Simple Home Page …これがブラウザのタイトルに表示される。 </TITLE> …タイトルの終わりを示す。 </HEAD> …ページ文頭の終わりを示す。 <BODY> …ページの本体部分の始まりを示す。 シンプル・ホームページ …これがページの内容として表示される。 </BODY> …ページの本体部分の終わりを示す。 </HTML> …HTMLファイルの終わりを示す。 |
■ホームページを確認しよう
それでは早速，WWWブラウザ（このコーナーでは、Netscape2.01I[JA]を例にして説明します）で確認してみましょう．
[1] [ファイル]メニューから[ファイルを開く]を選択します．
[2] 先ほど作った「simple.html」を指定して，[開く]をクリックします．
[3] 「シンプル・ホームページ」と表示されます．
このように，HTMLの形式で書いてあるファイルをWWWブラウザで見るだけなら，インターネットにつながっている必要はありません（ただし，インターネット上のホームページを見ることはできません）．
■ホームページの素材
文字情報以外のデータを含むホームページの作成のためには、ホームページに載せる素材を作るためのツールが必要になってきますが，それはどのような内容（コンテンツといいます）を盛り込むかによって変わってきます．
画像データとしては、GIF、JPEG等を使います。ここでは、GIFファイルを対象にします。
たとえば，次のようなものがあると便利です．
・イラストを入れるならペイント・ソフト
Windows95の「ペイント」でもかまいませんが、GIFファイルに変換する必要があります。
自分で作る場合には必要ですが，とりあえず市販の素材集のデータのみを使う場合にはなくても困りません．
・写真を入れるならデジタル・カメラやスキャナ
オリジナルなデータを作る場合には不可欠です．
・画像処理を行なうソフト
効果的な画像を作る場合に必要です．私の場合は，「Paint Shop Pro」を使用しています．
■例題２（イメージを含むホームページ）
イメージ（画像データ）を含むホームページを作ってみます。まず、 例題２ホームページを確認しましょう。
適当なGIFファイルを用意してください。
適当なGIFファイルが手元にない人は、次の画像の上で右クリックして、画像を保存してください。[画像を名前を付けて保存]を選択し、適当なフォルダに「TITLE.GIF」という名前で保存します。
タイトルに画像を貼り付けたホームページの例です。
<IMG SRC="title.gif">で、「title.gif」という名前の画像の貼り付けを指定します。
| <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <BODY> <CENTER> <IMG SRC="title.gif"> <P> <H1> 我が家のホームページへようこそ！ </H1> </CENTER> <P> このページは、例題２のホームページです。 </BODY> </HTML> |
各行の内容を説明します。
| <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <BODY> <CENTER> …中央揃えの始まりを示す。 <IMG SRC="title.gif"> …イメージ・データの取り込みを示す。 <P> …段落をつくる。 <H1> …サイズ１の見出しの始まりを示す。 我が家のホームページへようこそ！ </H1> …サイズ１の見出しの終わりを示す。 </CENTER> …中央揃えの終わりを示す。 <P> このページは、例題２のホームページです。 </BODY> </HTML> |
■ソース表示
一番最初にも説明したように、ホームページの実体はHTMLの形式にしたがって書かれた単なるテキスト・データです。HTMLデータをブラウザの機能で見るとホームページとして見ることができますが、エディタの機能で見るとホームページのソース（元の）データを見ることができます。この機能がソース表示です。
それでは、今ご覧のこのページ自体のHTMLソースを見てみましょう。[表示]-[
文書のソース]コマンドを選択します。
どうですか？
これで、他の人のホームページ作成テクニックを参考にすることができるようになります。
■例題３（複数のページからなるホームページ）
ホームページの最大の特長であるリンク機能を使うには、リンクでつなげたい部分を<A
HREF="リンク先">と</A>で囲みます。イメージ・データを囲むことも可能です。
スタート・ページ（ホームページの先頭ページ）からサブのページにリンクし、再びスタート・ページに戻るホームページを作ってみましょう。まず、
例題３のホームページを確認しましょう。
@スタート・ページ（start.html）
| <HTML> <HEAD> <TITLE>Start Page</TITLE> </HEAD> <BODY> ここは、スタート・ページです。 <BR> <A HREF="sub.html">サブ・ページへ飛びます。</A> </BODY> </HTML> |
Aサブ・ページ（sub.html）
| <HTML> <HEAD> <TITLE>Sub Page</TITLE> </HEAD> <BODY> ここは、サブ・ページです。 <BR> <A HREF="start.html">スタート・ページへ戻ります。</A> </BODY> </HTML> |
■アイデア次第
このコーナーでは、ごく簡単なホームページの作り方を紹介しました。ホームページはアイデアが勝負です。がんばって、本格的なホームページ作りに挑戦してみてください。
素敵なページができましたら、メールをください。
参考文献： パソコン雑誌I/O（工学社）1996年9月号 連載記事「電窓倶楽部」内田保雄
