大文字小文字
HTMLで使われるタグなどは大文字小文字を区別しませんが、URLやJavaScript 、文字コード名などは大文字小文字を区別するので、注意して下さい。
タダでネットでホームページを作ろう！
● 大きい文字にする ● 小さい文字にするHTMLの基本
※HTMLの基本構造については「はじめにお読み下さい」を参照して下さい。Webページ（HP）はHTMLというものを使って記述します。このHTMLはタグといわれるものを使ってテキストに 色や形・レイアウトなどの指示を書き込んでコンピュータがその情報を読み込み、ブラウザ（Internet Explorer や Netscape など）で表示するというものです。このタグを使ってさまざまなデザインを作ります。
タグによってはブラウザのメーカーが独自に追加したタグもあるので、注意が必要です。Internet Explorerの<marquee>やNetscapeの<blink>などが一例です。 あまり神経質になる必要はありませんがブラウザによって表示されないので、何種類かのブラウザで確認したりタグについて情報収集などすると良いでしょう。
HTMLの基礎
HTMLの基礎構造
| 要素 ┌────────────────────────┐ | |||
| 要素名 | 属性 ┌────┐ | 要素内容 ┌─────┐ | |
| <h1 | align="left"> | タグと要素 | </h1> |
| 値 | |||
| └───────────┘ 開始タグ 終了タグ | |||
このようにHTMLタグのかたまりを要素といいます。一つの文章で考えるなら、まず最初に見出しがあります。この後に本文となり、本文の中にはリストやテーブルなどを配置するでしょう。 このようにいろいろな要素があつまり、一つの文章が出来上がります。これをコンピューターに理解させるためにそれぞれの要素に専用のマークをつけます。この要素を示すマークがタグです。 タグは開始タグと終了タグがあり、内容を挟んで記述します。但し、空要素といって開始タグだけ（<img>・<br>など）のタグもあるので注意しましょう。
特に難しいことを憶えなくても、私のように個人で楽しむホームページならコピー&ペーストで十分でしょう。
HTMLで使われるタグなどは大文字小文字を区別しませんが、URLやJavaScript 、文字コード名などは大文字小文字を区別するので、注意して下さい。
タグは入れ子にできる
タグによっては、タグで囲んだ文字列の中に別のタグやテキストを入れて、入れ子にすることが出来ます。たとえば以下のようになります。
<p align="center">タダでネットで<b>お小遣い</b>〜別館〜</p>
こんなふうに→→→タダでネットでお小遣い〜別館〜
ページ自体をテーブルなどで入れ子として、またその中にテーブルを配置してテキストやバナーなどを貼り付けると、それぞれの位置がそろってきれいに見えます。
<html>
<head>
<title>タダでネットでお小遣い〜別館〜</title>
</head>
<body>
<!--ここからテーブル-->
<table width="850" border="0">
<tr><td>
（この範囲内にHTMLを記述する）
</td></tr>
</table>
<!--ここまで-->
</body>
</html>
tableの横幅をwidth要素で指定すれば、ページの横幅を一定に保つことができます。
ページ内に別のテーブルを配置する場合も、テーブルが入れ子になっていると考えれば問題ありません。
ページ全体を収納するborder要素を「0」に指定すると、ページ全体を囲む枠線が表示されないようになります。
デザインとして枠線を表示したい場合は、数字を変えれば好きな太さにできます。
引用符
属性の値には引用符というものを付けます。上記のHTMLの基礎構造を見てください。
属性の値の left を挟むように（ " " ）ダブルクォーテーションを付けるのが正しい書き方です。 場合によって省略できますが、引用符はできるだけ省略せずに付けるほうが良いでしょう。
コメントアウト
HTMLでは、「<!--」と「-->」で挟まれた部分はブラウザに表示されないので、編集する時の目印になるメモや一時的に隠したい部分などに使用します。
例：<!--ここからテーブル--> 〜 <!--ここまで--> <! と -- （ハイフン2つ）の間には空白をいれない。
色の指定
HTMLで色を指定する方法は二つあります。ただし、色の指定はスタイルシートを利用することが推奨されているようです。
私の場合スタイルシートで指定して、部分的に強調したいところをタグで色指定しています。（まだまだ初心者ですので！）
基本的な16色
| red #ff0000 | navy #000080 | green #008000 | black #000000 |
| fuchsia #ff00ff | blue #0000ff | lime #00ff00 | gray #808080 |
| purple #800080 | aqua #00ffff | olive #808000 | silver #c0c0c0 |
| maroon #800000 | teal #008080 | yellow #ffff00 | white #ffffff |
例：<font color="#ff0000">赤を指定</font>
このように表示→赤を指定
例：<font color="red">赤を指定</font>
このように表示→赤を指定
その他の色
色の上にカーソルを合わせて下さい。
下の窓に色の値が表示されます。
そのままマウスの左をクリックしてカーソルを移動します。
HTMLの作り方
必要なもの
（ソフトについての詳細は便利ツールを参照）テキストエディタ
HTMLはテキストファイルですからWindowsに付属のワードパッドやメモ帳などで作成することができます。手書きで作成するのが難しい場合は、ホームページ作成ソフトなどがあるので利用すると良いでしょう。 また、作成ソフトはフリーのものでも素晴らしいものもあるので、自分に合うものを探すことをおすすめします。
画像編集ソフト
ホームページを作成する時、画像などを上手に使うと、とても素敵なページになることがあります。通常GIF・JPEG・PNG形式となるため、これらの画像を扱える編集ソフトが必要です。
FTPソフト
作成したHTMLファイルや画像などをプロバイダのサーバに転送するときに使います。こちらもフリーで素晴らしいものがあるので、ご自分で使いやすいものを探すと良いでしょう。
プロバイダ・サーバ
ホームページを公開するためには接続サービスを提供するプロバイダと、作成したファイルを置くサーバが必要となります。たいてい、プロバイダがタダでホームページスペースを提供しているので、 個人のホームページならこれらで十分でしょう。ただし、商用の場合はほとんど禁止されているので利用規約をよく読んで利用しましょう。また、スペースの容量や繋がりやすさ・CGIが利用できるかどうかなど、 も検討すると良いでしょう。
※プロバイダ・サーバの詳細はタダでネットでお小遣い〜本館〜を参照して下さい。
作成手順
ファイルを作成する
メモ帳などのテキストエディタに、サイト名や内容と、それをブラウザで表示させるためのタグを記述していきます。
<html>
<head>
<title>タダでネットでお小遣い〜別館〜</title>
</head>
<body bgcolor="#ffff99">
<h1>タダでネットでお小遣い〜別館〜</h1>
<p>
<font size="4">タダでネットでホームページを作ろう！</font>
</p>
</body>
</html>
段落や改行、テキストの色や大きさなど、それぞれのタグを記述していけば
簡単にホームページを作成することができます。
ファイルを保存する
作成したファイルを保存します。
ファイル名は半角アルファベットで、拡張子は .html か .htm（各サーバーにて確認） とします。 保存したファイルをブラウザで読み込む（ファイルをダブルクリックでOK）とWebページが表示されます。
サーバに転送する
FTPソフトやHTMLエディタのファイル転送機能を使って、作成したファイルをサーバに転送します。
画像などを使用している場合は画像ファイルも転送します。
サーバに接続する設定はプロバイダにより違うので、確認が必要です。
確認してみましょう
ブラウザを使って、サーバに転送したファイルがちゃんと表示されるか確認しましょう。
HTMLのバージョン指定
実際にHTMLを作成する場合、どのバージョンで作成するのかを宣言する必要があります。
これらは、文書の一番最初に記述します。（ <html> の上）
HTML4.01 Strict DTD
推奨しない要素や属性は除かれていて、フレームも使用できません。厳しい制約があるので、文書の作成が難しい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional DTD
推奨しない要素や属性（視覚的なものなど）が含まれます。フレームは使用できません。
今のところ、こちらを記述してあれば問題ないでしょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset DTD
フレームを使用する場合。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/Frameset.dtd">
※後半のURLは省略することもできますが、ブラウザなどによっては表示が変わる場合があるので注意。