2-2.ハイパーリンク

HTMLだと、文書を結び付けられます。

*-----------------------------------------------
* <a href="./index.htm">ハイパーリンクの例</a><br>
* (リンク先は、トップページです。)
*-----------------------------------------------

ハイパーリンクの例
(リンク先は、トップページです。)

2-4.文書の論理構造

HTMLだと、文書の論理構造を記述できます。

*-----------------------------------------------
* <body>
*  <h1>文書の論理構造とは</h1>
*  <div>
*   <h2>まとめる，入れ子で階層化</h2>
*   <p>要素でまとめて、
*さらに要素を入れ子にする事で論理構造が表せます。</p>
*  </div>
*  <div>
*   <h2>例示</h2>
*   <a href="./index.htm">ハイパーリンクの例</a><br>
*    (リンク先は、トップページです。)
*  </div>
* </body>
*-----------------------------------------------
* [body]-[h1]{文書の論理構造とは}
*  i
*  +--[div]-[h2]{まとめる，入れ子で階層化}
*  i   i
*  i   +--[p]
*  i       i
*  i       +-{要素でまとめて～}
*  i
*  +--[div]-[h2]{例示}
*      i
*      +--[a]
*      i   l
*      i   +--{ハイパーリンクの例}
*      i
*      +--[br](改行)
*      i
*      +--{(リンク先は、トップページです。)}
*-----------------------------------------------
* (上記 body 要素を
* div 要素で代用して HTML での表示を提示)
*

文書の論理構造とは

まとめる，入れ子で階層化

要素でまとめて、さらに要素を入れ子にする事で論理構造が表せます。

例示

ハイパーリンクの例
(リンク先は、トップページです。)

*
*-----------------------------------------------

2-5.文書の表示の仕方

HTMLだと、文書の表示にいろいろ指定が出来ます。

まず既定値として、HTMLでは連続した空白文字, 改行コードはひとつの空白としてまとめられます。
また、タグの直前, 直後の空白は取り除かれる事があります。
書き込まれた文字列そのままが表示されるのではありません。

a. PRE 要素

事前フォーマット済みテキストを表します。
等幅フォントでレンダリングされ、空白文字と改行文字によって定義されたレイアウトを保持します。

*-----------------------------------------------
* <h4>P 要素</h4>
* <p>  等幅フォントでレンダリングされ、
* 空白文字と改行文字によって
*定義されたレイアウトを保持します。</p>
* <h4>PRE 要素</h4>
* <pre>  等幅フォントでレンダリングされ、
* 空白文字と改行文字によって
*定義されたレイアウトを保持します。</pre>
*-----------------------------------------------
*

P 要素

等幅フォントでレンダリングされ、空白文字と改行文字によって定義されたレイアウトを保持します。

PRE 要素

  等幅フォントでレンダリングされ、
 空白文字と改行文字によって
定義されたレイアウトを保持します。

*
*-----------------------------------------------

b. UL 要素

順不同リストを表します。
順序付きには OL 要素があります。

*-----------------------------------------------
* <ul>
* <li>リスト項目１</li>
* <li>リスト項目２</li>
* </ul>
*-----------------------------------------------
*

リスト項目１
リスト項目２

*
*-----------------------------------------------

c. I 要素，B 要素など

*-----------------------------------------------
* <i>italic</i><br>
* <b>Bring Attention</b><br>
*-----------------------------------------------
*

italic
Bring Attention

*
*-----------------------------------------------

2-6.装飾，動的処理

HTMLだと、スタイルシート，スクリプト等の使用が出来ます。

*-----------------------------------------------
* <h3 style="
 border-width:1px 0;
 border-style: solid;
 border-color: #000000;
 width:7em;
">見出しを装飾</h3>
*-----------------------------------------------
*

見出しを装飾

*
*-----------------------------------------------

*-----------------------------------------------
* <span onclick=
* "this.style.color='#ff0000';"
* >TEXT</span>
* ("TEXT" という文字列をクリックすると
* 文字の色が赤く変わるスクリプトの例です。)
*-----------------------------------------------
*

TEXT

*
*-----------------------------------------------

2.HTMLサンプル

2-1.概要