初めてのＨＴＭＬ
ホームページは、さまざまなページを見てわかるように、主に文字列と画像から成り立っています。
しかし、その文字列と画像は、Word文書のように一つのファイルに収められているわけではありません。
表示させたい文章を含んだHTML文書と呼ばれるテキスト文書ファイルと、表示させたい画像のファイルは別々に作成します。そして、HTML文書の中でホームページに表示される文字列以外に、どの画像を表示させるかの命令も記述することによって、一つのページの中で文字列と画像が同時に表示されるような仕組みになっています。
したがって、ホームページを作成するときには、ここでいうHTML文書の書き方を学習しなければなりません。最近は、より簡単にホームページを作成できるアプリケーションも出ていますが、ページの細かな調整をおこなうときなどには、このHTML文書の書き方を知っていないと不便です。
このページでは、はじめてHTML文書を作成する人を対象に、その基礎を概説します。
１．HTML文書の基礎 − 「タグ」の理解
HTMLとは、Hyper Text Markup Languageの略で、ホームページを記述するための言語のことを言います。言語といっても、それほど難しいものではありません。たしかに覚えることはたくさんあるのですが、HTMLの基本的な仕組みを覚えてしまえば、忘れてしまっても簡単なレファレンス（参考書）が手元にあれば、すぐ思い出すことができます。
１−１．タグ
HTMLの基礎は、タグと呼ばれるものにあります。
タグとは、「<」と「>」で囲まれた命令文のようなものです。
たとえば、下の文字列を見てください。字のサイズが変わっていることがわかります。
 WEB ページ
|
第1章はじめに
第1節
第1項
|
このようにページ上で表示させるために、実はHTML文書の中では、以下のように記述されています。
 HTML文書
|
<H1>第1章はじめに</H1>
<H2>第1節</H2>
<H3>第1項</H3>
|
<H1>〜</H1>は、一番大きい見出しを表示させるためのタグです。
HTML文書はテキスト文書ですので、Word文書のように、テキスト文字の大きさを変えることはできません。
「第1章はじめに」という文字列を<H1>〜</H1>で囲むことによって、このHTML文書を読み込んだブラウザが、
「この『第1章はじめに』という文字列を一番大きい見出しとして扱うんだな」
と解釈して、そのように表示してくれるのです。
多くのタグは（すべてではありませんが）、このように（<???>〜</???>）対になって使われます。
最初のタグで命令の始まりを宣言し、「/」がついたもう一つのタグでその命令の終了を宣言するというのが基本です。
ただし、いくつかのタグは<???>〜</???>のように対にならずに、単独で使われます。
たとえば、以下の文章は、「ホームページの作成は面白い。」と書かれた行と「電子メールのやりとりも面白い。」と書かれた行の間に空行が入って見えているはずです。
|
WEB ページ
|
|
ホームページの作成は面白い。
電子メールのやりとりも面白い。
|
この文章は、HTML文書では、以下のように記述されています。
|
HTML文書
|
ホームページの作成は面白い。
<P>
電子メールのやりとりも面白い。
|
「ホームページの作成は面白い。」と書かれた行と「電子メールのやりとりも面白い。」と書かれた行の間に<P>というタグが入っています。実は、このタグは「段落を変えなさい」という命令のタグで、このタグが書かれていると、ブラウザ上ではちょうど1行分の空白行が挿入されて見えるのです。そして、この<P>タグは、上の例とは違い終了タグを必要としません。単独で命令文となっているのです。
なお、HTML文書では、
タグは、「<」「>」も含めて必ず半角英数で記述しなければなりません。
間違って、全角で書くと、ブラウザはまったくタグとしては認識しませんから、注意してください。
タグの中のアルファベットは大文字である必要はありません。このページではわかりやすさのため、すべて大文字で表記していますが、小文字で記述しても問題はありません。
１−２．まず最初に
HTML文書を作成する場合、どんな文書であれ、まず最初に記述しておくとよい項目がいくつかあります。
以下の記述例がそうです。ただし、以下の記述を書いてブラウザで見てみても、何も表示されません。唯一変化するのは、ブラウザのウインドウの上部に「タイトル」という表示がなされるところだけです。
記述例
|
HTML文書
|
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
|
解説をしましょう。
1行目
<HTML>
今からHTML文書を書き始めるよという宣言です。
終わりの8行目の</HTML>と対で使われます。
2行目
<HEAD>
これから書くのは、ブラウザの上部に表示させるよという宣言です。
4行目の</HEAD>と対で使われます。
3行目
<TITLE>タイトル</TITLE>
ブラウザの上部に表示させる文字列を書くときの仕様です。
<TITLE>と</TITLE>との間に表示させたい文字列を記入します。
4行目
</HEAD>
2行目で書いた「これから書くのは、ブラウザの上部に表示させるよ」という宣言を終了します。
2行目の<HEAD>と対で使います。
5行目
<BODY>
ここからが、ブラウザ上にホームページとして表示したい文書であることを宣言する記述です。
8行目の</BODY>と対で使います。
6行目
7行目
8行目
</BODY>
5行目で記述した本文開始の宣言を終了するための記述です。
5行目の<BODY>と対で使います。
9行目
</HTML>
HTML文書を終了するための宣言です。
1行目の<HTML>と対で使います。
１−３．試してみよう！
さあ、試しに簡単なHTMLを書いてみましょう。いくつか説明をしていないタグを使いますが、ここは何も考えずに、書いてみてください。
いわゆるテキスト･エディタと呼ばれるアプリケーション（Windows95には、「メモ帳」というアプリケーションが標準でインストールされています）を起動して、以下の記述例を、間違いがないように正確に書いてみてください。
書き終わったら、そのファイルをsample.htmlというファイル名で保存してください。
記述例
|
HTML文書
|
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY>
<H1>私のホームページへようこそ!</H1>
<OL>
<LI>自己紹介
<LI>私の趣味
</OL>
<P>
私が通っている大学は
<FONT COLOR="#FF0000">神戸学院大学</FONT>です。<BR>
<B>経済学部</B>の学生です。
</BODY>
</HTML>
|
さあ、うえで作成したsample.htmlをエクスプローラで探して、ダブルクリックしてみてください。ブラウザがインストールされていれば、自動的に標準のブラウザが起動して、ページを表示します。以下のように表示されましたか?
|
WEB ページ
|
私のホームページへようこそ!
- 自己紹介
- 私の趣味
私が通っている大学は神戸学院大学です。
経済学部の学生です!
|
ここまでできれば、HTML最初の関門を突破しました。
次は、どのような種類のタグがあり、それぞれのタグがどのような命令をするかを理解することです。実際にタグを書いて、試してみるのが一番でしょう。
よく使われるタグの解説をしておきます。ここをクリックしてください。
------------------ 目次へ戻る...