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

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は保存されてはじめて読み込めるようになります。

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


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


back to top


Copyright (C) 7tag project dv