第１章　ＨＴＭＬの基本

ＨＴＭＬの構造

　　　ここではＨＴＭＬの基本的な構造に使われるタグの説明をします。
　　　構造を理解してまずはＨＴＭＬファイルを作ってみましょう。

ファイルの宣言
＜ＨＴＭＬ＞〜＜／ＨＴＭＬ＞

　　このタグは「このファイルはＨＴＭＬ形式です」という意味で
　　ここにＨＴＭＬを書いていきます。

ファイル情報の宣言
＜ＨＥＡＤ＞〜＜／ＨＥＡＤ＞

　　このタグは「ファイルに関する情報」を書く部分で
　　ここにタイトルやコメント等を書いていきます。

タイトル宣言
＜ＴＩＴＬＥ＞〜＜／ＴＩＴＬＥ＞

　　ここにホームページのタイトルを書きます。

内容の入力宣言
＜ＢＯＤＹ＞〜＜／ＢＯＤＹ＞

　　ここの内容がインターネット上に公開されます。
　　ここに自分の書きたい内容を書いていきます。
　　BODYタグには、色々なオプションがあります。

背景と配色

　　　ホームページの背景に任意の色や画像を表示します。
　　　背景を変えてページを鮮やかにしてみましょう。

背景に画像を使う場合
＜BODY BACKGROUND="画像"＞

　　このタグは背景に任意の画像を表示させます。
　　”画像”のところに表示させたい画像ファイル(GIFファイル、JPEGファイル)
　　の絶対パスか相対パスを指定します。

　　　※絶対パス・・・画像ファイルのある場所をURLのはじめから書く。
　　　　　　　　　例）/usr/etc/local/httpd/pubc_html/image/画像名.gif

　　　※相対パス・・・画像ファイルのある場所がページがおいてある場所から近い場合に
　　　　　　　　　　　　使います。
　　　　　　　　　例）./image/画像名.gif　または　image/画像名.gif

背景に色を指定する場合
＜BODY BGCOLOR="色"＞

　　このタグは背景に任意の色を表示させます。
　　”色”のところに表示させたい色を16進数か色名を英語で指定します。

文字を装飾する

　　　文字を装飾するタグを紹介します。
　　　文字を装飾することによって見やすくて綺麗なページを作りましょう。

文字の大きさを変える
＜H数字＞〜＜/H数字＞、＜FONT SIZE="数字"＞〜＜/FONT＞

＜H数字＞〜＜/H数字＞

　　1〜6までの数字で文字の大きさを設定します。
　　数字が小さくなるほど文字は大きくなります。

＜FONT SIZE="数字"＞〜＜/FONT＞

　　1〜7までの数字で文字の大きさを設定します。
　　数字が大きくなるほど文字は大きくなります。

文字の色を変える
＜FONT COLOR="色"＞〜＜/FONT＞

＜FONT COLOR="色"＞〜＜/FONT＞

　　”色”のところに表示させたい色を16進数か色名を英語で指定します。

文字のフォントを変える
＜B＞〜＜/B＞、＜STRONG＞〜＜/STRONG＞
＜I＞〜＜/I＞、＜ADDRESS＞〜＜/ADDRESS＞

ボールド体
＜B＞〜＜/B＞、＜STRONG＞〜＜/STRONG＞

　　ボールド体で表示します。
　　文字を強調するような見やすい太字になります。

イタリック体
＜I＞〜＜/I＞

　　イタリック体で表示します。
　　文字が斜体になります。

address
＜ADDRESS＞〜＜/ADDRESS＞

　　イタリック体と同じものですがE-mailアドレスなどを書く時に使います。 　　

その他のタグ
＜BIG＞〜＜/BIG＞、＜SMALL＞〜＜/SMALL＞、
＜U＞〜＜/U＞、＜TT＞〜＜/TT＞

大きな文字
＜BIG＞〜＜/BIG＞

　　周囲の文字よりも相対的に大きくします。

小さな文字
＜SMALL＞〜＜/SMALL＞

　　周囲の文字よりも相対的に小さくします。

下線を引く
＜U＞〜＜/U＞

　　下線（アンダーライン）がつきます。

固定ピッチフォント
＜TT＞〜＜/TT＞

　　アルファベットを１バイト文字として固定します。

文章を整理する

　　　文章をレイアウトするタグを紹介します。
　　　文章をきれいにレイアウトして、より一層見やすいページにしましょう。

改行する
＜BR＞

　　改行したい行の一番最後に改行タグを書きます。
　　文章が改行されて、見栄えが良くなります。

段落を変える
＜P＞

　　空行を使いたい時に使います。
　　＜BR＞を２回続けて書くのと同じ効果です。

