HTML ファイルの作成

Revised: 25th/June/2006; Since: 29th/May/2002

HTML 文書を作成してみましょう。本稿で紹介するのはXHTML 1.0 Strictという種類です。

ここでは、まず手を動かして作成してみて、ブラウザで表示できることを目的とします。記述方法の詳細は後続の章で説明します。

HTML ファイルの作成

1. テキストエディタを起動

御利用の環境で利用できるテキスト・エディタを起動してください。Windows の場合は、「スタート」メニューから、「プログラム(P)」、「アクセサリ」と開くと、「メモ帳」(notepad) があります。

図：メモ帳

頻繁に使うので、すぐに起動できるように、デスクトップやラウンチャへ、ショートカットをコピーしておくと良いでしょう。

2. ソースをコピー

次の 13 行のソースをコピーして、テキストエディタに貼り付けてください。

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=Shift_JIS" />
    <title>はじめての XHTML 1.0</title>
  </head>
  <body>
    <p>こんにちは、 XHTML 1.0！</p>
  </body>
</html>

このソースは、 XHTML 1.0 Strict である限り、ほとんど変更の必要がないものです。今後、XHTML 1.0 Strict で HTML 文書を作成するときは、上記のソースをコピーして、変更する部分だけ手で編集してください。

図：メモ帳へコピーした図

3. ファイルを保存

テキストエディタで正しく編集できたら、ファイル名を first.html にして、適当な場所へ保存します。保存した場所を覚えておいてください。

テキストエディタでの保存時に、文字コードが選べる場合は、シフトＪＩＳ (Shift_JIS) か ANSI を選んでください。メモ帳の場合、[ファイルの種類(T)]は、[すべてのファイル]にしてください。

図：メモ帳で保存

図：TeraPadで保存

Windowsの初期設定では、拡張子が表示されないようになっています。拡張子は、全て表示するように設定してください。

エクスプローラで、[ツール(T)] -> [オプション(O)]を選択して、

[フォルダオプション]で、[表示]タブの、
[登録されている拡張子は表示しない]からチェックを外してから、
OKボタンを押下します。

4. ブラウザで開く

保存した first.html をブラウザで開きます。次のいずれかの方法を実施してください。

first.htmlファイル・アイコンをダブルクリック。
ではブラウザの[ファイル(F)] -> [開く(O)]メニューからfirst.htmlを選択。
デスクトップにブラウザのショート・カット・アイコンがあれば、そのアイコンの上に、first.htmlファイルアイコンを「ドラッグ & ドロップ」。
ブラウザのウィンドウの上に、first.htmlファイルアイコンを「ドラッグ & ドロップ」。

図：first.htmlをブラウザにドラッグ＆ドロップ

ブラウザで表示確認できたら、どこに何が表示されているのか、良く確認してください。

文字化けが発生している場合は、本節の最後の項を御覧ください。


図：MS I.E. 6.0 での表示	図：Firefox 1.0 での表示	図：Opera 9 での表示

5. テキスト・エディタで開く

もう一度テキスト・エディタで開いて見ましょう。次のような方法があります；

方法１
1. テキストエディタを起動します。
2. ツールバーのメニューの「ファイル」-「開く」から、保存された first.html を開きます。
方法２
1. デスクトップ上にテキストエディタのショートカット・アイコンがあれば、そのアイコンの上に、保存された first.html のアイコンを、「ドラッグ & ドロップ」します。
方法３
1. テキストエディタを起動します。
2. 起動したテキストエディタのウィンドウ上に、保存された first.html のアイコンを、「ドラッグ & ドロップ」します。
方法４
1. フォルダの「ツール(T)」 -> 「フォルダオプション(O)」 -> 「ファイルの種類」の中で、拡張子 HTMLを選択。
2. ボタン「詳細設定」を押下し、「編集(E)」をダブルクリック
3. 「アクションを実行するアプリケーション(L):」に、「エディタのパス "%1"」を入力
  例）"C:\Program Files\TeraPad\TeraPad.exe" "%1"
4. OKボタンを押下して全てのダイアログパネルを閉じる。
5. 該当ファイルをテキストエディタで開く
  - 方法１
    1. 該当のHTMLファイルを右クリック
    2. 編集(E)を選択
  - 方法２（MS IEの場合）
    1. MS I.E. のツールバーのメニューから「ツール(T)」-> 「インターネットオプション(O)」->「プログラム」の中で、「HTML エディタ(H)」から、登録したテキストエディタを選ぶ。
    2. MS I.E. で該当ページを開く。
    3. MS I.E. のツールバーのメニューから「表示(V)」-> 「ソース(C)」を選ぶ。
    ※他のブラウザの場合は他の方法で、表示中のページのソースをテキストエディタで開けます。
方法５
1. アイコンを右クリック。
2. 開いたメニューの中から「送る(N)」を選ぶ。
3. 開いたメニューから適当なエディタを選ぶ。
Macintosh の場合
1. 保存された first.html のアイコンをダブルクリック。

図：アイコンへファイルをドロップ

開けたでしょうか？ Windows では、 HTML ファイルをダブルクリックすると、関連付けられたブラウザが起動します。

私は、「方法４」を使っています。

「方法５」は Windows では一般性の高い方法です。SendTo フォルダにショートカットを置くするだけです。このフォルダの場所は「スタート」メニューから「検索」で探してください。「フォルダオプション」の「表示」で、「ファイルとフォルダの表示」の項目の、「全てのファイルとフォルダを表示する」にチェックが入っていないと見つかりません。このフォルダは「隠しファイルやフォルダ」になります。

