HTML の第一歩 — HTML チュートリアル
HTML はかなり簡単な言語です。大学の技術系や人文系の学生が皆学びますし、今では大半の学校でも学ばれていると思います。すべてがとても簡単なのは、HTML がプログラミング言語ですらないからです。
HTML はマークアップ言語で、書いたものがそのまま画面に出力されます。アルゴリズム、スキーム、ループ、変数、クラスは一切なく、ただテキスト、テキスト、テキストです。HTML にはタグしかなく、しかもそれほど多くはありません。よく使われるものは 30 個にも満たないでしょう。ですから、プログラミング言語に隣接する言語に取り組もうと決めたなら、HTML は正しい選択です。
HTML 形式のドキュメントの作成を始めるには、メモ帳プログラム（Windows、Linux システムに既に含まれています）と、このドキュメントを表示するためのブラウザ（Firefox、Opera、Chrome、Internet Explorer）が必要です。Windows OS のテキストエディター（メモ帳）としては、私は notepad++ を使用しています。
上の数行で学習の準備は整ったはずで、それ以上は何も必要ないと思うので、始めましょう。
私の最初の HTML ドキュメント
HTML ドキュメントは、readme.txt ファイルやその他の .txt 拡張子のファイルのような、普通のテキストファイルです。
メモ:
拡張子とは何ですか？
ファイル拡張子は、主にグラフィカルインターフェースを持つオペレーティングシステムの特権です。その主な目的は、特定のファイルを開くためにどのプログラムを呼び出すべきかをオペレーティングシステムに指示することです。実行可能ファイルを指すさまざまな拡張子については話しません。オペレーティングシステムのコマンドインタープリターも、.COM、.EXE、.BAT、.CMD、.VBS などのマスクを持つファイルを扱う、一種のプログラムだからです。
HTML ドキュメントには .HTML、.HTM 拡張子を使用します。
ドキュメントを作成する時が来ました。必要なフォルダーに入り、空いている場所を右クリックします。
テキストドキュメントの作成を選択します。ファイル名を index.html とします。.htm 拡張子を使うこともできます。
システムの設定によっては拡張子を指定できず、ファイルが index.txt として保存されるかもしれません。その場合は:
- この index.txt ファイルをメモ帳で開きます。
- メニューで ファイル→名前を付けて保存 を選択します。
- 表示されたウィンドウで、保存するファイルの拡張子を指定できます。
index.html ファイルが作成できたので、メモ帳で開いて HTML マークアップの作成を始めます。
HTML マークアップはタグを使って作成します。タグは次のような形です。
<tag>何らかのテキスト</tag>最初に来るのが最初のタグで、開始タグと呼ばれます。これは大なり・小なり記号で囲まれた単語です。大なり・小なり記号は発音せず、「これは tag タグ」と言います。
最も単純なタグ <html></html> から始めましょう。これは最も重要なタグで、html ドキュメントはこれで始まり、同じタグで終わります。
<html>
</html>タグは 1 行で書くこともできますが、タグが同じ垂直線上に上下に配置される方が便利です。この場合、notepad++ がタグを強調表示します。
次に、<html> タグの中に <body></body> タグを配置します。Body は文字通りドキュメントの本体です。ブラウザで見えるすべてのものは body タグの中にあります。ブラウザのことをすっかり忘れていました。index.html ファイルの内容を変更してファイルを保存しましょう。
<html>
<body>
</body>
</html>body タグの配置を見てください。html タグの垂直線から 2 スペース下がっています。このような配置は HTML ドキュメントの読みやすさを高めます。では、ドキュメントを保存してブラウザで開きます。
空の画面が表示されるはずです。これは正しいことです。まだドキュメントにテキストを追加していないからです。
では、body タグのちょうど間にテキストを追加しましょう。
<html>
<body>
HTML 私の第一歩
</body>
</html>ドキュメントを保存してブラウザでページを更新します。これで「HTML 私の第一歩」というテキストが表示されます。それは、テキストを body タグの中、body タグより上でも下でもなく、まさにタグの中に配置したからです。
おそらく気づいたと思いますが、ドキュメントのタイトルには Mozilla Firefox という文字だけがあります。つまり、ドキュメントにタイトルがありません。この味気ない HTML ドキュメントを修正して、タイトルを追加しましょう。
タイトルは、もう 1 つのタグ <head></head> の中に追加します。<head> タグは body タグより上に配置されます。
<html>
<head>
</head>
<body>
HTML 私の第一歩
</body>
</html>今ドキュメントを保存してブラウザでページを更新しても、何も変わりません。head タグの中に、タイトルを担当する <title></title> タグを記述する必要があります。
<html>
<head>
<title>HTML の第一歩 drupalbook.org</title>
</head>
<body>
HTML 私の第一歩
</body>
</html>ファイルを保存し、ブラウザでページを更新すると、ほら、ドキュメントにタイトルが現れました。
入門レッスンとしてはこれで十分だと思います。次のレッスンでさらに多くのことを見ていきます。