初心者向きHTMLガイド

オリジナルはここにあります。オリジナル文章のcopyright noticeは

copyright 1993, 1994 by the Board of Trustees of the University of Illinois, but we grant permission to freely distribute the document, provided you include this copyright.

となっています。

超訳は三浦史光 miura@syrinx.ntt.jpと稲村浩 inamura@nttbss.ntt.jpです。

WWWはHTML(HyperText Markup Language)で書かれた文章を見るものです。このHTMLで文書を作成する方法について述べます。

略語一覧
HTML 文書の形式
他の文書の参照
HTML 文書の表現方法
インライン画像
外部画像
困った時には
ある程度現実的な例
高度な情報

Introduction

略語一覧

WWW: World Wide Web
SGML: Standard Generalized Markup Language
DTD: Document Type Definition
HTML: HyperText Markup Language

このガイドのユーザに対する仮定

このガイドはあなたに対し、以下の仮定をしている。

WWW の一つ以上のブラウザを使える。
WWW のサーバおよびクライアントがどのように働くかを知っている。
任意の WWW サーバにアクセスできる。

HTML 文書を書く

HTML文書はplain textである。したがって任意のエディタを使って良い。 WWWの各種ブラウザ (tkWWW、各種X-Window用ブラウザ、NeXTSTEP用ブラウザ (CERN提供)) は HTML 文章の Viewer の機能を持つ。とりあえずそれを試してみるのもいいだろう。

ドキュメントの preview には WWW ブラウザが使える。 FileメニューからOpen Localを選ぶ。開いたウィンドウでFilterやDirectories、 Filesを駆使し、あるいはName of local document to openにタイプする。 OKボタンを押してしばし待て。
HTML 文章を書き直したらセーブして、Reloadせよ。

最も簡単な HTML 文書

  <TITLE>最も単純な HTML 文書の例</TITLE>

  <H1>これはレベル1の見出しである</H1>

  Hello WWW World.
  これが最初の段落である。<P>

  こっちは2つ目の段落。<P>

でき上がりの文書はここをクリックすると見られる。

HTML は tags を使ってWWW viewer に表示方法を指示する。この例文では

<TITLE> 命令から対応する </TITLE> 命令の間に文書の表題を書く。
<H1> 命令から対応する </H1> 命令の間にヘッダを書く。
<P> 命令で段落の終りを示す。

HTML では「<」と「>」の間に命令 (directive) を書いて命令とする。命令は普通2つが対になっている。終りを示す命令には「/」を使う。例えば <H1> と </H1> のようになる。 <H1> で見出しの開始を指示し、 </H1> で見出しの終了を指示する。

但しこれには例外がある。<P> はそれだけで段落を意味する。 </P> は存在しない。

注意: HTMLの命令では、大文字と小文字は区別されない。 <title> や <TITLE> は <TiTlE> と同じである。

ブラウザによっては解釈できない命令があるかもしれない。解釈できない命令は無視される。

表題 (Title)

HTML 文書には表題が必須である。表題は一般に、残りの文書とは分離して表示される。表題はまた、文書そのものの名称としても扱われる (当たり前)。従って、内容を示すように吟味しなくてはならない。短過ぎては使いものにならない。

表題は <title> で指示する。普通は HTML 文書の最初に書く。

見出し

HTML では6レベルの見出し(1から6まで)が使える。数字が小さいほど大きく、あるいは目立つフォントで表示される。普通は表題の次に <H1> を書く。見出しの書き方は

  <Hy>見出し</Hy>

y は1から6までの数字である。

ここの見出し「見出し」は

  <H3>見出し</H3>

と書いてある。結果は今あなたが見ている通り。

表題と見出しの違い: この文章を含む多くの HTML 文書の表題と見出しは同じである。しかしながら本来は<TITLE>は本の表題を示し、 <Hy>は各章を示す。

したがって、複数の HTML 文書で構成されている文章は、既に他の箇所を参照したユーザにも有用になるように見出しを書くこと。 WWWのユーザは、任意の順序で見てゆくのだから。

