基盤的情報処理論

これから次回にかけて、HTMLの各種要素について練習していきます。学生番号b02.htmlに、以下にある[サンプルHTML]と同様の要素を追加書き込み(コピー＆貼り付け)した上で保存し、Webブラウザでその要素の表示される形を確認して下さい。

本テキストでは、下図の色の囲み内が、HTML要素のサンプルです。

htmlタグはこの枠内に表記されています。

この部分の内容をコピーして、HTMLエディタで開いている学生番号b02.htmlに貼りつけて保存して下さい。

Crescent Eveに文書を貼り付けると、F8キーで開いたHTMLプレビュー・ペインの表示や、F10キーで開いたブラウザの表示は、貼り付けた内容がすぐに反映されます。

HTMLファイルのアイコンをクリックしてブラウザで表示された内容は、HTMLファイルを保存した後、ブラウザの再読み込みボタンを押すことにより、HTMLファイルの内容の変化がブラウザの表示に反映されます。

本テキストでは、Webブラウザの表示結果を、下図の色の囲み内に表します。

Webブラウザでの表示結果はこの枠内に表記されています。

HTML要素のサンプルをコピーしてCrescent Eveに貼り付けると、下図のようになります (下図は、次節の「見出し (h1～h6要素)」にあるサンプルを貼り付けたところです)。赤枠で囲んだところが、貼り付けた部分です。

このままでも、文法上は正しいのですが、貼り付けた h1, h2, h3要素が、body要素の子要素であることを、一見しただけでは判別できません。それは、挿入された(貼り付けられた)要素が、行頭から書かれているためです。

そこで、下図のように、行頭に必要な数のTABを入力し(TABキーを押し)、body要素の子要素であることを、エディタ上(見た目)でも明確にする習慣をつけましょう。

上図のように h1, h2, h3 の開始タグの前にTABを(2個)挿入し、p, h1, h2, h3の開始タグが、(緑線で示したように)縦一列にならぶようにすると、一見しただけで、それらがbody要素の子要素であることを認識することができますね。

さらに、このHTML文書の本文は、p, h1, h2, h3の4つのブロックから構成されていることも、すぐ分かりますね。

見出しを作る要素には、h1要素、h2要素、... h6要素の6レベルがあります。h1要素がトップレベル(意味的に一番大きな見出し)であり、h6が一番下のレベルを表わします。

h1～h6要素はブロックレベル要素であり、インライン要素やテキストを含むことができますが、ブロックレベル要素を含むことはできません。

パラグラフとは、「文章のひとかたまり」、つまり「段落」のことです。 p要素は、パラグラフを定義するときに使います。
p要素はブロックレベル要素であり、インライン要素やテキストを含むことができますが、ブロックレベル要素を含むことはできません。

パラグラフの中で、強制的に改行するときに使う要素です。br要素は、終了タグの要らない要素です。

br要素は、インライン要素です。p要素中で使われることが多いので、ここで説明しました。

文書の中に横罫線を引くときに利用します。異なる内容の2つのブロックの間に罫線を挿入し、2つのブロックの区別を行なうために使われます。

hr要素はブロックレベル要素ですが、終了タグの要らない空要素です。