(2)テキストのレイアウトを指定するタグ
HTMLでもワープロ文書と同じように、ホームページに表示するテキス トの見出し、段落、箇条書き、文字の大きさ・スタイルなど、レイアウト を指定することができます。
(例)
@ 見出し
・書き方
( nは1〜6まで )
<Hn> 〜見出し〜 </Hn>
・HTML文
(注)これ以降の例では、関係する部分のみを記載します。
<HTML>
<HEAD><TITLE>見出し</TITLE>
</HEAD>
<BODY>
<H1>見出し1(章)</H1>
一番大きい文字が使われます。
<H2>見出し2(節)</H2>
見出しの前後は自動的に改行されます。
<H3>見出し3(項)</H3>
見出しの文字は太文字です。
<H4>見出し4(中見出し)</H4>
文字の大きさはパソコンやブラウザの設定で<BR>
少し異なります。
<H5>見出し5(小見出し)</H5>
Netscapeでは文字のフォントや大きさを変更できます。
<H6>見出し6(表題)</H6>
ただし、個々の見出しの文字を変更することはできません。<BR>
全体的に大きくなったり小さくなったりします。
</BODY>
</HTML>
A 文字の大きさ
・書き方
(n=1〜7、サイズ1が1番小さい文字、サイズ7が一番大きい文字)
<FONT SIZE=“n”>〜フォントを指定したい文字列〜</FONT>
・HTML文
<H2>フォントサイズの指定(サイズ1〜サイズ7)</H2>
<FONT SIZE="1">サイズ1</FONT><FONT SIZE="2">サイズ2</FONT>
<FONT SIZE="3">サイズ3</FONT><FONT SIZE="4">サイズ4</FONT>
<FONT SIZE="5">サイズ5</FONT><FONT SIZE="6">サイズ6</FONT>
<FONT SIZE="7">サイズ7</FONT>と変わります。
[練習問題1]
さっそく練習してみましょう。
(例)
(テキストデータ)
|
(HTML文書)
|
B 段落、改行、罫線
・書き方
なお、<BR>、<HR>タグは、その機能から閉じるタグはありません。
<P> 〜段落〜 </P> ・・・段落
〜〜〜 <BR> ・・・改行
<HR> ・・・罫線
<P>タグも、閉じるタグ</P>を省略することが可能ですが、つけた方 が分かりやすいでしょう。
・HTML文
<H2>段落、改行</H2>
見出しがついた文は1つの段落と見なされます。
<H2>段落を分ける</H2>
<P>段落1。</P>
<P>段落2。</P>
<H2>途中で改行</H2>
段落の途中で強制的に改行<BR>することも、できます。<BR>
改行しましたね。
<H2>罫線(水平線)</H2>
文中に罫線を入れると見やすくできます。水平線を入れると 自動的に改行されます。<HR>
普通は章、節、あるいは段落の区切りなどに用います。
C 段落の位置
見出し、段落、罫線等は、通常左詰めですが、中央揃え(センタリング)、 右詰めなどの行揃えを設定することもできます。・書き方
<Hn ALIGN=“行揃え”>〜見出し〜</Hn> ・・・見出し
<P ALIGN=“行揃え”>〜段落〜</P> ・・・段落
行揃え:left … 左詰め(標準)
:center… 中央揃え
:right … 右詰め
ただし、見出し、段落のALIGNオプションが有効なのは
Netscapeのみです。
<CENTER> 〜中央揃えしたい個所〜 </CENTER>
・HTML文
<H2>段落の位置</H2>
<H4 ALIGN="center">見出し(中央揃え)</H4>
<P ALIGN="left">段落1(左詰め)。</P>
<P ALIGN="center">段落2(中央揃え)。</P>
<P ALIGN="right">段落3(右詰め)。</P>
<HR>
<CENTER>
まとめて中央揃え
<H4>見出し1</H4>
段落1。
<H4>見出し2</H4>
段落2。
</CENTER>
[応 用]
ページの背景や本文の色を変える方法・書き方
<BODY TEXT ="#rrggbb" ・・・文字の色
LINK ="#rrggbb" ・・・リンク部分の色
VLINK="#rrggbb" ・・・行ったことあるリンク部分の色
ALINK="#rrggbb" ・・・リンクをクリックした時の色
BGCOLOR="#rrggbb" ・・・背景色
BACKGROUND="画像ファイル名"> ・・・背景に貼る画像ファイル名
rrggbb:16進数で色を指定。指定を省略した項目は ブラウザが設定した標準的な色で表示します。
(例)背景を白、文字を黒にする。
・HTML文
<HTML>
<HEAD><TITLE>背景色、文字の色</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<H2>ページの背景色や文字の色を変える</H2>
背景は白、文字は黒で表示します。
</BODY>
</HTML>
(参考)色の指定について
色の指定には、光の3原色であるRGB(赤緑青)の それぞれを2桁の16進数00〜ffを用いて256 段階の階調まで指定することができます。 16進数のかわりに色名でも指定できます。
例えば、基本的な色の指定は下記のようになります。
色 RGB値 色名 色 RGB値 色名 -------------------------------------------------------- 黒 #000000 black 紺 #000080 navy 白 #ffffff white 深緑 #008080 teal 赤 #ff0000 red 緑 #008000 green 黄緑 #00ff00 lime 茶 #800000 maroon 青 #0000ff blue 紫 #800080 purple ピンク #ff00ff fuchsia うぐいす色 #808000 olive 黄 #ffff00 yellow 灰色 #808080 gray 水色 #00ffff aqua 銀色 #c0c0c0 silver
なお、色の指定と実際の色の表示についての詳しい 内容が次のホームページで紹介されています。
http://www.phoenix.net/~jacobson/pages/rgbhex.html
D文字の色
・書き方
<FONT COLOR="#rrggbb">〜色を指定したい文字列〜
</FONT>
(例)
・HTML文
<H2>文字の色</H2>
普通の色(黒色)
<P><FONT COLOR="#ff0000">赤色</FONT></P>
<P><FONT COLOR="#0000ff">青色</FONT></P>
<P><FONT COLOR="yellow">黄色</FONT></P>
・背景にシンプルな画像ファイルを貼り付ける。
・HTML文
<HTML>
<HEAD><TITLE>画像を背景に</TITLE>
</HEAD>
<BODY BACKGROUND="st-back.gif">
<H2>背景に画像を貼り付ける</H2>
<P>背景に画像を貼り付けると雰囲気が</P>
<P>がらっと変わります。</P>
<P>シンプルなほうがかえって綺麗にみえます。</P>
</BODY>
</HTML>
[応 用]
いろいろな罫線の引き方・書き方
<HR SIZE=“ピクセル数” ・・・線の太さ
WIDTH=“ピクセル数または%” ・・・線の長さ
ALIGN=“行揃え” ・・・線の位置
NOSHADE> ・・・影をつけない線
・HTML文
<CENTER>
<H2>いろいろな罫線</H2>
<BR>
普通の線
<HR>
線の太さを変える
<HR SIZE="5">
線の長さを半分に
<HR WIDTH="50%">
<P ALIGN="right">今度は右詰に</P>
<HR WIDTH="50%" ALIGN="right">
<P ALIGN="left">左詰にして</P>
<HR WIDTH="50%" ALIGN="left">
線を黒く
<HR NOSHADE>
</CENTER>
[目次へ] [次へ]