ホームページ作成ソフトで作成
ホームページビルダーやFront Pageなどのホームページを作成支援するソフトが各社から発売されています。フリーのものやシェアウェアなどもあります。
テキストエディタで作成
ホームページは HTML という言語を用いて書きますが、それほど難しくありません。ここでは、HTMLを理解しながら、テキストエディタで作成する方法を紹介します。
ホームページを作成するにはメモ帳とブラウザがあればOKです。
ブラウザ
Internet Explorer などのブラウザを使用していると思いますが、これで十分です。この説明では、Internet Explorer のことを IE と書きます。
メモ帳
Windows の場合はメモ帳（[スタート]→[プログラム]→[アクセサリ]→[メモ帳]）、Macintosh の場合は SimpleText があれば充分です。
これ以降の説明では、「Windows」で「Internet Explorer」と「メモ帳」を用いた例を示します。Macintosh の場合や、Netscape ブラウザの場合でもメニューの名前が若干異なる（例えば [上書き保存] が [保存] ）場合がありますが、読み替えてください。
これから作成する各種ファイルを格納するフォルダを作成します。例えば、C: ドライブの直下にHPという名前のフォルダ（C:\HP）を作成するには以下のようにします。
- [スタート]→[プログラム]→[エクスプローラ] または [スタート]→[すべてのプログラム]→[アクセサリ]→[エクスプローラ] でエクスプローラを起動します。
- [マイコンピュータ] の中の [ローカルディスク (C:)] を選択してください。
- エクスプローラのメニューから [ファイル]→[新規作成]→[フォルダ] を実行します。
- [新しいフォルダ] が作成されます。[ファイル]→[名前の変更] で、フォルダの名前を HPに変更してください。
ホームページを作成する場合、拡張子（ファイル名末尾の .txt や .htm などの文字）は非常に重要で、正しく記述しないとブラウザでホームページ文書として認識されません。次の方法で拡張子を表示するモードに変更してください。
- エクスプローラの [ツール]→[フォルダオプション] (Winddows 98では[表示]→[フォルダオプション] )を実行。
- [表示] タブの中の [登録されている（ファイルの）拡張子は表示しない] をオフにして [OK] ボタンを押す。
クリックすると拡大します
メモ帳で HTML 文書を作成します。Word などのソフトを使用する場合は、保存時にテキストファイルとして保存し、拡張子は .htm または .htmlで保存してください。
- [スタート]→[プログラム]→[アクセサリ]→[メモ帳] を起動します。
- メモ帳に次のように入力します。
<html>
<head>
<title>ホームページの作成</title>
</head>
<body>
私のホームページです。
</body>
</html>
メモ帳で入力
これを、C:\HP フォルダに test.html という名前で保存します。
- メモ帳の [ファイル]→[名前を付けて保存] を実行してください。
- ファイル選択ダイアログが表示されるので、フォルダ（C:\HP ）に移動します。
- [ファイル名] に test.htm と入力し、[保存] ボタンを押します。
ファイル名が test.htm.txt になってしまう場合は、メモ帳の [名前を付けて保存] で、"test.html" のように、ファイル名を " " で囲んでください。
メモ帳で入力したファイルを保存する
クリックすると拡大
ホームページで作成する htmlML文書や画像ファイルのファイル名は、以下の点に注意してください。
- 半角英数字を使用する。
- 使用可能な記号はドット（.）、ハイフン（-）、アンダーバー（_）程度。
- スペース文字を含んだファイル名は使用しない。日本語は使用しない。
- 大文字・小文字をちゃんと使い分ける。
○ test.html
○ test-page.html
× test&page.html
× ホーム＠ページ.html
× Home Page.html
Windows で作成しているときは test.html も TEST.html も同じファイルとみなされますが、WWWサーバーにアップロードすると別のファイルとして認識される場合があり、大文字、小文字を間違えただけで表示されない場合があるので注意してください。大文字と小文字の使い分け に注意すること。しばらくのあいだファイル名はすべて小文字で書くのがよいでしょう
HTML 文書の拡張子は通常 .html なのですが、Windows 3.1 など古いシステムで拡張子に 3文字しか使えない時代があったので、Windows では .htm でも使えます。拡張子は .htm でも .html でもどちらでも使えますが、どちらかに統一したほうが、「作成したが表示されない」事故を防げます。
○ test.htm
○ test.html
作成した test.htm をブラウザで表示する。
- ブラウザ（IE とします）を起動。
- [ファイル]→[開く]→[参照] で、目的のフォルダに移動して、test.htm を選択し [開く] ボタンを押す。
ブラウザで表示
「私のホームページです。」という文章が表示されます。第一歩が完成しました。
「私のホームページです。」という文章を修正します。test.htm のファイルをダブルクリックするとブラウザが起動しますが、修正はブラウザではなく、[メモ帳] などのテキストエディタで行います。
- IEで表示した状態で画面を右クリックして表示されたメニューから[ソースの表示]をクリックするとメモ帳が起動されます。
メモ帳で test.htm を開いたら、次のようにして修正します。
- メモ帳で、次のように修正する。
<html>
<head>
<title>ホームページの修正</title>
</head>
<body>
私のホームページです。
</body>
</html>
- 修正したファイルを、[ファイル]→[上書き保存] で保存します。
- ブラウザで再度 test.htm を表示します。表示した状態の場合は、ブラウザのメニューから [表示]→[最新の情報に更新] をクリックして実行します。
メモ帳で修正した内容が、ブラウザに反映されれば OK です。
「私」と「のホームページです」の間に改行を入れます。
私の
私のホームページです。
ところが、これをブラウザで再表示（[最新の情報に更新]）しても、うまく改行できていません。まったく改行されないか、ブラウザによっては、「私の ホームページです。」のように多少の隙間があくだけです。改行を行うには次のように変更して保存、再表示してください。
私<br>のホームページです。
今度はちゃんと改行されるはずです。<br> は break の略で、「改行する」という命令です。
今度は「ホームページ」を太字に変更します。
私の<b>ホームページ</b>です。
ブラウザで再表示すると、「ホームページ」が太字で表示されます。<b> は bold の略で、<b>と</b> の間を太字にするいう命令です。同様に、<i>と</i> で囲めば斜体文字「ホームページ」（Italic）になります。
今度は「ホームページ」を赤色に変更します。私の次に<font color=red>を追加し、ホームページの次に</font>を追加してください
私の<font color=red>ホームページ</font>です。
ブラウザで再表示すると、「ホームページ」が赤字で表示されます。
色の名前主な色は英文の名前で指定できます。
| 名前 | 書き方 |
| 黒 | Black |
| 灰 | Gray |
| 青 | Blue |
| 緑 | Green |
| 黄 | Yellow |
| 赤 | Red |
| 白 | White |
