What's "html" file? : html ファイルって何?

To: xxx
Cc: hayashi@rd.dnc.ac.jp, xxx, xxx
Subject: What's "html" file? (Re: Notice about file structure)
From: Atsuhiro Hayashi <hayashi@rd.dnc.ac.jp>
Date: Sat, 22 Jan 2000 20:34:03 +0900
林です。

いよいよ残すところ、あと一日ですね。xx さんは大丈夫かなぁ?

> xx です。
>
> ということで、次回、Welcome.htmlの書き方講座楽しみにしておりますのでよろしくお願い
> いたします。^_^

はい、やっと書き上げました。まだ不完全な部分や、 うまく説明できていない部分もあると思いますが、 順に改訂していければ良いなぁと思っています。 と言うことで、お気付きの点は、お教えいただければ幸いです。

少し長いですが、お付き合い下さい。では、はじまり、始まりぃ。(^_^)

hayashi@rd.dnc.ac.jp
Atsuhiro Hayashi (林 篤裕)

=== From Here ===

一連の作業、ご苦労様でした。

さて、お待たせしてしまいました。前回の解説から随分と 時間が経ってしまいましたね。すみません。

本日のお題は「html ファイルって何?」です。

html ってのは、Hyper Text Markup Language の略でして、 有機的に関連付けられたテキストを表現するため(後述)の計算機言語の一つです。 計算機言語で有名なのは C とか Fortran、COBOL でしょうか? Pascal とか BASIC なんてのもありますね。
「エェ?! 私はそんなの組んだことないよ」とおっしゃるかもしれませんが、 そこは心配ご無用。そんなに複雑なものではありません。 せいぜい「文章を表現するためのルール(文法)がある」と言うことだけを 認識していただければそれで十分です。

前回、テキストファイル(*.txt)を作ってもらって Netscape で 読めることを確かめてもらいました。Netscape は読み込んだファイルの 拡張子が *.txt だった場合、テキストファイルだと認識して読み込んだ文字列を そのまま何の加工もせずに画面に表示するようになっています(デフォルトで)。

拡張子が *.html (または *.htm) の場合は、html ファイルであると認識して html の文法に従って画面に表示を行います。テキストファイルでは、 その内容が見出しであろうが、文章であろうが同じサイズ、同じ色(黒)で 表示されます。しかし、人に解りやすい文章にしようとすると、 見出しを大きくしたり、箇条書きに番号や黒丸を付けたり、 強調したいところをボールド(太く)にしたり、色を付けたり、 段下げをしたり、節の変り目で区切り線を入れたり、...と いろいろと飾り(修飾と言う)を付けたくなります。 これは丁度、皆さんがワープロソフト(MS-Word 等)で論文を書くことを 思ってもらえば良いでしょう。抑揚(メリハリ)のないテキストファイルで 掲載されては、なかなか読みにくいことは容易に想像できるでしょう。
つまり、ちょっとカッコ良く言うと、html は文章の構造を記述する 言語なのです。章立て、節立て、箇条書き、... を簡単に表現するために たくさんの便利なルールが用意されています。
また、テキストファイルでは絶対に真似できないこととして、 関連するページにジャンプしたり、画像を貼り付けたりもできます。

