To: xxx Cc: hayashi@rd.dnc.ac.jp, xxx, xxx Subject: What's "html" file? (Re: Notice about file structure) From: Atsuhiro Hayashi 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 は計算機言語ですので、バージョンがあって、現在は 4.01 が最新のようです。バージョンごとに少しずつ書き方が異なりますが、どのバージョンで記述したかも記述するのが、最近のルールのようです。それにはタグを使うようです。 2) ～ブラウザの上部枠に書かれる文字を指定するタグです。主にページの表題に使われますので、TITLE タグと呼ばれています。以前はこの部分に日本語が使えませんでしたので、英語で書くことをお勧めします。また、海外の人が見ることを考えても、この部分は日本語にしないほうが良いように感じています。 3) ～実際に表示される本文部分を示すタグです。 4)

～

とか

～

とか

～

とか。表題の文字を表すタグです(Heading)。数字によって表示される文字サイズが異なります(1が一番大きい)ので、文字を大きくするタグだと思っている人もいますが、それは誤解です。章や節の名称を書くタグですね。 5) ～文字サイズを指定するタグです。囲まれた部分が 12 のサイズの文字で表示されます。なお、12 の代わりに符合付き数字(-1 とか +3 とか)で指定すると、相対的なサイズ指定になります。-1 なら直前のサイズより一つ小さいサイズで表示してくれます。 6) ～色を指定できます(この例では赤)。前項と同じ font タグですね。 font タグには、このようにいくつかのオプションがあって、文字サイズや色を指定できます。なお、タグで文字やバックグラウンドの色を指定することもできますが、これは、ページ全体に対する指定だと思った方が良いでしょう。 7)

～または

～箇条書きをするためのタグです。囲まれた中で

を使うと、数字 (1, 2, 3, ...。OL の場合。Ordered Listの略?) や黒丸 (・、UL の場合。Unordered List の略?) を書いてくれます。

は List の略でしょう。また、数字の代わりに、 a, b, c, ... とするには、

～

だけで使われることが多いです。見た目には「一行空行が入る改行」が発生します。 12)
改行タグです。前項も同様ですが、html 内の改行は TeX と同様に無視されてつながってしまいますので、意図して改行したい場合に使います。 13)

～

～

と指定することによって、ページのその部分にジャンプしてくることができます。大きなページ内で、特定の場所を指定する場合に重宝します。 15) a photo about the skiing

画像を貼るタグです。SRC のところに画像ファイルを指定します。 ALT には、画像の説明を書きます。必ず付けましょう。応用として、私は「前ページを戻る」のに以下のように書いています。

ホームページ

～

に続いてタイトルを、

に続いてその説明を書くのに使います。が、私は最近あまり使わなくなりました。 # なお、大文字/小文字は区別しません。趣味で混在していますが、お許し下さい。私が使うのはこれぐらいでしょう? 概ね、この順で知っておくべき優先順位(使用頻度)だと思ってもらって良いでしょう。 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 の良いところはソースが簡単に見られるので、人の真似がしやすいのです。気に入ったページや高得点を取るページを見つけてきて、それを参考にしながら自分のを作成していけば、確実に良いページを作ることができるでしょう。 # 掲載内容については、自分で工夫するしかありませんが...。説明は以上です。お解りにいただけましたでしょうか? なお、私のページのうち、講義のページ群をご覧になると、上記のタグの多くが使われているので、どの様に使えば良いかもある程度判ると思います。ただし、得点は低いと思いますが。最後に参考になりそうな Web ページを幾つか紹介しておきます。 A) とほほの WWW 入門 : HTML の文法を解説したページ私は、html の文法が判らなくなったらここを参考にしています。色見本とかも参考になります。 >> http://tohoho.wakusei.ne.jp/ B) Another HTML-lint gateway : HTML の採点をしてくれるページ文法にのっとっているかを判断できます。 >> http://openlab.ring.gr.jp/k16/htmllint/htmllint.html C) html のルールを無視したページが多いことを危惧しているページブラウザがパワフルというか、勝手に解釈してくれるが故に、行儀の悪いページが増えています。そのことに警鐘を鳴している人が少なからずおられるのですが、初心者には小難しい(小言)ことも書いてあるので、最初は読まなくても良いと思います。次のステップに移るときに、流して読む程度で良いでしょう。一応こう言うのもあると言うことだけをお知らせしておきます。 c1) 「優しいHTML」の書き方 >> http://www.din.or.jp/~tkent/goodhtml.html c2) 「ホームページ」のウソ >> http://web.kyoto-inet.or.jp/people/harunobu/iitai.html 長々と読んでいただきありがとうございました。 Web はどこからでも、いつでも、だれでもが見てくれますので、自分がひっそりと書き溜めたものに、日の目を見させることができ、場合によっては、他人の役に立つことも可能でしょう。自分の労力が報われるチャンスです。面白いとは思いませんか? ご質問があれば何なりとどうぞ。では、html を駆使したページを使って、世界に情報発信をして下さい。 === To Here ===