段落など

いわゆる「ワープロ」とは異なり、 HTML に於いては改行やホワイトスペースに大した意味がない。

改行
HTML 文書における改行は単なるホワイトスペースである。
あなたの改行とは無関係に、クライアントは任意の箇所でword wrapする。
段落の終了は以下のように<P>で示す。
  HTMLもなかなか楽しい。
  おっと、ここが最初の段落だぜ.<P>
  あらよっと。
すると
HTMLもなかなか楽しい。おっと、ここが最初の段落だぜ。
あらよっと。
となる。
ホワイトスペース

<TITLE>では、あなたが書いた通りに表示される。
それ以外の場所では、連続するホワイトスペースは1つの区切りである。

重要事項: <P>を書かないと、(あなたがどんな改行・インデントを施そうとも) 巨大な段落になってしまう。これには例外がある。<PRE>.) がその一つである。次の記述がどうなるか、考えてみると良い。

  <TITLE>最も単純なHTMLの例</TITLE><H1>これが一番の見出し
  </H1>毎度お馴染みの例である。ここで1つ目の段落が終る。<P>
  んでもって、こいつが2つ目、と。<P>

もちろん、<Hy>を独立した行にしたり、段落を空行で区切ったりすること自身は良い習慣である。

他の文書へのハイパーリンク

ハイパーリンクによって文章中の特定の箇所から他の文書や画像・音声を参照できる。これはHTMLの最も重要な機能である。表示方法を変えて、ハイパーリンクが張られていることを示すことが多い。

NCSA Mosaicは色を変え、下線を施してリンクを示すのがデフォルトである。デフォルトは「Option menu」や.Xresourcesファイルで変更できる。

HTMLでハイパーテキスト関連の指示にはA (anchorの略)を使う。例えば、他の文章へハイパーリンクを張るには:

<A」と書き、空白を開ける。
リンク先のファイル名をHREFに続けて書き、>を書く。 href="filename.html" > といった風に。
ハイパーリンクを張りたい文を書く。ここに書いた文は色を変えたり、下線を施したりして表示されるだろう。
</A>を書く。書き忘れ易いので注意。

ハイパーリンクを張った例を示そう。

  <a href="MyCity.html">私の街</a>

これで ``私の街'' の箇所からMyCity.html へのハイパーリンクが張れた。

URL(Uniform Resource Locator)

URLはWWWで用いられる形式で、世界中にあるHTML文書その他を指示できる。 URLにはアクセス方法(gopherとかWAISとか)とファイルの場所を書く。形式は以下の通り。

アクセス法://ホスト名.ドメイン名[:ポート]/パス名/ファイル名

アクセス法の主なものは以下の通り。

file: あなたが今使っている計算機のファイル。あるいは anonymous ftpで入手できるファイル。
http
gopher
WAIS

他にnews とか telnet がある。この2つはあまり使われないので説明は省略する。

ポートは多くの場合、書かなくて良い。 URLから適したポートを判断できるからだ。

この文章へのハイパーリンクを張りたい場合は次のように書くと良い。

  <A HREF="http://www.ntt.jp/docs/html-jman/ncsa-j.html">
  HTMLの書き方(入門編)</A>

原書へのハイパーリンクなら

  <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
  NCSA's HTML Primer</A>

でOKだ。これであなたの文章の「HTMLの書き方(入門編)」や ``NCSA's HTML Primer''にハイパーリンクが張られる。

CERNはここでURLに関するもっと詳しい説明をしている。 NCSAが書いた「A Beginner's Guide to URLs」はNCSA Mosaicの「Help」からも利用できる。

他の文章の特定の箇所へハイパーリンクを張る

文章全体へのハイパーリンクと同様に、文章の特定の箇所へリンクを張るのにもA指令を使う。これをクリックするとその文章のその箇所が表示される。

文章Aから文章Bのある章にハイパーリンクを張るにはまず、文章Bのその箇所に名前をつける必要がある。名前を``Jabberwocky''とすると、

  <A NAME="Jabberwocky">ハイパーリンクで指される箇所</a>.

