簡単なホームページの作り方　第４回  　　　　　　


４、タグの基本（ホームページはタグによってつくられる、これを覚えよう）

　　このようにＨＴＭＬファイルは、普通の文章とタグ（Ｔａｇ）で構成されます。
　タグとは、「この文字を太字にしなさい」とか「ここに罫線を入れなさい」という命令
　（コマンド）のようなものです。　このタグは、半角英数字で書きます。

　また、タグには開始タグと終了タグがあります。

　例えば<H1>文字</H1> では、前者の <H1> が開始タグ、</H1> が終了タグと
　いいます。
　これは文字の大きさを指定するもので、実際には次のように表示されます。

文字　　（これは、<H1>文字</H1>でマークアップされた　文字　です）

　　命令は、このように開始タグと終了タグに挟まれた部分にのみ有効です。　
このほかに、終了タグを必要としないエンプティタグがあります。
このエンプティタグは「ここに〜を入れる（作る）」というように単独で働きます。
　（付録としてタグ・オプション一覧表を最後に付けたので参考にしてください。）　

　例えば　改行　を表す　<BR>　は　</BR>　を必要としません。　

さらにタグにオプションを付けていろいろな機能を付加することができます。　
オプションは、開始タグまたはエンプティタグの＞の前に入力します。　

（例えば）　
　<FONT COLOR="#ff0000">文字色</FONT>　とか　<HR SIZE=80%>　などです。　　
　（付録ファイルのタグ・オプション一覧参照）または（文字色参照）　

ここで、「光の時代」のINDEXファイルの中身を見てみましょう。　
　　（kmham211/index.htm)　（ソースファイルを７行見る）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<HTML> 　　　　　　　 　 　　　　　　　　　　　　　（１）ﾌｧｲﾙの始まり
<HEAD> 　　 　 　 　　　　　　　　　　　　　 　　　（２）ヘッダの始まり
<TITLE>光の時代</TITLE> 　 　　　 　　　　　　　　（３）タイトルを表示
<META NAME=GENERATOR CONTENT="HOTALL Ver.4.0W"> （４）
</HEAD> 　　　　　　　 　　　　　　　　　　　　　　（５）ヘッダの終わり
<BODY BACKGROUND="gazou/back409.jpg">　　　　　　 （６）本文の始まり
<P> 　　　　　　　　　　　　　　　　　　　　　　　　（７）上下に空行を入れる
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　これは、タイトル「光の時代」の最初の７行ですが、（１）がHTMLファイルであることを表す
最初の記述です。INDEXファイルの最後には</HTML>が出てきます。

（２）と（５）でヘッダ情報を表示。
　ここでは、ＨＯＴＡＬというホームページ作成ソフトを使っているという情報と「光の時代」
　というタイトルが記述されています。

（３）の<TITLE>光の時代</TITLE>が「光の時代」としてタイトルバーに表示されて、それ
　以外のヘッダ情報の部分は、画面には表示されません。

（６）は、<BODY>タグのオプション記述の例です。
　　　（付録のタグ・オプション一覧参照）　
　 ここでは、画面のバックグラウンドにGAZOUディレクトリの中にある　BACK409.JPG
　という画像ファイルを表示させています。
　これがINDEXファイル全体のバックグランド画像となっています。

（７）の<P>タグは改行して１行空けるものです。よく似たものに<BR>がありますが、これは
　単に改行するだけです。ＨＴＭＬでは、普通のエディタで入れた改行は無視されるので、
　こうした改行の　タグ　を入れなければなりません。
　（ＨＯＴＡＬＬなどのホームページ作成ソフトでは、普通にワープロ感覚で文字入力して行け
　ば、この改行タグなどが自動的に付けられます。）


　最後に（背景）色を出す方法について見ることにします。

（６）の例では、特定の画像ファイルを使っていますが、ＨＴＭＬではＲＧＢの混色によって
　様々な色が表現できます。

　色の指定は、＃rrggbb（ｒ＝Red　g=Green　b＝Blue）の形で行います。

例えば、#ffffff （白色）､#000000（黒色）､#ff0000（赤色）､#00ff00（緑色）
　　　　　#0000ff（青色）､#ffff00（黄色）､#ccff00（黄緑色）､#ff9900（橙色）
　　　　　#ff00ff（紫色）､#ffbbbb（桃色）などです。

詳細はこちら「自分のホームページを作ろう」の（カラー表）を参照。

背景色の表し方(書式)は、以下のようになります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<BODY BGCOLOR="#ccff00" TEXT="#0000ff">
これは、ページの色は、黄緑色。文字の色は青色に指定しています。
</BODY>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　
　実際にみてみましょう。（b:\kmham211/hazime2.html）

また、参考に尾西市商店街連合会の「ベスカ」協同組合のページを見てみましょう。
　　　　　　　　　　　（kmham211/ybesuka.htm)

ついでにccff00（黄緑色）をffff00に代えたらどのように表示されるか実際に調べて
みましょう。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　
★最後にカラーテストを試して見ましょう。アプレット作品ですが、カラーの動きがわかります。
　カラーテストへ

以下、次回(第５回は、ここをクリックしてください。）トップへ戻る
ホーム　　　　　　　　　　　タグ一覧表