では、能書きはこれぐらいにして、まずは他人のページがどのように 作られているかを眺めてみましょう。例えば、asahi.com でも 私のページでもかまいません。Netscape で開いて、[表示]-[文書のソース] の 画面を開けてもらうとそのページの元になっている記述(ソースファイル)を 見ることができます。
なお、大なり記号で囲まれた記号は「タグ」と呼ばれます。 いろいろなタグがありますので、代表的なものを以下に紹介します。

  1. html ファイルは <HTML> で始まり </HTML> で終わる。
    「このページの記述言語は、html だよ」と宣言するタグです。必ず付けましょう。 なお、html は計算機言語ですので、バージョンがあって、現在は 4.01 が 最新のようです。バージョンごとに少しずつ書き方が異なりますが、 どのバージョンで記述したかも記述するのが、最近のルールのようです。 それには <!DOCTYPE> タグを使うようです。

  2. <TITLE> 〜 </TITLE>
    ブラウザの上部枠に書かれる文字を指定するタグです。 主にページの表題に使われますので、TITLE タグと呼ばれています。 以前はこの部分に日本語が使えませんでしたので、 英語で書くことをお勧めします。また、海外の人が見ることを考えても、 この部分は日本語にしないほうが良いように感じています。

  3. <BODY> 〜 </BODY>
    実際に表示される本文部分を示すタグです。

  4. <H1> 〜 </H1> とか <H2> 〜 </H2> とか <H3> 〜 </H3> とか。
    表題の文字を表すタグです(Heading)。数字によって表示される 文字サイズが異なります(1が一番大きい)ので、文字を大きくするタグだと 思っている人もいますが、それは誤解です。章や節の名称を書くタグですね。

  5. <font size="12"> 〜 </font>
    文字サイズを指定するタグです。囲まれた部分が 12 のサイズの文字で 表示されます。なお、12 の代わりに符合付き数字(-1 とか +3 とか)で指定すると、 相対的なサイズ指定になります。-1 なら直前のサイズより一つ小さいサイズで 表示してくれます。

  6. <font color="red"> 〜 </font>
    色を指定できます(この例では赤)。前項と同じ font タグですね。 font タグには、このようにいくつかのオプションがあって、 文字サイズや色を指定できます。
    なお、<body> タグで文字やバックグラウンドの色を指定することもできますが、 これは、ページ全体に対する指定だと思った方が良いでしょう。

  7. <OL> 〜 </OL> または <UL> 〜 </UL>
    箇条書きをするためのタグです。囲まれた中で <LI> を使うと、 数字 (1., 2., 3., ...。OL の場合。Ordered Listの略?) や 黒丸 (・、UL の場合。Unordered List の略?) を書いてくれます。 <LI> は List の略でしょう。また、数字の代わりに、 a, b, c, ... とするには、<OL type=a> と書けば良いですし、 i, ii, iii, ... とするには、<OL type=i> と書けば良いです。

  8. <!-- 〜 -->
    コメント用のタグです。ブラウザに表示させたくないけど、 メモとして残しておきたいことはこの中に書きます。

  9. <strong> 〜 </strong>
    太文字で表示されるタグです。強調用に使われます。 同じような効果があるものに、<B> 〜 </B> というものがありますが、 これは Bold ですので、強調とは別の意味で使われる方が良いと思います。 文字種を指定するものには <I> 〜 </I> と言う Italic 体を指定するものも あります。<U> 〜 </U> は下線だそうです(未確認)。

  10. <address> 〜 </address>
    メールアドレスを表示するためタグです。が、実際にはイタリックで 表示されるだけなので、<I> 〜 </I> と同等じゃないのかなぁと思っています。

  11. <p> 〜 </p>
    段落タグです。が、多くの場合 <p> だけで使われることが多いです。 見た目には「一行空行が入る改行」が発生します。

  12. <br>
    改行タグです。前項も同様ですが、html 内の改行は TeX と同様に 無視されてつながってしまいますので、意図して改行したい場合に使います。

  13. <pre> 〜 </pre>
    書かれたそのままを表示するタグです。事前に整形されていると言うことで、 PreFormated の略のようです。具体的にはプログラムを掲載する場合などに 使います。私はメールをそのままの形(改行位置や記号)で掲載するのに 多用しています。TeX の verbatim 環境に相当します。

  14. <a href="http://www.dnc.ac.jp/~ice/foo.html"> 〜 </a>
    アンカータグです。ジャンプするためのタグですね。 クリックする場所を指定します。クリックされると 指定された URL にページの表示を切り替えてくれます。お馴染でしょう。
    なお、あまり使うことはないかもしれませんが、 <a name="Lib110"> 〜 </a> と言う形で、ページの 「この場所」に名前を付けることができます。名前を付けておけば、 <a href="http://www.dnc.ac.jp/~ice/foo.html#Lib110"> と 指定することによって、ページのその部分にジャンプしてくることができます。 大きなページ内で、特定の場所を指定する場合に重宝します。

  15. <IMG ALT="a photo about the skiing" SRC="ski01.jpg">
    画像を貼るタグです。SRC のところに画像ファイルを指定します。 ALT には、画像の説明を書きます。必ず付けましょう。
    応用として、私は「前ページを戻る」のに以下のように書いています。 <a href= と <IMG を組み合わせて表現しているのです。 なお、二つのドット(..) は一つ上のディレクトリを参照する UNIX のルールを意味します。

    >> <A HREF=".."> <IMG ALT="[Back]" SRC="../back.xbm" BORDER=0> ホームページ</A>へ戻ります

  16. <DL> 〜 </DL>
    これはタイトル付きの箇条書きタグです。段下げ(インデント)にも使います。 Definition List の略だとか。囲まれた中で、<DT> に続いてタイトルを、 <DD> に続いてその説明を書くのに使います。 が、私は最近あまり使わなくなりました。

