HTMLとは
HTMLとは、「HyperText Markup Language」の略です。
わかりやすく言うと、Webページ(ホームページ)を作成するための基礎となる言語方式のことです。
HTMLが誕生する前までは、テキスト形式で書かれた文字データというのは、ただの文字列でした。
ウィンドウズで言えば、メモ帳で書かれた文字です。
すべての文字の大きさも色も太さも同じです。
もう長文なんか読もうものなら眠くなっちゃうわけですよ（笑）。
それでは困るので、そんなに難しくない方法で文字にアクセントを付けて楽しく読む方法がないものかとかんがえられたのがHTMLです。
普通の文字データだけでは情報を一目で理解しにくいので、HTMLではタグとよばれるプログラムを文書内に記述することにより、単なる文字ではなく「色がついたり」「太くなったり」など文字にアクセントを加えることができるわけです。
さらにHTMLは、説明などがその文書内で完結しなかった場合などに、リンクという「他の文書へのアクセス」を作成することも可能です。
リンク機能はHTMLの大きなポイントと言っても過言ではないです。
このリンクという考え方が存在するおかげで、今のインターネット網が形成されたわけですからね。
さらに、文章だけではなく、HTMLには画像を表示させたり、音を再生させるタグ（機能）もあります。
HTMLはW3Cが作成している規格で、この記事を書いている段階での最新版はHTML 4.01です。
HTMLで記述された文書を閲覧するには通常、インターネットエクスプローラなどに代表されるWebブラウザを使用するのが普通です。
あなたもホームページを閲覧するときには、インターネットエクスプローラなどのブラウザソフトウェアを使いますよね。
でもですね、HTML文書はテキスト文書の一種であるため、テキストエディタでHTML文書を開き、タグごとテキスト文書として読み書きすることもできます。
HTMLでホームページ作成に挑戦するためにはIBMのホームページビルダーなどの特別なソフトが必要だと思っている方もいますが、実はウィンドウズに付属するメモ帳でもHTMLタグさえわかっていれば、ホームページを作成することはそんなに難しいことではありません。
後から実際にやってみましょう。
CGIとHTML
いきなり大胆に告白してしまいますが、実はこのHTML入門講座というのはついでというか、なりゆきで作ったコンテンツです。
最初は作る予定はありませんでした。
しかし、Perl/CGIプログラミング学習を進める上で、どうしてもHTMLの知識は必要になってくるのです。
ならば、せめてHTMLの基礎部分だけでも知っておいてくださいというのが、このHTML入門講座のコンセプトです。
Perl/CGI入門講座でも説明しましたが、CGIというのはインターネットサーバー上で動くプログラムの総称です。
で、そのCGIを動かす方法というのがいくつかあるわけですが、HTMLのフォームタグを使用して、訪問者が情報を入力してCGIに処理させるというのが常套手段になっています。
わかりやすく言うと、最初にサイト訪問者にはHTMLで書かれたページを用意し、何らかの必要な情報を入力してもらいます。
その後、指定されたボタンを押すと、HTMLの情報がインターネットエクスプローラなどのブラウザで整理され、CGIに送られます。
そして、インターネットサーバー上で待ち構えていたCGIがそれらのデータを受け取り、何らかのアクションを起こすのです。
身近なところで例を挙げると、ウェブログのコメント投稿時の一連の処理ですね。
ページ自体はHTMLで表示されていますが、氏名やメールアドレス、コメントなどを書いて投稿ボタンを押すと、指定のCGIに入力データがわたされてコメントが表示されるようになります。
掲示板もこれと同じですね。
違う例としては、メールフォームなどですね。
メールフォームの場合は、入力されたデータを元に、CGIがメールデータを作成し、指定されたメールアドレスに送信処理をかけます。
お問い合わせページで使われているCGIがそうですね。
HTMLタグの使用用途をもっと説明すると、CGIのプログラム上でHTMLタグを書いてインターネットエクスプローラなどのブラウザに直接結果を表示させることもできます。
例えば、METAタグ解説ページのMETAタグ作成ツールでは、ユーザーの入力状態によって画面表示を切り替えたいので、すべてCGIプログラムの中でHTMLタグを書いて表示させています。
こういったことは、HTMLタグの知識がないとできないわけです。
だから、CGIプログラミングを説明する上で、HTMLタグの説明というのが欠かせないわけです。
でもですね、ここまで書いてきてなんなんですが、HTMLタグについては、隅から隅まで知っている必要はないです。
ある程度知っていれば十分です。
私もHTMLタグの中で、よくわからなくてあいまいになっているものがいくつかあります（苦笑）。
ですので、このカテゴリでは、最低限のHTMLしか説明しません。
HTMLタグとは？
HTMLファイル最大の利点は、単純なテキストのデータでできているので いろんな環境のコンピューターで扱うことができるというところです。
このいろんなコンピューターで扱うことができるというのは、実はものすごいことなんですよ。
いろんなコンピューターで扱うことができるということは、ある一定のルールで統一されているということですからね。
前述したように、HTMLはテキストベースのデータであることが幸いしたわけです。
でも 単なるテキストデータだけでは、どの部分がタイトルになっているのかや、どの部分が本文なのかなどが全然わからないので、HTMLタグを使用して、目印をつけるわけです。
そしてその目印を手がかりに、インターネットエクスプローラなどのブラウザソフトは、タイトルや本文、画像やリンクを認識し、ホームページを表示させます。
<戻る>
HTMLファイル
では実際に、HTMLファイルの中身を簡単に説明します。
思いっきり簡単に書くと、HTMLファイルというのはこんな感じです。
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>Test</title>
</head>
<body>
この文字が表示されればOKです
</body>
</html>
上記の「<html>」から「</html>」までの部分をコピーして、ウィンドウズ付属のメモ帳などに貼り付けます。
そして、「test.html」などの名前を付けて保存してください。
メモ帳で保存する場合は、何も指定しない限り、すべてのファイルがテキストファイルで保存されてしまいます。
今回は、テキストベースではありますが、HTMLファイルとして保存させたいので、ファイルの種類で「すべてのファイル」を選択し保存ボタンを押します。
すると、「test.html」という名前のHTMLファイルが完成します。
メモ帳を閉じて、先ほど作った「test.html」を開いてみてください。
すると今度は、メモ帳ではなく、インターネットエクスプローラなどのブラウザソフトで表示されたはずです。
ちゃんと余計なHTMLタグがなくなって「この文字が表示されればOKです」と表示されていることを確認してください。
無事に確認することができれば、HTMLファイルの完成です。
では次に、HTMLソース（HTMLタグ）を表示させてみましょう。
先ほどコピーしたHTMLタグは、ブラウザからHTMLソースを表示させることで確認することができます。
インターネットエクスプローラであれば、上のメニューの中から、「表示(V)」を選び、続いて、「ソース(C)」または「ソースを表示(C)」を選ぶと、HTMLファイルをメモ帳で開きなおすことができます。
HTMLファイルの構造
それでは、HTMLファイルの構造について説明していきます。
まず「<html>」から「</html>」で囲まれた部分はすべて「HTMLファイルですよ」ということをコンピューターに宣言しています。
ファイル名の最後（拡張子）が「.htm」「.html」または「.shtm」「.shtml」であれば、開始タグ終了タグ共に省略できますが、一般的には省略しません。
HTMLファイルは大きく分けて、ヘッダー部とボディー部に分けることができます。
ヘッダー部というのは「<head>」から「</head>」です。
ボディー部というのは「<body>」から「</body>」までです。
それぞれどのような情報が書かれているのかを説明します。
HTMLヘッダーでは、HTML文章全体に関わる情報に付けるタグを書きます。
具体的には、そのページのタイトルや、使用している文字コードセット、他のページとのリンク関係などを書きます。
上記HTMLファイルでのタイトル部分は、「<title>Test</title>」です。
この部分は、SEO（検索エンジン最適化）をする上で、最も大切な部分ですので、必ず書くようにするとお得です。
次に、上記HTMLファイルで、文字コードセットを宣言している部分は「<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">」です。
この部分はなくてもかまいませんが、この文字コード宣言がないために、ホームページが文字化けしてしまうという原因にもなりますので、しっかり書くようにしましょう。
文字コードと文字化けについては、Perl/CGI入門講座で説明していますから、ここでの説明は省略します。
次に「<body>」から「</body>」までを説明します。
この部分は、HTMLの本文です。
つまり、通常ブラウザで見えている部分です。
上記HTMLファイルでは、「この文字が表示されればOKです」部分ですね。
HTMLタグの構造
HTMLタグは、表示したい文章との区別がつくように「<」や「>」の記号で囲む形で現します。
HTMLタグには、基本的に「開始タグ」と「終了タグ」があります。
HTML文章の中で、目印をつけたい部分の前後に、この「開始タグ」と「終了タグ」を付けます。
開始タグと終了タグは、見た目にはよく似ているのですが、終了タグには、HTMLタグの要素名の前に「/」が付いています。
例えば、先ほど説明した「<title>Test</title>」は、ホームページタイトル部分の文字を「<title>」と「</title>」で囲んでいます。
逆の言い方をすると、HTMLヘッダー内で、「<title>」と「</title>」で囲んだ文字が、ホームページのタイトルになるとも説明できます。
しかしこれは一例であって、すべてのHTMLタグに共通するものではありません。
HTMLタグの中には、省略してもよいもの、また 終了タグがないものがあります。
終了タグがないものについては、省略と混同しないように注意しなくてはいけませんが、これはまた説明すべきときになったら説明します。
ものすごくざっとHTMLファイルについて説明してきましたが、大きなところはだいたいこんな感じです。
<戻る>