文書(HTML)の作り方

前のページに戻る

HTMLとは?

　HTMLとは HyperText Markup Language の略で，現在，多くのホームページが作成されていますが，その大半はHTMLという形式のファイルです。HTMLは，タグと呼ばれる記号を用いて色々な表現ができるようになっていますが，ブラウザの元々の機能や，設定によって，同じHTML文書であっても見え方が変わります。また，特定のブラウザでしか認識できないタグがあります。
　ここでは，基本的なタグと，そのタグの意味のみを示します。
　なお，最新のワープロソフトでは，作成した文書をHTML形式で保存する機能を備えていますし，HTMLを作成するためのソフトがネット上で配布されていますので，実際にHTMLを作成する際は，それらを活用するとよいでしょう。

最初に!

　大半のタグは，開始タグと終了タグとから成っています。
　例えば，通常，HTML文書は， <html> で始まり </html> で終わります。そして，全体のHTML文書は，大きく <head> と </head> とで囲まれたヘッダの部分と， <body> と </body> とで囲まれた本文の部分とから成っています。
　ヘッダ部分に記述される内容は，色々とありますが，ここでは <title> </title> のみを紹介します。このタグに囲まれた文字列は，ブラウザのウィンドウのタイトルバーに表示されます。
　さて，HTMLの本文部分においては，通常の改行キーは無効です。改行させたい場合には， <br> タグを使います。改行は「範囲」ではなく「点」で行うものなので，このタグには終了タグはありません。
　この他にも，通常，半角スペースは表示されません。ただし， <pre> </pre> で囲んだ部分については，改行キーや半角スペースも有効になります。

文字に変化を付ける

　文字の色を変えたい場合，その部分を <font color="#999999"> </font> で囲います。#999999の部分は2桁ずつ，それぞれ赤，緑，青を示し，00からffまでの256段階を指定できます。#000000で黒，#ffffffで白，#ff0000で赤，#0000ffで青，#ffff00で黄になります。
　なお， <font color="red"> などと指定することで赤くすることもできることはできます。
　また，文字の大きさは， <big> </big> で囲うと大きくなり， <small> </small> で囲うと小さくなります。この他に， <font size="1"> </font> で大きさを指定することもできます。sizeの数値は1から7で，1が最小，7が最大です。
　さらに， <b> </b> で囲うと太字， <i> </i> で囲うと斜体になります。

画像を入れる

　文書に挿絵などの画像を入れたい場合には， <img> タグを使います。このタグには，多くのオプションがありますが，最も基本的な使い方のみを紹介します。
　あらかじめ，別途，画像ファイルを用意しておき，画像を入れたい部分に <img src="画像ファイル名"> と書きます。なお，画像ファイルは，通常，gif形式かjpg形式のものを使います。

背景に変化を付ける

　例えば「美しい夕空を背景に文書を表示させたい。」という場合，「夕空」の画像ファイルをあらかじめ用意しておき，「最初に!」で紹介した <body> タグのオプションで，その画像ファイルを指定します。
　つまり， <body background="画像ファイルの名前"> と書きます。この場合の画像ファイルもgifまたはjpgのものを使います。
　色だけを変えたい場合は， <body bgcolor="#999999"> とします。背景色も文字色と同じ方法で指定できます。

リンクをはる

　例えば，別組織にリンクをはりたい場合，その組織を示す文字列を <a href="その組織のURL"> </a> で囲います。
　リンク先のURLの代わりに，同一サーバ内の別ファイルを指定すると，そのファイルに飛ぶことができます。

表を作る

　表を作るには，表の各項目を <td> </td> で囲い，1行分の項目群を <tr> </tr> で囲います。さらに，表にしたい「行」の集まりを <table border> </table> で囲います。
　その際，オプションのborderを指定しないと罫線は表示されません。
　また， <td> </td> の代わりに <th> </th> で囲うと見出しとして強調されて表示されます。

その他

　その他，よく使われるタグとしては，
　・センタリングのための <center> </center>
　・横線を引くための <hr>
　・段落を表す <p> </p>
　・各項目をリスト形式で表示するための <li> </li>
　・見出しを表示するための <h1> </h1>
などがあり， <li> </li> の項目群を <ul> </ul> で囲うと番号なしリスト。 <ol> </ol> で囲うと番号付きリストになります。また， <h1> </h1> は数値を6まで指定でき，1が最大，6が最小表示です。
　なお，注意事項などを書く必要がある場合など，文字列を <!-- と --> とで囲えば，ブラウザの画面上には表示されません。

ところで ...!

　ブラウザによって色々な表現をするためのタグは，本来，ブラウザを通して見えないはずなのに，どうして，この画面に表示されているのでしょうか?
　例えば，最初で紹介した <html> は， &lt;html&gt; と書かれています。では，どうして， &lt;html&gt; が <html> と表示されないのでしょうか?
　それは， &lt;html&gt; が &amp;lt;html&amp;gt; と書かれているからです。それでは ...。
　この場合のように，ブラウザがタグと認識してしまうような文字については，いわば文字コードが用意されています。