01 ホームページ作成の第一歩


 さあ、始めましょう。「メモ帳」を起動してください。「スタート」→「プログラム」→「アクセサリ」→「メモ帳」ですよ。

  1. 「メモ帳」にHTMLタグと画面に表示させる文字を入力をします。次の <HTML> から </HTML> までを入力します。

    タグとは下記のような括弧 < > で囲まれた文字です。

    <HTML> から </HTML> までを半角でメモ帳に入力します。コピー&ペーストをした方が簡単ですね。



    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>




  2. <TITLE> </TITLE> の間に初めてのホームページと文字を入力します。

    次は、画面に表示させたい文字(全角/半角可ですが、半角カタカナは文字化けしますから使わないように)を、<BODY> </BODY> の間に入力しします。ここでは 私のホームページ と入力しましょう。



    <HTML>
    <HEAD>
    <TITLE>初めてのホームページ</TITLE>
    </HEAD>
    <BODY>
    私のホームページ
    </BODY>
    </HTML>




  3. 入力が終わったら「ファイル」→「名前を付けて保存」とクリックします。→「ファイル名を付けて保存」画面が表示されます。

  4. 「ファイルの種類」欄の▼ボタンをクリックして「すべてのファイル」を選択します。

  5. 「ファイル名」欄に index.html と入力します。index の部分は違う名前でも結構ですが、ピリオドと拡張子(.html)は間違わずに入力してください。

  6. 「保存する場所」欄は、お好きなフォルダを選択してください。

  7. 「保存」ボタンをクリックします。

  8. 右上隅の × をクリックして「メモ帳」を閉じます。

  9. 保存した index.html ファイルをダブルクリックします。

     ブラウザ(Internet Explorer など)が起動して、 3 で入力した「私のホームページ」の文字が表示されましたか?

     なにも表示されない場合は、次の原因が考えられますので修正しましょう。

    1. メモ帳に入力したタグに間違いがある。

    2. 保存する時に「すべてのファイル」を選択しなかった。

    3. 保存する時に「ファイル名」のピリオドと拡張子に間違いがあった。

  10. 「メニューバー」の「表示」→「ソース」とクリックをすると、あなたが作成した「メモ帳」が表示されます。

  11. 間違いの個所を見付けて修正してください。

  12. 修正が終わったら、→「ファイル」→「上書き保存」とクリック、→「メモ帳」を閉じます。

  13. ブラウザの「ツールバー」の「更新」アイコンをクリックします。今度は正しく表示されましたか?

【特に注意する点】

  • タグは必ず半角で入力します。大文字でも小文字でも構いません。

  • ファイル名と拡張子は大文字・小文字が区別されます。

  • 拡張子の htm と html 区別してください。


    【ソースの構成】

  • メモ帳にタグを記述したものを「ソース」といい、これがホームページの正体です。

  • ソースの初めと終わりには必ず <HTML> と </HTML> を記述し、ソースはその間に記述します。

  • ソースは HEAD部分とBODY部分で構成されています。

  • HEAD部分はページのタイトルや JAVA SCRIPT などの本文以外の情報を記述します。

  • BODY部分は本文に表示させるタグを記述します。

  • <HTML> <HEAD> <BODY> タグは「構造タグ」といい、必ず記述しなければならないタグです。

  • <TITLE> と </TITLE> の間に記述した文字はブラウザの「タイトルバー」に表示されます。

  • BODY部分でも、 <!-- と --> の間に記述したものはタグとして認識されませんし、画面にも表示されません。後でソースを見る場合の参考のために、タグの説明などを書いておきます。

  • 画像や音声を用いる場合は、それらのファイルを「HTMLファイル」と同じフォルダに入れておきます。