HTML とは？

　ホームページには,いろいろの色や大きさの文字や画像がありますが,これは全てHTMLという言語(Hyper Text Markup Language)で書かれたものです。"ワード"や"一太郎"の場合も文字の大きさや色を自由に決められますが、これらのアプリケーションで作ったファイルと違って、HTMLはメモ帳などのテキストエディタで簡単に作成,編集ができます。
　しかし,メモ帳では文字の大きさとかを変える機能はついていません。ではどうやって文字の大きさとか色を変えるのかというと、文章中にタグというものを挿入して文字の大きさや色を指定します。たとえば文字を太くするには太くしたい文字を<B>と</B>で囲みます。つまり "<B>太い</B>文字"と書けばネットスケープやインターネットエクスプローラなどのブラウザで"太い文字"と表示されるわけです。

＞ちなみに現在あるHTMLエディタはいちいちこのタグを覚えなくての良いように、普通にワープロで打った文章を自動的にHTML言語に直してくれたり、タグを挿入してくれるものなどがありますが、ここでは全てメモ帳などで編集する方法を説明してます。

タグとは？

<B>や</B>などをタグと呼びます。タグはたくさんの種類がありこれによって文字の大きさやスタイル、色などを指定します。
タグのほとんどは開始タグと終了タグで囲みます。 <B>〜</B>のように開始タグのタグ名にスラッシュ（/）をつけたものが終了タグです。終了タグのない<HR>のような単独タグもあります。

タグ名は大文字／小文字を区別しません。
しかし、タグは必ず半角で書かなければなりません。

"<"や">"を使うとホームページを表示するときタグとして認識されてしまいますからこれらの記号は文章中で使うことはできません。これらの記号を使いたいときには全角の＜＞を使ってください。(どーしても使いたいというときはこちら)

属性付きのタグ

タグの中には<FONT COLOR="red"> のように属性を付けて機能を拡張できるものがあります。 属性は通常 属性名＝属性値 のように書きます。

属性名も大文字／小文字を区別しません。また、タグ名と属性名の間には必ず、 ひとつ以上の半角スペースをいれるようにしてください。
属性値なるべくダブルクオーテーション"　"でくくるようにしましょう。
また属性は開始タグにのみ付け、終了タグには付けません。

HTML 基本的構造

一般的にHTMLは、次のような構造をしています。
<HTML>
<HEAD>

　ヘッダー…タイトルなど、このHTMLの情報を書きます。

</HEAD>
<BODY>

　本文…ブラウザで表示される部分を書きます。

</BODY>
</HTML>
<HTML>タグと</HTML>タグはこれがHTML文章であることを表すものです。必ずいちばん上といちばん下に付けるようにしましょう。
<HEAD>タグと</HEAD>タグはこれがどのようなHTML文章であることを表すものです。はじめわからなければ付ける必要はありません。
<BODY>タグと</BODY>タグはここに挟まれた部分をブラウザに表示することを表すものです。なくても良い場合もありますがなるべく付けるようにしましょう。

簡単なページの作り方

まずメモ帳を使って次の文章を書いてください。
<HTML>
<BODY>
こんにちはホームページのテストです。
</BODY>
</HTML>
ファイルを保存した後、名前を変更して"test.html"としてください。
注意)メモ帳で名前を"test.html"として保存しても"test.html.txt"というファイル名になってしまいます。

保存したファイルをブラウザで開いてみましょう。Windowsでは保存したファイルをブラウザにドラッグアンドドロップすれば良いです。 次のように表示されます。
こんにちはホームページのテストです。

文字の大きさやスタイル、色を変えてみよう

文字の大きさやスタイル,色を変えるためにはその部分をそれぞれの開始タグと終了タグで囲みます。
たとえば文字を太くするには太くしたい文字を"<B>太くする</B>"のように<B>と</B>で囲込むわけです。
<B>〜</B>文字を太くする
<I>〜</I>文字を斜体(イタリック)にする
<U>〜</U>下線(アンダーライン)を引く
<S>〜</S>文字に削除線をつける
<SUP>〜</SUP>文字を上付き文字にする
<SUB>〜</SUB>文字を下付き文字にする
<SMALL>〜</SMALL>文字を小さくする
<BIG>〜</BIG>文字を大きくする
*注)
<FONT>〜</FONT>		色やフォントを変える
注) 色やフォントはタグに属性を付けることで指定します。
色の指定
<FONT COLOR="#RGB値またはカラーネーム">〜<FONT>
#RBG値とは色を指定する6桁の16進数ですが、詳しくは色のリファレンスを見てください。
カラーネームには赤=red,青=blue,緑=green,黄色=yellowなどが100以上の色が使用できます。
たとえば文字を赤くするには<FONT COLOR="red">赤い文字</FONT>のように書きます。

