ＨＴＭＬ講座 -LIGHT BLUE-

ホームページはどうなってるの？

ホームページはプログラムみたいに難しいのだろうか？
まずはこのページの上で「右クリック」して「ソースの表示」を選んでみましょう。

RIGHT-CLICK

解りましたか？
大抵のホームページはＨＴＭＬという言語（実はただのテキスト文書）なのです。
よってWindowsのメモ帳でも簡単に作成できます。(HTMLエディタならさらに簡単)

HTMLってな～に？

HTMLとは（Hyper Text Markup Language）の略らしいです。ハイパーやテキスト、
ランゲージはイイとして、マークアップって何よという感じですね。

「マークアップ」は簡単に言うと「ハッキリさせる」という感じでしょうか。普通の文章は
文字の大きさを変更したり、太字にしたりしてタイトルや見出しを指定します。しかし、
ただのテキスト文書では文字の大きさを変えられない為、どこがタイトルで何処までが
段落なのか解りずらい…。

それならタイトルや見出しの指定も書き込んでしまえ・・・とＨＴＭＬができたわけです。
（たぶん）

実際のＨＴＭＬの書き方

HTMLはタグという命令文とただのテキストからなっています。

タグは　<TAG>～</TAG>　というように２つセットで１つの命令。つまり有効範囲を指定します。
また<TAG OPTION="VALUE">～</TAG>の様にオプションが付く事もあります。 (全て半角で記述)

では実際に以下のモノをブラウザで開いてみましょう。
ここでは「Test1.html」と便宜上名前をつけます。（メモ帳などにコピー＆ペーストし、 HTMLという拡張子で保存して下さい。）

<HTML>
<HEAD>
<TITLE>はじめてのHTML</TITLE>
<HEAD>
<BODY>
はじめて作ったHTMLです
</BODY>
</HTML>

ほらもう「ＨＴＭＬなんて簡単」と思えてきたでしょ。

では上記の例を使って解説していきます。

<HTML>～</HTML>	ＨＴＭＬ全体を表すタグです。
<HEAD>～</HEAD>	ＨＴＭＬの設定を書いておきます。ここではタイトルを指定。
<TITLE>～<TITLE>	タイトルを指定します。（ＨＥＡＤ内に記述）
<BODY>～<BODY>	本文をこの中にかきます。

オプションの指定方法

先ほどの1.htmlを開きます。（メモ帳でHTMLを開くには拡張子指定を「すべてのファイル」にします。）
全て書きかえるのは大変なので、以下のようにします。

<HTML>
<HEAD>
<TITLE>はじめてのHTML</TITLE>
<HEAD>
<BODY BGCOLOR="BLACK">
<FONT COLOR="YELLOW" SIZE="+3"> はじめて作ったHTMLです </FONT>
</BODY>
</HTML>

黒背景に黄色の文字で表示されたと思います。タグ名、半角スペース、オプション名
="値"という記述になります。

あとはタグと使用方法さえ覚えてしまえばＨＴＭＬはバッチリです。
一度に覚えなくても使っていれば自然に覚えることができます。

よく使われるタグと使用方法

特に指定が無い場合はＢＯＤＹタグの中で、閉じるタグと２つセットで使用。

<TITLE>

タイトルを指定　(HEAD内に記述)

全体の背景や背景画指定　(BODYタグのオプションで指定)

記述例
<BODY BACKGROUND="abc.gif">
<BODY BGCOLOR="Blue">　　　　　　　　　　(色の名前を指定)
<BODY BGCOLOR="#0000FF">　　　　(赤緑青の16進00～FF)

<Hn>

見出し

ｎは１～６で１が１番大きい

フォントの指定

サイズは１～７または「+2」「-1」のように相対的なサイズ指定

<BR>

強制改行　（</BR>は必要無し)

<HR>

仕切り線　(</HR>は必要無し)

表示位置の指定

positionは「center(中央)」「right(右寄せ)」「left(左寄せ)」

画像の挿入

GIF、JPEG、PNG等の画像が使用可能。WIDTH、HEIGHTでサイズを指定、ALTで画像の概要を指定します　(</IMG>は必要無し)

<A HREF="URL">link_object</A>

リンクを張る

URLにリンクするアドレスを指定し、 link_objectにはクリックするための文字列や画像を指定

表の挿入

<TR>行の定義、<TH>見出し、<TD>データ
例を見たほうが早いと思いますので下記をご覧ください

<TABLE BORDER="1" BGCOLOR＝"#EEEEEE">
　<TR>
　　<TH WIDTH="100">身長</TH>
　　<TH WIDTH="100">体重</TH>
　　<TH WIDTH="100">年齢</TH>
　</TR>
　<TR>
　　<TD BGCOLOR="#FFEEFF">１７２センチ</TD>
　　<TD BGCOLOR="#FFFFEE">６０キロ</TD>
　　<TD BGCOLOR="#EEFFFF">１８歳</TD>
　</TR>
</TABLE>

身長	体重	年齢
１７２センチ	６０キロ	１８歳

特殊文字

HTML中で「<」「>」「"」「&」「 (半角スペース)」等の特殊文字は
タグとして解釈されてしまうため「&xxx;」というように記述する

例
<「<」、　>「>」、　"「"」、　&「&」、
　 (半角スペース)「 」

おわりに