【２】ページ作成の基礎

○復習
　☆『タグ』の入力は、記号も含めてすべて「半角」で入力します。
　　文字を入力した後にタグを入力するとき、「半角」に切り替えることを忘れること
　　が多々あります。全角ではタグとして扱われませんので注意して下さい。

　★注意：この文章では『タグ』は「全角」で表しています。メールでは半角にしてい
　　　　　たところも全角にしていますのでご注意下さい。
　　　　《半角にすると実際の命令として反応してしまい、画面がその命令に従って変
　　　　　化してしまうのですべて「全角」にしました。》

○基礎知識

１．多くのタグには『属性』があり、これにより命令の内容をさらに細かく指示するこ
　　とができます。

２．属性は、開始タグの［＞］の前に半角のスペースを入れ、続けて記述し、その後に
　　［＝］をつけて ["]["] でくくった『値』を記述します。

３．属性は、複数指定することが可能で、半角スペースで区切り、並べて記述します。
　　なお、属性の順序は問いません。

４．タグの中にさらにタグを指定することもできます。これを『入れ子』といい、複数
　　のタグで囲まれた内容はすべてのタグの命令に従って表示されます。

○ＨＴＭＬ入力

１．ページタイトルを入力します。

　ａ．「ｈｐ」フォルダを開き、中の「index.html」ファイルを開き、インターネット
　　　エクスプローラを起動させます。

　ｂ．［表示］、［ソース］を選択し、「メモ帳」を起動させ、「index.html文書」を
　　　表示させます。

　ｃ．＜ｈｔｍｌ＞と＜ｂｏｄｙ＞の間に＜ｈｅａｄ＞＜／ｈｅａｄ＞と入力します。
　　　｛見やすくするために、適当に [Enter]を押して改行して下さい。｝

　☆この＜ｈｅａｄ＞＜／ｈｅａｄ＞というタグは、文書に関する情報を入力するため
　　のタグで、間にページタイトルなどの情報を入力します。

　ｄ．＜ｈｅａｄ＞と＜／ｈｅａｄ＞の間に＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞と入力し
　　ます。

　☆この＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞というタグは、タイトルバーを定義するタグ
　　です。

　ｅ．＜ｔｉｔｌｅ＞と＜／ｔｉｔｌｅ＞の間に、生活者主権の会　と入力します。

　ｆ．［ファイル］を［上書き保存］し、「ホームページ」の方に画面表示を切り替え
　　　［更新マーク］をクリックすると、タイトルバーのページタイトルが「生活者主
　　　権の会」に変わります。

２．背景色と標準文字色を設定します。

　ａ．メモ帳の画面に戻し、＜ｂｏｄｙ＞の＞の前に、半角スペースを入れ、続けて
　　　ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｃｃ”　と入力します。

　☆＜ｂｏｄｙ＞の属性として、背景色の「bgcolor」を入力し、色を「="#ffffcc"」
　　で指定します。

　☆色は「＃」と６つの英数字（０〜９、ａ〜ｆ）の組み合わせで指定します。
　　　　　　　　　　　　　　　　　　　＊＊＊テキストＰ２２２〜２２５参照＊＊＊
　　　　
　ｂ．さらに続けて半角スペースを入れ、ｔｅｘｔ＝"＃８０００００"と入力します。 

　☆「text」も＜ｂｏｄｙ＞の属性で、標準の文字色を指定します。
　　　　　　　　　　　　　　　　　　　　　　　＊＊＊テキストＰ２２８参照＊＊＊
　ｃ．ファイルを上書き保存し、ホームページに画面を切り替え、更新します。すると
　　　背景色が「ベージュ系」に、文字の色が「くり色」に変わります。

３．改行を設定します。

　ａ．文字列を改行したいときは、＜ｂｒ＞　と入力します。

　☆＜ｂｒ＞は、『終了タグ』を持たないタグです。

　ｂ．「生活者主権の会」の後ろに、＜ｂｒ＞＜ｂｒ＞と入力します。これで改行した
　　　後にさらに一行スペースを取ったことになります。

　ｃ．[Enter] で、メモ帳を改行した後に、平成維新の誓い　と入力し、＜ｂｒ＞で改
　　　行させ、さらにメモ帳を見やすくするために [Enter] を押します。

　ｄ．続けて、生活者通信４月号Ｐ１に掲載されている「平成維新の誓い」の本文を入
　　　力していきます。
　　　なおその際、Ｐ１と同じところで改行するように＜ｂｒ＞を入れ、[Enter] で見
　　　やすくしておいて下さい。
　　　また、最後の「誓います。」の後ろには＜ｂｒ＞を３回入れて下さい。

　☆「私達」の前にスペースが入っていますが、これは全角のスペースを使います。半
　　角のスペースはＨＰに反映しません。ですから、半角スペースを２回入れてもＨＰ
　　上にはスペースは空きません。

　ｅ．ファイルを上書き保存し、ホームページに画面を切替え、更新し、入力が間違っ
　　　ていないか確認します。間違っていたら「メモ帳」に切替えて訂正して下さい。

　★ＨＰ上では、英数字、カタカナ、句読点等は一回り小さく表示（印刷）されるので
　　桁には『ずれ』が生じてしまいます。

　ｆ．続けて「平成維新憲章」も「平成維新の誓い」同様に入力してみて下さい。

　　（委員会のＨＰの、第２回学習会−その２の完成ＨＰの画面と同じ表示なればＯＫ
　　　です。ただし、ＨＰの方には、無料サイトのため下部に広告が入っています。）


　　　　　　　　　　　　　　☆　☆　☆　☆　☆


○サイト上のホームページの『ＨＴＭＬ』文書の確認

　☆サイト上のホームページもまったく同じように、［表示］［ソース］を選択して、
　　「メモ帳」を起動させることによって、そのホームページの「ＨＴＭＬ文書」を見
　　ることができます。

　☆《その２》の「ＨＴＭＬ文書」も呼び出して確認してみて下さい。
　　ただし、《その２》には、広告文の「ＨＴＭＬ」も入っています。
　　＜ｂｏｄｙ＞の後の＜！−−　Ｓｔ−ＨＰ−Ｈ　−−＞から
　　　　　　　　　　　＜！−−　Ｅｎ−ＨＰ−Ｈ　−−＞の間と、
　　＜／ｂｏｄｙ＞の前の＜！−−　Ｓｔ−ＨＰ−Ｆ　−−＞から
　　　　　　　　　　　　＜！−−　Ｅｎ−ＨＰ−Ｆ　−−＞の間は、
　　広告文の「ＨＴＭＬ」なのでそれは無視して下さい。

　　　　　　　↓

　◎これで第２回目は終了です。

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会【その３】へ

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会　目次へ