◆第二章◆ＨＴＭＬの基本

---

１：タグとは？

• タグとは？
• 注意点

２：開始タグと終了タグ

３：タグの属性

• 属性とは？
• 複数の属性指定

４：タグの包囲関係

５：基本となるタグ

６：ＨＴＭＬ文書の作成と更新

• ＨＴＭＬ文書作成と保存
• ＨＴＭＬ文書の更新と表示

★タグとは？★

• ＨＴＭＬでは、「＜」「＞」でくくられた中に命令を書くことにより、文章や色、画像などをどのように表示 するかを定義します。この命令のことをタグと呼びます。

★注意点★

• タグは、必ず半角英数字で記述します。
• スペースも全角ではエラーします。
• 大文字、小文字はどちらでも構いません。
• タグを途中で改行して書かないようにして下さい。
  ↓例

  ＜ｈｔ ｍｌ＞あいうえお

• ほとんどのタグは、開始タグ（ここから）と終了タグ（ここまで）がセットになっていて、開始タグと終了タグに挟まれた部分の文字が 命令を受けます。
• 終了タグは、開始タグと同じタグ名で「＜」の後に「/」を付けるだけです。

  ↓図の＜Ｂ＞は文字を太くするタグです。

  ＜Ｂ＞あいうえお＜/Ｂ＞ 　　↓　　　↓ 　　　↓ ＜開始＞内容＜終了＞

※終了タグが不要なタグ名もあります。第三章以降からそれぞれのタグ名のときに説明します。
★属性とは？★

• 多くのタグには属性＝属性値で命令の内容を細かく指定することができます。
• 属性の前には必ず半角スペースで区切りを入れます。
• 属性と属性値はイコールで繋ぎます。
• 属性値は「"」または「'」で囲んで書きます。

  ＜ｆｏｎｔ　ｃｏｌｏｒ＝"ｒｅｄ"＞あいうえお＜/ｆｏｎｔ＞

• この場合、ｆｏｎｔがタグ名（タグ、タグ要素とも呼びます）で属性がｃｏｌｏｒ、属性値が"ｒｅｄ"になります。（終了タグに属性は付きません） これを説明すると、

  ＜タグ名　属性＝"属性値"＞は＜〜の　〜を＝"〜する"＞

  と読み替えられますので、文字の色を赤にする、といいます。

★複数の属性指定★

• 一度に複数の属性を指定するには、次のようにします。

  ＜ｆｏｎｔ　ｃｏｌｏｒ＝"ｒｅｄ"　ｓｉｚｅ＝"５"＞あいうえお＜/ｆｏｎｔ＞

  • 半角スペースで区切って記述します。
    ＜タグ名（半角スペース）属性＝"属性値"（半角スペース）属性＝"属性値"＞となります。
  • 属性の指定に順序はありません。順不同です。＜ｆｏｎｔ　ｓｉｚｅ＝"５"　ｃｏｌｏｒ＝"ｒｅｄ"＞でも効果は同じことです。
  • これを説明するときは、文字の色を赤にして大きさを５にする、といいます。

• 複数のタグを使用するときはサンドウィッチのように挟んで書かなければ正しく表示されません。

  ○＜タグ名１＞あ＜タグ名２＞い＜/タグ名２＞う＜/タグ名１＞ ○＜タグ名２＞あ＜タグ名１＞い＜/タグ名１＞う＜/タグ名２＞ ×＜タグ名１＞あ＜タグ名２＞い＜/タグ名１＞う＜/タグ名２＞ ×＜タグ名２＞あ＜タグ名１＞い＜/タグ名２＞う＜/タグ名１＞ ○＜タグ名１＞あ＜/タグ名１＞＜タグ名２＞い＜/タグ名２＞

  1. 「あ」「う」が、タグ名１の命令を受け、「い」が、タグ名２と１の命令（タグ名２の命令が優先）を受けます。
  2. 「あ」「う」が、タグ名２の命令を受け、「い」が、タグ名１と２の命令（タグ名１の命令が優先）を受けます。
  3. 正しく表示されません。
  4. 正しく表示されません。
  5. この場合は、包囲関係になく、個々にタグの命令を受けます。

• ＨＴＭＬ文書を作成するには、まず基本となるタグを入力します。

  ＜Ｈｔｍｌ＞ 　＜Ｈｅａｄ＞ 　　＜Ｔｉｔｌｅ＞ブラウザのタイトルバーに表示されるタイトル＜／Ｔｉｔｌｅ＞ 　＜／Ｈｅａｄ＞ 　　　＜Ｂｏｄｙ＞ 　　　　ここに本文を書きます 　　　＜／Ｂｏｄｙ＞ ＜／Ｈｔｍｌ＞

  • ＜Ｈｔｍｌ＞〜＜/Ｈｔｍｌ＞がＨｔｍｌ文書で書くことを命令してます。
  • ＜Ｈｅａｄ＞〜＜／Ｈｅａｄ＞をヘッダ部と呼びます。この文書の基本情報設定などを書きます。
  • ＜Ｔｉｔｌｅ＞〜＜／Ｔｉｔｌｅ＞はヘッダ部に入力しブラウザのタイトルバーに表示されるタイトルを書きます。 お気に入りに登録したときや履歴にも表示されます。
  • ＜Ｂｏｄｙ＞〜＜／Ｂｏｄｙ＞ブラウザのウィンドウ枠に表示される本文を書きます。

★ＨＴＭＬ文書作成と保存★

• 実際にＨＴＭＬ文書を作成します。その前にホームページ作成の準備をもう一度読みましょう。
  1. テキストエディタを開きます。
  2. ＨＴＭＬの基本タグを入力します。（わからない場合はこちらを参照）
  3. テキストエディタ（メモ帳）の[ファイル]→[名前を付けて保存]を開きます。
  4. 作成してあるhomepageフォルダに保存先を指定します。
  5. ファイル名「index.html」と入力して保存します。この名前にすることで、このファイルがトップページとしてブラウザに表示されます
  6. 保存したら拡張子がちゃんと「.html」になっているか確認してください。
  7. 保存されたファイルを開くとテキストエディタではなく、ブラウザで表示されます。

★ＨＴＭＬ文書の更新と表示★

• ＨＴＭＬ文書の更新とブラウザでの表示方法は以下の手順です。
  1. 作成したＨＴＭＬ文書を開きます。ブラウザで表示されます。
  2. ブラウザ（ＩＥ）の[表示]→[ソース]を開きます。テキストエディタでそのページのＨＴＭＬ文書が開きます。
  3. 内容を変えたら、[ファイル]→[上書き保存]で保存します。
  4. ブラウザに更新した内容を表示させるには、ブラウザの[更新]をクリックします。

※この更新の方法だとブラウザでどう表示されているのかを確認しながら、 ＨＴＭＬ文書を書くことが出来ます。

---