とにかく作ってみよう

ホームページを作成するには次のような方法があります。

知人やホームページ作成業者に依頼する

有料でホームページ作成を代行する多くの業者があります。会社のホームページを作成する場合など、下手に自分や社員で作成するよりもプロに依頼したほうが安上がりな場合もあります。ただし、作成後の保守や改版についての取り決めを明確にしておくことをお勧めします。

私がお気に入りの作成代行業者として「At, inc.」さんがあります。このサイトのスポンサーだからという訳でなく、本当にお気に入りですので、一度のぞいてみてください。
ホームページ作成ソフトで作成する

ホームページを作成支援するソフトが各社から発売されています。フリーのものやシェアウェアなどもあります。「とほほの厳選ツール集(HTMLエディタ編)」を参照してください。
テキストエディタで作成する

ホームページは HTML という言語を用いて記述しますが、それほど難しいものではありません。ここでは、最後のHTMLを理解してテキストエディタで作成するための手順を紹介します。

ホームページを作成するのに多くのものは要りません。ちょっとした勇気と下記の2つのツールです。

ブラウザ

ブラウザとは、あなたがこのページを見ている時に使用しているようなソフトウェアです。今では大半の人が Microsoft の Internet Explorer を利用しています。以後の説明では Internet Explorer のことを IE と表記します。
テキストエディタ

Windows の場合はメモ帳（[スタート]→[すべてのプログラム(P)]→[アクセサリ]→[メモ帳]）、Macintosh の場合は SimpleText があれば充分です。

これ以降の説明では、「Windows XP」で「Internet Explorer 6.0」と「メモ帳」を用いた例を示します。Macintosh の場合や、Netscape ブラウザの場合でもメニューの名前が若干異なる（例えば [上書き保存] が単なる [保存] であるなど）場合がありますが、適切に読み替えてください。

■ まず、フォルダを作ろう

まず、今から作成する各種ファイルを格納するためのフォルダを作成します。例えば、[マイドキュメント] の下に HomePage という名前のフォルダを作成するには次のようにします。

[スタート]→[すべてのプログラム(P)]→[アクセサリ]→[エクスプローラ] でエクスプローラ(※)を起動してください。
左側のツリーで [マイドキュメント] を選択した状態で、メニューから [ファイル(F)]→[新規作成(W)]→[フォルダ(F)] を実行してください。
[新しいフォルダ] が作成されます。[ファイル(F)]→[名前の変更(M)] で、フォルダの名前を「新しいフォルダ」から「HomePage」に変更してください。

※ インターネットエクスプローラとエクスプローラは別物です。インターネットエクスプローラはホームページを表示します。エクスプローラはディスク上のファイルやフォルダを表示します。

■ 拡張子を表示しておこう

ホームページの作成において、拡張子（ファイル名末尾の .txt や .htm などの文字）は非常に重要です。下記の手順で拡張子を表示するモードに変更しておくことを強く推奨します。

エクスプローラの [ツール(T)]→[フォルダオプション(O)...] を実行してください。
[表示] タブの中の [登録されている（ファイルの）拡張子は表示しない] をオフにして [OK] ボタンを押してください。

■ テキストエディタでHTMLを書いてみよう

メモ帳などのテキストエディタで HTML 文書を作成します。テキストエディタであれば [メモ帳] 以外でも構いません。Word などのワープロを用いる場合は、保存時にテキストファイルとして保存する必要があります。

[スタート]→[すべてのプログラム(P)]→[アクセサリ]→[メモ帳] を起動してください。

メモ帳に次の文章を入力してください。

<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>

これを、[マイドキュメント] の下の [HomePage] フォルダの下に test.htm という名前で保存します。

メモ帳の [ファイル(F)]→[名前を付けて保存(A)] を実行してください。
[マイドキュメント] の中から先ほど作成した HomePage フォルダをダブルクリックしてください。
[ファイル名(N)] に test.htm と入力し、[保存(S)] ボタンを押してください。

ファイル名が test.htm.txt になってしまう場合は、メモ帳の [名前を付けて保存] で、"test.htm" のように、ファイル名を "..." で囲んでみてください。

■ ファイル名に関する注意

ホームページで作成する HTML文書や画像ファイルのファイル名は、以下の点に注意してください。

