トップHTML講座目次

1:これだけあれば表示はできる

 ここではHTMLを書くのに最低限必要な知識を紹介します。さて,テキストエディタを開く前に 実際のHTMLを見てみましょう。画面はブラウザのままにして下さいね。
 IEを使っている人は「表示」メニューから「ソース」,Netscapeの人は「表示」メニューから「ページのソース」 (バージョンによって多少違いはあるかも)を選んで下さい。このページとにたような文章なのに あいだに訳のわからない文字が入っていたりする,不思議な文章が出てきました。これがHTMLのソースです。 ソースといっても料理にかけるものではもちろんないです(笑)。「Source」と書き,プログラムなどの記述された 文章の事です。

 では,詳しく見てみる前にこれだけは知っておきたい知識,「タグ」についてです。
 掲示板の中には「タグ禁止」とか「タグ使用可」とか書いてあるものがあるので,聞いた事はあるという人は 多いでしょう。そのタグと全く同じです。(つまりHTMLを勉強すればタグ使用可の掲示板で遊ぶ事もできるわけですが, 遊び過ぎて怒られないように気をつけましょう) タグとは,「<」と「>」で囲まれた文字の事で,HTML内において文章に様々な意味を与えます。 基本的には<タグ>〜</タグ>でセットとなっていて,それぞれ「開始タグ」「終了タグ」と呼びます。 この二つのタグに挟まれた文章に対してタグは効果を発揮します。ただし,中には終了タグの無いものや省略できる 物もあります。

 では早速さっき表示させたソースの中で,基本的なタグを見て行きましょう。

<HTML>〜</HTML>

 開始タグは一番最初,終了タグは一番最後にあります。読んで字のごとく「これはHTMLだよ」という意味を持つタグです。 全体が開始タグと終了タグに挟まれているという事は,つまり全体がHTMLだというわけですね。なお,これは実は どっちも省略できちゃいます。ただ,ページを分かりやすくするためにもタグは省略しない癖をつけておくのが 一番です。まあHTMLを書きはじめる時におまじないのつもりでつけておいてください。

<HEAD>〜</HEAD>

 <HTML>の次にいきなりあらわれますが,これは「ヘッダ要素」という意味を持ちます。 中身はほんの少しですが,この中に入っているものは直接ページには表示されません。ページの一番上の部分と たまたま文章が同じですが,実際にページに表示されているものは<BODY>のあとに書いてある方です。 さて,直接ページに表示されないのになぜ必要なのかですが,ヘッダは一番最初に読み込まれます。そのため, ページの基本的な情報を書くのに使われるわけです。ここではページのタイトルを指定していますね。(下の<TITLE> 参照)他にも検索エンジンに登録する為の情報や何分おきに自動更新なんていう高度な機能を使う場合も, 「ヘッダ要素」として書くことが多いようです。

<TITLE>〜</TITLE>

 これは,上で解説した「ヘッダ」の中に記述するものです。読んで字のごとく「ページのタイトル」を設定します。 具体的にこのタグで挟まれた文章は,ウィンドウのタイトルバーに表示されています。また,お気に入りに登録した時にも ここで設定したタイトルが表示に使われるので,短かめでページの内容がわかるタイトルをつけるようにしましょう。

<BODY>〜</BODY>

 まず,「<BODY」のあとなにやら訳のわからない文章が続いている事に不思議に思うと思います。実はタグには さらに細かい設定をつける事ができるのですが,それは今は置いておきましょう。詳しくはのちのち解説します。 今は<BODY>というタグだと思って見て下さい。このタグは「ここが本文(中身)だよ」の意味で,ヘッダの反対です。 このタグに挟まれた部分が実際に画面に表示されます。

