超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ メモ帳に書いてみよう

ホームページはテキストエディタがあれば簡単に作ることが出来ます。
テキストエディタというのは、Windows の場合メモ帳 メモ帳 です。メモ帳に、「ある規則」に従って文字や記号を書き込んでいけばホームページを作ることが出来ます。
この「ある規則」というのが、HTML と呼ばれるものです。HTML が出てくると、ホームページ作成講座っぽいですね。


HTML というのは HyperText Markup Language の略です。ハイパーテキストというのは、「文字を超越した」、マークアップが「印付け」、ランゲージは「言語」です。印を付けることで文字を超越することができるみたいです。
文字を超越するというのは、単なる文字の羅列ではなく、色を付けたり、大きさを変えたり、はたまた他のページへジャンプしたり、画像を貼り付けるといったさまざまな機能を実現することです。テキストに印を付けるだけでそれが可能になります。つまり、その印の付け方を覚えれば、ホームぺージを作ることが出来るということです。

この印のことをタグといいます。タグ( tag )は荷札とか付箋という意味です。どちらも印をつけるものですよね。


タグはこれ「 < 」と、これ「 > 」の間に記入します。
印をつけたい場所の最初に開始タグ、最後に終了タグを記述します。
ここでは詳しい説明はしませんが、簡単な HTML タグを紹介しましょう。

文字を太くしたい場合は <b> タグを使います。b は bold の頭文字です。bold は、「くっきりとした」とか「目立つ」と言う意味です。boldface で、太字という意味になります。
メモ帳を起動して、このように書いてみて下さい。

メモ帳画面

「汗」の前にある <b> が開始タグ、「汗」の後にある </b> が終了タグです。終了タグには必ずスラッシュ( / )が入ります。
次に、これを保存します。[ファイル]−[名前を付けて保存]で、保存します。ファイル名は適当に好きな名前を付けて下さい。ただし、拡張子は .html または .htm です。コンピュータに HTML ファイルであることを認識させるために、HTML 形式で保存します。ファイルの種類は「すべてのファイル」にします。

メモ帳の保存画面

次に、このファイルをブラウザで開いてみます。
エクスプローラ エクスプローラー・アイコン から直接開く場合、保存したファイルは、このような IEアイコン アイコンとして表示されていますので、これをクリックしてブラウザを起動します。このアイコンは Microsoft Internet Explorer の HTML ファイルを表しています。
ブラウザから開く場合は、ブラウザの [ファイル]−[開く]−[参照]で、保存したファイルを指定し、[開く]をクリックして開きます。

ブラウザではこのように表示されます。

ブラウザ画面

「汗」だけ太くなっているのがわかりますか。


斜体文字を書きたいときは、<i> タグを使います。i は italic の頭文字で、イタリック体=斜体文字という意味です。
メモ帳を使って、このように書くと、

涙は女の<i>武器</i>よ。

ブラウザには、このように表示されます。ちょっと斜めになっていますね。

涙は女の武器よ。


文字にアンダーラインをつけたいときは、 <u> タグを使います。u は underline の頭文字ですね。

涙なんて、もう<u>枯れてしまったわ。</u>

と書くと、こうなります。

涙なんて、もう枯れてしまったわ。


タグを使えば、ページに写真や画像を貼り付けることが出来ます。このページにもいくつか画像を使っていますね。
画像を使うためには、ページから画像ファイルにリンクを張る必要があります。
画像ファイルにリンクを張るときに使うタグは <img src="画像ファイル名"> です。img は image の略、画像ファイルのことをイメージファイルと言います。src は source の略です。source には「源」とか、「出所」という意味があります。つまりこのタグは、イメージファイルの出所を示すためのタグということになります。
ちなみに、ホームページを演出するために使用するイメージファイルを 素材 といいます。
この画像サボテン画像を貼り付けたい場合、ファイル名を「 saboten.gif 」とすると、このように書きます。

<img src="saboten.gif">

ホームページは、いくつかのページを同じ場所(サイト)に置いています。イメージファイルも同じ場所に置いておきます。もし、イメージファイルをサーバに転送していないと、せっかくタグを使ってリンクを張っても表示されません。イメージファイルの名前を間違って記述した場合も、「サーバの中にはそんなファイルないよっ!」ということで、エラーになってしまいます。
エラーの場合、ブラウザには、このように リンクエラー 表示されます。

気づいた人もいるでしょうが、このタグには終了タグがありません。ときどき終了タグがない場合もあります。


どうですか。代表的なタグをいくつか紹介しました。これくらいなら簡単ですね。