*作ってみよう*・・・のつづき

2.保存する

以上、書けたら、保存します。
「ファイル」→「名前をつけて保存」を選択し、

さっき作った「homepage」フォルダを開いて、

ファイル名:「top.html」←半角英字が鉄則!
   ※拡張子は「.htm」でも「.html」でも良いけど、ここでは「.html」にしましょう

ファイルの種類:「テキスト形式(テキストドキュメント)」
   ※本当はHTMLファイルなんだけど、そういう選択肢が無い場合は「テキスト形式」

として、保存してください。

あっ、テキストエディタはまだ閉じないでね〜!!

3.ブラウザで確認する

うまく作れたかどうか、ブラウザで見てみましょう!
新たにInternet Explorerを起動してください。
起動したら、top.htmlを読み込んでみます。

今作った「top.html」をInternet Explorerにドラッグ&ドロップしてください。

どうですか、うまく作れていますか??
テキストエディタに戻って、もう一度よく確認しましょう。
・スペルミスはないか?
・タグの閉じ忘れはないか?
などなど・・・。

以下の点にも気をつけてください。
・ページ中、半角&は使わないでください。使うなら全角&で。
・特殊記号も使わないでください!
対応していないパソコンで見たとき、文字化けを起こす原因になります。

間違いを発見したら、とりあえず書き直してください。

4.追加・訂正・編集する

今回のはカンタンでしたが、今後複雑になってくると、
少し書いてはブラウザで確認
HTMLを手直し
また確認・・・
という作業を繰り返すことになります。
そこで、これからは以下のような手順をとってください。

(1)HTMLを直したら、「ファイル」→「上書き保存」
(2)ブラウザで「更新」ボタンクリック。もしくはキーボードの「F5」を押しましょう。

「上書き保存」と「更新ボタン」をうまく使いこなせるよう、ちょっと練習してみましょう。

(1)<BODY>を、<BODY bgcolor="yellow">に変えて、「上書き保存」してください。
<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="yellow">
      <CENTER><H1>ななたぐのへや</H1></CENTER>
     「ななたぐのへや」へようこそ!<BR>初めてのホームページです。
  </BODY>
</HTML>

(2)ブラウザに戻り、「更新」ボタンを押してください。

背景が黄色(yellow)になれば、成功です(^o^)ワーイ
このように、HTMLは保存されてはじめて読み込めるようになります。

キ〜ンコ〜ン♪カ〜ンコ〜ン♪・・・
本日はここまで!


お疲れさまでした〜('-^)
明日は、「色の指定」「リンク」の2本柱で、今日作ったtop.htmlをもう少しホームページらしくし、
さらにもう1ページ作ります!
お楽しみに♪


back to top



Copyright (C) 7tag project dv