MB-Support

パソコン初心者のサポートページ

1.index.htm index.html

 Windows に付属するメモ帳を使って、ホームページを作成してみましょう!


index.html

ホームページを製作するにあたり、最初に決める事があります。ファィル拡張子に「.html」「.htm」のどちらを選ぶかです。 最初に統一しないと後で修正するのが大変になります。ちなみに私は「.htm」で統一しています。好きな方を選んで下さい。 ページ数分の htm ファイルを作成していきますが、ファィル名を半角小文字の英数字にします。日本語や全角は使用しません。



index

ホームページ最初のページファィル名を「index」にします。 例えば「http://mbsupport.dip.jp」にアクセスすると「index.htm」が表示されます。 Internet Explorer(インターネットエクスプローラ [ブラウザ])のアドレス覧に以下の 3 つのアドレスを入力して「enter」キーを押すと、全て同じページが表示されます。

http://mbsupport.dip.jp
http://mbsupport.dip.jp/
http://mbsupport.dip.jp/index.htm


IIS ( インターネット インフォメーション サービス [ WEB サーバー] ) の設定方法は、「スタート」→「設定」→「コントロールパネル」「管理ツール」→「インターネット インフォメーション サービス」をダブルクリックして、さらに「既定の Web サイト」のプロパティを表示します。 ドキュメントタブを左クリックして、「規定のドキュメントを有効にする」左にチェックを入れ、IIS インストール初期状態で設定されているファイル名を全て削除します。



空白になったら、「追加」を左クリックして、自分が作成するトップページのファイル名(拡張子も)を登録します。 これで、あなたのWEBサーバーにアクセスした時、一番最初に表示されるページを決める事ができます。 つまり、トップページの名前は「index.htm」「index.html」だけでは無く、「top.htm」「top.html」など、オリジナルにしても構いません (「index」にした方が無難です ) 。 右上は IIS7 での設定画面。[コントロールパネル] → [管理ツール] → [IIS Manager] で IIS マネージャを開き、左メニューの [サイト] → [Default Web Site] で、[規定のドキュメント] をダブルクリックします。

動的に変化してない HTML と CSS で構成する場合、ローカルにテスト環境を構築しなくても、ホームページを作成して確認する事はできます。 しかし、WEB サーバーを通していない表示は、サーバーサイドスクリプト( PHP や Perl など )や、クライアントサイドスクリプト( JavaScript など )などを検証する事ができません。 スクリプトを使わないのであれば、ローカルサーバーを稼働しなくても構いません。 その環境で制作する場合、外部サーバー、または、レンタルサーバーを利用するユーザーがほとんどかと思われます。



拡張子を表示する設定

フォルダオプション

パソコンを利用する日常、拡張子がどれだけ重要であるかは作業の内容により異なりますが、ホームページを制作する環境では必須と言えます。 Windows をインストールした初期状態では、拡張子は表示されない設定になっています。 コントロールパネルのフォルダオプションを開き、拡張子を表示させる設定に変更します。方法は以下のリンク先に掲載しています。

関連情報:フォルダ オプション( Windows 2000 / XP ) - ワトソンのパソコン教室



index.htmファイルを作ってみましょう!

1.デスクトップで右クリックします。「新規作成」で「フォルダ」を左クリックします。



仮に名前をHOME PAGEと付けたとします

2.新規に作成したフォルダに自分の好きな名前をつけます。このフォルダにホームページを作成します。



3.新規に作成したフォルダを開いて右クリックして、「新規作成」で「テキストドキュメント」を左クリックします。 拡張子「.txt」のテキストファイルが作成されました。



4.新規に作成したテキストファイルの名前を「index.htm」に変更してます。index と htm の間に「.」を入れて下さい。 警告が表示されたら「はい」を左クリックします。



拡張子の変更後

5.アイコンがテキストから Internet Explorer ( インターネット エクスプローラ 以下 IE ) に変わります。 以上でホームページのトップになるファイルが作成できました。



index.htm ファイルを開いてみましょう!

1.「index.htm」をダブルクリックします。 拡張子を txt から htm に変更したので、メモ帳では無く、IE が起動して、ホームページが表示されます。



2.IE のメニュー「表示」を左クリックして「ソース」を開いて下さい。 IE7 でメニューが表示されていなければ、キーボードの「Alt」キー、「V」キー、「C」キーを順番に押すと表示されます。 この時、IE がアクティブである必要があります。 メモ帳で index.htm が開かれましたね。 ここにタグを書いてホームページを作っていきます。



3.ソースと「源(みなもと)」であり、ここではホームページを構成する説明書みたいなものです。 ソース ( メモ帳 ) に「マイ・ホームページ」と入力して、ソースを閉じて下さい ( 上書き保存 ) 。 なお、Windows Vista + IE 8 の環境では、ブラウザを起動してソースを表示しても編集する事ができません。 この場合は、元ファイル(メモ帳で作成した [ htm ] ファイル)を右クリックして、[メモ帳]で開きます。 メモ帳で開かれたソースは、ブラウザで表示しているホームページと同じファイルにアクセスしています。 ここで、メモ帳に新しいソースを記入、または、編集して上書き保存、さらに、ブラウザを更新すると、変更が反映されます。



4.index.htm は開いたままですので、アクティブ ( 上部が濃い青色で選択されている状態 ) にして「F5」キーを押して更新します。 ソースに入力した「マイ・ホームページ」が IE に表示されました。

この様にホームページは Windows に添付の「メモ帳」で作る事ができます。 実際は IE とソース ( メモ帳 ) を左右、または上下に並べて、 ソースを追加したら、キーボードの「ctrl」+「d」を押すと上書きされます。 変更した内容を IE で見たい時は、IE をアクティブにして「f5」キー、もしくは、 「ctrl」+「f5」キーを押す事で、瞬時に反映されます。次は ホームページの決まり事 を覚えましょう。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項