では実際に文章を書いてみます。
<HTML>
<BODY>
こんにちはホームページのテストです。
ホームページでは文字を<BIG>大きく</BIG>したり,<B>太く</B>したり, <I>斜体</I>にしたり、 <FONT COLOR="red">赤く</FONT>したり,<FONT COLOR="blue">青く</FONT>したりできます。
</BODY>
</HTML>
ファイルを保存した後、上と同様に名前を変更して"test.html"としてください。
保存したファイルをブラウザで開いてみましょう。
次のように表示されます。
こんにちはホームページのテストです。 ホームページでは文字を大きくしたり,太くしたり, 斜体にしたり、 赤くしたり,青くしたりできます。
さて、この例では改行されていないことに気付いたでしょうか。
実はHTMLではもとの文章に改行があってもそれを無視して、ブラウザの横幅に合わせて自動的に改行がされます。文章の切れ目などで改行を挿入したい場合には<br>というタグを使ってここで改行しますと明示的に示す必要があります。このタグは単独で使用します。

見出しを付けよう

見出しは表示したい見だし語を<H1>〜</H1>から<H6>〜</H6>でくくります。
<H1>〜</H1>から<H6>〜</H6>はH1がいちばん大きくH6がいちばん小さくなります。
見出しを右揃え,左揃えや中央で表示させたいときには属性を使って
<H1 ALIGN="left">左揃え</H1>
<H1 ALIGN="center">中央</H1>
<H1 ALIGN="right">右揃え</H1>
のように指定します。
また、上で説明した文字のスタイルなどとも組み合わせることができます。
サンプルリストブラウザでの表示
<HTML>
<BODY>
<H1>見だしH1</H1>
<H2 ALIGN="center">見だしH2</H2>
<H3><FONT COLOR="red">見だしH3</FONT></H3>
<H4>見だしH4</H4>
<H5>見だしH5</H5>
<H6>見だしH6</H6>
</BODY>
</HTML>

見だしH1

見だしH2

見だしH3

見だしH4

見だしH5
見だしH6

文字や画像を中央揃えにしてみよう

文字や絵、表などを(絵や表の入れ方は後で説明します)中央揃えにするためには<CENTER>〜</CENTER>タグを使い中央揃えしたい部分をこのタグで囲みます。
たとえば
<HTML>
<BODY>
ここは普通の左揃えです。
<CENTER>この部分は中央揃えで<br>表示します。</CENTER>
</BODY>
</HTML>
と書けば
ここは普通の左揃えです。
この部分は中央揃えで
表示します。
と表示されます。

改行や段落を分けてページを見やすくしよう。

HTMLではもとの文章で改行してもブラウザで表示するときにはその改行は無視されます。

段落をわけるなどで、明示的に改行したい場合は<BR>タグを使います。
また、このタグは通常改行するだけですが、行間を1行あけたい場合には<BR><BR> と2つ組み合わせることで対応できます。

改行ではなく段落を明示するタグとして<P>〜</P>というタグもあります。
これはこのタグで囲んだ部分が段落とみなされ上下に1行自動的に空行が挿入されます。
また、この<P>〜</P>タグは見出しと同じようにALIGN属性を使ってその段落の行揃えを指定できます。
<P ALIGN="left">ここの段落は左揃え</P>
<P ALIGN="center">ここの段落は中央</P>
<P ALIGN="right">ここの段落は右揃え</P>

また、区切り線として水平線をいれたい場合には<HR>タグを使います。
区切り線にはいろいろな属性がつけられます。
属性説明属性を指定する例
WIDTH水平方向の幅(長さ)を指定する。
幅を指定するには絶対値(ピクセル数)または画面の横幅に対するパーセントであらわします。		WIDTH="90%"
WIDTH="300"
SIZE線の太さを整数(ピクセル数)で指定する。
指定しなかった場合は自動的に幅が2になります。		SIZE="5"
ALIGN水平線の位置を指定する
left(左揃え),center(中央揃え),right(右揃え)の中から選んで指定します。		ALIGN="left"
ALIGN="center"
COLOR水平線の色を指定する
#RGB値またはカラーネームで指定します。		COLOR="red"
COLOR="#ff0000"
これらの属性は複数指定することができ、たとえば <HR WIDTH="80%" COLOR="red" SIZE="5">と書くと次のようになります。