としておこう。文章Aからハイパーリンクを張るにはファイル名の他に場所の名前も指示する。それには``#''を使う。

    これが<A HREF="documentB.html#Jabberwocky">文章Bへのリンク</a>だ。

文章Aの、「文章Bへのリンク」をクリックすると文章Bの「ハイパーリンクで指される箇所」が現れる。

同じ文章の1節へハイパーリンクを張る

他の文章への場合と同様である。同じ文章であるからファイル名は省略できる。

NCSA Mosaicではハイパーリンクで同じ文書内で移動した後、 Backボタンを押しても元の箇所には戻らない。戻るにはスクロールバーを使うしかない。 Version 2.0では、Backを押すと文章の先頭に戻る。

他の指令

今までの例は比較的単純であった。 HTMLには他にもリスト・引用・フォントの変更など、様々なことが指示できる。

  <DL>
  <DT> National Center for Supercomputing Applications
  <DD> NCSAはイリノイ大学Urbana-Champaign校にある。
    	アメリカ合衆国の
    	National Metacenterにある4つの計算機関係の部門の一つである。
  <DT> Cornell Theory Center
  <DD> CTCはコーネル大学Ithaca校(ニューヨーク)にある。
    	CTCも、計算機関係の4つの国立機関の1つである。
  </DL>

とすると以下のように表示される。

National Center for Supercomputing Applications: NCSAはイリノイ大学Urbana-Champaign校にある。アメリカ合衆国の National Metacenterにある4つの計算機関係の部門の一つである。
Cornell Theory Center: CTCはコーネル大学Ithaca校(ニューヨーク)にある。 CTCも、計算機関係の4つの国立機関の1つである。

<DT>や<DD>に、複数の段落やリストなどを含むことができる。

リストのネスト

リストはいくらでもネストすることができる。リストの項目はそれ自身がリストを含むことができる。項目がいくつかの段落であっても良く、それらがまた入れ子になったリストを含んでも構わない。箇条書以外のリスト(<OL>以外のリスト) の表示はプログラムに依存します。具体的には、異なるネストレベルに応じて項目を示す記号や段づけを変えないかも知れない。

次の例に示すように、NCSA Mosaic はレベルに応じて段づけと項目を示す記号を変更する。

入れ子になったリストの例:

  <UL>
  <LI> 日本で好まれている麺類を2つ:
    <UL>
    <LI> ラーメン
    <LI> ソーメン
    </UL>
  <li> なぜか続いて唱えられる麺類:
    <UL>
    <LI> ヒヤソーメン
    </UL>
  </UL>

このリストは次のように表示される。

日本で好まれている麺類を2つ:
- ラーメン
- ソーメン
なぜか続いて唱えられる麺類:
- ヒヤソーメン

整形済みテキスト

pre 命令 (``preformatted''の略)は固定幅のフォントを指示し、空白や改行、タブを(HTMLの様にではなく) 通常のテキストのような意味を持たせます。プログラムのリストを表示する時などに便利です。たとえば次の様に書くと、


<PRE>
  #!/bin/csh                           
  cd $SCR                             
  cfs get mysrc.f:mycfsdir/mysrc.f   
  cfs get myinfile:mycfsdir/myinfile   
  fc -02 -o mya.out mysrc.f           
  mya.out                              
  cfs save myoutfile:mycfsdir/myoutfile 
  rm *                                
</PRE>

こんな風に表示されます。

  #!/bin/csh                           
  cd $SCR                             
  cfs get mysrc.f:mycfsdir/mysrc.f   
  cfs get myinfile:mycfsdir/myinfile   
  fc -02 -o mya.out mysrc.f           
  mya.out                              
  cfs save myoutfile:mycfsdir/myoutfile 
  rm *

<pre> の中でもハイパーテキストを参照したり他のHTML命令を利用したりできます。

引用

<blockquote> と </blockquote> で引用部分を1つのブロックにできる。

