HTML文書の基本構造を設定

広告

それではテキストで入力した文書に対してHTML文書の基本構造を設定していきます。

対象となる文書は次の通りです。 

動物園にて

2008年12月。師走の寒い中でしたが動物園へ行って来ました。

ライオン:
今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
前でウトウトしています。おかげで顔の形などはっきりと見る
ことができました。

ペンギン:
もともと寒い所に住んでいるペンギンは冬の季節であっても比
較的元気な様子。それでも日暮れが近づいてくると寒かったの
でしょうか。日差しがあたる場所へペンギン達が整列して太陽
の方を眺めていました。

それでは順にマークアップを行っていきます。HTML文書の基本構造は次のようになっています。 

<html>
  <head>
    <title>
      タイトル
    </title>
  </head>
  <body>
    本文
  </body>
</html>

HTML文書では文書全体がhtml要素でマークアップし、その中にhead要素とbody要素が含まれます。そして文書の本文はbody要素でマークアップします。

ではまずテキストで記述された文書の本文をbody要素でマークアップ(<body>タグと</body>タグで囲います)します。 

<body>
  動物園にて

  2008年12月。師走の寒い中でしたが動物園へ行って来ました。

  ライオン:
  今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
  前でウトウトしています。おかげで顔の形などはっきりと見る
  ことができました。

  ペンギン:
  もともと寒い所に住んでいるペンギンは冬の季節であっても比
  較的元気な様子。それでも日暮れが近づいてくると寒かったの
  でしょうか。日差しがあたる場所へペンギン達が整列して太陽
  の方を眺めていました。
</body>

なお本文を区別がつきやすいように字下げしていますがこれは任意です。

次に文書のヘッダ部分に関する記述するhead要素をbody要素の上に追加し、全体をhtml要素でマークアップします。 

<html>
  <head>
  </head>
  <body>
    動物園にて

    2008年12月。師走の寒い中でしたが動物園へ行って来ました。

    ライオン:
    今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
    前でウトウトしています。おかげで顔の形などはっきりと見る
    ことができました。

    ペンギン:
    もともと寒い所に住んでいるペンギンは冬の季節であっても比
    較的元気な様子。それでも日暮れが近づいてくると寒かったの
    でしょうか。日差しがあたる場所へペンギン達が整列して太陽
    の方を眺めていました。
  </body>
</html>

これでHTML文書の基本構造の設定は完了です。

「zoo.html」ファイルに上書き保存した後でブラウザで開いてみると次のように表示されます。

p4-1

では次にタイトルの設定を行います。

( Written by Tatsuo Ikura )