Windows XP/2000/NT では "C:\Documents and Settings\ユーザ名\SendTo"
Windows Me/98/95 では "C:\Windows\SendTo"

基本的な用語と注意点

タグ／要素／内容

HTML ソースで、"<" から ">" までの文字列をタグと呼びます。 </ から始まるタグを終了タグ、それ以外のタグを開始タグと呼びます。開始タグから終了タグまでを要素と呼び、開始タグと終了タグの間のことを、その要素の内容と呼びます。

タグ／要素／内容
p 要素	`<p>こんにちは。</p>`
開始タグ	`<p>`
終了タグ	`</p>`
内容	`こんにちは。`

例えば、html 要素は、<html> から </html> までです。head 要素は、<head> から </head> までです。body 要素は、<body> から </body> までです。ここでつくった HTML ファイルの 13 行のソースコードを見ると、html 要素の中に head 要素と body 要素が、一つずつ、この順番で登場していることが分かりますね？

例外として、内容のない要素に対しては、開始タグと終了タグを合わせて記述します。このような要素を空要素 (Empty Element)と呼び、タグは "<" で始まり、 " />" で閉じます。

【例】

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />

全角と半角

全角文字と半角文字は別の文字です。例えば、 "Ｍ", "ｉ", "＜" は全角文字で、 "M", "i", "<" は半角文字です。全角スペースも全角文字の一つです。

HTMLのタグは半角英数字しか使えません。タグは必ず半角英数文字で記述しなければなりません。
ファイル名、フォルダ名は、半角英数字だけを使うようにしましょう。スペースも不可です。

例えば、＜ｂｏｄｙ＞は全角文字なので誤りで、<body> が正解です。

例えば、"Sample 1.html" は、 Sample と 1 の間にスペースが使われているので違反です。また、 "ｉｎｄｅｘ．ｈｔｍｌ" は、全角文字が使われているので違反です。正しくは、"Sample1.html", "Sample-1.html", "Sample_1.html", "index.html" のようにすべきです。

見た目では区別し辛いので、入力時に注意が必要です。半角でなければならない場所の入力では、IMEをオフ（直接入力）にして入力するようにお勧めします。

Windowsでは、IMEの言語バーの[入力モード]から、[直接入力(D)]を選択することで、明示的にIMEをオフにできます。同様に、[ひらがな(H)]を選択することで、全角文字が入力できるようになります。

図：IMEの入力モード

また、キーボードの左上の「半角/全角」と刻印のあるキーを押下しても、IME の入力モードを切り替えられます。入力中に文字の下に点線が表示されて、スペースキーで変換できる場合は、全角入力可能な状態です。もう一度同じキーを押下して、下線が表示されず、スペースキーで変換できない場合は、半角のみしか入力できません。

図：半角と全角の入力

大文字と小文字

XHTML (XML) では原則全ての文字について、大文字と小文字を区別します。<BODY> は誤りで、<body> が正解です。HTML4 では区別しなかったので、注意してください。

ファイル名やフォルダ名の場合も、大文字と小文字は区別します。例えば、ファイル "Index.html" と "index.html" は別のファイルです。HTML4 でも XHTML でも同様です。

日本語の利用と文字化け

要素の内容（開始タグと終了タグの間）は、全角文字を使って日本語を記述できます。勿論、半角英数字も使って構いません。但し、半角カタカナは絶対に使用しないように注意しましょう。文字化けの原因になるかもしれませんので、利用しない習慣になっています。

日本語の場合は、文字を表現する方法が複数通りあります。これを、文字符号化方法（文字コード） (character encoding) と呼び、各々使っている対応表が異なります。文字符号化方法ごとに表現可能な文字の集合を文字セット (character set) と呼びます。

高度な話

ここからは比較的高度な話題になります。業務用途で、HTML文書をプログラムで処理したり、データベース内の情報を埋め込んだりする場合は参照してください。

機種依存文字

本稿のサンプルでは文字コードをShift_JISとしています。実は、Shift_JISには、WIndowsで入力可能な文字の一部しか含まれていません。Shift_JISに含まれない文字の代表例は、「髙」（はしごたか）、「﨑」（たつさき）、「①」（丸付き数字）、「Ⅱ」（ローマ数字）、「～」、「－」（全角マイナス）、「㈱」、「㌔」などです。これらの文字はWindows固有文字なので、HTML文書には使わないようにしたほうが安全です。

これらの文字は、厳密には、次のカテゴリに分けられます。

NEC特殊文字
IBM拡張文字
NEC選定IBM拡張文字
ユーザ定義外字

これらの文字を含むWindowsで入力可能な文字符号化方法はWindows-31Jと呼ばれており、厳密にはShift_JISとは異なります。Widnows-31JとShift_JISの差異を解説したページが沢山あるので、業務上の必要があれば調べてください。標準外の文字の利用を慎むのは良い習慣です。

参照：Windows-31J の文字セット

特殊文字参照

機種依存文字とは別の話題として、「<」、「ö」、「♥」、「☠」などの特殊文字は特別な文字列で入力します。例えば、これらの文字を表示させたい場合は、順番に、「<」、「ö」、「&hearts;」、「☠」と HTML に記述します。

この入力方法は実体参照と呼ばれます。対応表があるので、必要になり次第別途参照ください。

参照：

UTF-8

Shift_JISよりも汎用的な文字コードとして、UTF-8, UTF-16を挙げられます。HTML文書を作成するソフトウェアで、保存時の文字コードにUTF-8が選べる場合は、そちらを選んだ方が賢明です。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8" />
    <title>はじめての XHTML 1.0</title>
  </head>
  <body>
    <p>こんにちは、 XHTML 1.0！</p>
  </body>
</html>