文章を整頓する
＜CENTER＞〜＜/CENTER＞、
＜P ALIGN="CENTER|RIGHT|LEFT"＞〜＜/P＞、
＜H数字 ALIGN="CENTER|RIGHT|LEFT"＞
〜＜/H数字＞、
＜IMG SRC="画像データ" ALIGN="CENTER|RIGHT|LEFT"＞

センタリング
＜CENTER＞〜＜/CENTER＞
＜P ALIGN="CENTER"＞〜＜/P＞
＜H数字 ALIGN="CENTER"＞〜＜/H数字＞
＜IMG SRC="画像データ" ALIGN="CENTER"＞

　　指定タグで囲まれたテキストやイメージファイルをセンタリングします。

右寄せ、左寄せ
＜P ALIGN="RIGHT|LEFT"＞〜＜/P＞
＜H数字 ALIGN="RIGHT|LEFT"＞〜＜/H数字＞
＜IMG SRC="画像データ" ALIGN="RIGHT|LEFT"＞

　　指定タグで囲まれたテキストやイメージファイルを右寄せ、左寄せしま
　　す。

リストを付ける

　　　リストを使うときのタグを紹介します。
　　　項目などの列挙に使い、うまく区切りましょう。

ポピュラーなリスト
＜UL＞＜LI＞〜＜/UL＞

　　＜UL＞タグは、＜LI＞で指定した行の頭に記号を付けます。
　　記号はオプションにTYPEを設定すると帰ることができます。

　※TYPEの設定

＜UL TYPE="DISK"＞	行頭記号●
＜UL TYPE="CIRCLE"＞	行頭記号○
＜UL TYPE="SQUARE"＞	行頭記号■

番号付きリスト
＜OL＞＜LI＞〜＜/OL＞

　　＜OL＞タグは、行頭記号が番号になるリストタグです。
　　また、オプションを付けることで初期値や記号が設定できます。

　※TYPEの設定＜OL TYPE="l,A,a,I,i" STARAT="初期値"＞

＜OL TYPE="l"＞	行頭記号:数字
＜OL TYPE="A"＞	行頭記号:大文字アルファベット
＜OL TYPE="a"＞	行頭記号:小文字アルファベット
＜OL TYPE="I"＞	行頭記号:大文字ローマ字
＜OL TYPE="i"＞	行頭記号:小文字ローマ字

項目リスト
＜DL＞＜DT＞〜＜DD＞〜＜/DL＞

　　＜DL＞タグは、行頭記号を付けずに表題と項目名、内容などを列挙します。
　　＜DT＞の後に表題を、＜DD＞の後に内容を書きます。

表を挿入する

　　　表を作るタグを紹介します。
　　　ページに表を作って、更に見やすいページにしましょう。

表の作成
＜TABLE＞＜TR＞＜TD＞〜＜/TD＞＜/TR＞＜/TABLE＞

　　＜TR＞〜＜/TR＞タグは行、＜TD＞〜＜/TD＞は列のセルを表します。
　　＜TD＞〜＜/TD＞の代わりに＜TH＞〜＜/TH＞で項目名を指定することもで
　　きます。
　　＜TABLE BORDER＞にする事で枠（罫線）ができます。

表に色着けする
＜TD BGCOLOR="色"＞

　　”色”のところに表示させたい色を16進数か色名を英語で指定するとセル内に
　　色を着けられます。

罫線の種類
＜TABLE BORDER=値＞、
＜TABLE CELLSPACING=値＞、
＜TABLE CELLPADDING=値＞、
＜TABLE WIDTH=値 HEIGHT=値＞

　　＜TABLE＞タグにオプションを付けることで様々な罫線が使えます。

※オプションの設定

＜TABLE BORDER=値＞	外枠の太さを指定
＜TABLE CELLSPACING=値＞	罫線の太さを指定
＜TABLE CELLPADDING=値＞	罫線と文字の間隔を指定
＜TABLE WIDTH=値＞	表の横幅を指定
＜TABLE HEIGHT=値＞	表の縦幅を指定

　"値"にピクセル数を指定します。

文字の位置
＜TD VALIGN="TOP|BOTTOM|CENTER"＞

　セル内の文字の位置をオプションにより指定できます。

※オプションの設定

＜TD VALIGN="TOP"＞	セルの一番上に表示
＜TD VALIGN="BOTTOM"＞	セルの底に表示
＜TD VALIGN="CENTER"＞	セルの中央に表示

　"値"にピクセル数を指定します。

フレームを切る

　　　フレームを切り、画面を分割して使うタグを紹介します。
　　　うまく画面分割して、機能的で見やすいページにしましょう。

フレームの基本
＜＞

ホームへ戻る

まだまだ工事中です。（UPしてるけど^^;;） 今後の予定ではサンプルも見られるようにしますので、
気長にお待ち下さい。