はじめに タグ 気をつけること ＨＴＭＬ 属性 色 アドレス 文字 要素 コメント DOCTYPE HTML4
ＨＴＭＬは、ハイパーテキストマークアップランゲージの略なんです。簡単な英語ですが直訳すると「スゲ〜文章に印をつける言語」って感じですか？え？なんか違う？まあいいじゃないですか、細かいことは。
まぁ、冗談はさておいて、ハイパーテキストっていうのは、簡単に言うと意味を持ったテキストです。何言ってんだオメ〜、文章に意味があるのは当然じゃねーかとか言わないで下さい。そりゃ、文章に意味はありますよ。でも、ここで言う「意味」ってのは、その文章の持っているパラメータのことです。例えば、「この花は赤い」という文章の意味は文字通り「ここに転がってるこの花の色が赤いぜ」なわけなんですが、ハイパーテキスト的な意味は、もしこれがタイトルとして存在する文章なら「タイトル」、駄文として存在する文章なら「駄文」ということになります。分かりますか？つまりＨＴＭＬは文章自身にあなたはどこどこのパーツだから、それなりの見え方をするように、と教えてあげるための方法なんです。
さて、そろそろ本題に。これからＨＴＭＬの書き方を説明していきたいと思ってます。はい。市販のオーサリングツール（某ホーム○ージビ○ダーなど）をないがしろにするつもりはありませんが、手打ちはいいものです。うどんにしろそばにしろ、手打ちが一番です。ＨＴＭＬも同じです。たかがＨＴＭＬを書くためだけに、高価な（一万円ぐらいですが）マシーン（ソフトのことですよ）なんか買う必要ないんです。その気になればどんなＯＳにも必ずついてくる程度のユルいテキストエディタで十分なんです。ようは、パソコンで文字が打てる環境があればいいんですから。
これだけＨＴＭＬは簡単だ〜っていうニュアンスを匂わせておけば少しはとっかかりやすいでしょうかね。これでもまだ「だるいからいや」って人は、お金出してマシーンを購入してあげてください。そのほうが日本が不況を脱出できていいかもしれませんからね。
ＨＴＭＬは、地のテキスト文章にタグと呼ばれる一種の記号を書き込むことで、その文章に意味を与えた文章です。
一般的にタグは区間を示して使いますから、区間の始まりと終わりを書き込む必要があります。区間の始まりを書き込むタグをとりあえず開始タグ、区間の終わりに書き込むタグを終了タグと呼ぶことにします。そして、意味を与えるための本体の部分を要素、その要素の細かい設定を属性と呼びます。呼ぶったら呼びます。
早速ですが、ちょっとＨＴＭＬの例を見てみましょう。
<p>
<SMALL>ちっちゃな</SMALL>ころから悪ガキで、<EM>１５</EM>で不良と呼ばれたよ。<BR>
ナイフみたいに尖っては、触るものみな傷つけた。
わかってくれとは言わないが、そんなに俺が悪いのか？
</p>
この中にタグはいくつあるか分かりますか？まだ何も説明してませんが、大体の勘でわかるでしょう。７つです。ちなみに要素は四つあります。
タグにはいくつかバリエーションがあります。<で始まって>で終わるものと、</で始まって>で終わるものです。前者が前に書いた開始タグで、後者が終了タグです。では、要素をみるにはどこを見ればいいのでしょうか。
要素は、タグの中身に書き込まれています。p、SMALL、EM、BRが要素になり、文章に意味を与える本体になります。属性もタグの中に書き込むんですけど、その話は少し後にします。
えと、例に出したＨＴＭＬの解説を始めましょう。先ほど、四つの要素があるといいましたが、そのうちのＰ要素は、パラグラフ、つまり<p>から</p>までの文章が「１段落である」ということを明らかにする効果があります。同様に、<SMALL>から</SMALL>までの文章が「小さい」、<EM>から</EM>までの文章が「強い（エンファシス）」ことを明らかにしています。最後に残ったＢＲ要素ですが、これは「改行」を意味するんですけど、見てのとおりセットで存在するはずの終了タグが存在しません。これはＢＲが特殊な要素で、終了タグが存在できないからです。直感的にも、「改行」は範囲を指定するようなものではないから閉じる必要なさそうだ、とわかりますね。
では、実際に例文をブラウザで表示させるとどうなるかをみてみましょう。
ちっちゃなころから悪ガキで、１５で不良と呼ばれたよ。
ナイフみたいに尖っては、触るものみな傷つけた。
わかってくれとは言わないが、そんなに俺が悪いのか？
どうですか、お客さん。一段落ってのは見えなくても、「小さく」を指定した部分は小さく、「強く」を指定した部分は強く、改行を指定したところでは改行が表示されていませんか？見えていたら万歳、大成功、無問題です。
ですが。問題は三行目でしょう。ＨＴＭＬでは行を変えてあるのに、表示した文章では行が変らずに「傷つけた」と「わかってくれとは」が続いて表示されていませんか？ もしかするとちょうどその部分にブラウザの端が来て偶然改行されたように見えるかも知れませんけど、それはまやかしです。ブラウザウインドウのサイズを大きくするか小さくするかすると、きっと改行位置もずれることでしょう。
というわけで、その説明を次に行いましょう。
さて、勘のいい人ならすでに気づいているかと思いますが、ＨＴＭＬではエディタ上で地の文を改行しても、ブラウザ側では改行されません。そのために、改行専用のＢＲ要素が存在しているんです。といわけで、このセッションではそのようなＨＴＭＬを書く上で気をつけなければならないことを書いていきます。
<EM><Em><eM><em>の四通りの書き方ができます。全て意味は同じです。BlockQuote要素に至っては２０４８通りの書き方ができます。
さて、いよいよ実際にＨＴＭＬを書いていこうと思います。これから書こうとする文章はＨＴＭＬですから、この文章がＨＴＭＬであるという意味を与えてあげる必要がありますから、そのものズバリの要素ＨＴＭＬ要素をつけます。また、ＨＴＭＬ文章のタイトルも指定しなければなりませんから、ＴＩＴＬＥ要素が必要です。そして、そのタイトル要素はヘッダと呼ばれる部分に書かなければなりませんから、ＨＥＡＤ要素も必要になります。そして、本文がなければ始まりませんから、本文を示すＢＯＤＹ要素も必要です。
なんだかいろいろと注文をつけた形になりましたけど、実際にＨＴＭＬにすると次のようになります。
<HTML>
<HEAD>
<TITLE>タイトル</HEAD>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
これだけで、もう立派なＨＴＭＬです。あとはここに本文を書き加えてタグを書き込んでいけばお好きなＨＴＭＬが書けるわけですね。
さて、前に「要素の細かい設定を属性と呼ぶ」と書きましたが、実際にはどうやって書くのでしょうか。このセッションではその辺のところをＢＯＤＹ要素を使って説明したいと思います。
<BODY bgcolor="#FFFFFF" text="#000000"
Link="#FF0000" ALink="#00FF00" VLink="#0000FF"
background="背景.jpg">
ＢＯＤＹ要素の属性はいくつかありますが、ここで指定したのは背景色を表すbgcolor属性、テキストの色を表すtext属性、リンクの色を表すLink属性などです。その他の属性についてはタグ一覧で確認してください。
さて、例を見ただけで属性の指定方法がわかってしまったあなたは超天才です。すごい。そんな人はごく一部でしょうから、指定方法を説明します。
「<」から「>」までがタグとして扱われることは前に書きましたから、この場合はこの例全体で一つのタグになります。そのタグの開始を表す「<」の後ろにくっついているものが要素で、この場合はBODYですね。
今回は改行が無視される例もかねて途中で改行を入れたりもしましたが、一行に書いてしまってもかまいません。重要なのは属性の名前（この場合はbgcolorやtext）の後ろにイコールをくっつけて属性の値を「"」（ダブルクオーテーション）で囲って書く、というところです。そして、属性を複数書く場合は一つ以上の半角スペースを区切りに挟んで属性を書き連ねるということです。これだけわかればオッケーです。
さて、注意深い人は二つ前のセッションで「タグは半角英数字で」と書いたのを覚えているかもしれません。そして、この例のタグの中に半角英数字でない文字、「背景」という文字が入っているのに気が付くかもしれません。が、これはこれでいいんです。確かに、タグの要素名も属性名も半角英数で書きますが、属性の値は半角英数と決まっているわけではないからです。そのためにダブルクオーテーションでくくっているといっても過言ではないほどです。
実は属性の値をくくるダブルクオーテーションですが、必須というわけではありません。属性の値が半角英数字および半角のコンマとハイフン（マイナス）（AからZ、0から9、および.と-)の時は省略してもいいことになっています。ですが、いつ何の拍子にそれ以外の文字が入らないとも限りませんから、いつもくくるクセをつけておきましょう。ＨＴＭＬ４ではコロン(:)とアンダーバー(_)を含んでも省略可。
さて、話を戻しますが、このように属性をずらずら書き連ねたＢＯＤＹ要素の終了タグはどうなっているんでしょうか。正解は
</BODY>
これだけです。何の属性も書かなかったときと同じですね。
属性は開始タグにかきこんで、終了タグはなにもいじらなくていいんです。終了タグに書き込んでもブラウザはそれを解釈してくれませんよ。
ＨＴＭＬで色を指定するとき（bgcolor属性など）、その色を表す方法はいくつかあります。このセッションではその方法に付いて書きます。
まず、次の例を見て下さい。
<FONT color="lime">緑</FONT>
<FONT color="#0F0">緑</FONT>
<FONT color="#00FF00">緑</FONT>
<FONT color="00FF00">緑</FONT>
実際に表示すると
緑 緑 緑 緑
となります。
ブラウザにはどう表示されているでしょうか。一応、ＨＴＭＬで定義されている色の指定方法は、一番と三番の方法なのですが。こちらで試したところでは、ＩＥとＮＮ４は２番が、ＮＮ６では４番が認識できませんでした(HTML4.01Transitionalの場合。HTML3.2と指定したときは２番が不可？)。
では、それぞれがどのような方法なのか説明します。
まず、一番の方法ですが、これは色のネームトークンを利用した方法です。定義されている色は次のとおりですが、ブラウザによってはその他のネームトークンも認識します。（その他のネームトークンについては色見本を参照）
Black = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuchsia= #FF00FF Aqua = #00FFFF
次に、二番目の方法。これはスタイルシート（ＣＳＳ）で色を指定するときの色コードの書き方なので、本来ならＨＴＭＬでは使用できない方法です。が、ＮＮ６はこれを解釈できます。形式自体は簡単なもので、シャープの後に赤っぽさ、緑っぽさ、青っぽさが続いています。いわゆる一つのＲＧＢってやつです。ちなみに三桁ですから、4096色しか使えない計算になりますね。
三番目の方法。これがＨＴＭＬでの一般的な色の指定方法になります。ＣＧやってる人は馴染み深いでしょう。頭にシャープをつけたＲＲＧＧＢＢ形式（ｓＲＧＢ）の２４ビットカラーで、１６７７万色使えます。使えますがそのまま表示されるかどうかはパソコン次第です。ただ、１６７７万色もつかえるので、何をしていすればどんな色になるのか良く分かりません。魔導実験室にはカラーエディタがありますから、それを使えば簡単に色コードを求めることができます。宣伝だっ。
最後の方法でちゃんと色が表示されるのは、ブラウザがエラー処理で、痛みに耐えてよくかんばった結果ですから、感動してもそれに甘えてはいけません。ちゃんと頭にシャープをつけてあげましょう。
ま、大事なことはお気に入りの色を見つけたらそれをどうやって調べるか、ってことですな。カラーエディタを使ってイメージに近付けていくのも手だし、ブラウジング中に見つけたいい色のソースをみて自分のものにするのも手だしね。
ＨＴＭＬではリンクを書くときや画像を表示する時など、href属性やsrc属性にインターネットアドレス（ＵＲＬとかＵＲＩとか言われているアレです）を書かなければいけませんね。このセッションではその方法に付いて書きます。
まず一つは、バカ正直にhttp://〜と書く方法。これは絶対アドレス指定と呼ばれている方法です。他人様のページにリンクするときはこの方法を取らざるを得ませんが、アドレスの半分以上が同じ自分のページ内へジャンプする時にわざわざこんなに長いのを書いてはいられません。そんなときには次の方法を使います。それは、相対アドレス指定と呼ばれている方法です。
相対アドレスとは、現在表示されているページのファイルが置いてあるディレクトリ（フォルダ）から見て、目標のページのファイルが何段上とか何段下とかを指定する方法です。
例えば、href="../index.html"とすると、一段下のindex.htmlが目標のアドレスになります。例えば、このページのＵＲＬはhttp://www.geocities.co.jp/Playtown-Denei/2996/hp/html.htmlだから、../index.htmlはhttp://www.geocities.co.jp/Playtown-Denei/2996/index.htmlと同じ意味になります。（ＢＡＳＥ要素を使えば自分がどこのフォルダのファイルか擬装できたりもしますがあまり使う必要はないでしょう）
さて、いきなり妙な記号「../」を使ってしまいましたけど、この記号は、自分の一段下を表すための記号です。似たようなものに「./」があって、こちらは自分と同じ階層を表します。普通は、最初にhttp://と書かなければ頭に「./」がついてるのと同じ状態になるので省略します。そしてもう一つ、意外と知られていないですが、「/」だけを頭に付ける方法も存在します。この場合は何段下とかではなく、ドメイン直下を意味します。つまり、このページから/index.htmlを参照すると、http://www.geocities.co.jp/index.htmlが呼び出されます。二段下を表す方法は単純に「../../」
でオッケーです。一段上を表すにはそのままフォルダ名をくっつければいいです。sample/index.htmlみたいに。二段下から一段上がって・・・というのも../../sample/index.htmlのように書くことができます。
そして、大事なこと。鉄の掟として、ＵＲＬでは大文字小文字が完全に別物として扱われます。綴りはあってるのにうまく表示されない時はこの辺を疑ってください。拡張子だけ大文字になってたり、ってのは結構良くある話です。普段から小文字か大文字にそろえておけば問題ないですね。
次に大事なこと。ｗｅｂサーバは大抵、index.htmlは省略できるようになってます。フォルダ参照するとindex.htmlが表示されているだけですが、つまり「./」とだけ書けば./index.htmlが参照されるようになっているわけです。この時index.htmlがなければ、geocitiesではエラー表示しますが、大抵のサーバはファイルリストを表示します。狙ってやるならいいですが、それ以外のときはフォルダにindex.htmlがないと痛いことになるかも知れないので注意してください。
その次に大事なこと。ほとんどすべてのユーザーエージェント（ブラウザのことです）では、http://www.geocities.co.jp/Playtown-Denei/2996/とhttp://www.geocities.co.jp/Playtown-Denei/2996/index.htmlとhttp://www.geocities.co.jp/Playtown-Denei/2996は同じファイルを参照させられているのに別のファイルをダウンロードしたつもりになってそれぞれ別にキャッシュ（溜め込み）を行います。これは読み込みのムダを発生させる原因になるので、どれか一つの方法で統一しましょう。私的な推奨は始めの方法です。（./a.htmlとa.htmlはちゃんと同じファイルとして扱ってくれるので心配要りません。）
ＨＴＭＬでは半角スペースは区切り、<>はタグの文字など、役割のある文字がいくつか存在します。それらを表示するにはそのまま書いたのではブラウザが混乱してしまいますね。そこで、それらの文字を表示する仕組みが用意されています。文字実体参照と呼ばれている方法です
使い方は簡単で、表示したい文字の代りに次の表の文字を入れるだけです。
| 表示したい文字 | 書き込む文字 | 実際の表示 |
|---|---|---|
| ダブルクオーテーション | " | " |
| アンパサンド | & | & |
| 左カギ | < | < |
| 右カギ | > | > |
| 非改行半角スペース | | |
| 太スペース |   | |
| 細スペース |   | |
| スペース |   | |
| コピーライト | © | © |
| レジストレーション | ® | ® |
| はーと | ♥ | ♥ |
| すぺーど | ♠ | ♠ |
| くらぶ | ♣ | ♣ |
| だいや | ♦ | ♦ |
注意。最初の５つはともかく、残りは全部ちゃんと認識されると思わないほうがいいです。つまり、最初の五つ以外はあまり使わないように。表のほかにもいろいろありますが、きりがないのでこのぐらいで。
実験室のタグ一覧を見るに当たって少し補足的な内容を。ＨＴＭＬで使用するタグ（要素）には大きく分けてブロック要素とインライン要素の二つがあります。
ブロック要素というのは、Ｐ要素やＨＲ要素、テーブルやリスト、フォームなどで、表示される時に始まりと終わりで改行されます。ブロック（箱）だから。だからＰ要素で改行できたりします。また、ブロック要素の中にはインライン要素もブロック要素も入ります。（場合によっては指定要素以外は入らない場合あり）
インライン要素はＡ要素やフォント（スタイル）制御系などで、ブロック要素と違って改行されたりはしません。インライン要素の中にはブロック要素は入りませんがインライン要素は入れられます。
実は空要素と言うものもありますが・・・ＢＲ要素やＩＭＧ要素みたいな終了タグを書いてはいけない要素のことです。これはインライン要素に含めてタグ一覧を書きました。
ＨＴＭＬを書いてる途中で、メモ的なものを書きたくなることがあります。後のための布石や、定型文章（テーブルとか）の雛型などを。そういう時、コンピュータプログラムではコメントアウトという方法で、その一角を本体から隔離できるわけですが、これと同じようなことはＨＴＭＬではできないのでしょうか？
正解は、できます。といっても、コメント専用の要素があるわけではなく（ＩＥにはあるけど）、ＳＧＭＬの仕組みを使ってコメントアウトするんですけどね。
まぁ、ＳＧＭＬがどうたらこうたらいうのは一般人は分からなくてもいいので（私も良く知らない）、こうすればコメントが書ける、というのを説明しましょう。
<!--と-->で囲んだ部分がコメントになります。
コメントは普通次のように書きます。太字のところがコメントになります。
実は私は<!--大犯罪者-->だったのです！
何をしたかって・・・それは
<!--
万引き
こそ泥
強盗
殺人
エトセトラ
と複数行にまたがってもおっけーです。
-->
秘密です。
実は、ＨＴＭＬ文章の頭にはＤＯＣＴＹＰＥ宣言文というのが必須なんです。
が、そのことについて全く触れませんでした。それは、ほとんどのユーザーエージェント（ブラウザですよ）がＤＯＣＴＹＰＥ宣言を気にしないからです。でも正式なＨＴＭＬを書こうと思うとどうしても必要になるんです。とりあえず現時点ではＮＮ６は若干この宣言文を気にしている節があります。例えば、HTML4.01Transitonalを指定すると<FONT>タグをＨＴＭＬとして解釈しますから色指定は六桁あれば解釈してくれますがHTML4.01Strictを指定するとどうもＸＭＬ的な解釈がされているような気がします。スタイル的な色指定方法ができるし。まぁＮＮ６のコード見たことなんかありませんからあくまでも勘ですが。
というわけで、ＤＯＣＴＹＰＥ宣言とやらの例を見てみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
DOCTYPEというのは文章型のことで、この宣言文をＨＴＭＬ文章のあらゆるタグより前に書かなければいけません。つまり、<HTML>の前に書かなければいけません。
また、これは型の宣言ですから、なんでもかんでもネコも杓子も上の例の宣言文を貼り付ければよいかというとそうは問屋が卸しません。上の例はHTML4.01Transitonalという形式でかかれたＨＴＭＬ文章だよ、と書いてあるのです。ここに書いた形式によって、ある要素は使うことができなくなったりもします。この場合は、じつはフレーム使えません。さらに・・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
と書くとFONTとか使っちゃいけません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
とかけば、フレームが使えます。といってもこれを書くのはフレームの親になるファイルだけです。その他のファイルには最初の宣言文でいいでしょう。
素人ＨＴＭＬ書きが頭を悩ませることでもないのでとりあえず最初のやつを書いておけばいいかもしれません。てゆーか現実問題として書かなかったからといってどうなるものでもなさそうなので書かないのも手ですね。ただ、これをちゃんと（間違った使い方をせずに）かければ、「俺ってＨＴＭＬ知ってんだぜ」と威張れます。
実験室のタグ一覧でフレームとその他に分類されてるもの以外を使うんなら、最初のやつで多分おっけーですが。
ＨＴＭＬにはいくつかバージョンがあって、私は3.2 か4.0、4.01あたりが主流になっているんじゃないかと思ってます。2.0てのも見かけないでもないですけど。
で、このセッションはその中のＨＴＭＬ４（4.0と4.01）に付いてちょっと書こうかと。
ＨＴＭＬ４では見栄え的なことは全部スタイルシートで書く事になってます。見栄えというのは何も色や大きさに限定したものではなく、マージン幅やボーダーの幅、果ては自動改行制御からブロック要素のセンタリングや右寄せなどもです。だから、ＤＩＶ要素のalign属性でセンタリング、って方法は非推奨です。
実際にどうやるかはスタイルシートについて調べて見て下さい。我々素人ＨＴＭＬ書きはみんなが使ってるブラウザ（ＩＥとかＮＮとか）でとりあえず意図的に表示される程度でいいんじゃないでしょうか。最大多数の最大幸福といって、民主主義の原則です。