例:

  <blockquote>
  Let us not wallow in the valley of despair. 
  I say to you、my friends, we have the difficulties 
  of today and tomorrow. <P>

  I still have a dream. It is a dream deeply rooted in the
  American dream. <P>

  I have a dream that one day this nation will rise up and 
  live out the true meaning of its creed. We hold these truths 
  to be self-evident that all men are created equal. <P>
  </blockquote>

とすると

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.
I still have a dream. It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

となる。

アドレス

<ADDRESS> 命令はHTML文書の中文書の著者を特定して、その著者と連絡をとる一般的な方法を示す (例えばe-mailアドレス)。大抵ファイルの最後で、左寄せになっている。

例えばこの入門の最後の部分は、

  <ADDRESS>
  初心者向きHTMLガイド / NCSA / pubs@ncsa.uiuc.edu
  </ADDRESS>
  <ADDRESS>
  超訳 三浦(miura@syrinx.ntt.jp) & 稲村(inamura@nttbss.ntt.jp)
  </ADDRESS>

である。あなたにはこういう風に見えている筈だ。

初心者向きHTMLガイド / NCSA / pubs@ncsa.uiuc.edu

超訳三浦(miura@syrinx.ntt.jp) & 稲村(inamura@nttbss.ntt.jp)

フォント

個々の単語や文は特定のスタイルのもとに配置される事がある。論理的(Logical) スタイルではプログラムが詳細を決める。例えば、 <CITE> はイタリックフォントで表示されるかも知れない。 <CITE> という命令を打ち込むたびにプログラムは自動的にそのテキストをイタリックに表示する。

物理的(physical) スタイルでは、あなたが決めて、あなたがコードした通りに表示される。例えば<I>はイタリックで表示する。

HTML文書では、可能な限り論理的なスタイルをとるべきである。将来のHTMLの実現においては物理的スタイルは一つも実現されないかも知れない。

イタリック
- <I>text</i> はテキストをイタリックにする。 (HTML Primer)
- <em>text</em> もテキストをイタリックにする。 (only one viewer)
- <cite>text</cite> はマニュアルや章、本の名前の紹介に用いられる。(HTML Primer)
- <var>text</var> は変数を意味する。 (filename)
ボールド
- <b>text</b> でテキストがボールドになる。 (Important)
- <strong>text</strong> もテキストを強調する。 (Note:)
固定幅フォント
- <tt>text</tt> はテキストを固定幅フォントで配置する。(1 SU = 1 CPU hour)
- <code>text</code> もテキストを固定幅フォントで配置する。(1 SU = 1 CPU hour)
- <samp>text</samp> は例としてテキストを表示する。 (-la)
- <kbd>text</kbd> はキーボードのキートップを表示する。(HELP)
- <dfn>text</dfn> は定義をイタリックで表示する。

メタキャラクタ

ASCII (or ISO 8859) 文字の中に、 "そのまま"ではHTML文書の中で使えないメタキャラクタが3つある。左角括弧(<)、右角括弧(>)、そしてアンパサント(&)である。

不等号は(上で示したように)HTMLの指示を示すのに用いられ、アンパサント(&)はこれらや他の文字のエスケープに用いられる:

< は <を表す。
> は >を表す。
& は &を表す。

セミコロンを忘れ易いので注意。

他にもエスケープシーケンスがあって、 8-bit キャラクタセット(ISO 8859-1)もサポートしている。

ただし現在のところ、日本語との共存は難しい。この下のリストにLatin-1 が表示されていたらあなたの使っているプログラムは偉い。(三浦注)

例えば:

ö で、小文字の o にウムラウトが付く: ö
ñ で、小文字の n にチルダが付く: ñ
È で、大文字の E にグレーブマークが付く: È

こういったエスケープシーケンスの多くの例はCERNのここにある。

インライン画像

NCSA Mosaic は X Bitmap (XBM) や GIF フォーマットの画像を文書内に表示できる。 画像の処理が必要なので表示までに時間がかかる。 同じ画像を一つの文書内で複数回利用すれば、一度だけ使う場合よりは早く表示します。