<!-- -->

 終了タグはありません。それどころか,「これ本当にタグ?」というぐらい変な記述ですね。 これは「コメント」といいます。プログラミング言語を触った事のある人ならわかると思いますが, 「<!--」と「-->」の間に書いたものは画面には表示されないし,何の意味も持ちません。では何の為にあるのか。 例えば,あとあと表示させる予定だけど今は表示させたくない。でも今消しちゃうとまた書くのはめんどくさい。 こんなときはそこの部分をこのタグで囲ってしまえば,画面に表示される事無く書いておく事ができます。ただし, ソース表示で見えちゃうので,知られたくないことは書かないようにしましょう(笑)。 さらに,「コメント」の名前の通り「ここのタグって何の為につけたんだっけ?」 なんていうことがないように説明を書いておくという使い方もできます。ホームページは普通作ったら終わりではなく, 更新をしますよね。その時に何の為に書いたのかわからなくならないように使えます。

 他にもいろいろなタグが登場しますが,それらは追って解説して行きます。取りあえずこれだけあればHTMLは 成り立ちます。では,HTMLをいよいよ書いてみるわけですが,その前に注意を一つ。

 HTMLの中では,改行,タブ,半角スペースは通常無視されます。(半角スペースは文字と文字の間に1つだけなら 無視されない。)そこで,改行をうまく使って読みやすいソースを書く事ができますが,では表示される文章を 改行したい時にはどうすれば良いのか。おまけでもう一つ重要なタグを説明します。

<BR>

 終了タグはありません。だいたいどこのページのソースを表示しても,これが凄い量出てきます。 HTMLソース内では,これが改行の意味になります。

 では,いよいよテキストエディタを開いて実際に書いてみましょう。ちなみに,タグは大文字でも小文字でもOKです。 私は本文との差が分かりやすいように大文字で書いていますが,どちらで書いても構いません。
<HTML>
<HEAD>
<TITLE>サンプル1号</TITLE>
</HEAD>
<BODY>
Hello HTML!!<BR>
これはHTMLのサンプルです。
</BODY>
</HTML>
	
 コピーでも良いですが,実際に打った方が早く覚えますよ。ここまで打てたら保存しますが,ファイル名の最後は .txtではなく.htmまたは.htmlにします。ここでは「sample.htm」にしておきましょう。
 せっかく作ったのだからブラウザに表示してみましょう。「え?サーバーも持ってないし無理でしょ?」と 思う人がいるかも知れませんが,実はブラウザはディスク上のHTMLファイルも読む事ができます。 IEやNetscapeのアイコンにsample.htmをドラッグ&ドロップするか,ブラウザの「ファイル」メニューの「開く...」で sample.htmを開いて見て下さい。
 どうですか?こんな感じになれば大成功です。(サンプルから戻るにはブラウザの「戻る」) 「背景も白で味気ないし,こんなのホームページと言えるのか?」と思っている人もいるかも知れません。 しかし,千里への道も一歩から,これだって立派なHTMLによるホームページです。 「表示」メニューでソースを表示してみましょう。 ちゃんとHTMLが記述されているのがわかると思います。ここまでできれば,あとはいろいろなタグを覚えるだけ。 あなたのデザイン力次第で様々な素晴しいホームページが作れるでしょう。

コラム:<>で囲めばタグになると分かったけど,どうすれば<>自体を表示できるの?
 ここまで読んで来た人なら疑問に思うかもしれません。ひょっとするとソースを見て解明してしまった 人もいるかもしれませんが・・・これはタグ使用可の掲示板で<>等を使いたい時にも使えるわざですが, <などのような普通に打っても表示できない文字や,機種によっては文字化けしてしまうような特種文字は 「実体参照」と呼ばれる方法で書きます。
 「&」と「;」で囲まれていて,あいだにその文字を入れるための命令を入れる事で表示できます。 ソースを読んだ人の中には気付いた人もいたかも知れませんね。
 使える実体参照の例を挙げておきます。
実体参照表示されるもの
&lt;<
&gt;>
&amp;&
&quot;"
&copy;©
&hearts;
他にも沢山ありますが,追ってのせるかも知れません。のせないかもしれません(汗)
 次回はHTMLで良く使われるリンク(こんなやつ)と 背景の色の決め方等を扱います。お楽しみに!!
>戻る