LESSON3:HTMLスタイルその2
 ここでは,LESSON2では,扱わなかったタグについて学習していきます。
1.フィジカルスタイルとロジカルスタイル
 同じHTMLでもブラウザーによって表示が変わることは初めにふれましたが どんなブラウザにも理解できるように工夫されたものがロジカルスタイルです。

例えば「太字にせよ」というタグ(=フィジカル/物理的)では,ブラウザーによって 表示できない場合がありますが,「目立たせよ」(=ロジカル/論理的)というタグな らば,それぞれのブラウザで出来る範囲の「目立たせ方」で表示することが出来ます。 タグのスタイルには二つの概念があることを理解して使い分けてください。

○フィジカルスタイルのタグ
<B> </B> ;このタグに囲まれた文字を太字にします。
<I> </I> ;このタグに囲まれた文字を斜体にします。
<TT> </TT> ;タイプライタテキストを作ります。

○ロジカルスタイルのタグ
<STRONG> </STRONG> ;強調文字を作る;太字で表示
<EM> </EM> ;強調文字を作る;斜体で表示
<CODE> </CODE> ;コンピュータコードを表す

○動きのある文字表現をするタグについて(フィジカルスタイルの例)
BLINKはネットケープでのみ動作し,MARQUEEはエクスプローラのみで動作します。
<BLINK> </BLINK> ;あなたがネットスケープで見ると点滅します。
<MARQUEE> </MARQUEE> ;あなたがエクスプローラで見ると右から左に文字が流れます。

2.タグの「ネスティング」について
 タグがタグの中に置かれる状態をネスティング(入れ子)と言います。
<CENTER> </CENTER> と言う便利なタグがあります。これに囲まれた文字は中央に 表示されますが,<H1> 最大の文字で表示されます。</H1>を次のようにネスティン グすると最大の文字のまま中央に表示されます。
<CENTER><H1>最大の文字が中央に表示されます。</H1></CENTER>

最大の文字が中央に表示されます。


ネスティングには3つのルールがあります。

○ネスティングのルール1;書体を表すタグは内側に
<H1><CENTER>最大の文字が中央に表示されます。</CENTER></H1>

最大の文字が中央に表示されます。

このように書体を外側にしても表示は変わりませんが,一般的に書体は内側にする ことになっています。

○ネスティングのルール2;書体を表すフィジカルタグは二重使いが可能
<B><I>太字で斜体</I></B>
太字で斜体

○ネスティングのルール3;タグの順序は鏡転させる
<B><I>鏡転ルールを守っていない例</B></I>
鏡転ルールを守っていない例
上の例のように表示は変わりませんがタグの順序を鏡で映したように, 囲むようにします。
<tag1><tag2><tag3>_____言葉など___</tag1></tag2><tag3>

3.改行と行間に関わるタグの基礎知識
 行間を整えるタグは行の最後に置かれ,エンプティタグがほとんどです。 このタグには<BR><P><HR>の3つがあります。
 また,行間を整えるタグにはノンエンプティなプレフォーマットタグもあります。 このページもプレフォーマットタグに囲まれています。
○改行タグ;<BR>

○パラグラフタグ;<P>

○水平ライン;<HR>


○プレフォーマットタグ
<PRE></PRE>に囲まれた 部分はスペース,改行,行間などが原稿どおりに表示されますので,前の3つのエンプティ タグを使わなくてもすみます。

4.改行と行間に関わるタグの応用
○改行を防止するタグ;<NOBR></NOBR>
ノウラインブレイクです。これに囲まれた範囲では途中で改行しません。

こんなに長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長く長くどんなに長く書いても改行しないのです。
但し,<PRE></PRE>に囲まれた範囲ではこの指定は矛盾しますので無効です。 また,tableの幅を変更してしまうので注意が必要です。整形済文書である旨の指定です。

○アトリビュートについて
 これまでに出てきたタグのほとんどは<>の中に一つの単語しか出てきませんでしたが タグの中には,アトリビュート(属性)といって,タグの機能を調整したり,条件付けたり できるものがあります。<HR>のアトリビュートで変化に富んだ線が表示できる例を以下 に示します。

<HR>


<HR WIDTH=50%>
<HR SIZE=20>
<HR WIDTH=25% SIZE=5>
<HR ALIGN="left" WIDTH=30%>
<HR ALIGN="right" WIDTH=30%>
<HR NOSHADE>
<HR NOSHADE ALING="left" WIDTH=30% SIZE=10>
5.まとめと応用練習
 リンクの指定の方法は<A HREF="xxx.html>xxx.htmlのページに飛びます。</A> のようにします。この指定するファイルxxx.htmlがリンク先になければ行けませんから これを作ってからリンクを張ります。  これまでの学習した内容を踏まえてページを制作すればグラフィックスイメージは なくても相当表現力豊かなページができあがると思います。 自分でイメージを描いて自由に応用練習をしてみてください。タグは覚える必要は ありません。使いたいタグのページからコピーして貼り付けることができるからです。 かっこいいページがあったら技をどんどん盗むのが上達のコツです。

LESSON2| LESSON4