# なお、大文字/小文字は区別しません。趣味で混在していますが、お許し下さい。

私が使うのはこれぐらいでしょう? 概ね、この順で知っておくべき 優先順位(使用頻度)だと思ってもらって良いでしょう。 html には多くのタグが用意されていますので、もっともっと知るには、 自分にとって読みやすい本を購入してくるか、 先人が作ってくれている Web ページを参照するのが良いでしょう。

また、Web サーフィンをしていて、感じの良いページを見つけたら、 どの様なタグを使って実現されているのかをじっくり拝見させてもらえば、 上達の近道になると思います。

なお、html の文法にのっとって記述されているかを チェックしてくれるサイトがあります。 私の Web ページのうち、新しいいくつかのページは ここで高得点を取れる(つまり文法に準拠してる)ように書き換えたものです。 トップページ( http://peter.rd.dnc.ac.jp/~ice/Welcome.html) は 古いので「-26 点」ですが、日記のページ (http://peter.rd.dnc.ac.jp/~ice/diary/Welcome.html) は「90点」です。 順に改造していっています。 本来なら全てを書き直せば良いのですが...。サボってます。
日記のページをご覧になると判りますが、 先頭にいろいろとゴチャゴチャ付いていますが、 私も全ての意味は知りません。もう忘れましたが、 どこかで高得点を取れるページを見つけてきて、 それを自分用に書き換えたように記憶しています。

html というか、 Web の良いところはソースが簡単に見られるので、 人の真似がしやすいのです。気に入ったページや 高得点を取るページを見つけてきて、それを参考にしながら 自分のを作成していけば、確実に良いページを作ることができるでしょう。

# 掲載内容については、自分で工夫するしかありませんが...。

説明は以上です。お解りにいただけましたでしょうか? なお、私のページのうち、講義のページ群( http://peter.rd.dnc.ac.jp/~ice/kougi/ )をご覧になると、 上記のタグの多くが使われているので、どの様に使えば良いかも ある程度判ると思います。ただし、得点は低いと思いますが。

最後に参考になりそうな Web ページを幾つか紹介しておきます。

  1. とほほの WWW 入門 : HTML の文法を解説したページ
    私は、html の文法が判らなくなったらここを参考にしています。 色見本とかも参考になります。
    >> http://tohoho.wakusei.ne.jp/

  2. Another HTML-lint gateway : HTML の採点をしてくれるページ
    文法にのっとっているかを判断できます。
    >> http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

  3. html のルールを無視したページが多いことを危惧しているページ
    ブラウザがパワフルというか、勝手に解釈してくれるが故に、 行儀の悪いページが増えています。そのことに警鐘を鳴している人が 少なからずおられるのですが、初心者には小難しい(小言)ことも書いてあるので、 最初は読まなくても良いと思います。 次のステップに移るときに、流して読む程度で良いでしょう。 一応こう言うのもあると言うことだけをお知らせしておきます。

    1. 「優しいHTML」の書き方
      >> http://www.din.or.jp/~tkent/goodhtml.html

    2. 「ホームページ」のウソ
      >> http://web.kyoto-inet.or.jp/people/harunobu/iitai.html

長々と読んでいただきありがとうございました。

Web はどこからでも、いつでも、だれでもが見てくれますので、 自分がひっそりと書き溜めたものに、日の目を見させることができ、 場合によっては、他人の役に立つことも可能でしょう。 自分の労力が報われるチャンスです。面白いとは思いませんか?

ご質問があれば何なりとどうぞ。

では、html を駆使したページを使って、世界に情報発信をして下さい。
=== To Here ===

登録日 : 00年01月
Atsuhiro Hayashi (hayashi@rd.dnc.ac.jp)
[DIR] html 作成方法のページへ戻ります