(2時間目)タグの理解


最初の一時間の終わりに、アイコンをダブルクリックした時点で実は手作りページは出来上がっています。
しかし、人真似ではだめなのでこのコーナを設けました。一番の難関なコーナーです。
要は基本タグと一部の書式タグを暗記するだけですが、身に付けることが大変なのです。
この一時間ではその指針を示しますが何度も繰り返し練習して習慣付けてください。
「タグは知っているよ」というだけではダメなのです、
ワードやエクセルでツールバーを自由に使い回すように考えず出来るように習慣づけます。

●これは前回保存したソースです、ソースはタグというHTML言語で構成されています。
ホームページを作成する事はタグを理解することでこの時間はタグの勉強をします。
<html>
<head>
<title>
    手作りホームページ
</title>
</head>
<body bgcolor="pink" background="haikei.jpg">
           <font  size=4 color=red>
             いらっしゃいませ。
           </font>
    <center>
      <img src=title.gif>
    </center>
    <br><br>
 <pre>
         <b>  
         このページは超初心者のホームページ講習用に作っています。 
      
        そのままキーボードの「Alt」を押しながら「V」と「C」を押してください。 
      
        表示されたメモ帳をソースといい、このページの原稿であり、すべてです。

     画面上で右クリックしても、またはメニューの表示からでも表示できます。
             
     これを作ることがそのままホームページを作ることになります。
   
     ではこのソースから、これとまったく同じページを作って見ましょう。
          </b>
     
 </pre> 
          <marquee>
            <img src="kisya.gif">
          </marquee>
   <br>
   <hr>
       <h3>
           <font color=green>
           <b>
              【名前をつけて保存】
             </b>
           </font>
       </h3>
 <pre>
    
    メニューのファイルからこのソースを「名前をつけて保存」してください。
    保存するとき大切な事は「保存する場所」と「ファイルの名前」、「ファイルの種類」です。

    (1)場所はドキュメント、またはディスクトップなどわかりやすい場所にしてください。
    (2)名前は現在 rensyuu{1} となっていますが、ここでは index.htm に変更します。
           名前の後にドットを介して付ける3文字htmまたは4文字htmlを拡張子(後述)といいます。
    (3)ファイルの種類は現在テキスト文書になっていますが右端の▼をクリックして「すべてのファイル」に変更します。

      保存が終わったらそのアイコンをダブルクリックしてページを表示させて見ましょう。
    この段階ではまだ画像などは表示されません。
     
 </pre> 
      
      <a href="http://www.yahoo.co.jp">
      <img src="yahoo.gif">
      </a>
   <embed src="d52.mid" autostart=true repeat=true panel="0" width="0" height="0">
      <a href="no2.htm">次へ⇒</a>

</body>
</html>

●ソース中で黒字で表示したものを基本タグといいます。

基本タグの説明
<html>---------------ぺージの始まり
<head>---------------ヘッド(頭)の始め、
<title>--------------タイトルの始め
</title>-------------タイトルの終わり
</head>--------------ヘッドの終わり
<body>---------------ボディー(本体)の始まり
</body>--------------ボディーの終わり
</html>--------------ホームページの終わり

タグは括弧に囲まれ開始と終了があり、
改行タグなど例外を除き終了タグにはスラッシュが付きます。
   理屈はどうでも、基本タグはそのまま暗記してください。
このページだけでなく、すべてのホームページの骨組になっています。
ためしにどのページでもソースを開いて確認ください。
    


ここで取り上げたその他の書式タグ(青字の部分)

<body bgcolor=pink>---------背景色をピンクにする-----</body>
<body background=haikei.gif>--背景に空の画像を使う----</body>
<font size=6>--------------文字のサイズを6に--------</font>
<font color=blue>-----------文字の色をブルーにする---</font>
<br>----------------------改行する
<pre>---------------------文字配置をそのまま表示---</pre>
<hr>----------------------罫線を引く
<center>------------------中央寄せ----------------</center>
<img src=kisya.gif>----------汽車の画像を呼び出す。
<marquee>----------------右から左にスクロール----</marquee>
<a href=yahoo.co.jp>--------リンクタグ,ジャンプ-----------</a>
<embed.src=d51.mid>-------効果音の呼び出し。
<h3>---------------------文字のサイズT〜6まで------</h3>
<b>----------------------太字にする-----------------</b>


3番4番のFONTタグについて詳しく説明します。
他にもテーブルタグとか、段落タグなど良くでてくるものがありますがここでは省略します。
この時間は十分時間を割いてタグを繰り返して入力しながら暗記してください。
タグの種類は非常に多く沢山ありますがここにあるぐらいを覚えておいて
後は必要に応じてグーグル等で検索少しづつ追加勉強すれぱ良いと思います。
  その他HTML宣言とかメタタグなどWWWの文法上いろいろな規則があります。
     ここにheadの一例を示しますのでHTMLが上手になったら採用ください。
    

     
              ソースの中で赤字で表したものがボデーの部分でここにメッセージや内容を書きます。
      内容は日本語でもかまいませんが、タグの部分は半角英数と決まっています。

     
    
   (1)      (2)   (3)     (4)      (5)       とほほのHP入門        メモ帳でHP        タグ道場