HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / ページを作成してみる
ページを作成してみる
まずは練習用に、簡単なホームページを作ってみましょう。

今回使用するソフトは、メモ帳とブラウザ（インターネットエクスプローラ）だけです。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。
　作業フォルダの作成
まず、ホームページを作成する前に、作業用のフォルダを作成しておきます。

パソコン内のどの場所に作成しても良いのですが、とりあえずここでは「マイドキュメント」内に作成してください。

フォルダ名は「homepage」としておきましょう。
※別の名前でもかまいませんが、半角英数の小文字で名付けておくことをオススメします。

image


次に、この「homepage」フォルダをダブルクリックして開いて、メニューの「表示」→「フォルダオプション」を選択します。

フォルダオプションが表示されたら、「表示」タブをクリックします。

詳細の中で、「拡張子を表示しない」がチェックされていたら、そのチェックを外しておいてください。

image

チェックを外し終わったら、「適用」→「OK」でフォルダオプションを閉じます。

これで作業フォルダの準備は完了です。

　ページを作成する
それではいよいよページの作成にとりかかります。

まず「メモ帳」を立ち上げてください。

続いて次の内容をコピーして、「メモ帳」に貼り付けます。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE></TITLE>
</HEAD>
<BODY>


</BODY>
</HTML>

各タグの詳細については、次のページをご覧ください。
貼り付けが完了したら、この状態で一度保存しておきましょう。

「メモ帳」のメニューで「ファイル」→「名前を付けて保存」をクリックします。表示されたダイアログボックス内で、先ほど作成した「homepage」フォルダを開いてください。

「ファイル名」の入力欄に
index.html
と書き込んで、「保存」ボタンをクリックします。

これで保存は完了したはずです。念のため、「マイドキュメント」内の「homepage」フォルダを開いて確認してみましょう。

image

上記のように表示されていたら成功です。

もし空っぽだったら、保存場所を間違えている可能性があります。もう一度保存先を確認してください。また、ファイル名の拡張子に .txt が付いてしまっている場合には、

index.html.txt

これの .txt 部分を削って次のように修正してください。

index.html

これで、ホームページのベースが出来上がりました。

　ブラウザで確認する
ファイルの保存が成功したら、ブラウザで表示確認をしておきます。

※ページを新規に作成した場合や、内容を修正した場合など、その都度ブラウザで表示確認するクセを付けておきましょう。

まずブラウザを立ち上げてください。

ブラウザのメニューで「ファイル」→「開く」を選択します。表示されたダイアログボックス内で「参照」ボタンをクリックし、「homepage」フォルダ内の index.html を選択して「開く」ボタンをクリックします。

image

上記のような感じでパスが入力された状態になりますので、最後に「OK」ボタンをクリックしてください。

どうでしょう？無地のページが表示されましたか？表示されていれば確認作業は完了です。

続いてこのページ内に内容を書き込んでいきますが、このブラウザは後ほどまた使いますので、このままの状態にしておいてください。

　ページにタイトルを付ける
続いて、作成したページにタイトルを付けてみます。

先ほど貼り付けたソースを見てみると、

<TITLE></TITLE>

この1行が確認できると思います。

ここでは「マイホームページ」というタイトルを付けることにします。上記の部分を次のように記述してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY>


</BODY>
</HTML>

記述し終わったら、「メモ帳」のメニューで「ファイル」→「上書き保存」をクリックします。

保存が完了したら、再びブラウザに戻り更新ボタンをクリックします。

どうでしょう？変化がありましたか？ページは無地のままですが、ブラウザ上部のバーに「マイホームページ」というタイトルが表示されていると思います。これでタイトルを付ける作業は完了しました。

image

タイトルについての詳細は、「ページにタイトルをつける」をご覧ください。

　ページの内容を書き込む
最後にページの内容を書いてみましょう。

先ほどのソースをもう一度見てください。

<BODY>

</BODY>

上記のような部分がありますが、ページの内容はこの <BODY> 〜 </BODY> の間に書き込んでいくことになります。

試しになんか書いてみましょう。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY>

私のホームページへようこそ！

</BODY>
</HTML>

書き込みが完了したら、「メモ帳」のメニューで「ファイル」→「上書き保存」をクリックします。

保存が完了したら、再びブラウザに戻り更新ボタンをクリックします。

image

先ほど書き込んだ内容が表示されていれば、初めてのページ作成は成功です！

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system