HTMLの基本構造が分かったので、ウエブページの作成に入っていきますが、その為に必要な物を書き出しておきます。
インターネットに接続されているパソコン
たったこれだけです。このサイトをご覧の皆様は、この条件をクリアしてると思います。
使用するソフトは，今お使いのブラウザとテキストエディタ（窓の場合はメモ帳 ［スタート］→［プログラム］→［アクセサリ］→［メモ帳］、林檎の場合は SimpleText）だけです。
各種のテキストエディタが、フリーソフトで紹介されています。Vector さんや 窓の杜 さん等で探す事が出来ます。私はToClip for WindowsさんのTeraPadを使用しています。
テキストエディタで文字を入力していき、HTML文書を作成していきます。
ウェブページを作っていく準備です。
サンプルを見てください。そして、ソースの表示をして下さい。そこに表示されたのが、サンプルのHTMLです。この様にして、色々なサイトのHTMLの構造を調べる事ができます。
ファイルを保存する場合は、ファイルの種類を すべてのファイル（*.*） にして下さい。
以上で準備は終わりです。
要素の詳しい説明は、後に記述します。此処では全体の構成を掴んで頂ければ、と思っています。
１行目（文書型宣言）から１０行目までと１５/１６行目は 第２章 〜 第５章 HTMLの基本構造 で説明した通りの構造です。
11〜14行目はBODY要素の内容です。BODY要素の子要素は、ブロック要素、SCRIPT要素、NOSCRIPT要素、INS要素、DEL要素 だけですので、インライン要素である文字列（ PCDATA ）を直接記述できません。サンプルでは P要素 を使用して４つの段落を記述してあります。
11〜14行目 P要素内の < と > は、置換文字で記述してあります。
DTDで使用が認められていれば、要素の内容内に子要素を記述出来ます。当然その要素内にも要素を記述出来ます。但し、子要素は、その親要素内で完結されていなければ成りません。
サンプルの 12行目 要素を記述して の 要素 の部分を強調する場合は、EM要素 を使用して
<p><em>要素</em>を記述して</p>
と記述します。
EM要素 は EMphasis（強調、力説）の略で、<em>〜</em> に記述されたインライン要素が強調されている事を示すインライン要素。EM要素の内容にはインライン要素を記述する事が出来ます。
EM要素の内容は、IE の初期値では斜体で表示されます。
サンプルの 13行目 ウェブページを作ります。 の ウェブページ の部分をさらに強調する場合は、STRONG要素 を使用して
<p><strong>ウェブページ</strong>を作ります。</p>
と記述します。
STRONG要素 は、<strong>〜</strong> に記述されたインライン要素がさらに強調されている事を示すインライン要素。STRONG要素の内容にはインライン要素を記述する事が出来ます。
STRONG要素の内容は、IE の初期値では太文字で表示されます。
P、EM、STRONG 要素の説明の中で、インライン要素を記述する事が出来ます と記述してありますが、インライン要素しか記述する事が出来ません。と表現するのが正解です。
上の行のHTML記述です。EM要素の内容内に、STRONG要素を使用して記述しました。
<body>
:
<p>P、EM、STRONG 要素の説明の中で、インライン要素を記述する事が出来ます と記述してありますが、<em>インライン要素<strong>しか</strong>記述する事が出来ません。</em>と表現するのが正解です。</p>
:
</body>
この項目の先頭で、子要素は、その親要素内で完結されていなければ成りません と記述しました。どの様な事でしょうか？上の記述のタグだけを抽出して親子関係の一覧表を作成しました。
|
○ ⇒ <p>XX<em>YY<strong>ZZ</strong>YY</em> XX </p>
STRONG要素はEM要素内で完結し、EM要素はP要素内で完結しています。
× ⇒ <p>XX<em>YY<strong>ZZ</em>YY</strong>XX</p>
これでは、何処から何処までがEM要素かSTRONG要素か分かりません。
このような構造を入れ子構造とよびます。
皆様もうお気付きだとは思いますが、このサイト内では、
強調（EM要素内）は赤色の文字
さらに強調（STRONG要素内）は緑色の太文字
で表示しています。
このサイトを音声ブラウザで閲覧している方でも、EM/STRONG要素の内容は、ブラウザが判別して強調して（大きな声で？）読み上げてくれると思います。
FONTというインライン要素が有ります。Transitional-dtd と Frameset-dtd の下で使用可能です。表示文字の大きさや色等を要素の属性で直接修飾することが出来ます。
<p><em>XXXX</em></p>
<p><font color="#a00">XXXX</font></p>
下行の意味は、『 P要素の内容をFONT要素で修飾された色で表示する。』 です。
このサイトでは、上記の記述は全く同じ表示です。健常者なら、EM/STRONG要素を使用しなくても、画面全体の構成で判定出来るでしょう。しかし、何故表示色を変えたのかを明示していなければ、音声ブラウザ等を使用している方には判定出来ません。
又、FONT要素等、HTML内で見栄えを設定出来る要素や属性は、Deprecated （非推奨） と指定されていて、将来廃止になるかもしれません。
W3C - HTML 4.01 Specification → Deprecated より
- Deprecated
- A deprecated element or attribute is one that has been outdated by newer constructs.
Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated.
Deprecated elements may become obsolete in future versions of HTML.
- 非推奨
- 非推奨要素や属性とは、より新しい概念により時代遅れに成ったものです。
非推奨要素は、リファレンスマニュアル内の適切な位置で定義し、非推奨と明記します。
非推奨要素は、HTMLの将来のバージョンでは、廃止になるかもしれません。
事実、XHTML™ 1.1 では、廃止されました。復活する可能性は無いと思いますが、IE等のブラウザが非推奨要素を解釈しなくなる様な事は無いと思いますが、ウエブ標準からは外れて行きます。
