基本タグ集
「ＨＴＭＬ」での基本を確認の意味でもう一度。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
という記述を「メモ帳」の一番最初でします。これらで「これはＨＴＭＬ文書でスタイルとタイトルはこうです。画面に表示するのはここからです」という宣言をしています。そしてこれ以降にいまから紹介するタグを使ってページを構成していくのです。ちなみに、<HTML>や<BODY>は閉じなくても勝手に閉じてもらえますがちゃんと自分でいちばーん最後に閉じておきましょう。
それではこれらの基本を踏まえた上でタグを覚えていきましょう。
※黒字の部分はコピーして使うことができます。
基本的なとこですね。これは必ず押さえましょう。
文字に関しては<FONT>というタグを使います。（もちろん</FONT>も必要です）
例えば「こんにちは」の文字のサイズを小さくして赤色にしたい！というばあい。
<FONT SIZE="2" COLOR="RED">となります。これを実際に表示させると、 こんにちは こうなります。
こんにちは
</FONT>
※黒字のところをコピーして自分のメモ帳に張ればそのまま使えます。
（コピーはコピーしたい部分をドロップしマウスの右ボタンをクリックします。そして「コピー」を選択。そのあと自分のメモ帳に張り付けたい部分へカーソルを持っていき、右クリックの「張り付け」を選択）
ちなみにフォントサイズは１〜７まで。７が最大です。（標準は３）
色（カラー）はとにかくいっぱいあります。#FF5500というようにアルファベットと数字で表すものとREDのように英語で表すものとがあります。大した違いはないです、たぶん。（よく知らない）ちなみに、何も指定しなければ黒になります。
そのページ内に書かれている全ての文字色を指定したい場合は次のように記述します。
<BODY TEXT="指定したい色">
指定したい色の記述の仕方はアルファベット＋数字でも英語でも構いません。<BODY>タグ内に
記述します。
ここに色見本があります。→
ＧＯ
| 太字 | <B>と</B>の間の文字を太字にします。 |
| 斜体 | <I>と</I>の間の文字をイタリック（斜体）にします。 |
| アンダーライン | <U>と</U>の間の文字にアンダーラインをひきます。 |
| <S>と</S>の間の文字に取消線をひきます。 | |
| ちょっと大きく | <BIG>と</BIG>の間の文字を標準より１ポイント大きくします。 |
| ちょっと小さく | <SMALL>と</SMALL>の間の文字を標準より１ポイント大きくします。 |
見出し |
<H4>と</H4>の間の間の文字を見出しとして強調します。サイズはＨ１〜Ｈ６まで。最大はＨ１です。 |
「メモ帳」で書いたときの改行やスペースは反映（表示）されませんよね。では一体どーやったら改行ができるんだ、ということですが。これは簡単です。<BR>というタグをひとつ置けばそれで改行がされます。終了タグの必要はありません。例えば…、
いいお天気ですねぇ。<BR>まったくですねぇ。
といった具合です。
もうひとつ、改行＋１行空けるというタグが存在します。これは<P>と書くのですが終了タグ</P>が必要です。…ぶっちゃけた話なくても大丈夫なんですけど「タグはきちんと使いましょう」ってことで</P>は書いた方が「お行儀がいい」書き方なんだそうです。面倒なんで私は終了タグ使ってないですけど。（誰に迷惑がかかるわけでもなし。…あ、でもブラウザの関係でレイアウト崩れたりするかもしれない）
タグ外での改行スペースは反映されない、といいましたがタグ内での全角スペースのばあいはきっちり反映というか影響がでます。（半角のばあいは大丈夫です） ここでちょっと気をつけて頂きたいのは半角スペースと全角スペースのミスです。半角にしたつもりが全角のスペースになっているとタグは実行されません。例えば<HR SIZE="1">が<HR SIZE="1">になっていると実行はされない、ということです。このふたつのタグの違いがわかりますか？ 違いはHRとSIZEの間のスペースです。前者は半角で後者は全角。わかりにくいですよね。くれぐれも注意！です。
その前にリンクの意味、です。リンクっていうのは２つ以上の情報を関連づけるもので、これなくしてホームページは成り立たないです。簡単にいえばページとページを繋ぐ、ということ。
リンクには<A HREF>というタグを使います。この開始タグと終了タグで挟まれた間をリンクさせます。
たとえば友達のページへ飛ぶことができるリンクを張りたい、というばあい。
<A HREF="ここにアドレス（ＵＲＬ）を記入">友達のページへ</A>
これで「友達のページへ」というところにリンクをはることができました。
またこのリンクで自分のページを関連づけて（繋げて）いくのでこのタグは必須です。このリンクタグを使えるようになるとページもぐっと高度になります。（というかこれなしではホントページは成り立たない）
リンクタグを使えるので壁紙を指定することもできます。とりあえずは色を変えてみましょう。たとえば背景色をピンクにするばあい。
<BODY BGCOLOR="#FFBBBB">
と記述するだけです。記述場所は<BODY>タグ内です。BGCOLORとはバックグラウンドカラーを指しています。また色指定の仕方ですが、この例のようにアルファベットと数字でも構いませんし、"RED"や"PINK"といったふうに英語で指定しても構いません。
背景色の指定にはもうひとつ方法があります。色ではなく「壁紙」を張る方法です。フリー素材などで頂いてきた壁紙を（フリー素材集からの取得方法については こちらです）背景に張り付けるのです。このように行います。
<BODY BACKGROUND="壁紙の置かれている場所（ＵＲＬ）/ファイル名.拡張子">
これも<BODY>タグ内に記述します。
これには<TABLE>タグを使います。はじめはちょっとややこしいですが理解してしまえば使い道が多く重宝します。必須、とは言いませんがページのレベルは格段にあがります。表を作るという使用方法以外にレイアウトの面でも活躍してくれます。
| 作品一覧 | 姑獲鳥の夏 |
| 魍魎のハコ | |
| 狂骨の夢 | |
| 鉄鼠の檻 | |
| 絡新婦の理 | |
| 塗仏の宴 宴の支度 | |
| 塗仏の宴 宴の始末 | |
| 百鬼夜行 陰 | |
| 百器徒然袋 雨 |
<TABLE BORDER="1" BORDERCOLOR="#669966">テーブルだよ、と宣言。同時にボーダー色とサイズを指定します。<TR>一行目を宣言
<TD ROWSPAN="9">作品一覧</TD>ROWSPANで何行縦に繋げるのか指定
<TD NOWRAP>姑獲鳥の夏</TD>NOWRAPは「勝手に改行しちゃ駄目だよ」の意
</TR>一行目の終わりを宣言<TR>新たな行を宣言
<TD NOWRAP>魍魎のハコ</TD>
</TR>この行が終わったことを宣言<TR>
<TD NOWRAP>狂骨の夢</TD>
</TR><TR>
<TD NOWRAP>鉄鼠の檻</TD>
</TR><TR>
<TD NOWRAP>絡新婦の理</TD>
</TR><TR>
<TD NOWRAP>塗仏の宴 宴の支度</TD>
</TR><TR>
<TD NOWRAP>塗仏の宴 宴の始末</TD>
</TR><TR>
<TD NOWRAP>百鬼夜行 陰</TD>
</TR><TR>
<TD NOWRAP>百器徒然袋 雨</TD>
</TR></TABLE>テーブル終わりを宣言
こんな具合になります。もちろんこの改行は見やすくするためにしてあるでこれらを全部繋げて書いても構いません。（でも後で直そうと思ったら大変だよ。見やすいように記述した方が都合がいいです） このタグをコピーして自分のメモ帳で開いていろいろ改造してみてください。そうすれば何となく<TABLE>タグというものが掴めてくるはずです。その他<TABLE>タグのオプションを紹介しておきます。
| NOWRAP | <TD>のタグ内に記述。「勝手に改行しちゃ駄目だよ」という意味。改行する場合は<BR>改行タグで。 |
| ROWSPAN | <TD>タグ内に記述。=""で数字を入力し縦に繋げるセルの数を示す。 |
| COLSPAN | <TABLE>タグ内に記述。=""で数字を入力し横に繋げるセルの数を示す。 |
| <TH> | <TD>を<TH>に置き換えるとそのセル内の文字を見出しとして強調。 |
| BORDER | <TABLE>タグ内に記述。枠線のサイズを指定します。指定しない場合は０で見えなくなります。 |
| COLOR | <TABLE>タグ内に記述。枠線の色を指定します。指定しない場合は白っぽい感じになります。 |
| ALIGN | 表を右か左に寄せ、文章をまわりこませることができます。右に寄せて左に文章をもってきたいのなら<ALIGN="RIGHT">と<TABLE>タグ内に記述します。 |
デジカメ（デジタルカメラの略です、って別に馬鹿にしてるわけじゃないですよ？ 笑）で撮った写真やスキャナ（写真や絵をパソに取り込む装置）で取り込んだ画像をどうしたらページに載せることができるのか、です。以外と簡単なので覚えておきましょう。
<IMG SRC="画像の置いてある場所（ＵＲＬ）/画像名.拡張子">
これだけです。ただ問題はその画像がどういったものか、ってこと。これには２種類のものがあってひとつはＧＩＦ（ジフ）、もうひとつはＪＰＥＧ（ジェイペグ）。 フリー素材（イラスト）などは大抵ＧＩＦです。画像名のあとにつく拡張子に注意しましょう。例えば「hana」というイラスト画像ならば「hana.gif」となります。さらに大きさなどを指定する方法もあります。
| ALT | <IMG SRC>のタグ内に記述。その画像のタイトルを入力する方法です。<ALT="">でタイトルを入れましょう。 |
| HEIGHT | <IMG SRC>タグ内に記述。縦のサイズを示します=""でピクセル数または ％を入力しましょう。 |
| WIDTH | <IMG SRC>タグ内に記述。横のサイズを示します。=""でピクセル数または％を入力しましょう。 |
| BORDER | <IMG SRC>タグ内に記述。枠線のサイズを指定します。="0"にするとなくなります。 |
| ALIGN | 表を右か左に寄せ、文章をまわりこませることができます。右に寄せて左に文章をもってきたいのなら<ALIGN="RIGHT">と<TABLE>タグ内に記述します。 |
これらを使って記述するとこうなります。↓
<IMG SRC="画像の置いてある場所（ＵＲＬ）/画像名.拡張子" HEIGHT="300" WIDTH="400" ALT="ＨＯＷ ＴＯ！？" ALIGN="LEFT">
これの示していることは「”画像の置いてある場所（ＵＲＬ）/画像名.拡張子”のサイズは縦が３００ピクセルの横が４００ピクセルでタイトルは”ＨＯＷ ＴＯ！？”です。画面の右に寄せて左には文書をまわりこませてね」ってことです。
またその画像にリンクを張ることも可能です。リンクを張りたい画像の<IMG SRC>タグをリンクを張るためのタグ<A HREF></A>で挟むだけです。試してみましょう。（＾−＾）
どうですか？ 上手くできたでしょーか？ はじめは失敗ばかりだとおもいますけど使ってるうちにいつの間にか身についてますよ。きっと。とりあえずこれだけできればページは十分に作れるはずです。こだわってこだわっていろいろ試してみましょう。