初心者向き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.
となっています。 このcopyright noticeを保存する場合に限り、再配布は自由です (けど連絡してくれると嬉しい)。 同じものはniftyserve(FINET)とCOARAでも入手できます。

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

超訳者からの注意: この文書は本家版の変化に追随できていません。

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

Introduction

略語一覧

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

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

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

HTML 文書を書く

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

ドキュメントの preview には WWW ブラウザが使える。 FileメニューからOpen Localを選ぶ。 開いたウィンドウでFilterDirectoriesFilesを駆使し、 あるいは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 に表示方法を指示する。 この例文では

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の略)を使う。 例えば、他の文章へハイパーリンクを張るには:

  1. <A」と書き、空白を開ける。
  2. リンク先のファイル名をHREFに続けて書き、>を 書く。 href="filename.html" > といった風に。
  3. ハイパーリンクを張りたい文を書く。 ここに書いた文は色を変えたり、 下線を施したりして表示されるだろう。
  4. </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.co.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>dだ。
文章Aの、「文章Bへのリンク」をクリックすると文章Bの 「ハイパーリンクで指される箇所」が現れる。

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

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

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

他の指令

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

リスト

HTMLでは3種類のリストを使える。 単純なリスト・箇条書・見出し付リストである。 リストの項目の始まりを示す指示はあるが、終りを示す指示はない。

単純なリスト

  1. <ul>で単純なリストが始まる。 ULは``Unnumberd List''の略である。
  2. リストの各項目は<lI>の次に書く。 項目の終りは特に指示しない。
  3. 単純なリストは</ul>で終る。
例を示す。

  <UL>
  <LI> リンゴ
  <LI> バナナ
  </UL>
と書くと

となる。

リストの実際の表示は利用しているプログラムに依存する。 「・」で項目を示す代わりに「●」や「−」を使うかも知れない。

箇条書

箇条書には<OL>を使う。 OLは``Ordered List''の略である。 書き方は単純なリストの<UL><OL>に読み変えれば良い。 <LI>の使い方は同じ。 例を示そう。

  <OL>
  <LI> 桃
  <LI> 栗
  <LI> 三年
  </OL>
は以下のようになる。

  1. 三年

見出しつきリスト

見出しつきリストには<DL>を使う。 見出しは<DT>で示す。 DTは``Description Title''の略である。 見出しと項目の内容は<DD>で区切られる。 DDは``description description''の略である。 適当な箇所で改行すると書き易くて良い。

では例を示そう。

  <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>
このリストは次のように表示される。

整形済みテキスト

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@isl.ntt.jp) & 稲村(inamura@isl.ntt.jp)
  </ADDRESS>
である。あなたにはこういう風に見えている筈だ。

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

注: <ADDRESS>は郵便用の住所用ではない。 郵便用の住所には強制的改行を使うのが良い。

フォント

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

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

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

メタキャラクタ

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

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

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

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

ただし現在のところ、日本語との共存は難しい。 この下のリストにLatin-1 が表示されていたらあなたの使っているプログラムは偉い。(三浦注)
例えば: こういったエスケープシーケンスの多くの例はCERNの ここにある。

注: HTMLは大文字小文字を区別しないが、 エスケープシーケンスだけは区別がある。&LT;は&lt;と同じではない。

強制改行

<BR>の箇所で改行する。改行幅を変えたりはしない。 (多くのブラウザは<P>を、改行+空行にする)

<BR>は、例えば住所を表示するのに便利だ:

National Center for Supercomputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois 61820-5518<BR>
のように使う。

水平線

<HR>はブラウザの表示に幅一杯の水平な線になる。

インライン画像

多くのブラウザは X Bitmap (XBM) や GIF フォーマットの画像を 文書内に表示できる。 画像を表示するにはそれなりの処理が必要で、 従って表示されるまでに時間がかかる。 文書内に含む画像はほどほどにすべきである。 画像の処理が必要なので表示までに時間がかかる。 同じ画像を一つの文書内で複数回利用すれば、 一度だけ使う場合よりは早く表示します。

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

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

    <IMG SRC="filename.GIF">

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

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

    <IMG ALIGN=top SRC="filename.GIF">
同様に、
    <IMG ALIGN=MIDDLE SRC="filename.GIF">
と書けば 真中に揃う。

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

外部画像

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

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

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

とする。 GIF、TIFF、JPEG、RGB、または HDF フォーマットの画像が利用できる。 動画像や音声も同じ方法で参照できる。例えば

<A HREF="QuickTimeMovie.mov">クイックタイム動画像</A>
でクイックタイム動画像を扱える。 主な拡張子を載せておこう。
File Type
Extension
単なるテキスト
.txt
HTML文書
.html
GIF画像
.gif
TIFF画像
.tiff
XBM画像
.xbm
JPEG画像
.jpg or .jpeg
ポストスクリプト
.ps
AIFF音声
.aiff
AU音声
.au
QuickTime動画像
.mov
MPEG動画像
.mpeg or .mpg

困った時には

ある程度現実的な例

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


  <HEAD>
  <TITLE>長い例</TITLE>
  </HEAD>
  <BODY>
  <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>
  </BODY>

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

ここで出てきた<HEAD>…</HEAD>は文書の情報(ヘッダ)を、 <BODY>…</BODY>は文書本体を示す。 これらは表示には関係ないが、ある種の目的には大変便利である。 例えばMacintosh用NCSA Mosaic 2.0は、ヘッダをまず表示して、 ユーザに残りを見たいか聞くことができるのだ。 このように有用なので、是非書いて欲しい。

高度な情報

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


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