HTML講座
HTMLとは
HTMLというものはご存知ですか？一般的に、ホームページはHTML（HyperTextMarkupLanguage）という言語で記述されています。
HTMLというのは、文章をマークアップして（タグで囲んで）、囲んだ部分にタグの種類に応じた意味を持たせるための言語だと考えてください。
当然、このページもHTMLで書かれています。IEならば、右クリックメニューの中のソースの表示 (V)というのをクリックしてみてください。メモ帳が起動してこのページがどのように書かれているのか確かめられます。理解は出来なくても結構ですが、画面に表示されている文字列がソースの中にも書かれている事が確かめられるはずです。
例えば、見出しは<h1>や<h2>で囲んで、文章の段落は、<p>で囲んであって・・・とりあえず、タグの説明をします。
タグとは
タグ・・・の前に、「要素」という言葉について簡単に説明しておきましょう。
簡単に言ってしまえば、要素は、タグの中身です。逆を言えば、タグは要素の始まりと終わりを示すものです。
とりあえず、「タグ」と「要素」の違いは頭の片隅に置いておくといいと思います。
実は、当サイトでは「タグ」と「要素」は意識して使い分けられてはいません。本当は・・・上のような違いがあり、区別して使い分けるべきなのですが、難しいのであまり気にせずに使ってしまっています。
一般の意味でのタグとは、ものにつける札（ふだ）のことですよね。札は、ものを区別するための目印につけますよね。
HTMLでのタグは、文章につける札のことです。文字列だけの文章に、ここは見出しですとかここは段落ですと目印をつけるために使われます。
例えば、「これは大見出しです」という文字列に、大見出しという意味を持たせたいのならば、
「<大見出し始まり> これは大見出しです <大見出し終わり>」
という感じに目印を付けてあげればいいですよね。HTMLでは、これを
「<h1> これは大見出しです </h1>」
と表記します。終わりという意味は、/（スラッシュ）で表します。見出しですから、英語はHeadingですよね。それの１番大きな見出しと言う意味で、h1という書き方をしています。
h1があるなら、当然h2やh3なんかもあります。これは、２番目に大きな見出し、３番目に大きな見出しという意味です。・・・うまく表現できないのですが、下の図を見ていただければ分かると思います。見出しはh6まで用意されています。
また、タグは小文字で書くようにしてください。（<H1> ではなく <h1>）
HTMLの基礎
何にも分からない人は、とりあえず、こうやって覚えてください。詳しくは、ゆっくり覚えていけばよいのです。
まず、タグ（<xxx>～</xxx>）で囲むことを、マークアップする（意味づけをする）と覚えてください。
HTMLの基本のひな形は下にあるとおりです。このひな形に書いてあるのは、全てのHTML文章の共通部分なので、意味はあまり気にしなくてもいいです。お決まりの部分として覚えてもらうのがいいかと思います。
<html>
<head>
<title>（ブラウザのタイトルに表示される文字列）</title>
</head>
<body>
（ここに本文を書く）
</body>
</html>
上の囲まれたテキストを、メモ帳を起動して、そこへ貼り付けてください。そして、名前を付けて保存で、どこか適当な場所に"test.html"という名前で保存してください。testの部分は、お好きな名前で構いませんが、拡張子（ピリオドの後ろ）はhtmlで保存してください。
保存したファイルのアイコンは、HTMLファイルのアイコンになっていますか？アイコンをダブルクリックした時に、またメモ帳が開いてしまう場合は失敗です。ブラウザ（ホームページ観覧ソフト）が起動すれば成功です。
うまくいかないという人は、保存をするときに、ファイル名を"（ダブルクォーテーション）で囲ってみてください。
以下は、手順を説明するための画像です。
ブラウザでの表示結果を見ていただければ分かるとおり、（ブラウザのタイトルに表示される文字列）はブラウザのウインドウのタイトル部分に表示されています。また、（ここに本文を書く）という文字列は、ブラウザの表示部分に描画されていることが分かります。
それ以外部分（タグ）は表示はされません。基本的には、（ここに本文を書く）と書いてある部分（bodyタグの内側）に、本文を書いていけばよいのです。試しに、適当な文章をbodyタグの内側にずらずら～っと書いて、先ほどの手順でブラウザに表示させてみましょう。
ブラウザには、書いた文章が表示されるはずです。
それでは、簡単にマークアップしてみましょう。やり方は先ほどと同じです。
<html>
<head>
<title>見出しと段落</title>
</head>
<body>
<h1>HTMLの基礎（見出し１）</h1>
<h2>段落を作ってみる（見出し２）</h2>
<p>段落は、Pタグで囲みます。（Paragraph：段落）</p>
<p>日本語では段落というと結構大きな文章のかたまりと（私は）感じるのですが、HTMLの段落（Pタグ）は、本当に小さな文章の区切り（小段落）程度に使えば良いのではないかと思います。（個人的意見）</p>
</body>
</html>
pタグは、段落（Paragraph）という意味をもたせるためのタグです。h1タグとh2タグは、上のほうに書いてある通り、見出し（Heading）という意味を持たせるためのタグです。
基本的なマークアップ方法はご理解いただけましたか？
HTMLは、ただのテキスト（意味を持たない文字だけの文章）を、文章の要素（見出し、段落など）ごとにタグで囲んで、意味を持たせてあげる事だと考えれば、自然と正しいマークアップ方法が身に付くでしょう。
そうそう、インデント（行頭のスペース）は、ソースを見やすくするためのものです。インデントは自分が読みやすいと感じるやり方でを行えばいいです。ただし、半角スペース or タブを使いましょう。全角スペースはインデントには使用できません。
ez-HTML
ez-HTMLとは、HTMLを記述するのに特化したテキストエディタです。メモ帳でもHTMLは書けるという事が分かったのなら、今度はこのソフトを試してみてください。
このソフトの特徴は、タグ・属性の強力な入力支援機能を備えていることです。
Web作成に役立つソフトで紹介してありますのでご覧ください。
