ここではHTMLを自力で書こうという人の為に、ホームページを作るのに必要な極基本的な事だけを出来るだけ平易に解説します。
というわけでもっと詳しく知りたい人は他の解説ページを見た方が良いし、いちいち手書きする気が無い人は自分に合ったHTML作成用のソフトを探した方が良いと思います。
また、理解しやすい様に実際とは違う解釈や表現を使っている場合もあるので、ここを見てある程度理解したら、正しい解釈で解説しているものを読み直す事をお勧めします。
それからこのページはブラウザ上での見た目を考えて作っているため、ソースを見るとおかしな部分もあるとは思います。
ともかく関心を持たれた方は、このウィンドウをの横幅を画面の半分くらいのサイズで開き、使い慣れたテキストエディタかメモ帳を片手に読んでみてください。
HTMLはテキストを装飾したり画像を貼ったりレイアウトをしたりという作業を、全てタグと呼ばれる"<"と">"で命令文となるアルファベットを囲んだ記号を通して行います。簡単な例を挙げてみましょう。
<FONT size="5" color="#0000FF">Ｈｅｌｌｏ</FONT> ↑タグ名 ↑属性 ↑終了タグ |
上の例では"FONT"と言う命令で文字の装飾を行っています。多くのタグは「<タグ名>」で書かれる開始タグと「</タグ名>」で書かれる終了タグで対象となるテキスト等を囲むことで、そのテキストにHTML上での意味付けを行います。（）
一部終了タグの存在しないタグや、終了タグが存在するものの省略できるタグもありますが、どこで終わっているのかが分かりづらくなりますし、書いた方が間違いがありません。終了タグのあるものは極力書くようにしましょう。
そして「size="5" color="#0000FF"」というのが属性で、タグごとに決められているオプションのようなものだと思ってください。これを使うと一つのタグで複数の意味を持たせることが出来て、ここでは文字の大きさと色を決めています。属性には初期値が設定されており、書かなかった場合はその値が適用されるので、必須のものもありますが、全ての属性を必ず書かなければいけないということはありません。また、属性の値は原則として""で囲む事になってます。
では上の例を実際にブラウザ上で表示させてみましょう。
| Ｈｅｌｌｏ |
上の例でもやっていますが、HTMLでは色を指定する場面がよくあります。主に文字色や背景色を指定するのですが、HTMLでは色に関しては一応256の3条（つまり1677万色）の指定が出来ます。「color="#0000FF"」等となっているのがそれで、RGBカラーを16進数2桁×3で表します。
まずは色見本を見てみましょう。
| 表示色 | 16進数 | rgb表記 | 表示色 | 16進数 | rgb表記 |
|---|---|---|---|---|---|
| #ffffff | 255,255,255 |
#000000 | 0, 0, 0 |
||
| #ff0000 | 255, 0, 0 |
#800000 | 128, 0, 0 |
||
| #00ff00 | 0,255, 0 |
#008000 | 0,128, 0 |
||
| #0000ff | 0, 0,255 |
#000080 | 0, 0,128 |
||
| #ffff00 | 255,255, 0 |
#808000 | 128,128, 0 |
||
| #ff00ff | 255, 0,255 |
#800080 | 128, 0,128 |
||
| #00ffff | 0,255,255 |
#008080 | 0,128,128 |
||
| #ffffff | 255,255,255 |
#808080 | 128,128,128 |
つまり6桁の最初の2文字が赤、真ん中の2文字が緑、後ろの2文字が青で、16進数2桁で0〜255を表しています。
ちなみに16進数というのは、一つの位が{0〜9,A〜F}の16段階で表され（Aが10,Fが15）、その位が16になると１繰り上げされるという表記法で、2桁の場合"左の値×16＋右の値"で10進数に変換出来ます。10進数から16進数2桁への変換は、その値を16で割った整数部分と余りになります。（例：[10進数]147 = 16×9 + 3 = 93[16進数]）
ただし、いくら1677万色が書き分けられても、実際に表示される色は見る人の環境によって様々なので、あまり微妙な色使いにはこだわらないようにしましょう。
16進数での色の作り方がどうしても分からないとか面倒くさいという人には、別の指定方法があります。
color="red"のように英単語の色名を書いても認識してくれるのですが、ブラウザによって有効ではない場合がある上、あまり細かな指定は出来ないのでお勧めはしません。
ここでは基本的な16色のみ紹介しておきます。
| 表示色 | 色名 | 16進数 | 表示色 | 色名 | 16進数 |
|---|---|---|---|---|---|
| white | #ffffff | black | #000000 | ||
| red | #ff0000 | maroon | #b03060 | ||
| lime | #00ff00 | green | #008000 | ||
| blue | #0000ff | navy | #000080 | ||
| yellow | #ffff00 | olive | #808000 | ||
| fuchsia | #ff00ff | purple | #800080 | ||
| aqua | #00ffff | teal | #008080 | ||
| silver | #c0c0c0 | gray | #808080 |
HTMLの特徴の一つにハイパーリンクというものがあります。
クリックするだけで別のページにジャンプしたり、HTMLに画像を埋め込む事が容易に出来るのですが、その際にリンク先のページや画像ファイルがどこにあるのかというを指定してやる必要があります。
それには"http://〜"で書かれる「絶対パス（フルパス）」と、“対象がそのファイルから見てどの場所にあるのか”という示し方である「相対パス」がありますが、自分のHP内のファイル同士でリンクする場合には出来るだけ相対パスを使う事をお勧めします。
何故かと言うと、例えばこのページから「HTML guide」のトップページへAタグでリンクする場合、絶対パスだと|
<A href="http://karo.cdx.jp/doc/html/index.html">Index</A> ↓ Index |
の様になりますが、相対パスでは
|
<A href="index.html">Index</A> ↓ Index |
だけで済むからです。
更に上の場合はローカルマシン内にこのHTMLファイルを持ち、ブラウザで表示して「Index」をクリックすると、Web上のindex.htmlにアクセスしますが、下の場合はローカルマシン内のindex.htmlにアクセスし、いちいちアップロードすることなく動作を確認する事が出来ます。当然それらをアップロードしてWeb上にあるファイルのリンクをクリックすれば、Web上のファイルにアクセスする事になるのです。一応相対パスの欠点を挙げると、ディレクトリ（ローカルマシンで言うフォルダ）の構造を変えると、それに合わせて書き直す必要があることですが、頻繁に変えるようなことでもないですし、相対的な位置が変わらなければ問題はありません。（親フォルダごと移動させても大丈夫）
相対パスの書き方は、同じディレクトリなら「="ファイル名"」のみでOK、下層ディレクトリ内のファイルへは「="〜ディレクトリ名/ファイル名"」、一つ上のディレクトリに上がる場合は「="../ファイル名"」の様になります。ちなみに「現在のディレクトリ」を明記する場合「="./〜"」のように書きますが、通常はいちいち書く必要はありません。[サンプルページ]でディレクトリ構造と絶対パス、相対パスの関係を示した具体的な例を挙げたので参考にしてください。
また、一般的なサーバーでは"index.html(index.htm)"というファイル名はアドレスを書く時に省略しても問題ありません。
"〜ディレクトリ名/"で指定すると"〜ディレクトリ名/index.htm(l)"が適用されるからで、もしそのディレクトリにindex.htmlというファイルが無いのに「〜ディレクトリ名/」というアドレスを表示しようとすると、そのディレクトリ内の全ファイル一覧が表示されてしまいます。（プロバイダによってはエラーになる）多くのプロバイダで「トップページのファイル名はindex.htmlにしてください」と言われるのはこのためです。
但しサーバーによっては拡張子がhtmかhtmlのどちらか（主にhtml）にしか有効でない場合があるので注意してください。
なお、ローカルマシン上では相対パスで書いた時に「="../"」だけしか書かないとうまく動作しませんが、Web上では認識されます。
※補足
絶対パスには、"/~karo/doc/html/"の様に「/」で始める書き方もあります。アドレスの最初が「/」の場合、「/」をリンク元のサイトのルートドメインと認識します。当サイトのHTMLの場合は、"http://www5a.biglobe.ne.jp/"がルートドメインです。この書き方もやはりWeb上でしか有効ではないですが、「http://〜」と書くよりも短いですし、別のプロバイダに移ってもそのまま使えたりするので覚えておくと良いでしょう。
ここまでを理解したところで早速HTMLの作成に入ります。と言っても実はIEやNNといったブラウザは、".html"または".htm"という拡張子のファイルであればHTMLと判断してしまうので、いきなりテキストやタグを書いてもそれらをちゃんと解釈して表示してくれたりします。
しかし手書きでHTMLを作成する以上きちんと手順を踏んでおきましょう。
では、とりあえずテキストエディタで新しいファイルを作り、"test.html"という名前にでもしてみましょう。「拡張子を変えると〜」というメッセージが出るかもしれませんが、気にせず変えてしまってください。
そしてそのファイルに以下の枠線内の内容をコピーします。
test.html<HTML> <HEAD> <TITLE>テスト</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> はじめまして！ </BODY> </HTML> |
HTMLを書く上でほぼ最低限の内容です。上の物をブラウザに表示させると、白地に黒で「はじめまして！」とだけ表示されるはずです。
一部のタグの前に空白が入れてあるのは「インデント」という作業で、主に一部のタグにおいて構造を分かりやすくする為のものです。HTMLではソース（テキストエディタ上の文字）での空白や改行がほとんど無視されるので、例えタグの途中でも属性等の文字列を壊さなければ改行したりしても構いません。後から修正する事も考えて、自分の見易い様に書きましょう。
それからタグを表す文字列は、大文字小文字のどちらでも構いません。このページ内では基本的にタグ名を大文字、属性を小文字で書き分けています。
この内容を一から説明すると、１行目の<HTML>はこれからHTML文を始めますという宣言のようなもので、最後の</HTML>と対で必ず書くものです。
２行目、４行目の<HEAD>〜</HEAD>はヘッダ情報と言って、HTMLのフォーマットを明記したり、ページ上に直接表示しないような情報を書いたりするのですが、とりあえず３行目のTITLEタグだけ覚えておきましょう。
で、３行目の<TITLE>〜</TITLE>はその名の通りそのページのタイトルです。このタグで囲った文字は、ブラウザ上部のタイトルバーに表示されます。そのページを「お気に入り（ブックマーク）」に登録する際にもここの文字列を参照するので、分かりやすい名前にしておくのがいいでしょう。
そして５行目のBODYタグ以降がHTMLの本体となります。基本的にはここから</BODY>までに書いた内容がタグを解釈した後にブラウザに表示されます。BODYタグにはいくつかの属性がありますが、とりあえずはここにある２つで十分です。それぞれ基本となる背景色と文字色を指定します。これらは書かなくても表示はされますが、その場合ブラウザに設定されている色が適応されます。試しに#FFFFFFと#000000を先の色見本を参考に変えてみると良いでしょう。
これでひとまずHTMLを作る準備が整いました。次からは上の"test.html"を使ってホームページを作る際に良く使う基本的なタグの解説をして行きます。
|
<A href="index.html">Index</A> ↓ Index |
の様な書き方をしていたら、"test.htm"の「はじめまして！」の部分を「<A href="index.html">Index</A>」に書き替えたと思ってください。それらを実際に"test.htm"へコピーしてブラウザで表示してみると理解しやすいと思います。