（２）テキストのレイアウトを指定するタグ

ＨＴＭＬでもワープロ文書と同じように、ホームページに表示するテキス トの見出し、段落、箇条書き、文字の大きさ・スタイルなど、レイアウト を指定することができます。

（例）




（クリックして下さい）



@ 見出し

　　　・書き方

　　　＜Ｈｎ＞ 〜見出し〜 ＜／Ｈｎ＞
（ ｎは１〜６まで ）　　　　　　　　　　　　




（クリックして下さい）

　　　・ＨＴＭＬ文

<HTML>
<HEAD><TITLE>見出し</TITLE>
</HEAD>
<BODY>
<H1>見出し１（章）</H1>
一番大きい文字が使われます。
<H2>見出し２（節）</H2>
見出しの前後は自動的に改行されます。
<H3>見出し３（項）</H3>
見出しの文字は太文字です。
<H4>見出し４（中見出し）</H4>
文字の大きさはパソコンやブラウザの設定で<BR>
少し異なります。
<H5>見出し５（小見出し）</H5>
Netscapeでは文字のフォントや大きさを変更できます。
<H6>見出し６（表題）</H6>
ただし、個々の見出しの文字を変更することはできません。<BR>
全体的に大きくなったり小さくなったりします。
</BODY>
</HTML>

　　　（注）これ以降の例では、関係する部分のみを記載します。



A 文字の大きさ

　　　・書き方