基本的に 半角英数字 のみを用いる。
使用可能な記号はドット（.）、ハイフン（-）、アンダーバー（_）程度。
スペース文字を含んだファイル名は使用しない。
大文字・小文字をちゃんと使い分ける。

○ test.html
○ test-page.html
× test&page.html
× テスト.html
× Test Page.html

Windows で作成しているときは test.html も TEST.html も同じファイルとみなされますが、サーバーにアップロードすると別のファイルとして扱われることがあります。大文字と小文字の使い分け に注意しましょう。

■ 拡張子に関する注意

HTML 文書の拡張子は通常 .html なのですが、Windows 3.1 など古いシステムで拡張子に 3文字しか使用できなかったことから、未だに、Windows では .htm とするケースが多いようです。基本的には .htm でも .html でもどちらでも構いません。

○ test.htm
○ test.html

■ ブラウザで表示してみよう

今作成した test.htm をブラウザで表示してみましょう。

ブラウザ（IE6.0 とします）を起動してください。[スタート]-[すべてのプログラム(P)]-[Internet Explorer] などから起動することができます。
ブラウザ（IE6.0）の [ファイル(F)]→[開く(O)...]→[参照(R)...] で、[マイドキュメント]の中の HomePage の中の test.htm を選択して [開く(O)] ボタンを押してください。

■ メモ帳

ファイル(F) 編集(E)...

<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>

■ Internet Explorer
ファイル(F) 編集(E) 表示(V) ...	●
← → × ○ □ ...
初めてのホームページです。
□

「初めてのホームページです。」という文章が表示されていると思います。これで、とりあえずは、初めてのホームページの完成です。

■ 修正してみよう

「初めてのホームページです。」という文章を修正してみましょう。test.htm のファイルをダブルクリックするとブラウザが起動しますが、修正はブラウザではなく、[メモ帳] などのテキストエディタで行います。test.htm のファイルをメモ帳で開くには次のような方法があります。

[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳] と、[スタート]→[すべてのプログラム]→[アクセサリ]→[エクスプローラ] を起動し、エクスプローラからメモ帳に、test.htm ファイルをドラッグ＆ドロップ（マウスでつかんで移動して放す）する。
メモ帳を起動し、[ファイル(F)]→[開く(O)] で [ファイルの種類(T)] を [すべてのファイル] または [すべて(*.*)]に変更し、test.htm ファイルを選択して開く。
[スタート]→[すべてのプログラム]→[アクセサリ]→[エクスプローラ]で test.htm ファイルをマウスで右クリックし、ポップアップメニューから [プログラムから開く]→[Notepad(メモ帳)] で開いて編集する。

メモ帳で test.htm を開くことができたら、次のようにして内容を修正してください。

メモ帳で、文章を次のように修正する。

<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
私の初めてのホームページです。
</body>
</html>

修正したテキストを、[ファイル(F)]→[上書き保存(S)] で保存する。
ブラウザで再度 test.htm を表示してみましょう。すでに表示したままだったら、ブラウザのメニューから [表示(V)]→[最新の情報に更新(R)] を実行してください。

メモ帳で修正した内容が、ブラウザに反映されていれば OK です。

■ 改行してみよう

「私の」と「初めてのホームページです」の間に改行を入れてみましょう。

私の
初めてのホームページです。

ところが、これをブラウザで再表示（[最新の情報に更新]）しても、うまく改行できていません。まったく改行されないか、ブラウザによっては、「私の初めてのホームページです。」のように多少の隙間があくだけです。改行を行うには次のように修正して保存、再表示してください。

私の<br>初めてのホームページです。

今度はちゃんと改行されるはずです。 は break の略で、改行しろという命令のようなものです。

■ 太字にしてみよう

今度は「ホームページ」を太字にしてみましょう。

私の初めての<b>ホームページ</b>です。

ブラウザで再表示すると、「ホームページ」が太字で表示されます。 は bold の略で、～ までを太字にしろという命令です。同様に、～ で囲めば斜体文字（Italic）になります。

■ 色を変えてみよう

今度は「ホームページ」を赤色にしてみましょう。

私の初めての<font color=red>ホームページ</font>です。

ブラウザで再表示すると、「ホームページ」が赤字で表示されます。