続日記を作ってみよう
それでは、前回作った日記の仕上げをしていきましょう。
HTMLの整形
前回のHTMLを以下のように変えてやりましょう
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>今日の日記</title>
</head>
<body>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
</body>
</html>
なんか、ごちゃごちゃといっぱい増えましたね。
まず、<html lang="ja">と</html>ってのを付けました。これは、HTMLの始まりと終わりを明示するためのものです。また、lang="ja"というのもついています。これは、「このHTML文書は主に日本語で書かれていますよ」という印です。
次のheadとbodyですが、これはページの情報部分と本文部分を分けるものです。
前章の最後で<title>今日の日記</title>の部分がページ本文の部分に表示されていたことを確認しました。このことからも、分かるように、titleというのはページ本文ではなく、それに付随している情報なのです。
情報部分は必ず本文の前に無くてはなりません。ブラウザは、まず情報部分を読み込んでから、それに従って本文を表示しようとするためです。
ですから、headとbodyでくくっておくことはミスを防ぐという意味でも大切です。
復習とこれからよく使う用語
HTML部分はこれで終わりで、この次の章からはいよいよデザインに入っていきます。しかしその前に復習をかねて、HTMLについての用語をいくらか説明しておきます。
文章は「段落」や「見出し」と言った要素が組み合わさって出来たものです。この要素をコンピュータに教えてあげるものがHTMLです。
<p>ここは段落です。</p>
ここで出てきた<p>と</p>。これらに囲まれた部分をp要素といいます。pじゃなくてtitleならtitle要素です。
これら要素をコンピュータに教えてあげる部分、<p>と</p>二つ合わせてタグといいます。洋服についてるタグは店員さんに値段を教えています。それと同じでHTMLのタグはコンピュータに要素を教えてあげているのです。
このタグのうち、<p>を開始タグ、</p>を終了タグといいます。例外はありますが、タグは開始タグと終了タグがセットとなっています。
タグには属性と属性値というものが付くことがあります。さっきの例でいうとlang="ja"というやつです。これは、その要素がどのような性質を持っているかを示すものです。
HTMLのタグは洋服のタグとそっくりですから、ここで見慣れた洋服の例から説明しましょう。
洋服のタグには、「値段」という属性と、その具体的な内容である「1500円」という値段が書かれています。属性とはある物（HTMLでは要素）が持っている性質の種類、属性値とはその属性の具体的内容だと思ってください。
HTMLの属性についても同じです。<html lang="ja">では、「文書全体」という要素に対して「言語」という性質が付いています。この「言語」の具体的な内容が「ja」つまり日本語だということです。
また、属性は開始タグにだけ書くことに注意してください。