注意: <img> という命令は HTML の拡張で、 NCSA Mosaicで最初に実現された。他の World Wide Web プログラムでは認識されないかもしれない。

インライン画像を文書に含めるには、以下のようにする:

    <IMG SRC="filename.GIF">

とすると画像の下端に、続く文章の下端が揃えられる。

文章の上部で揃える場合は以下のようになります:

    <IMG ALIGN=top SRC="filename.GIF">

もし(画面を殆んど占める程)大きな画像を使いたい場合、画像指定パラメータの前後に1つずつ段落終了指示(<p>)を入れた方が良い。 (もし他のウインドウを開きたければ、下の説明を見よ)。

外部画像

縮小版の画像をインライン画像としたものや単語でリンクしておいて、利用者がクリックした時に大きな画像を別のウィンドウで表示させることができる。これが外部画像である。文書本体の処理を遅くしないことが利点である。単語からリンクを張った場合はもちろんのこと、小さなインライン画像にハイパーリンクを張った場合ですら有効である。

外部文書としての画像への参照を入れるには、

    <A HREF = "filename.gif">link anchor</A>

とする。 GIF、TIFF、JPEG、RGB、または HDF フォーマットの画像が利用できる。

困った時には

一部の HTML 命令は入れ子にすることができるが (例えば見出しの中にアンカー(anchor)を置く事ができる)、重なり合ってはいけない。例えば以下の例はHTMLとして間違っている:
```
    <h1>これは <a name="foo">間違った HTML</h1></a>
```
現在の多くのWWWプログラムは間違ったHTMLを扱うのが苦手なので、どうなるかわかったものではない。
NCSA Mosaicでは、<img>で指示された画像がなかったりサーバから得られなかったりした場合、 NCSAロゴが代わりに出る。例えば、 <img href="DoesNotExist.gif"> (ここで"DoesNotExist.gif" は存在しないファイル) とすると下記のようになる:

こうなったら、その参照された画像が実際に存在しているか、そのハイパーリンクが正しいかを確認すべきである。ファイルのパーミッションが正しくセットされているか確認する (world-readable:誰でも読める事)。

ある程度現実的な例

これはHTML文書の長めの例:

  <TITLE>長めの例</TITLE>
  <H1>長めの例</H1>

  これはかんたんな HTML 文書だよ。
  ここが最初のパラグラフ。<P>

  ここが2番目のパラグラフで、特殊効果を見せちゃいます。

  これは <I>italics</I> な単語だね。
  これは <B>bold</B> にした単語だ。
  インラインのGIF画像: <IMG SRC="myimage.gif">. 
  <p>

  この3番目のパラグラフでは、リンクを使って見よう。
  単語 <A HREF="subdir/myfile.html">foo</A> で
  ファイル "subdir/myfile.html" に ハイパーテキストリンクを張って
  いるよ(このリンクを手繰って見ても、
  エラーメッセージを見る羽目になるだろうけれど)。

  <H2> 第2レベルの見出し </H2>

  このセクションのテキストは固定幅フォントで表示される筈です:
  <P>

  <PRE>
      On the stiff twig up there
      Hunches a wet black rook
      Arranging and rearranging its feathers in the rain ...
  </PRE>

  これはアンダーライン付きの2項目: <P>

  <UL>
  <LI> クランベリー
  <LI> ブルーベリー
  </UL>

  これで僕の文書の例はおしまい <P>

  <address>Me (me@mycomputer.univ.edu)</address>

ここをクリックするとフォーマットされたものを見ることができる。

高度な情報

さらなるHTMLに関する情報は、以下のハイパーリンクで得られる。

HTML クイックリファレンスガイドにはわかり易い HTML コードのリストがついている。
公式 HTML 仕様
HTML 開発についてのRFC (Request for Comments)
SGML, the Standard Generalized Markup Language の解説
URL (Uniform Resource Locator) 仕様
オンラインハイパーテキスト文書の構造についてのスタイルガイド

初心者向きHTMLガイド/ NCSA / pubs@ncsa.uiuc.edu