リストを使おう

リストにすると各項目が字下げ(インデント)され箇条書きになります。 これらのリストは入れ子にする(リストの途中にリストを挿入する)ことができます。
サンプルリストブラウザでの表示
<HTML>
<BODY>
<OL>
<LI>りんご
<LI>みかん
<LI>バナナ
<UL>
<LI>まだ青いバナナ
<LI>完熟バナナ
</UL>
<LI>パイナップル
</OL>
</BODY>
</HTML>
  1. りんご
  2. みかん
  3. バナナ
    • まだ青いバナナ
    • 完熟バナナ
  4. パイナップル

画像を挿入しよう

HTML文章の場合画像は別のファイルに保存しておき画像を挿入したい場所に画像を指定するタグを書けばブラウザで画像が表示できます。
画像の挿入は<IMG>というタグを使用します。
画像を表示する場合には必ず画像ファイルを指定しなければならないため<IMG SRC="ファイル名">のようにSRC属性を付けます。
ファイル名の指定の方法はWindowsを使っている人にはあまりなじみがないかもしれませんが、絶対パスと相対パスの2通りの方法があります。つまり、そのファイルが存在するディレクトリ(フォルダ)も指定する必要があります。ここでは詳しいことは説明しませんが、同じディレクトリ(フォルダ)のファイルを指定する場合にはファイル名だけを書いておけば良いです。
また、左右に文字を回り込ませたいときにはALIGN属性で
ALIGN="left"(左に画像その右に文章)
ALIGN="right"(右に画像その左に文章)
と指定できます。
たとえば同一のフォルダに"menu.gif"という画像ファイルがあり、これを使いたい場合には次のようにします。
サンプルリストブラウザでの表示
<HTML>
<BODY>
<IMG SRC="menu.gif" ALIGN="right">
画像を右寄せにして、文字を左側に回り込ませています。
</BODY>
</HTML>
 画像を右寄せにして、文字を左側に回り込ませています。

背景を工夫しよう

背景に色を設定したり、画像を表示させるには<BODY>タグに属性を付けます。
属性説明属性を指定する例
BGCOLOR背景色を指定する
#RGB値またはカラーネームで指定します。		BGCOLOR="Red"
BGCOLOR="#FFFFCC"
TEXT標準の文字色を指定する
#RGB値またはカラーネームで指定します。		TEXT="red"
TEXT="#FF0000"
LINK一度もアクセスしたことのないリンクの色を指定
#RGB値またはカラーネームで指定します。		LINK="Green"
LINK="#000080"
VLINKすでにアクセスしたリンクの色を指定
#RGB値またはカラーネームで指定します。		VLINK="red"
VLINk="#ff0000"
BACKGROUND背景の画像を指定
BACKGROUND="back.gif"
これらの属性は複数指定することができ、たとえば <BODY BGCOLOR="#FFCCEE" VLINK="Red">と書くことができます。

リンクを使おう

ホームページではページからページへとリンクが張られていてこれをたどるだけで参照ができるところが紙メディアより優れている点の一つです。
リンクには他のページに飛ぶものと自分のページ内で移動するものの2種類があります。
他のページにリンクしたいときは <A HREF="URL">〜</A>のように書きます。 URLの部分にはリンクしたいページのアドレスを書きます。
リンク先アドレスの指定には絶対パスと相対パスの2通りの指定方法があります。
また、リンク先を説明するテキスト(下線が引かれる部分)を〜に書きます。〜の中には文字だけでなく<IMG>タグを使って画像を入れることもできます。
サンプルリストブラウザでの表示
<HTML>
<BODY>
<A HREF="http://www.ann.hi-ho.ne.jp/yassii/">YASSIIのページ</A><BR>
画像を使用する場合<A HREF="http://www.ann.hi-ho.ne.jp/yassii/"><IMG SRC="yassii.gif" BORDER=0></A>
</BODY>
</HTML>
 YASSIIのページ
画像を使用する場合
ホームページの作り方２
表の作り方など、