＜ＦＯＮＴ　ＳＩＺＥ＝“ｎ”＞〜フォントを指定したい文字列〜＜／ＦＯＮＴ＞
(ｎ＝1〜７、サイズ１が1番小さい文字、サイズ７が一番大きい文字）　　　　　　




（クリックして下さい）

　　　・ＨＴＭＬ文

<H2>フォントサイズの指定（サイズ１〜サイズ７）</H2>
<FONT　SIZE="1">サイズ１</FONT><FONT　SIZE="2">サイズ２</FONT>
<FONT　SIZE="3">サイズ３</FONT><FONT　SIZE="4">サイズ４</FONT>
<FONT　SIZE="5">サイズ５</FONT><FONT　SIZE="6">サイズ６</FONT>
<FONT　SIZE="7">サイズ７</FONT>と変わります。



　　

　［練習問題１］

さっそく練習してみましょう。

　　　　　（例）




（クリックして下さい）



（テキストデータ）

２．インターネットで何ができるの

（１）「ＷＷＷ(World Wide Web)」を活用した 情報収集

　現在、インターネットのＷＷＷを利用して次の ような分野の情報収集が可能。今後、ますます その内容は多様化していくものと考えられる。

ニュース・ラジオ、テレビ
・新聞、雑誌、出版社
製品情報・コンピュータ、インターネット関連
・家電、自動車　　など
生活情報・観光、旅行、スポーツ
・趣味、娯楽
・音楽、映画、美術、文学
・薬、医療、食、酒
・政治・経済、教育、求人案内
・行政、地域情報　　など
ショッピング・百貨店、専門店、通信販売
・仮想商店街　　など

(２) 「電子メール」を利用したコミュニケー ション

友人・知人とのコミュニケーション

社内外との業務連絡

ＷＷＷから得た情報に関しての質問、意見、 要望など

(３) 「ホームページ」による情報発信・ネッ トワーク作り

　よりよい情報は、情報を発信する人のところに 集まってきます。
　役に立つ情報、面白い情報など個性的なホーム ページを開設すれば、そこから情報のネットワー クが広がっていくでしょう。
（ＨＴＭＬ文書）
<HTML>
<HEAD>
<TITLE>２．インターネットで何ができるの</TITLE>
</HEAD>
<BODY>

<H2>２．インターネットで何ができるの</H2>

<H3>（１）「ＷＷＷ(World Wide Web)」を活用した情報収集</H3>
　現在、インターネットのＷＷＷを利用して次のような分野の情報収集が可能。今後、ますますその内容は多様化していくものと考えられる。

　 ニュース・ラジオ、テレビ
　　　 ・新聞、雑誌、出版社
　 製品情報・コンピュータ、インターネット関連
　　　 ・家電、自動車　　など
　 生活情報・観光、旅行、スポーツ
　　　 ・趣味、娯楽
　　　 ・音楽、映画、美術、文学
　　　 ・薬、医療、食、酒
　　　 ・政治・経済、教育、求人案内
　　　 ・行政、地域情報　　など
　 ショッピング・百貨店、専門店、通信販売
　　　 ・仮想商店街　　など

<H3>(２) 「電子メール」を利用したコミュニケーション</H3>

　 友人・知人とのコミュニケーション

　 社内外との業務連絡

　 ＷＷＷから得た情報に関しての質問、意見、要望など

<H3>(３) 「ホームページ」による情報発信・ネットワーク作り</H3>

　よりよい情報は、情報を発信する人のところに集まってきます。
　役に立つ情報、面白い情報など個性的なホームページを開設すれば、そこから情報のネットワークが広がっていくでしょう。

</BODY>
</HTML>


B 段落、改行、罫線

　　　・書き方

＜Ｐ＞　〜段落〜　＜／Ｐ＞　　　・・・段落

〜〜〜　＜ＢＲ＞　　　　　　　　・・・改行

＜ＨＲ＞　　　　　　　　　　　　・・・罫線
なお、＜ＢＲ＞、＜ＨＲ＞タグは、その機能から閉じるタグはありません。
＜Ｐ＞タグも、閉じるタグ＜／Ｐ＞を省略することが可能ですが、つけた方 が分かりやすいでしょう。




（クリックして下さい）

　　　・ＨＴＭＬ文

<H2>段落、改行</H2>
見出しがついた文は１つの段落と見なされます。
<H2>段落を分ける</H2>
<P>段落１。</P>
<P>段落２。</P>
<H2>途中で改行</H2>
段落の途中で強制的に改行<BR>することも、できます。<BR>
改行しましたね。
<H2>罫線（水平線）</H2>
文中に罫線を入れると見やすくできます。水平線を入れると 自動的に改行されます。<HR>
普通は章、節、あるいは段落の区切りなどに用います。



C 段落の位置

見出し、段落、罫線等は、通常左詰めですが、中央揃え（センタリング）、 右詰めなどの行揃えを設定することもできます。

　　　・書き方

＜Ｈｎ　　ＡＬＩＧＮ＝“行揃え”＞〜見出し〜＜／Ｈｎ＞　　・・・見出し
＜Ｐ　　　ＡＬＩＧＮ＝“行揃え”＞〜段落〜＜／Ｐ＞　　　　・・・段落

　　　行揃え：ｌｅｆｔ … 左詰め（標準）
　　　　　　：ｃｅｎｔｅｒ… 中央揃え
　　　　　　：ｒｉｇｈｔ … 右詰め
　　ただし、見出し、段落のＡＬＩＧＮオプションが有効なのは
　　Ｎｅｔｓｃａｐｅのみです。

＜ＣＥＮＴＥＲ＞ 〜中央揃えしたい個所〜 ＜／ＣＥＮＴＥＲ＞





（クリックして下さい）

　　　・ＨＴＭＬ文

<H2>段落の位置</H2>
<H4　ALIGN="center">見出し（中央揃え）</H4>
<P　 ALIGN="left">段落１（左詰め）。</P>
<P　 ALIGN="center">段落２（中央揃え）。</P>
<P　 ALIGN="right">段落３（右詰め）。</P>
<HR>
<CENTER>
まとめて中央揃え
<H4>見出し１</H4>
段落１。
<H4>見出し２</H4>
段落２。
</CENTER>




［応　用］

　ページの背景や本文の色を変える方法

　　　・書き方

＜ＢＯＤＹ ＴＥＸＴ　＝"#rrggbb"　・・・文字の色
　　　　　　ＬＩＮＫ　＝"#rrggbb"　・・・リンク部分の色
　　　　　　ＶＬＩＮＫ＝"#rrggbb"　・・・行ったことあるリンク部分の色
　　　　　　ＡＬＩＮＫ＝"#rrggbb"　・・・リンクをクリックした時の色
　　　　　　ＢＧＣＯＬＯＲ＝"#rrggbb"　・・・背景色
　　　　　　ＢＡＣＫＧＲＯＵＮＤ＝"画像ファイル名"＞　・・・背景に貼る画像ファイル名

ｒｒｇｇｂｂ：１６進数で色を指定。指定を省略した項目は ブラウザが設定した標準的な色で表示します。


（例）背景を白、文字を黒にする。




（クリックして下さい）

　　　・ＨＴＭＬ文

<HTML>
<HEAD><TITLE>背景色、文字の色</TITLE>
</HEAD>
<BODY　TEXT="#000000"　BGCOLOR="#ffffff">
<H2>ページの背景色や文字の色を変える</H2>
背景は白、文字は黒で表示します。
</BODY>
</HTML>


（参考）色の指定について

色の指定には、光の３原色であるＲＧＢ(赤緑青)の それぞれを２桁の１６進数００〜ｆｆを用いて２５６ 段階の階調まで指定することができます。 １６進数のかわりに色名でも指定できます。
例えば、基本的な色の指定は下記のようになります。

　　色　　 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文字の色

　　　・書き方

＜ＦＯＮＴ　ＣＯＬＯＲ＝"#rrggbb"＞〜色を指定したい文字列〜
　＜／ＦＯＮＴ＞

（例）




（クリックして下さい）

　　　・ＨＴＭＬ文

<H2>文字の色</H2>
普通の色（黒色）
<P><FONT COLOR="#ff0000">赤色</FONT></P>
<P><FONT COLOR="#0000ff">青色</FONT></P>
<P><FONT COLOR="yellow">黄色</FONT></P>


　・背景にシンプルな画像ファイルを貼り付ける。




（クリックして下さい）

　　　・ＨＴＭＬ文

<HTML>
<HEAD><TITLE>画像を背景に</TITLE>
</HEAD>
<BODY　BACKGROUND="st-back.gif">
<H2>背景に画像を貼り付ける</H2>
<P>背景に画像を貼り付けると雰囲気が</P>
<P>がらっと変わります。</P>
<P>シンプルなほうがかえって綺麗にみえます。</P>
</BODY>
</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>



　　[目次へ]　[次へ]




GigaHit