戻る005214


くーろん式HTML講座 入門編



第1章 HTMLとは何ぞや?

○ 1−1 HTMLとは

 HTMLとは「HyperText Markup Language」の略で、 「タグ」と呼ばれる文章の性格を定義するマークを使って記述していきます。 つまりHTMLはこのタグの使い方を覚えてしまえばいいだけだったりします。
 また、HTMLによって記述された文書をHTML文書(拡張子は「.html」または「.htm」)といいます。そして現在インターネットで公開されているホームページのほとんどが このHTMLによって作られています。


○ 1−2 HTMLを記述するのに必要なもの

 HTMLを記述するには、次の2点があればできます。

 これだけあればHTMLは記述できます。なんと敷居の低いことでしょうか(笑)
実際、筆者はメモ帳でHTMLを記述し、 ブラウザーで見栄えを確認するという方法でサイトを作っています。


○ 1−3 タグとは?

 文章の性格を表すマークを「タグ」といい、HTMLはこのタグを使って記述していくわけですが、 では、どのようなタグがあるのでしょうか?
 まずは下の例を見てください

 例1 最小構成のHTML文書
<html>
   <head>
   </head>
   <body>
   </body>
</html>

 たったこれだけで立派なHTML文書として成立します。 例のなかで「<」と「>」でくくられたもの(<と>を含む)がタグで、 基本的に「< ○○ >」で始まり、「</ ○○ >」で終わるようにセットにして使います (○○の部分に何を書くかは各タグによって違います)。 また、最後に「</ ○○ >」で締めることを「タグを閉じる」といいます。


○ 1−4 基本的なタグ

 では、実際にどんなタグがあるのかを簡単に見てみましょう。

<html> </html>:この文書がHTMLで記述されていることを示すタグ。 これでテキスト全体をはさむ。
<head> </head>:ページのタイトルなどのドキュメント情報を書き込むためのタグ 。このタグではさまれた部分はブラウザーの画面には表示されません。
<body> </body>:ブラウザーで表示するページの内容を書き込むためのタグ。 実際にブラウザーに表示されるのはこれではさまれた部分だけです。

 上の3つのタグはHTMLを記述する上で基本となるタグです。これらはなくても動く事は動きますが、通常はこれらが使われないことはほとんどありません。
 そのほかにもホームページを作るときによく使うタグとして、以下のようなものもあります。

<br>:文章の中で改行する場所を指定するタグ。 HTMLでは文章を自動的に改行してくれないので、 改行する場所をこのタグを使って指定する必要があります。
<hr>:罫線を引くためのタグ。これを入れた場所で横向きに罫線が引かれます。

 見てもらえばわかると思いますが、 いきなり大前提のはずのタグを閉じる必要がこの2つはなかったりします。
 このようにHTMLは文法上の間違いを無視して処理するという、 めちゃくちゃアバウトな言語だったりします(笑)


第2章 タグを打ってみよう

○ 2−1 とりあえず何か打ってみる

 前置き長くて飽きてきた頃だと思いますが、ではここで実際にタグを打ってみましょう。
 まずはメモ帳を起動してください。そして下の例2のとおりに打ってみましょう (注:タグはすべて半角で打ちます。大文字小文字は区別されません)。

 例2 HTML文書(練習品その1)
<html>
   <head>
   </head>
   <body>
HTML文書(練習品その1)<br>
これはHTML入門として作成した練習品です。
細かいことを気にせず、とにかくここに書いてあるとおりに打ってみましょう。
   </body>
</html>

 出来たら保存して、拡張子を「.html」に変更しましょう。
拡張子はまず、ファイルの中身を表示するウインドウの上のほうにあるメニューから ツール→フォルダオプションを選らび、クリックします。 それからその中の表示→詳細設定と進み、 「登録された拡張子を表示しない」のチェックをはずしてOKを押せば 見ることができるようになります。
 それから「.」以下が拡張子なので、これを「.html」に書き換えればOKです。
 拡張子を変更したら、ブラウザーで立ち上げて見え方を確認しましょう。
 どのように見えますか? おそらく下のように見えるはずです。

 図1 HTML文書(練習品その1)の見え方


1−4で「自動的に改行してくれない」と言った意味を理解していただけましたか?
 このように、HTMLで記述した場合、 文章中にEnterキーで改行してもブラウザーで見ると改行されません。 改行するには、改行したい場所に<br>を書き込む必要があるのです。


○ 2−2 文字の大きさを変えてみる

 次に、これだけでは味気ないので、文字の大きさを変えてみましょう。
 文字に関する情報を記述する場合、 <font> </font>タグとそのオプションを使用します。

 例3 HTML文書(練習品その2)
<html>
   <head>
   </head>
   <body>
   <font size="5">HTML文書(練習品その2)</font><br>
これはHTML入門として作成した練習品です。
細かいことを気にせず、とにかくここに書いてあるとおりに打ってみましょう。
   </body>
</html>

 例2と上の例3を比べてみてください。
 例3では「HTML文書(練習品その2)」の部分の文字の大きさを大きくするように設定しました。 では、これを実際に打ち込み、保存してブラウザーで見てみましょう。 きちんと文字が大きくなりましたか?

図2 HTML文書(練習品その2)の完成品


 文字の大きさを変える場合、 大きさを変えたい文字を<font>と</font>ではさみ、 <font> </font>タグのオプション (fontの後にスペースを開けて書かれている「size="○"」、○には数字が入る) で文字の大きさを指定します。
 基本の大きさは3で、1〜7の範囲で指定できます。 また、「size="+2"」のように、基準の大きさからの相対値で記述することも出来ます。


○ 2−3 タグを閉じ忘れたらどうなるか?

 <br>などを除いて、タグは基本的に閉じなくてはいけないわけですが、 では、閉じ忘れたらどうなるのでしょうか?
 普通、プログラミング言語で文法を間違えると、 エラーを起こして処理が停止するか暴走しますが、HTMLはどうなんでしょうか・・・?
 わからないなら実験すればいい。 というわけで、実際にタグを閉じずに保存してブラウザーで確認してみましょう。

 例4 HTML文書(練習品その3)
<html>
   <head>
   </head>
   <body>
   <font size="5">HTML文書(練習品その3)<br>
これはHTML入門として作成した練習品です。
細かいことを気にせず、とにかくここに書いてあるとおりに打ってみましょう。
   <br>
   <font size="2">今回は意図的にタグを閉じずにおき、 どのように処理されるかをみてみます。</font>
   </body>
</html>

 図3 HTML文書(練習品その3)の完成品


 どうでしょうか?
タグを閉じなくも機能はしてるでしょう?
 HTMLってなんてアバウトなんでしょうね(笑)


終章 最後に一言

 今回は入門ということで、用語の定義とHTMLがどんなものかを簡単に説明しました。
 ここまで読んでもらってわかったと思いますが、HTMLはとても敷居が低く、 そしてタグの使い方さえわかればとても簡単です。 非常に簡単です。 HTMLを知ってる人に2時間も教えてもらえればホームページを作れるようになるくらい簡単です(笑)
 これを読んでHTMLに興味を持った人は、 先輩を捕まえて「教えろやゴルァ!」と詰め寄りましょう。 おそらく快く教えてくれるか、たらい回しにしてくれるはずです。